Add themes, update layout, fix pages

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,14 +4,26 @@ 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::{self, AppStateRx},
+            templates::get_api_path,
+            endpoints::FORGOT_PASSWORD,
+            models::{
+                auth::ForgotPasswordRequest,
+                generic::GenericResponse,
+            },
         };
         use reqwest::StatusCode;
+
     }
 }
 
@@ -25,6 +37,7 @@ lazy_static! {
 struct ForgotPasswordFormState {
     username: String,
     how_to_reach: String,
+    error: String,
 }
 
 impl ForgotPasswordFormStateRx {
@@ -32,6 +45,7 @@ impl ForgotPasswordFormStateRx {
     fn reset(&self) {
         self.username.set(String::new());
         self.how_to_reach.set(String::new());
+        self.error.set(String::new());
     }
 }
 
@@ -44,12 +58,18 @@ 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);
+    state
+        .username
+        .set((*global_state.auth.pending_username.get()).clone());
+    global_state.auth.pending_username.set(String::new());
+
     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);
-
                 // Close modal
                 state.reset();
                 global_state
@@ -63,6 +83,26 @@ fn forgot_password_form_capsule<G: Html>(
         #[cfg(client)]
         {
             spawn_local_scoped(cx, async move {
+                let request = ForgotPasswordRequest {
+                    username: state.username.get().as_ref().clone(),
+                    contact_info: state.how_to_reach.get().as_ref().clone(),
+                };
+
+                // // @todo clean up error handling
+                let client = reqwest::Client::new();
+                let response = client
+                    .post(get_api_path(FORGOT_PASSWORD).as_str())
+                    .json(&request)
+                    .send()
+                    .await
+                    .unwrap();
+                let status = response.status();
+                let response_data = response.json::<GenericResponse>().await.unwrap();
+                if status != StatusCode::OK {
+                    state.error.set(response_data.status);
+                    return;
+                }
+
                 let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
                 // Close modal
@@ -76,27 +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"){
-            div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") {
-                div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){
-                    div (class="flex justify-end p-2"){
-                        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"){
-                            "Back"
-                        }
-                    }
-                    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"}
-                        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"){"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"){}
-                        }
+        dialog (class="modal-open modal modal-bottom sm:modal-middle animate-none") {
+            div (class="modal-box"){
+                // Header row - title and close button
+                h3 (class="text-lg font-bold mb-4 text-center"){"Forgot Password"}
+                button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
 
-                        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"}
-                    }
+                // Add component for handling error messages
+                ErrorBlock(error = state.error.clone())
+
+                // Username field
+                div (class = "label") { span (class = "label-text") { "Username" } }
+                input (bind:value = state.username, class = "input input-bordered w-full")
+
+                // 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 mt-6") {
+                    button (on:click = handle_submit, class="btn"){"Submit"}
                 }
             }
         }
@@ -113,7 +152,8 @@ pub fn get_capsule<G: Html>() -> Capsule<G, ForgotPasswordFormProps> {
 #[engine_only_fn]
 async fn get_build_state(_info: StateGeneratorInfo<()>) -> ForgotPasswordFormState {
     ForgotPasswordFormState {
-        username: "".to_owned(),
-        how_to_reach: "".to_owned(),
+        username: String::new(),
+        how_to_reach: String::new(),
+        error: String::new(),
     }
 }

src/capsules/login_form.rs

@@ -4,15 +4,21 @@ 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::{
-            models::auth::{LoginInfo, LoginResponse},
             endpoints::LOGIN,
-            state_enums::{LoginState, OpenState},
-            templates::{get_api_path},
-            global_state::{self, AppStateRx},
-            models::auth::WebAuthInfo,
+            models::auth::{LoginInfo, LoginResponse, WebAuthInfo},
+            models::generic::GenericResponse,
+            state_enums::{OpenState},
+            templates::get_api_path,
         };
         use reqwest::StatusCode;
     }
@@ -28,6 +34,7 @@ struct LoginFormState {
     username: String,
     password: String,
     remember_me: bool,
+    error: String,
 }
 
 impl LoginFormStateRx {
@@ -36,6 +43,7 @@ impl LoginFormStateRx {
         self.username.set(String::new());
         self.password.set(String::new());
         self.remember_me.set(false);
+        self.error.set(String::new());
     }
 }
 
@@ -50,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);
+    state
+        .username
+        .set((*global_state.auth.pending_username.get()).clone());
+    global_state.auth.pending_username.set(String::new());
+
     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)
             });
         }
