app: reorganize and add a page to change the password

app/src/components/app.rs

@@ -1,22 +1,28 @@
 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::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(
+                    .send(RouteRequest::ChangeRoute(Route::from(
-                        self.redirect_to.as_deref().unwrap_or_else(|| {
+                        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
-                        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()),
-                        ));
+                            )));
                     }
                 }
             },

app/src/components/change_password.rs

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

app/src/components/create_user.rs

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

app/src/components/login.rs

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

app/src/components/logout.rs

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

app/src/components/mod.rs

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

app/src/components/router.rs

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

app/src/components/user_details.rs

@@ -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::{
-use yew::services::{fetch::FetchTask, ConsoleService};
+    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>
                 }
             }

app/src/components/user_table.rs

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

app/src/infra/api.rs

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

app/src/infra/mod.rs

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

app/src/lib.rs

@@ -1,20 +1,13 @@
 #![recursion_limit = "256"]
 #![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};
 
 #[wasm_bindgen]
 pub fn run_app() -> Result<(), JsValue> {
-    yew::start_app::<app::App>();
+    yew::start_app::<components::app::App>();
 
     Ok(())
 }

server/src/infra/tcp_server.rs

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