app: reorganize and add a page to change the password

app/src/components/app.rs

@@ -0,0 +1,173 @@
+use crate::{
+    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},
+    route::Route,
+    router::Router,
+    service::RouteService,
+};
+
+pub struct App {
+    link: ComponentLink<Self>,
+    user_info: Option<(String, bool)>,
+    redirect_to: Option<AppRoute>,
+    route_dispatcher: RouteAgentDispatcher,
+}
+
+pub enum Msg {
+    Login((String, bool)),
+    Logout,
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let mut app = Self {
+            link,
+            user_info: get_cookie("user_id")
+                .unwrap_or_else(|e| {
+                    ConsoleService::error(&e.to_string());
+                    None
+                })
+                .and_then(|u| {
+                    get_cookie("is_admin")
+                        .map(|so| so.map(|s| (u, s == "true")))
+                        .unwrap_or_else(|e| {
+                            ConsoleService::error(&e.to_string());
+                            None
+                        })
+                }),
+            redirect_to: Self::get_redirect_route(),
+            route_dispatcher: RouteAgentDispatcher::new(),
+        };
+        app.apply_initial_redirections();
+        app
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Login((user_name, is_admin)) => {
+                self.user_info = Some((user_name.clone(), is_admin));
+                self.route_dispatcher
+                    .send(RouteRequest::ChangeRoute(Route::from(
+                        self.redirect_to.take().unwrap_or_else(|| {
+                            if is_admin {
+                                AppRoute::ListUsers
+                            } else {
+                                AppRoute::UserDetails(user_name.clone())
+                            }
+                        }),
+                    )));
+            }
+            Msg::Logout => {
+                self.user_info = None;
+                self.redirect_to = None;
+            }
+        }
+        if self.user_info.is_none() {
+            self.route_dispatcher
+                .send(RouteRequest::ReplaceRoute(Route::new_no_state("/login")));
+        }
+        true
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        let link = self.link.clone();
+        html! {
+            <div>
+                <h1>{ "LLDAP" }</h1>
+                <Router<AppRoute>
+                  render = Router::render(move |switch: AppRoute| {
+                      match switch {
+                          AppRoute::Login => html! {
+                              <LoginForm on_logged_in=link.callback(Msg::Login)/>
+                          },
+                          AppRoute::CreateUser => html! {
+                              <div>
+                                <LogoutButton on_logged_out=link.callback(|_| Msg::Logout) />
+                                <CreateUserForm/>
+                              </div>
+                          },
+                          AppRoute::Index | AppRoute::ListUsers => html! {
+                              <div>
+                                <LogoutButton on_logged_out=link.callback(|_| Msg::Logout) />
+                                <UserTable />
+                                <Link route=AppRoute::CreateUser>{"Create a user"}</Link>
+                              </div>
+                          },
+                          AppRoute::UserDetails(username) => html! {
+                              <div>
+                                <LogoutButton on_logged_out=link.callback(|_| Msg::Logout) />
+                                <UserDetails username=username.clone() />
+                              </div>
+                          },
+                          AppRoute::ChangePassword(username) => html! {
+                              <div>
+                                <LogoutButton on_logged_out=link.callback(|_| Msg::Logout) />
+                                <ChangePasswordForm username=username.clone() />
+                              </div>
+                          }
+                      }
+                  })
+                />
+            </div>
+        }
+    }
+}
+
+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") {
+            None
+        } else {
+            use yew_router::Switch;
+            AppRoute::from_route_part::<()>(current_route, None).0
+        }
+    }
+
+    fn apply_initial_redirections(&mut self) {
+        match &self.user_info {
+            None => {
+                self.route_dispatcher
+                    .send(RouteRequest::ReplaceRoute(Route::new_no_state("/login")));
+            }
+            Some((user_name, is_admin)) => match &self.redirect_to {
+                Some(url) => {
+                    self.route_dispatcher
+                        .send(RouteRequest::ReplaceRoute(Route::from(url.clone())));
+                }
+                None => {
+                    if *is_admin {
+                        self.route_dispatcher
+                            .send(RouteRequest::ReplaceRoute(Route::new_no_state("/users")));
+                    } else {
+                        self.route_dispatcher
+                            .send(RouteRequest::ReplaceRoute(Route::from(
+                                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

@@ -0,0 +1,213 @@
+use crate::infra::api::HostService;
+use anyhow::{anyhow, Context, Result};
+use graphql_client::GraphQLQuery;
+use lldap_auth::{opaque, registration};
+use yew::prelude::*;
+use yew::services::{fetch::FetchTask, ConsoleService};
+use yew_router::{
+    agent::{RouteAgentDispatcher, RouteRequest},
+    route::Route,
+};
+
+#[derive(GraphQLQuery)]
+#[graphql(
+    schema_path = "../schema.graphql",
+    query_path = "queries/create_user.graphql",
+    response_derives = "Debug",
+    custom_scalars_module = "crate::infra::graphql"
+)]
+pub struct CreateUser;
+
+pub struct CreateUserForm {
+    link: ComponentLink<Self>,
+    route_dispatcher: RouteAgentDispatcher,
+    node_ref: NodeRef,
+    error: Option<anyhow::Error>,
+    registration_start: Option<opaque::client::registration::ClientRegistration>,
+    // Used to keep the request alive long enough.
+    _task: Option<FetchTask>,
+}
+
+pub enum Msg {
+    CreateUserResponse(Result<create_user::ResponseData>),
+    SubmitForm,
+    SuccessfulCreation,
+    RegistrationStartResponse(Result<Box<registration::ServerRegistrationStartResponse>>),
+    RegistrationFinishResponse(Result<()>),
+}
+
+#[allow(clippy::ptr_arg)]
+fn not_empty(s: &String) -> bool {
+    !s.is_empty()
+}
+
+impl CreateUserForm {
+    fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<()> {
+        match msg {
+            Msg::SubmitForm => {
+                let req = create_user::Variables {
+                    user: create_user::CreateUserInput {
+                        id: get_element("username")
+                            .filter(not_empty)
+                            .ok_or_else(|| anyhow!("Missing username"))?,
+                        email: get_element("email")
+                            .filter(not_empty)
+                            .ok_or_else(|| anyhow!("Missing email"))?,
+                        displayName: get_element("displayname").filter(not_empty),
+                        firstName: get_element("firstname").filter(not_empty),
+                        lastName: get_element("lastname").filter(not_empty),
+                    },
+                };
+                self._task = Some(HostService::graphql_query::<CreateUser>(
+                    req,
+                    self.link.callback(Msg::CreateUserResponse),
+                    "Error trying to create user",
+                )?);
+            }
+            Msg::CreateUserResponse(r) => {
+                match r {
+                    Err(e) => return Err(e),
+                    Ok(r) => ConsoleService::log(&format!(
+                        "Created user '{}' at '{}'",
+                        &r.create_user.id, &r.create_user.creation_date
+                    )),
+                };
+                let user_id = get_element("username")
+                    .filter(not_empty)
+                    .ok_or_else(|| anyhow!("Missing username"))?;
+                if let Some(password) = get_element("password").filter(not_empty) {
+                    // User was successfully created, let's register the password.
+                    let mut rng = rand::rngs::OsRng;
+                    let client_registration_start =
+                        opaque::client::registration::start_registration(&password, &mut rng)?;
+                    self.registration_start = Some(client_registration_start.state);
+                    let req = registration::ClientRegistrationStartRequest {
+                        username: user_id,
+                        registration_start_request: client_registration_start.message,
+                    };
+                    self._task = Some(
+                        HostService::register_start(
+                            req,
+                            self.link.callback(Msg::RegistrationStartResponse),
+                        )
+                        .context("Error trying to create user")?,
+                    );
+                } else {
+                    self.update(Msg::SuccessfulCreation);
+                }
+            }
+            Msg::RegistrationStartResponse(response) => {
+                debug_assert!(self.registration_start.is_some());
+                let response = response?;
+                let mut rng = rand::rngs::OsRng;
+                let registration_upload = opaque::client::registration::finish_registration(
+                    self.registration_start.take().unwrap(),
+                    response.registration_response,
+                    &mut rng,
+                )?;
+                let req = registration::ClientRegistrationFinishRequest {
+                    server_data: response.server_data,
+                    registration_upload: registration_upload.message,
+                };
+                self._task = Some(
+                    HostService::register_finish(
+                        req,
+                        self.link.callback(Msg::RegistrationFinishResponse),
+                    )
+                    .context("Error trying to register user")?,
+                );
+            }
+            Msg::RegistrationFinishResponse(response) => {
+                if response.is_err() {
+                    return response;
+                }
+                self.update(Msg::SuccessfulCreation);
+            }
+            Msg::SuccessfulCreation => {
+                self.route_dispatcher
+                    .send(RouteRequest::ChangeRoute(Route::new_no_state(
+                        "/list_users",
+                    )));
+            }
+        }
+        Ok(())
+    }
+}
+fn get_element(name: &str) -> Option<String> {
+    use wasm_bindgen::JsCast;
+    Some(
+        web_sys::window()?
+            .document()?
+            .get_element_by_id(name)?
+            .dyn_into::<web_sys::HtmlInputElement>()
+            .ok()?
+            .value(),
+    )
+}
+
+impl Component for CreateUserForm {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self {
+            link,
+            route_dispatcher: RouteAgentDispatcher::new(),
+            node_ref: NodeRef::default(),
+            error: None,
+            registration_start: None,
+            _task: None,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        self.error = None;
+        if let Err(e) = self.handle_msg(msg) {
+            ConsoleService::error(&e.to_string());
+            self.error = Some(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::SubmitForm })>
+                <div>
+                    <label for="username">{"User name:"}</label>
+                    <input type="text" id="username" required=true />
+                </div>
+                <div>
+                    <label for="email">{"Email:"}</label>
+                    <input type="email" id="email" required=true />
+                </div>
+                <div>
+                    <label for="displayname">{"Display name:"}</label>
+                    <input type="text" id="displayname" />
+                </div>
+                <div>
+                    <label for="firstname">{"First name:"}</label>
+                    <input type="text" id="firstname" />
+                </div>
+                <div>
+                    <label for="lastname">{"Last name:"}</label>
+                    <input type="text" id="lastname" />
+                </div>
+                <div>
+                    <label for="password">{"Password:"}</label>
+                    <input type="password" id="password" autocomplete="new-password" minlength="8" />
+                </div>
+                <button type="submit">{"Submit"}</button>
+                <div>
+                { if let Some(e) = &self.error {
+                    html! { e.to_string() }
+                  } else { html! {} }
+                }
+                </div>
+            </form>
+        }
+    }
+}

app/src/components/login.rs

@@ -0,0 +1,164 @@
+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};
+
+pub struct LoginForm {
+    link: ComponentLink<Self>,
+    on_logged_in: Callback<(String, bool)>,
+    error: Option<anyhow::Error>,
+    node_ref: NodeRef,
+    login_start: Option<opaque::client::login::ClientLogin>,
+    // Used to keep the request alive long enough.
+    _task: Option<FetchTask>,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct Props {
+    pub on_logged_in: Callback<(String, bool)>,
+}
+
+pub enum Msg {
+    Submit,
+    AuthenticationStartResponse(Result<Box<login::ServerLoginStartResponse>>),
+    AuthenticationFinishResponse(Result<(String, bool)>),
+}
+
+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(),
+    )
+}
+
+impl LoginForm {
+    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 username = get_form_field("username")
+                    .ok_or_else(|| anyhow!("Could not get username from form"))?;
+                let password = get_form_field("password")
+                    .ok_or_else(|| anyhow!("Could not get password from form"))?;
+                let mut rng = rand::rngs::OsRng;
+                let login_start_request = opaque::client::login::start_login(&password, &mut rng)
+                    .context("Could not initialize login")?;
+                self.login_start = Some(login_start_request.state);
+                let req = login::ClientLoginStartRequest {
+                    username,
+                    login_start_request: login_start_request.message,
+                };
+                self.call_backend(
+                    HostService::login_start,
+                    req,
+                    Msg::AuthenticationStartResponse,
+                )?;
+                Ok(())
+            }
+            Msg::AuthenticationStartResponse(Ok(res)) => {
+                debug_assert!(self.login_start.is_some());
+                let login_finish = match opaque::client::login::finish_login(
+                    self.login_start.as_ref().unwrap().clone(),
+                    res.credential_response,
+                ) {
+                    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));
+                        self.error = Some(anyhow!("Invalid username or password"));
+                        return Ok(());
+                    }
+                    Ok(l) => l,
+                };
+                let req = login::ClientLoginFinishRequest {
+                    server_data: res.server_data,
+                    credential_finalization: login_finish.message,
+                };
+                self.call_backend(
+                    HostService::login_finish,
+                    req,
+                    Msg::AuthenticationFinishResponse,
+                )?;
+                Ok(())
+            }
+            Msg::AuthenticationStartResponse(Err(e)) => Err(anyhow!(
+                "Could not log in (invalid response to login start): {}",
+                e
+            )),
+            Msg::AuthenticationFinishResponse(Ok(user_info)) => {
+                self.on_logged_in.emit(user_info);
+                Ok(())
+            }
+            Msg::AuthenticationFinishResponse(Err(e)) => Err(anyhow!("Could not log in: {}", e)),
+        }
+    }
+}
+
+impl Component for LoginForm {
+    type Message = Msg;
+    type Properties = Props;
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        LoginForm {
+            link,
+            on_logged_in: props.on_logged_in,
+            error: None,
+            node_ref: NodeRef::default(),
+            login_start: None,
+            _task: None,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        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="username">{"User name:"}</label>
+                    <input type="text" id="username" required=true />
+                </div>
+                <div>
+                    <label for="password">{"Password:"}</label>
+                    <input type="password" id="password" required=true autocomplete="current-password" />
+                </div>
+                <button type="submit">{"Login"}</button>
+                <div>
+                { if let Some(e) = &self.error {
+                    html! { e.to_string() }
+                  } else { html! {} }
+                }
+                </div>
+            </form>
+        }
+    }
+}

