app: reorganize and add a page to change the password

This commit is contained in:
Valentin Tolmer 2021-09-12 11:54:47 +02:00 committed by nitnelave
parent a184cce38f
commit 005e18472e
15 changed files with 355 additions and 88 deletions

View File

@ -1,22 +1,28 @@
use crate::{ use crate::{
cookies::get_cookie, create_user::CreateUserForm, login::LoginForm, logout::LogoutButton, components::{
user_details::UserDetails, user_table::UserTable, change_password::ChangePasswordForm,
create_user::CreateUserForm,
login::LoginForm,
logout::LogoutButton,
router::{AppRoute, Link},
user_details::UserDetails,
user_table::UserTable,
},
infra::cookies::get_cookie,
}; };
use yew::prelude::*; use yew::prelude::*;
use yew::services::ConsoleService; use yew::services::ConsoleService;
use yew_router::{ use yew_router::{
agent::{RouteAgentDispatcher, RouteRequest}, agent::{RouteAgentDispatcher, RouteRequest},
components::RouterAnchor,
route::Route, route::Route,
router::Router, router::Router,
service::RouteService, service::RouteService,
Switch,
}; };
pub struct App { pub struct App {
link: ComponentLink<Self>, link: ComponentLink<Self>,
user_info: Option<(String, bool)>, user_info: Option<(String, bool)>,
redirect_to: Option<String>, redirect_to: Option<AppRoute>,
route_dispatcher: RouteAgentDispatcher, route_dispatcher: RouteAgentDispatcher,
} }
@ -25,22 +31,6 @@ pub enum Msg {
Logout, Logout,
} }
#[derive(Switch, Debug, Clone)]
pub enum AppRoute {
#[to = "/login"]
Login,
#[to = "/users"]
ListUsers,
#[to = "/create_user"]
CreateUser,
#[to = "/details/{user_id}"]
UserDetails(String),
#[to = "/"]
Index,
}
type Link = RouterAnchor<AppRoute>;
impl Component for App { impl Component for App {
type Message = Msg; type Message = Msg;
type Properties = (); type Properties = ();
@ -72,20 +62,20 @@ impl Component for App {
match msg { match msg {
Msg::Login((user_name, is_admin)) => { Msg::Login((user_name, is_admin)) => {
self.user_info = Some((user_name.clone(), is_admin)); self.user_info = Some((user_name.clone(), is_admin));
let user_route = "/details/".to_string() + &user_name;
self.route_dispatcher self.route_dispatcher
.send(RouteRequest::ChangeRoute(Route::new_no_state( .send(RouteRequest::ChangeRoute(Route::from(
self.redirect_to.as_deref().unwrap_or_else(|| { self.redirect_to.take().unwrap_or_else(|| {
if is_admin { if is_admin {
"/users" AppRoute::ListUsers
} else { } else {
&user_route AppRoute::UserDetails(user_name.clone())
} }
}), }),
))); )));
} }
Msg::Logout => { Msg::Logout => {
self.user_info = None; self.user_info = None;
self.redirect_to = None;
} }
} }
if self.user_info.is_none() { if self.user_info.is_none() {
@ -129,6 +119,12 @@ impl Component for App {
<UserDetails username=username.clone() /> <UserDetails username=username.clone() />
</div> </div>
}, },
AppRoute::ChangePassword(username) => html! {
<div>
<LogoutButton on_logged_out=link.callback(|_| Msg::Logout) />
<ChangePasswordForm username=username.clone() />
</div>
}
} }
}) })
/> />
@ -138,39 +134,37 @@ impl Component for App {
} }
impl App { impl App {
fn get_redirect_route() -> Option<String> { fn get_redirect_route() -> Option<AppRoute> {
let route_service = RouteService::<()>::new(); let route_service = RouteService::<()>::new();
let current_route = route_service.get_path(); let current_route = route_service.get_path();
if current_route.is_empty() || current_route == "/" || current_route.contains("login") { if current_route.is_empty() || current_route == "/" || current_route.contains("login") {
None None
} else { } else {
Some(current_route) use yew_router::Switch;
AppRoute::from_route_part::<()>(current_route, None).0
} }
} }
fn apply_initial_redirections(&mut self) { fn apply_initial_redirections(&mut self) {
match &self.user_info { match &self.user_info {
None => { None => {
ConsoleService::info("Redirecting to login");
self.route_dispatcher self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::new_no_state("/login"))); .send(RouteRequest::ReplaceRoute(Route::new_no_state("/login")));
} }
Some((user_name, is_admin)) => match &self.redirect_to { Some((user_name, is_admin)) => match &self.redirect_to {
Some(url) => { Some(url) => {
ConsoleService::info(&format!("Redirecting to specified url: {}", url));
self.route_dispatcher self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::new_no_state(url))); .send(RouteRequest::ReplaceRoute(Route::from(url.clone())));
} }
None => { None => {
if *is_admin { if *is_admin {
ConsoleService::info("Redirecting to user list");
self.route_dispatcher self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::new_no_state("/users"))); .send(RouteRequest::ReplaceRoute(Route::new_no_state("/users")));
} else { } else {
ConsoleService::info("Redirecting to user view"); self.route_dispatcher
self.route_dispatcher.send(RouteRequest::ReplaceRoute( .send(RouteRequest::ReplaceRoute(Route::from(
Route::new_no_state(&("/details/".to_string() + user_name)), AppRoute::UserDetails(user_name.clone()),
)); )));
} }
} }
}, },

