zitadel/console/src/app/pages/users/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 }}">
                <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.LOGINMETHODS.TITLE' | translate }}"
            description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
            <div class="method-col">
                <div class="method-row">
                    <span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>

                    <span>*********</span>
                    <div class="actions">
                        <a [routerLink]="['password']" mat-icon-button>
                            <mat-icon>chevron_right</mat-icon>
                        </a>
                    </div>
                </div>

                <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>
                        </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 *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
                            <i class="las la-trash"></i>
                        </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" #mfaComponent></app-auth-user-mfa>
    </div>

    <div *ngIf="user" class="side" metainfo>
        <div class="details">
            <div class="row" *ngIf="user?.preferredLoginName">
                <span class="first">Preferred Loginname:</span>
                <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
            </div>
        </div>

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