Files
we_bstly-web/src/app/pages/register/register.component.html
T
2021-03-29 20:09:53 +02:00

90 lines
3.5 KiB
HTML

<form [formGroup]="form" (ngSubmit)="register()" *ngIf="!success">
<mat-card>
<mat-card-content>
<h2>{{'register' | i18n}}</h2>
<mat-error *ngIf="missingToken">
<a routerLink="/tokens">{{'register.token.missing' | i18n}}</a>
</mat-error>
<mat-form-field>
<input matInput placeholder="{{'username' | i18n}}" formControlName="username"
[(ngModel)]="model.username" required>
<mat-error>
{{'username.error' | i18n}}
</mat-error>
<a mat-button matSuffix mat-icon-button (click)="genUsername()">
<mat-icon>autorenew</mat-icon>
</a>
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
[(ngModel)]="model.password" required>
<mat-error>
<div *ngFor="let error of form.get('password').errors | keyvalue">
{{'password.error.' + error.key | i18n}}<br>
</div>
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
[(ngModel)]="model.password2" required>
<mat-error>
{{'password.not-match' | i18n}}
</mat-error>
</mat-form-field>
<mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail"
(change)="onPrimaryChange()">
{{'email.primary' | i18n}} <mat-icon inline=true
matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
</mat-slide-toggle>
<mat-form-field *ngIf="model.primaryEmail">
<input matInput type="email" placeholder="{{'email' | i18n}}" formControlName="email"
[(ngModel)]="model.email" required>
<mat-error>
{{'email.invalid' | i18n}}
</mat-error>
</mat-form-field>
<mat-list *ngIf="items && items[0]">
<mat-list-item *ngFor="let item of items">
<mat-icon mat-list-icon>plus_one</mat-icon>
{{ item.name[currentLocale] || 'missing' }}
</mat-list-item>
</mat-list>
<mat-divider></mat-divider>
</mat-card-content>
<mat-card-actions>
<button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
{{'register' | i18n}}
</button>
<mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
</mat-card-actions>
</mat-card>
</form>
<div *ngIf="!success && permissions && permissions[0]">
<h3>{{'permissions' | i18n}}</h3>
<app-permissions [permissions]="permissions"></app-permissions>
</div>
<div *ngIf="!success && quotas && quotas[0]">
<h3>{{'quotas' | i18n}}</h3>
<app-quotas [quotas]="quotas"></app-quotas>
</div>
<mat-card *ngIf="success">
<mat-card-content>
<h2>{{'register.success.title' | i18n}}</h2>
<p>{{'register.success.text' | i18n}}</p>
</mat-card-content>
<mat-card-actions>
<a routerLink="/login" mat-raised-button color="primary">
{{'register.login' | i18n}}
</a>
</mat-card-actions>
</mat-card>