Added ability for user to change their bio

view/component/account/changebio.templ

@@ -0,0 +1,117 @@
+package account
+
+import "projectreshoot/contexts"
+
+templ ChangeBio(err string, bio string) {
+	{{
+	user := contexts.GetUser(ctx)
+	if bio == "" {
+		bio = user.Bio
+	}
+	}}
+	<form
+		hx-post="/change-bio"
+		hx-swap="outerHTML"
+		class="w-[90%] mx-auto mt-5"
+		x-data={ templ.JSFuncCall("bioComponent", bio, user.Bio, err).CallInline }
+	>
+		<div
+			class="flex flex-col"
+		>
+			<div
+				class="flex flex-col sm:flex-row sm:items-center relative"
+			>
+				<label
+					for="bio"
+					class="text-lg w-20"
+				>Bio</label>
+				<div
+					class="relative sm:ml-5 ml-0 w-fit"
+				>
+					<textarea
+						type="text"
+						id="bio"
+						name="bio"
+						class="py-1 px-4 rounded-lg text-md
+                        bg-surface0 border border-surface2 w-60
+                        disabled:opacity-50 disabled:pointer-events-none"
+						required
+						aria-describedby="bio-error"
+						x-model="bio"
+						x-ref="bio"
+						@input="updateTextArea()"
+						maxlength="128"
+					></textarea>
+					<span
+						class="absolute right-0 pr-2 bottom-0 pb-2"
+						x-text="bioLenText"
+					></span>
+				</div>
+			</div>
+			<div class="mt-2 sm:ml-25">
+				<button
+					class="rounded-lg bg-blue py-1 px-2 text-mantle 
+                    hover:cursor-pointer hover:bg-blue/75 transition"
+					x-cloak
+					x-show="bio !== initialBio"
+					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="bio !== initialBio"
+					x-transition.opacity.duration.500ms
+					@click="resetBio()"
+				>
+					Cancel
+				</button>
+			</div>
+		</div>
+		<p
+			class="block text-red sm:ml-26 mt-1 transition"
+			x-cloak
+			x-show="err"
+			x-text="err"
+		></p>
+		<script>
+            function bioComponent(newBio, oldBio, err) {
+                return {
+                    bio: newBio,
+                    initialBio: oldBio, 
+                    err: err,
+                    bioLenText: '', 
+                    updateTextArea() {
+                        this.$nextTick(() => {
+                            if (this.$refs.bio) {
+                                this.$refs.bio.style.height = 'auto';
+                                this.$refs.bio.style.height = `
+                                    ${this.$refs.bio.scrollHeight+20}px`;
+                            };
+                            this.bioLenText = `${this.bio.length}/128`;
+                        });
+                    },
+                    resetBio() {
+                        this.bio = this.initialBio;
+                        this.err = "",
+                        this.updateTextArea();
+                    },
+                    init() {
+                        this.$nextTick(() => {
+                            // this timeout makes sure the textarea resizes on 
+                            // page render correctly. seems 20ms is the sweet
+                            // spot between a noticable delay and not working
+                            setTimeout(() => {
+                                this.updateTextArea();
+                            }, 20);
+                        });
+                    }
+                };
+            }
+        </script>
+	</form>
+}

view/component/account/changeusername.templ

@@ -24,7 +24,7 @@ templ ChangeUsername(err string, username string) {
 			>
 				<label
 					for="username"
-					class="text-lg"
+					class="text-lg w-20"
 				>Username</label>
 				<input
 					type="text"
@@ -38,8 +38,8 @@ templ ChangeUsername(err string, username string) {
 					x-model="username"
 				/>
 				<div
-					class="absolute inset-y-0 sm:start-66 start-43 pt-9
-                        pointer-events-none sm:pe-3 sm:pt-2"
+					class="absolute inset-y-0 sm:start-68 start-43 pt-9
+                        pointer-events-none sm:pt-2"
 					x-show="err"
 					x-cloak
 				>
@@ -85,7 +85,7 @@ templ ChangeUsername(err string, username string) {
 			</div>
 		</div>
 		<p
-			class="block text-red sm:ml-24 mt-1 transition"
+			class="block text-red sm:ml-26 mt-1 transition"
 			x-cloak
 			x-show="err"
 			x-text="err"

view/component/account/general.templ

@@ -3,5 +3,6 @@ package account
 templ AccountGeneral() {
 	<div>
 		@ChangeUsername("", "")
+		@ChangeBio("", "")
 	</div>
 }