101 lines
6.6 KiB
PHP
Executable File
101 lines
6.6 KiB
PHP
Executable File
<div x-data="{modalPassword : @entangle ('modalPassword')}">
|
|
|
|
<div class=" absolute backdrop-blur-sm bg-white/70 left-0 bottom-0 top-0 right-0 h-full z-40" wire:loading wire:target="update,cambiar_password,confirmar,limpiarContra">
|
|
<div class="grid h-full place-items-center ">
|
|
<div class="max-w-xs">
|
|
<img src="./img/loading.gif" alt="" class="w-full text-center" >
|
|
<p class="text-gray-500 text-center">Cargando</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white sm:w-[25rem] p-5 rounded-[1rem] border-b border-gray-200 mx-auto shadow-md">
|
|
|
|
<div class="mb-4">
|
|
<div class="flex justify-center gap-6 mb-2">
|
|
<div class="rounded-full border-2 border-neutral-200 shadow-sm w-24 h-24 overflow-hidden">
|
|
@if ($url_imagen)
|
|
<img src="{{ $url_imagen->temporaryUrl() }}" alt="" class="w-24 h-24 object-contain">
|
|
@elseif($url_imagen_d)
|
|
<img src="{{ $url_imagen_d }}" alt="" class="w-24 h-24 object-contain">
|
|
@else
|
|
<img src="https://ui-avatars.com/api/?name={{ Auth::user()->name ?? 'no name' }}" class="w-24 h-24 object-cover">
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<label for="subir_imagen" class="text-[#B221FD] hover:text-[#7a02b8] cursor-pointer">Cambiar foto</label>
|
|
<input type="file" id="subir_imagen" wire:model="url_imagen" class="hidden border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="nombre" class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
|
|
<input type="text" id="nombre" wire:model="nombre" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email:</label>
|
|
<input type="text" id="email" wire:model="email" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="celular" class="block text-gray-700 text-sm font-bold mb-2">Celular:</label>
|
|
<input type="text" id="celular" wire:model="celular" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="cedula" class="block text-gray-700 text-sm font-bold mb-2">Cedula:</label>
|
|
<input type="text" id="cedula" wire:model="cedula" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="rol" class="block text-gray-700 text-sm font-bold mb-2">Rol:</label>
|
|
<input type="text" id="rol" readonly wire:model="rol" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<span>
|
|
<button wire:click="cambiar_password" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-[6px] sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Cambiar password</button>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="bg-white py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly">
|
|
<span>
|
|
<button wire:click="update" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal contraseña --}}
|
|
<div x-cloak x-show="modalPassword"
|
|
x-transition:enter="transition duration-350"
|
|
x-transition:enter-start="opacity-0 scale-100"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition duration-350"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-100" class="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
|
|
<div class="grid h-full place-items-center">
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
|
|
|
|
<div class="mb-4 mt-4">
|
|
<label for="newPassword" class="block text-gray-700 text-sm font-bold mb-2">Nueva contraseña:</label>
|
|
<input type="text" id="newPassword" wire:model="newPassword" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:ring-0 focus:border-neutral-300 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
@error('newPassword') <span class="error text-red-400">{{ 'Diligencie correctamente*'}}</span> @enderror
|
|
</div>
|
|
|
|
<div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
|
|
<span>
|
|
<button wire:click="confirmar" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
|
|
</span>
|
|
<span>
|
|
<button wire:click="limpiarContra" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|