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

User Authentication and Other fixes #1

Merged
vinod merged 30 commits from user-auth into main 2023-02-05 09:01:08 +00:00
Conversation 0 Commits 30 Files Changed 62 +152 -105
1 changed files with 152 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f7df920bba - Show all commits

227
frontend/src/main.rs
View File

@@ -173,7 +173,7 @@ async fn add_book(record: BookUI) -> Result<reqwasm::http::Response, reqwasm::Er
let resp = Request::post(&url).body(serde_wasm_bindgen::to_value(&serde_json::to_string(&record).unwrap()).unwrap()).header("content-type","application/json").send().await?; let resp = Request::post(&url).body(serde_wasm_bindgen::to_value(&serde_json::to_string(&record).unwrap()).unwrap()).header("content-type","application/json").send().await?;
Ok(resp) Ok(resp)
} }
/*
async fn add_books_isbns(isbns: String) -> Result<reqwasm::http::Response, reqwasm::Error> { async fn add_books_isbns(isbns: String) -> Result<reqwasm::http::Response, reqwasm::Error> {
let backend_url : &'static str = dotenv!("BACKEND_URL"); let backend_url : &'static str = dotenv!("BACKEND_URL");
//env::var("BACKEND_URL").expect("BACKEND_URL is not set in .env file"); //env::var("BACKEND_URL").expect("BACKEND_URL is not set in .env file");
@@ -182,7 +182,7 @@ async fn add_books_isbns(isbns: String) -> Result<reqwasm::http::Response, reqw
println!("Adding multiple books\n"); println!("Adding multiple books\n");
Ok(resp) Ok(resp)
} }
*/
async fn update_book(record: BookUI) -> Result<reqwasm::http::Response, reqwasm::Error> { async fn update_book(record: BookUI) -> Result<reqwasm::http::Response, reqwasm::Error> {
let backend_url : &'static str = dotenv!("BACKEND_URL"); let backend_url : &'static str = dotenv!("BACKEND_URL");
@@ -357,7 +357,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
on:input=toggle_editmode, on:input=toggle_editmode,
bind:checked=editchecked bind:checked=editchecked
) )
div(class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[5px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"){} div(class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[10px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"){}
//p(class="ml-3 text-sm font-medium"){"EDIT"} //p(class="ml-3 text-sm font-medium"){"EDIT"}
} }
} }
@@ -400,14 +400,18 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
} } } }
else { else {
view!{cx, view!{cx,
div(class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"){(format!(" {} ", *app_state.selectedusername.get()))} div(class="bg-gray-300 text-gray-800 font-bold rounded inline-flex items-center px-2"){(format!(" Test {} ", *app_state.selectedusername.get()))}
} }
}) })
} }
div(class="w-2/5 flex mb-2"){ div(class="w-4/5 flex mb-2"){
(if *app_state.editmode.get() == true {
view!{ cx,
div(class="w-1/2 flex"){
(if *app_state.userid.get() != 0 { (if *app_state.userid.get() != 0 {
view!{ cx, view!{ cx,
button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }} button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
@@ -421,14 +425,9 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
}} else { }} else {
view!{cx, ""} view!{cx, ""}
}) })
} }
div(class="w-1/2 flex"){
button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-circle-plus") span(class="inline-block"){"Add" }}
(if *app_state.editmode.get() == true {
view!{ cx,
div(class="w-2/5 flex mb-2"){
button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-circle-plus") }
//button(on:click=click_addbook) { "+ Add New" } //button(on:click=click_addbook) { "+ Add New" }
//input(ref=input_ref3, //input(ref=input_ref3,
// class="new-todo", // class="new-todo",
@@ -443,20 +442,28 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
bind:value=value, bind:value=value,
on:keyup=handle_submit, on:keyup=handle_submit,
)} )}
/*
input(ref=input_ref,
class="new-todo",
placeholder="Search internet (openlibrary)",
bind:value=value,
on:keyup=handle_submit,
)*/
} }
}} else {
view!{cx,
(if *app_state.userid.get() != 0 {
view!{ cx,
button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
div(class="min-w-40 inline-flex"){
input(ref=input_ref2,
class = "inline-flex h-full m-0 p-1 w-full",
placeholder="🔍 Search",
bind:value=value2,
on:keyup=handle_submit_seachall,
)}
}} else { }} else {
view!{cx, ""} view!{cx, ""}
}) })
}
})
}
div(){ div(class="grow flex mb-2 gap-x-1 ml-auto") {
PageBar{} PageBar{}
} }
} }
@@ -651,9 +658,10 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::<Vec<_>>()); let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::<Vec<_>>());
view! {cx, view! {cx,
p {
(if *app_state.openlibrary.get() == false && *app_state.editmode.get() == false { (if *app_state.openlibrary.get() == false && *app_state.editmode.get() == false {
view!{ cx, view!{ cx,
div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
ul { ul {
Keyed( Keyed(
iterable=docs, iterable=docs,
@@ -662,9 +670,11 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
}, },
key =|x| x.id ) key =|x| x.id )
} }
}
} }
} else if *app_state.openlibrary.get() == false && *app_state.editmode.get() == true { } else if *app_state.openlibrary.get() == false && *app_state.editmode.get() == true {
view!{ cx, view!{ cx,
div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
ul { ul {
Keyed( Keyed(
iterable=docs, iterable=docs,
@@ -673,6 +683,7 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
}, },
key =|x| x.id ) key =|x| x.id )
} }
}
} }
} else { } else {
view!{cx, ""} view!{cx, ""}
@@ -685,7 +696,7 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
}} else { }} else {
view!{ cx, ""} view!{ cx, ""}
}) })
}
} }
} }
@@ -743,7 +754,7 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
app_state.displayingbook.set(bookdisplay_div.clone()); app_state.displayingbook.set(bookdisplay_div.clone());
}; };
view! { cx, view! { cx,
div(class="column"){ div(class="column px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded"){
div(class="card"){ div(class="card"){
div(class="card-buttons"){ div(class="card-buttons"){
@@ -799,8 +810,8 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
app_state.displayingbook.set(bookdisplay_div.clone()); app_state.displayingbook.set(bookdisplay_div.clone());
}; };
view! { cx, view! { cx,
div(class="column"){ div(class="px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded"){
div(class="card"){
div(class="card-buttons"){ div(class="card-buttons"){
@@ -825,7 +836,7 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
} }
}
} }
} }
@@ -851,7 +862,7 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
p { p {
(if *app_state.openlibrary.get() == true { (if *app_state.openlibrary.get() == true {
view!{ cx, view!{ cx,
div(class="row") { div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
Keyed( Keyed(
iterable=docs, iterable=docs,
view=move |cx, x| view! { cx, view=move |cx, x| view! { cx,
@@ -893,7 +904,7 @@ pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
}; };
view! { cx, view! { cx,
div(class="column"){ div(class="column"){
div(class="card-openlibrary",on:click=handle_add_div){ div(class="card-openlibrary px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded",on:click=handle_add_div){
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500 rounded inline-flex items-center", on:click=handle_add){ i(class="fa-solid fa-plus") } button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500 rounded inline-flex items-center", on:click=handle_add){ i(class="fa-solid fa-plus") }
div(class="card-main"){ div(class="card-main"){
@@ -1073,80 +1084,85 @@ info!("Adding book");
(if *app_state.adding.get() == true || *app_state.updating.get() == true { (if *app_state.adding.get() == true || *app_state.updating.get() == true {
view!{ cx, view!{ cx,
div(class="modal-content"){ div(class="modal-content"){
div(class="input-buttons"){ div(class="input-buttons flex gap-x-3"){
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "Add/Update book to DB" } button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "Add/Update" }
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_cancel){ "Cancel" } button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_cancel){ "Cancel" }
} }
p { p {
div(class="input-field"){ div(class="flex flex-wrap w-full"){
div(class="grid grid-cols-1 md:grid-cols-3 lg:grid=cols-4 gap-x-4"){
div(class="input-field grid grid-row-2"){
label{"Title"} label{"Title"}
textarea(bind:value=inp_title, placeholder="Title" ) textarea(bind:value=inp_title, placeholder="Title" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"OpenLib Key"} label{"OpenLib Key"}
textarea(bind:value=inp_olkey, placeholder="OpenLibrary Key" ) textarea(bind:value=inp_olkey, placeholder="OpenLibrary Key" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Editions"} label{"Editions"}
textarea(bind:value=inp_editioncount, placeholder="Number of editions" ) textarea(bind:value=inp_editioncount, placeholder="Number of editions" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Publish year"} label{"Publish year"}
textarea(bind:value=inp_publishyear, placeholder="First publish year" ) textarea(bind:value=inp_publishyear, placeholder="First publish year" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Pages"} label{"Pages"}
textarea(bind:value=inp_medianpage, placeholder="Page count" ) textarea(bind:value=inp_medianpage, placeholder="Page count" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"GoodreadID"} label{"GoodreadID"}
textarea(bind:value=inp_goodread, placeholder="GoodRead ID" ) textarea(bind:value=inp_goodread, placeholder="GoodRead ID" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Description"} label{"Description"}
textarea(bind:value=inp_desc, placeholder="Description" ) textarea(bind:value=inp_desc, placeholder="Description" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Cover"} label{"Cover"}
textarea(bind:value=inp_cover, placeholder="Cover URL" ) textarea(bind:value=inp_cover, placeholder="Cover URL" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Location"} label{"Location"}
textarea(bind:value=inp_location, placeholder="Location" ) textarea(bind:value=inp_location, placeholder="Location" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Rating"} label{"Rating"}
textarea(bind:value=inp_rating, placeholder="Rating (/10)" ) textarea(bind:value=inp_rating, placeholder="Rating (/10)" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Comments"} label{"Comments"}
textarea(bind:value=inp_comments, placeholder="Comments" ) textarea(bind:value=inp_comments, placeholder="Comments" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Authors"} label{"Authors"}
textarea(bind:value=inp_author, placeholder="Authors") textarea(bind:value=inp_author, placeholder="Authors")
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Persons"} label{"Persons"}
textarea(bind:value=inp_person, placeholder="Persons" ) textarea(bind:value=inp_person, placeholder="Persons" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Places"} label{"Places"}
textarea(bind:value=inp_place, placeholder="Places" ) textarea(bind:value=inp_place, placeholder="Places" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Subjects"} label{"Subjects"}
textarea(bind:value=inp_subject, placeholder="Subjects" ) textarea(bind:value=inp_subject, placeholder="Subjects" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"Times"} label{"Times"}
textarea(bind:value=inp_time, placeholder="Times" ) textarea(bind:value=inp_time, placeholder="Times" )
} }
div(class="input-field"){ div(class="input-field grid grid-row-2"){
label{"ISBNs"} label{"ISBNs"}
textarea(bind:value=inp_isbn, placeholder="ISBNs" ) textarea(bind:value=inp_isbn, placeholder="ISBNs" )
} }
}
}
} }
} }
@@ -1262,7 +1278,7 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
div(class="modal-content"){ div(class="modal-content"){
div(class="more-info"){ div(class="more-info"){
div(class="more-info-buttons"){ div(class="more-info-buttons gap-x-3"){
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500 rounded inline-flex items-center", on:click=handle_close){ i(class="fa-solid fa-xmark") } button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500 rounded inline-flex items-center", on:click=handle_close){ i(class="fa-solid fa-xmark") }
(if *app_state.editmode.get() == true { (if *app_state.editmode.get() == true {
@@ -1272,43 +1288,67 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
view!{cx, ""} view!{cx, ""}
}) })
} }
img(src=coverurl.get(),width="200") div(class="flex flex-wrap w-full"){
label{"Title: "}
div(class="flex w-4/5"){
div(class="grid grid-cols-4 md:grid-cols-4 gap-x-3"){
label(class="font-bold col-start-1"){"Title: "}
p(class="col-span-3"){
(format!("{}",dtitle.get())) (format!("{}",dtitle.get()))
br{} }
label{"Authors: "} label(class="font-bold col-start-1"){"Authors: "}
p(class="col-span-3"){
(format!("{}",dauthors.get())) (format!("{}",dauthors.get()))
br{} }
label{"Location: "} label(class="font-bold col-start-1"){"Location: "}
p(class="col-span-3"){
(format!("{}",dlocation.get())) (format!("{}",dlocation.get()))
br{} }
label{"Editions: "} label(class="font-bold col-start-1"){"Editions: "}
p(class="col-span-3"){
(format!("{}",deditions.get())) (format!("{}",deditions.get()))
br{} }
label{"Publish Year: "} label(class="font-bold col-start-1"){"Publish Year: "}
p(class="col-span-3"){
(format!("{}",dpubyr.get())) (format!("{}",dpubyr.get()))
br{} }
label{"Page Count: "} label(class="font-bold col-start-1"){"Page Count: "}
p(class="col-span-3"){
(format!("{}",dpages.get())) (format!("{}",dpages.get()))
br{} }
label{"Openlibrary Link: "} label(class="font-bold col-start-1"){"Openlibrary Link: "}
p(class="col-span-3 text-blue-800"){
a(href=dollink.get().clone()){(format!("{}",dollink.get()))} a(href=dollink.get().clone()){(format!("{}",dollink.get()))}
br{} }
label{"GoodReads Link: "} label(class="font-bold col-start-1"){"GoodReads Link: "}
p(class="col-span-3 text-blue-800"){
a(href=dgoodread.get().clone()){(format!("{}",dgoodread.get()))} a(href=dgoodread.get().clone()){(format!("{}",dgoodread.get()))}
br{} }
label{"ISBN: "} label(class="font-bold col-start-1"){"ISBN: "}
p(class="col-span-3"){
(format!("{}",disbn.get())) (format!("{}",disbn.get()))
br{} }
label{"Description: "} label(class="font-bold col-start-1"){"Comments: "}
(format!("{}",ddesc.get())) p(class="col-span-3"){
br{}
label{"Comments: "}
(format!("{}",dcomments.get())) (format!("{}",dcomments.get()))
br{} }
label{"Tags: "} }
}
div(class="flex w-1/5"){
img(class="float-right m-1",src=coverurl.get(),width="200")
}
div(class="grid grid-cols-5 md:grid-cols-5 gap-x-3"){
label(class="font-bold col-start-1"){"Description: "}
p(class="col-span-4"){
(format!("{}",ddesc.get()))
}
label(class="font-bold col-start-1"){"Tags: "}
p(class="col-span-4 italic"){
(format!("{}",dtags.get())) (format!("{}",dtags.get()))
br{} }
}
}
} }
} }
}} }}
@@ -1361,29 +1401,32 @@ async fn PageBar<G: Html>(cx: Scope<'_>) -> View<G> {
} }
}; };
view! {cx, view! {cx,
div(class="w-1/10 flex mb-2 gap-x-1") {
(if (*app_state.openlibrary.get() == false || *app_state.internalsearch.get() == true) && !app_state.books.get().is_empty() { (if (*app_state.openlibrary.get() == false || *app_state.internalsearch.get() == true) && !app_state.books.get().is_empty() {
view!{ cx, view!{ cx,
div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center"){ div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center w-max"){
i(class="fa-solid fa-file") span(class="hidden md:block-inline"){p{"#"}} i(class="fa-solid fa-file") span(class="hidden md:block-inline"){p{"#"}}
input(type="number", ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input [appearance:textfield] mx-1 my-0 p-1 min-w-30 w-30") input(type="number", ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input [appearance:textfield] mx-1 my-0 px-1 min-w-30 w-30 max-w-40", size="1")
label(class="block-inline"){(format!(" / {}",*app_state.maxpage.get()))} div(class="flex-inline"){(format!(" / {}",*app_state.maxpage.get()))}
} }
(if *app_state.pagenum.get()>1 { (if *app_state.pagenum.get()>1 {
view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_sub){ "-" }} view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold px-4 rounded inline-flex items-center", on:click=handle_sub){ "-" }}
} else { } else {
view!{cx,""} view!{cx,""}
}) })
(if *app_state.pagenum.get()<*app_state.maxpage.get() { (if *app_state.pagenum.get()<*app_state.maxpage.get() {
view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "+" }} view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold px-4 rounded inline-flex items-center", on:click=handle_add){ "+" }}
} else { } else {
view!{cx,""} view!{cx,""}
}) })
} }
}else { }else {
view!{cx,""} view!{cx,
}) div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center w-max"){
("Zero Pages")
} }
}
})
} }
} }
@@ -1521,24 +1564,28 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
}; };
view! {cx, view! {cx,
div(class="modal-box", ref=node_ref, on:click=handle_click_close, closable="true"){ div(class="modal-box mt-100", ref=node_ref, on:click=handle_click_close, closable="true"){
(if *app_state.userscreen.get() == true { (if *app_state.userscreen.get() == true {
view!{cx, view!{cx,
div(class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"){ div(class="mt-100 bg-white shadow-md rounded px-8 pt-8 pb-8 m-4"){
label{"Username : "} label{"Username : "}
input(ref=input_refU,bind:value=userval, placeholder="Username", class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400") input(ref=input_refU,bind:value=userval, placeholder="Username", class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400")
br{} br{}
label{"Password : "} label{"Password : "}
input(ref=input_refP,bind:value=passval,type="password", placeholder="*****", input(ref=input_refP,bind:value=passval,type="password", placeholder="*****",
on:keyup=handle_submit_login, class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400") on:keyup=handle_submit_login, class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400")
br{} br{}br{}
div(class="w-full flex gap-1"){
button( class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 inline-flex items-center border-b-4 border-blue-700 hover:border-blue-500 w-full",on:click=handle_login){ "LOGIN" } button( class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 inline-flex items-center border-b-4 border-blue-700 hover:border-blue-500 w-full",on:click=handle_login){ "LOGIN" }
br{}
button( class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 inline-flex items-center border-b-4 border-blue-700 hover:border-blue-500 w-full",on:click=handle_register){ "REGISTER" } button( class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 inline-flex items-center border-b-4 border-blue-700 hover:border-blue-500 w-full",on:click=handle_register){ "REGISTER" }
}
br{} br{}
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500 rounded inline-flex items-center", on:click=handle_close){ i(class="fa-solid fa-xmark") } div(class="w-full flex flex-col gap-1 items-center"){
br{} button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-1/3 gap-x-1", on:click=handle_close){ i(class="fa-solid fa-xmark") span(class="inline-flex"){"CLOSE"} }
}
(if *app_state.warningmsg.get() != "".to_string() { (if *app_state.warningmsg.get() != "".to_string() {
view!{cx, (*app_state.warningmsg.get())} view!{cx, (*app_state.warningmsg.get())}
} else { } else {