MaxKey/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/password/password.component.html

<div *nzModalTitle> {{ 'mxk.text.changepassword' | i18n }} </div>
<div>
    <form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit($event)" se-container="1">
        <nz-form-item style="width: 100%" class="d-none">
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="id">{{ 'mxk.password.id' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid id!">
                <input [(ngModel)]="form.model.id" [ngModelOptions]="{ standalone: true }" nz-input name="id" id="id" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item style="width: 100%">
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">{{ 'mxk.password.username' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                nzErrorTip="The input is not valid username!">
                <input disabled [(ngModel)]="form.model.username" [ngModelOptions]="{ standalone: true }" nz-input
                    name="username" id="username" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item style="width: 100%">
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="displayName">{{ 'mxk.password.displayName' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                nzErrorTip="The input is not valid displayName!">
                <input disabled [(ngModel)]="form.model.displayName" [ngModelOptions]="{ standalone: true }" nz-input
                    name="displayName" id="displayName" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item style="width: 100%">
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="password">{{ 'mxk.password.password' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="The input is not valid password!">
                <nz-input-group [nzSuffix]="suffixPasswordTemplate" [nzAddOnAfter]="suffixPasswordButton"
                    style="width: 100%">
                    <input [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="new password"
                        [(ngModel)]="form.model.password" [ngModelOptions]="{ standalone: true }" name="password"
                        id="password" />
                </nz-input-group>
                <ng-template #suffixPasswordTemplate>
                    <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
                        (click)="passwordVisible = !passwordVisible"></i>
                </ng-template>
                <ng-template #suffixPasswordButton>
                    <button nz-button nzType="primary" nzSearch (click)="onPassword($event)">{{ 'mxk.text.generate' |
                        i18n }}</button>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item style="width: 100%">
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="confirmPassword">{{ 'mxk.password.confirmPassword' |
                i18n }}</nz-form-label>
            <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="The input is not valid confirmPassword!">
                <input type="password" nz-input placeholder="confirm password" [(ngModel)]="form.model.confirmPassword"
                    [ngModelOptions]="{ standalone: true }" name="confirmPassword" id="confirmPassword" />
            </nz-form-control>
        </nz-form-item>
    </form>
</div>

<div *nzModalFooter>
    <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
    <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
</div>