finalmente adapte todo a svelte y más

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

Front/src/App.svelte

@@ -4,7 +4,8 @@
   import MenuPage from './Menu/page.svelte';
   import ProteRoute from './lib/RutaProtegida.svelte';
   import InfoPage from './Info/page.svelte';
-  import InqPage from "./Inquilinos/page.svelte";
+  import InqPage from "./Inquilino/page.svelte";
+  import PropPage from "./Propietario/page.svelte";
 </script>
 
 <Router>
@@ -16,11 +17,17 @@
 
 
   <Route path="/Menu">
-     <ProteRoute component={MenuPage} />
+     <ProteRoute componente={MenuPage} />
   </Route>
 
-  <Route path="/Inquilinos">
-    <ProteRoute component={InqPage}/>
+  <!--Crear Cuenta Inquilino-->
+  <Route path="/accion/4">
+    <ProteRoute componente={InqPage}/>
+  </Route>
+
+  <!--Crear Cuenta Propietario-->
+  <Route path="/accion/5">
+    <ProteRoute componente={PropPage}/>
   </Route>
 </Router>
 

Front/src/Info/page.svelte

@@ -1,17 +1,13 @@
 <script>
     import NavBarLogin from "../lib/NavBarLogin.svelte";
-
+    import BarraTexto from "../lib/BarraHorizontalConTexto.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>
+    <BarraTexto text="Que es AlquilaFacil" />
     
     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. 
@@ -19,10 +15,8 @@
     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. 
+    <BarraTexto text="Necesito una cuenta?" />
+
+    Sí es necesario comunicarse con un administrador para que se te creé una cuenta ya sea para inquilino,
+    propietario o ambas. 
 </div>

Front/src/Inquilino/page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import FormPostInq from "../lib/FormPostCli.svelte";
+    import NavBarAutocompletable from "../lib/NavBarAutocompletable.svelte";
+    import TextBar  from "../lib/BarraHorizontalConTexto.svelte";
+</script>
+
+<NavBarAutocompletable/>
+
+<div class="container">
+    <div class="row align-items-start">
+        <div class="col">
+            <br><br>
+            <TextBar text="Formulario Alta Inquilino" />
+            Este es un formulario para crear una cuenta de Propietario.
+            Los campos con un asterisco (*) requieren ser completados 
+            si o si.
+            <br><br>
+
+            <TextBar text="¿Porque querria crear una cuenta?" />
+            Crear una cuenta es necesario para poder acceder al menu de
+            inquilino donde se mostrarán los alquileres pendientes de pago
+            y donde podrá buscar propiedades para alquilar.
+            <br><br>
+
+            <TextBar text="¿Que pasa si ya tengo una cuenta de propietario?" />
+            Si tiene una cuenta de propietario rellene los campos igualmente y
+            se le añadirán las capacidades de buscar propiedades para alquilar
+            y ver el estado de los alquileres donde usted es inquilino.
+        </div>
+        <div class="col">
+            <br>
+            <FormPostInq url="http://127.0.0.1:5007/api/inquilino"/>
+        </div>
+    </div>
+</div>

Front/src/Inquilinos/page.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-    import { Col } from "@sveltestrap/sveltestrap";
-    import FormPostInq from "../lib/FormPostCli.svelte";
-    import NavBarAutocompletable from "../lib/NavBarAutocompletable.svelte";
-</script>
-
-<NavBarAutocompletable/>
-
-<div class="container">
-    <div class="row align-items-start">
-        <div class="col">
-            <FormPostInq url="http://127.0.0.1:5007/api/inquilino"/>
-        </div>
-    </div>
-</div>

Front/src/Propietario/page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import FormPostInq from "../lib/FormPostCli.svelte";
+    import NavBarAutocompletable from "../lib/NavBarAutocompletable.svelte";
+    import TextBar  from "../lib/BarraHorizontalConTexto.svelte";
+</script>
+
+<NavBarAutocompletable/>
+
+<div class="container">
+    <div class="row align-items-start">
+        <div class="col">
+            <br><br>
+            <TextBar text="Formulario Alta Propietario" />
+            Este es un formulario para crear una cuenta de Inquilino.
+            Los campos con un asterisco (*) requieren ser completados 
+            si o si.
+            <br><br>
+            <TextBar text="¿Porque querria crear una cuenta?" />
+            Crear una cuenta es necesario para poder acceder al menu de
+            propietario donde se mostrarán tanto las propiedades sin alquilar
+            como las alquiladas y cual es la situacion con el inquilino.
+            <br><br>
+
+            <TextBar text="¿Que pasa si ya tengo una cuenta de Inquilino?" />
+            Si tiene una cuenta de Inquilino rellene los campos igualmente y
+            se le añadirán las capacidades de publicar propiedades y ver
+            el estado de los alquileres donde usted es Propietario.
+        </div>
+        <div class="col">
+            <br>
+            <FormPostInq url="http://127.0.0.1:5007/api/propietario"/>
+        </div>
+    </div>
+</div>

Front/src/lib/BarraHorizontalConTexto.svelte

@@ -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>

Front/src/lib/FormPostCli.svelte

@@ -8,15 +8,15 @@
     let { url }: Props = $props();
 
     let showAlert: boolean = $state(false);
-    let errorMessage: string = $state()
+    let errorMessage: string = $state("")
 
-    let dni: number = $state()
-    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() 
+    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();
@@ -38,34 +38,52 @@
         }
     }
 </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>
 
-<Form on:submit={submitForm}>
-    <FormGroup floating label="Dni">
-        <Input type="number" min='1' bind:value={dni} required />
-    </FormGroup>
-    <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 floating label="Nombre">
-        <Input type="text" bind:value={nombre} required />
-    </FormGroup>
-    <FormGroup floating label="Apellido">
-        <Input type="text" bind:value={apellido} required />
-    </FormGroup>
-    <FormGroup floating label="Domicilio">
-        <Input type="text" bind:value={domicilio} required />
-    </FormGroup>
-    <FormGroup floating label="Celular">
-        <Input type="tel" bind:value={celular} required />
-    </FormGroup>
-    <br>
-    <FormGroup>
-        <Button color="primary" type="submit">Ingresar</Button>
-    </FormGroup>
-</Form>
+            <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> 

Front/src/lib/NavBarAutocompletable.svelte

@@ -46,6 +46,11 @@
   <NavbarBrand href="/">
     AlquilaFacil
   </NavbarBrand>
+  <div class="card">
+    <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>

Front/src/lib/RutaProtegida.svelte

@@ -2,8 +2,9 @@
     import { onMount } from 'svelte';
     import { navigate } from 'svelte-routing'; 
     import { writable } from 'svelte/store';
-  
-    export let component;  
+
+
+    let { componente } = $props();  
   
     const isAuthenticated = writable(false); 
     const isVerified = writable(false); 
@@ -45,7 +46,7 @@
     </div>
   {:else}
     {#if $isAuthenticated}
-      <svelte:component this={component} />
+      {@render componente()}
     {:else}
       {navigate('/')}  
     {/if}