118 lines
3.2 KiB
Plaintext
118 lines
3.2 KiB
Plaintext
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 }
|
|
>
|
|
<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>
|
|
<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 text-overlay2"
|
|
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>
|
|
</form>
|
|
}
|