View File

@ -0,0 +1,261 @@
use crate::{
components::router::{AppRoute, NavButton},
infra::api::HostService,
};
use anyhow::{anyhow, bail, Context, Result};
use lldap_auth::*;
use wasm_bindgen::JsCast;
use yew::{
prelude::*,
services::{fetch::FetchTask, ConsoleService},
};
#[derive(PartialEq, Eq)]
enum OpaqueData {
None,
Login(opaque::client::login::ClientLogin),
Registration(opaque::client::registration::ClientRegistration),
}
impl Default for OpaqueData {
fn default() -> Self {
OpaqueData::None
}
}
impl OpaqueData {
fn take(&mut self) -> Self {
std::mem::take(self)
}
}
pub struct ChangePasswordForm {
link: ComponentLink<Self>,
username: String,
error: Option<anyhow::Error>,
node_ref: NodeRef,
opaque_data: OpaqueData,
successfully_changed_password: bool,
// Used to keep the request alive long enough.
_task: Option<FetchTask>,
}
#[derive(Clone, PartialEq, Properties)]
pub struct Props {
pub username: String,
}
pub enum Msg {
Submit,
AuthenticationStartResponse(Result<Box<login::ServerLoginStartResponse>>),
RegistrationStartResponse(Result<Box<registration::ServerRegistrationStartResponse>>),
RegistrationFinishResponse(Result<()>),
}
fn get_form_field(field_id: &str) -> Option<String> {
let document = web_sys::window()?.document()?;
Some(
document
.get_element_by_id(field_id)?
.dyn_into::<web_sys::HtmlInputElement>()
.ok()?
.value(),
)
}
fn clear_form_fields() -> Option<()> {
let document = web_sys::window()?.document()?;
let clear_field = |id| {
document
.get_element_by_id(id)?
.dyn_into::<web_sys::HtmlInputElement>()
.ok()?
.set_value("");
Some(())
};
clear_field("oldPassword");
clear_field("newPassword");
clear_field("confirmPassword");
None
}
impl ChangePasswordForm {
fn set_error(&mut self, error: anyhow::Error) {
ConsoleService::error(&error.to_string());
self.error = Some(error);
}
fn call_backend<M, Req, C, Resp>(&mut self, method: M, req: Req, callback: C) -> Result<()>
where
M: Fn(Req, Callback<Resp>) -> Result<FetchTask>,
C: Fn(Resp) -> <Self as Component>::Message + 'static,
{
self._task = Some(method(req, self.link.callback(callback))?);
Ok(())
}
fn handle_message(&mut self, msg: <Self as Component>::Message) -> Result<()> {
match msg {
Msg::Submit => {
let old_password = get_form_field("oldPassword")
.ok_or_else(|| anyhow!("Could not get old password from form"))?;
let new_password = get_form_field("newPassword")
.ok_or_else(|| anyhow!("Could not get new password from form"))?;
let confirm_password = get_form_field("confirmPassword")
.ok_or_else(|| anyhow!("Could not get confirmation password from form"))?;
if new_password != confirm_password {
bail!("Confirmation password doesn't match");
}
let mut rng = rand::rngs::OsRng;
let login_start_request =
opaque::client::login::start_login(&old_password, &mut rng)
.context("Could not initialize login")?;
self.opaque_data = OpaqueData::Login(login_start_request.state);
let req = login::ClientLoginStartRequest {
username: self.username.clone(),
login_start_request: login_start_request.message,
};
self.call_backend(
HostService::login_start,
req,
Msg::AuthenticationStartResponse,
)?;
Ok(())
}
Msg::AuthenticationStartResponse(res) => {
let res = res.context("Could not initiate login")?;
match self.opaque_data.take() {
OpaqueData::Login(l) => {
opaque::client::login::finish_login(l, res.credential_response).map_err(
|e| {
// Common error, we want to print a full error to the console but only a
// simple one to the user.
ConsoleService::error(&format!(
"Invalid username or password: {}",
e
));
anyhow!("Invalid username or password")
},
)?;
}
_ => panic!("Unexpected data in opaque_data field"),
};
let mut rng = rand::rngs::OsRng;
let new_password = get_form_field("newPassword")
.ok_or_else(|| anyhow!("Could not get new password from form"))?;
let registration_start_request =
opaque::client::registration::start_registration(&new_password, &mut rng)
.context("Could not initiate password change")?;
let req = registration::ClientRegistrationStartRequest {
username: self.username.clone(),
registration_start_request: registration_start_request.message,
};
self.opaque_data = OpaqueData::Registration(registration_start_request.state);
self.call_backend(
HostService::register_start,
req,
Msg::RegistrationStartResponse,
)?;
Ok(())
}
Msg::RegistrationStartResponse(res) => {
let res = res.context("Could not initiate password change")?;
match self.opaque_data.take() {
OpaqueData::Registration(registration) => {
let mut rng = rand::rngs::OsRng;
let registration_finish =
opaque::client::registration::finish_registration(
registration,
res.registration_response,
&mut rng,
)
.context("Error during password change")?;
let req = registration::ClientRegistrationFinishRequest {
server_data: res.server_data,
registration_upload: registration_finish.message,
};
self.call_backend(
HostService::register_finish,
req,
Msg::RegistrationFinishResponse,
)
}
_ => panic!("Unexpected data in opaque_data field"),
}
}
Msg::RegistrationFinishResponse(response) => {
if response.is_ok() {
self.successfully_changed_password = true;
clear_form_fields();
}
response
}
}
}
}
impl Component for ChangePasswordForm {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
ChangePasswordForm {
link,
username: props.username,
error: None,
node_ref: NodeRef::default(),
opaque_data: OpaqueData::None,
successfully_changed_password: false,
_task: None,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.successfully_changed_password = false;
self.error = None;
if let Err(e) = self.handle_message(msg) {
self.set_error(e);
}
true
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
html! {
<form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::Submit })>
<div>
<label for="oldPassword">{"Old password:"}</label>
<input type="password" id="oldPassword" autocomplete="current-password" required=true />
</div>
<div>
<label for="newPassword">{"New password:"}</label>
<input type="password" id="newPassword" autocomplete="new-password" required=true minlength="8" />
</div>
<div>
<label for="confirmPassword">{"Confirm new password:"}</label>
<input type="password" id="confirmPassword" autocomplete="new-password" required=true minlength="8" />
</div>
<button type="submit">{"Submit"}</button>
<div>
{ if let Some(e) = &self.error {
html! { e.to_string() }
} else if self.successfully_changed_password {
html! {
<div>
<span>{"Successfully changed the password"}</span>
</div>
}
} else { html! {} }
}
</div>
<div>
<NavButton route=AppRoute::UserDetails(self.username.clone())>{"Back"}</NavButton>
</div>
</form>
}
}
}

