app: Implement the first screen of password reset

app/src/components/app.rs

@@ -7,6 +7,7 @@ use crate::{
         group_table::GroupTable,
         login::LoginForm,
         logout::LogoutButton,
+        reset_password_step1::ResetPasswordStep1Form,
         router::{AppRoute, Link, NavButton},
         user_details::UserDetails,
         user_table::UserTable,
@@ -101,40 +102,7 @@ impl Component for App {
               <div class="row justify-content-center">
                 <div class="shadow-sm py-3" style="max-width: 1000px">
                   <Router<AppRoute>
-                    render = Router::render(move |switch: AppRoute| {
+                    render = Router::render(move |s| Self::dispatch_route(s, &link, is_admin))
-                        match switch {
-                            AppRoute::Login => html! {
-                                <LoginForm on_logged_in=link.callback(Msg::Login)/>
-                            },
-                            AppRoute::CreateUser => html! {
-                                <CreateUserForm/>
-                            },
-                            AppRoute::Index | AppRoute::ListUsers => html! {
-                                <div>
-                                  <UserTable />
-                                  <NavButton classes="btn btn-primary" route=AppRoute::CreateUser>{"Create a user"}</NavButton>
-                                </div>
-                            },
-                            AppRoute::CreateGroup => html! {
-                                <CreateGroupForm/>
-                            },
-                            AppRoute::ListGroups => html! {
-                                <div>
-                                  <GroupTable />
-                                  <NavButton classes="btn btn-primary" route=AppRoute::CreateGroup>{"Create a group"}</NavButton>
-                                </div>
-                            },
-                            AppRoute::GroupDetails(group_id) => html! {
-                                <GroupDetails group_id=group_id />
-                            },
-                            AppRoute::UserDetails(username) => html! {
-                                <UserDetails username=username.clone() is_admin=is_admin />
-                            },
-                            AppRoute::ChangePassword(username) => html! {
-                                <ChangePasswordForm username=username.clone() is_admin=is_admin />
-                            }
-                        }
-                    })
                   />
                 </div>
               </div>
@@ -147,7 +115,11 @@ impl App {
     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") {
+        if current_route.is_empty()
+            || current_route == "/"
+            || current_route.contains("login")
+            || current_route.contains("reset-password")
+        {
             None
         } else {
             use yew_router::Switch;
@@ -156,6 +128,11 @@ impl App {
     }
 
     fn apply_initial_redirections(&mut self) {
+        let route_service = RouteService::<()>::new();
+        let current_route = route_service.get_path();
+        if current_route.contains("reset-password") {
+            return;
+        }
         match &self.user_info {
             None => {
                 self.route_dispatcher
@@ -181,6 +158,44 @@ impl App {
         }
     }
 
+    fn dispatch_route(switch: AppRoute, link: &ComponentLink<Self>, is_admin: bool) -> Html {
+        match switch {
+            AppRoute::Login => html! {
+                <LoginForm on_logged_in=link.callback(Msg::Login)/>
+            },
+            AppRoute::CreateUser => html! {
+                <CreateUserForm/>
+            },
+            AppRoute::Index | AppRoute::ListUsers => html! {
+                <div>
+                  <UserTable />
+                  <NavButton classes="btn btn-primary" route=AppRoute::CreateUser>{"Create a user"}</NavButton>
+                </div>
+            },
+            AppRoute::CreateGroup => html! {
+                <CreateGroupForm/>
+            },
+            AppRoute::ListGroups => html! {
+                <div>
+                  <GroupTable />
+                  <NavButton classes="btn btn-primary" route=AppRoute::CreateGroup>{"Create a group"}</NavButton>
+                </div>
+            },
+            AppRoute::GroupDetails(group_id) => html! {
+                <GroupDetails group_id=group_id />
+            },
+            AppRoute::UserDetails(username) => html! {
+                <UserDetails username=username is_admin=is_admin />
+            },
+            AppRoute::ChangePassword(username) => html! {
+                <ChangePasswordForm username=username is_admin=is_admin />
+            },
+            AppRoute::StartResetPassword => html! {
+                <ResetPasswordStep1Form />
+            },
+        }
+    }
+
     fn view_banner(&self) -> Html {
         html! {
           <header class="p-3 mb-4 border-bottom shadow-sm">

app/src/components/login.rs

@@ -1,6 +1,9 @@
-use crate::infra::{
+use crate::{
-    api::HostService,
+    components::router::{AppRoute, NavButton},
-    common_component::{CommonComponent, CommonComponentParts},
+    infra::{
+        api::HostService,
+        common_component::{CommonComponent, CommonComponentParts},
+    },
 };
 use anyhow::{anyhow, bail, Context, Result};
 use lldap_auth::*;
@@ -160,7 +163,7 @@ impl Component for LoginForm {
                     placeholder="Password"
                     autocomplete="current-password" />
                 </div>
-                <div class="form-group">
+                <div class="form-group mt-3">
                   <button
                     type="submit"
                     class="btn btn-primary"
@@ -168,6 +171,12 @@ impl Component for LoginForm {
                     onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
                     {"Login"}
                   </button>
+                  <NavButton
+                    classes="btn-link btn"
+                    disabled=self.common.is_task_running()
+                    route=AppRoute::StartResetPassword>
+                    {"Forgot your password?"}
+                  </NavButton>
                 </div>
                 <div class="form-group">
                 { if let Some(e) = &self.common.error {

app/src/components/mod.rs

@@ -11,6 +11,7 @@ pub mod group_table;
 pub mod login;
 pub mod logout;
 pub mod remove_user_from_group;
+pub mod reset_password_step1;
 pub mod router;
 pub mod select;
 pub mod user_details;

app/src/components/reset_password_step1.rs

@@ -0,0 +1,140 @@
+use crate::{
+    components::router::{AppRoute, NavButton},
+    infra::{
+        api::HostService,
+        common_component::{CommonComponent, CommonComponentParts},
+    },
+};
+use anyhow::{bail, Result};
+use validator_derive::Validate;
+use yew::prelude::*;
+use yew_form::Form;
+use yew_form_derive::Model;
+
+pub struct ResetPasswordStep1Form {
+    common: CommonComponentParts<Self>,
+    form: Form<FormModel>,
+    just_succeeded: bool,
+}
+
+/// The fields of the form, with the constraints.
+#[derive(Model, Validate, PartialEq, Clone, Default)]
+pub struct FormModel {
+    #[validate(length(min = 1, message = "Missing username"))]
+    username: String,
+}
+
+pub enum Msg {
+    Update,
+    Submit,
+    PasswordResetResponse(Result<()>),
+}
+
+impl CommonComponent<ResetPasswordStep1Form> for ResetPasswordStep1Form {
+    fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
+        match msg {
+            Msg::Update => Ok(true),
+            Msg::Submit => {
+                if !self.form.validate() {
+                    bail!("Check the form for errors");
+                }
+                let FormModel { username } = self.form.model();
+                self.common.call_backend(
+                    HostService::reset_password_step1,
+                    &username,
+                    Msg::PasswordResetResponse,
+                )?;
+                Ok(true)
+            }
+            Msg::PasswordResetResponse(response) => {
+                response?;
+                self.just_succeeded = true;
+                Ok(true)
+            }
+        }
+    }
+
+    fn mut_common(&mut self) -> &mut CommonComponentParts<Self> {
+        &mut self.common
+    }
+}
+
+impl Component for ResetPasswordStep1Form {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        ResetPasswordStep1Form {
+            common: CommonComponentParts::<Self>::create(props, link),
+            form: Form::<FormModel>::new(FormModel::default()),
+            just_succeeded: false,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        self.just_succeeded = false;
+        CommonComponentParts::<Self>::update(self, msg)
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        type Field = yew_form::Field<FormModel>;
+        html! {
+            <form
+              class="form center-block col-sm-4 col-offset-4">
+                <div class="input-group">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <i class="bi-person-fill"/>
+                    </span>
+                  </div>
+                  <Field
+                    class="form-control"
+                    class_invalid="is-invalid has-error"
+                    class_valid="has-success"
+                    form=&self.form
+                    field_name="username"
+                    placeholder="Username"
+                    autocomplete="username"
+                    oninput=self.common.callback(|_| Msg::Update) />
+                </div>
+                { if self.just_succeeded {
+                    html! {
+                      {"A reset token has been sent to your email."}
+                    }
+                } else {
+                    html! {
+                        <div class="form-group mt-3">
+                          <button
+                            type="submit"
+                            class="btn btn-primary"
+                            disabled=self.common.is_task_running()
+                            onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
+                            {"Reset password"}
+                          </button>
+                          <NavButton
+                            classes="btn-link btn"
+                            disabled=self.common.is_task_running()
+                            route=AppRoute::Login>
+                            {"Back"}
+                          </NavButton>
+                        </div>
+                    }
+                }}
+                <div class="form-group">
+                { if let Some(e) = &self.common.error {
+                    html! {
+                      <div class="alert alert-danger">
+                        {e.to_string() }
+                      </div>
+                    }
+                  } else { html! {} }
+                }
+                </div>
+            </form>
+        }
+    }
+}

app/src/components/router.rs

@@ -7,6 +7,8 @@ use yew_router::{
 pub enum AppRoute {
     #[to = "/login"]
     Login,
+    #[to = "/reset-password/step1"]
+    StartResetPassword,
     #[to = "/users/create"]
     CreateUser,
     #[to = "/users"]

app/src/infra/api.rs

@@ -232,4 +232,16 @@ impl HostService {
             "Could not logout",
         )
     }
+
+    pub fn reset_password_step1(
+        username: &str,
+        callback: Callback<Result<()>>,
+    ) -> Result<FetchTask> {
+        call_server_empty_response_with_error_message(
+            &format!("/auth/reset/step1/{}", username),
+            yew::format::Nothing,
+            callback,
+            "Could not logout",
+        )
+    }
 }