fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-08 14:20:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

codigo de login front

Browse Source
This commit is contained in:
fedpo
2025-11-14 18:25:57 -03:00
parent 4545252bd2
commit ccebc7934c
7 changed files with 163 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/components/signup-form.svelte
View File

@@ -1,32 +1,44 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import * as Field from '$lib/components/ui/field/index.js';
import * as Card from '../components/ui/card';
import * as Field from '$lib/components/ui/field';
import { Input } from '$lib/components/ui/input/index.js';
import type { ComponentProps } from 'svelte';
import type { RegisterDto } from '../../types';
import { register } from '@/hooks/register';
let {showAlert = $bindable() } = $props();
const setAlert = () => showAlert = true;
let dto: RegisterDto = $state({password: "", username: "", email:"", displayName: ""});
let { ...restProps }: ComponentProps<typeof Card.Root> = $props();
</script>
<Card.Root {...restProps}>
<Card.Root>
<Card.Header>
<Card.Title>Registrarse</Card.Title>
<hr />
</Card.Header>
<Card.Content>
<form>
<form onsubmit={(e)=>register(e, dto, setAlert)}>
<Field.Group>
<Field.Field>
<Field.Label for="name">Nombre Completo</Field.Label>
<Input id="name" type="text" placeholder="Juan Pepe" required />
<Field.Label for="name">Nombre de Usuario</Field.Label>
<Input id="name" bind:value={dto.username} type="text" placeholder="JPepe" required />
</Field.Field>
<Field.Field>
<Field.Label for="name">Nombre Visible</Field.Label>
<Input type="text" bind:value={dto.displayName} placeholder="Juan Pepe" required />
</Field.Field>
<Field.Field>
<Field.Label for="email">Email</Field.Label>
<Input id="email" type="email" placeholder="m@ejemplo.com" required />
<Input id="email" type="email" bind:value={dto.email} placeholder="m@ejemplo.com" required />
</Field.Field>
<Field.Field>
<Field.Label for="password">Contraseña</Field.Label>
<Input id="password" type="password" required />
<Input id="password" type="password" bind:value={dto.password} required />
<Field.Description>Debe de tener por lo menos 8 caracteres.</Field.Description>
</Field.Field>
<Field.Field>

14
src/lib/components/ui/login-form/login-form.svelte
View File

@@ -3,7 +3,13 @@
import * as Card from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { FieldGroup, Field, FieldLabel, FieldDescription } from '@/components/ui/field';
const id = $props.id();
import type { LoginDto } from '../../../../types';
import { login } from '@/hooks/login';
let {id, showAlert = $bindable() } = $props();
let dto: LoginDto = $state({password: "", username: ""});
const setAlert = () => showAlert = true;
</script>
<Card.Root class="mx-auto w-full max-w-sm">
@@ -12,11 +18,11 @@
<Card.Description>ingrese su usuario para logearse en la cuenta</Card.Description>
</Card.Header>
<Card.Content>
<form>
<form onsubmit="{(e)=>login(e,dto, setAlert)}">
<FieldGroup>
<Field>
<FieldLabel for="email-{id}">Usuario</FieldLabel>
<Input id="email-{id}" type="email" placeholder="m@example.com" required />
<Input bind:value={dto.username} type="text" placeholder="nombre de usuario" required />
</Field>
<Field>
<div class="flex items-center">
@@ -25,7 +31,7 @@
Te Olvidaste la contraseña?
</a>
</div>
<Input id="password-{id}" type="password" required />
<Input bind:value={dto.password} type="password" required />
</Field>
<Field>
<Button type="submit" class="w-full">Login</Button>