añadido tema oscuro, y programada la funcion de busqueda

2024-12-21 19:16:47 -03:00
parent 990f866a71
commit 3f08dcfc81
21 changed files with 345 additions and 75 deletions
@@ -0,0 +1,66 @@
+<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"
+      });
+
+      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) {
+    }
+   
+  }
+
+</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>
+    </div>
+{/if}
+  </CardBody>
+</Card>