Added ability to change username

view/component/account/changeusername.templ

@@ -0,0 +1,94 @@
+package account
+
+import "projectreshoot/contexts"
+
+templ ChangeUsername(err string, username string) {
+	{{
+	user := contexts.GetUser(ctx)
+	if username == "" {
+		username = user.Username
+	}
+	}}
+	<form
+		hx-post="/change-username"
+		hx-swap="outerHTML"
+		class="w-[90%] mx-auto mt-5"
+		x-data={ "{ err: '" + err + "'}" }
+	>
+		<div
+			class="flex"
+			x-data={ "{username: '" + username + "'}" }
+		>
+			<div
+				class="flex items-center relative"
+			>
+				<label
+					for="username"
+					class="text-lg"
+				>Username</label>
+				<input
+					type="text"
+					id="username"
+					name="username"
+					class="py-1 px-4 rounded-lg text-md
+                bg-surface0 border border-surface2
+                disabled:opacity-50 ml-5 disabled:pointer-events-none"
+					required
+					aria-describedby="username-error"
+					x-model="username"
+				/>
+				<div
+					class="absolute inset-y-0 end-0 
+                        pointer-events-none pe-3 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>
+				<button
+					class="rounded-lg bg-blue py-1 px-2 text-mantle ml-2
+                hover:cursor-pointer hover:bg-blue/75 transition"
+					x-cloak
+					x-show={ "username !=='" + user.Username + "'" }
+					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"
+					href="#"
+					x-cloak
+					x-show={ "username !=='" + user.Username + "'" }
+					x-transition.opacity.duration.500ms
+					@click={ "username='" + user.Username + "';err=''" }
+				>
+					Cancel
+				</button>
+			</div>
+		</div>
+		<p
+			class="block text-red ml-24 mt-1 transition"
+			x-cloak
+			x-show="err"
+			x-text="err"
+		></p>
+	</form>
+}

view/component/account/container.templ

@@ -0,0 +1,24 @@
+package account
+
+templ AccountContainer(subpage string) {
+	<div
+		id="account-container"
+		class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl"
+	>
+		@SelectMenu(subpage)
+		<div class="mt-5 w-full">
+			<div
+				class="pl-5 text-2xl text-subtext1 border-b 
+                    border-overlay0 w-[90%] mx-auto"
+			>
+				{ subpage }
+			</div>
+			switch subpage {
+				case "General":
+					@AccountGeneral()
+				case "Security":
+					@AccountGeneral()
+			}
+		</div>
+	</div>
+}

view/component/account/content.templ

@@ -1,15 +0,0 @@
-package account
-
-templ AccountContent(subpage string) {
-	<form hx-post="/account-select-page">
-		<div class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl">
-			@SelectMenu(subpage)
-			<div class="mt-5">
-				<div class="pl-10 text-2xl text-subtext1 underline">
-					{ subpage }
-				</div>
-				// page content
-			</div>
-		</div>
-	</form>
-}

view/component/account/general.templ

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

view/component/account/selectmenu.templ

@@ -29,27 +29,35 @@ templ SelectMenu(activePage string) {
 	menuItems := getMenuItems()
 	page := fmt.Sprintf("{page:'%s'}", activePage)
 	}}
-	<div class="flex w-fit flex-col border-e bg-surface0 rounded-l-xl">
-		<div class="px-4 py-6">
-			<ul class="mt-6 space-y-1" x-data={ page }>
-				for _, item := range menuItems {
-					{{
+	<form
+		class="flex bg-surface0 w-fit border-e border-overlay0
+        rounded-l-xl"
+		hx-post="/account-select-page"
+		hx-target="#account-container"
+		hx-swap="outerHTML"
+	>
+		<div>
+			<div class="px-4 py-6">
+				<ul class="mt-6 space-y-1" x-data={ page }>
+					for _, item := range menuItems {
+						{{
 	activebind := fmt.Sprintf("page === '%s' && 'bg-mantle'", item.name)
-					}}
-					<li>
-						<button
-							type="submit"
-							name="subpage"
-							value={ item.name }
-							class="block rounded-lg px-4 py-2 text-md
+						}}
+						<li>
+							<button
+								type="submit"
+								name="subpage"
+								value={ item.name }
+								class="block rounded-lg px-4 py-2 text-md
                             hover:bg-mantle hover:cursor-pointer"
-							:class={ activebind }
-						>
-							{ item.name }
-						</button>
-					</li>
-				}
-			</ul>
+								:class={ activebind }
+							>
+								{ item.name }
+							</button>
+						</li>
+					}
+				</ul>
+			</div>
 		</div>
-	</div>
+	</form>
 }

view/page/account.templ

@@ -5,6 +5,6 @@ import "projectreshoot/view/component/account"
 
 templ Account(subpage string) {
 	@layout.Global() {
-		@account.AccountContent(subpage)
+		@account.AccountContainer(subpage)
 	}
 }