import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { formStyles } from '../../styles/form-styles';
import { post } from '../../api';
import '@shoelace-style/shoelace/dist/components/input/input.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '../../components/logo-component';
@customElement('reset-password-view')
export class ResetPasswordView extends LitElement {
@state()
private token = '';
@state()
private message = '';
@state()
private error = '';
static styles = [formStyles];
firstUpdated() {
const params = new URLSearchParams(window.location.search);
this.token = params.get('token') || '';
if (!this.token) {
this.error = 'No reset token found in the URL.';
}
}
private async handleResetPassword(event: SubmitEvent) {
event.preventDefault();
const form = event.target as HTMLFormElement;
const formData = new FormData(form);
const password = formData.get('password') as string;
const confirmPassword = formData.get('confirmPassword') as string;
if (password !== confirmPassword) {
this.error = 'Passwords do not match.';
return;
}
try {
await post('/api/v1/auth/reset-password', {
token: this.token,
new_password: password,
});
this.message =
'Your password has been reset successfully. You can now log in.';
this.error = '';
} catch (error) {
this.error = 'Invalid or expired reset token.';
console.error('Password reset failed', error);
}
}
render() {
return html`
<div class="container">
<div class="logo">
<a href="/">
<logo-component></logo-component>
</a>
</div>
<div class="form-container">
<h2>Reset Password</h2>
${this.message
? html`<sl-alert
variant="success"
open
closable
@sl-after-hide=${() => (this.message = '')}
>
<sl-icon slot="icon" name="check-circle"></sl-icon>
${this.message}
</sl-alert>`
: ''}
${this.error
? html`<sl-alert
variant="danger"
open
closable
@sl-after-hide=${() => (this.error = '')}
>
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
${this.error}
</sl-alert>`
: ''}
<form @submit=${this.handleResetPassword}>
<sl-input
type="password"
label="New Password"
name="password"
required
password-toggle
></sl-input>
<sl-input
type="password"
label="Confirm New Password"
name="confirmPassword"
required
password-toggle
></sl-input>
<div class="form-actions">
<sl-button type="submit" variant="primary"
>Reset Password</sl-button
>
</div>
<div class="form-links">
<a href="/login">Back to Sign in</a>
</div>
</form>
</div>
</div>
`;
}
}
