FEAT: hecho el arreglo de los botones y empecé con el registro de propiedades
This commit is contained in:
11
Front/src/Componentes/BarraHorizontalConTexto.svelte
Normal file
11
Front/src/Componentes/BarraHorizontalConTexto.svelte
Normal file
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
let prop = $props();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col"><hr></div>
|
||||
<div class="col-auto"><h5>{prop.text}</h5></div>
|
||||
<div class="col"><hr></div>
|
||||
</div>
|
||||
92
Front/src/Componentes/FormPostCli.svelte
Normal file
92
Front/src/Componentes/FormPostCli.svelte
Normal file
@@ -0,0 +1,92 @@
|
||||
<script lang="ts">
|
||||
import { Form, FormGroup, Input, Button} from "@sveltestrap/sveltestrap";
|
||||
|
||||
interface Props {
|
||||
url: string;
|
||||
}
|
||||
|
||||
let { url }: Props = $props();
|
||||
|
||||
let showAlert: boolean = $state(false);
|
||||
let errorMessage: string = $state("")
|
||||
|
||||
let dni: number = $state(0)
|
||||
let email: string = $state("")
|
||||
let contraseña: string = $state("")
|
||||
let nombre: string = $state("")
|
||||
let apellido: string = $state("")
|
||||
let domicilio: string = $state("")
|
||||
let celular: string = $state("")
|
||||
|
||||
async function submitForm(event: any) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
let response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json',
|
||||
},
|
||||
body: JSON.stringify({dni, nombre, apellido, domicilio, celular, email, contraseña})
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
errorMessage = errorData.message;
|
||||
showAlert = true;
|
||||
}
|
||||
} catch (e) {
|
||||
throw new Error("Fallo al enviar el formulario para crear un inquilino");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Form on:submit={submitForm}>
|
||||
<FormGroup floating label="Dni*">
|
||||
<Input type="number" min='1' bind:value={dni} required />
|
||||
</FormGroup>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<FormGroup floating label="Nombre*">
|
||||
<Input type="text" bind:value={nombre} required />
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div class="col">
|
||||
<FormGroup floating label="Apellido*">
|
||||
<Input type="text" bind:value={apellido} required />
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<FormGroup floating label="Domicilio*">
|
||||
<Input type="text" bind:value={domicilio} required />
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div class="col">
|
||||
<FormGroup floating label="Celular*">
|
||||
<Input type="tel" bind:value={celular} required />
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormGroup>
|
||||
<Button color="primary" type="submit">Crear</Button>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
{#if showAlert}
|
||||
<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}
|
||||
48
Front/src/Componentes/ListaAcciones.svelte
Normal file
48
Front/src/Componentes/ListaAcciones.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
type Permiso = {
|
||||
id: number;
|
||||
descripcion: string;
|
||||
};
|
||||
|
||||
let permisos = writable<Permiso[]>([]);
|
||||
|
||||
onMount(()=> {
|
||||
HandlePermisos();
|
||||
});
|
||||
|
||||
const email = localStorage.getItem("email");
|
||||
const path = location.pathname;
|
||||
const token = sessionStorage.getItem("token");
|
||||
|
||||
async function HandlePermisos() {
|
||||
const match = path.match(/\/grupo\/(.+)/);
|
||||
const grupo = match ? match[1] : null;
|
||||
try {
|
||||
const response = await fetch("http://localhost:5007/api/acciones/grupo",{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Auth' : String(token),
|
||||
'Content-Type' : "application/json"
|
||||
},
|
||||
body: JSON.stringify({email, grupo}),
|
||||
});
|
||||
if (response.ok) {
|
||||
const json = await response.json();
|
||||
permisos.set(json);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="list-group">
|
||||
{#each $permisos as item}
|
||||
<a href="/accion/{item.id}" class="list-group-item list-group-item-action">
|
||||
{item.descripcion}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
84
Front/src/Componentes/NavBarAutocompletable.svelte
Normal file
84
Front/src/Componentes/NavBarAutocompletable.svelte
Normal file
@@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
import { Navbar, NavbarBrand, NavbarToggler, NavItem, Nav, NavLink, Collapse } from "@sveltestrap/sveltestrap";
|
||||
import { onMount } from "svelte";
|
||||
import { writable } from 'svelte/store';
|
||||
import './css/popup.css';
|
||||
let isOpen: boolean = $state(false);
|
||||
|
||||
type Permiso = {
|
||||
id: number;
|
||||
descripcion: string;
|
||||
};
|
||||
|
||||
type Grupo = {
|
||||
id: number;
|
||||
nombre: string;
|
||||
idpermisos: Permiso[];
|
||||
};
|
||||
|
||||
const permisos = writable<Grupo[]>([]);
|
||||
const email = localStorage.getItem('email');
|
||||
const token = sessionStorage.getItem('token');
|
||||
|
||||
async function obtenerPermisos(){
|
||||
try {
|
||||
const response = await fetch("http://localhost:5007/api/acciones",{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Auth' : String(token),
|
||||
'Email' : String(email),
|
||||
'Content-Type' : "application/json"
|
||||
},
|
||||
});
|
||||
if (response.ok){
|
||||
const json = await response.json();
|
||||
|
||||
permisos.set(json);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
onMount( () => {
|
||||
obtenerPermisos();
|
||||
})
|
||||
|
||||
function redirijir(path: string){
|
||||
location.replace(path);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Navbar container="xxl" expand="md" color="dark-subtle">
|
||||
<NavbarBrand href="/">
|
||||
AlquilaFacil
|
||||
</NavbarBrand>
|
||||
<div class="badge">
|
||||
<a href="/Menu">
|
||||
<img src="/home.svg" alt="Volver al Menú"/>
|
||||
</a>
|
||||
</div>
|
||||
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
||||
<Collapse isOpen={isOpen} navbar expand="md">
|
||||
<Nav class="ms-auto" navbar>
|
||||
{#each $permisos as item }
|
||||
<div class="dropdown">
|
||||
<div class="btn-group" style="margin-left: 3px; margin-top: 3px">
|
||||
<button class="btn btn-secondary" onclick={() => redirijir("/grupo/"+item.nombre)} >{item.nombre}</button>
|
||||
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" >
|
||||
{#each item.idpermisos as perm}
|
||||
<li class="dropdown-item"><a class="link-underline-opacity-0 link-underline" href="/accion/{perm.id}">{perm.descripcion}</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
24
Front/src/Componentes/NavBarLogin.svelte
Normal file
24
Front/src/Componentes/NavBarLogin.svelte
Normal file
@@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { Navbar, NavbarBrand, NavbarToggler, NavItem, Nav, NavLink, Collapse } from "@sveltestrap/sveltestrap";
|
||||
|
||||
let isOpen:boolean = false;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<Navbar container="xxl" expand="md" color="dark-subtle">
|
||||
<NavbarBrand href="/">
|
||||
AlquilaFacil
|
||||
</NavbarBrand>
|
||||
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
||||
<Collapse isOpen={isOpen} navbar expand="md">
|
||||
<Nav class="ms-auto" navbar>
|
||||
<NavItem>
|
||||
<NavLink href="/">Login</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="/Info">Preguntas Frecuentes</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
54
Front/src/Componentes/RutaProtegida.svelte
Normal file
54
Front/src/Componentes/RutaProtegida.svelte
Normal file
@@ -0,0 +1,54 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { navigate } from 'svelte-routing';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
|
||||
let { componente } = $props();
|
||||
|
||||
const isAuthenticated = writable(false);
|
||||
const isVerified = writable(false);
|
||||
|
||||
const redirect = window.location.pathname;
|
||||
const email = localStorage.getItem('email');
|
||||
const token = sessionStorage.getItem('token');
|
||||
|
||||
const handleAccess = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5007/api/login/validar', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Auth': String(token),
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ email, redirect }),
|
||||
credentials: "include"
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
isAuthenticated.set(true); // Actualiza el store
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error durante la autenticación:', error);
|
||||
} finally {
|
||||
isVerified.set(true); // Marca la verificación como completada
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
handleAccess();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if !$isVerified}
|
||||
<div class="spinner-border position-absolute top-50 start-50 translate-middle" role="status">
|
||||
<span class="visually-hidden">Cargando</span>
|
||||
</div>
|
||||
{:else}
|
||||
{#if $isAuthenticated}
|
||||
{@render componente()}
|
||||
{:else}
|
||||
{navigate('/')}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
38
Front/src/Componentes/css/popup.css
Normal file
38
Front/src/Componentes/css/popup.css
Normal file
@@ -0,0 +1,38 @@
|
||||
@keyframes rollDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotateX(-90deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rollUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: rotateX(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
animation: none;
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
animation: rollDown 0.5s ease forwards;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu.hide {
|
||||
animation: rollUp 0.5s ease forwards;
|
||||
display: block;
|
||||
}
|
||||
68
Front/src/Componentes/login.svelte
Normal file
68
Front/src/Componentes/login.svelte
Normal file
@@ -0,0 +1,68 @@
|
||||
<script>
|
||||
import { CardHeader, CardTitle, Button, Card, Input, Form, CardBody, FormGroup } from '@sveltestrap/sveltestrap';
|
||||
import { navigate } from 'svelte-routing';
|
||||
|
||||
let email = $state("")
|
||||
let contraseña = $state("")
|
||||
let errorMessage = $state("")
|
||||
let showAlert = false;
|
||||
|
||||
// @ts-ignore
|
||||
async function submitForm(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const data = {email, contraseña};
|
||||
try{
|
||||
const response = await fetch("http://127.0.0.1:5007/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;
|
||||
showAlert = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const ret = await response.json();
|
||||
localStorage.clear();
|
||||
localStorage.setItem('email', ret.email);
|
||||
sessionStorage.setItem('token', ret.token);
|
||||
//setTimeout(() => console.log("50ms") ,50);
|
||||
navigate(ret.redirect);
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Card class="position-sticky top-50 start-50 translate-middle-x" style="width: 20rem; height: auto;" theme="auto" color="dark" 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>
|
||||
</div>
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
Reference in New Issue
Block a user