User Authentication and Other fixes #1
@@ -36,200 +36,3 @@ body {
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: #f1f1f1; /* Fallback color */
|
||||
}
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
/* Float three header columns side by side */
|
||||
.header {
|
||||
position: fixed; /* Stay in place */
|
||||
/* overflow: hidden;*/
|
||||
z-index: 1; /* Sit on top */
|
||||
width: 100%;
|
||||
top: 0; /* Position the navbar at the top of the page */
|
||||
padding: 0 10px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: 50px; /* Add a top margin to avoid content overlay */
|
||||
}
|
||||
|
||||
/* Float three header columns side by side */
|
||||
.header-button {
|
||||
float: left;
|
||||
width: 10%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Float three header columns side by side */
|
||||
.header-column {
|
||||
float: left;
|
||||
width: 36%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
/* Float three header columns side by side */
|
||||
.header-page-column {
|
||||
float: right;
|
||||
margin-top: 0px;
|
||||
width: 15%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Float four columns side by side */
|
||||
.column {
|
||||
float: left;
|
||||
width: 25%;
|
||||
padding: 0 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Remove extra left and right margins, due to padding in columns */
|
||||
.row {margin: 0 -5px;}
|
||||
|
||||
/* Clear floats after the columns */
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Style the counter cards */
|
||||
.card {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Style the counter cards */
|
||||
.card-openlibrary {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.card img {
|
||||
float: right;
|
||||
width: 100px;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
.card-openlibrary img {
|
||||
float: right;
|
||||
width: 100px;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.card-title {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
width: 60%;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.card-authors {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
width: 60%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
padding: 2px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.input-field {
|
||||
padding: 4px;
|
||||
float: left;
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
font-size: large;
|
||||
}
|
||||
.input-field label {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
min-width: 20%;
|
||||
max-width: 20%;
|
||||
width: 20%;
|
||||
padding: 4px;
|
||||
}
|
||||
.input-field textarea {
|
||||
vertical-align: middle;
|
||||
width: 80%;
|
||||
}
|
||||
.input-buttons {
|
||||
padding: 20px;
|
||||
float: left;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.more-info {
|
||||
width: 90%;
|
||||
}
|
||||
.more-info img {
|
||||
float: right;
|
||||
width: 200px;
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
.more-info label {
|
||||
display:inline-block;
|
||||
text-align: left;
|
||||
width: 20%;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.more-info-buttons {
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page-input {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/* Responsive columns - one column layout (vertical) on small screens */
|
||||
@media screen and (max-width: 600px) {
|
||||
.column {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.main {
|
||||
margin-top: 80px; /* Add a top margin to avoid content overlay */
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
37
frontend/package-lock.json
generated
37
frontend/package-lock.json
generated
@@ -5,6 +5,7 @@
|
||||
"packages": {
|
||||
"": {
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"tailwindcss": "^3.2.4"
|
||||
}
|
||||
},
|
||||
@@ -43,6 +44,18 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/forms": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
|
||||
"integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
@@ -397,6 +410,15 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mini-svg-data-uri": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"mini-svg-data-uri": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/minimist": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
|
||||
@@ -825,6 +847,15 @@
|
||||
"fastq": "^1.6.0"
|
||||
}
|
||||
},
|
||||
"@tailwindcss/forms": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
|
||||
"integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
}
|
||||
},
|
||||
"acorn": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
@@ -1087,6 +1118,12 @@
|
||||
"picomatch": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"mini-svg-data-uri": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||
"dev": true
|
||||
},
|
||||
"minimist": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"tailwindcss": "^3.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -221,8 +221,8 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
|
||||
let value2 = create_signal(cx, String::new());
|
||||
let input_ref2 = create_node_ref(cx);
|
||||
|
||||
let value3 = create_signal(cx, String::new());
|
||||
let input_ref3 = create_node_ref(cx);
|
||||
//let value3 = create_signal(cx, String::new());
|
||||
//let input_ref3 = create_node_ref(cx);
|
||||
|
||||
let completed = create_selector(cx, || *app_state.editmode.get());
|
||||
let editchecked = create_signal(cx, false);
|
||||
@@ -284,7 +284,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
|
||||
};
|
||||
|
||||
|
||||
let handle_submit_addbulk = |event: Event| {
|
||||
/*let handle_submit_addbulk = |event: Event| {
|
||||
let event: KeyboardEvent = event.unchecked_into();
|
||||
|
||||
if event.key() == "Enter" {
|
||||
@@ -298,7 +298,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
};*/
|
||||
|
||||
|
||||
let click_logout = |_| {
|
||||
@@ -340,93 +340,123 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
|
||||
|
||||
|
||||
view! { cx,
|
||||
header(class="header") {
|
||||
div(class="header-button"){
|
||||
header(class="sticky top-0 z-50 flex bg-slate-400 gap-x-4") {
|
||||
div(class="w-1/10 flex mb-2"){
|
||||
(if *app_state.loggedin.get() == false {
|
||||
view!{ cx,
|
||||
button(on:click=click_userscreen) { i(class="fa-solid fa-user") "Register / Login" }
|
||||
button(on:click=click_userscreen, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-full") { i(class="fa-solid fa-user") }
|
||||
}
|
||||
} else {
|
||||
view!{cx,
|
||||
button(on:click=click_logout) { "Log Out" }
|
||||
div(class="flex gap-x-1"){
|
||||
button(on:click=click_logout, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-1/2") { i(class="fa-solid fa-right-from-bracket") }
|
||||
label(class="inline-flex relative items-center cursor-pointer w-1/2"){
|
||||
input(
|
||||
class="toggle",
|
||||
class="sr-only peer",
|
||||
type="checkbox",
|
||||
on:input=toggle_editmode,
|
||||
bind:checked=editchecked
|
||||
)("EDIT")
|
||||
)
|
||||
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"){}
|
||||
//p(class="ml-3 text-sm font-medium"){"EDIT"}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
div(class="header-column"){
|
||||
div(class="w-1/10 flex mb-2"){
|
||||
(if *app_state.editmode.get() == false {
|
||||
view!{ cx,
|
||||
// button(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center ", on:click=dropdown_userselect) {
|
||||
div(class="flex"){
|
||||
select(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold rounded inline-flex items-center w-max", on:click=dropdown_userselect) {
|
||||
option(disabled=true, selected=true, hidden=true, value="", class="w-max"){("?")}
|
||||
|
||||
/* (if *app_state.userid.get() == 0 {
|
||||
|
||||
view!{ cx, ("SELECT")}
|
||||
} else {
|
||||
view!{cx, (*app_state.selectedusername.get())}
|
||||
}
|
||||
)*/
|
||||
//}
|
||||
// (if *app_state.dropdownselect.get() == true {
|
||||
//view!{cx,
|
||||
Keyed(
|
||||
iterable=users,
|
||||
view=move |cx, x| view! { cx,
|
||||
DropDownUser(value=x)
|
||||
},
|
||||
key =|x| x.clone() )
|
||||
//}
|
||||
//} else {
|
||||
// view!{cx, ""}
|
||||
//})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} }
|
||||
else {
|
||||
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="w-2/5 flex mb-2"){
|
||||
|
||||
|
||||
(if *app_state.userid.get() != 0 {
|
||||
view!{ cx,
|
||||
(format!(" {} ", *app_state.selectedusername.get()))
|
||||
button(on:click=click_listall) { "All books" }
|
||||
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="new-todo",
|
||||
placeholder="Search collection",
|
||||
class = "inline-flex h-full m-0 p-1 w-full",
|
||||
placeholder="🔍 Search",
|
||||
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"){
|
||||
|
||||
(if *app_state.dropdownselect.get() == true {
|
||||
view!{ cx,
|
||||
div(class="dropdown-content") {
|
||||
Keyed(
|
||||
iterable=users,
|
||||
view=move |cx, x| view! { cx,
|
||||
DropDownUser(value=x)
|
||||
},
|
||||
key =|x| x.clone() )
|
||||
}
|
||||
}
|
||||
} else {
|
||||
view!{cx, ""}
|
||||
})
|
||||
button(on:click=dropdown_userselect) { "Choose Collection" }
|
||||
}
|
||||
}} else {
|
||||
view!{cx, ""}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
(if *app_state.editmode.get() == true {
|
||||
view!{ cx,
|
||||
|
||||
button(on:click=click_addbook) { "+ Add New" }
|
||||
input(ref=input_ref3,
|
||||
class="new-todo",
|
||||
placeholder="Add bulk ISBNs",
|
||||
bind:value=value3,
|
||||
on:keyup=handle_submit_addbulk,
|
||||
)
|
||||
br{}
|
||||
div(class="header-column"){
|
||||
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" }
|
||||
//input(ref=input_ref3,
|
||||
// class="new-todo",
|
||||
// placeholder="Add bulk ISBNs",
|
||||
// bind:value=value3,
|
||||
// on:keyup=handle_submit_addbulk,
|
||||
//)
|
||||
div(class="min-w-40 inline-flex"){
|
||||
input(ref=input_ref,
|
||||
class = "inline-flex h-full m-0 p-1 w-full",
|
||||
placeholder="🔍 Internet",
|
||||
bind:value=value,
|
||||
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, ""}
|
||||
})
|
||||
|
||||
div(class="header-page-column"){
|
||||
div(){
|
||||
PageBar{}
|
||||
}
|
||||
}
|
||||
@@ -446,7 +476,8 @@ pub fn DropDownUser<G: Html>(cx: Scope, value: StringProp) -> View<G> {
|
||||
};
|
||||
|
||||
view! { cx,
|
||||
button(class="dropdown-item", on:click=handle_select_user){ (buttontext) }br{}
|
||||
//div( class="py-1", role="none") {}
|
||||
option(on:click=handle_select_user,class="w-max"){ (format!("{}",buttontext)) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -716,10 +747,9 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
|
||||
div(class="card"){
|
||||
|
||||
div(class="card-buttons"){
|
||||
|
||||
button(class="delete", on:click=handle_delete){ "DEL-" }
|
||||
button(class="update", on:click=handle_update){ "EDIT=" }
|
||||
button(class="info", on:click=handle_display){ "INFO+" }
|
||||
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_display){ i(class="fa-solid fa-circle-info") }
|
||||
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_update){ i(class="fa-solid fa-pen-to-square") }
|
||||
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_delete){ i(class="fa-solid fa-trash") }
|
||||
}
|
||||
div(class="card-main",on:click=handle_display_div){
|
||||
img(src=coverurl,width="100")
|
||||
@@ -774,7 +804,8 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
|
||||
|
||||
div(class="card-buttons"){
|
||||
|
||||
button(class="info", on:click=handle_display){ "INFO+" }
|
||||
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_display){ i(class="fa-solid fa-circle-info") }
|
||||
|
||||
}
|
||||
div(class="card-main", on:click=handle_display_div){
|
||||
img(src=coverurl,width="100")
|
||||
@@ -863,7 +894,8 @@ pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
|
||||
view! { cx,
|
||||
div(class="column"){
|
||||
div(class="card-openlibrary",on:click=handle_add_div){
|
||||
button(class="add", on:click=handle_add){ "ADD+" }
|
||||
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"){
|
||||
img(src=coverurl,width="100")
|
||||
|
||||
@@ -1042,8 +1074,8 @@ info!("Adding book");
|
||||
view!{ cx,
|
||||
div(class="modal-content"){
|
||||
div(class="input-buttons"){
|
||||
button(class="add", on:click=handle_add){ "Add/Update book to DB" }
|
||||
button(class="cancel", 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_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_cancel){ "Cancel" }
|
||||
}
|
||||
p {
|
||||
div(class="input-field"){
|
||||
@@ -1231,9 +1263,11 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
|
||||
|
||||
div(class="more-info"){
|
||||
div(class="more-info-buttons"){
|
||||
button(class="close", on:click=handle_close){ "CLOSE" }
|
||||
|
||||
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 {
|
||||
view!{ cx,button(class="close", on:click=handle_edit){ "EDIT" }}
|
||||
view!{ cx,
|
||||
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_edit){ i(class="fa-solid fa-pen-to-square") }}
|
||||
} else {
|
||||
view!{cx, ""}
|
||||
})
|
||||
@@ -1327,19 +1361,21 @@ async fn PageBar<G: Html>(cx: Scope<'_>) -> View<G> {
|
||||
}
|
||||
};
|
||||
view! {cx,
|
||||
div {
|
||||
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() {
|
||||
view!{ cx,
|
||||
label{"PAGE "}
|
||||
input(ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input")
|
||||
label{(format!(" / {}",*app_state.maxpage.get()))}
|
||||
div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center"){
|
||||
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")
|
||||
label(class="block-inline"){(format!(" / {}",*app_state.maxpage.get()))}
|
||||
}
|
||||
(if *app_state.pagenum.get()>1 {
|
||||
view!{cx, button(class="page", on:click=handle_sub){ "-" }}
|
||||
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){ "-" }}
|
||||
} else {
|
||||
view!{cx,""}
|
||||
})
|
||||
(if *app_state.pagenum.get()<*app_state.maxpage.get() {
|
||||
view!{cx, button(class="page", on:click=handle_add){ "+" }}
|
||||
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){ "+" }}
|
||||
} else {
|
||||
view!{cx,""}
|
||||
})
|
||||
@@ -1489,17 +1525,19 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
|
||||
|
||||
(if *app_state.userscreen.get() == true {
|
||||
view!{cx,
|
||||
div(class="modal-content"){
|
||||
label{"User name : "}
|
||||
input(ref=input_refU,bind:value=userval)
|
||||
div(class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"){
|
||||
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")
|
||||
br{}
|
||||
label{"Password : "}
|
||||
input(ref=input_refP,bind:value=passval,type="password",
|
||||
on:keyup=handle_submit_login)
|
||||
label{"Password : "}
|
||||
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")
|
||||
br{}
|
||||
button(on:click=handle_login){ "LOGIN" }
|
||||
button(on:click=handle_register){ "REGISTER" }
|
||||
button(class="close", on:click=handle_close){ "CLOSE" }
|
||||
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" }
|
||||
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") }
|
||||
br{}
|
||||
(if *app_state.warningmsg.get() != "".to_string() {
|
||||
view!{cx, (*app_state.warningmsg.get())}
|
||||
@@ -1545,7 +1583,7 @@ fn App<G: Html>(cx: Scope) -> View<G> {
|
||||
loggedusername: create_rc_signal(String::new()),
|
||||
useridloggedin: create_rc_signal(0),
|
||||
userscreen: create_rc_signal(bool::default()),
|
||||
loggedin: create_rc_signal(bool::default()),
|
||||
loggedin: create_rc_signal(true),
|
||||
editmode: create_rc_signal(bool::default()),
|
||||
dropdownselect: create_rc_signal(bool::default()),
|
||||
scrolling: create_rc_signal(bool::default()),
|
||||
@@ -1559,7 +1597,7 @@ fn App<G: Html>(cx: Scope) -> View<G> {
|
||||
cx,
|
||||
div {
|
||||
Header {}
|
||||
div(class="main"){
|
||||
main(class="relative"){
|
||||
LoginScreenUI{}
|
||||
AddingUI{}
|
||||
SelectedUI{}
|
||||
|
||||
@@ -6,6 +6,8 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user