Finished implementing user settings -> security

2026-04-19 12:37:52 +02:00
parent 20e67ecd85
commit 5f032c5098
22 changed files with 387 additions and 103 deletions
--- a/src/app/chat/user-settings/security/phone/phone.html
+++ b/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>