Skip to content

Commit f953aac

Browse files
TommiCodesTommiCodes
committed
8: organize and add easy logout on protected/dashboard component
1 parent 75dd26e commit f953aac

File tree

6 files changed

+111
-85
lines changed

6 files changed

+111
-85
lines changed

‎src/app/app.module.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,13 @@ export function tokenGetter() {
2323
],
2424
imports: [
2525
BrowserModule,
26-
AppRoutingModule,
2726
BrowserAnimationsModule,
2827
HttpClientModule,
29-
28+
// Import our Routes for this module
29+
AppRoutingModule,
30+
// Angular Material Imports
3031
MatSnackBarModule,
31-
32+
// Jwt Helper Module Import
3233
JwtModule.forRoot({
3334
config: {
3435
tokenGetter: tokenGetter,

‎src/app/protected/dashboard/dashboard.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
11
<p>Protected Dashboard works.</p>
2+
3+
<a [routerLink]="['../../public/login']">Go back to Login</a>
4+
<br>
5+
<a [routerLink]="['../../public/register']">Go back to Register</a>
6+
<br>
7+
<br>
8+
<button mat-raised-button (click)="logout()">Logout (remove token from localstorage)</button>

‎src/app/protected/dashboard/dashboard.component.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1+
import { Router } from '@angular/router';
12
import { Component, OnInit } from '@angular/core';
3+
import { LOCALSTORAGE_TOKEN_KEY } from 'src/app/app.module';
24

35
@Component({
46
selector: 'app-dashboard',
57
templateUrl: './dashboard.component.html',
68
styleUrls: ['./dashboard.component.scss']
79
})
8-
export class DashboardComponent implements OnInit {
10+
export class DashboardComponent {
911

10-
constructor() { }
12+
constructor(
13+
private router: Router
14+
) {}
1115

12-
ngOnInit(): void {
16+
logout() {
17+
// Removes the jwt token from the local storage, so the user gets logged out & then navigate back to the "public" routes
18+
localStorage.removeItem(LOCALSTORAGE_TOKEN_KEY);
19+
this.router.navigate(['../../']);
1320
}
1421

1522
}

‎src/app/protected/protected.module.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@ import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { ProtectedRoutingModule } from './protected-routing.module';
44
import { DashboardComponent } from './dashboard/dashboard.component';
5+
import { MatButtonModule } from '@angular/material/button';
56

67
@NgModule({
78
declarations: [
89
DashboardComponent
910
],
1011
imports: [
1112
CommonModule,
12-
ProtectedRoutingModule
13+
// Import our Routes for this module
14+
ProtectedRoutingModule,
15+
// Angular Material Imports
16+
MatButtonModule,
1317
]
1418
})
1519
export class ProtectedModule { }

‎src/app/public/components/login/login.component.html‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,33 @@
1-
<mat-card>
2-
<mat-card-title>Login</mat-card-title>
3-
<mat-card-content>
4-
<form [formGroup]="loginForm" (ngSubmit)="login()">
1+
<div>
2+
<a [routerLink]="['../register']">Go to Register</a>
3+
<mat-card>
4+
<mat-card-title>Login</mat-card-title>
5+
<mat-card-content>
6+
<form [formGroup]="loginForm" (ngSubmit)="login()">
57

6-
<mat-form-field>
7-
<input type="email" matInput placeholder="Email" formControlName="email">
8-
<!-- Here we can display error messages/hints for the user, if one of the Validators adds an error to the email
8+
<mat-form-field>
9+
<input type="email" matInput placeholder="Email" formControlName="email">
10+
<!-- Here we can display error messages/hints for the user, if one of the Validators adds an error to the email
911
with the .touched check we only display the hints if the input was touched by the users -->
10-
<mat-error *ngIf="this.loginForm.get('email')?.touched && this.loginForm.get('email')?.hasError('required')">
11-
Email is required</mat-error>
12-
<mat-error *ngIf="this.loginForm.get('email')?.touched && this.loginForm.get('email')?.hasError('email')">
13-
Email must be a valid Email</mat-error>
14-
</mat-form-field>
12+
<mat-error *ngIf="this.loginForm.get('email')?.touched && this.loginForm.get('email')?.hasError('required')">
13+
Email is required</mat-error>
14+
<mat-error *ngIf="this.loginForm.get('email')?.touched && this.loginForm.get('email')?.hasError('email')">
15+
Email must be a valid Email</mat-error>
16+
</mat-form-field>
1517

16-
<mat-form-field>
17-
<input type="password" matInput placeholder="Password" formControlName="password">
18-
<mat-error
19-
*ngIf="this.loginForm.get('password')?.touched && this.loginForm.get('password')?.hasError('required')">
20-
Password is required</mat-error>
21-
</mat-form-field>
18+
<mat-form-field>
19+
<input type="password" matInput placeholder="Password" formControlName="password">
20+
<mat-error
21+
*ngIf="this.loginForm.get('password')?.touched && this.loginForm.get('password')?.hasError('required')">
22+
Password is required</mat-error>
23+
</mat-form-field>
2224

23-
<div class="button">
24-
<!-- Button is disabled(not clickable), if our LoginForm contains Validation Errors -->
25-
<button type="submit" mat-button [disabled]="!loginForm.valid">Login</button>
26-
</div>
25+
<div class="button">
26+
<!-- Button is disabled(not clickable), if our LoginForm contains Validation Errors -->
27+
<button type="submit" mat-button [disabled]="!loginForm.valid">Login</button>
28+
</div>
2729

28-
</form>
29-
</mat-card-content>
30-
</mat-card>
30+
</form>
31+
</mat-card-content>
32+
</mat-card>
33+
</div>

‎src/app/public/components/register/register.component.html‎

Lines changed: 57 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,69 @@
1-
<mat-card>
2-
<mat-card-title>Register</mat-card-title>
1+
<div>
2+
<a [routerLink]="['../login']">Go to Login</a>
3+
<mat-card>
4+
<mat-card-title>Register</mat-card-title>
35

4-
<mat-card-content>
5-
<form [formGroup]="registerForm" (ngSubmit)="register()">
6+
<mat-card-content>
7+
<form [formGroup]="registerForm" (ngSubmit)="register()">
68

7-
<mat-form-field>
8-
<input type="email" matInput placeholder="Email" formControlName="email">
9-
<!-- Here we can display error messages/hints for the user, if one of the Validators adds an error to the email
9+
<mat-form-field>
10+
<input type="email" matInput placeholder="Email" formControlName="email">
11+
<!-- Here we can display error messages/hints for the user, if one of the Validators adds an error to the email
1012
with the .touched check we only display the hints if the input was touched by the users -->
11-
<mat-error
12-
*ngIf="this.registerForm.get('email')?.touched && this.registerForm.get('email')?.hasError('required')">
13-
Email is required</mat-error>
14-
<mat-error *ngIf="this.registerForm.get('email')?.touched && this.registerForm.get('email')?.hasError('email')">
15-
Email must be a valid Email</mat-error>
16-
</mat-form-field>
13+
<mat-error
14+
*ngIf="this.registerForm.get('email')?.touched && this.registerForm.get('email')?.hasError('required')">
15+
Email is required</mat-error>
16+
<mat-error
17+
*ngIf="this.registerForm.get('email')?.touched && this.registerForm.get('email')?.hasError('email')">
18+
Email must be a valid Email</mat-error>
19+
</mat-form-field>
1720

18-
<mat-form-field>
19-
<input type="text" matInput placeholder="Username" formControlName="username">
20-
<mat-error
21-
*ngIf="this.registerForm.get('username')?.touched && this.registerForm.get('username')?.hasError('required')">
22-
Username is required</mat-error>
23-
</mat-form-field>
21+
<mat-form-field>
22+
<input type="text" matInput placeholder="Username" formControlName="username">
23+
<mat-error
24+
*ngIf="this.registerForm.get('username')?.touched && this.registerForm.get('username')?.hasError('required')">
25+
Username is required</mat-error>
26+
</mat-form-field>
2427

25-
<mat-form-field>
26-
<input type="text" matInput placeholder="First Name" formControlName="firstname">
27-
<mat-error
28-
*ngIf="this.registerForm.get('firstname')?.touched && this.registerForm.get('firstname')?.hasError('required')">
29-
First Name is required</mat-error>
30-
</mat-form-field>
28+
<mat-form-field>
29+
<input type="text" matInput placeholder="First Name" formControlName="firstname">
30+
<mat-error
31+
*ngIf="this.registerForm.get('firstname')?.touched && this.registerForm.get('firstname')?.hasError('required')">
32+
First Name is required</mat-error>
33+
</mat-form-field>
3134

32-
<mat-form-field>
33-
<input type="text" matInput placeholder="Last Name" formControlName="lastname">
34-
<mat-error
35-
*ngIf="this.registerForm.get('lastname')?.touched && this.registerForm.get('lastname')?.hasError('required')">
36-
Last Name is required</mat-error>
37-
</mat-form-field>
35+
<mat-form-field>
36+
<input type="text" matInput placeholder="Last Name" formControlName="lastname">
37+
<mat-error
38+
*ngIf="this.registerForm.get('lastname')?.touched && this.registerForm.get('lastname')?.hasError('required')">
39+
Last Name is required</mat-error>
40+
</mat-form-field>
3841

39-
<mat-form-field>
40-
<input type="password" matInput placeholder="Password" formControlName="password">
41-
<mat-error
42-
*ngIf="this.registerForm.get('password')?.touched && this.registerForm.get('password')?.hasError('required')">
43-
Password is required</mat-error>
44-
</mat-form-field>
42+
<mat-form-field>
43+
<input type="password" matInput placeholder="Password" formControlName="password">
44+
<mat-error
45+
*ngIf="this.registerForm.get('password')?.touched && this.registerForm.get('password')?.hasError('required')">
46+
Password is required</mat-error>
47+
</mat-form-field>
4548

46-
<mat-form-field>
47-
<input type="password" matInput placeholder="Password Confirmation" formControlName="passwordConfirm">
48-
<mat-error
49-
*ngIf="this.registerForm.get('passwordConfirm')?.touched && this.registerForm.get('passwordConfirm')?.hasError('required')">
50-
Password Confirmation is required</mat-error>
51-
</mat-form-field>
49+
<mat-form-field>
50+
<input type="password" matInput placeholder="Password Confirmation" formControlName="passwordConfirm">
51+
<mat-error
52+
*ngIf="this.registerForm.get('passwordConfirm')?.touched && this.registerForm.get('passwordConfirm')?.hasError('required')">
53+
Password Confirmation is required</mat-error>
54+
</mat-form-field>
5255

53-
<mat-error
54-
*ngIf="this.registerForm.get('passwordConfirm')?.dirty && this.registerForm.hasError('passwordsNotMatching')">
55-
Passwords are not matching!</mat-error>
56+
<mat-error
57+
*ngIf="this.registerForm.get('passwordConfirm')?.dirty && this.registerForm.hasError('passwordsNotMatching')">
58+
Passwords are not matching!</mat-error>
5659

57-
<div class="button">
58-
<!-- Button is disabled(not clickable), if our RegisterForm contains Validation Errors -->
59-
<button type="submit" mat-button [disabled]="!registerForm.valid">Register</button>
60-
</div>
60+
<div class="button">
61+
<!-- Button is disabled(not clickable), if our RegisterForm contains Validation Errors -->
62+
<button type="submit" mat-button [disabled]="!registerForm.valid">Register</button>
63+
</div>
6164

62-
</form>
63-
</mat-card-content>
65+
</form>
66+
</mat-card-content>
6467

65-
</mat-card>
68+
</mat-card>
69+
</div>

0 commit comments

Comments
 (0)