Added admin login page style without backend connection and admin start page

Readme.md

@@ -1,12 +1,8 @@
 # JL-Frontend
 
-- [ ] Solve navigation for search page InConstruction <-> Finished 
-- [ ] Add Contact us page
 - [ ] Add Art to Not Found page like github (Huge 404 with not found and subtitle on the bottom)
-- [ ] Show page to client and start work on admin panel
+- [x] Show page to client and start work on admin panel
-- [ ] Whatsapp button link
+- [x] Whatsapp button link
-- [ ] Contact widget should be whatsapp OR email depending on agent contact info
-- [ ] Footer should have call to action?
 
 - [x] If no properties are found footer jumps up, shouldn't happen.
 - [x] Agentes / Quienes Somos (Similar al de remax) (recordar poner a jorge ledesma de primero y despues a los demas agentes)
@@ -17,7 +13,7 @@
 - [x] Poner Features arriba de la desc y las imagenes de la unidad
 - [x] Poner el logo de remax en el footer
 - [x] Poner logos de facebook, instagram, youtube, en el footer (Sin enlaces)
-- [ ] Poner boton de solicita tu prestamo, que rediriga a remax (Se te dará el enlace), abajo de el disclaimer en la página de detalles de proyecto
+- [x] Poner boton de solicita tu prestamo, que rediriga a remax (Se te dará el enlace), abajo de el disclaimer en la página de detalles de proyecto
 - [ ] Contenido statico folder de imagenes para la imagen de portada de inicio, que se roten aleatoriamente cada día
 - [x] Space between Unit selection menu and unit media on empty unit features
 - [x] Make the navbar logo bigger
@@ -30,6 +26,6 @@ New todo's
 - [x] Contact us -> Sell with us
 - [ ] Static image folder for start page
 - [ ] Admin panel with page loads & contact us clicks
-- [ ] Put JL on top of the Agents section
+- [x] Put JL on top of the Agents section
 - [x] If someone enters the page from an agent, make anything that appears on the website reference them.
 - [x] Contact us Functionality

css/admin-login.css

@@ -0,0 +1,77 @@
+.admin-login-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+
+    width: 100%;
+    height: 50vh;
+}
+.admin-login-title {
+    font-size: 32px;
+    font-family: Source Sans Pro;
+    font-weight: 900;
+}
+.admin-login-form-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 25px;
+
+    width: 400px;
+}
+.admin-login-form-textfield-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    gap: 4px;
+
+    width: 100%;
+}
+.admin-login-form-textfield-label {
+    font-family: Space Grotesk;
+    font-size: 16px;
+    font-weight: 900;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+}
+.admin-login-form-textfield-label:after {
+    color: #e32;
+    content: '*';
+    display: inline;
+}
+.admin-login-form-textfield {
+    height: 50px;
+    background-color: white;
+    border: solid 0.5px #d8d8d8;
+    
+    width: 100%;
+    text-indent: 10px;
+}
+.admin-login-form-button {
+    height: 60px;
+    width: 400px;
+    margin-top: 20px;
+
+    background-color: #02114A;
+    color: white;
+    border-radius: 5px;
+
+    font-family: Space Grotesk;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+.admin-login-form-button:hover {
+    cursor: pointer;
+}
+
+.admin-login-form-error-message {
+    font-size: 18px;
+    color: #e32;
+}

css/admin-start.css

@@ -0,0 +1,10 @@
+.admin-start-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+
+    width: 100%;
+    height: 50vh;
+}

index.html

@@ -10,9 +10,10 @@
         <link data-trunk type="text/css" href="css/search.css" rel="css" />
         <link data-trunk type="text/css" href="css/project_card.css" rel="css" />
         <link data-trunk type="text/css" href="css/details.css" rel="css" />
-        <link data-trunk type="text/css" href="css/admin-login.css" rel="css" />
         <link data-trunk type="text/css" href="css/agent.css" rel="css" />
         <link data-trunk type="text/css" href="css/contact.css" rel="css" />
+        <link data-trunk type="text/css" href="css/admin-login.css" rel="css" />
+        <link data-trunk type="text/css" href="css/admin-start.css" rel="css" />
         
         <link data-trunk type="text/css" href="css/components/loading.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />

src/pages/admin/login.rs

@@ -1,19 +1,63 @@
 use yew::prelude::*;
 use yew_router::prelude::use_navigator;
 
