From ceffbf941e5e5393033bc0691de6cba67ee99724 Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Sat, 19 Oct 2024 18:00:00 -0300
Subject: [PATCH] feat: casi reemplazo todo razor

Signed-off-by: fede <federico.nicolas.polidoro@gmail.com>
---
 Front/makefile                             |  2 +
 Front/src/App.svelte                       | 14 ++++++-
 Front/src/Info/page.svelte                 | 28 +++++++++++++
 Front/src/Inquilinos/page.svelte           |  0
 Front/src/Menu/page.svelte                 |  5 +++
 Front/src/Propiedades/page.svelte          |  0
 Front/src/lib/NavBarAutocompletable.svelte | 18 ++++++++
 Front/src/lib/NavBarLogin.svelte           | 23 ++++++++--
 Front/src/lib/RutaProtegida.svelte         | 49 ++++++++++++++++++++++
 Front/src/lib/login.svelte                 | 10 ++---
 10 files changed, 140 insertions(+), 9 deletions(-)
 create mode 100644 Front/makefile
 create mode 100644 Front/src/Info/page.svelte
 create mode 100644 Front/src/Inquilinos/page.svelte
 create mode 100644 Front/src/Propiedades/page.svelte
 create mode 100644 Front/src/lib/NavBarAutocompletable.svelte
 create mode 100644 Front/src/lib/RutaProtegida.svelte

diff --git a/Front/makefile b/Front/makefile
new file mode 100644
index 0000000..ffb157c
--- /dev/null
+++ b/Front/makefile
@@ -0,0 +1,2 @@
+run:
+	bun run dev
diff --git a/Front/src/App.svelte b/Front/src/App.svelte
index 52b77ea..258e8f9 100644
--- a/Front/src/App.svelte
+++ b/Front/src/App.svelte
@@ -2,10 +2,22 @@
   import Login from "./login/loginPage.svelte";
   import { Router, Route, link } from 'svelte-routing';
   import MenuPage from './Menu/page.svelte';
+  import ProteRoute from './lib/RutaProtegida.svelte';
+  import InfoPage from './Info/page.svelte';
+  import InqPage from "./Inquilinos/page.svelte";
 </script>
 
 <Router>
-  <Route path="/Menu" component={MenuPage} />
+  
   <Route path="/" component={Login} />
+  <Route path="/Info" component={InfoPage} />
+
+  <Route path="/Menu">
+     <ProteRoute component={MenuPage} />
+  </Route>
+
+  <Route path="/Inquilinos">
+    <ProteRoute component={InqPage}/>
+  </Route>
 </Router>
 
diff --git a/Front/src/Info/page.svelte b/Front/src/Info/page.svelte
new file mode 100644
index 0000000..4b049fd
--- /dev/null
+++ b/Front/src/Info/page.svelte
@@ -0,0 +1,28 @@
+<script>
+    import NavBarLogin from "../lib/NavBarLogin.svelte";
+
+</script>
+
+<NavBarLogin/><br>
+<div class="container text-justify">
+    <h4>Preguntas Frecuentes:</h4>
+
+    <div class="row">
+        <div class="col"><hr></div>
+        <div class="col-auto"><h5>Que es AlquilaFacil</h5></div>
+        <div class="col"><hr></div>
+    </div>
+    
+    Es un sistema el cual desarrolle para la materia de ingenieria de software / trabajo de diploma.
+    En la cual se pueden publicar propiedades como un propietario y buscar propiedades para alquilar. 
+    O Visualizar cuantos meses te deben tus inquilinos o en caso de ser un inquilino poder realizar
+    los pagos o visualizar los comprobantes de los pagos realizados.
+    
+    
+    <div class="row">
+        <div class="col"><hr></div>
+        <div class="col-auto"><h5>Necesito una cuenta?</h5></div>
+        <div class="col"><hr></div>
+    </div>
+    Sí es necesario comunicarse con un administrador para poder acceder. 
+</div>
diff --git a/Front/src/Inquilinos/page.svelte b/Front/src/Inquilinos/page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/Front/src/Menu/page.svelte b/Front/src/Menu/page.svelte
index 8b13789..63a5edc 100644
--- a/Front/src/Menu/page.svelte
+++ b/Front/src/Menu/page.svelte
@@ -1 +1,6 @@
+<script>
+    import NavBarAuto from "../lib/NavBarAutocompletable.svelte";
+</script>
 
