Chris Chen
69 lines
2.5 KiB
HTML
69 lines
2.5 KiB
HTML
<kendo-dialog title="Create User Account" (close)="onCancel()" [minWidth]="480" [width]="520">
|
|
|
|
<!-- STEP 1: Form -->
|
|
<ng-container *ngIf="step === 'form'">
|
|
<p class="k-mb-4">Creating account for <strong>{{ memberName }}</strong></p>
|
|
|
|
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="k-form k-form-vertical">
|
|
|
|
<kendo-formfield>
|
|
<kendo-label text="Login Email *"></kendo-label>
|
|
<kendo-textbox formControlName="email"></kendo-textbox>
|
|
<kendo-formerror *ngIf="form.get('email')?.errors?.['required']">Email is required.</kendo-formerror>
|
|
<kendo-formerror *ngIf="form.get('email')?.errors?.['email']">Invalid email address.</kendo-formerror>
|
|
</kendo-formfield>
|
|
|
|
<kendo-formfield class="k-mt-3">
|
|
<kendo-label text="Roles *"></kendo-label>
|
|
<kendo-multiselect
|
|
formControlName="roles"
|
|
[data]="roleOptions"
|
|
placeholder="Select role(s)">
|
|
</kendo-multiselect>
|
|
</kendo-formfield>
|
|
|
|
<kendo-formfield class="k-mt-3">
|
|
<kendo-label text="Language"></kendo-label>
|
|
<kendo-dropdownlist
|
|
formControlName="languagePreference"
|
|
[data]="langOptions" textField="text" valueField="value"
|
|
[valuePrimitive]="true">
|
|
</kendo-dropdownlist>
|
|
</kendo-formfield>
|
|
|
|
<p *ngIf="errorMessage" class="k-color-error k-mt-3">{{ errorMessage }}</p>
|
|
|
|
</form>
|
|
|
|
<kendo-dialog-actions>
|
|
<button kendoButton (click)="onCancel()">Cancel</button>
|
|
<button kendoButton themeColor="primary" (click)="onSubmit()" [disabled]="isLoading">
|
|
<span *ngIf="isLoading">...</span>
|
|
Create Account
|
|
</button>
|
|
</kendo-dialog-actions>
|
|
</ng-container>
|
|
|
|
<!-- STEP 2: Success — show temp password -->
|
|
<ng-container *ngIf="step === 'success'">
|
|
<div class="k-text-center k-p-4">
|
|
<p class="k-font-size-lg k-mb-2">Account created!</p>
|
|
<p class="k-mb-4">Share this temporary password with <strong>{{ memberName }}</strong>.</p>
|
|
|
|
<div class="k-d-flex k-justify-content-center k-align-items-center k-gap-2 k-mb-3">
|
|
<code class="k-font-size-lg k-border k-p-2 k-rounded">{{ tempPassword }}</code>
|
|
<button kendoButton (click)="copyPassword()">{{ copied ? 'Copied!' : 'Copy' }}</button>
|
|
</div>
|
|
|
|
<p class="k-color-warning k-font-weight-bold">
|
|
Warning: This password will not be shown again.
|
|
</p>
|
|
</div>
|
|
|
|
<kendo-dialog-actions>
|
|
<button kendoButton themeColor="primary" (click)="onDone()">Done</button>
|
|
</kendo-dialog-actions>
|
|
</ng-container>
|
|
|
|
</kendo-dialog>
|