gandc/lldap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

app: Extract the form component from the user details page

Browse Source
This commit is contained in:
Valentin Tolmer
2021-09-19 13:44:58 +02:00
committed by nitnelave
parent 5943df6443
commit 14be1170f2
6 changed files with 320 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/mod.rs
View File

@@ -7,4 +7,5 @@ pub mod logout;
pub mod router;
pub mod select;
pub mod user_details;
pub mod user_details_form;
pub mod user_table;

157
app/src/components/user_details.rs
View File

@@ -2,10 +2,11 @@ use crate::{
components::{
add_user_to_group::AddUserToGroupComponent,
router::{AppRoute, NavButton},
user_details_form::UserDetailsForm,
},
infra::api::HostService,
};
use anyhow::{anyhow, bail, Error, Result};
use anyhow::{bail, Error, Result};
use graphql_client::GraphQLQuery;
use yew::{
prelude::*,
@@ -24,16 +25,6 @@ pub struct GetUserDetails;
pub type User = get_user_details::GetUserDetailsUser;
pub type Group = get_user_details::GetUserDetailsUserGroups;
#[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;
#[derive(GraphQLQuery)]
#[graphql(
schema_path = "../schema.graphql",
@@ -51,12 +42,8 @@ pub struct UserDetails {
/// The user info. If none, the error is in `error`. If `error` is None, then we haven't
/// received the server response yet.
user: Option<User>,
// Needed for the form.
node_ref: NodeRef,
/// Error message displayed to the user.
error: Option<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,
is_admin: bool,
@@ -71,10 +58,6 @@ pub struct UserDetails {
pub enum Msg {
/// Received the user details response, either the user data or an error.
UserDetailsResponse(Result<get_user_details::ResponseData>),
/// The user changed some fields and submitted the form for update.
SubmitUserUpdateForm,
/// Response after updating the user's details.
UpdateFinished(Result<update_user::ResponseData>),
SubmitRemoveGroup(Group),
RemoveGroupResponse(Result<remove_user_from_group::ResponseData>),
OnError(Error),
@@ -87,11 +70,6 @@ pub struct Props {
pub is_admin: bool,
}
#[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>(
@@ -108,78 +86,6 @@ impl UserDetails {
.ok();
}
fn submit_user_update_form(&mut self) -> Result<bool> {
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",
)?);
Ok(false)
}
fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> {
match r {
Err(e) => return Err(e),
Ok(_) => {
ConsoleService::log("Successfully updated user");
self.update_successful = true;
let User {
id,
display_name,
first_name,
last_name,
email,
creation_date,
groups,
} = self.user.take().unwrap();
let new_user = self.update_request.take().unwrap();
self.user = Some(User {
id,
email: new_user.email.unwrap_or(email),
display_name: new_user.displayName.unwrap_or(display_name),
first_name: new_user.firstName.unwrap_or(first_name),
last_name: new_user.lastName.unwrap_or(last_name),
creation_date,
groups,
});
}
};
Ok(true)
}
fn submit_remove_group(&mut self, group: Group) -> Result<bool> {
self._task = HostService::graphql_query::<RemoveUserFromGroup>(
remove_user_from_group::Variables {
@@ -208,8 +114,6 @@ impl UserDetails {
bail!("Error getting user details: {}", e);
}
},
Msg::SubmitUserUpdateForm => return self.submit_user_update_form(),
Msg::UpdateFinished(r) => return self.user_update_finished(r),
Msg::SubmitRemoveGroup(group) => return self.submit_remove_group(group),
Msg::RemoveGroupResponse(response) => {
response?;
@@ -225,39 +129,6 @@ impl UserDetails {
Ok(true)
}
fn view_form(&self, u: &User) -> Html {
html! {
<form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::SubmitUserUpdateForm })>
<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>
</form>
}
}
fn view_messages(&self, error: &Option<Error>) -> Html {
if self.update_successful {
html! {
@@ -319,22 +190,6 @@ impl UserDetails {
}
}
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;
type Properties = Props;
@@ -343,11 +198,9 @@ impl Component for UserDetails {
let mut table = Self {
link,
username: props.username,
node_ref: NodeRef::default(),
_task: None,
user: None,
error: None,
update_request: None,
update_successful: false,
is_admin: props.is_admin,
group_to_remove: None,
@@ -379,11 +232,13 @@ impl Component for UserDetails {
(Some(u), error) => {
html! {
<div>
{self.view_form(u)}
<UserDetailsForm
user=u.clone()
on_error=self.link.callback(Msg::OnError)/>
{self.view_messages(error)}
{self.view_group_memberships(u)}
<div>
<NavButton route=AppRoute::ChangePassword(self.username.clone())>{"Change password"}</NavButton>
<NavButton route=AppRoute::ChangePassword(u.id.clone())>{"Change password"}</NavButton>
</div>
</div>
}

218
app/src/components/user_details_form.rs Normal file
View File

@@ -0,0 +1,218 @@
use crate::{components::user_details::User, infra::api::HostService};
use anyhow::{Error, Result};
use graphql_client::GraphQLQuery;
use validator_derive::Validate;
use yew::{
prelude::*,
services::{fetch::FetchTask, ConsoleService},
};
use yew_form_derive::Model;
lazy_static::lazy_static! {
static ref EMAIL_RE: regex::Regex = regex::Regex::new("^[^@]+@[^@]+\\.[^@]+$").unwrap();
}
/// The fields of the form, with the editable details and the constraints.
#[derive(Model, Validate, PartialEq, Clone)]
pub struct UserModel {
#[validate(regex(path = "EMAIL_RE", message = "Enter a valid email"))]
email: String,
#[validate(length(min = 1, message = "Display name is required"))]
display_name: String,
first_name: String,
last_name: String,
}
/// The GraphQL query sent to the server to update the user details.
#[derive(GraphQLQuery)]
#[graphql(
schema_path = "../schema.graphql",
query_path = "queries/update_user.graphql",
response_derives = "Debug",
variables_derives = "Clone,PartialEq",
custom_scalars_module = "crate::infra::graphql"
)]
pub struct UpdateUser;
/// A [yew::Component] to display the user details, with a form allowing to edit them.
pub struct UserDetailsForm {
link: ComponentLink<Self>,
props: Props,
form: yew_form::Form<UserModel>,
/// True if we just successfully updated the user, to display a success message.
just_updated: bool,
_task: Option<FetchTask>,
}
pub enum Msg {
/// A form field changed.
Update,
/// The "Submit" button was clicked.
SubmitClicked,
/// We got the response from the server about our update message.
UserUpdated(Result<update_user::ResponseData>),
}
#[derive(yew::Properties, Clone, PartialEq)]
pub struct Props {
/// The current user details.
pub user: User,
/// Callback to report errors (e.g. server error).
pub on_error: Callback<Error>,
}
impl Component for UserDetailsForm {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
let model = UserModel {
email: props.user.email.clone(),
display_name: props.user.display_name.clone(),
first_name: props.user.first_name.clone(),
last_name: props.user.last_name.clone(),
};
Self {
link,
form: yew_form::Form::new(model),
props,
just_updated: false,
_task: None,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.just_updated = false;
match self.handle_msg(msg) {
Err(e) => {
ConsoleService::error(&e.to_string());
self.props.on_error.emit(e);
true
}
Ok(b) => b,
}
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
type Field = yew_form::Field<UserModel>;
html! {
<>
<form>
<div class="form-group">
<span>{"User ID: "}</span>
<span>{&self.props.user.id}</span>
</div>
<div class="form-group">
<label for="email">{"Email: "}</label>
<Field form=&self.form field_name="email" oninput=self.link.callback(|_| Msg::Update) />
<div class="invalid-feedback">
{&self.form.field_message("email")}
</div>
</div>
<div class="form-group">
<label for="display_name">{"Display Name: "}</label>
<Field form=&self.form field_name="display_name" oninput=self.link.callback(|_| Msg::Update) />
<div class="invalid-feedback">
{&self.form.field_message("display_name")}
</div>
</div>
<div class="form-group">
<label for="first_name">{"First Name: "}</label>
<Field form=&self.form field_name="first_name" oninput=self.link.callback(|_| Msg::Update) />
<div class="invalid-feedback">
{&self.form.field_message("first_name")}
</div>
</div>
<div class="form-group">
<label for="last_name">{"Last Name: "}</label>
<Field form=&self.form field_name="last_name" oninput=self.link.callback(|_| Msg::Update) />
<div class="invalid-feedback">
{&self.form.field_message("last_name")}
</div>
</div>
<div class="form-group">
<span>{"Creation date: "}</span>
<span>{&self.props.user.creation_date.with_timezone(&chrono::Local)}</span>
</div>
<div class="form-group">
<button type="button" onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>{"Update"}</button>
</div>
</form>
<div hidden=!self.just_updated>
<span>{"User successfully updated!"}</span>
</div>
</>
}
}
}
impl UserDetailsForm {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::Update => Ok(true),
Msg::SubmitClicked => self.submit_user_update_form(),
Msg::UserUpdated(response) => self.user_update_finished(response),
}
}
fn submit_user_update_form(&mut self) -> Result<bool> {
let base_user = &self.props.user;
let mut user_input = update_user::UpdateUserInput {
id: self.props.user.id.clone(),
email: None,
displayName: None,
firstName: None,
lastName: None,
};
let default_user_input = user_input.clone();
let model = self.form.model();
let email = model.email;
if base_user.email != email {
user_input.email = Some(email);
}
if base_user.display_name != model.display_name {
user_input.displayName = Some(model.display_name);
}
if base_user.first_name != model.first_name {
user_input.firstName = Some(model.first_name);
}
if base_user.last_name != model.last_name {
user_input.lastName = Some(model.last_name);
}
// Nothing changed.
if user_input == default_user_input {
return Ok(false);
}
let req = update_user::Variables { user: user_input };
self._task = Some(HostService::graphql_query::<UpdateUser>(
req,
self.link.callback(Msg::UserUpdated),
"Error trying to update user",
)?);
Ok(false)
}
fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> {
match r {
Err(e) => return Err(e),
Ok(_) => {
let model = self.form.model();
self.props.user = User {
id: self.props.user.id.clone(),
email: model.email,
display_name: model.display_name,
first_name: model.first_name,
last_name: model.last_name,
creation_date: self.props.user.creation_date,
groups: self.props.user.groups.clone(),
};
self.just_updated = true;
}
};
Ok(true)
}
}