Added logout functionality and client error message for 500 status codes

view/component/errorPopup.templ

@@ -0,0 +1,63 @@
+package component
+
+templ ErrorPopup() {
+	<div
+		x-cloak
+		x-show="showError"
+		class="absolute w-82 left-0 right-0 mt-20 mr-5 ml-auto"
+		x-transition:enter="transform translate-x-[100%] opacity-0 duration-200"
+		x-transition:enter-start="opacity-0 translate-x-[100%]"
+		x-transition:enter-end="opacity-100 translate-x-0"
+		x-transition:leave="opacity-0 duration-200"
+		x-transition:leave-start="opacity-100 translate-x-0"
+		x-transition:leave-end="opacity-0 translate-x-[100%]"
+	>
+		<div
+			role="alert"
+			class="rounded-sm bg-dark-red p-4"
+		>
+			<div class="flex justify-between">
+				<div class="flex items-center gap-2 text-red w-fit">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						class="size-5"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 
+                            12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 
+                            0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 
+                            0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 
+                            01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+							clip-rule="evenodd"
+						></path>
+					</svg>
+					<strong class="block font-medium">Something went wrong </strong>
+				</div>
+				<div class="flex">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-6 text-subtext0 hover:cursor-pointer"
+						@click="showError=false"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M6 18L18 6M6 6l12 12"
+						></path>
+					</svg>
+				</div>
+			</div>
+			<p class="mt-2 text-sm text-red">
+				An error occured on the server. Please try again later,
+				or contact an administrator
+			</p>
+		</div>
+	</div>
+}

view/component/footer/footer.templ

@@ -40,7 +40,9 @@ templ Footer() {
 					>
 						<path
 							fill-rule="evenodd"
-							d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+							d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 
+                            3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 
+                            4a1 1 0 010 1.414z"
 							clip-rule="evenodd"
 						></path>
 					</svg>

view/component/form/loginform.templ

@@ -14,7 +14,11 @@ templ LoginForm(loginError string) {
 	} else {
 		errCreds = "false"
 	}
-	xdata := fmt.Sprintf("{credentialError: %s, errorMessage: '%s'}", errCreds, loginError)
+	xdata := fmt.Sprintf(
+		"{credentialError: %s, errorMessage: '%s'}",
+		errCreds,
+		loginError,
+	)
 	}}
 	<form
 		hx-post="/login"
@@ -57,7 +61,12 @@ templ LoginForm(loginError string) {
 							viewBox="0 0 16 16"
 							aria-hidden="true"
 						>
-							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
+							<path
+								d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 
+                                4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 
+                                0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 
+                                1 0 1 0 0 2 1 1 0 0 0 0-2z"
+							></path>
 						</svg>
 					</div>
 				</div>
@@ -101,7 +110,12 @@ templ LoginForm(loginError string) {
 							viewBox="0 0 16 16"
 							aria-hidden="true"
 						>
-							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
+							<path
+								d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 
+                                4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
+                                0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
+                                1 0 1 0 0 2 1 1 0 0 0 0-2z"
+							></path>
 						</svg>
 					</div>
 				</div>

view/component/nav/navbarright.templ

@@ -72,6 +72,7 @@ templ navRight() {
                                     rounded-lg px-4 py-2 text-md text-red 
                                     hover:bg-red/25 hover:cursor-pointer"
 									role="menuitem"
+									@click="isActive=false"
 								>
 									Logout
 								</button>