Skip to content

Commit d0fdccc

Browse files
AnthonyNahasAnthonyNahas
committed
feat(firebaseui): added email confirmation's component
1 parent bde6237 commit d0fdccc

File tree

5 files changed

+192
-115
lines changed

5 files changed

+192
-115
lines changed

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

Lines changed: 120 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,6 @@
151151
</div>
152152
</div>
153153
</div>
154-
155154
</form>
156155
</ng-template>
157156
</ngb-tab>
@@ -160,138 +159,147 @@
160159
<ngb-tab>
161160
<ng-template ngbTabTitle>Register</ng-template>
162161
<ng-template ngbTabContent>
163-
<form #signUpPasswordForm="ngForm"
164-
class="mt-3"
165-
[formGroup]="signUpFormGroup"
166-
(ngSubmit)="signUpFormGroup.valid &&
162+
<div *ngIf="!authProcess.emailConfirmationSent;then register else confirm"></div>
163+
<ng-template #register>
164+
<form #signUpPasswordForm="ngForm"
165+
class="mt-3"
166+
[formGroup]="signUpFormGroup"
167+
(ngSubmit)="signUpFormGroup.valid &&
167168
authProcess.signUp
168169
(signUpFormGroup.value.name,signUpFormGroup.value.email,signUpFormGroup.value.password)">
169-
<div class="form-group">
170-
<label for="validationName">First name</label>
171-
<input class="form-control"
172-
[class.is-valid]="sigUpNameFormControl.valid && sigUpNameFormControl.dirty"
173-
[class.is-invalid]="sigUpNameFormControl.errors
174-
&& (sigUpNameFormControl.dirty || signUpPasswordForm.submitted)"
175-
id="validationName"
176-
type="text"
177-
minlength="2"
178-
maxlength="30"
179-
[formControl]="sigUpNameFormControl"
180-
placeholder="Name"
181-
required>
182-
<div class="invalid-feedback"
183-
*ngIf="sigUpNameFormControl.errors
184-
&& (sigUpNameFormControl.dirty || sigUpNameFormControl.touched || signUpPasswordForm.submitted)">
185-
<p *ngIf="sigUpNameFormControl.hasError('required')">
186-
Name is required
187-
</p>
188-
<p *ngIf="sigUpNameFormControl.hasError('minlength')">
189-
The name is too short!
190-
</p>
191-
<p *ngIf="sigUpNameFormControl.hasError('maxlength')">
192-
The name is too long!
193-
</p>
194-
</div>
195-
</div>
196-
<div class="form-group">
197-
<label for="validationRegisterEmail">E-mail</label>
198-
<div class="input-group">
170+
<div class="form-group">
171+
<label for="validationName">First name</label>
199172
<input class="form-control"
200-
[class.is-valid]="sigUpEmailFormControl.valid && sigUpEmailFormControl.dirty"
201-
[class.is-invalid]="sigUpEmailFormControl.errors
202-
&& (sigUpEmailFormControl.dirty || signUpPasswordForm.submitted)"
203-
id="validationRegisterEmail"
204-
[formControl]="sigUpEmailFormControl"
205-
placeholder="E-mail"
206-
type="email"
207-
aria-describedby="inputGroupPrepend3"
173+
[class.is-valid]="sigUpNameFormControl.valid && sigUpNameFormControl.dirty"
174+
[class.is-invalid]="sigUpNameFormControl.errors
175+
&& (sigUpNameFormControl.dirty || signUpPasswordForm.submitted)"
176+
id="validationName"
177+
type="text"
178+
minlength="2"
179+
maxlength="30"
180+
[formControl]="sigUpNameFormControl"
181+
placeholder="Name"
208182
required>
209-
210-
<!--error msgs-->
211183
<div class="invalid-feedback"
212-
*ngIf="sigUpEmailFormControl.errors
213-
&& (sigUpEmailFormControl.dirty || sigUpEmailFormControl.touched || signUpPasswordForm.submitted)">
214-
<p *ngIf="sigUpEmailFormControl.hasError('required')">
215-
E-mail is required
184+
*ngIf="sigUpNameFormControl.errors
185+
&& (sigUpNameFormControl.dirty || sigUpNameFormControl.touched || signUpPasswordForm.submitted)">
186+
<p *ngIf="sigUpNameFormControl.hasError('required')">
187+
Name is required
216188
</p>
217-
<p *ngIf="sigUpEmailFormControl.hasError('pattern')">
218-
Please enter a valid e-mail address
189+
<p *ngIf="sigUpNameFormControl.hasError('minlength')">
190+
The name is too short!
191+
</p>
192+
<p *ngIf="sigUpNameFormControl.hasError('maxlength')">
193+
The name is too long!
219194
</p>
220195
</div>
196+
</div>
197+
<div class="form-group">
198+
<label for="validationRegisterEmail">E-mail</label>
199+
<div class="input-group">
200+
<input class="form-control"
201+
[class.is-valid]="sigUpEmailFormControl.valid && sigUpEmailFormControl.dirty"
202+
[class.is-invalid]="sigUpEmailFormControl.errors
203+
&& (sigUpEmailFormControl.dirty || signUpPasswordForm.submitted)"
204+
id="validationRegisterEmail"
205+
[formControl]="sigUpEmailFormControl"
206+
placeholder="E-mail"
207+
type="email"
208+
aria-describedby="inputGroupPrepend3"
209+
required>
221210

