From ba0dc3358302c07475de8ed2c7f2d3e99bf8de31 Mon Sep 17 00:00:00 2001 From: Lewis Larsen Date: Thu, 3 Nov 2022 14:40:02 +0000 Subject: [PATCH] app: front end improvements Added colour to required asterisks Added padding to the footer Added bootstrap class to select elements Added various icons to buttons Fixed various button layouts Reworded some messages Moved around some form elements Fixes #12 --- app/src/components/add_group_member.rs | 7 +- app/src/components/add_user_to_group.rs | 7 +- app/src/components/app.rs | 43 ++++++++---- app/src/components/change_password.rs | 54 ++++++++------ app/src/components/create_group.rs | 7 +- app/src/components/create_user.rs | 18 +++-- app/src/components/delete_group.rs | 6 +- app/src/components/delete_user.rs | 8 ++- app/src/components/group_details.rs | 4 +- app/src/components/group_table.rs | 2 +- app/src/components/login.rs | 1 + app/src/components/reset_password_step1.rs | 3 +- app/src/components/select.rs | 2 +- app/src/components/user_details.rs | 18 +++-- app/src/components/user_details_form.rs | 82 +++++++++++++--------- app/src/components/user_table.rs | 2 +- app/static/style.css | 2 +- 17 files changed, 168 insertions(+), 98 deletions(-) diff --git a/app/src/components/add_group_member.rs b/app/src/components/add_group_member.rs index 47dc1e3..61b9938 100644 --- a/app/src/components/add_group_member.rs +++ b/app/src/components/add_group_member.rs @@ -169,12 +169,13 @@ impl Component for AddGroupMemberComponent { } -
+
diff --git a/app/src/components/add_user_to_group.rs b/app/src/components/add_user_to_group.rs index 405481b..3d7d3f0 100644 --- a/app/src/components/add_user_to_group.rs +++ b/app/src/components/add_user_to_group.rs @@ -182,12 +182,13 @@ impl Component for AddUserToGroupComponent { } -
+
diff --git a/app/src/components/app.rs b/app/src/components/app.rs index 3c9bca7..7f35c43 100644 --- a/app/src/components/app.rs +++ b/app/src/components/app.rs @@ -98,10 +98,11 @@ impl Component for App { let link = self.link.clone(); let is_admin = self.is_admin(); html! { -
- {self.view_banner()} +
+ {self.view_banner()} +
-
+
render = Router::render(move |s| Self::dispatch_route(s, &link, is_admin)) /> @@ -109,6 +110,7 @@ impl Component for App {
{self.view_footer()}
+
} } } @@ -171,7 +173,10 @@ impl App { AppRoute::Index | AppRoute::ListUsers => html! {
- {"Create a user"} + + + {"Create a user"} +
}, AppRoute::CreateGroup => html! { @@ -180,7 +185,10 @@ impl App { AppRoute::ListGroups => html! {
- {"Create a group"} + + + {"Create a group"} +
}, AppRoute::GroupDetails(group_id) => html! { @@ -203,11 +211,11 @@ impl App { fn view_banner(&self) -> Html { html! { -
+
- -

{"LLDAP"}

+ +

{"LLDAP"}
    @@ -215,15 +223,17 @@ impl App { <>
  • + {"Users"}
  • + {"Groups"}
    • @@ -246,6 +256,15 @@ impl App { + { + if let Some((user_id, _)) = &self.user_info { + html! { + + {user_id} + + } + } else { html!{} } + } {if let Some((user_id, _)) = &self.user_info { html! {
      - {"Profile"} + {"View details"}
      • @@ -274,7 +293,7 @@ impl App { fn view_footer(&self) -> Html { html! { -
      +
      {format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}
      diff --git a/app/src/components/change_password.rs b/app/src/components/change_password.rs index ef22710..91e1673 100644 --- a/app/src/components/change_password.rs +++ b/app/src/components/change_password.rs @@ -220,6 +220,20 @@ impl Component for ChangePasswordForm { type Field = yew_form::Field; html! { <> +
      +
      + {"Change password"} +
      +
      + { + if let Some(e) = &self.common.error { + html! { +
      + {e.to_string() } +
      + } + } else { html! {} } + }
      {if !is_admin { html! { @@ -243,10 +257,12 @@ impl Component for ChangePasswordForm {
}} else { html! {} }} -
+
-
+
-
+
+ + + {"Back"} +
- { if let Some(e) = &self.common.error { - html! { -
- {e.to_string() } -
- } - } else { html! {} } - } -
- - {"Back"} - -
} } diff --git a/app/src/components/create_group.rs b/app/src/components/create_group.rs index 7611d2b..d3e9b45 100644 --- a/app/src/components/create_group.rs +++ b/app/src/components/create_group.rs @@ -100,14 +100,16 @@ impl Component for CreateGroupForm { type Field = yew_form::Field; html! {
-
+
{"Create a group"}
+ {"Submit"}
diff --git a/app/src/components/create_user.rs b/app/src/components/create_user.rs index 4a6911c..b167bef 100644 --- a/app/src/components/create_user.rs +++ b/app/src/components/create_user.rs @@ -194,14 +194,16 @@ impl Component for CreateUserForm { type Field = yew_form::Field; html! {
- +
{"Create a user"}
+ {"Submit"}
- { if let Some(e) = &self.common.error { + { + if let Some(e) = &self.common.error { html! {
{e.to_string() } diff --git a/app/src/components/delete_group.rs b/app/src/components/delete_group.rs index 22d8551..881f55f 100644 --- a/app/src/components/delete_group.rs +++ b/app/src/components/delete_group.rs @@ -154,12 +154,16 @@ impl DeleteGroup { type="button" class="btn btn-secondary" onclick=self.common.callback(|_| Msg::DismissModal)> + {"Cancel"} + class="btn btn-danger"> + + {"Yes, I'm sure"} +
diff --git a/app/src/components/delete_user.rs b/app/src/components/delete_user.rs index 598dcf2..a003917 100644 --- a/app/src/components/delete_user.rs +++ b/app/src/components/delete_user.rs @@ -152,12 +152,16 @@ impl DeleteUser { type="button" class="btn btn-secondary" onclick=self.common.callback(|_| Msg::DismissModal)> - {"Cancel"} + + {"Cancel"} + class="btn btn-danger"> + + {"Yes, I'm sure"} +
diff --git a/app/src/components/group_details.rs b/app/src/components/group_details.rs index c3714e8..ecba623 100644 --- a/app/src/components/group_details.rs +++ b/app/src/components/group_details.rs @@ -133,7 +133,7 @@ impl GroupDetails { <>
{"Members"}
- +
@@ -145,7 +145,7 @@ impl GroupDetails { {if g.users.is_empty() { html! { - + } diff --git a/app/src/components/group_table.rs b/app/src/components/group_table.rs index 0cfdc24..72d9145 100644 --- a/app/src/components/group_table.rs +++ b/app/src/components/group_table.rs @@ -94,7 +94,7 @@ impl GroupTable { let make_table = |groups: &Vec| { html! {
-
{"User Id"}
{"No members"}{"There are no users in this group."}
+
diff --git a/app/src/components/login.rs b/app/src/components/login.rs index 70218a1..0503e95 100644 --- a/app/src/components/login.rs +++ b/app/src/components/login.rs @@ -195,6 +195,7 @@ impl Component for LoginForm { class="btn btn-primary" disabled=self.common.is_task_running() onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})> + {"Login"} + {"Reset password"} { if let Some(e) = &self.common.error { html! { -
+
{e.to_string() }
} diff --git a/app/src/components/select.rs b/app/src/components/select.rs index cdeaaf2..b330608 100644 --- a/app/src/components/select.rs +++ b/app/src/components/select.rs @@ -67,7 +67,7 @@ impl Component for Select { fn view(&self) -> Html { html! { -
{"Group name"}
+
@@ -140,7 +140,7 @@ impl UserDetails { {if u.groups.is_empty() { html! { - + } } else { @@ -197,15 +197,19 @@ impl Component for UserDetails { html! { <>

{u.id.to_string()}

- -
+
- {"Change password"} + classes="btn btn-secondary"> + + {"Modify password"}
+
+
{"User details"}
+
+ {self.view_group_memberships(u)} {self.view_add_group_button(u)} {self.view_messages(error)} diff --git a/app/src/components/user_details_form.rs b/app/src/components/user_details_form.rs index 2db24a1..2f5dbf3 100644 --- a/app/src/components/user_details_form.rs +++ b/app/src/components/user_details_form.rs @@ -186,30 +186,33 @@ impl Component for UserDetailsForm { {"User ID: "}
- {&self.common.user.id} + {&self.common.user.id}
-
- Avatar -
+
- + {&self.common.user.creation_date.date().naive_local()} +
+
+
+ +
+ {&self.common.user.uuid}
-
-
{"Group"}
{"Not member of any group"}{"This user is not a member of any groups."}
+
diff --git a/app/static/style.css b/app/static/style.css index bcad908..f9099c9 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -1,4 +1,4 @@ -header h1 { +header h2 { font-family: 'Bebas Neue', cursive; }
{"User ID"}