Merge branch 'ft/integrate-daisy-ui'

Made username carry over between modals too

.github/workflows/github-actions-demo.yml

@@ -40,6 +40,8 @@ jobs:
         run: npm install -g sass
       - name: Install tailwindcss via npm
         run: npm install -D tailwindcss
+      - name: Install daisy ui via npm
+        run: npm i -D daisyui@latest
       - name: Compile css
         run: npm run build
         # TODO -> Remove wasm-opt-version once perseus is updated

README.md

@@ -16,11 +16,17 @@ Run `curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh`
 https://nodejs.org/en
 (todo look into:)
 https://pnpm.io/
+`npm i -D daisyui@latest`
 
 ### Unix based systems:
 
 `sudo apt install nodejs`
 `sudo apt install npm`
+`npm i -D daisyui@latest`
+
+For easy UI see:
+
+https://daisyui.com/components/button/
 
 ## 3. Install Perseus, for real-time updates while developing
 

package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "daisyui": "^4.12.10",
     "tailwindcss": "^3.4.10"
   }
 }

src/capsules/forgot_password_form.rs

@@ -4,12 +4,18 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::{
+    components::{
+        static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+    },
+    global_state::AppStateRx,
+};
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
             state_enums::{ OpenState},
             templates::get_api_path,
