Upgrade to proper user management

src/app/pages/admin/admin.component.html

@@ -1,12 +1,30 @@
 <div *ngIf="!isLoggedIn">
 	<p>Please log in:</p>
+	<label for="email">Your @nachklang.art email: </label>
+	<input id="email" type="text" aria-label="Your Email" [(ngModel)]="email"><br>
 	<label for="password">Password: </label>
 	<input id="password" type="password" aria-label="Password" (keyup.enter)="login()" [(ngModel)]="password"><br>
+	<button (click)="login()">Login</button>
+	<br><br>
+	<p>If you dont' have an account yet, please use the following form to register:</p>
 	<label for="name">Your full name: </label>
-	<input id="name" type="text" aria-label="Your Name" (keyup.enter)="login()" [(ngModel)]="name">
+	<input id="name" type="text" aria-label="Your Name" [(ngModel)]="name"><br>
+	<label for="registerEmail">Your @nachklang.art email: </label>
+	<input id="registerEmail" type="text" aria-label="Your Email" [(ngModel)]="registerEmail"><br>
+	<label for="registerPassword">Password: </label>
+	<input id="registerPassword" type="password" aria-label="Password" [(ngModel)]="registerPassword"><br>
+	<label for="registerPasswordConfirm">Confirm password: </label>
+	<input id="registerPasswordConfirm" type="password" aria-label="Password" (keyup.enter)="register()" [(ngModel)]="registerPasswordConfirm"><br>
+	<p *ngIf="!checkPasswordPolicy()">Passwords have to use uppercase and lowercase letters, numbers and must have at least 12 characters!</p>
+	<p *ngIf="!checkPasswordsMatch()">Passwords do not match!</p>
+	<button (click)="register()">Register</button>
 </div>
 <div *ngIf="isLoggedIn">
-	<span>Logged in as {{getUserName()}}&nbsp; | &nbsp;</span>
+	<span>Logged in as {{getUserName()}}</span>
+	<span *ngIf="checkUserInactive()">&nbsp;(inactive)</span>
+	<span>&nbsp;</span>
+	<button (click)="logout()">Logout</button>
+	<span>&nbsp; | &nbsp;</span>
 	<span>Calendar: </span>
 	<select [(ngModel)]="selectedCalendar" (change)="handleCalendarChange()">
 		<option value="" disabled selected hidden>Select calendar</option>

src/app/pages/admin/admin.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {ApiService} from '../../services/api.service';
 import {UtilsService} from '../../services/utils.service';
 import {Event} from '../../models/event';
+import {Session} from '../../models/session';
+import {User} from '../../models/user';
 
 @Component({
 	selector: 'app-admin',
@@ -15,8 +17,13 @@ export class AdminComponent implements OnInit {
 	selectedCalendar: string = '';
 	password: string = '';
 	name: string = '';
+	email: string = '';
 	eventFilter: string = 'all';
 	eventSorting: string = 'start_asc';
+	isActive: boolean = false;
+	registerEmail: string = '';
+	registerPassword: string = '';
+	registerPasswordConfirm: string = '';
 
 	constructor(
 		private api: ApiService
@@ -24,9 +31,15 @@ export class AdminComponent implements OnInit {
 	}
 
 	ngOnInit(): void {
-		if (UtilsService.getPasswordFromLocalStorage() !== '') {
-			this.isLoggedIn = true;
-			this.getEvents();
+		if (UtilsService.getSessionInfoFromLocalStorage().sessionId !== -1) {
+			this.api.checkSession(UtilsService.getSessionInfoFromLocalStorage()).subscribe((user: User) => {
+				if(user.userId != null && user.userId !== -1) {
+					this.isLoggedIn = true;
+					this.name = user.fullName;
+					this.isActive = user.isActive;
+					this.getEvents();
+				}
+			});
 		}
 	}
 
@@ -51,12 +64,6 @@ export class AdminComponent implements OnInit {
 		});
 	}
 
-	login(): void {
-		UtilsService.saveUserInfoToLocalStorage(this.password, this.name);
-		this.isLoggedIn = true;
-		this.getEvents();
-	}
-
 	handleCalendarChange() {
 		this.getEvents();
 	}
@@ -105,7 +112,7 @@ export class AdminComponent implements OnInit {
 	}
 
 	getUserName(): string {
-		return UtilsService.getNameFromLocalStorage();
+		return this.name;
 	}
 
 	sortEvents(): void {
@@ -127,4 +134,54 @@ export class AdminComponent implements OnInit {
 			return 1;
 		});
 	}
+
+	login(): void {
+		this.api.login(this.email, this.password).subscribe((session: Session): void => {
+			console.log(session);
+			if(session.sessionId != null && session.sessionId !== -1) {
+				UtilsService.saveSessionInfoToLocalStorage(session.sessionId, session.sessionKey);
+				this.isLoggedIn = true;
+				this.getEvents();
+			}
+		});
+	}
+
+	register(): void {
+		this.api.register(this.registerEmail, this.name, this.registerPassword).subscribe((session: Session): void => {
+			if(session.sessionId != null && session.sessionId !== -1) {
+				UtilsService.saveSessionInfoToLocalStorage(session.sessionId, session.sessionKey);
+				this.isLoggedIn = true;
+				this.getEvents();
+				confirm('Please talk to Patrick to activate your account. You can\'t use this application before that.')
+			}
+		});
+	}
+
+	logout(): void {
+		UtilsService.clearSessionInfo();
+		this.isLoggedIn = false;
+	}
+
+	checkUserInactive(): boolean {
+		return !this.isActive;
+	}
+
+	checkPasswordsMatch(): boolean {
+		return this.registerPassword === this.registerPasswordConfirm;
+	}
+
+	checkPasswordPolicy(): boolean {
+		let isLongEnough = this.registerPassword.length >= 12;
+
+		var lowercaseRegex = /[a-z]/g
+		let hasLowercase = lowercaseRegex.test(this.registerPassword);
+
+		var uppercaseRegex = /[A-Z]/g
+		let hasUppercase = uppercaseRegex.test(this.registerPassword);
+
+		var numberRegex = /[0-9]/g
+		let hasNumbers = numberRegex.test(this.registerPassword);
+
+		return isLongEnough && hasLowercase && hasUppercase && hasNumbers;
+	}
 }