Added change password functionality

server/routes.go

@@ -91,4 +91,10 @@ func addRoutes(
 		middleware.RequiresLogin(
 			handlers.HandleChangeBio(logger, conn),
 		))
+	mux.Handle("POST /change-password",
+		middleware.RequiresLogin(
+			middleware.RequiresFresh(
+				handlers.HandleChangePassword(logger, conn),
+			),
+		))
 }

view/component/account/changepassword.templ

@@ -0,0 +1,141 @@
+package account
+
+templ ChangePassword(err string) {
+	<form
+		hx-post="/change-password"
+		hx-swap="outerHTML"
+		class="w-[90%] mx-auto mt-5"
+		x-data={ templ.JSFuncCall(
+                    "passwordComponent", err,
+                    ).CallInline }
+	>
+		<script>
+            function passwordComponent(err) {
+                return {
+                    password: "",
+                    confirmPassword: "",
+                    err: err,
+                    reset() {
+                        this.err = "";
+                        this.password = "";
+                        this.confirmPassword = "";
+                    },
+                };
+            }
+        </script>
+		<div
+			class="flex flex-col"
+		>
+			<div
+				class="flex flex-col sm:flex-row sm:items-center relative w-fit"
+			>
+				<label
+					for="password"
+					class="text-lg w-40"
+				>New Password</label>
+				<input
+					type="password"
+					id="password"
+					name="password"
+					class="py-1 px-4 rounded-lg text-md
+                    bg-surface0 border border-surface2 w-50 sm:ml-5
+                    disabled:opacity-50 ml-0 disabled:pointer-events-none"
+					required
+					aria-describedby="password-error"
+					x-model="password"
+				/>
+				<div
+					class="absolute inset-y-0 end-0 pt-9
+                        pointer-events-none sm:pt-2 pe-2"
+					x-show="err"
+					x-cloak
+				>
+					<svg
+						class="size-5 text-red"
+						width="16"
+						height="16"
+						fill="currentColor"
+						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>
+					</svg>
+				</div>
+			</div>
+			<div
+				class="flex flex-col sm:flex-row sm:items-center relative mt-2 w-fit"
+			>
+				<label
+					for="confirm-password"
+					class="text-lg w-40"
+				>Confirm Password</label>
+				<input
+					type="password"
+					id="confirm-password"
+					name="confirm-password"
+					class="py-1 px-4 rounded-lg text-md
+                    bg-surface0 border border-surface2 w-50 sm:ml-5
+                    disabled:opacity-50 ml-0 disabled:pointer-events-none"
+					required
+					aria-describedby="password-error"
+					x-model="confirmPassword"
+				/>
+				<div
+					class="absolute inset-y-0 pe-2 end-0 pt-9
+                        pointer-events-none sm:pt-2"
+					x-show="err"
+					x-cloak
+				>
+					<svg
+						class="size-5 text-red"
+						width="16"
+						height="16"
+						fill="currentColor"
+						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>
+					</svg>
+				</div>
+			</div>
+			<div class="mt-2 sm:ml-43">
+				<button
+					class="rounded-lg bg-blue py-1 px-2 text-mantle sm:ml-2
+                    hover:cursor-pointer hover:bg-blue/75 transition"
+					x-cloak
+					x-show="password !== '' || confirmPassword !== ''"
+					x-transition.opacity.duration.500ms
+				>
+					Update
+				</button>
+				<button
+					class="rounded-lg bg-overlay0 py-1 px-2 text-mantle
+                hover:cursor-pointer hover:bg-surface2 transition"
+					type="button"
+					x-cloak
+					x-show="password !== '' || confirmPassword !== ''"
+					x-transition.opacity.duration.500ms
+					@click="reset()"
+				>
+					Cancel
+				</button>
+			</div>
+		</div>
+		<p
+			class="block text-red sm:ml-45 mt-1 transition"
+			x-cloak
+			x-show="err"
+			x-text="err"
+		></p>
+	</form>
+}

view/component/account/container.templ

@@ -19,7 +19,7 @@ templ AccountContainer(subpage string) {
 				case "General":
 					@AccountGeneral()
 				case "Security":
-					@AccountGeneral()
+					@AccountSecurity()
 			}
 		</div>
 	</div>

view/component/account/security.templ

@@ -0,0 +1,7 @@
+package account
+
+templ AccountSecurity() {
+	<div>
+		@ChangePassword("")
+	</div>
+}

view/component/form/confirmpass.templ

@@ -9,11 +9,11 @@ templ ConfirmPassword(err string) {
 		x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
 	>
 		<script>
-            function usernameComponent(err) {
+            function confirmPassData(err) {
                 return {
                     submitted: false,
                     buttontext: 'Confirm', 
-                    err: err,
+                    errMsg: err,
                     reset() {
                         this.err = "";
                     },
@@ -58,8 +58,7 @@ templ ConfirmPassword(err string) {
                                 1 0 1 0 0 2 1 1 0 0 0 0-2z"
 							></path>
 						</svg>
-					</div> - change username
+					</div>
-					- confirm password
 				</div>
 				<p
 					class="text-center text-xs text-red mt-2"

view/component/popup/confirmPasswordModal.templ

@@ -7,6 +7,7 @@ templ ConfirmPasswordModal() {
 	<div
 		class="z-50 absolute bg-overlay0/55 top-0 left-0 right-0 bottom-0"
 		x-show="showConfirmPasswordModal"
+		x-cloak
 	>
 		<div
 			class="p-5 mt-25 w-fit max-w-100 text-center rounded-lg bg-mantle mx-auto"