app/src/components/logout.rs

@@ -0,0 +1,71 @@
+use crate::infra::{api::HostService, cookies::delete_cookie};
+use anyhow::Result;
+use yew::prelude::*;
+use yew::services::{fetch::FetchTask, ConsoleService};
+
+pub struct LogoutButton {
+    link: ComponentLink<Self>,
+    on_logged_out: Callback<()>,
+    // Used to keep the request alive long enough.
+    _task: Option<FetchTask>,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct Props {
+    pub on_logged_out: Callback<()>,
+}
+
+pub enum Msg {
+    LogoutRequested,
+    LogoutCompleted(Result<()>),
+}
+
+impl Component for LogoutButton {
+    type Message = Msg;
+    type Properties = Props;
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        LogoutButton {
+            link,
+            on_logged_out: props.on_logged_out,
+            _task: None,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::LogoutRequested => {
+                match HostService::logout(self.link.callback(Msg::LogoutCompleted)) {
+                    Ok(task) => self._task = Some(task),
+                    Err(e) => ConsoleService::error(&e.to_string()),
+                };
+                false
+            }
+            Msg::LogoutCompleted(res) => {
+                if let Err(e) = res {
+                    ConsoleService::error(&e.to_string());
+                }
+                match delete_cookie("user_id") {
+                    Err(e) => {
+                        ConsoleService::error(&e.to_string());
+                        false
+                    }
+                    Ok(()) => {
+                        self.on_logged_out.emit(());
+                        true
+                    }
+                }
+            }
+        }
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <button onclick=self.link.callback(|_| { Msg::LogoutRequested })>{"Logout"}</button>
+        }
+    }
+}

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

