-
-
Notifications
You must be signed in to change notification settings - Fork 10.5k
/
register.component.html
105 lines (93 loc) · 5.39 KB
/
register.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<div fxLayoutAlign="center">
<mat-card class="mat-elevation-z6">
<h1 translate>TITLE_REGISTRATION</h1>
<div class="error" ng-if="error">{{ error }}</div>
<div class="form-container" id="registration-form">
<mat-form-field appearance="outline" color="accent">
<mat-label translate>LABEL_EMAIL</mat-label>
<input id="emailControl" [formControl]="emailControl" (focus)="this.error=null" type="text" matInput
aria-label="Email address field">
<mat-error *ngIf="emailControl.invalid && emailControl.errors.required" translate>MANDATORY_EMAIL</mat-error>
<mat-error *ngIf="emailControl.invalid && emailControl.errors.email" translate>INVALID_EMAIL</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" color="accent">
<mat-label translate>LABEL_PASSWORD</mat-label>
<input #password id="passwordControl" [formControl]="passwordControl" (focus)="this.error=null" type="password"
matInput aria-label="Field for the password">
<mat-hint translate>
<i class="fas fa-exclamation-circle"></i>
<em style="margin-left:5px;" translate>{{ 'INVALID_PASSWORD_LENGTH' | translate: {length: '5-20'} }}</em>
</mat-hint>
<mat-hint align="end">{{password.value?.length || 0}}/20</mat-hint>
<mat-error *ngIf="passwordControl.invalid && passwordControl.errors.required" translate>MANDATORY_PASSWORD
</mat-error>
<mat-error
*ngIf="passwordControl.invalid && (passwordControl.errors.minlength || passwordControl.errors.maxlength)"
translate [translateParams]="{length: '5-20'}">INVALID_PASSWORD_LENGTH
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" color="accent">
<mat-label translate>LABEL_PASSWORD_REPEAT</mat-label>
<input #repeatPassword id="repeatPasswordControl" [formControl]="repeatPasswordControl"
(focus)="this.error=null" type="password" matInput aria-label="Field to confirm the password">
<mat-hint align="end">{{repeatPassword.value?.length || 0}}/20</mat-hint>
<mat-error *ngIf="repeatPasswordControl.invalid && repeatPasswordControl.errors.required" translate>
MANDATORY_PASSWORD_REPEAT
</mat-error>
<mat-error *ngIf="repeatPasswordControl.invalid && repeatPasswordControl.errors.notSame" translate>
PASSWORDS_NOT_MATCHING
</mat-error>
</mat-form-field>
<mat-slide-toggle #passwordInfoToggle [color]="passwordStrength.color">{{'SHOW_PASSWORD_ADVICE' | translate}}</mat-slide-toggle>
<mat-password-strength #passwordStrength [password]="password.value"></mat-password-strength>
<mat-password-strength-info *ngIf="passwordInfoToggle.checked" [passwordComponent]="passwordStrength"
[lowerCaseCriteriaMsg]="'LOWER_CASE_CRITERIA_MSG' | translate"
[upperCaseCriteriaMsg]="'UPPER_CASE_CRITERIA_MSG'| translate"
[digitsCriteriaMsg]="'DIGITS_CRITERIA_MSG'| translate"
[specialCharsCriteriaMsg]="'SPECIAL_CHARS_CRITERIA_MSG' | translate"
[minCharsCriteriaMsg]="'MIN_CHARS_CRITERIA_MSG' | translate:{value: 8}">
</mat-password-strength-info>
<div class="security-container">
<mat-form-field color="accent" appearance="outline">
<mat-label>
{{'LABEL_SECURITY_QUESTION' | translate}}
</mat-label>
<mat-select [formControl]="securityQuestionControl" placeholder="" [(value)]="selected"
(focus)="this.error=null" name="securityQuestion"
aria-label="Selection list for the security question">
<mat-option *ngFor="let question of securityQuestions" [value]="question.id">
{{question.question}}
</mat-option>
</mat-select>
<mat-hint translate>
<i class="fas fa-exclamation-circle"></i>
<em style="margin-left:5px;" translate>CANNOT_BE_CHANGED_LATER</em>
</mat-hint>
<mat-error *ngIf="securityQuestionControl.invalid && securityQuestionControl.errors.required" translate>
MANDATORY_SECURITY_QUESTION
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" color="accent">
<mat-label translate>SECURITY_ANSWER</mat-label>
<input id="securityAnswerControl" [formControl]="securityAnswerControl" (focus)="this.error=null" type="text"
matInput [placeholder]="'SECURITY_ANSWER_PLACEHOLDER' | translate"
aria-label="Field for the answer to the security question">
<mat-error *ngIf="securityAnswerControl.invalid && securityAnswerControl.errors.required" translate>
MANDATORY_SECURITY_ANSWER
</mat-error>
</mat-form-field>
</div>
</div>
<button type="submit"
id="registerButton"
mat-raised-button color="primary"
[disabled]="emailControl.invalid || passwordControl.invalid || repeatPasswordControl.invalid || securityQuestionControl.invalid || securityAnswerControl.invalid"
(click)="save()"
aria-label="Button to complete the registration">
<i class="material-icons">
person_add
</i>
{{'BTN_REGISTER' | translate}}
</button>
</mat-card>
</div>