211+
<!--error msgs-->
212+
<div class="invalid-feedback"
213+
*ngIf="sigUpEmailFormControl.errors
214+
&& (sigUpEmailFormControl.dirty || sigUpEmailFormControl.touched || signUpPasswordForm.submitted)">
215+
<p *ngIf="sigUpEmailFormControl.hasError('required')">
216+
E-mail is required
217+
</p>
218+
<p *ngIf="sigUpEmailFormControl.hasError('pattern')">
219+
Please enter a valid e-mail address
220+
</p>
221+
</div>
222+
223+
</div>
222224
</div>
223-
</div>
224225

225-
<div class="form-group">
226-
<label for="validationRegisterPassword">Password</label>
227-
<div class="input-group">
228-
<input class="form-control"
229-
[class.is-valid]="sigUpPasswordFormControl.valid && sigUpPasswordFormControl.dirty"
230-
[class.is-invalid]="sigUpPasswordFormControl.errors
226+
<div class="form-group">
227+
<label for="validationRegisterPassword">Password</label>
228+
<div class="input-group">
229+
<input class="form-control"
230+
[class.is-valid]="sigUpPasswordFormControl.valid && sigUpPasswordFormControl.dirty"
231+
[class.is-invalid]="sigUpPasswordFormControl.errors
231232
&& (sigUpPasswordFormControl.dirty || signUpPasswordForm.submitted)"
232-
id="validationRegisterPassword"
233-
type="password"
234-
placeholder="password"
235-
name="password"
236-
[formControl]="sigUpPasswordFormControl"
237-
aria-describedby="inputGroupPrepend4"
238-
required>
233+
id="validationRegisterPassword"
234+
type="password"
235+
placeholder="password"
236+
name="password"
237+
[formControl]="sigUpPasswordFormControl"
238+
aria-describedby="inputGroupPrepend4"
239+
required>
239240

240-
<!--<small id="passwordHelpBlock" class="form-text text-muted">-->
241-
<!--Your password must be 8-25 characters long, contain letters and numbers,-->
242-
<!--and must not contain spaces, special characters, or emoji.-->
243-
<!--</small>-->
241+
<!--<small id="passwordHelpBlock" class="form-text text-muted">-->
242+
<!--Your password must be 8-25 characters long, contain letters and numbers,-->
243+
<!--and must not contain spaces, special characters, or emoji.-->
244+
<!--</small>-->
244245

