100 lines
3.4 KiB
Svelte
100 lines
3.4 KiB
Svelte
<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("")
|
|
|
|
const token = sessionStorage.getItem("token");
|
|
|
|
async function submitForm(event: any) {
|
|
event.preventDefault();
|
|
try {
|
|
let response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Auth' : String(token),
|
|
'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;
|
|
}
|
|
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} |