Finished implementing user settings -> security

package-lock.json

@@ -27,9 +27,11 @@
         "@taiga-ui/addon-table": "^5.1.0",
         "@taiga-ui/cdk": "^5.1.0",
         "@taiga-ui/core": "^5.1.0",
+        "@taiga-ui/i18n": "^5.2.0",
         "@taiga-ui/icons": "^5.1.0",
         "@taiga-ui/kit": "^5.1.0",
         "@taiga-ui/layout": "^5.1.0",
+        "libphonenumber-js": "^1.12.41",
         "ngx-cookie-service": "^21.3.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -4384,11 +4386,10 @@
       "peer": true
     },
     "node_modules/@taiga-ui/i18n": {
-      "version": "5.1.0",
+      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-5.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-5.2.0.tgz",
-      "integrity": "sha512-NqCo1fK95w6aXHkvIZ3aqZOA2z+CnvD/eEEXZjbCs/Ik6QfWmGP8GbS5uwb7SzqNZz9QiVaJi5RNZtoInHf/tQ==",
+      "integrity": "sha512-dyjp5hqDR272EPX+aQVtCXKiFKEUggdf1Y/Gcdt4JGZ0WqYR5n5CjP1EoKRG3GQcgd1mCSXnAt2BQJpujGcaHw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": ">=2.8.1"
       },
@@ -7061,8 +7062,7 @@
       "version": "1.12.41",
       "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.41.tgz",
       "integrity": "sha512-lsmMmGXBxXIK/VMLEj0kL6MtUs1kBGj1nTCzi6zgQoG1DEwqwt2DQyHxcLykceIxAnfE3hya7NuIh6PpC6S3fA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/listr2": {
       "version": "9.0.5",

package.json

@@ -30,9 +30,11 @@
     "@taiga-ui/addon-table": "^5.1.0",
     "@taiga-ui/cdk": "^5.1.0",
     "@taiga-ui/core": "^5.1.0",
+    "@taiga-ui/i18n": "^5.2.0",
     "@taiga-ui/icons": "^5.1.0",
     "@taiga-ui/kit": "^5.1.0",
     "@taiga-ui/layout": "^5.1.0",
+    "libphonenumber-js": "^1.12.41",
     "ngx-cookie-service": "^21.3.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

public/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "version": "Chatenium Nexum 3.0 Beta 8 (April 17, 2026)",
+  "version": "Chatenium Nexum 3.0 Beta 9 (April 19, 2026)",
   "ok": "Ok",
   "back": "Back",
   "aChatProgram": "A messaging platform that you can trust.",
@@ -111,6 +111,7 @@
           "label": "Change password",
           "labelSet": "Set password",
           "labelRemove": "Remove password",
+          "warn": "After you change your password, you will be logged out of all your sessions.",
           "currentPassword": "Current password",
           "newPassword": "New password",
           "newPasswordRepeat": "Repeat new password"
@@ -119,11 +120,22 @@
           "label": "Change e-mail address",
           "labelSet": "Set e-mail address",
           "labelRemove": "Remove e-mail address",
+          "warn": "After you change your e-mail address, you will be logged out of all your sessions.",
           "newMail": "New e-mail address",
           "currentPassword": "Current password",
           "oldCode": "Code sent to the old e-mail address",
           "newCode": "Code sent to the new e-mail address"
         },
+        "changePhoneDialog": {
+          "label": "Change phone number",
+          "labelSet": "Set phone number",
+          "labelRemove": "Remove phone number",
+          "warn": "After you change your phone number, you will be logged out of all your sessions.",
+          "newPhone": "New phone number",
+          "currentPassword": "Current password",
+          "oldCode": "Code sent to the old phone number",
+          "newCode": "Code sent to the new phone number"
+        },
         "label": "Keep your account safe by using as much sign in methods as possible. Also check your credentials regularly to keep them up to date.",
         "password": "Password",
         "set": "Set",
