mirror of
https://github.com/emailerfacu-spec/minix-front.git
synced 2026-04-04 13:40:43 -03:00
primera ui de la pagina para recuperar contraseña
This commit is contained in:
32
src/routes/password-reset/+page.svelte
Normal file
32
src/routes/password-reset/+page.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import BreadcrumbItem from '@/components/ui/breadcrumb/breadcrumb-item.svelte';
|
||||
import BreadcrumbList from '@/components/ui/breadcrumb/breadcrumb-list.svelte';
|
||||
import BreadcrumbSeparator from '@/components/ui/breadcrumb/breadcrumb-separator.svelte';
|
||||
import Breadcrumb from '@/components/ui/breadcrumb/breadcrumb.svelte';
|
||||
|
||||
import Pasos from './Pasos.svelte';
|
||||
import Card from '@/components/ui/card/card.svelte';
|
||||
import CardContent from '@/components/ui/card/card-content.svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
import IngresarEmail from './IngresarEmail.svelte';
|
||||
import Otp from './Otp.svelte';
|
||||
import NuevaPass from './NuevaPass.svelte';
|
||||
|
||||
let estado: 'email' | 'otp' | 'nuevapass' = $state('email');
|
||||
let email: string = $state('');
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
|
||||
<div class="w-full max-w-6xl">
|
||||
<Pasos {estado} />
|
||||
<div class="mt-6">
|
||||
{#if estado === 'email'}
|
||||
<IngresarEmail bind:estado bind:email />
|
||||
{:else if estado === 'otp'}
|
||||
<Otp bind:estado />
|
||||
{:else if estado === 'nuevapass'}
|
||||
<NuevaPass />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
63
src/routes/password-reset/IngresarEmail.svelte
Normal file
63
src/routes/password-reset/IngresarEmail.svelte
Normal file
@@ -0,0 +1,63 @@
|
||||
<script lang="ts">
|
||||
import Button from '@/components/ui/button/button.svelte';
|
||||
import CardContent from '@/components/ui/card/card-content.svelte';
|
||||
import Card from '@/components/ui/card/card.svelte';
|
||||
import Input from '@/components/ui/input/input.svelte';
|
||||
import Spinner from '@/components/ui/spinner/spinner.svelte';
|
||||
import { checkEmail } from '@/hooks/checkEmail';
|
||||
import Check from '@lucide/svelte/icons/check';
|
||||
import Cross from '@lucide/svelte/icons/x';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
let { estado = $bindable(), email = $bindable() } = $props();
|
||||
|
||||
let checkeado = $state<Boolean | null>(null);
|
||||
let esEmailExistente = $state<boolean>(false);
|
||||
|
||||
$effect(() => {
|
||||
if (email == '') {
|
||||
checkeado = null;
|
||||
return;
|
||||
}
|
||||
(async () => {
|
||||
checkeado = true;
|
||||
await Promise.all([checkEmaill(), new Promise((resolve) => setTimeout(resolve, 100))]);
|
||||
checkeado = false;
|
||||
})();
|
||||
});
|
||||
|
||||
async function checkEmaill() {
|
||||
esEmailExistente = !(await checkEmail(email));
|
||||
}
|
||||
</script>
|
||||
|
||||
<div transition:slide>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2 class="flex items-center justify-between text-xl font-semibold">
|
||||
Ingresa tu correo electrónico
|
||||
{#if checkeado == null}
|
||||
<div hidden></div>
|
||||
{:else if checkeado == true}
|
||||
<Spinner></Spinner>
|
||||
{:else if esEmailExistente}
|
||||
<Check class="text-green-500" />
|
||||
{:else}
|
||||
<Cross class="text-red-500" />
|
||||
{/if}
|
||||
</h2>
|
||||
<Input type="email" placeholder="correo@ejemplo.com" bind:value={email} />
|
||||
<Button
|
||||
disabled={!esEmailExistente}
|
||||
onclick={async () => {
|
||||
///WIP
|
||||
estado = 'otp';
|
||||
}}
|
||||
>
|
||||
Enviar código
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
41
src/routes/password-reset/NuevaPass.svelte
Normal file
41
src/routes/password-reset/NuevaPass.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import Button from '@/components/ui/button/button.svelte';
|
||||
import CardContent from '@/components/ui/card/card-content.svelte';
|
||||
import Card from '@/components/ui/card/card.svelte';
|
||||
import Input from '@/components/ui/input/input.svelte';
|
||||
import Label from '@/components/ui/label/label.svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
<div transition:slide>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<h2 class="mb-4 text-2xl font-bold">Crear una Nueva Contraseña</h2>
|
||||
<form onsubmit={() => {}}>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<Label for="password" class="mb-1 block text-sm font-medium">Contraseña</Label>
|
||||
<Input
|
||||
type="password"
|
||||
id="password"
|
||||
class="w-full px-3 py-2"
|
||||
placeholder="Ingresa tu nueva contraseña"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label for="confirmPassword" class="mb-1 block text-sm font-medium"
|
||||
>Repetir Contraseña</Label
|
||||
>
|
||||
<Input
|
||||
type="password"
|
||||
id="confirmPassword"
|
||||
class="w-full px-3 py-2"
|
||||
placeholder="Repite tu nueva contraseña"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit">Establecer Contraseña</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
46
src/routes/password-reset/Otp.svelte
Normal file
46
src/routes/password-reset/Otp.svelte
Normal file
@@ -0,0 +1,46 @@
|
||||
<script>
|
||||
import Button from '@/components/ui/button/button.svelte';
|
||||
import CardContent from '@/components/ui/card/card-content.svelte';
|
||||
import Card from '@/components/ui/card/card.svelte';
|
||||
import InputOtpGroup from '@/components/ui/input-otp/input-otp-group.svelte';
|
||||
import InputOtpSlot from '@/components/ui/input-otp/input-otp-slot.svelte';
|
||||
import InputOtp from '@/components/ui/input-otp/input-otp.svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
let { estado = $bindable() } = $props();
|
||||
</script>
|
||||
|
||||
<div transition:slide>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div class="space-y-6 py-4">
|
||||
<h3 class="text-xl font-semibold">Verificación de correo</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Hemos enviado un código de verificación a tu correo electrónico.
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-center">
|
||||
<InputOtp maxlength={6}>
|
||||
{#snippet children({ cells })}
|
||||
<InputOtpGroup>
|
||||
{#each cells as cell, i}
|
||||
<InputOtpSlot class="p-3!" {cell}></InputOtpSlot>
|
||||
{/each}
|
||||
</InputOtpGroup>
|
||||
{/snippet}
|
||||
</InputOtp>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<Button onclick={() => (estado = 'nuevapass')}>Verificar</Button>
|
||||
|
||||
<Button variant="link" onclick={() => console.log('Reenviar código')}>
|
||||
Reenviar código de verificación
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
30
src/routes/password-reset/Pasos.svelte
Normal file
30
src/routes/password-reset/Pasos.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<script>
|
||||
import BreadcrumbItem from '@/components/ui/breadcrumb/breadcrumb-item.svelte';
|
||||
import BreadcrumbList from '@/components/ui/breadcrumb/breadcrumb-list.svelte';
|
||||
import BreadcrumbSeparator from '@/components/ui/breadcrumb/breadcrumb-separator.svelte';
|
||||
import Breadcrumb from '@/components/ui/breadcrumb/breadcrumb.svelte';
|
||||
|
||||
let { estado } = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex w-full justify-center">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<p class={`select-none ${estado === 'email' ? 'font-bold text-white' : ''}`}>
|
||||
Ingrese Email
|
||||
</p>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<p class={`select-none ${estado === 'otp' ? 'font-bold text-white' : ''}`}>Ingresar OTP</p>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<p class={`select-none ${estado === 'nuevapass' ? 'font-bold text-white' : ''}`}>
|
||||
Nueva Contraseña
|
||||
</p>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
Reference in New Issue
Block a user