zitadel/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html

<app-meta-layout>
    <div class="max-width-container">
        <h1>{{ 'USER.TITLE' | translate }}</h1>
        <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>

        <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>

        <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>

        <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
            description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
            <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
                <span>{{login}}</span>
                <button color="primary" [disabled]="copied == login"
                    [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
                    (click)="copytoclipboard(login)" mat-icon-button>
                    <i *ngIf="copied != login" class="las la-clipboard"></i>
                    <i *ngIf="copied == login" class="las la-clipboard-check"></i>
                </button>
            </div>
        </app-card>

        <div class="col" *ngIf="user">
            <app-card title="{{ 'USER.PROFILE.TITLE' | translate }}"
                description="{{'USER.PROFILE.DESCRIPTION' | translate}}">
                <app-detail-form [genders]="genders" [languages]="languages" [profile]="user"
                    (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
                </app-detail-form>
            </app-card>

            <app-card title="Theme" class="theme-card">
                <app-theme-setting></app-theme-setting>
            </app-card>
        </div>

        <app-card *ngIf="user" title="{{'USER.PASSWORD.TITLE' | translate}}"
            description="{{'USER.PASSWORD.DESCRIPTION' | translate}}">
            <form *ngIf="passwordForm" [formGroup]="passwordForm" (ngSubmit)="setPassword()">
                <div class="content">
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PASSWORD.OLD' | translate }}</mat-label>
                        <input autocomplete="off" name="password" type="password" matInput
                            formControlName="currentPassword" />
                        <mat-error *ngIf="currentPassword?.errors?.required">{{ 'USER.PASSWORD.REQUIRED' | translate }}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
                        <input autocomplete="off" name="new password" type="password" matInput
                            formControlName="newPassword" />

                        <mat-error *ngIf="newPassword?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                        <mat-error *ngIf="newPassword?.errors?.symbolValidator">
                            {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
                        </mat-error>
                        <mat-error *ngIf="newPassword?.errors?.numberValidator">
                            {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
                        </mat-error>
                        <mat-error *ngIf="newPassword?.errors?.upperCaseValidator">
                            {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
                        </mat-error>
                        <mat-error *ngIf="newPassword?.errors?.lowerCaseValidator">
                            {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
                        </mat-error>
                        <mat-error *ngIf="newPassword?.errors?.minlength">
                            {{ 'USER.VALIDATION.MINLENGTH' | translate:newPassword?.errors?.minlength }}
                        </mat-error>

                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
                        <input autocomplete="off" name="password repeating" type="password" matInput
                            formControlName="confirmPassword" />

                        <mat-error *ngIf="confirmPassword?.errors?.required">
                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
                        </mat-error>
                        <mat-error *ngIf="confirmPassword?.errors?.symbolValidator">
                            {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
                        </mat-error>
                        <mat-error *ngIf="confirmPassword?.errors?.numberValidator">
                            {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
                        </mat-error>
                        <mat-error *ngIf="confirmPassword?.errors?.notequal">
                            {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
                        </mat-error>
                        <mat-error *ngIf="confirmPassword?.errors?.upperCaseValidator">
                            {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
                        </mat-error>
                        <mat-error *ngIf="confirmPassword?.errors?.lowerCaseValidator">
                            {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
                        </mat-error>
                        <mat-error *ngIf="confirmPassword?.errors?.minlength">
                            {{ 'USER.VALIDATION.MINLENGTH' | translate:confirmPassword?.errors?.minlength }}
                        </mat-error>
                    </mat-form-field>
                </div>
                <div class="btn-container">
                    <button [disabled]="passwordForm.invalid" mat-raised-button
                        color="primary">{{ 'USER.PASSWORD.RESET' | translate }}</button>
                </div>
            </form>
        </app-card>

        <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
            description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
            <div class="method-col">
                <div class="method-row">
                    <span class="label">{{ 'USER.EMAIL' | translate }}</span>

                    <ng-container *ngIf="!emailEditState; else emailEdit">
                        <div class="actions">
                            <span class="name">{{user?.email}}</span>
                            <mat-icon *ngIf="user?.isEmailVerified" color="primary" aria-hidden="false"
                                aria-label="verified icon">
                                check_circle_outline</mat-icon>
                            <ng-container *ngIf="user?.email && !user?.isEmailVerified">
                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
                                </mat-icon>
                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
                                    (click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
                            </ng-container>
                        </div>

                        <div class="actions">
                            <button (click)="emailEditState = true" mat-icon-button>
                                <mat-icon>edit</mat-icon>
                            </button>
                        </div>
                    </ng-container>
                    <ng-template #emailEdit>
                        <mat-form-field class="name">
                            <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
                            <input matInput [(ngModel)]="user.email" />
                        </mat-form-field>
                        <button (click)="emailEditState = false" mat-icon-button>
                            <mat-icon>close</mat-icon>
                        </button>
                        <button [disabled]="!user.email" class="submit-button" type="button" color="primary"
                            (click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                    </ng-template>
                </div>

                <div class="method-row">
                    <span class="label">{{ 'USER.PHONE' | translate }}</span>

                    <ng-container *ngIf="!phoneEditState; else phoneEdit">
                        <div class="actions">
                            <span class="name">{{user?.phone}}</span>
                            <mat-icon *ngIf="user?.isPhoneVerified" color="primary" aria-hidden="false"
                                aria-label="verified icon">
                                check_circle_outline</mat-icon>
                            <ng-container *ngIf="user?.phone && !user?.isPhoneVerified">
                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
                                </mat-icon>
                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
                                    (click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
                                    (click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
                            </ng-container>
                        </div>

                        <div class="actions">
                            <button (click)="phoneEditState = true" mat-icon-button>
                                <mat-icon>edit</mat-icon>
                            </button>
                            <button color="warn" *ngIf="user?.phone" (click)="deletePhone()" mat-icon-button>
                                <i class="las la-trash"></i>
                            </button>
                        </div>
                    </ng-container>

                    <ng-template #phoneEdit>
                        <mat-form-field class="name">
                            <mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
                            <input matInput [(ngModel)]="user.phone" />
                        </mat-form-field>
                        <button (click)="phoneEditState = false" mat-icon-button>
                            <mat-icon>close</mat-icon>
                        </button>
                        <button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
                            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                    </ng-template>
                </div>
            </div>
        </app-card>

        <app-auth-user-mfa *ngIf="user"></app-auth-user-mfa>

        <!-- <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="user">
            <form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
                <div class="content">
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
                        <input matInput formControlName="streetAddress" />
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.POSTAL_CODE' | translate }}</mat-label>
                        <input matInput formControlName="postalCode" />
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.LOCALITY' | translate }}</mat-label>
                        <input matInput formControlName="locality" />
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.REGION' | translate }}</mat-label>
                        <input matInput formControlName="region" />
                    </mat-form-field>
                    <mat-form-field class="formfield">
                        <mat-label>{{ 'USER.ADDRESS.COUNTRY' | translate }}</mat-label>
                        <input matInput formControlName="country" />
                    </mat-form-field>
                </div>
                <div class="btn-container">
                    <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                </div>
            </form>
        </app-card> -->
    </div>

    <metainfo *ngIf="user" class="side">
        <div class="details">
            <div class="row" *ngIf="user?.loginNamesList">
                <span class="first">Login Names:</span>
                <span class="second"><span style="display: block;"
                        *ngFor="let login of user?.loginNamesList">{{login}}</span></span>
            </div>
        </div>

        <app-changes [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
    </metainfo>
</app-meta-layout>