245-
<div class="invalid-feedback"
246-
*ngIf="sigUpPasswordFormControl.errors
246+
<div class="invalid-feedback"
247+
*ngIf="sigUpPasswordFormControl.errors
247248
&& (sigUpPasswordFormControl.dirty || sigUpPasswordFormControl.touched) || signUpPasswordForm.submitted">
248-
<p *ngIf="sigUpPasswordFormControl.hasError('required')">
249-
Please do not forget the password
250-
</p>
251-
<p *ngIf="sigUpPasswordFormControl.hasError('minlength')">
252-
The password must be at least 6 characters
253-
long.
254-
</p>
255-
<p *ngIf="sigUpPasswordFormControl.hasError('maxlength')">
256-
The password can not be longer than 25 characters.
257-
</p>
258-
</div>
249+
<p *ngIf="sigUpPasswordFormControl.hasError('required')">
250+
Please do not forget the password
251+
</p>
252+
<p *ngIf="sigUpPasswordFormControl.hasError('minlength')">
253+
The password must be at least 6 characters
254+
long.
255+
</p>
256+
<p *ngIf="sigUpPasswordFormControl.hasError('maxlength')">
257+
The password can not be longer than 25 characters.
258+
</p>
259+
</div>
259260

261+
</div>
260262
</div>
261-
</div>
262263

263-
<!--<div class="form-group">-->
264-
<!--<div class="form-check">-->
265-
<!--<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>-->
266-
<!--<label class="form-check-label" for="invalidCheck3">-->
267-
<!--Agree to terms and conditions-->
268-
<!--</label>-->
269-
<!--<div class="invalid-feedback">-->
270-
<!--You must agree before submitting.-->
271-
<!--</div>-->
272-
<!--</div>-->
273-
<!--</div>-->
264+
<!--<div class="form-group">-->
265+
<!--<div class="form-check">-->
266+
<!--<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>-->
267+
<!--<label class="form-check-label" for="invalidCheck3">-->
268+
<!--Agree to terms and conditions-->
269+
<!--</label>-->
270+
<!--<div class="invalid-feedback">-->
271+
<!--You must agree before submitting.-->
272+
<!--</div>-->
273+
<!--</div>-->
274+
<!--</div>-->
274275

275-
<div class="container">
276-
<div class="row justify-content-between">
277-
<div class="align-self-start">
278-
<button class="btn btn-primary"
279-
type="submit">
280-
Register
281-
</button>
282-
</div>
283-
<div class="align-self-end">
284-
<button *ngIf="guestEnabled"
285-
class="btn btn-outline-secondary"
286-
(click)="authProcess.signInWith(authProvider.ANONYMOUS)">
287-
<i class="fa fa-fingerprint"></i>
288-
continue as guest
289-
</button>
276+
<div class="container">
277+
<div class="row justify-content-between">
278+
<div class="align-self-start">
279+
<button class="btn btn-primary"
280+
type="submit">
281+
Register
282+
</button>
283+
</div>
284+
<div class="align-self-end">
285+
<button *ngIf="guestEnabled"
286+
class="btn btn-outline-secondary"
287+
(click)="authProcess.signInWith(authProvider.ANONYMOUS)">
288+
<i class="fa fa-fingerprint"></i>
289+
continue as guest
290+
</button>
291+
</div>
290292
</div>
291293
</div>
292-
</div>
293-
</form>
294+
</form>
295+
296+
</ng-template>
297+
<!--confirm template-->
298+
<ng-template #confirm>
299+
<ngb-auth-firebaseui-email-confirmation [email]="authProcess.emailToConfirm">
300+
</ngb-auth-firebaseui-email-confirmation>
301+
</ng-template>
294302
</ng-template>
295-
</ngb-tab>
296303

304+
</ngb-tab>
297305
</ngb-tabset>