@@ -65,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
+                    .pending_username
+                    .set((*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);
@@ -93,7 +105,7 @@ fn login_form_capsule<G: Html>(
         #[cfg(client)]
         {
             spawn_local_scoped(cx, async move {
-                let remember_me = state.remember_me.get().as_ref().clone();
+                let remember_me = *state.remember_me.get().as_ref();
                 let username = state.username.get().as_ref().clone();
                 let login_info = LoginInfo {
                     username: username.clone(),
@@ -113,8 +125,8 @@ fn login_form_capsule<G: Html>(
                 let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
                 if response.status() != StatusCode::OK {
-                    // todo update to some type of alert
-                    state.username.set(response.status().to_string());
+                    let response = response.json::<GenericResponse>().await.unwrap();
+                    state.error.set(response.status.to_string());
                     return;
                 }
 
@@ -136,45 +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"){
-            div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") {
-                div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){
-                    div (class="flex justify-end p-2"){
-                        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"){
-                            "Back"
-                        }
-                    }
-                    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"}
-                        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"){}
-                        }
-                        div (class="flex justify-between"){
+        dialog (class="modal-open modal modal-bottom sm:modal-middle") {
+            div (class="modal-box"){
+                // Header row - title and close button
+                h3 (class="text-lg font-bold mb-4 text-center"){"Sign in"}
+                button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
+
+                // Add component for handling error messages
+                ErrorBlock(error = state.error.clone())
+
+                // Username field
+                div (class = "label") { span (class = "label-text") { "Username" } }
+                input (bind:value = state.username, class = "input input-bordered w-full")
+
+                // Password field
+                div (class = "label") { span (class = "label-text") { "Password" } }
+                input (bind:value = state.password, type = "password", class = "input input-bordered w-full")
+
+                // 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-center h-5"){
-                                            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") {}
-                                        }
-                                        div (class="text-sm ml-3"){
-                                            label (class="font-medium text-gray-900 dark:text-gray-300"){"Remember me"}
+                            div (class = "flex items-start  form-control") {
+                                label (class = "label cursor-pointer") {
+                                    span (class = "label-text mr-4") { "Remember me" }
+                                    input (bind:checked = state.remember_me, type = "checkbox", class = "checkbox")
                                 }
                             }
                         }},
                         false => view!{cx, },
                     })
-                            button (on:click = handle_forgot_password, class="text-sm text-blue-700 hover:underline dark:text-blue-500"){"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"}
-                        }
+                    // Forget password button
+                    button (on:click = handle_forgot_password, class="flex  link link-primary"){"Lost Password?"}
                 }
+
+                // Log in button
+                div (class = "flex justify-center") {
+                    button (on:click = handle_log_in, class="btn"){"Log in"}
                 }
             }
         }
@@ -191,8 +202,9 @@ pub fn get_capsule<G: Html>() -> Capsule<G, LoginFormProps> {
 #[engine_only_fn]
 async fn get_build_state(_info: StateGeneratorInfo<()>) -> LoginFormState {
     LoginFormState {
-        username: "".to_owned(),
-        password: "".to_owned(),
+        username: String::new(),
+        password: String::new(),
         remember_me: false,
+        error: String::new(),
     }
 }

src/capsules/register_form.rs

@@ -4,15 +4,21 @@ 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::{
             models::auth::{RegisterRequest},
             endpoints::REGISTER,
-            state_enums::{LoginState, OpenState},
-            templates::{get_api_path},
-            global_state::{self, AppStateRx},
-            models::auth::WebAuthInfo,
+            state_enums::OpenState,
+            templates::get_api_path,
+            global_state::AppStateRx,
+            models::{
+                generic::GenericResponse
+            },
         };
         use reqwest::StatusCode;
     }
@@ -30,6 +36,7 @@ struct RegisterFormState {
     nickname: String,
     registration_code: String,
     email: String,
+    error: String,
 }
 
 impl RegisterFormStateRx {
@@ -40,6 +47,7 @@ impl RegisterFormStateRx {
         self.nickname.set(String::new());
         self.registration_code.set(String::new());
         self.email.set(String::new());
+        self.error.set(String::new());
     }
 }
 
@@ -90,16 +98,22 @@ fn register_form_capsule<G: Html>(
                     .unwrap();
 
                 let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
-
-                if response.status() != StatusCode::OK {
+                let status = response.status();
+                let response_data = response.json::<GenericResponse>().await.unwrap();
+                if status != StatusCode::OK {
                     // todo update to some type of alert
-                    state.username.set(response.status().to_string());
+                    state.error.set(response_data.status);
                     return;
                 }
 
+                // Update tentative username
+                global_state
+                    .auth
+                    .pending_username
+                    .set((*state.username.get()).clone());
+
                 // Open login modal
                 global_state.modals_open.login.set(OpenState::Open);
-                state.reset();
 
                 // Close modal
                 state.reset();
@@ -109,53 +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"){
-            div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") {
-                div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){
-                    div (class="flex justify-end p-2"){
-                        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"){
-                            "Back"
-                        }
-                    }
-                    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"}
-                        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"){}
-                        }
+        dialog (class="modal-open modal modal-bottom sm:modal-middle"){
+            div (class="modal-box") {
+                // Header row - title and close button
+                h3 (class="text-lg font-bold mb-4 text-center"){"Register"}
+                button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
+
+                // Add component for handling error messages
+                ErrorBlock(error = state.error.clone())
+
+                // Username field
+                div (class = "label") { span (class = "label-text") { "Username" } }
+                input (bind:value = state.username, class = "input input-bordered w-full")
+
+                // Password field
+                div (class = "label") { span (class = "label-text") { "Password" } }
+                input (bind:value = state.password, type = "password", class = "input input-bordered w-full")
+
                 (match props.registration_code {
                     true => { view! {cx,
-                                div {
-                                    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="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 (class = "label") { span (class = "label-text") { "Registration Code" } }
+                        input (bind:value = state.registration_code, class = "input input-bordered w-full")
                     }},
                     false => {view!{cx,}},
                 })
                 (match props.nickname {
                     true => { view! {cx,
-                                div {
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Nickname (optional)"}
-                                    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"){}
-                                }
+                        div (class = "label") { span (class = "label-text") { "Nickname (Optional)" } }
+                        input (bind:value = state.nickname, class = "input input-bordered w-full")
                     }},
                     false => {view!{cx,}},
                 })
                 (match props.email {
                     true => { 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"){}
-                                }
+                        div (class = "label") { span (class = "label-text") { "Email (Optional)" } }
+                        input (bind:value = state.email, class = "input input-bordered w-full")
                     }},
                     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 mt-6") {
+                    button (on:click = handle_register, class="btn"){"Register"}
                 }
             }
         }