+use crate::{utils::input::get_value_from_input_event, routes::main_router::Route};
+
 #[function_component(AdminLoginPage)]
 pub fn login_page() -> Html {
-    let _navigator = use_navigator().unwrap();
+    let navigator = use_navigator().unwrap();
+    let error = use_state(|| false);
+    let username = use_state(|| String::new());
+    let password = use_state(|| String::new());
+
+    let on_username_input_changed = {
+        let username = username.clone();
+        Callback::from(move |e: InputEvent| {
+            username.set(get_value_from_input_event(e));
+        })
+    };
+    let on_password_input_changed = {
+        let password = password.clone();
+        Callback::from(move |e: InputEvent| {
+            password.set(get_value_from_input_event(e));
+        })
+    };
+    let onclick = {
+        let error = error.clone();
+        
+        Callback::from(move |_| {
+            let error = error.clone();
+            let navigator = navigator.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                error.set(false);
+                // Call backend login
+                navigator.push(&Route::AdminStart);
+            });
+        })
+    };
+
     html! {
-        <div class={"admin-login-container"}>
+        <div class={"page-container"}>
-            <div class={"admin-login-title"}>
+            <div class={"admin-login-container"}>
-                {"Portal de Administración"}
+                <div class={"admin-login-title"}>
-            </div>
+                    {"Portal de Administración"}
-            <div class={"admin-login-form-container"}>
+                </div>
-                <div class={"admin-login-form-textfield-"}>
+                <div class={"admin-login-form-container"}>
-                    {"Google"}
+                    <div class={"admin-login-form-textfield-container"}>
+                        <div class={"admin-login-form-textfield-label"}>{"usuario"}</div>
+                        <input class={"admin-login-form-textfield"} oninput={on_username_input_changed}/>
+                    </div>
+                    <div class={"admin-login-form-textfield-container"}>
+                        <div class={"admin-login-form-textfield-label"}>{"contraseña"}</div>
+                        <input type={"password"} class={"admin-login-form-textfield"} oninput={on_password_input_changed}/>
+                    </div>
+                    <div class={"admin-login-form-button"} onclick={onclick}>
+                        {"Continuar"}
+                    </div>
+                    {if *error { html! { <div class={"admin-login-form-error-message"}>{"Su usuario y contraseña no son validos."}</div> }} else { html! {} }}
                 </div>
             </div>
         </div>
+        
     }
 }

src/pages/admin/mod.rs

@@ -1 +1,2 @@
-pub mod login;
+pub mod login;
+pub mod start;

src/pages/admin/start.rs

@@ -0,0 +1,12 @@
+use yew::prelude::*;
+
+#[function_component(AdminStart)]
+pub fn admin_start() -> Html {
+    html! {
+        <div class={"page-container"}>
+            <div class={"admin-start-container"}>
+                {""}
+            </div>
+        </div>
+    }
+}

src/pages/agents.rs

@@ -12,14 +12,17 @@ pub fn agents_page() -> Html {
         let agents = agents.clone();
         let finished_loading = finished_loading.clone();
         wasm_bindgen_futures::spawn_local(async move {
-           match get_all_agents().await {
+            match get_all_agents().await {
-                Ok(fetched_agents) => {
+                Ok(mut fetched_agents) => {
-                   agents.set(fetched_agents);
+                    if let Some(jl_agent_pos) = fetched_agents.iter().position(|agent| agent.full_name == "Jorge Ledesma") {
-                   finished_loading.set(true);
+                        let removed_agent = fetched_agents.remove(jl_agent_pos);
-               },
+                        fetched_agents.insert(0, removed_agent);
-                Err(error) => {
+                    }
-                   log::error!("Error fetching listing. Error: {:?}", error);
+                    agents.set(fetched_agents);
-               }
+                    finished_loading.set(true);
+                },
+                Err(error) => log::error!("Error fetching listing. Error: {:?}", error)
+                
            };
         });
     });

src/routes/main_router.rs

@@ -3,7 +3,7 @@ use yew::prelude::*;
 
 use uuid::Uuid;
 
-use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage, admin::login::AdminLoginPage, agents::AgentsPage}};
+use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage, admin::{login::AdminLoginPage, start::AdminStart}, agents::AgentsPage}};
 
 #[derive(Clone, Routable, PartialEq)]
 pub enum Route {
@@ -20,6 +20,8 @@ pub enum Route {
 
     #[at("/admin")]
     Admin,
+    #[at("/admin/start")]
+    AdminStart,
 
     #[not_found]
     #[at("/404")]
@@ -33,7 +35,10 @@ pub fn switch(routes: Route) -> Html {
         Route::Details { project_id } => html! { <DetailsPage project_id={project_id}/> },
         Route::NotFound => html! { <NotFoundPage/> },
         Route::Contact => html! { <ContactPage/> },
-        Route::Admin => html! { <AdminLoginPage/> },
         Route::Agentes => html! { <AgentsPage/> },
+
+        Route::Admin => html! { <AdminLoginPage/> },
+        Route::AdminStart => html! { <AdminStart/>},
+        
     }
 }