@@ -0,0 +1,264 @@
+use crate::{
+    components::router::{AppRoute, NavButton},
+    infra::api::HostService,
+};
+use anyhow::{anyhow, Result};
+use graphql_client::GraphQLQuery;
+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::infra::graphql"
+)]
+pub struct GetUserDetails;
+
+type User = get_user_details::GetUserDetailsUser;
+
+#[derive(GraphQLQuery)]
+#[graphql(
+    schema_path = "../schema.graphql",
+    query_path = "queries/update_user.graphql",
+    response_derives = "Debug",
+    variables_derives = "Clone",
+    custom_scalars_module = "crate::infra::graphql"
+)]
+pub struct UpdateUser;
+
+pub struct UserDetails {
+    link: ComponentLink<Self>,
+    username: String,
+    user: Option<User>,
+    // Needed for the form.
+    node_ref: NodeRef,
+    // Error message displayed to the user.
+    error: Option<anyhow::Error>,
+    // The request, while we're waiting for the server to reply.
+    update_request: Option<update_user::UpdateUserInput>,
+    // True iff we just finished updating the user, to display a successful message.
+    update_successful: bool,
+    // Used to keep the request alive long enough.
+    _task: Option<FetchTask>,
+}
+
+pub enum Msg {
+    UserDetailsResponse(Result<get_user_details::ResponseData>),
+    SubmitForm,
+    UpdateFinished(Result<update_user::ResponseData>),
+}
+
+#[derive(yew::Properties, Clone, PartialEq)]
+pub struct Props {
+    pub username: String,
+}
+
+#[allow(clippy::ptr_arg)]
+fn not_empty(s: &String) -> bool {
+    !s.is_empty()
+}
+
+impl UserDetails {
+    fn get_user_details(&mut self) {
+        self._task = HostService::graphql_query::<GetUserDetails>(
+            get_user_details::Variables {
+                id: self.username.clone(),
+            },
+            self.link.callback(Msg::UserDetailsResponse),
+            "Error trying to fetch user details",
+        )
+        .map_err(|e| {
+            ConsoleService::log(&e.to_string());
+            e
+        })
+        .ok();
+    }
+    fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
+        self.update_successful = false;
+        match msg {
+            Msg::UserDetailsResponse(Ok(user)) => {
+                self.user = Some(user.user);
+            }
+            Msg::UserDetailsResponse(Err(e)) => {
+                self.error = Some(anyhow!("Error getting user details: {}", e));
+                self.user = None;
+            }
+            Msg::SubmitForm => {
+                let base_user = self.user.as_ref().unwrap();
+                let mut user_input = update_user::UpdateUserInput {
+                    id: self.username.clone(),
+                    email: None,
+                    displayName: None,
+                    firstName: None,
+                    lastName: None,
+                };
+                let mut should_send_form = false;
+                let email = get_element("email")
+                    .filter(not_empty)
+                    .ok_or_else(|| anyhow!("Missing email"))?;
+                if base_user.email != email {
+                    should_send_form = true;
+                    user_input.email = Some(email);
+                }
+                if base_user.display_name != get_element_or_empty("display_name") {
+                    should_send_form = true;
+                    user_input.displayName = Some(get_element_or_empty("display_name"));
+                }
+                if base_user.first_name != get_element_or_empty("first_name") {
+                    should_send_form = true;
+                    user_input.firstName = Some(get_element_or_empty("first_name"));
+                }
+                if base_user.last_name != get_element_or_empty("last_name") {
+                    should_send_form = true;
+                    user_input.lastName = Some(get_element_or_empty("last_name"));
+                }
+                if !should_send_form {
+                    return Ok(false);
+                }
+                self.update_request = Some(user_input.clone());
+                let req = update_user::Variables { user: user_input };
+                self._task = Some(HostService::graphql_query::<UpdateUser>(
+                    req,
+                    self.link.callback(Msg::UpdateFinished),
+                    "Error trying to update user",
+                )?);
+                return Ok(false);
+            }
+            Msg::UpdateFinished(r) => {
+                match r {
+                    Err(e) => return Err(e),
+                    Ok(_) => {
+                        ConsoleService::log("Successfully updated user");
+                        self.update_successful = true;
+                        let user = self.user.as_ref().unwrap();
+                        let new_user = self.update_request.take().unwrap();
+                        self.user = Some(User {
+                            id: user.id.clone(),
+                            email: new_user.email.unwrap_or_else(|| user.email.clone()),
+                            display_name: new_user
+                                .displayName
+                                .unwrap_or_else(|| user.display_name.clone()),
+                            first_name: new_user
+                                .firstName
+                                .unwrap_or_else(|| user.first_name.clone()),
+                            last_name: new_user.lastName.unwrap_or_else(|| user.last_name.clone()),
+                            creation_date: user.creation_date,
+                        });
+                    }
+                };
+            }
+        }
+        Ok(true)
+    }
+}
+
+fn get_element(name: &str) -> Option<String> {
+    use wasm_bindgen::JsCast;
+    Some(
+        web_sys::window()?
+            .document()?
+            .get_element_by_id(name)?
+            .dyn_into::<web_sys::HtmlInputElement>()
+            .ok()?
+            .value(),
+    )
+}
+
+fn get_element_or_empty(name: &str) -> String {
+    get_element(name).unwrap_or_default()
+}
+
+impl Component for UserDetails {
+    type Message = Msg;
+    // The username.
+    type Properties = Props;
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let mut table = UserDetails {
+            link,
+            username: props.username,
+            node_ref: NodeRef::default(),
+            _task: None,
+            user: None,
+            error: None,
+            update_request: None,
+            update_successful: false,
+        };
+        table.get_user_details();
+        table
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        self.error = None;
+        match self.handle_msg(msg) {
+            Err(e) => {
+                ConsoleService::error(&e.to_string());
+                self.error = Some(e);
+                true
+            }
+            Ok(b) => b,
+        }
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        match (&self.user, &self.error) {
+            (None, None) => html! {{"Loading..."}},
+            (None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
+            (Some(u), error) => {
+                html! {
+                    <form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::SubmitForm })>
+                      <div>
+                        <span>{"User ID: "}</span>
+                          <span>{&u.id}</span>
+                      </div>
+                      <div>
+                        <label for="email">{"Email: "}</label>
+                        <input type="text" id="email" value={u.email.clone()} />
+                      </div>
+                      <div>
+                        <label for="display_name">{"Display name: "}</label>
+                        <input type="text" id="display_name" value={u.display_name.clone()} />
+                      </div>
+                      <div>
+                        <label for="first_name">{"First name: "}</label>
+                        <input type="text" id="first_name" value={u.first_name.clone()} />
+                      </div>
+                      <div>
+                        <label for="last_name">{"Last name: "}</label>
+                        <input type="text" id="last_name" value={u.last_name.clone()} />
+                      </div>
+                      <div>
+                        <span>{"Creation date: "}</span>
+                        <span>{&u.creation_date.with_timezone(&chrono::Local)}</span>
+                      </div>
+                      <div>
+                        <button type="submit">{"Update"}</button>
+                      </div>
+                      { if self.update_successful {
+                        html! {
+                          <span>{"Update successful!"}</span>
+                        }
+                      } else if let Some(e) = error {
+                        html! {
+                          <div>
+                            <span>{"Error: "}{e.to_string()}</span>
+                          </div>
+                        }
+                      } else { html! {} }}
+                      <div>
+                        <NavButton route=AppRoute::ChangePassword(self.username.clone())>{"Change password"}</NavButton>
+                      </div>
+                    </form>
+                }
+            }
+        }
+    }
+}

