From b45d71b7e6d82214a6622e3874ca3a94d3155fbf Mon Sep 17 00:00:00 2001 From: Franklin Date: Sat, 15 Apr 2023 09:35:33 -0400 Subject: [PATCH] Added admin login page style without backend connection and admin start page --- Readme.md | 12 ++---- css/admin-login.css | 77 +++++++++++++++++++++++++++++++++++++++ css/admin-start.css | 10 +++++ index.html | 3 +- src/pages/admin/login.rs | 60 ++++++++++++++++++++++++++---- src/pages/admin/mod.rs | 3 +- src/pages/admin/start.rs | 12 ++++++ src/pages/agents.rs | 19 ++++++---- src/routes/main_router.rs | 9 ++++- 9 files changed, 177 insertions(+), 28 deletions(-) create mode 100644 css/admin-start.css create mode 100644 src/pages/admin/start.rs diff --git a/Readme.md b/Readme.md index 1ae3b86..e1090f0 100644 --- a/Readme.md +++ b/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 -- [ ] Whatsapp button link -- [ ] Contact widget should be whatsapp OR email depending on agent contact info -- [ ] Footer should have call to action? +- [x] Show page to client and start work on admin panel +- [x] Whatsapp button link - [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 \ No newline at end of file diff --git a/css/admin-login.css b/css/admin-login.css index e69de29..91ccf47 100644 --- a/css/admin-login.css +++ b/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; +} \ No newline at end of file diff --git a/css/admin-start.css b/css/admin-start.css new file mode 100644 index 0000000..64ca453 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/index.html b/index.html index a323c05..27ebf47 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,10 @@ - + + diff --git a/src/pages/admin/login.rs b/src/pages/admin/login.rs index bb78d08..d0b6546 100644 --- a/src/pages/admin/login.rs +++ b/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! { -
- -