‎src/auth/module/components/email-confirmation/email-confirmation.component.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="card">
2+
<div class="card-body">
3+
<h5 class="card-title">Confirm your e-mail address!</h5>
4+
<h6 class="card-subtitle mb-2 text-muted">
5+
A confirmation e-mail has been sent to
6+
<b><strong>{{email}}</strong></b>
7+
</h6>
8+
9+
<p class="card-text">Check your inbox and click on the link <strong>"Confirm my e-mail"</strong> to confirm your
10+
e-mail
11+
address.</p>
12+
13+
<a href="#" class="card-link">Go back to the sign up page</a>
14+
</div>
15+
</div>

‎src/auth/module/components/email-confirmation/email-confirmation.component.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.material-icons {
2+
font-size: 4rem;
3+
}
4+
5+
.mat-icon {
6+
height: 4rem;
7+
width: 4rem;
8+
color: rgba(0, 0, 0, .54);
9+
}
10+
11+
.title {
12+
font-size: 20px;
13+
margin-top: 16px;
14+
}
15+
16+
.subtitle {
17+
margin: 16px auto;
18+
max-width: 300px;
19+
color: rgba(0, 0, 0, .54);
20+
font-size: 15px;
21+
text-align: center;
22+
23+
p {
24+
display: block;
25+
-webkit-margin-before: 1em;
26+
-webkit-margin-after: 1em;
27+
-webkit-margin-start: 0px;
28+
-webkit-margin-end: 0px;
29+
}
30+
31+
}

‎src/auth/module/components/email-confirmation/email-confirmation.component.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component, Input, OnInit} from '@angular/core';
2+
3+
@Component({
4+
selector: 'ngb-auth-firebaseui-email-confirmation',
5+
templateUrl: './email-confirmation.component.html',
6+
styleUrls: ['./email-confirmation.component.scss']
7+
})
8+
export class EmailConfirmationComponent implements OnInit {
9+
10+
@Input()
11+
email: string;
12+
13+
constructor() {
14+
}
15+
16+
ngOnInit() {
17+
}
18+
19+
}

‎src/auth/module/ngb-auth-firebase-u-i.module.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import {CommonModule} from '@angular/common';
2-
import {NgModule, ModuleWithProviders, InjectionToken} from '@angular/core';
2+
import {InjectionToken, ModuleWithProviders, NgModule} from '@angular/core';
33
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
44

55
import {AuthProcessService} from './services/auth-process.service';
66
import {FirestoreSyncService} from './services/firestore-sync.service';
7-
import {FirebaseAppConfig, FirebaseOptionsToken, FirebaseNameOrConfigToken} from 'angularfire2';
7+
import {FirebaseAppConfig, FirebaseNameOrConfigToken, FirebaseOptionsToken} from 'angularfire2';
88
import {AngularFirestoreModule} from 'angularfire2/firestore';
99
import {defaultAuthFirebaseUIConfig, NgBootstrapAuthFirebaseUIConfig} from './interfaces/config.interface';
1010
import {AuthComponent} from './components/auth/auth.component';
1111
import {HttpClientModule} from '@angular/common/http';
1212
import {AngularFireAuthModule} from 'angularfire2/auth';
1313
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
14+
import {EmailConfirmationComponent} from './components/email-confirmation/email-confirmation.component';
1415

1516
// Export module's public API
1617
// components
1718
export {AuthComponent} from './components/auth/auth.component';
19+
export {EmailConfirmationComponent} from './components/email-confirmation/email-confirmation.component';
1820

1921
// services
2022
export {AuthProcessService, AuthProvider} from './services/auth-process.service';
@@ -38,12 +40,14 @@ export const NgBootstrapAuthFirebaseUIConfigToken = new InjectionToken<NgBootstr
3840
exports:
3941
[
4042
AuthComponent,
43+
EmailConfirmationComponent,
4144
AngularFireAuthModule,
4245
AngularFirestoreModule
4346
],
4447
declarations:
4548
[
46-
AuthComponent
49+
AuthComponent,
50+
EmailConfirmationComponent
4751
]
4852
})
4953
export class NgbAuthFirebaseUIModule {

0 commit comments

Comments
 (0)