142 lines
3.7 KiB
Plaintext
142 lines
3.7 KiB
Plaintext
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>
|
|
}
|