Added admin login page style without backend connection and admin start page
This commit is contained in:
parent
e624aa7799
commit
b45d71b7e6
12
Readme.md
12
Readme.md
|
@ -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
|
|
@ -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;
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
.admin-start-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 50px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
|
@ -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" />
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1 +1,2 @@
|
||||||
pub mod login;
|
pub mod login;
|
||||||
|
pub mod start;
|
|
@ -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>
|
||||||
|
}
|
||||||
|
}
|
|
@ -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);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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/>},
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue