Skip to content

Commit 9fea1bb

Browse files
AnthonyNahasAnthonyNahas
committed
fix(firebaseui): show error msg on sumbit reset password's form
1 parent 013e537 commit 9fea1bb

File tree

1 file changed

+58
-49
lines changed

1 file changed

+58
-49
lines changed

‎src/auth/module/components/auth/auth.component.html

Lines changed: 58 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,31 @@
22
<!--Reset password tab-->
33
<ngb-tab *ngIf="passwordResetWished" title="Reset Password" id="reset_password">
44
<ng-template ngbTabContent>
5-
<form [formGroup]="resetPasswordFormGroup" (ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">
5+
<form #formDir="ngForm" [formGroup]="resetPasswordFormGroup"
6+
(ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">
67

7-
<div class="input-group mb-3">
8-
<div class="input-group-prepend">
9-
<span class="input-group-text" id="basic-addon1">@</span>
10-
</div>
11-
<input type="text"
12-
class="form-control"
13-
[readonly]="passReset"
14-
formControlName="email"
15-
placeholder="email"
16-
aria-label="email"
17-
aria-describedby="basic-addon1"
8+
<div class="form-group is-invalid">
9+
<label for="validationResetEmail">E-mail</label>
10+
<input class="form-control"
11+
[class.is-valid]="resetPasswordEmailFormControl.valid && resetPasswordEmailFormControl.dirty"
12+
[class.is-invalid]="resetPasswordEmailFormControl.errors && (resetPasswordEmailFormControl.dirty || formDir.submitted)"
13+
id="validationResetEmail"
14+
[formControl]="resetPasswordEmailFormControl"
15+
placeholder="E-mail"
16+
type="email"
17+
aria-describedby="inputGroupPrepend3"
1818
required>
19+
20+
<!--error msgs-->
21+
<div class="invalid-feedback"
22+
*ngIf="resetPasswordEmailFormControl.errors && (resetPasswordEmailFormControl.dirty || resetPasswordEmailFormControl.touched || formDir.submitted)">
23+
<p *ngIf="resetPasswordEmailFormControl.hasError('required')">
24+
E-mail is required
25+
</p>
26+
<p *ngIf="resetPasswordEmailFormControl.hasError('pattern')">
27+
Please enter a valid e-mail address
28+
</p>
29+
</div>
1930
</div>
2031

2132
<div class="text-center">
@@ -26,11 +37,10 @@
2637
</button>
2738
</div>
2839

29-
<div class="card-footer">
30-
<div class="progress">
31-
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
32-
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
33-
</div>
40+
41+
<div *ngIf="authProcess.isLoading" class="progress mt-2">
42+
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
43+
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
3444
</div>
3545

3646
</form>
@@ -69,43 +79,42 @@
6979
Please enter a valid e-mail address
7080
</p>
7181
</div>
72-
7382
</div>
83+
</div>
7484

75-
<div class="form-group">
76-
<label for="validationSignInPassword">Password</label>
77-
<div class="input-group">
78-
<input class="form-control"
79-
[class.is-valid]="sigInPasswordFormControl.valid"
80-
[class.is-invalid]="sigInPasswordFormControl.errors"
81-
id="validationSignInPassword"
82-
type="password"
83-
placeholder="password"
84-
name="password"
85-
[formControl]="sigInPasswordFormControl"
86-
aria-describedby="inputGroupPrepend4"
87-
required>
88-
89-
<!--<small id="passwordHelpBlock" class="form-text text-muted">-->
90-
<!--Your password must be 8-25 characters long, contain letters and numbers,-->
91-
<!--and must not contain spaces, special characters, or emoji.-->
92-
<!--</small>-->
85+
<div class="form-group">
86+
<label for="validationSignInPassword">Password</label>
87+
<div class="input-group">
88+
<input class="form-control"
89+
[class.is-valid]="sigInPasswordFormControl.valid"
90+
[class.is-invalid]="sigInPasswordFormControl.errors"
91+
id="validationSignInPassword"
92+
type="password"
93+
placeholder="password"
94+
name="password"
95+
[formControl]="sigInPasswordFormControl"
96+
aria-describedby="inputGroupPrepend4"
97+
required>
9398

94-
<div class="invalid-feedback"
95-
*ngIf="sigInPasswordFormControl.errors && (sigInPasswordFormControl.dirty || sigInPasswordFormControl.touched)">
96-
<p *ngIf="sigInPasswordFormControl.hasError('required')">
97-
Please do not forget the password
98-
</p>
99-
<p *ngIf="sigInPasswordFormControl.hasError('minlength')">
100-
The password must be at least 6 characters
101-
long.
102-
</p>
103-
<p *ngIf="sigInPasswordFormControl.hasError('maxlength')">
104-
The password can not be longer than 25 characters.
105-
</p>
106-
</div>
99+
<!--<small id="passwordHelpBlock" class="form-text text-muted">-->
100+
<!--Your password must be 8-25 characters long, contain letters and numbers,-->
101+
<!--and must not contain spaces, special characters, or emoji.-->
102+
<!--</small>-->
107103

104+
<div class="invalid-feedback"
105+
*ngIf="sigInPasswordFormControl.errors && (sigInPasswordFormControl.dirty || sigInPasswordFormControl.touched)">
106+
<p *ngIf="sigInPasswordFormControl.hasError('required')">
107+
Please do not forget the password
108+
</p>
109+
<p *ngIf="sigInPasswordFormControl.hasError('minlength')">
110+
The password must be at least 6 characters
111+
long.
112+
</p>
113+
<p *ngIf="sigInPasswordFormControl.hasError('maxlength')">
114+
The password can not be longer than 25 characters.
115+
</p>
108116
</div>
117+
109118
</div>
110119
</div>
111120

0 commit comments

Comments
 (0)