Added reauthentication (token freshness) and protected username change

2025-02-15 20:12:30 +11:00
parent 6bee6edd16
commit 42ea74fd63
10 changed files with 315 additions and 14 deletions
--- a/view/layout/global.templ
+++ b/view/layout/global.templ
@@ -2,7 +2,7 @@ package layout

 import "projectreshoot/view/component/nav"
 import "projectreshoot/view/component/footer"
-import "projectreshoot/view/component"
+import "projectreshoot/view/component/popup"

 // Global page layout. Includes HTML document settings, header tags
 // navbar and footer
@@ -40,16 +40,50 @@ templ Global() {
 			<script src="https://unpkg.com/alpinejs" defer></script>
 			<script>
                // uncomment this line to enable logging of htmx events
-                //htmx.logAll();
+                // htmx.logAll();
+            </script>
+			<script>
+                const popups = {
+                    showError: false,
+                    showConfirmPasswordModal: false,
+                    handleHtmxBeforeOnLoad(event) {
+                        const requestPath = event.detail.pathInfo.requestPath;
+                        if (requestPath === "/reauthenticate") {
+                            // handle password incorrect on refresh attempt
+                            if (event.detail.xhr.status === 445) {
+                                event.detail.shouldSwap = true;
+                                event.detail.isError = false;
+                            } else if (event.detail.xhr.status === 200) {
+                                this.showConfirmPasswordModal = false;
+                            }
+                        }
+                    },
+                    // handle errors from the server on HTMX requests
+                    handleHtmxError(event) {
+                        const errorCode = event.detail.errorInfo.error;
+                  
+                        // internal server error 
+                        if (errorCode.includes('Code 500')) {
+                            this.showError = true;
+                            setTimeout(() => this.showError = false, 6000);
+                        }
+                  
+                        // user is authorized but needs to refresh their login
+                        if (errorCode.includes('Code 444')) {
+                            this.showConfirmPasswordModal = true;
+                        }
+                    },
+                };
            </script>
 		</head>
 		<body
 			class="bg-base text-text ubuntu-mono-regular overflow-x-hidden"
-			x-data="{ showError: false }"
-			x-on:htmx:error="if ($event.detail.errorInfo.error.includes('Code 500'))
-            showError = true; setTimeout(() => showError = false, 6000)"
+			x-data="popups"
+			x-on:htmx:error="handleHtmxError($event)"
+			x-on:htmx:before-on-load="handleHtmxBeforeOnLoad($event)"
 		>
-			@component.ErrorPopup()
+			@popup.ErrorPopup()
+			@popup.ConfirmPasswordModal()
 			<div
 				id="main-content"
 				class="flex flex-col h-screen justify-between"