@@ -174,6 +183,7 @@ async fn get_build_state(_info: StateGeneratorInfo<()>) -> RegisterFormState {
     RegisterFormState {
         username: String::new(),
         password: String::new(),
+        error: String::new(),
         nickname: String::new(),
         registration_code: String::new(),
         email: String::new(),

src/components/header.rs

@@ -1,29 +1,98 @@
-use std::sync::Arc;
-
 use perseus::prelude::*;
 use sycamore::prelude::*;
 use web_sys::Event;
 
 use crate::{
-    capsules::{
-        forgot_password_form::{ForgotPasswordFormProps, FORGOT_PASSWORD_FORM},
-        login_form::{LoginFormProps, LOGIN_FORM},
-    },
-    endpoints::LOGIN,
+    components::static_components::menu_button::MenuButtonSvg,
     global_state::AppStateRx,
-    models::auth::LoginInfo,
-    state_enums::{GameState, LoginState, OpenState},
+    state_enums::{ContentState, LoginState},
 };
 
+cfg_if::cfg_if! {
+    if #[cfg(client)] {
+        use crate::{
+            state_enums::OpenState,
+        };
+    }
+}
+
 #[derive(Prop)]
-pub struct HeaderProps<'a> {
-    pub game: GameState,
-    pub title: &'a str,
+pub struct HeaderProps {
+    pub content_state: ContentState,
+}
+
+// TODO update to have user preferences
+#[component]
+fn LinkList<G: Html>(cx: Scope) -> View<G> {
+    // Get global state to get style info
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+
+    view! { cx,
+        li {
+            a (href = "pool") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.pool.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.pool.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Pool" }
+                }
+            }
+        }
+        li {
+            a (href = "table_tennis") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.table_tennis.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.table_tennis.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Table Tennis" }
+                }
+            }
+        }
+        li {
+            a (href = "pickleball") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.pickleball.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.pickleball.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Pickleball" }
+                }
+            }
+        }
+    }
 }
 
 #[component]