+<NavBarAuto/>
+hol 
\ No newline at end of file
diff --git a/Front/src/Propiedades/page.svelte b/Front/src/Propiedades/page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/Front/src/lib/NavBarAutocompletable.svelte b/Front/src/lib/NavBarAutocompletable.svelte
new file mode 100644
index 0000000..9c6fccd
--- /dev/null
+++ b/Front/src/lib/NavBarAutocompletable.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { Navbar, NavbarBrand, NavbarToggler, NavItem, Nav, NavLink, Collapse } from "@sveltestrap/sveltestrap";
+    let isOpen = false;
+  
+  function handleUpdate(event) {
+    isOpen = event.detail.isOpen;
+  }  
+</script>
+
+<Navbar container="xxl" expand="md" color="dark-subtle">
+  <NavbarBrand href="/Menu">AlquilaFacil</NavbarBrand>
+  <NavbarToggler on:click={() => (isOpen = !isOpen)} />
+  <Collapse isOpen={isOpen} navbar expand="md" on:update={handleUpdate}>
+    <Nav class="ms-auto" navbar>
+    
+    </Nav>
+  </Collapse>
+</Navbar>
diff --git a/Front/src/lib/NavBarLogin.svelte b/Front/src/lib/NavBarLogin.svelte
index 0da5cc3..e7d0c18 100644
--- a/Front/src/lib/NavBarLogin.svelte
+++ b/Front/src/lib/NavBarLogin.svelte
@@ -1,8 +1,25 @@
 <script lang="ts">
-    import { Navbar } from "@sveltestrap/sveltestrap";
+    import { Navbar, NavbarBrand, NavbarToggler, NavItem, Nav, NavLink, Collapse } from "@sveltestrap/sveltestrap";
+    let isOpen = false;
+    function handleUpdate(event) {
+      isOpen = event.detail.isOpen;
+    }
 </script>
 
 
-<Navbar container="xxl" color="dark-subtle">
-  AlquilaFacil
+<Navbar container="xxl" expand="md" color="dark-subtle">
+  <NavbarBrand href="/">
+    AlquilaFacil
+  </NavbarBrand>
+  <NavbarToggler on:click={() => (isOpen = !isOpen)} />
+  <Collapse isOpen={isOpen} navbar expand="md" on:update={handleUpdate}>
+    <Nav class="ms-auto" navbar>
+      <NavItem>
+        <NavLink href="/">Login</NavLink>
+      </NavItem>
+      <NavItem>
+        <NavLink href="/Info">Preguntas Frecuentes</NavLink>
+      </NavItem>
+    </Nav>
+  </Collapse>
 </Navbar>
diff --git a/Front/src/lib/RutaProtegida.svelte b/Front/src/lib/RutaProtegida.svelte
new file mode 100644
index 0000000..6ab0b5d
--- /dev/null
+++ b/Front/src/lib/RutaProtegida.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { onMount } from 'svelte';
+  import { navigate } from 'svelte-routing'; // Asumiendo que estás usando svelte-routing
+  import { writable } from 'svelte/store';
+
+  let isAuthenticated = writable(false);
+  let isVerified = writable(false);
+
+ 
+  export let component;
+
+  let redirect = window.location.pathname;
+  const token = localStorage.getItem('token');
+  const email = localStorage.getItem('email');
+
+  const handleAccess = async () => {
+      try {
+          const response = await fetch('http://127.0.0.1:5007/api/login/validar', {
+              method: 'POST',
+              headers: {
+                  'Content-Type': 'application/json',
+              },
+              body: JSON.stringify( {email, token, redirect} ),
+          });
+
+          if (response.ok) {
+              isAuthenticated.set(true);
+          }
+      } finally {
+          isVerified.set(true);
+      }
+  };
+
+  onMount(async () => {
+      await 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}
+        <svelte:component this={component}/>
+    {:else}
+        {navigate('/')}
+    {/if}
+{/if}
diff --git a/Front/src/lib/login.svelte b/Front/src/lib/login.svelte
index ae625cd..dc6fee3 100644
--- a/Front/src/lib/login.svelte
+++ b/Front/src/lib/login.svelte
@@ -5,7 +5,7 @@
   let email = ""
   let contraseña = ""
   let errorMessage = ""
-  let showAlert = false; // Controla la visibilidad del alert
+  let showAlert = false; 
   
   async function submitForm(event) {
     event.preventDefault();
@@ -30,14 +30,14 @@
       const ret = await response.json();
       localStorage.clear();
       localStorage.setItem('token', ret.token);
+      localStorage.setItem('email', ret.email);
+      //setTimeout(() => console.log("50ms") ,50);
       navigate(ret.redirect);
     } catch (e) {
     }
    
   }
-function closeAlert() {
-  showAlert = false; // Oculta el alert
-}  
+
 </script>
 
 <Card class="position-sticky top-50 start-50 translate-middle-x" style="width: 18rem; height: auto;" theme="auto" color="dark" outline>
@@ -59,7 +59,7 @@ function closeAlert() {
 {#if errorMessage}
     <div class='alert alert-warning alert-dismissible fade show' role='alert'>
       <strong>{errorMessage}</strong> 
-      <button type="button" class="btn-close" aria-label="Close" on:click={closeAlert}></button>
+      <button type="button" class="btn-close close" aria-label="Close" data-dismiss="alert"></button>
     </div>
 {/if}
   </CardBody>