Implemented user menu. Replaced favicon with app logo.
parent
17f628739f
commit
2122b3a4f7
Binary file not shown.
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 260 KiB |
@ -0,0 +1,92 @@
|
|||||||
|
use leptos::*;
|
||||||
|
use crate::backend::data::User;
|
||||||
|
use crate::backend::user::{get_user, logout};
|
||||||
|
use crate::components::modal_box::DialogOpener;
|
||||||
|
use crate::locales::trl;
|
||||||
|
|
||||||
|
#[derive(Copy, Clone)]
|
||||||
|
pub struct MenuOpener {
|
||||||
|
visible: ReadSignal<bool>,
|
||||||
|
set_visible: WriteSignal<bool>,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl MenuOpener {
|
||||||
|
pub fn new() -> Self {
|
||||||
|
let (visible, set_visible) = create_signal(false);
|
||||||
|
MenuOpener {
|
||||||
|
visible,
|
||||||
|
set_visible,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn visible(&self) -> bool {
|
||||||
|
self.visible.get()
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn toggle(&self) {
|
||||||
|
let visible = self.visible.get();
|
||||||
|
self.set_visible.update(|v| *v = !visible)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn UserMenu(
|
||||||
|
opener: MenuOpener,
|
||||||
|
editor: DialogOpener,
|
||||||
|
pw_dialog: DialogOpener,
|
||||||
|
user_profile: WriteSignal<User>) -> impl IntoView {
|
||||||
|
let user = create_resource(move || opener.visible(), move |_| get_user());
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<ul class={move || if opener.visible() {"dropdown-menu dropdown-menu-end show"} else
|
||||||
|
{"dropdown-menu dropdown-menu-end"}}
|
||||||
|
data-bs-popper="none">
|
||||||
|
<li>
|
||||||
|
<a class="dropdown-item" href="#" on:click=move |_| {editor.show(); opener.toggle()}>
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="flex-shrink-0 me-3">
|
||||||
|
<i class="bx bxs-user-account" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<Suspense fallback=move || view! {<span>"Loading..."</span>}>
|
||||||
|
{move || {
|
||||||
|
user.get().map(|u| match u {
|
||||||
|
Ok(user) => {
|
||||||
|
let usr = user.unwrap_or(User::default());
|
||||||
|
user_profile.update(|u| *u = usr.clone());
|
||||||
|
view! {
|
||||||
|
<span class="fw-semibold d-block">
|
||||||
|
{usr.full_name.unwrap_or("".to_string())}
|
||||||
|
</span>
|
||||||
|
//<small class="text-muted">"Admin"</small>
|
||||||
|
}},
|
||||||
|
Err(_) => view! {<span>"Error loading user"</span>}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="dropdown-item" href="#" on:click=move |_| {pw_dialog.show(); opener.toggle()}>
|
||||||
|
<i class="bx bx-lock me-2"></i>
|
||||||
|
<span class="align-middle">{trl("Change password")}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="dropdown-item" href="/login" on:click=move |_| {
|
||||||
|
spawn_local(async move {
|
||||||
|
let _ = logout().await;
|
||||||
|
});
|
||||||
|
}>
|
||||||
|
<i class="bx bx-power-off me-2"></i>
|
||||||
|
<span class="align-middle">{trl("Log Out")}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,90 @@
|
|||||||
|
use leptos::*;
|
||||||
|
use leptos_router::*;
|
||||||
|
use crate::backend::data::{ApiResponse, User};
|
||||||
|
use crate::backend::user::ChangePwd;
|
||||||
|
use crate::components::modal_box::{DialogOpener, ModalBody, ModalDialog, ModalFooter};
|
||||||
|
use crate::components::server_err::ServerErr;
|
||||||
|
use crate::components::validation_err::ValidationErr;
|
||||||
|
use crate::locales::trl;
|
||||||
|
use crate::validator::Validator;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn change_password(user: ReadSignal<User>, opener: DialogOpener) -> impl IntoView {
|
||||||
|
let change_pwd = create_server_action::<ChangePwd>();
|
||||||
|
let upd_val = change_pwd.value();
|
||||||
|
let validator = Validator::new();
|
||||||
|
let empty = create_rw_signal("".to_string());
|
||||||
|
|
||||||
|
view! {
|
||||||
|
{move || {
|
||||||
|
if let Some(res) = upd_val.get() {
|
||||||
|
if let Ok(r) = res {
|
||||||
|
if let ApiResponse::Data(_) = r { empty.update(|e| *e = "".to_string())}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
view! {
|
||||||
|
<ActionForm
|
||||||
|
on:submit=move |ev| {
|
||||||
|
let act = ChangePwd::from_event(&ev);
|
||||||
|
if !act.is_err() {
|
||||||
|
validator.check(&act.unwrap().new_pw, &ev);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
action=change_pwd>
|
||||||
|
<ModalDialog opener=opener title="Change password">
|
||||||
|
<ModalBody>
|
||||||
|
<ServerErr result={upd_val} opener=opener/>
|
||||||
|
<ValidationErr validator=validator />
|
||||||
|
<input type="hidden" value={move || user.get().login} name="new_pw[login]"/>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col mb-3">
|
||||||
|
<label for="oldPw" class="form-label">"Old password"</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="oldPw"
|
||||||
|
class="form-control"
|
||||||
|
name="new_pw[old_password]"
|
||||||
|
prop:value={move || empty.get()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col mb-3">
|
||||||
|
<label for="newPw" class="form-label">"New password"</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="newPw"
|
||||||
|
class="form-control"
|
||||||
|
name="new_pw[password]"
|
||||||
|
prop:value={move || empty.get()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col mb-3">
|
||||||
|
<label for="verPw" class="form-label">"Verify password"</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="verPw"
|
||||||
|
class="form-control"
|
||||||
|
name="new_pw[password_ver]"
|
||||||
|
prop:value={move || empty.get()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"
|
||||||
|
on:click=move |_| {validator.reset(); opener.hide(); empty.update(|e| *e = "".to_string())}>
|
||||||
|
{trl("Close")}
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary">
|
||||||
|
{trl("Save changes")}
|
||||||
|
</button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalDialog>
|
||||||
|
</ActionForm>
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,83 @@
|
|||||||
|
use leptos::*;
|
||||||
|
use leptos_router::*;
|
||||||
|
use crate::backend::data::User;
|
||||||
|
use crate::backend::user::UpdateProfile;
|
||||||
|
use crate::components::modal_box::{DialogOpener, ModalBody, ModalDialog, ModalFooter};
|
||||||
|
use crate::components::server_err::ServerErr;
|
||||||
|
use crate::components::validation_err::ValidationErr;
|
||||||
|
use crate::locales::trl;
|
||||||
|
use crate::validator::Validator;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn ProfileEdit(user: ReadSignal<User>, opener: DialogOpener) -> impl IntoView {
|
||||||
|
let update_user = create_server_action::<UpdateProfile>();
|
||||||
|
let upd_val = update_user.value();
|
||||||
|
let validator = Validator::new();
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<ActionForm
|
||||||
|
on:submit=move |ev| {
|
||||||
|
let act = UpdateProfile::from_event(&ev);
|
||||||
|
if !act.is_err() {
|
||||||
|
validator.check(&act.unwrap().user, &ev);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
action=update_user>
|
||||||
|
<ModalDialog opener=opener title="Edit profile">
|
||||||
|
<ModalBody>
|
||||||
|
<ServerErr result={upd_val} opener=opener/>
|
||||||
|
<ValidationErr validator=validator />
|
||||||
|
<input type="hidden" value={move || user.get().login} name="user[login]"/>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col mb-3">
|
||||||
|
<label for="name" class="form-label">"Full name"</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="Enter Full name"
|
||||||
|
prop:value={move || user.get().full_name}
|
||||||
|
name="user[full_name]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col mb-3">
|
||||||
|
<label for="email" class="form-label">"Email"</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="Enter email"
|
||||||
|
prop:value={move || user.get().email.unwrap_or("".to_string())}
|
||||||
|
name="user[email]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col mb-3">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
id="getMail"
|
||||||
|
prop:value={move || if user.get().get_emails {"true"} else {"false"}}
|
||||||
|
prop:checked={move || user.get().get_emails}
|
||||||
|
name="user[get_emails]"
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="getMail">"Get emails"</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"
|
||||||
|
on:click=move |_| {validator.reset(); opener.hide()}>
|
||||||
|
{trl("Close")}
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary">
|
||||||
|
{trl("Save changes")}
|
||||||
|
</button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalDialog>
|
||||||
|
</ActionForm>
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue