|
1 |
| - |
2 |
| -<app-splash-container> |
| 1 | +<ng-container *transloco="let t; read: 'confirm-email'"> |
| 2 | + <app-splash-container> |
3 | 3 | <ng-container title><h2>Register</h2></ng-container>
|
4 | 4 | <ng-container body>
|
5 |
| - <p>Complete the form to complete your registration</p> |
6 |
| - <div class="text-danger" *ngIf="errors.length > 0"> |
7 |
| - <p>Errors:</p> |
8 |
| - <ul> |
9 |
| - <li *ngFor="let error of errors">{{error}}</li> |
10 |
| - </ul> |
11 |
| - </div> |
12 |
| - <form [formGroup]="registerForm" (ngSubmit)="submit()"> |
13 |
| - <div class="mb-3"> |
14 |
| - <label for="username" class="form-label">Username</label> |
15 |
| - <input id="username" class="form-control" formControlName="username" type="text" |
16 |
| - [class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched"> |
17 |
| - <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched"> |
18 |
| - <div *ngIf="registerForm.get('username')?.errors?.required"> |
19 |
| - This field is required |
20 |
| - </div> |
21 |
| - </div> |
| 5 | + <p>Complete the form to complete your registration</p> |
| 6 | + <div class="text-danger" *ngIf="errors.length > 0"> |
| 7 | + <p>Errors:</p> |
| 8 | + <ul> |
| 9 | + <li *ngFor="let error of errors">{{error}}</li> |
| 10 | + </ul> |
| 11 | + </div> |
| 12 | + <form [formGroup]="registerForm" (ngSubmit)="submit()"> |
| 13 | + <div class="mb-3"> |
| 14 | + <label for="username" class="form-label">{{t('username-label')}}</label> |
| 15 | + <input id="username" class="form-control" formControlName="username" type="text" |
| 16 | + aria-describeby="inviteForm-username-validations" |
| 17 | + [class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched"> |
| 18 | + <div id="inviteForm-username-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched"> |
| 19 | + <div *ngIf="registerForm.get('username')?.errors?.required"> |
| 20 | + {{t('required-field')}} |
22 | 21 | </div>
|
| 22 | + </div> |
| 23 | + </div> |
23 | 24 |
|
24 |
| - <div class="mb-3" style="width:100%"> |
25 |
| - <label for="email" class="form-label">Email</label> |
26 |
| - <input class="form-control" type="email" inputmode="email" id="email" formControlName="email" required readonly |
27 |
| - [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched"> |
28 |
| - <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched"> |
29 |
| - <div *ngIf="registerForm.get('email')?.errors?.required"> |
30 |
| - This field is required |
31 |
| - </div> |
32 |
| - <div *ngIf="registerForm.get('email')?.errors?.email"> |
33 |
| - This must be a valid email address |
34 |
| - </div> |
35 |
| - </div> |
| 25 | + <div class="mb-3" style="width:100%"> |
| 26 | + <label for="email" class="form-label">{{t('email-label')}}</label> |
| 27 | + <input class="form-control" type="email" inputmode="email" id="email" formControlName="email" required readonly |
| 28 | + [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched"> |
| 29 | + <div id="inviteForm-email-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched"> |
| 30 | + <div *ngIf="registerForm.get('email')?.errors?.required"> |
| 31 | + {{t('required-field')}} |
36 | 32 | </div>
|
37 |
| - |
38 |
| - <div class="mb-3"> |
39 |
| - <label for="password" class="form-label">Password</label> <i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i> |
40 |
| - <ng-template #passwordTooltip> |
41 |
| - Password must be between 6 and 32 characters in length |
42 |
| - </ng-template> |
43 |
| - <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span> |
44 |
| - <input id="password" class="form-control" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password" type="password" aria-describedby="password-help"> |
45 |
| - <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched"> |
46 |
| - <div *ngIf="registerForm.get('password')?.errors?.required"> |
47 |
| - This field is required |
48 |
| - </div> |
49 |
| - <div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength || registerForm.get('password')?.errors?.pattern"> |
50 |
| - Password must be between 6 and 32 characters in length |
51 |
| - </div> |
52 |
| - </div> |
| 33 | + <div *ngIf="registerForm.get('email')?.errors?.email"> |
| 34 | + {{t('valid-email')}} |
53 | 35 | </div>
|
54 |
| - |
55 |
| - <div class="float-end"> |
56 |
| - <button class="btn btn-secondary alt" type="submit">Register</button> |
| 36 | + </div> |
| 37 | + </div> |
| 38 | + |
| 39 | + <div class="mb-3"> |
| 40 | + <label for="password" class="form-label">{{t('password-label')}}</label> <i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i> |
| 41 | + <ng-template #passwordTooltip> |
| 42 | + {{t('password-validation')}} |
| 43 | + </ng-template> |
| 44 | + <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span> |
| 45 | + <input id="password" class="form-control" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password" type="password" aria-describedby="password-help"> |
| 46 | + <div id="inviteForm-password-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched"> |
| 47 | + <div *ngIf="registerForm.get('password')?.errors?.required"> |
| 48 | + {{t('required-field')}} |
57 | 49 | </div>
|
58 |
| - </form> |
| 50 | + <div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength || registerForm.get('password')?.errors?.pattern"> |
| 51 | + {{t('password-validation')}} |
| 52 | + </div> |
| 53 | + </div> |
| 54 | + </div> |
| 55 | + |
| 56 | + <div class="float-end"> |
| 57 | + <button class="btn btn-secondary alt" type="submit">{{t('register')}}</button> |
| 58 | + </div> |
| 59 | + </form> |
59 | 60 | </ng-container>
|
60 |
| -</app-splash-container> |
| 61 | + </app-splash-container> |
| 62 | +</ng-container> |
0 commit comments