app/src/components/user_table.rs

@@ -0,0 +1,113 @@
+use crate::infra::api::HostService;
+use anyhow::{anyhow, Result};
+use graphql_client::GraphQLQuery;
+use yew::format::Json;
+use yew::prelude::*;
+use yew::services::{fetch::FetchTask, ConsoleService};
+
+#[derive(GraphQLQuery)]
+#[graphql(
+    schema_path = "../schema.graphql",
+    query_path = "queries/list_users.graphql",
+    response_derives = "Debug",
+    custom_scalars_module = "crate::infra::graphql"
+)]
+pub struct ListUsersQuery;
+
+use list_users_query::{RequestFilter, ResponseData};
+
+type User = list_users_query::ListUsersQueryUsers;
+
+pub struct UserTable {
+    link: ComponentLink<Self>,
+    users: Option<Result<Vec<User>>>,
+    // Used to keep the request alive long enough.
+    _task: Option<FetchTask>,
+}
+
+pub enum Msg {
+    ListUsersResponse(Result<ResponseData>),
+}
+
+impl UserTable {
+    fn get_users(&mut self, req: Option<RequestFilter>) {
+        self._task = HostService::graphql_query::<ListUsersQuery>(
+            list_users_query::Variables { filters: req },
+            self.link.callback(Msg::ListUsersResponse),
+            "Error trying to fetch users",
+        )
+        .map_err(|e| {
+            ConsoleService::log(&e.to_string());
+            e
+        })
+        .ok();
+    }
+}
+
+impl Component for UserTable {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let mut table = UserTable {
+            link,
+            _task: None,
+            users: None,
+        };
+        table.get_users(None);
+        table
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::ListUsersResponse(Ok(users)) => {
+                self.users = Some(Ok(users.users.into_iter().collect()));
+                ConsoleService::log(format!("Response: {:?}", Json(&self.users)).as_str());
+                true
+            }
+            Msg::ListUsersResponse(Err(e)) => {
+                self.users = Some(Err(anyhow!("Error listing users: {}", e)));
+                true
+            }
+        }
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        let make_user_row = |user: &User| {
+            html! {
+                <tr>
+                    <td>{&user.id}</td>
+                    <td>{&user.email}</td>
+                    <td>{&user.display_name}</td>
+                    <td>{&user.first_name}</td>
+                    <td>{&user.last_name}</td>
+                    <td>{&user.creation_date.with_timezone(&chrono::Local)}</td>
+                </tr>
+            }
+        };
+        let make_table = |users: &Vec<User>| {
+            html! {
+                <table>
+                  <tr>
+                    <th>{"User ID"}</th>
+                    <th>{"Email"}</th>
+                    <th>{"Display name"}</th>
+                    <th>{"First name"}</th>
+                    <th>{"Last name"}</th>
+                    <th>{"Creation date"}</th>
+                  </tr>
+                  {users.iter().map(make_user_row).collect::<Vec<_>>()}
+                </table>
+            }
+        };
+        match &self.users {
+            None => html! {{"Loading..."}},
+            Some(Err(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
+            Some(Ok(users)) => make_table(users),
+        }
+    }
+}