@@ -206,12 +218,8 @@
     "changeLogDialog": {
       "label": "Chatenium has been updated",
       "changeLog": {
-        "1": "Optimized the loading of chats and networks",
+        "1": "Started implementing user settings, Privacy & Security is now available.",
-        "2": "Added skeleton loaders for messages inside DMs and channels",
+        "2": "Enabled Chatenium Pictures on mobile devices."
-        "3": "Added tabs in networks",
-        "4": "Added option to edit network name",
-        "5": "Added option to change network visibility",
-        "6": "Fixed overflow issues in the mobile UI"
       }
     },
     "chatnav": {

src/app/app.config.ts

@@ -6,6 +6,8 @@ import {routes} from './app.routes';
 import {provideTranslateService} from '@ngx-translate/core';
 import {provideTranslateHttpLoader} from '@ngx-translate/http-loader';
 import {provideServiceWorker} from '@angular/service-worker';
+import {tuiInputPhoneInternationalOptionsProvider} from '@taiga-ui/kit';
+import {defer} from 'rxjs';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -25,6 +27,11 @@ export const appConfig: ApplicationConfig = {
     provideServiceWorker('ngsw-worker.js', {
       enabled: !isDevMode(),
       registrationStrategy: 'registerWhenStable:30000'
-    })
+    }),
+    tuiInputPhoneInternationalOptionsProvider({
+      metadata: defer(async () =>
+        import('libphonenumber-js/max/metadata').then((m) => m.default),
+      ),
+    }),
   ],
 };

src/app/chat/chat.html

@@ -4,10 +4,6 @@
   <ul>
     <li>{{ "chat.changeLogDialog.changeLog.1"|translate }}</li>
     <li>{{ "chat.changeLogDialog.changeLog.2"|translate }}</li>
-    <li>{{ "chat.changeLogDialog.changeLog.3"|translate }}</li>
-    <li>{{ "chat.changeLogDialog.changeLog.4"|translate }}</li>
-    <li>{{ "chat.changeLogDialog.changeLog.5"|translate }}</li>
-    <li>{{ "chat.changeLogDialog.changeLog.6"|translate }}</li>
   </ul>
 
   <button tuiButton iconStart="@tui.check"
@@ -16,7 +12,7 @@
 </ng-template>
 
 <ng-template [(tuiDialog)]="userSettingsOpen" [tuiDialogOptions]="{closable: false, appearance: 'taiga big'}" class="user-settings">
-  <user-settings/>
+  <user-settings (close)="userSettingsOpen.set(false)"/>
 </ng-template>
 
 @if (serviceManager.currentSession() == null) {
@@ -40,7 +36,7 @@
             </button>
           </tui-segmented>
 
-          <button id="bottom_btn" tuiButton appearance="flat" disabled>
+          <button id="bottom_btn" tuiButton [appearance]="userSettingsOpen() ? 'primary' : 'flat'" (click)="userSettingsOpen.set(true)">
             <tui-icon icon="@tui.cog"/>
           </button>
         </aside>
@@ -94,6 +90,13 @@
                 <network-list [token]="serviceManager.currentSession()!.token"
                               [userid]="serviceManager.currentSession()!.userData.userid"></network-list>
               }
+              @case (2) {
+                <app-picture-list [token]="serviceManager.currentSession()!.token"
+                              [userid]="serviceManager.currentSession()!.userData.userid"></app-picture-list>
+              }
+              @case (3) {
+                <user-settings/>
+              }
             }
           </div>
 
@@ -114,7 +117,7 @@
         </div>
       }
 
