fix: country flag and phone now in sync (#6727)

* fix: country flag and phone now in sync * change default country --------- Co-authored-by: Elio Bischof <eliobischof@gmail.com> Co-authored-by: Elio Bischof <elio@zitadel.com>
2025-02-28 21:57:23 +00:00 · 2023-10-24 15:47:44 +02:00 · 2023-10-24 15:47:44 +02:00 · 6f82285ad6
commit 6f82285ad6
parent 36eeae1071
19 changed files with 102 additions and 40 deletions
--- a/console/src/app/pages/users/user-create/user-create.component.html
+++ b/console/src/app/pages/users/user-create/user-create.component.html
@ -103,7 +103,12 @@
        <div class="phone-grid">
          <cnsl-form-field>
            <cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
-            <mat-select [(value)]="selected" (selectionChange)="setCountryCallingCode()" data-cy="country-calling-code">
+            <mat-select
+              [(value)]="selected"
+              [compareWith]="compareCountries"
+              (selectionChange)="setCountryCallingCode()"
+              data-cy="country-calling-code"
+            >
              <mat-select-trigger> <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span></mat-select-trigger>
              <mat-option *ngFor="let country of countryPhoneCodes" [value]="country">
                <span class="fi fi-{{ country.countryCode | lowercase }}"></span>
--- a/console/src/app/pages/users/user-create/user-create.component.ts
+++ b/console/src/app/pages/users/user-create/user-create.component.ts
@ -2,7 +2,7 @@ import { Location } from '@angular/common';
 import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { Subject } from 'rxjs';
+import { Subject, debounceTime } from 'rxjs';
 import { AddHumanUserRequest } from 'src/app/proto/generated/zitadel/management_pb';
 import { Domain } from 'src/app/proto/generated/zitadel/org_pb';
 import { PasswordComplexityPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
@ -35,7 +35,11 @@ export class UserCreateComponent implements OnInit, OnDestroy {
  public user: AddHumanUserRequest.AsObject = new AddHumanUserRequest().toObject();
  public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
  public languages: string[] = supportedLanguages;
-  public selected: CountryPhoneCode | undefined;
+  public selected: CountryPhoneCode | undefined = {
+    countryCallingCode: '1',
+    countryCode: 'US',
+    countryName: 'United States of America',
+  };
  public countryPhoneCodes: CountryPhoneCode[] = [];
  public userForm!: UntypedFormGroup;
  public pwdForm!: UntypedFormGroup;
@ -145,6 +149,14 @@ export class UserCreateComponent implements OnInit, OnDestroy {
        });
      }
    });
