feat: casi reemplazo todo razor

Signed-off-by: fede <federico.nicolas.polidoro@gmail.com>

Front/makefile

@@ -0,0 +1,2 @@
+run:
+	bun run dev

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>
 

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>

Front/src/Menu/page.svelte

@@ -1 +1,6 @@
+<script>
+    import NavBarAuto from "../lib/NavBarAutocompletable.svelte";
+</script>
 
+<NavBarAuto/>
+hol 

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>

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">
+<Navbar container="xxl" expand="md" color="dark-subtle">
-  AlquilaFacil
+  <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>

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}

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>