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

This commit is contained in:
Franklin 2023-04-15 09:35:33 -04:00
parent e624aa7799
commit b45d71b7e6
9 changed files with 177 additions and 28 deletions

View File

@ -1,12 +1,8 @@
# JL-Frontend # 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) - [ ] 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] 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) - [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 Features arriba de la desc y las imagenes de la unidad
- [x] Poner el logo de remax en el footer - [x] Poner el logo de remax en el footer
- [x] Poner logos de facebook, instagram, youtube, en el footer (Sin enlaces) - [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 - [ ] 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] Space between Unit selection menu and unit media on empty unit features
- [x] Make the navbar logo bigger - [x] Make the navbar logo bigger
@ -30,6 +26,6 @@ New todo's
- [x] Contact us -> Sell with us - [x] Contact us -> Sell with us
- [ ] Static image folder for start page - [ ] Static image folder for start page
- [ ] Admin panel with page loads & contact us clicks - [ ] 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] If someone enters the page from an agent, make anything that appears on the website reference them.
- [x] Contact us Functionality - [x] Contact us Functionality

View File

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

10
css/admin-start.css Normal file
View File

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

View File

@ -10,9 +10,10 @@
<link data-trunk type="text/css" href="css/search.css" rel="css" /> <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/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/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/agent.css" rel="css" />
<link data-trunk type="text/css" href="css/contact.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/loading.css" rel="css" />
<link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" /> <link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />

View File

@ -1,19 +1,63 @@
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::use_navigator; use yew_router::prelude::use_navigator;
use crate::{utils::input::get_value_from_input_event, routes::main_router::Route};
#[function_component(AdminLoginPage)] #[function_component(AdminLoginPage)]
pub fn login_page() -> Html { 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! { html! {
<div class={"page-container"}>
<div class={"admin-login-container"}> <div class={"admin-login-container"}>
<div class={"admin-login-title"}> <div class={"admin-login-title"}>
{"Portal de Administración"} {"Portal de Administración"}
</div> </div>
<div class={"admin-login-form-container"}> <div class={"admin-login-form-container"}>
<div class={"admin-login-form-textfield-"}> <div class={"admin-login-form-textfield-container"}>
{"Google"} <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> </div>
</div> </div>
} }
} }

View File

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

12
src/pages/admin/start.rs Normal file
View File

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

View File

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

View File

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