mirror of
https://github.com/nitnelave/lldap.git
synced 2023-04-12 14:25:13 +00:00
app: Migrate change password to yew_form
Also disable submit while the password is being sent.
This commit is contained in:
parent
88019a42c9
commit
ead501158d
@ -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,62 +210,124 @@ 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
|
true
|
||||||
}
|
}
|
||||||
|
Ok(b) => b,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
fn change(&mut self, _: Self::Properties) -> ShouldRender {
|
fn change(&mut self, _: Self::Properties) -> ShouldRender {
|
||||||
false
|
false
|
||||||
}
|
}
|
||||||
|
|
||||||
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>
|
|
||||||
<label for="newPassword">{"New password:"}</label>
|
|
||||||
<input type="password" id="newPassword" autocomplete="new-password" required=true minlength="8" />
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<label for="confirmPassword">{"Confirm new password:"}</label>
|
|
||||||
<input type="password" id="confirmPassword" autocomplete="new-password" required=true minlength="8" />
|
|
||||||
</div>
|
</div>
|
||||||
<button type="submit">{"Submit"}</button>
|
}} else { html! {} }}
|
||||||
<div>
|
<div class="form-group row">
|
||||||
|
<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 class="form-group row">
|
||||||
|
<label for="confirm_password"
|
||||||
|
class="form-label col-sm-2 col-form-label">
|
||||||
|
{"Confirm password*:"}
|
||||||
|
</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<Field
|
||||||
|
form=&self.form
|
||||||
|
field_name="confirm_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("confirm_password")}
|
||||||
|
</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>
|
||||||
{ if let Some(e) = &self.error {
|
{ if let Some(e) = &self.error {
|
||||||
html! { e.to_string() }
|
|
||||||
} else if self.successfully_changed_password {
|
|
||||||
html! {
|
html! {
|
||||||
<div>
|
<div class="alert alert-danger">
|
||||||
<span>{"Successfully changed the password"}</span>
|
{e.to_string() }
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
} else { html! {} }
|
} else { html! {} }
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<NavButton route=AppRoute::UserDetails(self.username.clone())>{"Back"}</NavButton>
|
<NavButton
|
||||||
|
classes="btn btn-primary"
|
||||||
|
route=AppRoute::UserDetails(self.props.username.clone())>
|
||||||
|
{"Back"}
|
||||||
|
</NavButton>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user