Skip to content
This repository was archived by the owner on Aug 16, 2022. It is now read-only.

Commit cd1bb34

Browse files
ElecTreeFryingElecTreeFrying
committed
add: authentication
1 parent 18ddf4c commit cd1bb34

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+775
-238
lines changed

‎src/app/app-routing.module.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ const routes: Routes = [
55
{ path: 'auth', loadChildren: './auth/auth.module#AuthModule' },
66
{ path: 'firestore', loadChildren: './firestore/firestore.module#FirestoreModule' },
77
{ path: 'rtdb', loadChildren: './rtdb/rtdb.module#RtdbModule' },
8-
{ path: 'storage', loadChildren: './storage/storage.module#StorageModule' },
9-
{ path: 'hosting', loadChildren:'./hosting/hosting.module#HostingModule' }
8+
{ path: 'storage', loadChildren: './storage/storage.module#StorageModule' }
109
];
1110

1211
@NgModule({

‎src/app/app.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div id="header">
22
<mat-toolbar>
3-
<span routerLink="/">angularfire2</span>
3+
<span routerLink="/">Angular Firebase Demo</span>
44
</mat-toolbar>
55
</div>
66

‎src/app/app.component.ts

+3-8
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class AppComponent implements OnInit {
1414
panel = [
1515
{
1616
header: 'Authentication',
17-
list: [ 'Email and Password', 'Anonymously', 'Social media', 'Sign out' ],
17+
list: [ 'Email and Password', 'Anonymously', 'Social media', 'Sign out', 'Update Email', 'Update Password', 'Update Profile' ],
1818
navigation: '/auth',
1919
},
2020
{
@@ -31,11 +31,6 @@ export class AppComponent implements OnInit {
3131
header: 'Firebase Storage',
3232
list: [ 'Upload File', 'Download File', 'Delete File' ],
3333
navigation: '/storage'
34-
},
35-
{
36-
header: 'Firebase Hosting',
37-
list: [ 'CLI', 'Build', 'Deploy', 'Monitor' ],
38-
navigation: '/hosting'
3934
}
4035
]
4136

@@ -50,8 +45,8 @@ export class AppComponent implements OnInit {
5045
).subscribe((url) => {
5146
this.isRouted = url.length > 1;
5247
this.isRouted
53-
? this.panel.length === 5 ? this.panel.splice(0, 0, { header: 'Home', list: [], navigation: '/' }) : 0
54-
: this.panel.length === 6 ? this.panel.splice(0, 1) : 0;
48+
? this.panel.length === 4 ? this.panel.splice(0, 0, { header: 'Home', list: [], navigation: '/' }) : 0
49+
: this.panel.length === 5 ? this.panel.splice(0, 1) : 0;
5550
});
5651
}
5752

‎src/app/auth/auth-routing.module.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,19 @@ import { EmailAndPasswordComponent } from './component/email-and-password/email-
66
import { AnonymouslyComponent } from './component/anonymously/anonymously.component';
77
import { SocialMediaComponent } from './component/social-media/social-media.component';
88
import { SignOutComponent } from './component/sign-out/sign-out.component';
9+
import { UpdateEmailComponent } from './component/update-email/update-email.component';
10+
import { UpdatePasswordComponent } from './component/update-password/update-password.component';
11+
import { UpdateProfileComponent } from './component/update-profile/update-profile.component';
912

1013
const routes: Routes = [
1114
{ path: '', component: AuthComponent, children: [
1215
{ path: 'email-and-password', component: EmailAndPasswordComponent },
1316
{ path: 'anonymously', component: AnonymouslyComponent },
1417
{ path: 'social-media', component: SocialMediaComponent },
15-
{ path: 'sign-out', component: SignOutComponent }
18+
{ path: 'sign-out', component: SignOutComponent },
19+
{ path: 'update-email', component: UpdateEmailComponent },
20+
{ path: 'update-password', component: UpdatePasswordComponent },
21+
{ path: 'update-profile', component: UpdateProfileComponent }
1622
] }
1723
];
1824

‎src/app/auth/auth.module.ts

+23-3
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,50 @@
11
import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3+
import { ReactiveFormsModule } from '@angular/forms';
34
import { AuthRoutingModule } from './auth-routing.module';
45
import {
5-
MatCardModule
6+
MatCardModule,
7+
MatDividerModule,
8+
MatButtonModule,
9+
MatFormFieldModule,
10+
MatInputModule,
11+
MatIconModule,
12+
MatTooltipModule,
613
} from '@angular/material';
714

815
import { AuthComponent } from './component/auth.component';
916
import { EmailAndPasswordComponent } from './component/email-and-password/email-and-password.component';
1017
import { AnonymouslyComponent } from './component/anonymously/anonymously.component';
1118
import { SocialMediaComponent } from './component/social-media/social-media.component';
1219
import { SignOutComponent } from './component/sign-out/sign-out.component';
20+
import { UpdateEmailComponent } from './component/update-email/update-email.component';
21+
import { UpdatePasswordComponent } from './component/update-password/update-password.component';
22+
import { UpdateProfileComponent } from './component/update-profile/update-profile.component';
1323

1424
import { AuthService } from './auth.service';
1525

1626
@NgModule({
1727
imports: [
1828
CommonModule,
29+
ReactiveFormsModule,
1930
AuthRoutingModule,
20-
MatCardModule
31+
MatCardModule,
32+
MatDividerModule,
33+
MatButtonModule,
34+
MatFormFieldModule,
35+
MatInputModule,
36+
MatIconModule,
37+
MatTooltipModule,
2138
],
2239
declarations: [
2340
AuthComponent,
2441
EmailAndPasswordComponent,
2542
AnonymouslyComponent,
2643
SocialMediaComponent,
27-
SignOutComponent
44+
SignOutComponent,
45+
UpdateEmailComponent,
46+
UpdatePasswordComponent,
47+
UpdateProfileComponent
2848
],
2949
providers: [
3050
AuthService

‎src/app/auth/auth.service.ts

+71-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,79 @@
11
import { Injectable } from '@angular/core';
2+
import { AngularFireAuth } from 'angularfire2/auth';
3+
import { auth } from 'firebase/app';
24

35
@Injectable({
46
providedIn: 'root'
57
})
68
export class AuthService {
79

8-
constructor() { }
10+
constructor(private fire: AngularFireAuth) {
11+
12+
fire.authState.subscribe((state) => {
13+
state !== null ? console.log(state) : 0;
14+
});
15+
16+
}
17+
18+
signUp(auth) {
19+
return this.fire.auth.createUserWithEmailAndPassword(auth.email, auth.password);
20+
}
21+
22+
signIn(auth) {
23+
return this.fire.auth.signInWithEmailAndPassword(auth.email, auth.password);
24+
}
25+
26+
signAnonymously() {
27+
return this.fire.auth.signInAnonymously();
28+
}
29+
30+
facebookSignIn() {
31+
return this.socialAuth(new auth.FacebookAuthProvider());
32+
}
33+
34+
twitterSignIn() {
35+
return this.socialAuth(new auth.TwitterAuthProvider());
36+
}
37+
38+
googleSignIn() {
39+
return this.socialAuth(new auth.GoogleAuthProvider());
40+
}
41+
42+
githubSignIn() {
43+
return this.socialAuth(new auth.GithubAuthProvider());
44+
}
45+
46+
signOut() {
47+
return this.fire.auth.signOut();
48+
}
49+
50+
updateEmail(form: any, newEmail: string) {
51+
52+
return this.signIn(form).then((api) => {
53+
return api.user.updateEmail(newEmail);
54+
});
55+
56+
}
57+
58+
updatePassword(form: any, newPassword: string) {
59+
60+
return this.signIn(form).then((api) => {
61+
return api.user.updatePassword(newPassword);
62+
});
63+
64+
}
65+
66+
updateProfile(profile: any) {
67+
68+
return this.fire.auth.currentUser.updateProfile({
69+
displayName: profile.displayName,
70+
photoURL: profile.photoURL
71+
});
72+
73+
}
74+
75+
private socialAuth(provider: auth.AuthProvider) {
76+
return this.fire.auth.signInWithPopup(provider);
77+
}
78+
979
}

‎src/app/auth/component/anonymously/anonymously.component.html

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1-
<p>
2-
anonymously works!
3-
</p>
1+
<div id="wrapper">
2+
<div>
3+
<h2>Sign in anonymously</h2>
4+
<div class="divider">
5+
<mat-divider></mat-divider>
6+
</div>
7+
8+
<div id="content">
9+
<div>
10+
<button mat-raised-button>SIGN IN ANONYMOUSLY</button>
11+
</div>
12+
13+
</div>
14+
</div>
15+
</div>

‎src/app/auth/component/anonymously/anonymously.component.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
#wrapper {
2+
3+
margin-bottom: 7vh;
4+
margin-top: -10px;
5+
6+
.divider {
7+
width: 80%;
8+
margin-bottom: 3vh;
9+
}
10+
11+
}

‎src/app/auth/component/auth.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { map, filter } from 'rxjs/operators';
1010
export class AuthComponent implements OnInit {
1111

1212
isRouted: boolean = false;
13-
card: string[] = [ 'Email and Password', 'Anonymously', 'Social Media', 'Sign out' ];
13+
card: string[] = [ 'Email and Password', 'Anonymously', 'Social Media', 'Sign out', 'Update Email', 'Update Password', 'Update Profile' ];
1414

1515
constructor(
1616
private router: Router,

‎src/app/auth/component/email-and-password/email-and-password.component.html

+61-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,61 @@
1-
<p>
2-
email-and-password works!
3-
</p>
1+
<div id="wrapper">
2+
<div>
3+
<h2>Create account with email and password</h2>
4+
<div class="divider">
5+
<mat-divider></mat-divider>
6+
</div>
7+
8+
<div id="content">
9+
10+
<div>
11+
<form [formGroup]="signupForm">
12+
13+
<mat-form-field color="accent" appearance="outline">
14+
<mat-label>Email</mat-label>
15+
<input matInput autocomplete="off" type="text" formControlName="email">
16+
<mat-error *ngIf="signupForm.get('email')?.errors?.required">This is required.</mat-error>
17+
</mat-form-field>
18+
<br>
19+
<mat-form-field color="accent" appearance="outline">
20+
<mat-label>Password</mat-label>
21+
<input matInput autocomplete="off" type="text" formControlName="password">
22+
<mat-error *ngIf="signupForm.get('password')?.errors?.required">This is required.</mat-error>
23+
</mat-form-field>
24+
<br>
25+
<button mat-raised-button type="button" color="accent" (click)="signup()">SIGN UP USING EMAIL AND PASSWORD</button>
26+
</form>
27+
</div>
28+
29+
</div>
30+
</div>
31+
32+
<div>
33+
<h2>Sign in using email and password</h2>
34+
<div class="divider">
35+
<mat-divider></mat-divider>
36+
</div>
37+
38+
<div id="content">
39+
40+
<div>
41+
<form [formGroup]="signinForm">
42+
43+
<mat-form-field color="accent" appearance="outline">
44+
<mat-label>Email</mat-label>
45+
<input matInput autocomplete="off" type="text" formControlName="email">
46+
<mat-error *ngIf="signinForm.get('email')?.errors?.required">This is required.</mat-error>
47+
</mat-form-field>
48+
<br>
49+
<mat-form-field color="accent" appearance="outline">
50+
<mat-label>Password</mat-label>
51+
<input matInput autocomplete="off" type="text" formControlName="password">
52+
<mat-error *ngIf="signinForm.get('password')?.errors?.required">This is required.</mat-error>
53+
</mat-form-field>
54+
<br>
55+
<button mat-raised-button type="button" color="accent" (click)="signin()">SIGN IN USING EMAIL AND PASSWORD</button>
56+
</form>
57+
</div>
58+
59+
</div>
60+
</div>
61+
</div>

‎src/app/auth/component/email-and-password/email-and-password.component.scss

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
#wrapper {
2+
3+
margin-bottom: 7vh;
4+
margin-top: -10px;
5+
6+
.divider {
7+
width: 80%;
8+
margin-bottom: 3vh;
9+
}
10+
11+
.mat-raised-button,
12+
.mat-form-field {
13+
width: 350px;
14+
}
15+
16+
> div {
17+
margin-bottom: 5vh;
18+
19+
#content {
20+
display: flex;
21+
22+
> div:First-child {
23+
flex: 1 1 30%;
24+
}
25+
26+
27+
}
28+
}
29+
30+
}

‎src/app/auth/component/email-and-password/email-and-password.component.ts

+37-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, Inject } from '@angular/core';
2+
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3+
4+
import { AuthService } from '../../auth.service';
25

36
@Component({
47
selector: 'app-email-and-password',
@@ -7,9 +10,41 @@ import { Component, OnInit } from '@angular/core';
710
})
811
export class EmailAndPasswordComponent implements OnInit {
912

10-
constructor() { }
13+
signupForm: FormGroup;
14+
signinForm: FormGroup;
15+
16+
constructor(
17+
@Inject(FormBuilder) public fb: FormBuilder,
18+
private auth: AuthService
19+
) {
20+
this.signupForm = fb.group({
21+
'email': [ '', [ Validators.required ] ],
22+
'password': [ '', [ Validators.required ] ]
23+
})
24+
25+
this.signinForm = fb.group({
26+
'email': [ '', [ Validators.required ] ],
27+
'password': [ '', [ Validators.required ] ]
28+
})
29+
}
1130

1231
ngOnInit() {
1332
}
1433

34+
signup() {
35+
if (this.signupForm.invalid) return;
36+
37+
this.auth.signUp(this.signupForm.value);
38+
39+
this.signupForm.reset();
40+
}
41+
42+
signin() {
43+
if (this.signinForm.invalid) return;
44+
45+
this.auth.signIn(this.signinForm.value);
46+
47+
this.signinForm.reset();
48+
}
49+
1550
}

0 commit comments

Comments
 (0)