vsquad/elo
3
2
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Updated remaining modals to daisyui
Some checks failed
Build Crate / build (push) Failing after 1m47s
Details

Browse Source 
Made username carry over between modals too
This commit is contained in:
Matthew Kaminski
2024-08-30 02:16:15 -04:00
parent d82a5e2c65
commit a288a35225
3 changed files with 100 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/capsules/forgot_password_form.rs
View File

@@ -4,14 +4,18 @@ use serde::{Deserialize, Serialize};
use sycamore::prelude::*; use sycamore::prelude::*;
use web_sys::Event; use web_sys::Event;
use crate::components::sub_components::error_block::ErrorBlock; use crate::{
components::{
static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
},
global_state::AppStateRx,
};
cfg_if::cfg_if! { cfg_if::cfg_if! {
if #[cfg(client)] { if #[cfg(client)] {
use crate::{ use crate::{
state_enums::{ OpenState}, state_enums::{ OpenState},
templates::get_api_path, templates::get_api_path,
global_state::{AppStateRx},
endpoints::FORGOT_PASSWORD, endpoints::FORGOT_PASSWORD,
models::{ models::{
auth::ForgotPasswordRequest, auth::ForgotPasswordRequest,
@@ -54,6 +58,13 @@ fn forgot_password_form_capsule<G: Html>(
state: &ForgotPasswordFormStateRx, state: &ForgotPasswordFormStateRx,
_props: ForgotPasswordFormProps, _props: ForgotPasswordFormProps,
) -> View<G> { ) -> View<G> {
// If there's a tentative username, set it
let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
if let Some(username) = (*global_state.auth.username.get()).clone() {
state.username.set(username);
global_state.auth.username.set(None);
}
let close_modal = move |_event: Event| { let close_modal = move |_event: Event| {
#[cfg(client)] #[cfg(client)]
{ {
@@ -105,31 +116,26 @@ fn forgot_password_form_capsule<G: Html>(
}; };
view! { cx, view! { cx,
div (class="overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center"){ dialog (class="modal-open modal modal-bottom sm:modal-middle animate-none") {
div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") { div (class="modal-box"){
div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){ // Header row - title and close button
div (class="flex justify-end p-2"){ h3 (class="text-lg font-bold mb-4 text-center"){"Forgot Password"}
button (on:click = close_modal, class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"){ button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
"Close"
}
}
div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Forgot Password"}
// Add component for handling error messages // Add component for handling error messages
ErrorBlock(error = state.error.clone()) ErrorBlock(error = state.error.clone())
div { // Username field
label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"} div (class = "label") { span (class = "label-text") { "Username" } }
input (bind:value = state.username, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white") {} input (bind:value = state.username, class = "input input-bordered w-full")
}
div {
label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Contact Info"}
input (bind:value = state.how_to_reach, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){}
}
button (on:click = handle_submit, class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"){"Submit"} // Password field
} div (class = "label") { span (class = "label-text") { "Contact Info" } }
input (bind:value = state.how_to_reach, class = "input input-bordered w-full")
// Submit button
div (class = "flex justify-center") {
button (on:click = handle_submit, class="btn"){"Submit"}
} }
} }
} }

24
src/capsules/login_form.rs
View File

@@ -4,15 +4,17 @@ use serde::{Deserialize, Serialize};
use sycamore::prelude::*; use sycamore::prelude::*;
use web_sys::Event; use web_sys::Event;
use crate::components::{ use crate::{
static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock, components::{
static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
},
global_state::AppStateRx,
}; };
cfg_if::cfg_if! { cfg_if::cfg_if! {
if #[cfg(client)] { if #[cfg(client)] {
use crate::{ use crate::{
endpoints::LOGIN, endpoints::LOGIN,
global_state::{AppStateRx},
models::auth::{LoginInfo, LoginResponse, WebAuthInfo}, models::auth::{LoginInfo, LoginResponse, WebAuthInfo},
models::generic::GenericResponse, models::generic::GenericResponse,
state_enums::{OpenState}, state_enums::{OpenState},
@@ -56,6 +58,13 @@ fn login_form_capsule<G: Html>(
state: &LoginFormStateRx, state: &LoginFormStateRx,
props: LoginFormProps, props: LoginFormProps,
) -> View<G> { ) -> View<G> {
// If there's a tentative username, set it
let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
if let Some(username) = (*global_state.auth.username.get()).clone() {
state.username.set(username);
global_state.auth.username.set(None);
}
let close_modal = move |_event: Event| { let close_modal = move |_event: Event| {
#[cfg(client)] #[cfg(client)]
{ {
@@ -72,10 +81,19 @@ fn login_form_capsule<G: Html>(
{ {
spawn_local_scoped(cx, async move { spawn_local_scoped(cx, async move {
let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx); let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
// Update tentative username
global_state
.auth
.username
.set(Some((*state.username.get()).clone()));
// Open new modal
global_state global_state
.modals_open .modals_open
.forgot_password .forgot_password
.set(OpenState::Open); .set(OpenState::Open);
// Close modal // Close modal
state.reset(); state.reset();
global_state.modals_open.login.set(OpenState::Closed); global_state.modals_open.login.set(OpenState::Closed);

100
src/capsules/register_form.rs
View File

@@ -4,7 +4,9 @@ use serde::{Deserialize, Serialize};
use sycamore::prelude::*; use sycamore::prelude::*;
use web_sys::Event; use web_sys::Event;
use crate::components::sub_components::error_block::ErrorBlock; use crate::components::{
static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
};
cfg_if::cfg_if! { cfg_if::cfg_if! {
if #[cfg(client)] { if #[cfg(client)] {
@@ -104,9 +106,14 @@ fn register_form_capsule<G: Html>(
return; return;
} }
// Update tentative username
global_state
.auth
.username
.set(Some((*state.username.get()).clone()));
// Open login modal // Open login modal
global_state.modals_open.login.set(OpenState::Open); global_state.modals_open.login.set(OpenState::Open);
state.reset();
// Close modal // Close modal
state.reset(); state.reset();
@@ -116,57 +123,48 @@ fn register_form_capsule<G: Html>(
}; };
view! { cx, view! { cx,
div (class="overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center"){ dialog (class="modal-open modal modal-bottom sm:modal-middle"){
div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") { div (class="modal-box") {
div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){ // Header row - title and close button
div (class="flex justify-end p-2"){ h3 (class="text-lg font-bold mb-4 text-center"){"Register"}
button (on:click = close_modal, class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"){ button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
"Close"
}
}
div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Register"}
// Add component for handling error messages // Add component for handling error messages
ErrorBlock(error = state.error.clone()) ErrorBlock(error = state.error.clone())
div { // Username field
label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"} div (class = "label") { span (class = "label-text") { "Username" } }
input (bind:value = state.username, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white") {} input (bind:value = state.username, class = "input input-bordered w-full")
}
div { // Password field
label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Password"} div (class = "label") { span (class = "label-text") { "Password" } }
input (bind:value = state.password, type = "password", class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){} input (bind:value = state.password, type = "password", class = "input input-bordered w-full")
}
(match props.registration_code { (match props.registration_code {
true => { view!{cx, true => { view! {cx,
div { div (class = "label") { span (class = "label-text") { "Registration Code" } }
label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Registration code"} input (bind:value = state.registration_code, class = "input input-bordered w-full")
input (bind:value = state.registration_code, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){} }},
} false => {view!{cx,}},
}}, })
false => {view!{cx,}}, (match props.nickname {
}) true => { view! {cx,
(match props.nickname { div (class = "label") { span (class = "label-text") { "Nickname (Optional)" } }
true => { view!{cx, input (bind:value = state.nickname, class = "input input-bordered w-full")
div { }},
label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Nickname (optional)"} false => {view!{cx,}},
input (bind:value = state.nickname, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){} })
} (match props.email {
}}, true => { view! {cx,
false => {view!{cx,}}, div (class = "label") { span (class = "label-text") { "Email (Optional)" } }
}) input (bind:value = state.email, class = "input input-bordered w-full")
(match props.email { }},
true => { view!{cx, false => {view!{cx,}},
div { })
label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Email (optional)"}
input (bind:value = state.email, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){} // Register button
} div (class = "flex justify-center") {
}}, button (on:click = handle_register, class="btn"){"Register"}
false => {view!{cx,}},
})
button (on:click = handle_register, class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"){"Register"}
}
} }
} }
} }