fede/AlquilaFacil
Public Access
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Esta todo a medio hacerse pero quiero versionar esto ya para no perder

Browse Source 
nada
This commit is contained in:
fedpo
2025-05-08 01:00:34 -03:00
parent 6f6d8a4e8c
commit 02add8907e
11 changed files with 348 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
Front/src/Componentes/LoginPanel.svelte
View File

@@ -1,66 +1,161 @@
<script>
import { CardHeader, CardTitle, Button, Card, Input, Form, CardBody, FormGroup } from '@sveltestrap/sveltestrap';
import { navigate } from 'svelte-routing';
import { urlG } from "../stores/urlStore";
let email = $state("")
let contraseña = $state("")
let errorMessage = $state("")
// @ts-ignore
async function submitForm(event) {
event.preventDefault();
const data = {email, contraseña};
try{
const response = await fetch(String($urlG)+"/api/login",{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
credentials: "include"
});
import {
CardHeader,
CardTitle,
Button,
Card,
Input,
Form,
CardBody,
FormGroup,
Modal,
} from "@sveltestrap/sveltestrap";
import { navigate } from "svelte-routing";
import { urlG } from "../stores/urlStore";
import ModalEstatico from "./ModalEstatico.svelte";
import { parse } from "svelte/compiler";
if (!response.ok){
const errorData = await response.json()
errorMessage = errorData.message;
return;
}
let email = $state("");
let contraseña = $state("");
let errorMessage = $state("");
const ret = await response.json();
localStorage.setItem('email', ret.email);
sessionStorage.setItem('token', ret.token);
//setTimeout(() => console.log("50ms") ,50);
navigate(ret.redirect);
} catch (e) {
// @ts-ignore
async function submitForm(event) {
event.preventDefault();
const data = { email, contraseña };
try {
const response = await fetch(String($urlG) + "/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
credentials: "include",
});
if (!response.ok) {
const errorData = await response.json();
errorMessage = errorData.message;
return;
}
const ret = await response.json();
localStorage.setItem("email", ret.email);
sessionStorage.setItem("token", ret.token);
//setTimeout(() => console.log("50ms") ,50);
navigate(ret.redirect);
} catch (e) {}
}
}
let showrecuperarmodal = $state(false);
let modaldata = $state("");
async function SubmitRecuperarContraseñaEmail(e) {
e.preventDefault();
return;
try {
const req = await fetch($urlG + "");
} catch {
modaldata = "Fallo al hacer la request";
}
} //WIP
</script>
<Card class="position-sticky top-50 start-50 translate-middle-x border border-success" style="width: 20rem; height: auto;" theme="auto" outline>
<CardHeader>
<CardTitle>Iniciar Sesión</CardTitle>
</CardHeader>
<CardBody>
<Form on:submit={submitForm}>
<FormGroup floating label="Email">
<Input type="email" placeholder="ejemplo@mail.com" bind:value={email} required/>
</FormGroup>
<FormGroup floating label="Contraseña">
<Input type="password" placeholder="*********" bind:value={contraseña} required/>
</FormGroup>
<FormGroup>
<Button color="primary" type="submit">Ingresar</Button>
</FormGroup>
</Form>
{#if errorMessage}
<div class='alert alert-warning alert-dismissible fade show' role='alert'>
<strong>{errorMessage}</strong>
<button type="button" class="btn-close close" aria-label="Close" data-bs-dismiss="alert"></button>
{#if modaldata}
<ModalEstatico close={() => !!(modaldata = "")} payload={modaldata} />
{/if}
<Card
class="position-sticky top-50 start-50 translate-middle-x border border-success"
style="width: 20rem; height: auto;"
theme="auto"
outline
>
<CardHeader>
<CardTitle>Iniciar Sesión</CardTitle>
</CardHeader>
<CardBody>
<Form onsubmit={(e) => submitForm(e)}>
<FormGroup floating label="Email">
<Input
type="email"
placeholder="ejemplo@mail.com"
bind:value={email}
required
/>
</FormGroup>
<FormGroup floating label="Contraseña">
<Input
type="password"
placeholder="*********"
bind:value={contraseña}
required
/>
</FormGroup>
<FormGroup>
<Button color="primary" type="submit">Ingresar</Button>
</FormGroup>
</Form>
{#if errorMessage}
<div
class="alert alert-warning alert-dismissible fade show"
role="alert"
>
<strong>{errorMessage}</strong>
<button
type="button"
class="btn-close close"
aria-label="Close"
data-bs-dismiss="alert"
></button>
</div>
{/if}
<hr />
<a href="#" onclick={() => (showrecuperarmodal = true)}
>Recuperar Contraseña</a
>
</CardBody>
</Card>
{#if showrecuperarmodal}
<div
class="modal"
tabindex="-1"
style="display: block; background-color: rgba(0, 0, 0, 0.3);"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Recuperar Contraseña</h5>
<button
type="button"
class="btn-close"
aria-label="Close"
onclick={() => (showrecuperarmodal = false)}
></button>
</div>
<div class="modal-body">
<form onsubmit={SubmitRecuperarContraseñaEmail}>
<div class="mb-3">
<label for="recoveryEmail" class="form-label"
>Email</label
>
<input
type="email"
class="form-control"
id="recoveryEmail"
placeholder="Ingresa tu email"
required
/>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary"
>Enviar</button
>
</div>
</form>
</div>
</div>
</div>
</div>
{/if}
</CardBody>
</Card>