app: Migrate change password to yew_form

Also disable submit while the password is being sent.
This commit is contained in:
Valentin Tolmer 2021-10-12 05:02:20 +02:00 committed by nitnelave
parent 88019a42c9
commit ead501158d
3 changed files with 162 additions and 100 deletions

View File

@ -4,11 +4,17 @@ use crate::{
}; };
use anyhow::{anyhow, bail, Context, Result}; use anyhow::{anyhow, bail, Context, Result};
use lldap_auth::*; use lldap_auth::*;
use wasm_bindgen::JsCast; use validator_derive::Validate;
use yew::{ use yew::{
prelude::*, prelude::*,
services::{fetch::FetchTask, ConsoleService}, services::{fetch::FetchTask, ConsoleService},
}; };
use yew_form::Form;
use yew_form_derive::Model;
use yew_router::{
agent::{RouteAgentDispatcher, RouteRequest},
route::Route,
};
#[derive(PartialEq, Eq)] #[derive(PartialEq, Eq)]
enum OpaqueData { enum OpaqueData {
@ -29,16 +35,37 @@ impl OpaqueData {
} }
} }
/// The fields of the form, with the constraints.
#[derive(Model, Validate, PartialEq, Clone, Default)]
pub struct FormModel {
#[validate(custom(
function = "empty_or_long",
message = "Password should be longer than 8 characters"
))]
old_password: String,
#[validate(length(min = 8, message = "Invalid password. Min length: 8"))]
password: String,
#[validate(must_match(other = "password", message = "Passwords must match"))]
confirm_password: String,
}
fn empty_or_long(value: &str) -> Result<(), validator::ValidationError> {
if value.is_empty() || value.len() >= 8 {
Ok(())
} else {
Err(validator::ValidationError::new(""))
}
}
pub struct ChangePasswordForm { pub struct ChangePasswordForm {
link: ComponentLink<Self>, link: ComponentLink<Self>,
username: String, props: Props,
error: Option<anyhow::Error>, error: Option<anyhow::Error>,
node_ref: NodeRef, form: Form<FormModel>,
opaque_data: OpaqueData, opaque_data: OpaqueData,
successfully_changed_password: bool,
is_admin: bool,
// Used to keep the request alive long enough. // Used to keep the request alive long enough.
_task: Option<FetchTask>, task: Option<FetchTask>,
route_dispatcher: RouteAgentDispatcher,
} }
#[derive(Clone, PartialEq, Properties)] #[derive(Clone, PartialEq, Properties)]
@ -48,6 +75,7 @@ pub struct Props {
} }
pub enum Msg { pub enum Msg {
FormUpdate,
Submit, Submit,
AuthenticationStartResponse(Result<Box<login::ServerLoginStartResponse>>), AuthenticationStartResponse(Result<Box<login::ServerLoginStartResponse>>),
SubmitNewPassword, SubmitNewPassword,
@ -55,71 +83,37 @@ pub enum Msg {
RegistrationFinishResponse(Result<()>), 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 { 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<()> fn call_backend<M, Req, C, Resp>(&mut self, method: M, req: Req, callback: C) -> Result<()>
where where
M: Fn(Req, Callback<Resp>) -> Result<FetchTask>, M: Fn(Req, Callback<Resp>) -> Result<FetchTask>,
C: Fn(Resp) -> <Self as Component>::Message + 'static, C: Fn(Resp) -> <Self as Component>::Message + 'static,
{ {
self._task = Some(method(req, self.link.callback(callback))?); self.task = Some(method(req, self.link.callback(callback))?);
Ok(()) Ok(())
} }
fn handle_message(&mut self, msg: <Self as Component>::Message) -> Result<()> { fn handle_message(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
match msg { match msg {
Msg::FormUpdate => Ok(true),
Msg::Submit => { Msg::Submit => {
let old_password = get_form_field("oldPassword") if !self.form.validate() {
.ok_or_else(|| anyhow!("Could not get old password from form"))?; bail!("Check the form for errors");
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");
} }
if self.is_admin { if self.props.is_admin {
self.handle_message(Msg::SubmitNewPassword) self.handle_message(Msg::SubmitNewPassword)
} else { } else {
let old_password = self.form.model().old_password;
if old_password.is_empty() {
bail!("Current password should not be empty");
}
let mut rng = rand::rngs::OsRng; let mut rng = rand::rngs::OsRng;
let login_start_request = let login_start_request =
opaque::client::login::start_login(&old_password, &mut rng) opaque::client::login::start_login(&old_password, &mut rng)
.context("Could not initialize login")?; .context("Could not initialize login")?;
self.opaque_data = OpaqueData::Login(login_start_request.state); self.opaque_data = OpaqueData::Login(login_start_request.state);
let req = login::ClientLoginStartRequest { let req = login::ClientLoginStartRequest {
username: self.username.clone(), username: self.props.username.clone(),
login_start_request: login_start_request.message, login_start_request: login_start_request.message,
}; };
self.call_backend( self.call_backend(
@ -127,7 +121,7 @@ impl ChangePasswordForm {
req, req,
Msg::AuthenticationStartResponse, Msg::AuthenticationStartResponse,
)?; )?;
Ok(()) Ok(true)
} }
} }
Msg::AuthenticationStartResponse(res) => { Msg::AuthenticationStartResponse(res) => {
@ -152,13 +146,12 @@ impl ChangePasswordForm {
} }
Msg::SubmitNewPassword => { Msg::SubmitNewPassword => {
let mut rng = rand::rngs::OsRng; let mut rng = rand::rngs::OsRng;
let new_password = get_form_field("newPassword") let new_password = self.form.model().password;
.ok_or_else(|| anyhow!("Could not get new password from form"))?;
let registration_start_request = let registration_start_request =
opaque::client::registration::start_registration(&new_password, &mut rng) opaque::client::registration::start_registration(&new_password, &mut rng)
.context("Could not initiate password change")?; .context("Could not initiate password change")?;
let req = registration::ClientRegistrationStartRequest { let req = registration::ClientRegistrationStartRequest {
username: self.username.clone(), username: self.props.username.clone(),
registration_start_request: registration_start_request.message, registration_start_request: registration_start_request.message,
}; };
self.opaque_data = OpaqueData::Registration(registration_start_request.state); self.opaque_data = OpaqueData::Registration(registration_start_request.state);
@ -167,7 +160,7 @@ impl ChangePasswordForm {
req, req,
Msg::RegistrationStartResponse, Msg::RegistrationStartResponse,
)?; )?;
Ok(()) Ok(true)
} }
Msg::RegistrationStartResponse(res) => { Msg::RegistrationStartResponse(res) => {
let res = res.context("Could not initiate password change")?; let res = res.context("Could not initiate password change")?;
@ -192,14 +185,19 @@ impl ChangePasswordForm {
) )
} }
_ => panic!("Unexpected data in opaque_data field"), _ => panic!("Unexpected data in opaque_data field"),
} }?;
Ok(false)
} }
Msg::RegistrationFinishResponse(response) => { Msg::RegistrationFinishResponse(response) => {
self.task = None;
if response.is_ok() { if response.is_ok() {
self.successfully_changed_password = true; self.route_dispatcher
clear_form_fields(); .send(RouteRequest::ChangeRoute(Route::from(
AppRoute::UserDetails(self.props.username.clone()),
)));
} }
response response?;
Ok(true)
} }
} }
} }
@ -212,23 +210,26 @@ impl Component for ChangePasswordForm {
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self { fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
ChangePasswordForm { ChangePasswordForm {
link, link,
username: props.username, props,
error: None, error: None,
node_ref: NodeRef::default(), form: yew_form::Form::<FormModel>::new(FormModel::default()),
opaque_data: OpaqueData::None, opaque_data: OpaqueData::None,
successfully_changed_password: false, task: None,
is_admin: props.is_admin, route_dispatcher: RouteAgentDispatcher::new(),
_task: None,
} }
} }
fn update(&mut self, msg: Self::Message) -> ShouldRender { fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.successfully_changed_password = false;
self.error = None; self.error = None;
if let Err(e) = self.handle_message(msg) { match self.handle_message(msg) {
self.set_error(e); Err(e) => {
ConsoleService::error(&e.to_string());
self.error = Some(e);
self.task = None;
true
}
Ok(b) => b,
} }
true
} }
fn change(&mut self, _: Self::Properties) -> ShouldRender { fn change(&mut self, _: Self::Properties) -> ShouldRender {
@ -236,38 +237,97 @@ impl Component for ChangePasswordForm {
} }
fn view(&self) -> Html { fn view(&self) -> Html {
let is_admin = self.is_admin; let is_admin = self.props.is_admin;
type Field = yew_form::Field<FormModel>;
html! { html! {
<form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::Submit })> <>
<div> <form
<label for="oldPassword">{"Old password:"}</label> class="form">
<input type="password" id="oldPassword" autocomplete="current-password" required=true disabled=is_admin /> {if !is_admin { html! {
<div class="form-group row">
<label for="old_password"
class="form-label col-sm-2 col-form-label">
{"Current password*:"}
</label>
<div class="col-sm-10">
<Field
form=&self.form
field_name="old_password"
class="form-control"
class_invalid="is-invalid has-error"
class_valid="has-success"
autocomplete="current-password"
oninput=self.link.callback(|_| Msg::FormUpdate) />
<div class="invalid-feedback">
{&self.form.field_message("old_password")}
</div>
</div>
</div> </div>
<div> }} else { html! {} }}
<label for="newPassword">{"New password:"}</label> <div class="form-group row">
<input type="password" id="newPassword" autocomplete="new-password" required=true minlength="8" /> <label for="new_password"
class="form-label col-sm-2 col-form-label">
{"New password*:"}
</label>
<div class="col-sm-10">
<Field
form=&self.form
field_name="password"
class="form-control"
class_invalid="is-invalid has-error"
class_valid="has-success"
autocomplete="new-password"
oninput=self.link.callback(|_| Msg::FormUpdate) />
<div class="invalid-feedback">
{&self.form.field_message("password")}
</div>
</div> </div>
<div> </div>
<label for="confirmPassword">{"Confirm new password:"}</label> <div class="form-group row">
<input type="password" id="confirmPassword" autocomplete="new-password" required=true minlength="8" /> <label for="confirm_password"
</div> class="form-label col-sm-2 col-form-label">
<button type="submit">{"Submit"}</button> {"Confirm password*:"}
<div> </label>
{ if let Some(e) = &self.error { <div class="col-sm-10">
html! { e.to_string() } <Field
} else if self.successfully_changed_password { form=&self.form
html! { field_name="confirm_password"
<div> class="form-control"
<span>{"Successfully changed the password"}</span> class_invalid="is-invalid has-error"
</div> class_valid="has-success"
} autocomplete="new-password"
} else { html! {} } oninput=self.link.callback(|_| Msg::FormUpdate) />
} <div class="invalid-feedback">
</div> {&self.form.field_message("confirm_password")}
<div> </div>
<NavButton route=AppRoute::UserDetails(self.username.clone())>{"Back"}</NavButton>
</div> </div>
</div>
<div class="form-group row">
<button
class="btn btn-primary col-sm-1 col-form-label"
type="submit"
disabled=self.task.is_some()
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
{"Submit"}
</button>
</div>
</form> </form>
{ if let Some(e) = &self.error {
html! {
<div class="alert alert-danger">
{e.to_string() }
</div>
}
} else { html! {} }
}
<div>
<NavButton
classes="btn btn-primary"
route=AppRoute::UserDetails(self.props.username.clone())>
{"Back"}
</NavButton>
</div>
</>
} }
} }
} }

