ITsolved/rezervovator
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented user menu. Replaced favicon with app logo.

Browse Source
This commit is contained in:
Josef Rokos
2023-09-27 11:36:52 +02:00
parent 17f628739f
commit 2122b3a4f7
16 changed files with 466 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 260 KiB

src/backend/data.rs
+54
View File
@@ -37,6 +37,7 @@ pub struct User {
pub login: String,
pub password: String,
pub full_name: Option<String>,
#[validate(email(message = "Enter valid email address"))]
pub email: Option<String>,
pub admin: bool,
pub get_emails: bool,
@@ -48,6 +49,59 @@ impl User {
}
}
#[derive(Clone, Serialize, Deserialize, Debug, PartialEq, Eq, Validate, Default)]
pub struct UserProfile {
login: String,
full_name: String,
#[validate(email(message = "Enter valid email address"))]
email: String,
get_emails: Option<String>
}
impl UserProfile {
pub fn login(&self) -> &str {
&self.login
}
pub fn full_name(&self) -> &str {
&self.full_name
}
pub fn email(&self) -> &str {
&self.email
}
pub fn get_emails(&self) -> bool {
self.get_emails.is_some()
}
}
#[derive(Clone, Serialize, Deserialize, Debug, PartialEq, Eq, Validate, Default)]
pub struct PwdChange {
login: String,
old_password: String,
#[validate(length(min = 1, message = "Enter new password"),
must_match(other = "password_ver", message = "Passwords doesn't match"))]
password: String,
password_ver: String
}
impl PwdChange {
pub fn login(&self) -> &str {
&self.login
}
pub fn old_password(&self) -> &str {
&self.old_password
}
pub fn password(&self) -> &str {
&self.password
}
pub fn password_ver(&self) -> &str {
&self.password_ver
}
}
/*pub struct Property {
id: u16,
name: String,
src/backend/mod.rs
+17
View File
@@ -21,6 +21,23 @@ macro_rules! perm_check {
}
}
#[macro_export]
macro_rules! user_check {
($check:expr) => {
use crate::perm_check;
use crate::backend::user::logged_in_user;
perm_check!(is_logged_in);
if logged_in_user().await.unwrap_or(User::default()).login != $check {
let response = expect_context::<ResponseOptions>();
response.set_status(StatusCode::FORBIDDEN);
return Ok(ApiResponse::Error("You can change your own profile only".to_string()))
}
}
}
cfg_if!{
if #[cfg(feature = "ssr")] {
use sqlx::PgPool;
src/backend/user.rs
+70 -7
View File
@@ -1,11 +1,11 @@
use cfg_if::cfg_if;
use leptos::*;
use crate::backend::data::{ApiResponse, PwdChange, User, UserProfile};
cfg_if! { if #[cfg(feature = "ssr")] {
use sqlx::{query_as, Error, PgPool, query};
use actix_session::*;
use leptos_actix::{extract, redirect};
use crate::backend::data::User;
pub async fn has_admin_user(pool: &PgPool) -> Result<bool, Error> {
let count: (i64,) = query_as(r#"SELECT COUNT(id) FROM "user" WHERE admin = $1"#)
@@ -57,27 +57,32 @@ cfg_if! { if #[cfg(feature = "ssr")] {
}}
#[server(Login, "/api")]
pub async fn login(username: String, password: String) -> Result<(), ServerFnError> {
pub async fn login(username: String, password: String) -> Result<ApiResponse<()>, ServerFnError> {
use crate::backend::AppData;
use actix_session::*;
use actix_web::web::Data;
use leptos_actix::extract;
use actix_web::http::StatusCode;
use leptos_actix::ResponseOptions;
let pool = extract(|data: Data<AppData>| async move { data.db_pool().clone() }).await?;
let user = user_from_login(&pool, &username).await?;
let user = user_from_login(&pool, &username).await.unwrap_or(User::default());
if pwhash::bcrypt::verify(password, &user.password) {
if !user.login.is_empty() && pwhash::bcrypt::verify(password, &user.password) {
extract(|session: Session| async move {
let _ = session.insert("user", user);
})
.await?;
redirect("/admin");
return Ok(());
return Ok(ApiResponse::Data(()));
}
Err(ServerFnError::ServerError("Bad login".to_string()))
let response = expect_context::<ResponseOptions>();
response.set_status(StatusCode::UNAUTHORIZED);
return Ok(ApiResponse::Error("Bad username or password".to_string()))
}
#[server]
@@ -87,7 +92,6 @@ pub async fn logout() -> Result<(), ServerFnError> {
}).await?;
redirect("/login");
Ok(())
}
@@ -99,4 +103,63 @@ pub async fn auth_check() -> Result<bool, ServerFnError> {
#[server]
pub async fn admin_check() -> Result<bool, ServerFnError> {
Ok(is_admin().await)
}
#[server]
pub async fn get_user() -> Result<Option<User>, ServerFnError> {
Ok(logged_in_user().await)
}
#[server]
pub async fn update_profile(user: UserProfile) -> Result<ApiResponse<()>, ServerFnError> {
use crate::backend::AppData;
use actix_web::web::Data;
use leptos_actix::extract;
use crate::user_check;
user_check!(user.login());
let pool = extract(|data: Data<AppData>| async move { data.db_pool().clone() }).await?;
sqlx::query(r#"UPDATE "user" SET full_name = $1, email = $2, get_emails = $3 WHERE login = $4"#)
.bind(user.full_name())
.bind(user.email())
.bind(user.get_emails())
.bind(user.login())
.execute(&pool)
.await?;
let usr = user_from_login(&pool, user.login()).await?;
extract(|session: Session| async move {
let _ = session.insert("user", usr);
}).await?;
Ok(ApiResponse::Data(()))
}
#[server]
pub async fn change_pwd(new_pw: PwdChange) -> Result<ApiResponse<()>, ServerFnError> {
use crate::backend::AppData;
use actix_web::web::Data;
use leptos_actix::extract;
use crate::user_check;
user_check!(new_pw.login());
let pool = extract(|data: Data<AppData>| async move { data.db_pool().clone() }).await?;
let usr = user_from_login(&pool, new_pw.login()).await?;
if !pwhash::bcrypt::verify(new_pw.old_password(), &usr.password) {
let response = expect_context::<ResponseOptions>();
response.set_status(StatusCode::UNAUTHORIZED);
return Ok(ApiResponse::Error("Invalid old password".to_string()))
}
sqlx::query(r#"UPDATE "user" SET password = $1 WHERE login = $2"#)
.bind(pwhash::bcrypt::hash(new_pw.password()).unwrap())
.bind(new_pw.login())
.execute(&pool)
.await?;
Ok(ApiResponse::Data(()))
}
src/components/admin_portal.rs
+16 -42
View File
@@ -1,8 +1,18 @@
use leptos::*;
use crate::backend::data::User;
use crate::components::modal_box::DialogOpener;
use crate::components::user_menu::{MenuOpener, UserMenu};
use crate::locales::trl;
use crate::pages::change_pwd::ChangePassword;
use crate::pages::profile_edit::ProfileEdit;
#[component]
pub fn AdminPortal(children: Children) -> impl IntoView {
let user_menu = MenuOpener::new();
let (user, set_user) = create_signal(User::default());
let editor = DialogOpener::new();
let pw_changer = DialogOpener::new();
view! {
<div class="layout-wrapper layout-content-navbar">
<div class="layout-container">
@@ -13,6 +23,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
<i class="bx bx-chevron-left bx-sm align-middle"></i>
</a>
<img src="/rezervovator_l.svg" width="180"/>
</div>
<div class="menu-inner-shadow"></div>
@@ -73,53 +84,14 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
</li>
//<!-- User -->
<li class="nav-item navbar-dropdown dropdown-user dropdown">
<a class="nav-link dropdown-toggle hide-arrow" href="#" data-bs-toggle="dropdown">
<a class="nav-link dropdown-toggle hide-arrow" href="#"
on:click=move |_| user_menu.toggle()>
//<div class="avatar avatar-online">
// <img src="/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
//</div>
<i class="bx bx-user fs-3 lh-0"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar avatar-online">
<img src="/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<span class="fw-semibold d-block">"John Doe"</span>
<small class="text-muted">"Admin"</small>
</div>
</div>
</a>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="bx bx-user me-2"></i>
<span class="align-middle">"My Profile"</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="bx bx-cog me-2"></i>
<span class="align-middle">"Settings"</span>
</a>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li>
<a class="dropdown-item" href="auth-login-basic.html">
<i class="bx bx-power-off me-2"></i>
<span class="align-middle">"Log Out"</span>
</a>
</li>
</ul>
<UserMenu opener=user_menu editor=editor pw_dialog=pw_changer user_profile=set_user/>
</li>
//<!--/ User -->
</ul>
@@ -130,6 +102,8 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
<div class="content-wrapper">
//<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
<ProfileEdit user={user} opener=editor/>
<ChangePassword user={user} opener=pw_changer/>
{children()}
</div>
</div>
src/components/header.rs
+1
View File
@@ -13,6 +13,7 @@ pub fn Header() -> impl IntoView {
("data-template", "vertical-menu-template-free"),
("data-assets-path", "/")])
/>
<Title text="Rezervovator"/>
<Meta charset="utf-8"/>
<Meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
src/components/mod.rs
+1
View File
@@ -3,4 +3,5 @@ pub mod server_err;
pub mod validation_err;
pub mod header;
pub mod admin_portal;
pub mod user_menu;
src/components/server_err.rs
+23 -2
View File
@@ -1,6 +1,7 @@
use crate::components::modal_box::DialogOpener;
use leptos::*;
use crate::backend::data::ApiResponse;
use crate::locales::trl;
#[component]
pub fn ServerErr(
@@ -9,7 +10,27 @@ pub fn ServerErr(
) -> impl IntoView {
view! {{move || {
if let Some(val) = result.get() {
if let Err(e) = val {
match val {
Ok(resp) => if let ApiResponse::Error(err) = resp {
view! {
<div class="alert alert-danger">
{trl(&err)}
</div>
}
}
else {
opener.hide();
view! {<div></div>}
}
Err(e) => {
view! {
<div class="alert alert-danger">
"Server error: " {e.to_string()}
</div>
}
}
}
/*if let Err(e) = val {
view! {
<div class="alert alert-danger">
"Server error: " {e.to_string()}
@@ -18,7 +39,7 @@ pub fn ServerErr(
} else {
opener.hide();
view! {<div></div>}
}
}*/
} else {
view! {<div></div>}
}
src/components/user_menu.rs
+92
View File
@@ -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>
}
}
src/components/validation_err.rs
+1 -1
View File
@@ -24,7 +24,7 @@ pub fn ValidationErr(
} else {
view! {
<div class="alert alert-danger">
"Validation error"
{trl("Validation error")}
</div>
}
}
src/locales/catalogues.rs
+2
View File
@@ -14,6 +14,8 @@ lazy_static! {
("Save changes", "Uložit změny"),
("Company info", "Organizace"),
("Name cannot be empty", "Jméno nesmí být prázdné"),
("Invalid old password", "Neplatné staré heslo"),
("Please sign-in to your account", "Přihlaste se prosím k uživatelskému účtu"),
])),
("sk", HashMap::from( [
("Dashboard", "Prehlad"),
src/pages/change_pwd.rs
+90
View File
@@ -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>
}
}}
}
}
src/pages/company_info.rs
+1 -1
View File
@@ -8,7 +8,7 @@ use crate::pages::company_edit::CompanyEdit;
#[component]
pub fn CompanyInfo() -> impl IntoView {
let editor = DialogOpener::new();
let company = create_resource(move|| editor.visible(), move |_| { get_company() });
let company = create_blocking_resource(move|| editor.visible(), move |_| { get_company() });
let (cmp, set_cmp) = create_signal(Company::default());
view! {
src/pages/login.rs
+13 -11
View File
@@ -2,49 +2,51 @@ use leptos::*;
use leptos_meta::*;
use leptos_router::ActionForm;
use crate::backend::user::Login;
use crate::components::modal_box::DialogOpener;
use crate::components::server_err::ServerErr;
use crate::locales::trl;
#[component]
pub fn Login() -> impl IntoView {
let login = create_server_action::<Login>();
let login_val = login.value();
view! {
<Link rel="stylesheet" href="/vendor/css/pages/page-auth.css" />
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="authentication-inner">
<div class="card">
<div class="card-body">
//<!-- Logo -->
<div class="app-brand justify-content-center">
<a href="index.html" class="app-brand-link gap-2">
<span class="app-brand-logo demo">
<img src="/rezervovator_l.svg" width="200"/>
</span>
//<span class="app-brand-text demo text-body fw-bolder">Sneat</span>
</a>
</div>
//<!-- /Logo -->
<h4 class="mb-2">"Welcome to Rezervator 👋"</h4>
<p class="mb-4">"Please sign-in to your account and start the adventure"</p>
<p class="mb-4">{trl("Please sign-in to your account")}</p>
<ActionForm action=login>
<ServerErr result=login_val opener=DialogOpener::new()/>
<div class="mb-3">
<label for="username" class="form-label">"Username"</label>
<label for="username" class="form-label">{trl("Username")}</label>
<input
type="text"
class="form-control"
id="username"
name="username"
placeholder="Enter your username"
placeholder={trl("Enter your username")}
autofocus
/>
</div>
<div class="mb-3 form-password-toggle">
<div class="d-flex justify-content-between">
<label class="form-label" for="password">"Password"</label>
<a href="auth-forgot-password-basic.html">
<label class="form-label" for="password">{trl("Password")}</label>
/*<a href="auth-forgot-password-basic.html">
<small>"Forgot Password?"</small>
</a>
</a>*/
</div>
<div class="input-group input-group-merge">
<input
@@ -61,7 +63,7 @@ pub fn Login() -> impl IntoView {
</div>
<div class="mb-3">
<button class="btn btn-primary d-grid w-100" type="submit">"Sign in"</button>
<button class="btn btn-primary d-grid w-100" type="submit">{trl("Sign in")}</button>
</div>
</ActionForm>
src/pages/mod.rs
+2
View File
@@ -4,3 +4,5 @@ pub mod company_info;
mod company_edit;
pub mod login;
pub mod public;
pub mod profile_edit;
pub mod change_pwd;
src/pages/profile_edit.rs
+83
View File
@@ -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>
}
}