Started implementing user settings -> security -> password management

src/app/chat/chat.html

@@ -15,6 +15,10 @@
   </button>
 </ng-template>
 
+<ng-template [(tuiDialog)]="userSettingsOpen" [tuiDialogOptions]="{closable: false, appearance: 'taiga big'}" class="user-settings">
+  <user-settings/>
+</ng-template>
+
 @if (serviceManager.currentSession() == null) {
   <main style="width: 100%; height: 100svh; display: flex; justify-content: center; align-items: center;">
     <tui-loader size="xl"/>

src/app/chat/chat.scss

@@ -85,3 +85,8 @@
     }
   }
 }
+
+::ng-deep tui-dialog[data-appearance~=big] {
+  height: 90svh;
+  width: 90svw !important;
+}

src/app/chat/chat.ts

@@ -13,6 +13,9 @@ import {environment} from '../../environments/environment';
 import {TuiTabBarComponent, TuiTabBarItem} from '@taiga-ui/addon-mobile';
 import {NetworkList} from './network-list/network-list';
 import {PictureList} from './picture-list/picture-list';
+import {UserSettings} from './user-settings/user-settings';
+import {AuthService} from '@chatenium/chatenium-sdk/services/authService';
+import {UserService} from '@chatenium/chatenium-sdk/services/userService';
 
 @Component({
   selector: 'app-chat',
@@ -31,7 +34,8 @@ import {PictureList} from './picture-list/picture-list';
     TuiTabBarComponent,
     TuiTabBarItem,
     NetworkList,
-    PictureList
+    PictureList,
+    UserSettings
   ],
   templateUrl: './chat.html',
   styleUrl: './chat.scss',
@@ -43,6 +47,7 @@ export class Chat implements OnInit {
   router = inject(Router)
 
   routerOutletActive = signal(false)
+  userSettingsOpen = signal(true)
 
   navigationActiveIndex = 0
   // Mobile navigation //
@@ -81,7 +86,19 @@ export class Chat implements OnInit {
     this.indexedDb.openDatabase().then(async () => {
       const session = await this.serviceManager.sessionManager.loadPreferredSession()
       this.serviceManager.currentSession.set(session)
+      this.serviceManager.currentSessionHandler = new UserService(session.userData.userid, session.token, this.indexedDb.getApi())
       await WebSocketHandler.getInstance().connect(session.userData.userid, session.token)
+      try {
+        console.log("Updating sessions...")
+        const sessions = await this.serviceManager.sessionManager.loadSessions()
+        console.log("Updating sessions: saved sessions loaded...")
+        await this.serviceManager.sessionManager.updateSessions(sessions)
+        const session = await this.serviceManager.sessionManager.loadPreferredSession()
+        console.log("Updating sessions succeeded: updating sessions...")
+        this.serviceManager.currentSession.set(session)
+      } catch (e) {
+        console.warn("Session update failed, skipping...", e)
+      }
     })
 
     setTimeout(() => {

src/app/chat/user-settings/security/password/password.html

@@ -0,0 +1,80 @@
+<div class="option">
+  <ng-template [(tuiDialog)]="changePasswordDialogOpen"
+               [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changePasswordDialog.'+ (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate}">
+    <form [formGroup]="changePasswordForm" style="display: flex; flex-direction: column; gap: 10px">
+      @if (serviceManager.currentSession()!.userData.passwordSet) {
+        <tui-textfield iconStart="@tui.key">
+          <label
+            tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.currentPassword"|translate }}</label>
+          <input formControlName="currentPassword" tuiInput type="password">
+        </tui-textfield>
+
+        @if (changePasswordForm.controls['currentPassword'].dirty) {
+          @if (changePasswordForm.controls['currentPassword'].hasError("required")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changePasswordDialog.errors.currentPasswordRequired'|translate"></tui-error>
+          }
+
+          @if (changePasswordForm.controls['currentPassword'].hasError("incorrect")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changePasswordDialog.errors.incorrectPassword'|translate"></tui-error>
+          }
+        }
+      }
+
+      @if (!changePasswordRemoveMode()) {
+        <tui-textfield iconStart="@tui.badge-plus">
+          <label tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.newPassword"|translate }}</label>
+          <input formControlName="newPassword" tuiInput type="password">
+        </tui-textfield>
+
+        <tui-textfield iconStart="@tui.badge-plus">
+          <label
+            tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.newPasswordRepeat"|translate }}</label>
+          <input formControlName="newPasswordRepeat" tuiInput type="password">
+        </tui-textfield>
+      }
+    </form>
+
+    <footer>
+      <button tuiButton iconStart="@tui.check" [loading]="changePasswordPending()"
+              [disabled]="changePasswordForm.invalid || changePasswordPending()"
+              (click)="changePassword(changePasswordForm.controls['currentPassword'].value, changePasswordForm.controls['newPassword'].value)">
+        {{ ('chat.userSettingsDialog.security.changePasswordDialog.' + (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
+      </button>
+    </footer>
+  </ng-template>
+
+  <header>
+    <tui-icon icon="@tui.key"/>
+    <span>{{ "chat.userSettingsDialog.security.password"|translate }}</span>
+
+    @if (serviceManager.currentSession()!.userData.passwordSet) {
+      <div tuiBadge appearance="positive"
+           iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
+      </div>
+    } @else {
+      <div tuiBadge appearance="negative"
+           iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
+      </div>
+    }
+  </header>
+
+  <main>
+    <button tuiButton appearance="outline" (click)="openChangePasswordDialog(false)"
+            [iconStart]="serviceManager.currentSession()!.userData.passwordSet ? '@tui.pencil' : '@tui.plus'">
+      @if (serviceManager.currentSession()!.userData.passwordSet) {
+        {{ "chat.userSettingsDialog.security.changePassword"|translate }}
+      } @else {
+        {{ "chat.userSettingsDialog.security.setPassword"|translate }}
+      }
+    </button>
+
+    @if (serviceManager.currentSession()!.userData.passwordSet) {
+      <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x"
+              style="color: var(--tui-text-negative)" (click)="openChangePasswordDialog(true)">
+        {{ "chat.userSettingsDialog.security.removePassword"|translate }}
+      </button>
+    }
+  </main>
+</div>

src/app/chat/user-settings/security/password/password.scss

@@ -0,0 +1,3 @@
+:host {
+  width: 100%;
+}

src/app/chat/user-settings/security/password/password.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Password } from './password';
+
+describe('Password', () => {
+  let component: Password;
+  let fixture: ComponentFixture<Password>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Password],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Password);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chat/user-settings/security/password/password.ts

@@ -0,0 +1,91 @@
+import {Component, inject, signal} from '@angular/core';
+import {ServiceManager} from '../../../../service-manager';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators
+} from '@angular/forms';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TuiBadge, TuiButtonLoading} from '@taiga-ui/kit';
+import {
+  TuiButton,
+  TuiDialog,
+  TuiErrorComponent,
+  TuiIcon,
+  TuiInputDirective,
+  TuiLabel,
+  TuiTextfieldComponent
+} from '@taiga-ui/core';
+
+@Component({
+  selector: 'user-settings-security-password',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    TuiBadge,
+    TuiButton,
+    TuiButtonLoading,
+    TuiDialog,
+    TuiErrorComponent,
+    TuiIcon,
+    TuiInputDirective,
+    TuiLabel,
+    TuiTextfieldComponent
+  ],
+  templateUrl: './password.html',
+  styleUrl: './password.scss',
+})
+export class Password {
+  serviceManager = inject(ServiceManager)
+
+  changePasswordDialogOpen = signal(false)
+  changePasswordRemoveMode = signal(false)
+  changePasswordPending = signal(false)
+
+  changePasswordForm = new FormGroup({
+    currentPassword: new FormControl(""),
+    newPassword: new FormControl(""),
+    newPasswordRepeat: new FormControl("")
+  }, {
+    validators: [(group) => this.chkPassMatch(group)]
+  })
+
+  openChangePasswordDialog(modeRemove: boolean) {
+    this.changePasswordDialogOpen.set(true)
+    this.changePasswordRemoveMode.set(modeRemove)
+    this.changePasswordForm.controls["currentPassword"].clearValidators()
+    this.changePasswordForm.controls["newPassword"].clearValidators()
+    this.changePasswordForm.controls["newPasswordRepeat"].clearValidators()
+    if (!modeRemove) {
+      this.changePasswordForm.controls["newPassword"].setValidators([Validators.required])
+      this.changePasswordForm.controls["newPasswordRepeat"].setValidators([Validators.required])
+      this.changePasswordForm.controls["newPassword"].updateValueAndValidity()
+      this.changePasswordForm.controls["newPasswordRepeat"].updateValueAndValidity()
+    }
+
+    this.changePasswordForm.controls["currentPassword"].setValidators([Validators.required])
+    this.changePasswordForm.controls["currentPassword"].updateValueAndValidity()
+  }
+
+  async changePassword(currentPassword: string | null, newPassword: string | null) {
+    this.changePasswordPending.set(true)
+    const service = this.serviceManager.currentSessionHandler
+    if (service) {
+      try {
+        await service.changePassword(newPassword ?? "", currentPassword ?? "")
+      } catch (e) {
+        this.changePasswordForm.controls["currentPassword"].setErrors({incorrect: true})
+      }
+    }
+  }
+
+  chkPassMatch(group: AbstractControl): ValidationErrors | null {
+    return this.changePasswordRemoveMode() ? null : group.value.newPassword == group.value.newPasswordRepeat
+      ? null : {passMatchError: true};
+  }
+}

src/app/chat/user-settings/security/security.html

@@ -0,0 +1,76 @@
+<p>
+  <tui-icon icon="@tui.info"/>
+  {{ "chat.userSettingsDialog.security.label"|translate }}
+</p>
+<div id="options" tuiGroup orientation="vertical">
+  <user-settings-security-password/>
+
+  <div class="option">
+    <header>
+      <tui-icon icon="@tui.mail"/>
+      <span>{{ "chat.userSettingsDialog.security.email"|translate }}</span>
+
+      @if (serviceManager.currentSession()!.userData.phoneSet) {
+        <div tuiBadge appearance="positive"
+             iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
+        </div>
+      } @else {
+        <div tuiBadge appearance="negative"
+             iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
+        </div>
+      }
+    </header>
+
+    <main>
+      <button tuiButton appearance="outline"
+              [iconStart]="serviceManager.currentSession()!.userData.emailSet ? '@tui.pencil' : '@tui.plus'">
+        @if (serviceManager.currentSession()!.userData.phoneSet) {
+          {{ "chat.userSettingsDialog.security.changeMail"|translate }}
+        } @else {
+          {{ "chat.userSettingsDialog.security.setMail"|translate }}
+        }
+      </button>
+
+      @if (serviceManager.currentSession()!.userData.emailSet) {
+        <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x"
+                style="color: var(--tui-text-negative)">
+          {{ "chat.userSettingsDialog.security.removeMail"|translate }}
+        </button>
+      }
+    </main>
+  </div>
+  <div class="option">
+    <header>
+      <tui-icon icon="@tui.phone"/>
+      <span>{{ "chat.userSettingsDialog.security.phoneNumber"|translate }}</span>
+
+      @if (serviceManager.currentSession()!.userData.phoneSet) {
+        <div tuiBadge appearance="positive"
+             iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
+        </div>
+      } @else {
+        <div tuiBadge appearance="negative"
+             iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
+        </div>
+      }
+    </header>
+
+    <main>
+      <button tuiButton appearance="outline"
+              [iconStart]="serviceManager.currentSession()!.userData.phoneSet ? '@tui.pencil' : '@tui.plus'">
+        @if (serviceManager.currentSession()!.userData.phoneSet) {
+          {{ "chat.userSettingsDialog.security.changePhone"|translate }}
+        } @else {
+          {{ "chat.userSettingsDialog.security.setPhone"|translate }}
+        }
+      </button>
+
+      @if (serviceManager.currentSession()!.userData.phoneSet) {
+        <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x"
+                style="color: var(--tui-text-negative)">
+          {{ "chat.userSettingsDialog.security.removePhone"|translate }}
+        </button>
+      }
+    </main>
+  </div>
+</div>

src/app/chat/user-settings/security/security.scss

@@ -0,0 +1,33 @@
+#options {
+  display: flex;
+  flex-direction: column;
+
+  ::ng-deep .option {
+    width: 100%;
+    height: 60px;
+    background: var(--tui-background-base-alt);
+    padding: 15px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: 10px;
+
+    ::ng-deep header {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+
+    ::ng-deep main {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      display: flex;
+      gap: 5px;
+
+      button {
+        height: 35px;
+      }
+    }
+  }
+}

src/app/chat/user-settings/security/security.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Security } from './security';
+
+describe('Security', () => {
+  let component: Security;
+  let fixture: ComponentFixture<Security>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Security],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Security);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chat/user-settings/security/security.ts

@@ -0,0 +1,39 @@
+import {Component, inject, signal} from '@angular/core';
+import {TuiButton, TuiDialog, TuiErrorComponent, TuiGroup, TuiIcon, TuiInputDirective} from '@taiga-ui/core';
+import {TranslatePipe} from '@ngx-translate/core';
+import {ServiceManager} from '../../../service-manager';
+import {JsonPipe} from '@angular/common';
+import {TuiBadge, TuiButtonLoading, TuiInputColor} from '@taiga-ui/kit';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators
+} from '@angular/forms';
+import {Password} from './password/password';
+
+@Component({
+  selector: 'user-settings-security',
+  imports: [
+    TuiGroup,
+    TranslatePipe,
+    TuiIcon,
+    JsonPipe,
+    TuiBadge,
+    TuiButton,
+    TuiDialog,
+    ReactiveFormsModule,
+    TuiInputColor,
+    TuiInputDirective,
+    TuiButtonLoading,
+    TuiErrorComponent,
+    Password
+  ],
+  templateUrl: './security.html',
+  styleUrl: './security.scss',
+})
+export class Security {
+  serviceManager = inject(ServiceManager)
+}

src/app/chat/user-settings/user-settings.html

@@ -0,0 +1,24 @@
+<aside>
+  <header>
+    <tui-icon icon="@tui.cog"/>
+    <h2>{{ "chat.userSettingsDialog.label"|translate }}</h2>
+
+    <button tuiButtonX></button>
+  </header>
+
+  <div id="options">
+    @for (option of options; track option) {
+      <button tuiButton [iconStart]="'@tui.'+option.icon" [appearance]="selectedOption == option.name ? 'primary' : 'flat'" (click)="selectedOption = option.name">
+        {{"chat.userSettingsDialog.options."+option.name|translate}}
+      </button>
+    }
+  </div>
+</aside>
+
+<main>
+  @switch (selectedOption) {
+    @case ("security") {
+      <user-settings-security/>
+    }
+  }
+</main>

src/app/chat/user-settings/user-settings.scss

@@ -0,0 +1,50 @@
+:host {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 300px 1fr;
+
+  aside {
+    background-color: var(--tui-background-base-alt);
+    height: 100%;
+    width: 100%;
+    border-radius: 1.5rem 0 0 1.5rem;
+
+    header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 5px;
+      position: relative;
+
+      tui-icon {
+        font-size: 35px;
+      }
+
+      button {
+        position: absolute;
+        right: 25px;
+      }
+    }
+
+    #options {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      padding: 15px;
+
+      button {
+        width: 100%;
+        display: flex;
+        justify-content: start;
+      }
+    }
+  }
+
+  main {
+    background: var(--tui-background-neutral-2);
+    width: 100%;
+    border-radius: 0 1.5rem 1.5rem 0;
+    padding: 15px;
+  }
+}

src/app/chat/user-settings/user-settings.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserSettings } from './user-settings';
+
+describe('UserSettings', () => {
+  let component: UserSettings;
+  let fixture: ComponentFixture<UserSettings>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserSettings],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserSettings);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chat/user-settings/user-settings.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TuiButton, TuiButtonX, TuiIcon} from '@taiga-ui/core';
+import {Security} from './security/security';
+
+@Component({
+  selector: 'user-settings',
+  imports: [
+    TranslatePipe,
+    TuiIcon,
+    TuiButtonX,
+    TuiButton,
+    Security
+  ],
+  templateUrl: './user-settings.html',
+  styleUrl: './user-settings.scss',
+})
+export class UserSettings {
+  selectedOption = "security"
+  options = [
+    {
+      icon: "shield",
+      name: "security",
+    },
+    {
+      icon: "users",
+      name: "profile",
+    },
+    {
+      icon: "paint-roller",
+      name: "themes",
+    },
+    {
+      icon: "computer",
+      name: "sessions"
+    },
+    {
+      icon: "hard-drive",
+      name: "storage"
+    }
+  ]
+}

