vinod/booksman
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

user-auth store frontend and backend v4

Browse Source
This commit is contained in:
Vinod J M
2023-01-01 23:45:43 +05:30
parent 0af881ceb3
commit ca6e6e88ce
3 changed files with 135 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/Cargo.toml
View File

@@ -31,5 +31,5 @@ wasm-bindgen = "0.2.79"
#yew-router = "0.16.0"
[dependencies.web-sys]
features = ["InputEvent", "KeyboardEvent", "Location", "Storage"]
features = ["InputEvent", "EventTarget", "MouseEvent", "KeyboardEvent", "Location", "Storage", "Element"]
version = "0.3.56"

3
frontend/css/index.css
View File

@@ -44,6 +44,7 @@ body {
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
/* margin-top: 80px; Add a top margin to avoid content overlay */
position: absolute;
min-width: 160px;
z-index: 1;
@@ -211,7 +212,7 @@ body {
}
.page-input {
width: 40px;
width: 30px;
}
/* Responsive columns - one column layout (vertical) on small screens */

177
frontend/src/main.rs
View File

@@ -9,7 +9,7 @@ use sycamore::prelude::*;
//use sycamore::suspense::Suspense;
//use sycamore_router::Route;
use wasm_bindgen::JsCast;
use web_sys::{Event, HtmlInputElement, KeyboardEvent}; // 0.3.5
use web_sys::{Event, HtmlInputElement, KeyboardEvent, EventTarget}; // 0.3.5
use dotenv_codegen::dotenv;
use itertools::Itertools;
use std::collections::HashMap;
@@ -87,6 +87,7 @@ pub struct AppState {
pub userlist: RcSignal<HashMap<String, i32>>,
pub userid: RcSignal<i32>,
pub selectedusername: RcSignal<String>,
pub loggedusername: RcSignal<String>,
pub useridloggedin: RcSignal<i32>,
pub userscreen: RcSignal<bool>,
pub loggedin: RcSignal<bool>,
@@ -313,9 +314,10 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
};
let toggle_editmode = |_| {
app_state.editmode.set(*editchecked.get());
//app_state.editmode.set(*editchecked.get());
app_state.editmode.set( !(*app_state.editmode.get()) );
app_state.userid.set(*app_state.useridloggedin.get());
app_state.selectedusername.set("SELF".to_string());
app_state.selectedusername.set((*app_state.loggedusername.get()).clone());
};
let dropdown_userselect = |_| {
@@ -341,7 +343,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
div(class="header-button"){
(if *app_state.loggedin.get() == false {
view!{ cx,
button(on:click=click_userscreen) { "Register/Login" }
button(on:click=click_userscreen) { "Register / Login" }
}
} else {
view!{cx,
@@ -357,11 +359,26 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
}
div(class="header-column"){
(if *app_state.userid.get() != 0 {
view!{ cx,
(format!(" {} ", *app_state.selectedusername.get()))
button(on:click=click_listall) { "All books" }
input(ref=input_ref2,
class="new-todo",
placeholder="Search collection",
bind:value=value2,
on:keyup=handle_submit_seachall,
)
}} else {
view!{cx, "No Collection Selected"}
})
br{}
(if *app_state.editmode.get() == false {
view!{ cx,
div(class="dropdown"){
button(on:click=dropdown_userselect) { "Choose Collection" }
(if *app_state.dropdownselect.get() == true {
view!{ cx,
div(class="dropdown-content") {
@@ -376,37 +393,16 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
} else {
view!{cx, ""}
})
button(on:click=dropdown_userselect) { "Choose Collection" }
}
}} else {
view!{cx, ""}
})
(if *app_state.userid.get() != 0 {
view!{ cx,
(format!(" {} ", *app_state.selectedusername.get()))
button(on:click=click_listall) { "All books" }
input(ref=input_ref2,
class="new-todo",
placeholder="Search your library",
bind:value=value2,
on:keyup=handle_submit_seachall,
)
}} else {
view!{cx, "No Collection Selected"}
})
}
(if *app_state.editmode.get() == true {
view!{ cx,
div(class="header-column"){
input(ref=input_ref,
class="new-todo",
placeholder="Search internet (openlibrary)",
bind:value=value,
on:keyup=handle_submit,
)
button(on:click=click_addbook) { "+ Add New" }
input(ref=input_ref3,
@@ -415,6 +411,15 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
bind:value=value3,
on:keyup=handle_submit_addbulk,
)
br{}
div(class="header-column"){
input(ref=input_ref,
class="new-todo",
placeholder="Search internet (openlibrary)",
bind:value=value,
on:keyup=handle_submit,
)
}
}} else {
view!{cx, ""}
@@ -454,6 +459,18 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
//let csignal = callback_signal.clone();
//let csignal2 = callback_signal.clone();
create_effect(cx, || {
let app_state = app_state.clone();
if *app_state.userid.get() != 0 {
app_state.openlibrary.set(false);
app_state.internalsearch.set(false);
app_state.pagenum.set(1);
app_state.pagedisplay.set(1);
app_state.refreshing.set(true);
}
});
create_effect(cx, || {
let app_state = app_state.clone();
//let csignal2 = csignal2.clone();
@@ -646,6 +663,7 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
let bookdelete = bookitem.bookitem.clone();
let bookupdate = bookitem.bookitem.clone();
let bookdisplay = bookitem.bookitem.clone();
let bookdisplay_div = bookitem.bookitem.clone();
let loctitle = bookitem.bookitem.clone().title.clone();
let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap_or(vec!["".to_string()]).join(", ");
let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
@@ -685,6 +703,12 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
app_state.updating.set(false);
//info!("Setting displaying book {:?}",bookdisplay);
app_state.displayingbook.set(bookdisplay.clone());
};
let handle_display_div = move |_| {
app_state.displaying.set(true);
app_state.updating.set(false);
//info!("Setting displaying book {:?}",bookdisplay);
app_state.displayingbook.set(bookdisplay_div.clone());
};
view! { cx,
div(class="column"){
@@ -696,7 +720,7 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
button(class="update", on:click=handle_update){ "EDIT=" }
button(class="info", on:click=handle_display){ "INFO+" }
}
div(class="card-main"){
div(class="card-main",on:click=handle_display_div){
img(src=coverurl,width="100")
div(class="card-title"){
@@ -705,15 +729,14 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
div(class="card-authors"){
(format!("{}",locauthors))
}
//div(class="card-image"){
//}
}
div(class="card-desc"){
(format!("{}",locloc))
br{}br{}
(format!("{}",locdesc))
}
}
}
}
@@ -725,6 +748,7 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
let app_state = use_context::<AppState>(cx);
let bookdisplay = bookitem.bookitem.clone();
let bookdisplay_div = bookitem.bookitem.clone();
let loctitle = bookitem.bookitem.clone().title.clone();
let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap_or(vec!["".to_string()]).join(", ");
let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
@@ -737,6 +761,12 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
//info!("Setting displaying book {:?}",bookdisplay);
app_state.displayingbook.set(bookdisplay.clone());
};
let handle_display_div = move |_| {
app_state.displaying.set(true);
app_state.updating.set(false);
//info!("Setting displaying book {:?}",bookdisplay);
app_state.displayingbook.set(bookdisplay_div.clone());
};
view! { cx,
div(class="column"){
div(class="card"){
@@ -745,7 +775,7 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
button(class="info", on:click=handle_display){ "INFO+" }
}
div(class="card-main"){
div(class="card-main", on:click=handle_display_div){
img(src=coverurl,width="100")
div(class="card-title"){
@@ -754,15 +784,14 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
div(class="card-authors"){
(format!("{}",locauthors))
}
//div(class="card-image"){
//}
}
div(class="card-desc"){
(format!("{}",locloc))
br{}br{}
(format!("{}",locdesc))
}
}
}
}
@@ -811,19 +840,28 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
#[component(inline_props)]
pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
let book = bookitem.bookitem.clone();
let book_div=book.clone();
let bookdisp=book.clone();
let loctitle = bookitem.bookitem.clone().title.clone();
let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap_or(vec!["".to_string()]).join(", ");
let coverurl = bookdisp.cover.clone().unwrap_or("NONE".to_string());
let backend_url : &'static str = dotenv!("BACKEND_URL");
let mut coverurl = bookdisp.cover.clone().unwrap_or("NONE".to_string());
if coverurl == "NONE".to_string() {
coverurl = format!("{}/images/placeholder.jpg", backend_url );
}
let app_state = use_context::<AppState>(cx);
let handle_add = move |_| {
app_state.adding.set(true);
app_state.addingbook.set(book.clone());
};
let handle_add_div = move |_| {
app_state.adding.set(true);
app_state.addingbook.set(book_div.clone());
};
view! { cx,
div(class="column"){
div(class="card-openlibrary"){
div(class="card-openlibrary",on:click=handle_add_div){
button(class="add", on:click=handle_add){ "ADD+" }
div(class="card-main"){
img(src=coverurl,width="100")
@@ -982,8 +1020,22 @@ info!("Adding book");
}
});
let handle_click_close = |event: Event| {
let target: EventTarget = event.target().unwrap();
let element: web_sys::Element = target.unchecked_into();
if element.has_attribute("closable")
{
app_state.displaying.set(false);
let dom_node = node_ref.try_get::<DomNode>();
if dom_node.is_some() {
dom_node.unwrap().set_attribute("popup-display","false");
}
}
};
view! {cx,
div(class="modal-box",ref=node_ref){
div(class="modal-box",ref=node_ref, on:click=handle_click_close, closable="true"){
(if *app_state.adding.get() == true || *app_state.updating.get() == true {
view!{ cx,
@@ -1154,9 +1206,22 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
}
});
let handle_click_close = |event: Event| {
let target: EventTarget = event.target().unwrap();
let element: web_sys::Element = target.unchecked_into();
if element.has_attribute("closable")
{
app_state.displaying.set(false);
let dom_node = node_ref.try_get::<DomNode>();
if dom_node.is_some() {
dom_node.unwrap().set_attribute("popup-display","false");
}
}
};
view! {cx,
div(class="modal-box", ref=node_ref){
div(class="modal-box", ref=node_ref, on:click=handle_click_close, closable="true"){
(if *app_state.displaying.get() == true {
view!{ cx,
@@ -1262,7 +1327,7 @@ async fn PageBar<G: Html>(cx: Scope<'_>) -> View<G> {
};
view! {cx,
div {
(if *app_state.openlibrary.get() == false || *app_state.internalsearch.get() == true {
(if (*app_state.openlibrary.get() == false || *app_state.internalsearch.get() == true) && !app_state.books.get().is_empty() {
view!{ cx,
label{"PAGE "}
input(ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input")
@@ -1322,12 +1387,16 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
name: (*userval.get()).clone(),
password_hash: (*passval.get()).clone(),
};
spawn_local(async move {
app_state.userlist.set(list_users()
.await.expect("Couldn't list user"));
login_user(user)
.await.expect("Couldn't login user");
let auth = authentication_check().await.unwrap_or(false);
app_state.loggedin.set(auth);
if auth == true {
app_state.loggedusername.set(userstr.clone());
app_state.selectedusername.set(userstr.clone());
app_state.useridloggedin.set( *(*app_state.userlist.get()).get(&userstr).unwrap_or(&0));
app_state.userid.set( *(*app_state.userlist.get()).get(&userstr).unwrap_or(&0));
@@ -1348,14 +1417,16 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
password_hash: (*passval.get()).clone(),
};
spawn_local(async move {
app_state.userlist.set(list_users()
.await.expect("Couldn't list user"));
login_user(user)
.await.expect("Couldn't login user");
let auth = authentication_check().await.unwrap_or(false);
app_state.loggedin.set(auth);
if auth == true {
app_state.loggedusername.set(userstr.clone());
app_state.selectedusername.set(userstr.clone());
app_state.useridloggedin.set( * ((*app_state.userlist.get()).get(&userstr).unwrap_or(&0)) );
info!("ID LOGGED IN {} {:?}",*app_state.useridloggedin.get(),*app_state.userlist.get());
app_state.userid.set( *(*app_state.userlist.get()).get(&userstr).unwrap_or(&0));
app_state.userscreen.set(false);
}
@@ -1377,7 +1448,7 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
}
});
let handle_close = move |_| {
app_state.displaying.set(false);
app_state.userscreen.set(false);
let dom_node = node_ref.try_get::<DomNode>();
if dom_node.is_some() {
@@ -1385,8 +1456,23 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
}
};
let handle_click_close = |event: Event| {
let target: EventTarget = event.target().unwrap();
let element: web_sys::Element = target.unchecked_into();
if element.has_attribute("closable")
{
app_state.userscreen.set(false);
let dom_node = node_ref.try_get::<DomNode>();
if dom_node.is_some() {
dom_node.unwrap().set_attribute("popup-display","false");
}
}
};
view! {cx,
div(class="modal-box", ref=node_ref){
div(class="modal-box", ref=node_ref, on:click=handle_click_close, closable="true"){
(if *app_state.userscreen.get() == true {
view!{cx,
@@ -1436,6 +1522,7 @@ fn App<G: Html>(cx: Scope) -> View<G> {
userlist: create_rc_signal(HashMap::new()),
userid: create_rc_signal(0),
selectedusername: create_rc_signal(String::new()),
loggedusername: create_rc_signal(String::new()),
useridloggedin: create_rc_signal(0),
userscreen: create_rc_signal(bool::default()),
loggedin: create_rc_signal(bool::default()),