-      @if (router.url.startsWith("/chat/dm")) {
+      @if (router.url.startsWith("/chat/dm") || router.url.startsWith("/chat/picture")) {
         <!-- To ensure data is loaded -->
         @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
         <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>

src/app/chat/chat.ts

@@ -47,7 +47,7 @@ export class Chat implements OnInit {
   router = inject(Router)
 
   routerOutletActive = signal(false)
-  userSettingsOpen = signal(true)
+  userSettingsOpen = signal(false)
 
   navigationActiveIndex = 0
   // Mobile navigation //
@@ -65,12 +65,12 @@ export class Chat implements OnInit {
     {
       text: "chat.tabBar.tab3",
       icon: '@tui.image',
-      implemented: false,
+      implemented: true,
     },
     {
       text: "chat.tabBar.tab4",
       icon: '@tui.cog',
-      implemented: false,
+      implemented: true,
     }
   ];
 

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

@@ -1,13 +1,14 @@
-<div class="option">
+<div class="option" [class.mobile]="breakpoint() == 'mobile'">
   <ng-template [(tuiDialog)]="changeEmailDialogOpen"
                [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changeEmailDialog.'+ (changeEmailRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.emailSet ? 'label' : 'labelSet'))|translate}">
+    <p>{{ "chat.userSettingsDialog.security.changeEmailDialog.warn"|translate }}</p>
     @if (step() == 0) {
       <form [formGroup]="changeEmailForm" style="display: flex; flex-direction: column; gap: 10px">
         @if (!changeEmailRemoveMode()) {
           <tui-textfield iconStart="@tui.mail">
             <label
               tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.newMail"|translate }}</label>
-            <input formControlName="currentPassword" tuiInput type="email">
+            <input formControlName="newAddress" tuiInput type="email">
           </tui-textfield>
         }
 
@@ -32,23 +33,25 @@
       <footer>
         <button tuiButton iconStart="@tui.check" [loading]="changeEmailPending()"
                 [disabled]="changeEmailPending()"
-                (click)="changeEmail(changeEmailForm.controls['newAddress'].value, changeEmailForm.controls['currentPassword'].value)">
+                (click)="changeEmail(changeEmailForm.controls['currentPassword'].value, changeEmailForm.controls['newAddress'].value)">
           {{ ('chat.userSettingsDialog.security.changeEmailDialog.' + (changeEmailRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
         </button>
       </footer>
     } @else {
       <form style="display: flex; flex-direction: column; gap: 10px" [formGroup]="verifyEmailForm">
-        @if (!changeEmailRemoveMode()) {
+        @if (serviceManager.currentSession()!.userData.emailSet) {
           <tui-textfield iconStart="@tui.mail">
             <label tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.oldCode"|translate }}</label>
             <input tuiInput type="number" [step]="1" formControlName="oldCode">
           </tui-textfield>
         }
 
+        @if (!changeEmailRemoveMode()) {
           <tui-textfield iconStart="@tui.badge-plus">
             <label tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.newCode"|translate }}</label>
             <input tuiInput type="number" [step]="1" formControlName="newCode">
           </tui-textfield>
+        }
       </form>
 
       <footer>
@@ -87,7 +90,7 @@
     </button>
 
     @if (serviceManager.currentSession()!.userData.emailSet) {
-      <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x"
+      <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x" [disabled]="!serviceManager.currentSession()!.userData.phoneSet && !serviceManager.currentSession()!.userData.phoneSet"
               (click)="openChangeEmailDialog(true)"
               style="color: var(--tui-text-negative)">
         {{ "chat.userSettingsDialog.security.removeMail"|translate }}

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

@@ -2,6 +2,7 @@ import {Component, inject, signal} from '@angular/core';
 import {TranslatePipe} from '@ngx-translate/core';
 import {TuiBadge, TuiButtonLoading, TuiInputNumber} from '@taiga-ui/kit';
 import {
+  TUI_BREAKPOINT,
   TuiButton,
   TuiDialog,
   TuiErrorComponent,
@@ -41,6 +42,7 @@ import {
 })
 export class Email {
   serviceManager = inject(ServiceManager)
+  breakpoint = inject(TUI_BREAKPOINT)
 
   step = signal(0)
   changeEmailDialogOpen = signal(false)
@@ -74,18 +76,22 @@ export class Email {
   }
 
   async changeEmail(currentPassword: string | null, newMail: string | null) {
+    if (this.changeEmailRemoveMode()) {
+      newMail = "remove"
+    }
     this.changeEmailPending.set(true)
     const service = this.serviceManager.currentSessionHandler
     if (service) {
       try {
         await service.changeEmail(newMail ?? "", currentPassword ?? "")
-        if (!this.changeEmailRemoveMode()) {
-          this.newAddress = newMail ?? ""
-          this.verifyEmailForm.controls["oldCode"].setValidators([Validators.required])
         this.step.set(1)
+        this.newAddress = newMail ?? ""
+        if (!this.changeEmailRemoveMode()) {
+          this.verifyEmailForm.controls["oldCode"].setValidators([Validators.required])
         }
       } catch (e) {
         this.changeEmailForm.controls["currentPassword"].setErrors({incorrect: true})
+        this.changeEmailPending.set(false)
       }
     }
   }
@@ -99,6 +105,7 @@ export class Email {
         this.changeEmailDialogOpen.set(false)
       } catch (e) {
         this.verifyEmailForm.controls["newCode"].setErrors({incorrect: true})
+        this.verifyEmailPending.set(false)
       }
     }
   }

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

@@ -1,6 +1,7 @@
-<div class="option">
+<div class="option" [class.mobile]="breakpoint() == 'mobile'">
   <ng-template [(tuiDialog)]="changePasswordDialogOpen"
                [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changePasswordDialog.'+ (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate}">
+    <p>{{"chat.userSettingsDialog.security.changePasswordDialog.warn"|translate}}</p>
     <form [formGroup]="changeEmailForm" style="display: flex; flex-direction: column; gap: 10px">
       @if (serviceManager.currentSession()!.userData.passwordSet) {
         <tui-textfield iconStart="@tui.key">
@@ -71,7 +72,7 @@
     </button>
 
     @if (serviceManager.currentSession()!.userData.passwordSet) {
-      <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x"
+      <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x" [disabled]="!serviceManager.currentSession()!.userData.phoneSet && !serviceManager.currentSession()!.userData.emailSet"
               style="color: var(--tui-text-negative)" (click)="openChangePasswordDialog(true)">
         {{ "chat.userSettingsDialog.security.removePassword"|translate }}
       </button>

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

@@ -12,6 +12,7 @@ import {
 import {TranslatePipe} from '@ngx-translate/core';
 import {TuiBadge, TuiButtonLoading} from '@taiga-ui/kit';
 import {
+  TUI_BREAKPOINT,
   TuiButton,
   TuiDialog,
   TuiErrorComponent,
@@ -42,6 +43,7 @@ import {
 })
 export class Password {
   serviceManager = inject(ServiceManager)
+  breakpoint = inject(TUI_BREAKPOINT)
 
   changePasswordDialogOpen = signal(false)
   changePasswordRemoveMode = signal(false)

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

@@ -0,0 +1,99 @@
+<div class="option" [class.mobile]="breakpoint() == 'mobile'">
+  <ng-template [(tuiDialog)]="changePhoneDialogOpen"
+               [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changePhoneDialog.'+ (changePhoneRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.phoneSet ? 'label' : 'labelSet'))|translate}">
+    <p>{{ "chat.userSettingsDialog.security.changePhoneDialog.warn"|translate }}</p>
+    @if (step() == 0) {
+      <form [formGroup]="changePhoneForm" style="display: flex; flex-direction: column; gap: 10px">
+        @if (!changePhoneRemoveMode()) {
+          <tui-textfield>
+            <label
+              tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.newPhone"|translate }}</label>
+            <input formControlName="newNumber" tuiInputPhoneInternational [countrySearch]="true" [countries]="countries | tuiSortCountries" [(countryIsoCode)]="countryIsoCode">
+          </tui-textfield>
+        }
+
+        <tui-textfield iconStart="@tui.key">
+          <label tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.currentPassword"|translate }}</label>
+          <input formControlName="currentPassword" tuiInput type="password">
+        </tui-textfield>
+
+        @if (changePhoneForm.controls['currentPassword'].dirty) {
+          @if (changePhoneForm.controls['currentPassword'].hasError("required")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changePhoneDialog.errors.currentPasswordRequired'|translate"></tui-error>
+          }
+
+          @if (changePhoneForm.controls['currentPassword'].hasError("incorrect")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changePhoneDialog.errors.incorrectPassword'|translate"></tui-error>
+          }
+        }
+      </form>
+
+      <footer>
+        <button tuiButton iconStart="@tui.check" [loading]="changePhonePending()"
+                [disabled]="changePhonePending()"
+                (click)="changePhone(changePhoneForm.controls['currentPassword'].value, changePhoneForm.controls['newNumber'].value)">
+          {{ ('chat.userSettingsDialog.security.changePhoneDialog.' + (changePhoneRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
+        </button>
+      </footer>
+    } @else {
+      <form style="display: flex; flex-direction: column; gap: 10px" [formGroup]="verifyPhoneForm">
+        @if (serviceManager.currentSession()!.userData.phoneSet) {
+          <tui-textfield iconStart="@tui.phone">
+            <label tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.oldCode"|translate }}</label>
+            <input tuiInput type="number" [step]="1" formControlName="oldCode">
+          </tui-textfield>
+        }
+
+        @if (!changePhoneRemoveMode()) {
+          <tui-textfield iconStart="@tui.badge-plus">
+            <label tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.newCode"|translate }}</label>
+            <input tuiInput type="number" [step]="1" formControlName="newCode">
+          </tui-textfield>
+        }
+      </form>
+
+      <footer>
+        <button tuiButton iconStart="@tui.check" [loading]="verifyPhonePending()"
+                [disabled]="verifyPhoneForm.invalid || verifyPhonePending()"
+                (click)="verifyPhone(verifyPhoneForm.controls['newCode'].value, verifyPhoneForm.controls['oldCode'].value)">
+          {{ ('chat.userSettingsDialog.security.changePhoneDialog.' + (changePhoneRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
+        </button>
+      </footer>
+    }
+  </ng-template>
+
+  <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" (click)="openChangePhoneDialog(false)"
+            [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 [disabled]="!serviceManager.currentSession()!.userData.passwordSet && !serviceManager.currentSession()!.userData.emailSet" tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x" (click)="openChangePhoneDialog(true)"
+              style="color: var(--tui-text-negative)">
+        {{ "chat.userSettingsDialog.security.removePhone"|translate }}
+      </button>
+    }
+  </main>
+</div>

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

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

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

@@ -0,0 +1,111 @@
+import {Component, inject, signal} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TuiBadge, TuiButtonLoading, TuiInputPhoneInternationalComponent, TuiSortCountriesPipe} from '@taiga-ui/kit';
+import {
+  TUI_BREAKPOINT,
+  TuiButton,
+  TuiDialog,
+  TuiErrorComponent,
+  TuiIcon,
+  TuiInputDirective,
+  TuiLabel,
+  TuiTextfieldComponent
+} from '@taiga-ui/core';
+import {ServiceManager} from '../../../../service-manager';
+import {getCountries} from 'libphonenumber-js';
+import {TuiCountryIsoCode} from '@taiga-ui/i18n';
+
+@Component({
+  selector: 'user-settings-security-phone',
+  imports: [
+    ReactiveFormsModule,
+    TranslatePipe,
+    TuiBadge,
+    TuiButton,
+    TuiButtonLoading,
+    TuiDialog,
+    TuiErrorComponent,
+    TuiIcon,
+    TuiInputDirective,
+    TuiLabel,
+    TuiTextfieldComponent,
+    TuiInputPhoneInternationalComponent,
+    TuiSortCountriesPipe
+  ],
+  templateUrl: './phone.html',
+  styleUrl: './phone.scss',
+})
+export class Phone {
+  protected readonly countries = getCountries();
+  protected countryIsoCode: TuiCountryIsoCode = 'HU';
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  serviceManager = inject(ServiceManager)
+
+  step = signal(0)
+  changePhoneDialogOpen = signal(false)
+  changePhoneRemoveMode = signal(false)
+  changePhonePending = signal(false)
+  verifyPhonePending = signal(false)
+  newNumber = ""
+
+  changePhoneForm = new FormGroup({
+    newNumber: new FormControl(""),
+    currentPassword: new FormControl(""),
+  })
+
+  verifyPhoneForm = new FormGroup({
+    oldCode: new FormControl(0),
+    newCode: new FormControl(0, {validators: [Validators.required]})
+  })
+
+  openChangePhoneDialog(modeRemove: boolean) {
+    this.changePhoneDialogOpen.set(true)
+    this.changePhoneRemoveMode.set(modeRemove)
+    this.changePhoneForm.controls["currentPassword"].clearValidators()
+    this.changePhoneForm.controls["newNumber"].clearValidators()
+    if (!modeRemove) {
+      this.changePhoneForm.controls["newNumber"].setValidators([Validators.required])
+      this.changePhoneForm.controls["newNumber"].updateValueAndValidity()
+    }
+
+    this.changePhoneForm.controls["currentPassword"].setValidators([Validators.required])
+    this.changePhoneForm.controls["currentPassword"].updateValueAndValidity()
+  }
+
+  async changePhone(currentPassword: string | null, newNumber: string | null) {
+    if (this.changePhoneRemoveMode()) {
+      newNumber = "remove"
+    }
+    this.changePhonePending.set(true)
+    const service = this.serviceManager.currentSessionHandler
+    if (service) {
+      try {
+        await service.changePhoneNumber(currentPassword ?? "", newNumber ?? "")
+        this.step.set(1)
+        this.newNumber = newNumber ?? ""
+        if (!this.changePhoneRemoveMode()) {
+          this.verifyPhoneForm.controls["oldCode"].setValidators([Validators.required])
+        }
+      } catch (e) {
+        this.changePhoneForm.controls["currentPassword"].setErrors({incorrect: true})
+        this.changePhonePending.set(false)
+      }
+    }
+  }
+
+  async verifyPhone(newCode: number | null, oldCode: number | null) {
+    this.verifyPhonePending.set(true)
+    const service = this.serviceManager.currentSessionHandler
+    if (service) {
+      try {
+        await service.verifyPhoneNumberChange(this.newNumber, oldCode ?? 0, newCode ?? 0)
+        this.changePhoneDialogOpen.set(false)
+      } catch (e) {
+        this.verifyPhoneForm.controls["newCode"].setErrors({incorrect: true})
+        this.verifyPhonePending.set(false)
+      }
+    }
+  }
+}

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

@@ -5,38 +5,5 @@
 <div id="options" tuiGroup orientation="vertical">
   <user-settings-security-password/>
   <user-settings-security-email/>
-  <div class="option">
+  <user-settings-security-phone/>
-    <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

@@ -12,6 +12,18 @@
     align-items: center;
     gap: 10px;
 
+    &.mobile {
+      grid-template-rows: 50px 50px;
+      grid-template-columns: 1fr;
+      height: 150px;
+
+      main {
+        display: flex;
+        justify-content: start;
+        flex-direction: column;
+      }
+    }
+
     ::ng-deep header {
       display: flex;
       gap: 5px;

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

@@ -14,6 +14,7 @@ import {
 } from '@angular/forms';
 import {Password} from './password/password';
 import {Email} from './email/email';
+import {Phone} from './phone/phone';
 
 @Component({
   selector: 'user-settings-security',
@@ -31,7 +32,8 @@ import {Email} from './email/email';
     TuiButtonLoading,
     TuiErrorComponent,
     Password,
-    Email
+    Email,
+    Phone
   ],
   templateUrl: './security.html',
   styleUrl: './security.scss',

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

@@ -1,24 +1,38 @@
+<div id="layout" [class.mobile]="breakpoint() != 'desktopLarge'">
+  @if (breakpoint() == "desktopLarge" || selectedOption == "") {
     <aside>
       <header>
         <tui-icon icon="@tui.cog"/>
         <h2>{{ "chat.userSettingsDialog.label"|translate }}</h2>
 
-    <button tuiButtonX></button>
+        @if (breakpoint() != "mobile") {
+          <button tuiButtonX (click)="close.emit()"></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">
+          <button [disabled]="!option.implemented" tuiButton [iconStart]="'@tui.'+option.icon" [appearance]="selectedOption == option.name ? 'primary' : 'flat'" (click)="selectedOption = option.name">
             {{"chat.userSettingsDialog.options."+option.name|translate}}
           </button>
         }
       </div>
     </aside>
+  }
 
+  @if (breakpoint() == "desktopLarge" || selectedOption != "") {
     <main>
+      @if (breakpoint() != "desktopLarge") {
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <button tuiButton appearance="flat" iconStart="@tui.arrow-left" (click)="selectedOption = ''"></button>
+          <h3>{{"chat.userSettingsDialog.options."+selectedOption|translate}}</h3>
+        </div>
+      }
       @switch (selectedOption) {
         @case ("security") {
           <user-settings-security/>
         }
       }
     </main>
+  }
+</div>

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

@@ -1,9 +1,18 @@
-:host {
+#layout {
   height: 100%;
   width: 100%;
   display: grid;
   grid-template-columns: 300px 1fr;
 
+  &.mobile {
+    grid-template-columns: 1fr;
+
+    aside, main {
+      border-radius: 1.5rem;
+      background: transparent;
+    }
+  }
+
   aside {
     background-color: var(--tui-background-base-alt);
     height: 100%;

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

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import {Component, EventEmitter, inject, OnInit, Output} from '@angular/core';
 import {TranslatePipe} from '@ngx-translate/core';
-import {TuiButton, TuiButtonX, TuiIcon} from '@taiga-ui/core';
+import {TUI_BREAKPOINT, TuiButton, TuiButtonX, TuiIcon} from '@taiga-ui/core';
 import {Security} from './security/security';
 
 @Component({
@@ -15,28 +15,43 @@ import {Security} from './security/security';
   templateUrl: './user-settings.html',
   styleUrl: './user-settings.scss',
 })
-export class UserSettings {
+export class UserSettings implements OnInit {
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  @Output() close = new EventEmitter<void>()
+
   selectedOption = "security"
   options = [
     {
       icon: "shield",
       name: "security",
+      implemented: true,
     },
     {
       icon: "users",
       name: "profile",
+      implemented: false,
     },
     {
       icon: "paint-roller",
       name: "themes",
+      implemented: false,
     },
     {
       icon: "computer",
-      name: "sessions"
+      name: "sessions",
+      implemented: false,
     },
     {
       icon: "hard-drive",
-      name: "storage"
+      name: "storage",
+      implemented: false,
     }
   ]
+
+  ngOnInit() {
+    if (this.breakpoint() != "desktopLarge") {
+      this.selectedOption = ""
+    }
+  }
 }

src/environments/environment.development.ts

@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta8",
+  version: "3.0-beta9",
   api_url: "http://localhost:3000",
   cdn_url: "http://localhost:4000",
   ws_url: "ws://localhost:3000",

src/environments/environment.ts

@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta8",
+  version: "3.0-beta9",
   api_url: "https://api.chatenium.hu",
   cdn_url: "https://cdn.chatenium.hu",
   ws_url: "wss://api.chatenium.hu",