+
+    this.phone?.valueChanges.pipe(debounceTime(200)).subscribe((value: string) => {
+      const phoneNumber = formatPhone(value);
+      if (phoneNumber) {
+        this.selected = this.countryPhoneCodes.find((code) => code.countryCode === phoneNumber.country);
+        this.phone?.setValue(phoneNumber.phone);
+      }
+    });
  }

  public createUser(): void {
@ -175,8 +187,10 @@ export class UserCreateComponent implements OnInit, OnDestroy {
    if (this.phone && this.phone.value) {
      // Try to parse number and format it according to country
      const phoneNumber = formatPhone(this.phone.value);
-      this.selected = this.countryPhoneCodes.find((code) => code.countryCode === phoneNumber.country);
-      humanReq.setPhone(new AddHumanUserRequest.Phone().setPhone(phoneNumber.phone));
+      if (phoneNumber) {
+        this.selected = this.countryPhoneCodes.find((code) => code.countryCode === phoneNumber.country);
+        humanReq.setPhone(new AddHumanUserRequest.Phone().setPhone(phoneNumber.phone));
+      }
    }

    this.mgmtService
@ -258,4 +272,14 @@ export class UserCreateComponent implements OnInit, OnDestroy {
      return;
    }
  }
+
+  public compareCountries(i1: CountryPhoneCode, i2: CountryPhoneCode) {
+    return (
+      i1 &&
+      i2 &&
+      i1.countryCallingCode === i2.countryCallingCode &&
+      i1.countryCode == i2.countryCode &&
+      i1.countryName == i2.countryName
+    );
+  }
 }
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
@ -303,7 +303,10 @@ export class AuthUserDetailComponent implements OnDestroy {
  public savePhone(phone: string): void {
    if (this.user?.human) {
      // Format phone before save (add +)
-      phone = formatPhone(phone).phone;
+      const formattedPhone = formatPhone(phone);
+      if (formattedPhone) {
+        phone = formattedPhone.phone;
+      }

      this.userService
        .setMyPhone(phone)
--- a/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.html
@ -7,7 +7,7 @@
    <div class="phone-grid">
      <cnsl-form-field *ngIf="isPhone">
        <cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
-        <mat-select [(value)]="selected" (selectionChange)="setCountryCallingCode()">
+        <mat-select [(value)]="selected" [compareWith]="compareCountries" (selectionChange)="setCountryCallingCode()">
          <mat-select-trigger> <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span></mat-select-trigger>
          <mat-option *ngFor="let country of countryPhoneCodes" [value]="country">
            <span class="fi fi-{{ country.countryCode | lowercase }}"></span>
--- a/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts
@ -4,6 +4,7 @@ import {
  MatLegacyDialogRef as MatDialogRef,
  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
 } from '@angular/material/legacy-dialog';
+import { debounceTime } from 'rxjs';
 import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
 import { CountryCallingCodesService, CountryPhoneCode } from 'src/app/services/country-calling-codes.service';
 import { formatPhone } from 'src/app/utils/formatPhone';
@ -22,10 +23,14 @@ export class EditDialogComponent implements OnInit {
  public controlKey = 'editingField';
  public isPhone: boolean = false;
  public isVerified: boolean = false;
-  public phoneCountry: string = 'CH';
+  public phoneCountry: string = 'US';
  public dialogForm!: UntypedFormGroup;
  public EditDialogType: any = EditDialogType;
-  public selected: CountryPhoneCode | undefined;
+  public selected: CountryPhoneCode | undefined = {
+    countryCallingCode: '1',
+    countryCode: 'US',
+    countryName: 'United States of America',
+  };
  public countryPhoneCodes: CountryPhoneCode[] = [];
  constructor(
    public dialogRef: MatDialogRef<EditDialogComponent>,
@ -38,6 +43,16 @@ export class EditDialogComponent implements OnInit {
    this.dialogForm = new FormGroup({
      [this.controlKey]: new UntypedFormControl(data.value, data.validator || requiredValidator),
    });
+
+    if (this.isPhone) {
+      this.ctrl?.valueChanges.pipe(debounceTime(200)).subscribe((value: string) => {
+        const phoneNumber = formatPhone(value);
+        if (phoneNumber) {
+          this.selected = this.countryPhoneCodes.find((code) => code.countryCode === phoneNumber.country);
+          this.ctrl?.setValue(phoneNumber.phone);
+        }
+      });
+    }
  }

  public setCountryCallingCode(): void {
@ -52,8 +67,10 @@ export class EditDialogComponent implements OnInit {
      // Get country phone codes and set selected flag to guessed country or default country
      this.countryPhoneCodes = this.countryCallingCodesService.getCountryCallingCodes();
      const phoneNumber = formatPhone(this.dialogForm.controls[this.controlKey]?.value);
-      this.selected = this.countryPhoneCodes.find((code) => code.countryCode === phoneNumber.country);
-      this.dialogForm.controls[this.controlKey].setValue(phoneNumber.phone);
+      if (phoneNumber) {
+        this.selected = this.countryPhoneCodes.find((code) => code.countryCode === phoneNumber.country);
+        this.dialogForm.controls[this.controlKey].setValue(phoneNumber.phone);
+      }
    }
  }

@ -68,4 +85,14 @@ export class EditDialogComponent implements OnInit {
  public get ctrl() {
    return this.dialogForm.get(this.controlKey);
  }
+
+  public compareCountries(i1: CountryPhoneCode, i2: CountryPhoneCode) {
+    return (
+      i1 &&
+      i2 &&
+      i1.countryCallingCode === i2.countryCallingCode &&
+      i1.countryCode == i2.countryCode &&
+      i1.countryName == i2.countryName
+    );
+  }
 }
--- a/console/src/app/pages/users/user-detail/phone-detail/phone-detail.component.ts
+++ b/console/src/app/pages/users/user-detail/phone-detail/phone-detail.component.ts
@ -13,7 +13,7 @@ export class PhoneDetailComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['phone'].currentValue) {
      const phoneNumber = formatPhone(changes['phone'].currentValue);
-      if (this.phone !== phoneNumber.phone) {
+      if (phoneNumber && this.phone !== phoneNumber.phone) {
        this.phone = phoneNumber.phone;
        this.country = phoneNumber.country;
      }
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
@ -365,7 +365,10 @@ export class UserDetailComponent implements OnInit {
  public savePhone(phone: string): void {
    if (this.user.id && phone) {
      // Format phone before save (add +)
-      phone = formatPhone(phone).phone;
+      const formattedPhone = formatPhone(phone);
+      if (formattedPhone) {
+        phone = formattedPhone.phone;
+      }

      this.mgmtUserService
        .updateHumanPhone(this.user.id, phone)
--- a/console/src/app/utils/formatPhone.ts
+++ b/console/src/app/utils/formatPhone.ts
@ -1,7 +1,7 @@
 import { CountryCode, parsePhoneNumber } from 'libphonenumber-js';

-export function formatPhone(phone: string): { phone: string; country: CountryCode } {
-  const defaultCountry = 'CH';
+export function formatPhone(phone: string): { phone: string; country: CountryCode } | null {
+  const defaultCountry = 'US';

  if (phone) {
    try {
@ -10,10 +10,10 @@ export function formatPhone(phone: string): { phone: string; country: CountryCod
      if (phoneNumber) {
        return { phone: phoneNumber.formatInternational(), country };
      }
-    } catch (error) {
-      console.error(error);
+    } catch (e) {
+      return null;
    }
  }

-  return { phone, country: defaultCountry };
+  return null;
 }
--- a/console/src/assets/i18n/bg.json
+++ b/console/src/assets/i18n/bg.json
@ -267,7 +267,7 @@
    "SYMBOLERROR": "Трябва да включва символ или препинателен знак.",
    "NUMBERERROR": "Трябва да включва цифра.",
    "PWNOTEQUAL": "Предоставените пароли не съвпадат.",
-    "PHONE": "Телефонният номер трябва да започва с 00 или ."
+    "PHONE": "Телефонният номер трябва да започва с +."
  },
  "USER": {
    "SETTINGS": {
@ -479,7 +479,7 @@
      "TITLE": "Профил",
      "EMAIL": "Електронна поща",
      "PHONE": "Телефонен номер",
-      "PHONE_HINT": "Използвайте 00 или символа, последван от кода на държавата, на която се обаждате, или изберете държавата от падащото меню и накрая въведете телефонния номер",
+      "PHONE_HINT": "Използвайте символа +, последван от кода на държавата, на която се обаждате, или изберете държавата от падащото меню и накрая въведете телефонния номер",
      "USERNAME": "Потребителско име",
      "CHANGEUSERNAME": "променям",
      "CHANGEUSERNAME_TITLE": "Промяна на потребителското име",
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@ -273,7 +273,7 @@
    "SYMBOLERROR": "Muss ein Symbol/Satzzeichen beinhalten.",
    "NUMBERERROR": "Muss eine Ziffer beinhalten.",
    "PWNOTEQUAL": "Die Passwörter stimmen nicht überein.",
-    "PHONE": "Die Telefonnummer muss mit 00 oder + starten."
+    "PHONE": "Die Telefonnummer muss mit + starten."
  },
  "USER": {
    "SETTINGS": {
@ -485,7 +485,7 @@
      "TITLE": "Profil",
      "EMAIL": "E-Mail",
      "PHONE": "Telefonnummer",
-      "PHONE_HINT": "Verwenden Sie 00 oder das Symbol + gefolgt von der Landesvorwahl des Anrufers oder wählen Sie das Land aus der Dropdown-Liste aus und geben anschließend die Telefonnummer ein",
+      "PHONE_HINT": "Verwenden das Symbol + gefolgt von der Landesvorwahl des Anrufers oder wählen Sie das Land aus der Dropdown-Liste aus und geben anschließend die Telefonnummer ein",
      "USERNAME": "Benutzername",
      "CHANGEUSERNAME": "bearbeiten",
      "CHANGEUSERNAME_TITLE": "Benutzername ändern",
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@ -274,7 +274,7 @@
    "SYMBOLERROR": "Must include a symbol or punctuation mark.",
    "NUMBERERROR": "Must include a digit.",
    "PWNOTEQUAL": "The passwords provided do not match.",
-    "PHONE": "The phone number must start with 00 or +."
+    "PHONE": "The phone number must start with +."
  },
  "USER": {
    "SETTINGS": {
@ -486,7 +486,7 @@
      "TITLE": "Profile",
      "EMAIL": "E-mail",
      "PHONE": "Phone number",
-      "PHONE_HINT": "Use 00 or the + symbol followed by the calling country code, or select the country from the dropdown and finally enter the phone number",
+      "PHONE_HINT": "Use the + symbol followed by the calling country code, or select the country from the dropdown and finally enter the phone number",
      "USERNAME": "User Name",
      "CHANGEUSERNAME": "modify",
      "CHANGEUSERNAME_TITLE": "Change username",
--- a/console/src/assets/i18n/es.json
+++ b/console/src/assets/i18n/es.json
@ -274,7 +274,7 @@
    "SYMBOLERROR": "Debe incluir un símbolo o un signo de puntuación.",
    "NUMBERERROR": "Debe incluir un dígito.",
    "PWNOTEQUAL": "Las contraseñas proporcionadas no coinciden.",
-    "PHONE": "El número de teléfono debe comenzar con 00 o +."
+    "PHONE": "El número de teléfono debe comenzar con +."
  },
  "USER": {
    "SETTINGS": {
@ -486,7 +486,7 @@
      "TITLE": "Perfil",
      "EMAIL": "Email",
      "PHONE": "Número de teléfono",
-      "PHONE_HINT": "Usa 00 o el símbolo + seguido del prefijo del país o selecciona el país del menú desplegable y finalmente introduce el número de teléfono",
+      "PHONE_HINT": "Usa el símbolo + seguido del prefijo del país o selecciona el país del menú desplegable y finalmente introduce el número de teléfono",
      "USERNAME": "Nombre de usuario",
      "CHANGEUSERNAME": "modificar",
      "CHANGEUSERNAME_TITLE": "Cambiar nombre de usuario",
--- a/console/src/assets/i18n/fr.json
+++ b/console/src/assets/i18n/fr.json
@ -273,7 +273,7 @@
    "SYMBOLERROR": "Doit inclure un symbole ou un signe de ponctuation.",
    "NUMBERERROR": "Doit inclure un chiffre.",
    "PWNOTEQUAL": "Les mots de passe fournis ne correspondent pas.",
-    "PHONE": "Le numéro de téléphone doit commencer par 00 ou +."
+    "PHONE": "Le numéro de téléphone doit commencer par +."
  },
  "USER": {
    "SETTINGS": {
@ -485,7 +485,7 @@
      "TITLE": "Profil",
      "EMAIL": "Courriel",
      "PHONE": "Numéro de téléphone",
-      "PHONE_HINT": "Utilisez 00 ou le symbole + suivi de l'indicatif du pays de l'appelant, ou sélectionnez le pays dans la liste déroulante et saisissez enfin le numéro de téléphone",
+      "PHONE_HINT": "Utilisez le symbole + suivi de l'indicatif du pays de l'appelant, ou sélectionnez le pays dans la liste déroulante et saisissez enfin le numéro de téléphone",
      "USERNAME": "Nom de l'utilisateur",
      "CHANGEUSERNAME": "modifier",
      "CHANGEUSERNAME_TITLE": "Modifier le nom d'utilisateur",
--- a/console/src/assets/i18n/it.json
+++ b/console/src/assets/i18n/it.json
@ -272,7 +272,7 @@
    "SYMBOLERROR": "Deve includere un simbolo o un segno di punteggiatura.",
    "NUMBERERROR": "Deve includere una cifra.",
    "PWNOTEQUAL": "Le password fornite non corrispondono.",
-    "PHONE": "Il numero di telefono deve iniziare con 00 o +."
+    "PHONE": "Il numero di telefono deve iniziare con +."
  },
  "USER": {
    "SETTINGS": {
@ -484,7 +484,7 @@
      "TITLE": "Profilo",
      "EMAIL": "E-mail",
      "PHONE": "Numero di telefono",
-      "PHONE_HINT": "Utilizza 00 o il simbolo + seguito dal prefisso del paese, o seleziona il paese ed inserisci il numero di telefono",
+      "PHONE_HINT": "Utilizza il simbolo + seguito dal prefisso del paese, o seleziona il paese ed inserisci il numero di telefono",
      "USERNAME": "Nome utente",
      "CHANGEUSERNAME": "cambia",
      "CHANGEUSERNAME_TITLE": "Cambia nome utente",
--- a/console/src/assets/i18n/ja.json
+++ b/console/src/assets/i18n/ja.json
@ -274,7 +274,7 @@
    "SYMBOLERROR": "シンボルや句読点を含める必要があります。",
    "NUMBERERROR": "小数点を含める必要があります。",
    "PWNOTEQUAL": "パスワードが一致しません。",
-    "PHONE": "電話番号は00か+で始まる必要があります。"
+    "PHONE": "電話番号は + で始まる必要があります。"
  },
  "USER": {
    "SETTINGS": {
@ -486,7 +486,7 @@
      "TITLE": "プロフィール",
      "EMAIL": "Eメール",
      "PHONE": "電話番号",
-      "PHONE_HINT": "00または+マークの後に通話先の国番号を入力するか、ドロップダウンから国を選択し、最後に電話番号を入力します。",
+      "PHONE_HINT": "+ マークに続いて電話をかけたい国コードを入力するか、ドロップダウンから国を選択して電話番号を入力します。",
      "USERNAME": "ユーザー名",
      "CHANGEUSERNAME": "変更",
      "CHANGEUSERNAME_TITLE": "ユーザー名の変更",
--- a/console/src/assets/i18n/mk.json
+++ b/console/src/assets/i18n/mk.json
@ -274,7 +274,7 @@
    "SYMBOLERROR": "Мора да содржи симбол или знак за интерпункција.",
    "NUMBERERROR": "Мора да содржи цифра.",
    "PWNOTEQUAL": "Внесените лозинки не се совпаѓаат.",
-    "PHONE": "Телефонскиот број мора да почне со 00 или +."
+    "PHONE": "Телефонскиот број мора да започнува со +."
  },
  "USER": {
    "SETTINGS": {
@ -486,7 +486,7 @@
      "TITLE": "Профил",
      "EMAIL": "Е-пошта",
      "PHONE": "Телефонски број",
-      "PHONE_HINT": "Користете 00 или + и потоа дополнителниот број на земјата, или изберете ја земјата од листата и на крај внесете го телефонскиот број",
+      "PHONE_HINT": "Користете + и потоа дополнителниот број на земјата, или изберете ја земјата од листата и на крај внесете го телефонскиот број",
      "USERNAME": "Корисничко име",
      "CHANGEUSERNAME": "промени",
      "CHANGEUSERNAME_TITLE": "Промени корисничко име",
--- a/console/src/assets/i18n/pl.json
+++ b/console/src/assets/i18n/pl.json
@ -273,7 +273,7 @@
    "SYMBOLERROR": "Musi zawierać symbol lub znak interpunkcyjny.",
    "NUMBERERROR": "Musi zawierać cyfrę.",
    "PWNOTEQUAL": "Podane hasła nie są identyczne.",
-    "PHONE": "Numer telefonu musi zaczynać się od 00 lub +."
+    "PHONE": "Numer telefonu musi zaczynać się od +."
  },
  "USER": {
    "SETTINGS": {
@ -485,7 +485,7 @@
      "TITLE": "Profil",
      "EMAIL": "E-mail",
      "PHONE": "Numer telefonu",
-      "PHONE_HINT": "Użyj 00 lub symbolu +, a następnie kodu kraju, z którego dzwonisz, lub wybierz kraj z listy rozwijanej i wprowadź numer telefonu.",
+      "PHONE_HINT": "Użyj symbolu +, a następnie kodu kraju, z którego dzwonisz, lub wybierz kraj z listy rozwijanej i wprowadź numer telefonu.",
      "USERNAME": "Nazwa użytkownika",
      "CHANGEUSERNAME": "modyfikuj",
      "CHANGEUSERNAME_TITLE": "Zmień nazwę użytkownika",
--- a/console/src/assets/i18n/pt.json
+++ b/console/src/assets/i18n/pt.json
@ -274,7 +274,7 @@
    "SYMBOLERROR": "Deve incluir um símbolo ou caractere de pontuação.",
    "NUMBERERROR": "Deve incluir um dígito.",
    "PWNOTEQUAL": "As senhas fornecidas não correspondem.",
-    "PHONE": "O número de telefone deve começar com 00 ou +."
+    "PHONE": "O número de telefone deve começar com +."
  },
  "USER": {
    "SETTINGS": {
@ -486,7 +486,7 @@
      "TITLE": "Perfil",
      "EMAIL": "E-mail",
      "PHONE": "Número de Telefone",
-      "PHONE_HINT": "Use 00 ou o símbolo + seguido do código de chamada do país, ou selecione o país na lista suspensa e, em seguida, insira o número de telefone",
+      "PHONE_HINT": "Use o símbolo + seguido do código de chamada do país, ou selecione o país na lista suspensa e, em seguida, insira o número de telefone",
      "USERNAME": "Nome de Usuário",
      "CHANGEUSERNAME": "modificar",
      "CHANGEUSERNAME_TITLE": "Alterar nome de usuário",
--- a/console/src/assets/i18n/zh.json
+++ b/console/src/assets/i18n/zh.json
@ -273,7 +273,7 @@
    "SYMBOLERROR": "密码必须包含符号或标点符号。",
    "NUMBERERROR": "密码必须包含数字。",
    "PWNOTEQUAL": "提供的密码不匹配。",
-    "PHONE": "电话号码必须以00或+开头。"
+    "PHONE": "电话号码必须以 + 开头。"
  },
  "USER": {
    "SETTINGS": {
@ -485,7 +485,7 @@
      "TITLE": "信息",
      "EMAIL": "电子邮件",
      "PHONE": "手机号码",
-      "PHONE_HINT": "使用 00 或 + 符号后跟呼叫者的国家代码，或从下拉列表中选择国家，最后输入电话号码",
+      "PHONE_HINT": "使用+号，后跟呼叫者的国家/地区代码，或从下拉列表中选择国家/地区，最后输入电话号码",
      "USERNAME": "用户名",
      "CHANGEUSERNAME": "修改",
      "CHANGEUSERNAME_TITLE": "修改用户名称",