117 lines
2.9 KiB
TypeScript
117 lines
2.9 KiB
TypeScript
import { state, property } from "lit/decorators.js";
|
|
import { msg, localized } from "@lit/localize";
|
|
|
|
import type { ViewState } from "../utils/APIRouter";
|
|
import LiteElement, { html } from "../utils/LiteElement";
|
|
|
|
@localized()
|
|
export class ResetPassword extends LiteElement {
|
|
@property({ type: Object })
|
|
viewState!: ViewState;
|
|
|
|
@state()
|
|
private serverError?: string;
|
|
|
|
@state()
|
|
private isSubmitting: boolean = false;
|
|
|
|
render() {
|
|
let formError;
|
|
|
|
if (this.serverError) {
|
|
formError = html`
|
|
<div class="mb-5">
|
|
<btrix-alert id="formError" type="danger"
|
|
>${this.serverError}</btrix-alert
|
|
>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<div class="w-full max-w-sm grid gap-5">
|
|
<div class="md:bg-white md:shadow-xl md:rounded-lg md:px-12 md:py-12">
|
|
<sl-form @sl-submit="${this.onSubmit}" aria-describedby="formError">
|
|
<div class="mb-5">
|
|
<btrix-input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
label="${msg("New password")}"
|
|
autocomplete="new-password"
|
|
togglePassword
|
|
required
|
|
>
|
|
</btrix-input>
|
|
</div>
|
|
|
|
${formError}
|
|
|
|
<sl-button
|
|
class="w-full"
|
|
type="primary"
|
|
?loading=${this.isSubmitting}
|
|
submit
|
|
>${msg("Change password")}</sl-button
|
|
>
|
|
</sl-form>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a
|
|
class="text-sm text-gray-400 hover:text-gray-500"
|
|
href="/log-in/forgot-password"
|
|
@click=${this.navLink}
|
|
>${msg("Resend password reset email?")}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async onSubmit(event: { detail: { formData: FormData } }) {
|
|
this.isSubmitting = true;
|
|
|
|
const { formData } = event.detail;
|
|
const password = formData.get("password") as string;
|
|
|
|
const resp = await fetch("/api/auth/reset-password", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
token: this.viewState.params.token,
|
|
password,
|
|
}),
|
|
});
|
|
|
|
switch (resp.status) {
|
|
case 200:
|
|
// TODO show toast notification
|
|
this.navTo("/log-in");
|
|
break;
|
|
case 400:
|
|
case 422:
|
|
const { detail } = await resp.json();
|
|
|
|
if (detail === "RESET_PASSWORD_BAD_TOKEN") {
|
|
// TODO password validation details
|
|
this.serverError = msg(
|
|
"Password reset email is not valid. Request a new password reset email"
|
|
);
|
|
} else {
|
|
// TODO password validation details
|
|
this.serverError = msg("Invalid password");
|
|
}
|
|
|
|
break;
|
|
default:
|
|
this.serverError = msg("Something unexpected went wrong");
|
|
break;
|
|
}
|
|
|
|
this.isSubmitting = false;
|
|
}
|
|
}
|