-            global_state::{AppStateRx},
             endpoints::FORGOT_PASSWORD,
             models::{
                 auth::ForgotPasswordRequest,
@@ -52,6 +58,13 @@ fn forgot_password_form_capsule<G: Html>(
     state: &ForgotPasswordFormStateRx,
     _props: ForgotPasswordFormProps,
 ) -> 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| {
         #[cfg(client)]
         {
@@ -103,42 +116,26 @@ fn forgot_password_form_capsule<G: Html>(
     };
 
     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"}
 
-                        (match state.error.get().as_ref() != "" {
+                // Add component for handling error messages
-                            true => { view!{cx,
+                ErrorBlock(error = state.error.clone())
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
 
-                        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"}
                 }
             }
         }

src/capsules/login_form.rs

@@ -4,11 +4,17 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::{
+    components::{
+        static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+    },
+    global_state::AppStateRx,
+};
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
             endpoints::LOGIN,
-            global_state::{AppStateRx},
             models::auth::{LoginInfo, LoginResponse, WebAuthInfo},
             models::generic::GenericResponse,
             state_enums::{OpenState},
@@ -52,11 +58,19 @@ fn login_form_capsule<G: Html>(
     state: &LoginFormStateRx,
     props: LoginFormProps,
 ) -> 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| {
         #[cfg(client)]
         {
             spawn_local_scoped(cx, async move {
                 let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+                state.reset();
                 global_state.modals_open.login.set(OpenState::Closed)
             });
         }
@@ -67,23 +81,19 @@ fn login_form_capsule<G: Html>(
         {
             spawn_local_scoped(cx, async move {
                 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
                     .modals_open
                     .forgot_password
                     .set(OpenState::Open);
-                // Close modal
-                state.reset();
-                global_state.modals_open.login.set(OpenState::Closed);
-            });
-        }
-    };
 
-    let handle_register = move |_event: Event| {
-        #[cfg(client)]
-        {
-            spawn_local_scoped(cx, async move {
-                let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
-                global_state.modals_open.register.set(OpenState::Open);
                 // Close modal
                 state.reset();
                 global_state.modals_open.login.set(OpenState::Closed);
@@ -117,7 +127,6 @@ fn login_form_capsule<G: Html>(
                 if response.status() != StatusCode::OK {
                     let response = response.json::<GenericResponse>().await.unwrap();
                     state.error.set(response.status.to_string());
-                    state.reset();
                     return;
                 }
 
@@ -139,60 +148,44 @@ fn login_form_capsule<G: Html>(
     };
 
     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"){"Sign in"}
-                        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"){"Sign in"}
 
-                        (match state.error.get().as_ref() != "" {
+                // Add component for handling error messages
-                            true => { view!{cx,
+                ErrorBlock(error = state.error.clone())
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
 
-                        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")
-                        }
+
-                        div (class="flex justify-between"){
+                // Remember me button and forget password button
+                div (class="flex justify-between items-center mt-1"){
+                    // Remember me button
                     (match props.remember_me {
                         true => { view!{ cx,
-                                    div (class="flex items-start"){
+                            div (class = "flex items-start  form-control") {
-                                        div (class="flex items-center h-5"){
+                                label (class = "label cursor-pointer") {
-                                            input (bind:checked = state.remember_me, type = "checkbox", class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600") {}
+                                    span (class = "label-text mr-4") { "Remember me" }
-                                        }
+                                    input (bind:checked = state.remember_me, type = "checkbox", class = "checkbox")
-                                        div (class="text-sm ml-3"){
-                                            label (class="font-medium text-gray-900 dark:text-gray-300"){"Remember me"}
                                 }
                             }
                         }},
                         false => view!{cx, },
                     })
-                            button (on:click = handle_forgot_password, class="text-sm text-blue-700 hover:underline dark:text-blue-500"){"Lost Password?"}
+                    // Forget password button
-                        }
+                    button (on:click = handle_forgot_password, class="flex  link link-primary"){"Lost Password?"}
-                        button (on:click = handle_log_in, 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"){"Log in"}
-                        div (class="text-sm font-medium text-gray-500 dark:text-gray-300"){
-                            button (on:click = handle_register, class="text-blue-700 hover:underline dark:text-blue-500"){"Create account"}
-                        }
                 }
+
+                // Log in button
+                div (class = "flex justify-center") {
+                    button (on:click = handle_log_in, class="btn"){"Log in"}
                 }
             }
         }

src/capsules/register_form.rs

@@ -4,6 +4,10 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::components::{
+    static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+};
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
@@ -102,9 +106,14 @@ fn register_form_capsule<G: Html>(
                     return;
                 }
 
+                // Update tentative username
+                global_state
+                    .auth
+                    .username
+                    .set(Some((*state.username.get()).clone()));
+
                 // Open login modal
                 global_state.modals_open.login.set(OpenState::Open);
-                state.reset();
 
                 // Close modal
                 state.reset();
@@ -114,69 +123,48 @@ fn register_form_capsule<G: Html>(
     };
 
     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
+                ErrorBlock(error = state.error.clone())
 
-                        (match state.error.get().as_ref() != "" {
+                // Username field
-                            true => { view!{cx,
+                div (class = "label") { span (class = "label-text") { "Username" } }
-                                div (role="alert") {
+                input (bind:value = state.username, class = "input input-bordered w-full")
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
+
-                                        "Error"
+                // Password field
-                                    }
+                div (class = "label") { span (class = "label-text") { "Password" } }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
+                input (bind:value = state.password, type = "password", class = "input input-bordered w-full")
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
 
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"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") {}
-                        }
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"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"){}
-                        }
                 (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,}},
                 })
                 (match props.nickname {
-                            true => { view!{cx,
+                    true => { view! {cx,
-                                div {
+                        div (class = "label") { span (class = "label-text") { "Nickname (Optional)" } }
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Nickname (optional)"}
+                        input (bind:value = state.nickname, class = "input input-bordered w-full")
-                                    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"){}
-                                }
                     }},
                     false => {view!{cx,}},
                 })
                 (match props.email {
-                            true => { view!{cx,
+                    true => { view! {cx,
-                                div {
+                        div (class = "label") { span (class = "label-text") { "Email (Optional)" } }
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Email (optional)"}
+                        input (bind:value = state.email, class = "input input-bordered w-full")
-                                    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"){}
-                                }
                     }},
                     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"}
+
-                    }
+                // Register button
+                div (class = "flex justify-center") {
+                    button (on:click = handle_register, class="btn"){"Register"}
                 }
             }
         }

src/components/mod.rs

@@ -1,2 +1,4 @@
 mod header;
 pub mod layout;
+pub mod static_components;
+pub mod sub_components;

src/components/static_components/close_button.rs

@@ -0,0 +1,21 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn CloseButtonSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns = "http://www.w3.org/2000/svg",
+            class = "h-6 w-6 stroke-primary",
+            fill = "none",
+            viewBox = "0 0 24 24",
+        ) {
+            path (
+               stroke-linecap = "round",
+               stroke-linejoin = "round",
+               stroke-width = "2",
+               d = "M6 18L18 6M6 6l12 12"
+            ){}
+        }
+    }
+}

src/components/static_components/indicator.rs

@@ -0,0 +1,22 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn ErrorSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns="http://www.w3.org/2000/svg",
+            class="h-6 w-6 shrink-0 stroke-current",
+            fill="none",
+            viewBox="0 0 24 24",
+        )
+        {
+            path (
+                stroke-linecap="round",
+                stroke-linejoin="round",
+                stroke-width="2",
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
+            ){}
+        }
+    }
+}

src/components/static_components/mod.rs

@@ -0,0 +1,2 @@
+pub mod close_button;
+pub mod indicator;

src/components/sub_components/error_block.rs

@@ -0,0 +1,25 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+use crate::components::static_components::indicator::ErrorSvg;
+
+#[component(inline_props)]
+pub fn ErrorBlock<'a, G: Html>(cx: Scope<'a>, error: RcSignal<String>) -> View<G> {
+    let error = create_ref(cx, error);
+    let is_empty = create_selector(cx, || error.get().is_empty());
+
+    view! { cx,
+        (match !(*is_empty.get()) {
+            true => { view!{cx,
+                div (role="alert", class="alert alert-error") {
+                    // Error icon
+                    ErrorSvg {}
+
+                    // Error text
+                    span {(*error.get())}
+                }
+            }},
+            false => {view!{cx,}},
+        })
+    }
+}

src/components/sub_components/mod.rs

@@ -0,0 +1 @@
+pub mod error_block;

src/main.rs

@@ -70,10 +70,10 @@ pub fn main<G: Html>() -> PerseusApp<G> {
 
     PerseusApp::new()
         .global_state_creator(crate::global_state::get_global_state_creator())
-        .template(crate::templates::index::get_template())
+        .template(crate::templates::pool::index::get_template())
-        .template(crate::templates::add_game_form::get_template())
+        .template(crate::templates::pool::add_game_form::get_template())
-        .template(crate::templates::one_v_one_board::get_template())
+        .template(crate::templates::pool::one_v_one_board::get_template())
-        .template(crate::templates::overall_board::get_template())
+        .template(crate::templates::pool::overall_board::get_template())
         .capsule_ref(&*crate::capsules::login_form::LOGIN_FORM)
         .capsule_ref(&*crate::capsules::forgot_password_form::FORGOT_PASSWORD_FORM)
         .capsule_ref(&*crate::capsules::register_form::REGISTER_FORM)

src/templates/global_state.rs

@@ -1,66 +0,0 @@
-// Not a page, global state that is shared between all pages
-
-use perseus::{prelude::*, state::GlobalStateCreator};
-use serde::{Deserialize, Serialize};
-
-use crate::{
-    models::auth::Claims,
-    state_enums::{LoginState, OpenState},
-};
-
-#[derive(Serialize, Deserialize, ReactiveState, Clone)]
-#[rx(alias = "AppStateRx")]
-pub struct AppState {
-    #[rx(nested)]
-    pub auth: AuthData,
-    #[rx(nested)]
-    pub modals_open: ModalOpenData,
-}
-
-#[derive(Serialize, Deserialize, ReactiveState, Clone)]
-#[rx(alias = "AuthDataRx")]
-pub struct AuthData {
-    pub state: LoginState,
-    pub username: Option<String>,
-    pub claims: Claims,
-}
-
-#[derive(Serialize, Deserialize, ReactiveState, Clone)]
-#[rx(alias = "ModalOpenDataRx")]
-pub struct ModalOpenData {
-    pub login: OpenState,
-}
-
-pub fn get_global_state_creator() -> GlobalStateCreator {
-    GlobalStateCreator::new().build_state_fn(get_build_state)
-}
-
-#[engine_only_fn]
-pub async fn get_build_state() -> AppState {
-    AppState {
-        auth: AuthData {
-            state: LoginState::Unknown,
-            username: None,
-            claims: Claims {
-                sub: "".to_owned(),
-                exp: 0,
-            },
-        },
-        modals_open: ModalOpenData {
-            login: OpenState::Closed,
-        },
-    }
-}
-
-// Client only code to check if they're authenticated
-#[cfg(client)]
-impl AuthDataRx {
-    pub fn detect_state(&self) {
-        // If the user is in a known state, return
-        if let LoginState::Authenticated | LoginState::NotAuthenticated = *self.state.get() {
-            return;
-        }
-        // TODO -> Get state from storage
-        self.state.set(LoginState::NotAuthenticated);
-    }
-}

src/templates/mod.rs

@@ -1,14 +1,21 @@
-pub mod add_game_form;
+pub mod pickleball;
-pub mod index;
+pub mod pool;
-pub mod one_v_one_board;
+pub mod table_tennis;
-pub mod overall_board;
+pub mod user;
 
 #[cfg(client)]
 use perseus::utils::get_path_prefix_client;
 
 #[cfg(client)]
 pub fn get_api_path(path: &str) -> String {
+    #[cfg(engine)]
+    {
+        path.to_string()
+    }
+    #[cfg(client)]
+    {
         let origin = web_sys::window().unwrap().origin();
         let base_path = get_path_prefix_client();
         format!("{}{}{}", origin, base_path, path)
+    }
 }

src/templates/pool/mod.rs

@@ -0,0 +1,4 @@
+pub mod add_game_form;
+pub mod index;
+pub mod one_v_one_board;
+pub mod overall_board;

tailwind.config.js

@@ -1,3 +1,5 @@
+const { default: daisyui } = require("daisyui");
+
 module.exports = {
   purge: {
     mode: "all",
@@ -10,5 +12,8 @@ module.exports = {
   },
   theme: {},
   variants: {},
-  plugins: [],
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light"],
+  },
 };