Files
registry/ts_web/elements/sg-view-settings.ts

68 lines
2.1 KiB
TypeScript
Raw Normal View History

import * as appstate from '../appstate.js';
import * as shared from './shared/index.js';
import {
css,
cssManager,
customElement,
DeesElement,
html,
state,
type TemplateResult,
} from '@design.estate/dees-element';
@customElement('sg-view-settings')
export class SgViewSettings extends DeesElement {
@state()
accessor settingsState: appstate.ISettingsState = { user: null, sessions: [] };
constructor() {
super();
const sub = appstate.settingsStatePart
.select((s) => s)
.subscribe((s) => {
this.settingsState = s;
});
this.rxSubscriptions.push(sub);
}
public static styles = [
cssManager.defaultStyles,
shared.viewHostCss,
];
async connectedCallback() {
super.connectedCallback();
await appstate.settingsStatePart.dispatchAction(appstate.fetchMeAction, null);
await appstate.settingsStatePart.dispatchAction(appstate.fetchUserSessionsAction, null);
}
public render(): TemplateResult {
return html`
<sg-settings-view
.user="${this.settingsState.user}"
.sessions="${this.settingsState.sessions}"
@save-profile="${(e: CustomEvent) => this.saveProfile(e.detail)}"
@change-password="${(e: CustomEvent) => this.changePassword(e.detail)}"
@revoke-session="${(e: CustomEvent) => this.revokeSession(e.detail.sessionId)}"
@delete-account="${(e: CustomEvent) => this.deleteAccount(e.detail.password)}"
></sg-settings-view>
`;
}
private async saveProfile(detail: { displayName?: string; avatarUrl?: string }) {
await appstate.settingsStatePart.dispatchAction(appstate.updateProfileAction, detail);
}
private async changePassword(detail: { currentPassword: string; newPassword: string }) {
await appstate.settingsStatePart.dispatchAction(appstate.changePasswordAction, detail);
}
private async revokeSession(sessionId: string) {
await appstate.settingsStatePart.dispatchAction(appstate.revokeSessionAction, { sessionId });
}
private async deleteAccount(password: string) {
// TODO: implement delete account action
}
}