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::{
cookies::get_cookie, create_user::CreateUserForm, login::LoginForm, logout::LogoutButton,
user_details::UserDetails, user_table::UserTable,
components::{
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::services::ConsoleService;
use yew_router::{
agent::{RouteAgentDispatcher, RouteRequest},
components::RouterAnchor,
route::Route,
router::Router,
service::RouteService,
Switch,
};
pub struct App {
link: ComponentLink<Self>,
user_info: Option<(String, bool)>,
redirect_to: Option<String>,
redirect_to: Option<AppRoute>,
route_dispatcher: RouteAgentDispatcher,
}
@ -25,22 +31,6 @@ pub enum Msg {
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 {
type Message = Msg;
type Properties = ();
@ -72,20 +62,20 @@ impl Component for App {
match msg {
Msg::Login((user_name, is_admin)) => {
self.user_info = Some((user_name.clone(), is_admin));
let user_route = "/details/".to_string() + &user_name;
self.route_dispatcher
.send(RouteRequest::ChangeRoute(Route::new_no_state(
self.redirect_to.as_deref().unwrap_or_else(|| {
.send(RouteRequest::ChangeRoute(Route::from(
self.redirect_to.take().unwrap_or_else(|| {
if is_admin {
"/users"
AppRoute::ListUsers
} else {
&user_route
AppRoute::UserDetails(user_name.clone())
}
}),
)));
}
Msg::Logout => {
self.user_info = None;
self.redirect_to = None;
}
}
if self.user_info.is_none() {
@ -129,6 +119,12 @@ impl Component for App {
<UserDetails username=username.clone() />
</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 {
fn get_redirect_route() -> Option<String> {
fn get_redirect_route() -> Option<AppRoute> {
let route_service = RouteService::<()>::new();
let current_route = route_service.get_path();
if current_route.is_empty() || current_route == "/" || current_route.contains("login") {
None
} else {
Some(current_route)
use yew_router::Switch;
AppRoute::from_route_part::<()>(current_route, None).0
}
}
fn apply_initial_redirections(&mut self) {
match &self.user_info {
None => {
ConsoleService::info("Redirecting to login");
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::new_no_state("/login")));
}
Some((user_name, is_admin)) => match &self.redirect_to {
Some(url) => {
ConsoleService::info(&format!("Redirecting to specified url: {}", url));
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::new_no_state(url)));
.send(RouteRequest::ReplaceRoute(Route::from(url.clone())));
}
None => {
if *is_admin {
ConsoleService::info("Redirecting to user list");
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::new_no_state("/users")));
} else {
ConsoleService::info("Redirecting to user view");
self.route_dispatcher.send(RouteRequest::ReplaceRoute(
Route::new_no_state(&("/details/".to_string() + user_name)),
));
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::from(
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 graphql_client::GraphQLQuery;
use lldap_auth::{opaque, registration};
@ -14,7 +14,7 @@ use yew_router::{
schema_path = "../schema.graphql",
query_path = "queries/create_user.graphql",
response_derives = "Debug",
custom_scalars_module = "crate::graphql"
custom_scalars_module = "crate::infra::graphql"
)]
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 })>
<div>
<label for="username">{"User name:"}</label>
<input type="text" id="username" />
<input type="text" id="username" required=true />
</div>
<div>
<label for="email">{"Email:"}</label>
<input type="text" id="email" />
<input type="email" id="email" required=true />
</div>
<div>
<label for="displayname">{"Display name:"}</label>
@ -198,7 +198,7 @@ impl Component for CreateUserForm {
</div>
<div>
<label for="password">{"Password:"}</label>
<input type="password" id="password" />
<input type="password" id="password" autocomplete="new-password" minlength="8" />
</div>
<button type="submit">{"Submit"}</button>
<div>

View File

@ -1,10 +1,9 @@
use crate::api::HostService;
use crate::infra::api::HostService;
use anyhow::{anyhow, Context, Result};
use lldap_auth::*;
use wasm_bindgen::JsCast;
use yew::prelude::*;
use yew::services::{fetch::FetchTask, ConsoleService};
use yew::FocusEvent;
pub struct LoginForm {
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 })>
<div>
<label for="username">{"User name:"}</label>
<input type="text" id="username" />
<input type="text" id="username" required=true />
</div>
<div>
<label for="password">{"Password:"}</label>
<input type="password" id="password" />
<input type="password" id="password" required=true autocomplete="current-password" />
</div>
<button type="submit">{"Login"}</button>
<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 yew::prelude::*;
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 graphql_client::GraphQLQuery;
use yew::prelude::*;
use yew::services::{fetch::FetchTask, ConsoleService};
use yew::{
prelude::*,
services::{fetch::FetchTask, ConsoleService},
};
#[derive(GraphQLQuery)]
#[graphql(
schema_path = "../schema.graphql",
query_path = "queries/get_user_details.graphql",
response_derives = "Debug",
custom_scalars_module = "crate::graphql"
custom_scalars_module = "crate::infra::graphql"
)]
pub struct GetUserDetails;
@ -21,7 +26,7 @@ type User = get_user_details::GetUserDetailsUser;
query_path = "queries/update_user.graphql",
response_derives = "Debug",
variables_derives = "Clone",
custom_scalars_module = "crate::graphql"
custom_scalars_module = "crate::infra::graphql"
)]
pub struct UpdateUser;
@ -248,6 +253,9 @@ impl Component for UserDetails {
</div>
}
} else { html! {} }}
<div>
<NavButton route=AppRoute::ChangePassword(self.username.clone())>{"Change password"}</NavButton>
</div>
</form>
}
}

View File

@ -1,4 +1,4 @@
use crate::api::HostService;
use crate::infra::api::HostService;
use anyhow::{anyhow, Result};
use graphql_client::GraphQLQuery;
use yew::format::Json;
@ -10,7 +10,7 @@ use yew::services::{fetch::FetchTask, ConsoleService};
schema_path = "../schema.graphql",
query_path = "queries/list_users.graphql",
response_derives = "Debug",
custom_scalars_module = "crate::graphql"
custom_scalars_module = "crate::infra::graphql"
)]
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 graphql_client::GraphQLQuery;
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"]
#![allow(clippy::nonstandard_macro_braces)]
mod api;
mod app;
mod cookies;
mod create_user;
mod graphql;
mod login;
mod logout;
mod user_details;
mod user_table;
pub mod components;
pub mod infra;
use wasm_bindgen::prelude::{wasm_bindgen, JsValue};
#[wasm_bindgen]
pub fn run_app() -> Result<(), JsValue> {
yew::start_app::<app::App>();
yew::start_app::<components::app::App>();
Ok(())
}

View File

@ -20,7 +20,7 @@ use std::sync::RwLock;
async fn index(req: HttpRequest) -> actix_web::Result<NamedFile> {
let mut path = PathBuf::new();
path.push("../app");
path.push("app");
let file = req.match_info().query("filename");
path.push(if file.is_empty() { "index.html" } else { file });
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"));
}
}