Skip to content

Commit ef4feae

Browse files
akyreyakyrey
committed
feat(authentication): add authentication
Also fix styling Add logout actions User info is saved in localstorage atm Using remember me will avoid logging the user out on refresh
1 parent bb6f89d commit ef4feae

Some content is hidden

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

55 files changed

+1130
-666
lines changed

‎angular.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
},
3838
"scripts": [],
3939
"serviceWorker": true,
40-
"ngswConfigPath": "ngsw-config.json"
40+
"ngswConfigPath": "ngsw-config.json",
41+
"allowedCommonJsDependencies": ["crypto"]
4142
},
4243
"configurations": {
4344
"production": {

‎package-lock.json

+266-279
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+9
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,20 @@
4343
"@ngrx/router-store": "^13.0.2",
4444
"@ngrx/store": "^13.0.2",
4545
"@ngrx/store-devtools": "^13.0.2",
46+
"assert": "^2.0.0",
47+
"bcryptjs": "^2.4.3",
48+
"crypto": "^1.0.1",
49+
"crypto-browserify": "^3.12.0",
50+
"https-browserify": "^1.0.0",
4651
"json-server": "^0.17.0",
4752
"json-server-auth": "^2.1.0",
4853
"ngx-logger": "^5.0.4",
54+
"os-browserify": "^0.3.0",
4955
"roboto-fontface": "^0.10.0",
5056
"rxdb": "^10.5.4",
5157
"rxjs": "^7.4.0",
58+
"stream-browserify": "^3.0.0",
59+
"stream-http": "^3.2.0",
5260
"tslib": "^2.3.0",
5361
"zone.js": "~0.11.4"
5462
},
@@ -69,6 +77,7 @@
6977
"@cypress/schematic": "^1.6.0",
7078
"@cypress/webpack-preprocessor": "^5.11.0",
7179
"@istanbuljs/nyc-config-typescript": "^1.0.2",
80+
"@types/bcryptjs": "^2.4.2",
7281
"@types/jasmine": "~3.10.2",
7382
"@types/jest": "^27.0.3",
7483
"@types/node": "^16.11.14",

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

+2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
33
import { NotFoundComponent } from '@core/components';
44
import { ShellComponent } from '@core/containers';
5+
import { AuthenticationGuard } from './modules/auth/guards';
56

67
const routes: Routes = [
78
{
89
path: '',
910
component: ShellComponent,
11+
canActivate: [AuthenticationGuard],
1012
children: [
1113
{
1214
path: '',

‎src/app/app.module.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { ROOT_EFFECTS } from '@shared/store/effects';
1616
import { CustomRouterStateSerializer } from '@shared/utils';
1717
import { LoggerModule } from 'ngx-logger';
1818
import { AppRoutingModule } from './app-routing.module';
19-
import { extModules } from './build-specifics/index.prod';
19+
import { extModules } from './build-specifics';
2020

2121
@NgModule({
2222
imports: [

‎src/app/core/components/navlist/navlist.component.html

+4
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,8 @@
1010

1111
<mat-divider></mat-divider>
1212
<router-outlet name="navbar-admin"></router-outlet>
13+
<a mat-list-item (click)="onLogout()">
14+
<mat-icon mat-list-icon fontSet="fa" fontIcon="fa-sign-out-alt" color="accent"></mat-icon>
15+
<span mat-line>Logout</span>
16+
</a>
1317
</mat-nav-list>

‎src/app/core/components/navlist/navlist.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
:host {
55
display: flex;
6-
flex: 1;
6+
flex: 1 1 auto;
77
flex-direction: column;
88
height: 100%;
99
}

‎src/app/core/components/navlist/navlist.component.ts

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { animate, state, style, transition, trigger } from '@angular/animations';
2-
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
3+
import { MatDialog } from '@angular/material/dialog';
4+
import { ConfirmDialogComponent } from '@shared/components';
5+
import { ConfirmDialogData } from '@shared/models';
6+
import { take } from 'rxjs';
37

48
@Component({
59
animations: [
@@ -15,9 +19,26 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
1519
templateUrl: './navlist.component.html',
1620
})
1721
export class NavlistComponent {
22+
@Output() logout = new EventEmitter<void>();
1823
adminExpanded: boolean = false;
1924

25+
constructor(private dialog: MatDialog) {}
26+
2027
toggleAdmin(): void {
2128
this.adminExpanded = !this.adminExpanded;
2229
}
30+
31+
onLogout(): void {
32+
this.dialog
33+
.open<ConfirmDialogComponent, ConfirmDialogData, boolean | undefined>(ConfirmDialogComponent, {
34+
data: { title: 'Logout', text: 'Are you sure you want to logout?' },
35+
})
36+
.afterClosed()
37+
.pipe(take(1))
38+
.subscribe((confirm: boolean | undefined) => {
39+
if (confirm) {
40+
this.logout.emit();
41+
}
42+
});
43+
}
2344
}

‎src/app/core/containers/app/app.component.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:host {
2+
display: flex;
3+
flex: 1 1 auto;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100%;
7+
}

‎src/app/core/containers/app/app.component.ts

+14-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1-
import { Component } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
2+
import { AuthenticationActions } from '@modules/auth/store/actions';
3+
import { Store } from '@ngrx/store';
4+
import { AppState } from '@shared/store';
25

36
@Component({
7+
changeDetection: ChangeDetectionStrategy.OnPush,
48
selector: 'app-root',
5-
template: '<router-outlet></router-outlet>',
9+
styleUrls: ['./app.component.scss'],
10+
template: '<router-outlet class="main"></router-outlet>',
611
})
7-
export class AppComponent {}
12+
export class AppComponent implements OnInit {
13+
constructor(private store$: Store<AppState>) {}
14+
15+
ngOnInit(): void {
16+
this.store$.dispatch(AuthenticationActions.checkLoggedIn());
17+
}
18+
}

‎src/app/core/containers/shell/shell.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h1 class="mat-h1 title">{{ appName }}</h1>
4444
position="start"
4545
(closedStart)="onCloseSideNav()"
4646
>
47-
<app-nav-list></app-nav-list>
47+
<app-nav-list (logout)="onLogout()"></app-nav-list>
4848
</mat-sidenav>
4949
<!-- Main page content -->
5050
<mat-sidenav-content fxFlex="1 1 auto" fxLayout="column">

‎src/app/core/containers/shell/shell.component.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
22
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
33
import { MatDialog } from '@angular/material/dialog';
4+
import { AuthenticationActions } from '@app/modules/auth/store/actions';
45
import { AppState, LayoutActions, LayoutSelectors, RouterActions, RouterSelectors } from '@app/shared/store';
56
import { AboutComponent } from '@core/components';
67
import { environment } from '@env/environment';
@@ -62,6 +63,7 @@ export class ShellComponent implements OnInit {
6263

6364
onLogout(): void {
6465
this.store.dispatch(LayoutActions.closeSidenav());
66+
this.store.dispatch(AuthenticationActions.logout());
6567
}
6668

6769
openAboutDialog(): void {

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

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
1-
import { NgModule } from '@angular/core';
21
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
33
import { RouterModule, Routes } from '@angular/router';
4+
import { EffectsModule } from '@ngrx/effects';
5+
import { StoreModule } from '@ngrx/store';
6+
import { AlreadyLoggedGuard } from './guards';
7+
import { authenticationEffets } from './store/effects';
8+
import { authenticationFeatureStateKey, authenticationReducers } from './store/reducers';
49

510
const AUTH_ROUTES: Routes = [
611
{
712
path: 'login',
13+
canLoad: [AlreadyLoggedGuard],
14+
canActivate: [AlreadyLoggedGuard],
815
loadChildren: () => import('./login/login.module').then((m) => m.LoginModule),
916
},
1017
{
1118
path: 'register',
19+
canLoad: [AlreadyLoggedGuard],
20+
canActivate: [AlreadyLoggedGuard],
1221
loadChildren: () => import('./register/register.module').then((m) => m.RegisterModule),
1322
},
1423
];
1524

1625
@NgModule({
17-
imports: [CommonModule, RouterModule.forChild(AUTH_ROUTES)],
26+
imports: [
27+
CommonModule,
28+
EffectsModule.forFeature(authenticationEffets),
29+
StoreModule.forFeature(authenticationFeatureStateKey, authenticationReducers),
30+
RouterModule.forChild(AUTH_ROUTES),
31+
],
1832
})
1933
export class AuthModule {}

‎src/app/modules/auth/guards/already-logged.guard.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Injectable } from '@angular/core';
2+
import { CanActivate, CanLoad } from '@angular/router';
3+
import { RouterActions } from '@app/shared/store';
4+
import { Store } from '@ngrx/store';
5+
import { map, Observable, take } from 'rxjs';
6+
import { AuthenticationFeatureState } from '../store/reducers';
7+
import { AuthenticationSelectors } from '../store/selectors';
8+
9+
@Injectable({
10+
providedIn: 'root',
11+
})
12+
export class AlreadyLoggedGuard implements CanActivate, CanLoad {
13+
constructor(private store$: Store<AuthenticationFeatureState>) {}
14+
15+
canActivate(): Observable<boolean> {
16+
return this.isAlreadyLogged();
17+
}
18+
19+
canLoad(): Observable<boolean> {
20+
return this.isAlreadyLogged();
21+
}
22+
23+
private isAlreadyLogged(): Observable<boolean> {
24+
return this.store$.select(AuthenticationSelectors.selectIsLogged).pipe(
25+
take(1),
26+
map((isLogged: boolean) => {
27+
if (isLogged) {
28+
this.store$.dispatch(RouterActions.go({ path: ['/'] }));
29+
}
30+
31+
return !isLogged;
32+
}),
33+
);
34+
}
35+
}

‎src/app/modules/auth/guards/authentication.guard.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Injectable } from '@angular/core';
2+
import { CanActivate } from '@angular/router';
3+
import { Store } from '@ngrx/store';
4+
import { map, Observable, take } from 'rxjs';
5+
import { AuthenticationActions } from '../store/actions';
6+
import { AuthenticationFeatureState } from '../store/reducers';
7+
import { AuthenticationSelectors } from '../store/selectors';
8+
9+
@Injectable({
10+
providedIn: 'root',
11+
})
12+
export class AuthenticationGuard implements CanActivate {
13+
constructor(private store$: Store<AuthenticationFeatureState>) {}
14+
15+
canActivate(): Observable<boolean> {
16+
return this.store$.select(AuthenticationSelectors.selectIsLogged).pipe(
17+
take(1),
18+
map((isLogged: boolean) => {
19+
if (!isLogged) {
20+
this.store$.dispatch(AuthenticationActions.loginRedirect());
21+
}
22+
23+
return isLogged;
24+
}),
25+
);
26+
}
27+
}

‎src/app/modules/auth/guards/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './already-logged.guard';
2+
export * from './authentication.guard';

‎src/app/modules/auth/login/containers/login/login.component.html

+45-29
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,49 @@
1-
<mat-card fxFlex="1 1 auto" fxLayout="column">
2-
<mat-card-title>Login</mat-card-title>
3-
<mat-card-content>
4-
<form [formGroup]="form" fxFlex="1 1 auto" fxLayout="column">
5-
<mat-form-field>
6-
<mat-label>Email</mat-label>
7-
<input matInput formControlName="email" type="email" placeholder="email" required />
8-
<mat-error *ngIf="form.get('email')?.hasError('required')"> Email is required</mat-error>
9-
</mat-form-field>
1+
<div class="container">
2+
<img *ngIf="logo" [src]="logo" alt="Application logo" class="logo" />
3+
<h1 class="mat-display-1">{{ appName }} login</h1>
4+
<mat-card fxFlex="1 1 auto" fxLayout="column">
5+
<mat-card-content>
6+
<form [formGroup]="form" fxFlex="1 1 auto" fxLayout="column">
7+
<mat-form-field color="accent">
8+
<mat-label>Email</mat-label>
9+
<input
10+
matInput
11+
formControlName="email"
12+
type="email"
13+
autocomplete="email"
14+
autocapitalize="false"
15+
spellcheck="false"
16+
autocorrect="false"
17+
placeholder="email"
18+
required
19+
/>
20+
<mat-error *ngIf="form.get('email')?.hasError('required')"> Email is required</mat-error>
21+
</mat-form-field>
1022

11-
<mat-form-field>
12-
<mat-label>Password</mat-label>
13-
<input
14-
matInput
15-
formControlName="password"
16-
type="password"
17-
placeholder="At least 6 chars"
18-
required
19-
minlength="6"
20-
/>
21-
<mat-error *ngIf="form.get('password')?.hasError('required')"> Password is required </mat-error>
22-
</mat-form-field>
23+
<mat-form-field color="accent">
24+
<mat-label>Password</mat-label>
25+
<input
26+
matInput
27+
formControlName="password"
28+
type="password"
29+
placeholder="At least 6 chars"
30+
autocomplete="current-password"
31+
required
32+
minlength="6"
33+
/>
34+
<mat-error *ngIf="form.get('password')?.hasError('required')"> Password is required </mat-error>
35+
</mat-form-field>
2336

24-
<button mat-button color="primary" [disabled]="form.invalid" (click)="login()">Login</button>
37+
<mat-checkbox formControlName="remember" color="accent">Remember me</mat-checkbox>
2538

26-
<mat-error *ngIf="error$ | async as error"> Login failed: {{ error }} </mat-error>
27-
</form>
28-
</mat-card-content>
39+
<button mat-raised-button color="accent" [disabled]="form.invalid" (click)="login()">Login</button>
2940

30-
<mat-card-actions>
31-
<p>Don't have a user yet? <a routerLink="/register">Register now</a></p>
32-
</mat-card-actions>
33-
</mat-card>
41+
<mat-error *ngIf="error$ | async as error"> Login failed: {{ error }} </mat-error>
42+
</form>
43+
</mat-card-content>
44+
45+
<mat-card-actions>
46+
<p>Don't have a user yet? <a routerLink="/register">Register now</a></p>
47+
</mat-card-actions>
48+
</mat-card>
49+
</div>

‎src/app/modules/auth/login/containers/login/login.component.scss

+32-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,35 @@
11
:host {
2-
display: flex;
3-
flex: 1 1 auto;
42
justify-content: center;
53
align-items: center;
6-
}
4+
}
5+
.container {
6+
max-width: 420px;
7+
text-align: center;
8+
flex-direction: column;
9+
}
10+
.mat-form-field,
11+
.mat-raised-button {
12+
width: 100%;
13+
min-width: 300px;
14+
}
15+
mat-card {
16+
background: #ffffffaa;
17+
}
18+
mat-card-title,
19+
mat-card-subtitle,
20+
mat-card-content {
21+
display: flex;
22+
justify-content: center;
23+
}
24+
.loginForm {
25+
margin-top: 30%;
26+
}
27+
.loginButtons {
28+
display: flex;
29+
flex-direction: row;
30+
justify-content: center;
31+
}
32+
.logo {
33+
margin: 0 10% 10px;
34+
max-width: 75%;
35+
}

0 commit comments

Comments
 (0)