src/app/service-manager.ts

@@ -17,6 +17,8 @@ import {PictureService} from '@chatenium/chatenium-sdk/services/pictureService';
 import {Album} from '@chatenium/chatenium-sdk/domain/pictureService.schema';
 import {PublicUserData} from '@chatenium/chatenium-sdk/domain/common.schema';
 import {MessagesViewModel} from './chat/elements/messages/messages-viewmodel';
+import {AuthService} from '@chatenium/chatenium-sdk/services/authService';
+import {UserService} from '@chatenium/chatenium-sdk/services/userService';
 
 @Injectable({
   providedIn: 'root',
@@ -28,6 +30,7 @@ export class ServiceManager {
 
   sessionManager = new SessionManager(this.database.getApi(), this.keyring.getApi(), this.keyValue.getApi())
   currentSession = signal<Session | null>(null)
+  currentSessionHandler: UserService | null = null
 
   chatService: ChatService | null = null // Initialized in picture-list.ts
   chatsStatus = signal<LoadStatus>(LoadStatus.loading)

src/app/storage/indexed-db.ts

@@ -147,7 +147,7 @@ export class IndexedDB {
   delete(storeName: string, key: string): Promise<void> {
     return new Promise((resolve, reject) => {
       if (this.db) {
-        const transaction = this.db.transaction([storeName], "readonly");
+        const transaction = this.db.transaction([storeName], "readwrite");
         const store = transaction.objectStore(storeName);
         const request = store.delete(key);