-pub fn Header<'a, G: Html>(cx: Scope<'a>, HeaderProps { game, title }: HeaderProps<'a>) -> View<G> {
-    // Get global state to get authentication info
+pub fn Header<G: Html>(cx: Scope, props: HeaderProps) -> View<G> {
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
     let handle_log_in = move |_event: Event| {
@@ -57,50 +126,46 @@ pub fn Header<'a, G: Html>(cx: Scope<'a>, HeaderProps { game, title }: HeaderPro
     };
 
     view! { cx,
-        header {
-            div (class = "flex items-center justify-between w-full md:text-center h-20") {
-                div(class = "flex-1") {}
-
+        header (class="navbar bg-base-100") {
+            // Navigation
+            div (class="navbar-start") {
+                div (class="dropdown") {
+                    div (tabindex="0", role="button", class="btn btn-ghost lg:hidden") { MenuButtonSvg {} }
+                    ul (tabindex = "0", class = "menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow" ) {
+                        LinkList {}
+                    }
+                }
+                ul (class="menu menu-horizontal px-1 hidden lg:flex") {
+                    LinkList {}
+                }
+            }
             // Title
-                div(class = "text-gray-700 text-2xl font-semibold py-2") {
-                    "Pool Elo - Season 1"
+            div (class="navbar-center lg:flex") {
+                (props.content_state.to_string())
             }
-
-                // Login / register or user buttons
-                div(class = "flex-1 py-2") {(
-                    match *global_state.auth.state.get() {
-                        LoginState::NotAuthenticated => {
-                            view! { cx,
-                                button(on:click = handle_register, class = "text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700") {
-                                    "Register"
-                                }
-                                button(on:click = handle_log_in, class = "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 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800") {
-                                    "Log in"
-                                }
-                            }
-                        }
-                        LoginState::Authenticated => {
-                            view! { cx,
-                                div {
-                                    "Hello "
-                                        (global_state.auth.username.get().as_ref().clone().unwrap_or("".to_owned()))
-                                }
-                                button(on:click = handle_log_out, class = "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 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800") {
+            // User buttons
+            div (class="navbar-end") {
+                (match *global_state.auth.state.get() {
+                    LoginState::Authenticated => { view! { cx,
+                        button(on:click = handle_log_out, class = "btn btn-primary mr-2") {
                             "Log out"
                         }
+                    } },
+                    LoginState::NotAuthenticated => { view! { cx,
+                        button(on:click = handle_register, class = "btn btn-primary mr-2") {
+                            "Register"
                         }
+                        button(on:click = handle_log_in, class = "btn btn-secondary mr-2") {
+                            "Log in"
                         }
-                        // Will only appear for a few seconds
-                        LoginState::Unknown => {
-                            view! { cx,
+                    } },
+                    LoginState::Unknown => { view! { cx,
                         div (class = "px-5 py-2.5 me-2 mb-2") {
                             "Loading..."
                         }
-                            }
-                        },
+                    } },
                 })
             }
         }
     }
 }
-}

src/components/layout.rs

@@ -4,18 +4,16 @@ use crate::{
         login_form::{LoginFormProps, LOGIN_FORM},
         register_form::{RegisterFormProps, REGISTER_FORM},
     },
-    components::header::{Header, HeaderProps},
+    components::header::Header,
     global_state::AppStateRx,
-    state_enums::{GameState, LoginState, OpenState},
+    state_enums::{ContentState, OpenState},
 };
 use perseus::prelude::*;
 use sycamore::prelude::*;
-use web_sys::Event;
 
 #[derive(Prop)]
 pub struct LayoutProps<'a, G: Html> {
-    pub game: GameState,
-    pub title: &'a str,
+    pub content_state: ContentState,
     pub children: Children<'a, G>,
 }
 
@@ -25,22 +23,38 @@ pub struct LayoutProps<'a, G: Html> {
 pub fn Layout<'a, G: Html>(
     cx: Scope<'a>,
     LayoutProps {
-        game,
-        title,
+        content_state,
         children,
     }: LayoutProps<'a, G>,
 ) -> View<G> {
-    let children = children.call(cx);
-
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+    // Set the theme
+    global_state.style.theme.current.set(match content_state {
+        ContentState::None => (*global_state.style.theme.default.get()).clone(),
+        ContentState::Pool => (*global_state.style.theme.pool.get()).clone(),
+        ContentState::Pickleball => (*global_state.style.theme.pickleball.get()).clone(),
+        ContentState::TableTennis => (*global_state.style.theme.table_tennis.get()).clone(),
+    });
+    #[cfg(client)]
+    let _ = web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .document_element()
+        .unwrap()
+        .set_attribute("data-theme", &global_state.style.theme.current.get());
+
+    let children = children.call(cx);
 
     // Check if the client is authenticated or not
     #[cfg(client)]
     global_state.auth.detect_state();
 
+    let content_state_header = content_state.clone();
+
     view! { cx,
         // Main page header, including login functionality
-        Header(game = game, title = title)
+        Header(content_state = content_state_header)
 
         // Modals
         section(class = "flex-2") {
@@ -89,24 +103,25 @@ pub fn Layout<'a, G: Html>(
         }
 
         main(style = "my-8") {
+            (match content_state {
+                ContentState::None => view!{ cx, },
+                ContentState::Pool => view!{ cx,
                     // Body header
-            div {
                     div (class = "container mx-auto px-6 py-3") {
                         nav (class = "sm:flex sm:justify-center sm:items-center mt-4 hidden") {
                             div (class = "flex flex-col sm:flex-row"){
-                            a(href = "add-game-form",
+                                a(href = "pool/add-game-form",
                                     class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
                                 ) { "Add game result" }
-                            a(href = "one-v-one-board",
+                                a(href = "pool/one-v-one-board",
                                     class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
                                 ) { "1v1 Leaderboard" }
-                            a(href = "overall-board",
+                                a(href = "pool/overall-board",
                                     class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
                                 ) { "Overall Leaderboard" }
                             }
                         }
                     }
-            }
                     // Content body
                     div(class = "container mx-auto px-6") {
                         div(class = "md:flex mt-8 md:-mx-4") {
@@ -115,6 +130,10 @@ pub fn Layout<'a, G: Html>(
                             }
                         }
                     }
+                },
+                ContentState::Pickleball => view!{ cx, },
+                ContentState::TableTennis => view!{ cx, },
+            })
         }
     }
 }

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/menu_button.rs

@@ -0,0 +1,20 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn MenuButtonSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns="http://www.w3.org/2000/svg",
+            class="h-5 w-5",
+            fill="none",
+            viewBox="0 0 24 24",
+            stroke="currentColor"){
+                path (
+                    stroke-linecap="round",
+                    stroke-linejoin="round",
+                    stroke-width="2",
+                    d="M4 6h16M4 12h8m-8 6h16") {}
+        }
+    }
+}

src/components/static_components/mod.rs

@@ -0,0 +1,3 @@
+pub mod close_button;
+pub mod indicator;
+pub mod menu_button;

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/endpoints.rs

@@ -1,4 +1,6 @@
 pub const REGISTER: &str = "/api/register";
 pub const LOGIN: &str = "/api/login";
+// TODO -> remove once it's used
+#[cfg(engine)]
 pub const LOGIN_TEST: &str = "/api/login-test";
 pub const FORGOT_PASSWORD: &str = "/api/forgot-password";

src/global_state.rs

@@ -4,16 +4,10 @@ use perseus::{prelude::*, state::GlobalStateCreator};
 use serde::{Deserialize, Serialize};
 
 use crate::{
-    models::auth::{Claims, WebAuthInfo},
+    models::auth::WebAuthInfo,
     state_enums::{LoginState, OpenState},
 };
 
-cfg_if::cfg_if! {
-    if #[cfg(engine)] {
-
-    }
-}
-
 #[derive(Serialize, Deserialize, ReactiveState, Clone)]
 #[rx(alias = "AppStateRx")]
 pub struct AppState {
@@ -21,18 +15,78 @@ pub struct AppState {
     pub auth: AuthData,
     #[rx(nested)]
     pub modals_open: ModalOpenData,
+    #[rx(nested)]
+    pub style: StyleData,
 }
 
 #[derive(Serialize, Deserialize, ReactiveState, Clone)]
 #[rx(alias = "AuthDataRx")]
 pub struct AuthData {
     pub state: LoginState,
+    pub pending_username: String,
     pub username: Option<String>,
     pub remember_me: Option<bool>,
     pub auth_info: Option<WebAuthInfo>,
 }
 
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "ModalOpenDataRx")]
+pub struct ModalOpenData {
+    pub login: OpenState,
+    pub register: OpenState,
+    pub forgot_password: OpenState,
+}
+
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "StyleDataRx")]
+pub struct StyleData {
+    #[rx(nested)]
+    pub theme: ThemeData,
+}
+
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "ThemeDataRx")]
+pub struct ThemeData {
+    pub current: String,
+    pub pool: String,
+    pub pickleball: String,
+    pub table_tennis: String,
+    pub default: String,
+}
+
+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,
+            pending_username: String::new(),
+            username: None,
+            remember_me: None,
+            auth_info: None,
+        },
+        modals_open: ModalOpenData {
+            login: OpenState::Closed,
+            register: OpenState::Closed,
+            forgot_password: OpenState::Closed,
+        },
+        style: StyleData {
+            theme: ThemeData {
+                current: "light".to_owned(),
+                pool: "autumn".to_owned(),
+                pickleball: "lemonade".to_owned(),
+                table_tennis: "nord".to_owned(),
+                default: "light".to_owned(),
+            },
+        },
+    }
+}
+
 impl AuthDataRx {
+    #[cfg(client)]
     pub fn handle_log_in(&self, auth_info: WebAuthInfo) {
         // Save new token to persistent storage
         if auth_info.remember_me {
@@ -52,11 +106,11 @@ impl AuthDataRx {
 
         // Save token to session storage
         self.username.set(Some(auth_info.username.clone()));
-        self.remember_me.set(Some(auth_info.remember_me.clone()));
+        self.remember_me.set(Some(auth_info.remember_me));
         self.auth_info.set(Some(auth_info));
         self.state.set(LoginState::Authenticated);
     }
-
+    #[cfg(client)]
     pub fn handle_log_out(&self) {
         // Delete persistent storage
         // TODO -> handle error if local storage is not readable in browser
@@ -77,35 +131,6 @@ impl AuthDataRx {
     }
 }
 
-#[derive(Serialize, Deserialize, ReactiveState, Clone)]
-#[rx(alias = "ModalOpenDataRx")]
-pub struct ModalOpenData {
-    pub login: OpenState,
-    pub register: OpenState,
-    pub forgot_password: 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,
-            remember_me: None,
-            auth_info: None,
-        },
-        modals_open: ModalOpenData {
-            login: OpenState::Closed,
-            register: OpenState::Closed,
-            forgot_password: OpenState::Closed,
-        },
-    }
-}
-
 // Client only code to check if they're authenticated
 #[cfg(client)]
 impl AuthDataRx {

src/main.rs

@@ -71,16 +71,19 @@ 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::add_game_form::get_template())
-        .template(crate::templates::one_v_one_board::get_template())
-        .template(crate::templates::overall_board::get_template())
+        .template(crate::templates::pickleball::index::get_template())
+        .template(crate::templates::pool::index::get_template())
+        .template(crate::templates::pool::add_game_form::get_template())
+        .template(crate::templates::pool::one_v_one_board::get_template())
+        .template(crate::templates::pool::overall_board::get_template())
+        .template(crate::templates::table_tennis::index::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)
         .error_views(crate::error_views::get_error_views())
         .index_view(|cx| {
             view! { cx,
-                html (class = "flex w-full h-full"){
+                html (class = "flex w-full h-full", data-theme = "light"){
                     head {
                         meta(charset = "UTF-8")
                         meta(name = "viewport", content = "width=device-width, initial-scale=1.0")

src/models/generic.rs

@@ -6,11 +6,13 @@ pub struct GenericResponse {
 }
 
 impl GenericResponse {
+    #[cfg(engine)]
     pub fn ok() -> Self {
         GenericResponse {
             status: String::new(),
         }
     }
+    #[cfg(engine)]
     pub fn err(msg: &str) -> Self {
         GenericResponse {
             status: msg.to_string(),

src/server/auth/forgot_password.rs

@@ -1,13 +1,40 @@
-use crate::{models::auth::ForgotPasswordRequest, server::server_state::ServerState};
+use crate::{
+    entity::{prelude::*, user},
+    models::{auth::ForgotPasswordRequest, generic::GenericResponse},
+    server::server_state::ServerState,
+};
 use axum::{
     extract::{Json, State},
-    http::{HeaderMap, StatusCode},
+    http::StatusCode,
 };
-use sea_orm::DatabaseConnection;
+use sea_orm::{ActiveModelTrait, ColumnTrait, EntityTrait, IntoActiveModel, QueryFilter, Set};
 
 pub async fn post_forgot_password(
     State(state): State<ServerState>,
     Json(password_request): Json<ForgotPasswordRequest>,
-) -> StatusCode {
-    StatusCode::OK
+) -> (StatusCode, Json<GenericResponse>) {
+    // Get user
+    let existing_user: Option<user::Model> = User::find()
+        .filter(user::Column::Username.eq(password_request.username))
+        .one(&state.db_conn)
+        .await
+        .unwrap();
+    match existing_user {
+        Some(user) => {
+            let mut user = user.into_active_model();
+            user.forgot_password_request = Set(Some(password_request.contact_info));
+            let user = user.update(&state.db_conn).await;
+            match user {
+                Ok(_) => (StatusCode::OK, Json(GenericResponse::ok())),
+                Err(_) => (
+                    StatusCode::BAD_REQUEST,
+                    Json(GenericResponse::err("Database error")),
+                ),
+            }
+        }
+        None => (
+            StatusCode::BAD_REQUEST,
+            Json(GenericResponse::err("Username doesn't exist")),
+        ),
+    }
 }

src/server/auth/login.rs

@@ -1,30 +1,27 @@
-use crate::entity::prelude::*;
-use crate::models::auth::{Claims, LoginInfo, LoginResponse};
 use crate::{
-    entity::user::{self, Entity},
-    models::auth::RegisterRequest,
+    entity::{
+        prelude::*,
+        user::{self},
+    },
+    models::{
+        auth::{Claims, LoginInfo, LoginResponse},
+        generic::GenericResponse,
+    },
     server::server_state::ServerState,
 };
-use argon2::password_hash::rand_core::OsRng;
-use argon2::password_hash::SaltString;
-use argon2::Argon2;
-use argon2::PasswordHash;
-use argon2::PasswordHasher;
-use argon2::PasswordVerifier;
+use argon2::{Argon2, PasswordHash, PasswordVerifier};
 use axum::{
     extract::{Json, State},
     http::{HeaderMap, StatusCode},
 };
-use futures::sink::Fanout;
-use sea_orm::ColumnTrait;
-use sea_orm::EntityTrait;
-use sea_orm::InsertResult;
-use sea_orm::QueryFilter;
-use sea_orm::Set;
-
 use jsonwebtoken::{decode, encode, DecodingKey, EncodingKey, Header, Validation};
+use sea_orm::{ColumnTrait, EntityTrait, QueryFilter};
 
-pub async fn credentials_are_correct(username: &str, password: &str, state: &ServerState) -> bool {
+pub async fn credentials_are_correct(
+    username: &str,
+    password: &str,
+    state: &ServerState,
+) -> Result<(), String> {
     // Get user
     let existing_user: Option<user::Model> = User::find()
         .filter(user::Column::Username.eq(username))
@@ -35,28 +32,35 @@ pub async fn credentials_are_correct(username: &str, password: &str, state: &Ser
         Some(user) => user.password_hash_and_salt,
         None => {
             // @todo make dummy password hash
-            return false;
+            return Err("Username doesn't exist".to_owned());
         }
     };
 
-    return Argon2::default()
-        .verify_password(
+    match Argon2::default().verify_password(
         password.as_bytes(),
         &PasswordHash::new(hash_to_check.as_str()).unwrap(),
-        )
-        .is_ok();
+    ) {
+        Ok(_) => Ok(()),
+        Err(_) => Err("Invalid credentials".to_owned()),
+    }
 }
 
 pub async fn post_login_user(
     State(state): State<ServerState>,
     Json(login_info): Json<LoginInfo>,
-) -> Result<Json<LoginResponse>, StatusCode> {
+) -> (
+    StatusCode,
+    Result<Json<LoginResponse>, Json<GenericResponse>>,
+) {
     let user_authenticated =
         credentials_are_correct(&login_info.username, &login_info.password, &state);
 
     match user_authenticated.await {
-        false => Err(StatusCode::UNAUTHORIZED),
-        true => {
+        Err(why) => (
+            StatusCode::UNAUTHORIZED,
+            Err(Json(GenericResponse::err(why.as_str()))),
+        ),
+        Ok(_) => {
             let expires = match login_info.remember_me {
                 true => chrono::Utc::now() + chrono::Duration::days(365),
                 false => chrono::Utc::now() + chrono::Duration::days(1),
@@ -73,17 +77,21 @@ pub async fn post_login_user(
                 &EncodingKey::from_secret("secret".as_ref()),
             ) {
                 Ok(token) => token,
-                Err(_) => return Err(StatusCode::INTERNAL_SERVER_ERROR),
+                Err(_) => {
+                    return (
+                        StatusCode::INTERNAL_SERVER_ERROR,
+                        Err(Json(GenericResponse::err("Failed to get token"))),
+                    )
+                }
             };
 
-            let resp = LoginResponse { token, expires };
-            Ok(Json(resp))
+            (StatusCode::OK, Ok(Json(LoginResponse { token, expires })))
         }
     }
 }
 
 pub async fn post_test_login(
-    State(state): State<ServerState>,
+    State(_): State<ServerState>,
     header_map: HeaderMap,
 ) -> Result<Json<String>, StatusCode> {
     if let Some(auth_header) = header_map.get("Authorization") {
@@ -91,13 +99,14 @@ pub async fn post_test_login(
             if auth_header_str.starts_with("Bearer ") {
                 let token = auth_header_str.trim_start_matches("Bearer ").to_string();
                 // @todo change secret
-                match decode::<Claims>(
+                if decode::<Claims>(
                     &token,
                     &DecodingKey::from_secret("secret".as_ref()),
                     &Validation::default(),
-                ) {
-                    Ok(_) => return Ok(Json("Logged in".to_owned())),
-                    Err(_) => {}
+                )
+                .is_ok()
+                {
+                    return Ok(Json("Logged in".to_owned()));
                 }
             }
         }

src/server/auth/register.rs

@@ -1,23 +1,15 @@
-use crate::entity::prelude::*;
-use crate::models::generic::GenericResponse;
-use argon2::password_hash::rand_core::OsRng;
-use argon2::password_hash::SaltString;
-use argon2::Argon2;
-use argon2::PasswordHash;
-use argon2::PasswordHasher;
-use axum::{extract::State, http::StatusCode, Json};
-use chrono::Utc;
-use sea_orm::ColumnTrait;
-use sea_orm::EntityTrait;
-use sea_orm::InsertResult;
-use sea_orm::QueryFilter;
-use sea_orm::Set;
-
 use crate::{
-    entity::user::{self, Entity},
-    models::auth::RegisterRequest,
+    entity::{prelude::*, user},
+    models::{auth::RegisterRequest, generic::GenericResponse},
     server::server_state::ServerState,
 };
+use argon2::{
+    password_hash::{rand_core::OsRng, SaltString},
+    Argon2, PasswordHash, PasswordHasher,
+};
+use axum::{extract::State, http::StatusCode, Json};
+use chrono::Utc;
+use sea_orm::{ColumnTrait, EntityTrait, QueryFilter, Set};
 
 pub async fn post_register_user(
     State(state): State<ServerState>,
@@ -59,7 +51,7 @@ pub async fn post_register_user(
         username: Set(username),
         password_hash_and_salt: Set(phc_string),
         nickname: Set({
-            if register_info.nickname == "" {
+            if register_info.nickname.is_empty() {
                 None
             } else {
                 Some(register_info.nickname)
@@ -69,7 +61,7 @@ pub async fn post_register_user(
         last_active_time: Set(Utc::now().naive_utc()),
         is_admin: Set(false),
         email: Set({
-            if register_info.email == "" {
+            if register_info.email.is_empty() {
                 None
             } else {
                 Some(register_info.email)
@@ -79,11 +71,16 @@ pub async fn post_register_user(
         forgot_password_request: Set(None),
         ..Default::default()
     };
-    // TODO -> error handling
-    let db_resp = user::Entity::insert(new_user)
-        .exec(&state.db_conn)
-        .await
-        .unwrap();
-
-    return (StatusCode::OK, Json(GenericResponse::ok()));
+    let db_resp = user::Entity::insert(new_user).exec(&state.db_conn).await;
+    match db_resp {
+        Ok(_) => {}
+        Err(_) => {
+            return (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(GenericResponse::err("Database error")),
+            );
+        }
+    };
+
+    (StatusCode::OK, Json(GenericResponse::ok()))
 }

src/server/routes.rs

@@ -1,8 +1,6 @@
 // (Server only) Routes
 use crate::endpoints::{FORGOT_PASSWORD, LOGIN, LOGIN_TEST, REGISTER};
 use axum::routing::{post, Router};
-use futures::executor::block_on;
-use sea_orm::Database;
 
 use super::{
     auth::{

src/state_enums.rs

@@ -1,3 +1,5 @@
+use std::fmt::Display;
+
 use serde::{Deserialize, Serialize};
 
 #[derive(Serialize, Deserialize, Clone)]
@@ -8,13 +10,28 @@ pub enum LoginState {
 }
 
 #[derive(Serialize, Deserialize, Clone)]
-pub enum GameState {
+pub enum ContentState {
     None,
     Pool,
     Pickleball,
     TableTennis,
 }
 
+impl Display for ContentState {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            f,
+            "{}",
+            match self {
+                ContentState::None => "",
+                ContentState::Pool => "Pool",
+                ContentState::Pickleball => "Pickle Ball",
+                ContentState::TableTennis => "Table Tennis",
+            }
+        )
+    }
+}
+
 #[derive(Serialize, Deserialize, Clone)]
 pub enum OpenState {
     Open,

src/templates/index.rs

@@ -1,10 +1,10 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{components::layout::Layout, state_enums::ContentState};
 use perseus::prelude::*;
 use sycamore::prelude::*;
 
 fn index_page<G: Html>(cx: Scope) -> View<G> {
     view! { cx,
-        Layout(title = "Index", game = GameState::Pool) {
+        Layout(content_state = ContentState::None) {
             // Anything we put in here will be rendered inside the `<main>` block of the layout
             p { "Hello World!" }
             br {}

src/templates/mod.rs

@@ -1,11 +1,13 @@
-pub mod add_game_form;
 pub mod index;
-pub mod one_v_one_board;
-pub mod overall_board;
+pub mod pickleball;
+pub mod pool;
+pub mod table_tennis;
+pub mod user;
 
 #[cfg(client)]
 use perseus::utils::get_path_prefix_client;
 
+#[cfg(client)]
 pub fn get_api_path(path: &str) -> String {
     #[cfg(engine)]
     {

src/templates/pickleball/index.rs

@@ -0,0 +1,27 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::Pickleball) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("pickleball")
+        .view(index_page)
+        .head(head)
+        .build()
+}

src/templates/pickleball/mod.rs

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

src/templates/pool/add_game_form.rs

@@ -1,17 +1,9 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{components::layout::Layout, state_enums::ContentState};
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
-cfg_if::cfg_if! {
-    if #[cfg(client)] {
-        use crate::global_state::AppStateRx;
-        use crate::templates::get_api_path;
-        use chrono::Utc;
-    }
-}
-
 // Reactive page
 
 #[derive(Serialize, Deserialize, Clone, ReactiveState)]
@@ -39,7 +31,7 @@ fn add_game_form_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, state: &'a PageStat
     };
 
     view! { cx,
-        Layout(title = "Add Game Results", game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             div (class = "flex flex-wrap") {
                 select {
                     option (value="red")
@@ -99,7 +91,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 // Template
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("add-game-form")
+    Template::build("pool/add-game-form")
         .request_state_fn(get_request_state)
         .view_with_state(add_game_form_page)
         .head(head)

src/templates/pool/index.rs

@@ -0,0 +1,24 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::Pool) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("pool").view(index_page).head(head).build()
+}

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;

src/templates/pool/one_v_one_board.rs

@@ -1,4 +1,4 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{components::layout::Layout, state_enums::ContentState};
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
@@ -9,7 +9,7 @@ struct PageState {}
 
 fn one_v_one_board_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, _state: &'a PageStateRx) -> View<G> {
     view! { cx,
-        Layout(title = "1v1 Leaderboard", game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             p { "leaderboard" }
         }
     }
@@ -31,7 +31,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("one-v-one-board")
+    Template::build("pool/one-v-one-board")
         .request_state_fn(get_request_state)
         .view_with_state(one_v_one_board_page)
         .head(head)

src/templates/pool/overall_board.rs

@@ -1,4 +1,4 @@
-use crate::{components::layout::Layout, global_state::AppStateRx, state_enums::GameState};
+use crate::{components::layout::Layout, global_state::AppStateRx, state_enums::ContentState};
 
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
@@ -12,7 +12,7 @@ fn overall_board_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, _state: &'a PageSta
     let _global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
     view! { cx,
-        Layout(title = "Overall Leaderboard", game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             ul {
                 (View::new_fragment(
                     vec![],
@@ -38,7 +38,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("overall-board")
+    Template::build("pool/overall-board")
         .request_state_fn(get_request_state)
         .view_with_state(overall_board_page)
         .head(head)

src/templates/table_tennis/index.rs

@@ -0,0 +1,27 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::TableTennis) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("table_tennis")
+        .view(index_page)
+        .head(head)
+        .build()
+}

src/templates/table_tennis/mod.rs

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

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", "dark", "lemonade", "autumn", "nord"],
+  },
 };