Changes to Login Form

move dialog to top of page add cancel button protect ingredient delete and edit
TrueDoctor · Jul 10, 2024 · 26a5e92 · 26a5e92
1 parent f086fd9
commit 26a5e92
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/backend/src/frontend/home.rs b/backend/src/frontend/home.rs
@@ -3,7 +3,7 @@ use foodlib::{AuthContext, User};
 use maud::{html, Markup};
 
 use crate::{
-    frontend::{ingredients_tab::ingredients_view, CSS_HASH},
+    frontend::{ingredients_tab::ingredients_view, CSS_HASH, LOGIN_URL},
     MyAppState,
 };
 
@@ -94,7 +94,7 @@ pub fn navbar() -> Markup {
             (navbutton("Events", "/events"))
             (navbutton("Inventories", "/inventories"))
             (navbutton("Stores", "/stores"))
-            a hx-get=("/auth/login") hx-target="#content" class="flex flex-col items-center
+            a hx-get=(LOGIN_URL) hx-target="#content" class="flex flex-col items-center
                 transition ease-in-out transition duration-200 
                 rounded-xl p-6
                 hover:shadow-inner hover:bg-blue-800" {

diff --git a/backend/src/frontend/ingredients_tab.rs b/backend/src/frontend/ingredients_tab.rs
@@ -23,17 +23,17 @@ pub(crate) fn ingredients_router() -> axum::Router<MyAppState> {
             axum::routing::post(update_source),
         )
         .route("/:id", axum::routing::delete(delete))
-        .route_layer(RequireAuthorizationLayer::<i64, User>::login_or_redirect(
-            Arc::new(LOGIN_URL.into()),
-            None,
-        ))
         .route("/edit", axum::routing::get(edit_ingredient_form))
         .route("/delete/:id", axum::routing::get(delete_ingredient_form))
-        .route("/sources/:id", axum::routing::get(sources_table))
         .route(
             "/sources/delete/:ingredient_id/:source_id",
             axum::routing::get(delete_source),
         )
+        .route_layer(RequireAuthorizationLayer::<i64, User>::login_or_redirect(
+            Arc::new(LOGIN_URL.into()),
+            None,
+        ))
+        .route("/sources/:id", axum::routing::get(sources_table))
         .route("/search", axum::routing::post(search))
         .route("/", axum::routing::get(ingredients_view))
 }
@@ -211,7 +211,7 @@ pub async fn edit_ingredient_form(old: Option<Form<Ingredient>>) -> Markup {
     }));
     let id = ingredient.ingredient_id;
     html! {
-        td colspan="5" {
+        td colspan="6" {
             div class="flex flex-col items-center justify-center w-full" {
                 div class="flex gap-2 w-full" {
                     input class="text" type="text" name="name" placeholder="Name" value=(ingredient.name) required="required";

diff --git a/backend/src/frontend/login_tab.rs b/backend/src/frontend/login_tab.rs
@@ -24,12 +24,17 @@ pub struct RedirectUrl {
 
 pub async fn login_view(Form(redirect): Form<RedirectUrl>) -> impl IntoResponse {
     let html = html! {
-        dialog class="dialog" open="open" id="login-dialog" {
-            div class="flex items-center justify-center" {
-                form method="post" action=(format!("/auth/login?protected={}", redirect.protected.unwrap_or("/".to_string()))) class="flex flex-col gap-1 justify-items-center justify-center h-full w-full" {
-                    input class="text" type="text" name="username" placeholder="Username" id="username" {}
-                    input class="text" type="password" placeholder="Password" name="password" id="password" {}
-                    input class="btn btn-success" hx-swap="delete" hx-target="#login-dialog" type="submit" value="Login" {}
+        div id="login-dialog" {
+            dialog class="dialog" open="open" id="login-dialog" {
+                div class="flex items-center justify-center" {
+                    form method="post" action=(format!("/auth/login?protected={}", redirect.protected.unwrap_or("/".to_string()))) class="flex flex-col gap-1 justify-items-center justify-center h-full w-full" {
+                        input class="text" type="text" name="username" placeholder="Username" id="username" {}
+                        input class="text" type="password" placeholder="Password" name="password" id="password" {}
+                        input class="btn btn-success" hx-swap="delete" hx-target="#login-dialog" type="submit" value="Login" {}
+                        button class="btn btn-cancel" hx-on:click="document.getElementById('login-dialog').remove()" type="button" {
+                            "Cancel"
+                        }
+                    }
                 }
             }
         }