franklinblanco
/
jl-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Readme.md
View File

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

77
css/admin-login.css
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;
}

3
index.html
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/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" />

60
src/pages/admin/login.rs
View File

@ -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={"admin-login-title"}>
{"Portal de Administración"}
</div>
<div class={"admin-login-form-container"}>
<div class={"admin-login-form-textfield-"}>
{"Google"}
<div class={"page-container"}>
<div class={"admin-login-container"}>
<div class={"admin-login-title"}>
{"Portal de Administración"}
</div>
<div class={"admin-login-form-container"}>
<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>
}
}

3
src/pages/admin/mod.rs
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>
}
}

19
src/pages/agents.rs
View File

@ -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 {
Ok(fetched_agents) => {
agents.set(fetched_agents);
finished_loading.set(true);
},
Err(error) => {
log::error!("Error fetching listing. Error: {:?}", error);
}
match get_all_agents().await {
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);
finished_loading.set(true);
},
Err(error) => log::error!("Error fetching listing. Error: {:?}", error)
};
});
});

9
src/routes/main_router.rs
View File

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