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:
Lewis Larsen
2022-11-03 14:40:02 +00:00
committed by GitHub
parent e0c0efcb2f
commit ba0dc33583
17 changed files with 168 additions and 98 deletions

View File

@@ -220,6 +220,20 @@ impl Component for ChangePasswordForm {
type Field = yew_form::Field<FormModel>;
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
class="form">
{if !is_admin { html! {
@@ -243,10 +257,12 @@ impl Component for ChangePasswordForm {
</div>
</div>
}} else { html! {} }}
<div class="form-group row">
<div class="form-group row mb-3">
<label for="new_password"
class="form-label col-sm-2 col-form-label">
{"New password*:"}
{"New Password"}
<span class="text-danger">{"*"}</span>
{":"}
</label>
<div class="col-sm-10">
<Field
@@ -263,10 +279,12 @@ impl Component for ChangePasswordForm {
</div>
</div>
</div>
<div class="form-group row">
<div class="form-group row mb-3">
<label for="confirm_password"
class="form-label col-sm-2 col-form-label">
{"Confirm password*:"}
{"Confirm Password"}
<span class="text-danger">{"*"}</span>
{":"}
</label>
<div class="col-sm-10">
<Field
@@ -283,31 +301,23 @@ impl Component for ChangePasswordForm {
</div>
</div>
</div>
<div class="form-group row">
<div class="form-group row justify-content-center">
<button
class="btn btn-primary col-sm-1 col-form-label"
class="btn btn-primary col-auto col-form-label"
type="submit"
disabled=self.common.is_task_running()
onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})>
{"Submit"}
<i class="bi-save me-2"></i>
{"Save changes"}
</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>
</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>
</>
}
}