View File

@ -1,4 +1,4 @@
use crate::api::HostService; use crate::infra::api::HostService;
use anyhow::{anyhow, Context, Result}; use anyhow::{anyhow, Context, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use lldap_auth::{opaque, registration}; use lldap_auth::{opaque, registration};
@ -14,7 +14,7 @@ use yew_router::{
schema_path = "../schema.graphql", schema_path = "../schema.graphql",
query_path = "queries/create_user.graphql", query_path = "queries/create_user.graphql",
response_derives = "Debug", response_derives = "Debug",
custom_scalars_module = "crate::graphql" custom_scalars_module = "crate::infra::graphql"
)] )]
pub struct CreateUser; pub struct CreateUser;
@ -178,11 +178,11 @@ impl Component for CreateUserForm {
<form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::SubmitForm })> <form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::SubmitForm })>
<div> <div>
<label for="username">{"User name:"}</label> <label for="username">{"User name:"}</label>
<input type="text" id="username" /> <input type="text" id="username" required=true />
</div> </div>
<div> <div>
<label for="email">{"Email:"}</label> <label for="email">{"Email:"}</label>
<input type="text" id="email" /> <input type="email" id="email" required=true />
</div> </div>
<div> <div>
<label for="displayname">{"Display name:"}</label> <label for="displayname">{"Display name:"}</label>
@ -198,7 +198,7 @@ impl Component for CreateUserForm {
</div> </div>
<div> <div>
<label for="password">{"Password:"}</label> <label for="password">{"Password:"}</label>
<input type="password" id="password" /> <input type="password" id="password" autocomplete="new-password" minlength="8" />
</div> </div>
<button type="submit">{"Submit"}</button> <button type="submit">{"Submit"}</button>
<div> <div>

View File

@ -1,10 +1,9 @@
use crate::api::HostService; use crate::infra::api::HostService;
use anyhow::{anyhow, Context, Result}; use anyhow::{anyhow, Context, Result};
use lldap_auth::*; use lldap_auth::*;
use wasm_bindgen::JsCast; use wasm_bindgen::JsCast;
use yew::prelude::*; use yew::prelude::*;
use yew::services::{fetch::FetchTask, ConsoleService}; use yew::services::{fetch::FetchTask, ConsoleService};
use yew::FocusEvent;
pub struct LoginForm { pub struct LoginForm {
link: ComponentLink<Self>, link: ComponentLink<Self>,
@ -146,11 +145,11 @@ impl Component for LoginForm {
<form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::Submit })> <form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::Submit })>
<div> <div>
<label for="username">{"User name:"}</label> <label for="username">{"User name:"}</label>
<input type="text" id="username" /> <input type="text" id="username" required=true />
</div> </div>
<div> <div>
<label for="password">{"Password:"}</label> <label for="password">{"Password:"}</label>
<input type="password" id="password" /> <input type="password" id="password" required=true autocomplete="current-password" />
</div> </div>
<button type="submit">{"Login"}</button> <button type="submit">{"Login"}</button>
<div> <div>

