This commit is contained in:
Andras Bacsai
2023-06-16 12:00:36 +02:00
parent c4c2e81701
commit 8daad8f8b8
12 changed files with 78 additions and 30 deletions

View File

@@ -15,20 +15,21 @@
<div class="w-full">
@if ($type === 'password')
<div class="w-full join" x-data>
<input class="join-item" @readonly($readonly) @disabled($disabled || $errors->isNotEmpty()) type={{ $type }}
id={{ $id }} name={{ $name }} value={{ $value }}
placeholder={{ $placeholder }}>
@if ($cannotPeakPassword)
<span x-on:click="changePasswordFieldType('{{ $id }}')" x-cloak
@class([
'border-l-0 border-none rounded-r no-animation h-7 btn join-item btn-xs',
'bg-coolgray-200/50 hover:bg-coolgray-200/50 text-opacity-25' =>
$disabled || $readonly,
'bg-coolgray-200 hover:bg-coolgray-200' => !$disabled || !$readonly,
])><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<div class="w-full rounded join" x-data>
<input class="join-item" wire:model.defer={{ $id }} wire:dirty.class="input-warning"
@readonly($readonly) @disabled($disabled || $errors->isNotEmpty()) type={{ $type }} id={{ $id }}
name={{ $name }} @isset($value) value={{ $value }} @endisset
@isset($placeholder) placeholder={{ $placeholder }} @endisset>
@if (!$cannotPeakPassword)
<span x-on:click="changePasswordFieldType" x-cloak @class([
'border-l-0 border-none rounded-r no-animation h-7 btn join-item btn-xs',
'bg-coolgray-200/50 hover:bg-coolgray-200/50 text-opacity-25' =>
$disabled || $readonly,
'bg-coolgray-200 hover:bg-coolgray-200' => !$disabled || !$readonly,
])><svg
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path

View File

@@ -27,13 +27,28 @@
</main>
<x-version class="fixed left-2 bottom-1" />
<script>
function changePasswordFieldType(id) {
console.log(id)
const input = document.getElementById(id);
if (input.type === 'password') {
input.type = 'text';
} else {
input.type = 'password';
function changePasswordFieldType(event) {
const element = event.target.parentElement.parentElement.children[0];
if (element.nodeName === 'INPUT') {
if (element.type === 'password') {
element.type = 'text';
} else {
element.type = 'password';
}
}
if (element.nodeName === 'DIV') {
if (element.children[0].type === 'password') {
element.children[0].type = 'text';
} else {
element.children[0].type = 'password';
}
}
if (element.nodeName === 'svg') {
if (element.parentElement.parentElement.children[0].type === 'password') {
element.parentElement.parentElement.children[0].type = 'text';
} else {
element.parentElement.parentElement.children[0].type = 'password';
}
}
}
</script>

View File

@@ -40,6 +40,24 @@
let checkHealthInterval = null;
let checkIfIamDeadInterval = null;
function changePasswordFieldType(event) {
const element = event.target.parentElement.parentElement.children[0];
if (element.nodeName === 'INPUT') {
if (element.type === 'password') {
element.type = 'text';
} else {
element.type = 'password';
}
}
if (element.nodeName === 'DIV') {
if (element.children[0].type === 'password') {
element.children[0].type = 'text';
} else {
element.children[0].type = 'password';
}
}
}
function revive() {
console.log('Checking server\'s health...')
checkHealthInterval = setInterval(() => {