View File

@ -340,7 +340,7 @@ impl Component for CreateUserForm {
<div class="form-group row"> <div class="form-group row">
<button <button
class="btn btn-primary col-sm-1 col-form-label" class="btn btn-primary col-sm-1 col-form-label"
type="button" type="submit"
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})> onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
{"Submit"} {"Submit"}
</button> </button>

View File

@ -2,8 +2,10 @@ use crate::infra::api::HostService;
use anyhow::{anyhow, bail, Context, Result}; use anyhow::{anyhow, bail, Context, Result};
use lldap_auth::*; use lldap_auth::*;
use validator_derive::Validate; use validator_derive::Validate;
use yew::prelude::*; use yew::{
use yew::services::{fetch::FetchTask, ConsoleService}; prelude::*,
services::{fetch::FetchTask, ConsoleService},
};
use yew_form::Form; use yew_form::Form;
use yew_form_derive::Model; use yew_form_derive::Model;
@ -48,7 +50,7 @@ impl LoginForm {
Msg::Update => Ok(true), Msg::Update => Ok(true),
Msg::Submit => { Msg::Submit => {
if !self.form.validate() { if !self.form.validate() {
bail!("Invalid inputs"); bail!("Check the form for errors");
} }
let FormModel { username, password } = self.form.model(); let FormModel { username, password } = self.form.model();
let mut rng = rand::rngs::OsRng; let mut rng = rand::rngs::OsRng;