View File

@ -1,4 +1,4 @@
use crate::{api::HostService, cookies::delete_cookie}; use crate::infra::{api::HostService, cookies::delete_cookie};
use anyhow::Result; use anyhow::Result;
use yew::prelude::*; use yew::prelude::*;
use yew::services::{fetch::FetchTask, ConsoleService}; use yew::services::{fetch::FetchTask, ConsoleService};

View File

@ -0,0 +1,8 @@
pub mod app;
pub mod change_password;
pub mod create_user;
pub mod login;
pub mod logout;
pub mod router;
pub mod user_details;
pub mod user_table;

View File

@ -0,0 +1,24 @@
use yew_router::{
components::{RouterAnchor, RouterButton},
Switch,
};
#[derive(Switch, Debug, Clone)]
pub enum AppRoute {
#[to = "/login"]
Login,
#[to = "/users"]
ListUsers,
#[to = "/users/create"]
CreateUser,
#[to = "/user/{user_id}/password"]
ChangePassword(String),
#[to = "/user/{user_id}"]
UserDetails(String),
#[to = "/"]
Index,
}
pub type Link = RouterAnchor<AppRoute>;
pub type NavButton = RouterButton<AppRoute>;

View File

@ -1,15 +1,20 @@
use crate::api::HostService; use crate::{
components::router::{AppRoute, NavButton},
infra::api::HostService,
};
use anyhow::{anyhow, Result}; use anyhow::{anyhow, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use yew::prelude::*; use yew::{
use yew::services::{fetch::FetchTask, ConsoleService}; prelude::*,
services::{fetch::FetchTask, ConsoleService},
};
#[derive(GraphQLQuery)] #[derive(GraphQLQuery)]
#[graphql( #[graphql(
schema_path = "../schema.graphql", schema_path = "../schema.graphql",
query_path = "queries/get_user_details.graphql", query_path = "queries/get_user_details.graphql",
response_derives = "Debug", response_derives = "Debug",
custom_scalars_module = "crate::graphql" custom_scalars_module = "crate::infra::graphql"
)] )]
pub struct GetUserDetails; pub struct GetUserDetails;
@ -21,7 +26,7 @@ type User = get_user_details::GetUserDetailsUser;
query_path = "queries/update_user.graphql", query_path = "queries/update_user.graphql",
response_derives = "Debug", response_derives = "Debug",
variables_derives = "Clone", variables_derives = "Clone",
custom_scalars_module = "crate::graphql" custom_scalars_module = "crate::infra::graphql"
)] )]
pub struct UpdateUser; pub struct UpdateUser;
@ -248,6 +253,9 @@ impl Component for UserDetails {
</div> </div>
} }
} else { html! {} }} } else { html! {} }}
<div>
<NavButton route=AppRoute::ChangePassword(self.username.clone())>{"Change password"}</NavButton>
</div>
</form> </form>
} }
} }

