mirror of
https://github.com/nitnelave/lldap.git
synced 2023-04-12 14:25:13 +00:00
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
This commit is contained in:
parent
e0c0efcb2f
commit
ba0dc33583
@ -169,12 +169,13 @@ impl Component for AddGroupMemberComponent {
|
|||||||
}
|
}
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-1">
|
<div class="col-3">
|
||||||
<button
|
<button
|
||||||
class="btn btn-success"
|
class="btn btn-secondary"
|
||||||
disabled=self.selected_user.is_none() || self.common.is_task_running()
|
disabled=self.selected_user.is_none() || self.common.is_task_running()
|
||||||
onclick=self.common.callback(|_| Msg::SubmitAddMember)>
|
onclick=self.common.callback(|_| Msg::SubmitAddMember)>
|
||||||
{"Add"}
|
<i class="bi-person-plus me-2"></i>
|
||||||
|
{"Add to group"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -182,12 +182,13 @@ impl Component for AddUserToGroupComponent {
|
|||||||
}
|
}
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-1">
|
<div class="col-sm-3">
|
||||||
<button
|
<button
|
||||||
class="btn btn-success"
|
class="btn btn-secondary"
|
||||||
disabled=self.selected_group.is_none() || self.common.is_task_running()
|
disabled=self.selected_group.is_none() || self.common.is_task_running()
|
||||||
onclick=self.common.callback(|_| Msg::SubmitAddGroup)>
|
onclick=self.common.callback(|_| Msg::SubmitAddGroup)>
|
||||||
{"Add"}
|
<i class="bi-person-plus me-2"></i>
|
||||||
|
{"Add to group"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -98,10 +98,11 @@ impl Component for App {
|
|||||||
let link = self.link.clone();
|
let link = self.link.clone();
|
||||||
let is_admin = self.is_admin();
|
let is_admin = self.is_admin();
|
||||||
html! {
|
html! {
|
||||||
<div class="container shadow-sm py-3">
|
<div>
|
||||||
{self.view_banner()}
|
{self.view_banner()}
|
||||||
|
<div class="container py-3 bg-kug">
|
||||||
<div class="row justify-content-center" style="padding-bottom: 80px;">
|
<div class="row justify-content-center" style="padding-bottom: 80px;">
|
||||||
<div class="shadow-sm py-3" style="max-width: 1000px">
|
<div class="py-3" style="max-width: 1000px">
|
||||||
<Router<AppRoute>
|
<Router<AppRoute>
|
||||||
render = Router::render(move |s| Self::dispatch_route(s, &link, is_admin))
|
render = Router::render(move |s| Self::dispatch_route(s, &link, is_admin))
|
||||||
/>
|
/>
|
||||||
@ -109,6 +110,7 @@ impl Component for App {
|
|||||||
</div>
|
</div>
|
||||||
{self.view_footer()}
|
{self.view_footer()}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -171,7 +173,10 @@ impl App {
|
|||||||
AppRoute::Index | AppRoute::ListUsers => html! {
|
AppRoute::Index | AppRoute::ListUsers => html! {
|
||||||
<div>
|
<div>
|
||||||
<UserTable />
|
<UserTable />
|
||||||
<NavButton classes="btn btn-primary" route=AppRoute::CreateUser>{"Create a user"}</NavButton>
|
<NavButton classes="btn btn-primary" route=AppRoute::CreateUser>
|
||||||
|
<i class="bi-person-plus me-2"></i>
|
||||||
|
{"Create a user"}
|
||||||
|
</NavButton>
|
||||||
</div>
|
</div>
|
||||||
},
|
},
|
||||||
AppRoute::CreateGroup => html! {
|
AppRoute::CreateGroup => html! {
|
||||||
@ -180,7 +185,10 @@ impl App {
|
|||||||
AppRoute::ListGroups => html! {
|
AppRoute::ListGroups => html! {
|
||||||
<div>
|
<div>
|
||||||
<GroupTable />
|
<GroupTable />
|
||||||
<NavButton classes="btn btn-primary" route=AppRoute::CreateGroup>{"Create a group"}</NavButton>
|
<NavButton classes="btn btn-primary" route=AppRoute::CreateGroup>
|
||||||
|
<i class="bi-plus-circle me-2"></i>
|
||||||
|
{"Create a group"}
|
||||||
|
</NavButton>
|
||||||
</div>
|
</div>
|
||||||
},
|
},
|
||||||
AppRoute::GroupDetails(group_id) => html! {
|
AppRoute::GroupDetails(group_id) => html! {
|
||||||
@ -203,11 +211,11 @@ impl App {
|
|||||||
|
|
||||||
fn view_banner(&self) -> Html {
|
fn view_banner(&self) -> Html {
|
||||||
html! {
|
html! {
|
||||||
<header class="p-3 mb-4 border-bottom shadow-sm">
|
<header class="p-2 mb-3 border-bottom">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
||||||
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 me-md-5 text-dark text-decoration-none">
|
<a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-dark text-decoration-none">
|
||||||
<h1>{"LLDAP"}</h1>
|
<h2>{"LLDAP"}</h2>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
|
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
|
||||||
@ -215,15 +223,17 @@ impl App {
|
|||||||
<>
|
<>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
classes="nav-link px-2 link-dark h4"
|
classes="nav-link px-2 link-dark h6"
|
||||||
route=AppRoute::ListUsers>
|
route=AppRoute::ListUsers>
|
||||||
|
<i class="bi-people me-2"></i>
|
||||||
{"Users"}
|
{"Users"}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
classes="nav-link px-2 link-dark h4"
|
classes="nav-link px-2 link-dark h6"
|
||||||
route=AppRoute::ListGroups>
|
route=AppRoute::ListGroups>
|
||||||
|
<i class="bi-collection me-2"></i>
|
||||||
{"Groups"}
|
{"Groups"}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
@ -246,6 +256,15 @@ impl App {
|
|||||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
||||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
|
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
{
|
||||||
|
if let Some((user_id, _)) = &self.user_info {
|
||||||
|
html! {
|
||||||
|
<span class="ms-2">
|
||||||
|
{user_id}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
} else { html!{} }
|
||||||
|
}
|
||||||
</a>
|
</a>
|
||||||
{if let Some((user_id, _)) = &self.user_info { html! {
|
{if let Some((user_id, _)) = &self.user_info { html! {
|
||||||
<ul
|
<ul
|
||||||
@ -256,7 +275,7 @@ impl App {
|
|||||||
<Link
|
<Link
|
||||||
classes="dropdown-item"
|
classes="dropdown-item"
|
||||||
route=AppRoute::UserDetails(user_id.clone())>
|
route=AppRoute::UserDetails(user_id.clone())>
|
||||||
{"Profile"}
|
{"View details"}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li><hr class="dropdown-divider" /></li>
|
<li><hr class="dropdown-divider" /></li>
|
||||||
@ -274,7 +293,7 @@ impl App {
|
|||||||
|
|
||||||
fn view_footer(&self) -> Html {
|
fn view_footer(&self) -> Html {
|
||||||
html! {
|
html! {
|
||||||
<footer class="text-center text-muted fixed-bottom bg-light">
|
<footer class="text-center text-muted fixed-bottom bg-light py-2">
|
||||||
<div>
|
<div>
|
||||||
<span>{format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}</span>
|
<span>{format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -220,6 +220,20 @@ impl Component for ChangePasswordForm {
|
|||||||
type Field = yew_form::Field<FormModel>;
|
type Field = yew_form::Field<FormModel>;
|
||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
|
<div class="mb-2 mt-2">
|
||||||
|
<h5 class="fw-bold">
|
||||||
|
{"Change password"}
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
if let Some(e) = &self.common.error {
|
||||||
|
html! {
|
||||||
|
<div class="alert alert-danger mt-3 mb-3">
|
||||||
|
{e.to_string() }
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
} else { html! {} }
|
||||||
|
}
|
||||||
<form
|
<form
|
||||||
class="form">
|
class="form">
|
||||||
{if !is_admin { html! {
|
{if !is_admin { html! {
|
||||||
@ -243,10 +257,12 @@ impl Component for ChangePasswordForm {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}} else { html! {} }}
|
}} else { html! {} }}
|
||||||
<div class="form-group row">
|
<div class="form-group row mb-3">
|
||||||
<label for="new_password"
|
<label for="new_password"
|
||||||
class="form-label col-sm-2 col-form-label">
|
class="form-label col-sm-2 col-form-label">
|
||||||
{"New password*:"}
|
{"New Password"}
|
||||||
|
<span class="text-danger">{"*"}</span>
|
||||||
|
{":"}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-sm-10">
|
<div class="col-sm-10">
|
||||||
<Field
|
<Field
|
||||||
@ -263,10 +279,12 @@ impl Component for ChangePasswordForm {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row mb-3">
|
||||||
<label for="confirm_password"
|
<label for="confirm_password"
|
||||||
class="form-label col-sm-2 col-form-label">
|
class="form-label col-sm-2 col-form-label">
|
||||||
{"Confirm password*:"}
|
{"Confirm Password"}
|
||||||
|
<span class="text-danger">{"*"}</span>
|
||||||
|
{":"}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-sm-10">
|
<div class="col-sm-10">
|
||||||
<Field
|
<Field
|
||||||
@ -283,31 +301,23 @@ impl Component for ChangePasswordForm {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row justify-content-center">
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary col-sm-1 col-form-label"
|
class="btn btn-primary col-auto col-form-label"
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled=self.common.is_task_running()
|
disabled=self.common.is_task_running()
|
||||||
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
|
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
|
||||||
{"Submit"}
|
<i class="bi-save me-2"></i>
|
||||||
|
{"Save changes"}
|
||||||
</button>
|
</button>
|
||||||
|
<NavButton
|
||||||
|
classes="btn btn-secondary ms-2 col-auto col-form-label"
|
||||||
|
route=AppRoute::UserDetails(self.common.username.clone())>
|
||||||
|
<i class="bi-arrow-return-left me-2"></i>
|
||||||
|
{"Back"}
|
||||||
|
</NavButton>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{ if let Some(e) = &self.common.error {
|
|
||||||
html! {
|
|
||||||
<div class="alert alert-danger">
|
|
||||||
{e.to_string() }
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
} else { html! {} }
|
|
||||||
}
|
|
||||||
<div>
|
|
||||||
<NavButton
|
|
||||||
classes="btn btn-primary"
|
|
||||||
route=AppRoute::UserDetails(self.common.username.clone())>
|
|
||||||
{"Back"}
|
|
||||||
</NavButton>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -100,14 +100,16 @@ impl Component for CreateGroupForm {
|
|||||||
type Field = yew_form::Field<CreateGroupModel>;
|
type Field = yew_form::Field<CreateGroupModel>;
|
||||||
html! {
|
html! {
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<form class="form shadow-sm py-3" style="max-width: 636px">
|
<form class="form py-3" style="max-width: 636px">
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<h5 class="fw-bold">{"Create a group"}</h5>
|
<h5 class="fw-bold">{"Create a group"}</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row mb-3">
|
<div class="form-group row mb-3">
|
||||||
<label for="groupname"
|
<label for="groupname"
|
||||||
class="form-label col-4 col-form-label">
|
class="form-label col-4 col-form-label">
|
||||||
{"Group name*:"}
|
{"Group name"}
|
||||||
|
<span class="text-danger">{"*"}</span>
|
||||||
|
{":"}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<Field
|
<Field
|
||||||
@ -129,6 +131,7 @@ impl Component for CreateGroupForm {
|
|||||||
type="submit"
|
type="submit"
|
||||||
disabled=self.common.is_task_running()
|
disabled=self.common.is_task_running()
|
||||||
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
|
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
|
||||||
|
<i class="bi-save me-2"></i>
|
||||||
{"Submit"}
|
{"Submit"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -194,14 +194,16 @@ impl Component for CreateUserForm {
|
|||||||
type Field = yew_form::Field<CreateUserModel>;
|
type Field = yew_form::Field<CreateUserModel>;
|
||||||
html! {
|
html! {
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<form class="form shadow-sm py-3" style="max-width: 636px">
|
<form class="form py-3" style="max-width: 636px">
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<h5 class="fw-bold">{"Create a user"}</h5>
|
<h5 class="fw-bold">{"Create a user"}</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row mb-3">
|
<div class="form-group row mb-3">
|
||||||
<label for="username"
|
<label for="username"
|
||||||
class="form-label col-4 col-form-label">
|
class="form-label col-4 col-form-label">
|
||||||
{"User name*:"}
|
{"User name"}
|
||||||
|
<span class="text-danger">{"*"}</span>
|
||||||
|
{":"}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<Field
|
<Field
|
||||||
@ -220,7 +222,9 @@ impl Component for CreateUserForm {
|
|||||||
<div class="form-group row mb-3">
|
<div class="form-group row mb-3">
|
||||||
<label for="email"
|
<label for="email"
|
||||||
class="form-label col-4 col-form-label">
|
class="form-label col-4 col-form-label">
|
||||||
{"Email*:"}
|
{"Email"}
|
||||||
|
<span class="text-danger">{"*"}</span>
|
||||||
|
{":"}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<Field
|
<Field
|
||||||
@ -240,7 +244,9 @@ impl Component for CreateUserForm {
|
|||||||
<div class="form-group row mb-3">
|
<div class="form-group row mb-3">
|
||||||
<label for="display-name"
|
<label for="display-name"
|
||||||
class="form-label col-4 col-form-label">
|
class="form-label col-4 col-form-label">
|
||||||
{"Display name*:"}
|
{"Display name"}
|
||||||
|
<span class="text-danger">{"*"}</span>
|
||||||
|
{":"}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<Field
|
<Field
|
||||||
@ -340,11 +346,13 @@ impl Component for CreateUserForm {
|
|||||||
disabled=self.common.is_task_running()
|
disabled=self.common.is_task_running()
|
||||||
type="submit"
|
type="submit"
|
||||||
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
|
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
|
||||||
|
<i class="bi-save me-2"></i>
|
||||||
{"Submit"}
|
{"Submit"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{ if let Some(e) = &self.common.error {
|
{
|
||||||
|
if let Some(e) = &self.common.error {
|
||||||
html! {
|
html! {
|
||||||
<div class="alert alert-danger">
|
<div class="alert alert-danger">
|
||||||
{e.to_string() }
|
{e.to_string() }
|
||||||
|
@ -154,12 +154,16 @@ impl DeleteGroup {
|
|||||||
type="button"
|
type="button"
|
||||||
class="btn btn-secondary"
|
class="btn btn-secondary"
|
||||||
onclick=self.common.callback(|_| Msg::DismissModal)>
|
onclick=self.common.callback(|_| Msg::DismissModal)>
|
||||||
|
<i class="bi-x-circle me-2"></i>
|
||||||
{"Cancel"}
|
{"Cancel"}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onclick=self.common.callback(|_| Msg::ConfirmDeleteGroup)
|
onclick=self.common.callback(|_| Msg::ConfirmDeleteGroup)
|
||||||
class="btn btn-danger">{"Yes, I'm sure"}</button>
|
class="btn btn-danger">
|
||||||
|
<i class="bi-check-circle me-2"></i>
|
||||||
|
{"Yes, I'm sure"}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -152,12 +152,16 @@ impl DeleteUser {
|
|||||||
type="button"
|
type="button"
|
||||||
class="btn btn-secondary"
|
class="btn btn-secondary"
|
||||||
onclick=self.common.callback(|_| Msg::DismissModal)>
|
onclick=self.common.callback(|_| Msg::DismissModal)>
|
||||||
{"Cancel"}
|
<i class="bi-x-circle me-2"></i>
|
||||||
|
{"Cancel"}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onclick=self.common.callback(|_| Msg::ConfirmDeleteUser)
|
onclick=self.common.callback(|_| Msg::ConfirmDeleteUser)
|
||||||
class="btn btn-danger">{"Yes, I'm sure"}</button>
|
class="btn btn-danger">
|
||||||
|
<i class="bi-check-circle me-2"></i>
|
||||||
|
{"Yes, I'm sure"}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -133,7 +133,7 @@ impl GroupDetails {
|
|||||||
<>
|
<>
|
||||||
<h5 class="fw-bold">{"Members"}</h5>
|
<h5 class="fw-bold">{"Members"}</h5>
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-striped">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr key="headerRow">
|
<tr key="headerRow">
|
||||||
<th>{"User Id"}</th>
|
<th>{"User Id"}</th>
|
||||||
@ -145,7 +145,7 @@ impl GroupDetails {
|
|||||||
{if g.users.is_empty() {
|
{if g.users.is_empty() {
|
||||||
html! {
|
html! {
|
||||||
<tr key="EmptyRow">
|
<tr key="EmptyRow">
|
||||||
<td>{"No members"}</td>
|
<td>{"There are no users in this group."}</td>
|
||||||
<td/>
|
<td/>
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
|
@ -94,7 +94,7 @@ impl GroupTable {
|
|||||||
let make_table = |groups: &Vec<Group>| {
|
let make_table = |groups: &Vec<Group>| {
|
||||||
html! {
|
html! {
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-striped">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>{"Group name"}</th>
|
<th>{"Group name"}</th>
|
||||||
|
@ -195,6 +195,7 @@ impl Component for LoginForm {
|
|||||||
class="btn btn-primary"
|
class="btn btn-primary"
|
||||||
disabled=self.common.is_task_running()
|
disabled=self.common.is_task_running()
|
||||||
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
|
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
|
||||||
|
<i class="bi-box-arrow-in-right me-2"/>
|
||||||
{"Login"}
|
{"Login"}
|
||||||
</button>
|
</button>
|
||||||
<NavButton
|
<NavButton
|
||||||
|
@ -113,6 +113,7 @@ impl Component for ResetPasswordStep1Form {
|
|||||||
class="btn btn-primary"
|
class="btn btn-primary"
|
||||||
disabled=self.common.is_task_running()
|
disabled=self.common.is_task_running()
|
||||||
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
|
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
|
||||||
|
<i class="bi-check-circle me-2"/>
|
||||||
{"Reset password"}
|
{"Reset password"}
|
||||||
</button>
|
</button>
|
||||||
<NavButton
|
<NavButton
|
||||||
@ -127,7 +128,7 @@ impl Component for ResetPasswordStep1Form {
|
|||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
{ if let Some(e) = &self.common.error {
|
{ if let Some(e) = &self.common.error {
|
||||||
html! {
|
html! {
|
||||||
<div class="alert alert-danger">
|
<div class="alert alert-danger mb-2">
|
||||||
{e.to_string() }
|
{e.to_string() }
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -67,7 +67,7 @@ impl Component for Select {
|
|||||||
|
|
||||||
fn view(&self) -> Html {
|
fn view(&self) -> Html {
|
||||||
html! {
|
html! {
|
||||||
<select
|
<select class="form-select"
|
||||||
ref=self.node_ref.clone()
|
ref=self.node_ref.clone()
|
||||||
disabled=self.props.children.is_empty()
|
disabled=self.props.children.is_empty()
|
||||||
onchange=self.link.callback(SelectMsg::OnSelectChange)>
|
onchange=self.link.callback(SelectMsg::OnSelectChange)>
|
||||||
|
@ -129,7 +129,7 @@ impl UserDetails {
|
|||||||
<>
|
<>
|
||||||
<h5 class="row m-3 fw-bold">{"Group memberships"}</h5>
|
<h5 class="row m-3 fw-bold">{"Group memberships"}</h5>
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-striped">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr key="headerRow">
|
<tr key="headerRow">
|
||||||
<th>{"Group"}</th>
|
<th>{"Group"}</th>
|
||||||
@ -140,7 +140,7 @@ impl UserDetails {
|
|||||||
{if u.groups.is_empty() {
|
{if u.groups.is_empty() {
|
||||||
html! {
|
html! {
|
||||||
<tr key="EmptyRow">
|
<tr key="EmptyRow">
|
||||||
<td>{"Not member of any group"}</td>
|
<td>{"This user is not a member of any groups."}</td>
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
@ -197,15 +197,19 @@ impl Component for UserDetails {
|
|||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
<h3>{u.id.to_string()}</h3>
|
<h3>{u.id.to_string()}</h3>
|
||||||
<UserDetailsForm
|
<div class="d-flex flex-row-reverse">
|
||||||
user=u.clone() />
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
<NavButton
|
<NavButton
|
||||||
route=AppRoute::ChangePassword(u.id.clone())
|
route=AppRoute::ChangePassword(u.id.clone())
|
||||||
classes="btn btn-primary col-auto">
|
classes="btn btn-secondary">
|
||||||
{"Change password"}
|
<i class="bi-key me-2"></i>
|
||||||
|
{"Modify password"}
|
||||||
</NavButton>
|
</NavButton>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="row m-3 fw-bold">{"User details"}</h5>
|
||||||
|
</div>
|
||||||
|
<UserDetailsForm
|
||||||
|
user=u.clone() />
|
||||||
{self.view_group_memberships(u)}
|
{self.view_group_memberships(u)}
|
||||||
{self.view_add_group_button(u)}
|
{self.view_add_group_button(u)}
|
||||||
{self.view_messages(error)}
|
{self.view_messages(error)}
|
||||||
|
@ -186,30 +186,33 @@ impl Component for UserDetailsForm {
|
|||||||
{"User ID: "}
|
{"User ID: "}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<span id="userId" class="form-constrol-static"><b>{&self.common.user.id}</b></span>
|
<span id="userId" class="form-control-static"><i>{&self.common.user.id}</i></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row mb-3">
|
<div class="form-group row mb-3">
|
||||||
<div class="col-4 col-form-label">
|
<label for="creationDate"
|
||||||
<img
|
class="form-label col-4 col-form-label">
|
||||||
id="avatarDisplay"
|
{"Creation date: "}
|
||||||
src={format!("data:image/jpeg;base64, {}", avatar_string)}
|
</label>
|
||||||
style="max-height:128px;max-width:128px;height:auto;width:auto;"
|
|
||||||
alt="Avatar" />
|
|
||||||
</div>
|
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<input
|
<span id="creationDate" class="form-control-static">{&self.common.user.creation_date.date().naive_local()}</span>
|
||||||
class="form-control"
|
</div>
|
||||||
id="avatarInput"
|
</div>
|
||||||
type="file"
|
<div class="form-group row mb-3">
|
||||||
accept="image/jpeg"
|
<label for="uuid"
|
||||||
oninput=self.common.callback(|_| Msg::Update) />
|
class="form-label col-4 col-form-label">
|
||||||
|
{"UUID: "}
|
||||||
|
</label>
|
||||||
|
<div class="col-8">
|
||||||
|
<span id="creationDate" class="form-control-static">{&self.common.user.uuid}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row mb-3">
|
<div class="form-group row mb-3">
|
||||||
<label for="email"
|
<label for="email"
|
||||||
class="form-label col-4 col-form-label">
|
class="form-label col-4 col-form-label">
|
||||||
{"Email*: "}
|
{"Email"}
|
||||||
|
<span class="text-danger">{"*"}</span>
|
||||||
|
{":"}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<Field
|
<Field
|
||||||
@ -228,7 +231,9 @@ impl Component for UserDetailsForm {
|
|||||||
<div class="form-group row mb-3">
|
<div class="form-group row mb-3">
|
||||||
<label for="display_name"
|
<label for="display_name"
|
||||||
class="form-label col-4 col-form-label">
|
class="form-label col-4 col-form-label">
|
||||||
{"Display Name*: "}
|
{"Display Name"}
|
||||||
|
<span class="text-danger">{"*"}</span>
|
||||||
|
{":"}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<Field
|
<Field
|
||||||
@ -278,35 +283,44 @@ impl Component for UserDetailsForm {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row mb-3">
|
<div class="form-group row align-items-center mb-3">
|
||||||
<label for="creationDate"
|
<label for="avatar"
|
||||||
class="form-label col-4 col-form-label">
|
class="form-label col-4 col-form-label">
|
||||||
{"Creation date: "}
|
{"Avatar: "}
|
||||||
</label>
|
</label>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<span id="creationDate" class="form-constrol-static">{&self.common.user.creation_date.date().naive_local()}</span>
|
<div class="row align-items-center">
|
||||||
|
<div class="col-8">
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
id="avatarInput"
|
||||||
|
type="file"
|
||||||
|
accept="image/jpeg"
|
||||||
|
oninput=self.common.callback(|_| Msg::Update) />
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<img
|
||||||
|
id="avatarDisplay"
|
||||||
|
src={format!("data:image/jpeg;base64, {}", avatar_string)}
|
||||||
|
style="max-height:128px;max-width:128px;height:auto;width:auto;"
|
||||||
|
alt="Avatar" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row mb-3">
|
<div class="form-group row justify-content-center mt-3">
|
||||||
<label for="uuid"
|
|
||||||
class="form-label col-4 col-form-label">
|
|
||||||
{"UUID: "}
|
|
||||||
</label>
|
|
||||||
<div class="col-8">
|
|
||||||
<span id="creationDate" class="form-constrol-static">{&self.common.user.uuid}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row justify-content-center">
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="btn btn-primary col-auto col-form-label"
|
class="btn btn-primary col-auto col-form-label"
|
||||||
disabled=self.common.is_task_running()
|
disabled=self.common.is_task_running()
|
||||||
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>
|
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>
|
||||||
{"Update"}
|
<i class="bi-save me-2"></i>
|
||||||
|
{"Save changes"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{ if let Some(e) = &self.common.error {
|
{
|
||||||
|
if let Some(e) = &self.common.error {
|
||||||
html! {
|
html! {
|
||||||
<div class="alert alert-danger">
|
<div class="alert alert-danger">
|
||||||
{e.to_string() }
|
{e.to_string() }
|
||||||
@ -315,7 +329,7 @@ impl Component for UserDetailsForm {
|
|||||||
} else { html! {} }
|
} else { html! {} }
|
||||||
}
|
}
|
||||||
<div hidden=!self.just_updated>
|
<div hidden=!self.just_updated>
|
||||||
<span>{"User successfully updated!"}</span>
|
<div class="alert alert-success mt-4">{"User successfully updated!"}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -100,7 +100,7 @@ impl UserTable {
|
|||||||
let make_table = |users: &Vec<User>| {
|
let make_table = |users: &Vec<User>| {
|
||||||
html! {
|
html! {
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-striped">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>{"User ID"}</th>
|
<th>{"User ID"}</th>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
header h1 {
|
header h2 {
|
||||||
font-family: 'Bebas Neue', cursive;
|
font-family: 'Bebas Neue', cursive;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user