andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-03 21:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* fix: country flag and phone now in sync

* change default country

---------

Co-authored-by: Elio Bischof <[email protected]>
Co-authored-by: Elio Bischof <[email protected]>
This commit is contained in:
Miguel Cabrerizo
2023-10-24 13:47:44 +00:00
committed by GitHub
co-authored by Elio Bischof Elio Bischof
parent 36eeae1071
commit 6f82285ad6
19 changed files with 102 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/users/user-create/user-create.component.html
+6 -1
View File
@@ -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>
console/src/app/pages/users/user-create/user-create.component.ts
+28 -4
View File
@@ -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
);
}
}
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
+4 -1
View File
@@ -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)
console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.html
+1 -1
View File
@@ -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>
console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts
+31 -4
View File
@@ -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
);
}
}
console/src/app/pages/users/user-detail/phone-detail/phone-detail.component.ts
+1 -1
View File
@@ -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;
}
console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
+4 -1
View File
@@ -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)
console/src/app/utils/formatPhone.ts
+5 -5
View File
@@ -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;
}