import { LitElement, html, css, unsafeCSS } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { changePassword } from '../../../api';
import '@shoelace-style/shoelace/dist/components/input/input.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import consoleStyles from '../../../styles/console-styles.css?inline';
@customElement('security-view')
export class SecurityView extends LitElement {
@state()
private currentPassword = '';
@state()
private newPassword = '';
@state()
private confirmNewPassword = '';
@state()
private changePasswordMessage = '';
async handleChangePassword(event: Event) {
event.preventDefault();
if (this.newPassword.length < 8) {
this.changePasswordMessage =
'New password must be at least 8 characters.';
return;
}
if (this.newPassword !== this.confirmNewPassword) {
this.changePasswordMessage = 'New passwords do not match.';
return;
}
try {
await changePassword({
current_password: this.currentPassword,
new_password: this.newPassword,
});
this.changePasswordMessage = 'Password changed successfully.';
this.currentPassword = '';
this.newPassword = '';
this.confirmNewPassword = '';
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : 'An unknown error occurred.';
this.changePasswordMessage = `Failed to change password: ${errorMessage}`;
}
}
render() {
return html`
<view-header headerText="Security" width="narrow"> </view-header>
<div class="column-layout narrow">
<div class="main-column">
<div class="card">
<div class="card-header">
<h3>Change Password</h3>
</div>
<div class="card-body">
<form @submit="${this.handleChangePassword}">
<sl-input
type="password"
label="Current Password"
.value="${this.currentPassword}"
@sl-input="${(e: Event) =>
(this.currentPassword = (
e.target as HTMLInputElement
).value)}"
required
password-toggle
></sl-input>
<sl-input
type="password"
label="New Password"
.value="${this.newPassword}"
@sl-input="${(e: Event) =>
(this.newPassword = (e.target as HTMLInputElement).value)}"
required
minlength="8"
password-toggle
></sl-input>
<sl-input
type="password"
label="Confirm New Password"
.value="${this.confirmNewPassword}"
@sl-input="${(e: Event) =>
(this.confirmNewPassword = (
e.target as HTMLInputElement
).value)}"
required
password-toggle
></sl-input>
<sl-button variant="primary" type="submit"
>Change Password</sl-button
>
${this.changePasswordMessage
? html`<p>${this.changePasswordMessage}</p>`
: ''}
</form>
</div>
</div>
</div>
<div class="side-column"></div>
</div>
`;
}
static styles = [
unsafeCSS(consoleStyles),
css`
.card-header {
padding-bottom: 1rem;
margin-bottom: 1rem;
}
h2,
h3 {
margin: 0;
}
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
sl-button {
width: 12em;
}
`,
];
}
