upgrade and migrate to angular 20
This commit is contained in:
_Bastler
@@ -1,112 +1,128 @@
|
||||
<form [formGroup]="form" (ngSubmit)="register()" *ngIf="!success">
|
||||
@if (!success) {
|
||||
<form [formGroup]="form" (ngSubmit)="register()">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{'register' | i18n}}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-error *ngIf="missingToken">
|
||||
{{'register.token.missing' | i18n}}
|
||||
|
||||
<a routerLink="/tokens" mat-raised-button color="warn">{{'register.token.missing.action' |
|
||||
i18n}}</a>
|
||||
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{'register' | i18n}}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
@if (missingToken) {
|
||||
<mat-error>
|
||||
{{'register.token.missing' | i18n}}
|
||||
<a routerLink="/tokens" mat-raised-button color="warn">{{'register.token.missing.action' |
|
||||
i18n}}</a>
|
||||
</mat-error>
|
||||
}
|
||||
@if (lockedToken) {
|
||||
<mat-error>
|
||||
{{'register.token.locked' | i18n}}
|
||||
<a routerLink="/login" [queryParams]="{ target:'/tokens' }" mat-raised-button
|
||||
color="warn">{{'register.token.locked.action' | i18n}}</a>
|
||||
</mat-error>
|
||||
}
|
||||
<mat-form-field>
|
||||
<mat-label>{{'username' | i18n}}</mat-label>
|
||||
<input matInput formControlName="username"
|
||||
[(ngModel)]="model.username" required matAutofocus tabindex="1">
|
||||
<mat-error>
|
||||
{{'username.error' | i18n}}
|
||||
</mat-error>
|
||||
<a mat-icon-button matSuffix (click)="genUsername()" tabindex="8">
|
||||
<mat-icon>autorenew</mat-icon>
|
||||
</a>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>{{'password' | i18n}}</mat-label>
|
||||
<input matInput type="password" formControlName="password"
|
||||
[(ngModel)]="model.password" required tabindex="2">
|
||||
<mat-error>
|
||||
@for (error of form.get('password').errors | keyvalue; track error) {
|
||||
<div>
|
||||
{{'password.error.' + error.key | i18n}}<br>
|
||||
</div>
|
||||
}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>{{'password.confirm' | i18n}}</mat-label>
|
||||
<input matInput type="password" formControlName="password2"
|
||||
[(ngModel)]="model.password2" required tabindex="3">
|
||||
<mat-error>
|
||||
{{'password.not-match' | i18n}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail"
|
||||
(change)="onPrimaryChange()" tabindex="4">
|
||||
{{'email.primary' | i18n}}
|
||||
</mat-slide-toggle>
|
||||
<mat-icon #primaryHint="matTooltip" (click)="primaryHint.toggle()" inline="true"
|
||||
matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
|
||||
@if (model.primaryEmail) {
|
||||
<mat-form-field>
|
||||
<mat-label>{{'email' | i18n}}</mat-label>
|
||||
<input matInput type="email" formControlName="email"
|
||||
[(ngModel)]="model.email" required tabindex="5">
|
||||
<mat-error>
|
||||
{{'email.invalid' | i18n}}
|
||||
</mat-error>
|
||||
<mat-error *ngIf="lockedToken">
|
||||
{{'register.token.locked' | i18n}}
|
||||
|
||||
<a routerLink="/login" [queryParams]="{ target:'/tokens' }" mat-raised-button
|
||||
color="warn">{{'register.token.locked.action' | i18n}}</a>
|
||||
</mat-error>
|
||||
<mat-form-field>
|
||||
<mat-label>{{'username' | i18n}}</mat-label>
|
||||
<input matInput formControlName="username"
|
||||
[(ngModel)]="model.username" required matAutofocus tabindex="1">
|
||||
<mat-error>
|
||||
{{'username.error' | i18n}}
|
||||
</mat-error>
|
||||
<a mat-icon-button matSuffix (click)="genUsername()" tabindex="8">
|
||||
<mat-icon>autorenew</mat-icon>
|
||||
</a>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>{{'password' | i18n}}</mat-label>
|
||||
<input matInput type="password" formControlName="password"
|
||||
[(ngModel)]="model.password" required tabindex="2">
|
||||
<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>
|
||||
<mat-label>{{'password.confirm' | i18n}}</mat-label>
|
||||
<input matInput type="password" formControlName="password2"
|
||||
[(ngModel)]="model.password2" required tabindex="3">
|
||||
<mat-error>
|
||||
{{'password.not-match' | i18n}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail"
|
||||
(change)="onPrimaryChange()" tabindex="4">
|
||||
{{'email.primary' | i18n}}
|
||||
</mat-slide-toggle>
|
||||
<mat-icon #primaryHint="matTooltip" (click)="primaryHint.toggle()" inline="true"
|
||||
matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
|
||||
|
||||
<mat-form-field *ngIf="model.primaryEmail">
|
||||
<mat-label>{{'email' | i18n}}</mat-label>
|
||||
<input matInput type="email" formControlName="email"
|
||||
[(ngModel)]="model.email" required tabindex="5">
|
||||
<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 type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid" tabindex="6">
|
||||
{{'register' | i18n}}
|
||||
</button>
|
||||
|
||||
<mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
|
||||
</mat-card-actions>
|
||||
<mat-card-footer>
|
||||
<a href="https://wiki.bstly.de/services/webstly#registration" class="help-button"
|
||||
matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above" target="_blank" mat-fab color="accent"
|
||||
tabindex="7">
|
||||
<mat-icon>contact_support</mat-icon>
|
||||
</a>
|
||||
</mat-card-footer>
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (items && items[0]) {
|
||||
<mat-list>
|
||||
@for (item of items; track item) {
|
||||
<mat-list-item>
|
||||
<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>
|
||||
@if (!working) {
|
||||
<button type="submit" mat-raised-button color="primary" [disabled]="form.invalid" tabindex="6">
|
||||
{{'register' | i18n}}
|
||||
</button>
|
||||
}
|
||||
@if (working) {
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
}
|
||||
</mat-card-actions>
|
||||
<mat-card-footer>
|
||||
<a href="https://wiki.bstly.de/services/webstly#registration" class="help-button"
|
||||
matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above" target="_blank" mat-fab color="accent"
|
||||
tabindex="7">
|
||||
<mat-icon>contact_support</mat-icon>
|
||||
</a>
|
||||
</mat-card-footer>
|
||||
</mat-card>
|
||||
</form>
|
||||
</form>
|
||||
}
|
||||
|
||||
|
||||
<div *ngIf="!success && permissions && permissions[0]">
|
||||
@if (!success && permissions && permissions[0]) {
|
||||
<div>
|
||||
<h3>{{'permissions' | i18n}}</h3>
|
||||
<app-permissions [permissions]="permissions"></app-permissions>
|
||||
</div>
|
||||
<div *ngIf="!success && quotas && quotas[0]">
|
||||
</div>
|
||||
}
|
||||
@if (!success && quotas && quotas[0]) {
|
||||
<div>
|
||||
<h3>{{'quotas' | i18n}}</h3>
|
||||
<app-quotas [quotas]="quotas"></app-quotas>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<mat-card *ngIf="success">
|
||||
@if (success) {
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<h2>{{'register.success.title' | i18n}}</h2>
|
||||
<p>{{'register.success.text' | i18n}}</p>
|
||||
<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>
|
||||
<a routerLink="/login" mat-raised-button color="primary">
|
||||
{{'register.login' | i18n}}
|
||||
</a>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</mat-card>
|
||||
}
|
||||
Reference in New Issue
Block a user