View File

@ -1,4 +1,4 @@
use crate::api::HostService; use crate::infra::api::HostService;
use anyhow::{anyhow, Result}; use anyhow::{anyhow, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use yew::format::Json; use yew::format::Json;
@ -10,7 +10,7 @@ use yew::services::{fetch::FetchTask, ConsoleService};
schema_path = "../schema.graphql", schema_path = "../schema.graphql",
query_path = "queries/list_users.graphql", query_path = "queries/list_users.graphql",
response_derives = "Debug", response_derives = "Debug",
custom_scalars_module = "crate::graphql" custom_scalars_module = "crate::infra::graphql"
)] )]
pub struct ListUsersQuery; pub struct ListUsersQuery;

View File

@ -1,4 +1,4 @@
use crate::cookies::set_cookie; use super::cookies::set_cookie;
use anyhow::{anyhow, Context, Result}; use anyhow::{anyhow, Context, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use lldap_auth::{login, registration, JWTClaims}; use lldap_auth::{login, registration, JWTClaims};

3
app/src/infra/mod.rs Normal file
View File

@ -0,0 +1,3 @@
pub mod api;
pub mod cookies;
pub mod graphql;

View File

@ -1,20 +1,13 @@
#![recursion_limit = "256"] #![recursion_limit = "256"]
#![allow(clippy::nonstandard_macro_braces)] #![allow(clippy::nonstandard_macro_braces)]
mod api; pub mod components;
mod app; pub mod infra;
mod cookies;
mod create_user;
mod graphql;
mod login;
mod logout;
mod user_details;
mod user_table;
use wasm_bindgen::prelude::{wasm_bindgen, JsValue}; use wasm_bindgen::prelude::{wasm_bindgen, JsValue};
#[wasm_bindgen] #[wasm_bindgen]
pub fn run_app() -> Result<(), JsValue> { pub fn run_app() -> Result<(), JsValue> {
yew::start_app::<app::App>(); yew::start_app::<components::app::App>();
Ok(()) Ok(())
} }

View File

@ -20,7 +20,7 @@ use std::sync::RwLock;
async fn index(req: HttpRequest) -> actix_web::Result<NamedFile> { async fn index(req: HttpRequest) -> actix_web::Result<NamedFile> {
let mut path = PathBuf::new(); let mut path = PathBuf::new();
path.push("../app"); path.push("app");
let file = req.match_info().query("filename"); let file = req.match_info().query("filename");
path.push(if file.is_empty() { "index.html" } else { file }); path.push(if file.is_empty() { "index.html" } else { file });
Ok(NamedFile::open(path)?) Ok(NamedFile::open(path)?)
@ -109,26 +109,3 @@ where
) )
}) })
} }
#[cfg(test)]
mod tests {
use super::*;
use actix_web::test::TestRequest;
use std::path::Path;
#[actix_rt::test]
async fn test_index_ok() {
let req = TestRequest::default().to_http_request();
let resp = index(req).await.unwrap();
assert_eq!(resp.path(), Path::new("../app/index.html"));
}
#[actix_rt::test]
async fn test_index_main_js() {
let req = TestRequest::default()
.param("filename", "main.js")
.to_http_request();
let resp = index(req).await.unwrap();
assert_eq!(resp.path(), Path::new("../app/main.js"));
}
}