feat(opsserver,web): replace the Angular UI and REST management layer with a TypedRequest-based ops server and bundled web frontend

ts_web/elements/sg-view-settings.ts

@@ -0,0 +1,67 @@
+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
+  }
+}