Implementing the login

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { MatInputModule } from "@angular/material/input";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import {MatTabsModule} from "@angular/material/tabs";
 import {PasswordValidator} from "./misc/password-validator";
+import {MatCheckboxModule} from "@angular/material/checkbox";
 
 @NgModule({
 	declarations: [
@@ -64,7 +65,8 @@ import {PasswordValidator} from "./misc/password-validator";
 		MatInputModule,
 		MatFormFieldModule,
 		FormsModule,
-		MatTabsModule
+		MatTabsModule,
+		MatCheckboxModule
 	],
 	providers: [],
 	bootstrap: [AppComponent]

src/app/login/login.component.html

@@ -3,38 +3,37 @@
 		<mat-tab-group mat-stretch-tabs>
 			<mat-tab label="Login">
 				<br/>
-				<mat-card-content>
+				<form #loginForm="ngForm" (ngSubmit)="login()">
-					<form #loginForm="ngForm" (ngSubmit)="login()">
+					<mat-card-content>
 						<mat-form-field appearance="outline" class="w-75">
-							<mat-label>Email</mat-label>
+							<mat-label>Username</mat-label>
-							<input matInput name="loginEmail" #loginEmail="ngModel" [(ngModel)]="loginInformation.email" required email>
+							<input matInput name="loginUsername" #loginUsername="ngModel" [(ngModel)]="loginInformation.username" required>
-							<mat-error *ngIf="loginEmail.hasError('required')">
+							<mat-error *ngIf="loginUsername.hasError('required')">
-								An email is <strong>required</strong>
+								An username is <strong>required</strong>
-							</mat-error>
-							<mat-error *ngIf="loginEmail.hasError('email')">
-								Please enter a valid email
 							</mat-error>
 						</mat-form-field>
 						<br/>
 						<br/>
 						<mat-form-field appearance="outline" class="w-75">
 							<mat-label>Password</mat-label>
-							<input matInput  name="loginPassword" #loginPassword="ngModel" [(ngModel)]="loginInformation.password" [type]="hidePassword ? 'password' : 'text'" required passwordValidator>
+							<input matInput name="loginPassword" #loginPassword="ngModel" [(ngModel)]="loginInformation.password" [type]="hidePassword ? 'password' : 'text'" required passwordValidator>
-							<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
+							<button mat-icon-button matSuffix type="button" (click)="hidePassword = !hidePassword;" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
 								<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
 							</button>
 							<mat-error *ngIf="loginPassword.hasError('required')">
 								A password is <strong>required</strong>
 							</mat-error>
 							<mat-error *ngIf="loginPassword.hasError('passwordError')">
-								Error: {{signinPassword.getError("passwordError")["error"]}}
+								Error: {{loginPassword.getError("passwordError")["error"]}}
 							</mat-error>
 						</mat-form-field>
-					</form>
+						<br/>
-				</mat-card-content>
+						<mat-checkbox class="pl-3" [(ngModel)]="loginInformation.stayLoggedIn" name="rememberme">Stay logged in</mat-checkbox>
-				<div fxFlexAlign="end" align="end" style="text-align: end">
+					</mat-card-content>
-					<button mat-button type="submit" [disabled]="!loginForm.valid">Login</button>
+					<div fxFlexAlign="end" align="end" style="text-align: end">
-				</div>
+						<button mat-button type="submit" [disabled]="!loginForm.valid">Login</button>
+					</div>
+				</form>
 			</mat-tab>
 			<mat-tab label="Signin">
 				<br/>
@@ -64,7 +63,7 @@
 						<mat-form-field appearance="outline" class="w-75">
 							<mat-label>Password</mat-label>
 							<input matInput name="signinPassword" #signinPassword="ngModel" [(ngModel)]="signinInformation.password" [type]="hidePassword ? 'password' : 'text'" required passwordValidator>
-							<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
+							<button mat-icon-button matSuffix type="button" (click)="hidePassword = !hidePassword;" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
 								<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
 							</button>
 							<mat-error *ngIf="signinPassword.hasError('required')">

src/app/login/login.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import {AuthService} from "../services/auth.service";
+import {ActivatedRoute, Router} from "@angular/router";
 
 @Component({
 	selector: 'app-login',
@@ -8,15 +9,33 @@ import {AuthService} from "../services/auth.service";
 })
 export class LoginComponent 
 {
-	loginInformation: {email: string, password: string} = {email: "", password: ""};
+	loginInformation: {username: string, password: string, stayLoggedIn: boolean} = {username: "", password: "", stayLoggedIn: false};
 	signinInformation: {email: string, username: string, password: string} = {email: "", username: "", password: ""};
 	hidePassword: boolean = true;
+	redirectURI: string = "/";
 	
-	constructor(private authService: AuthService) { }
+	constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) 
+	{
+		if (this.route.snapshot.queryParams["redirectURI"])
+			this.redirectURI = this.route.snapshot.queryParams["redirectURI"];
+		if (this.route.snapshot.queryParams["otac"])
+			this.useOTAC(this.route.snapshot.queryParams["otac"]);
+	}
 	
 	async login()
 	{
-		
+		this.authService.login(this.loginInformation)
+			.subscribe(() =>
+			{
+				this.router.navigateByUrl(this.redirectURI);
+			}, error => {
+				console.log("Login error: " + error);
+			});
+	}
+	
+	useOTAC(otac: string)
+	{
+		console.log("Got an OTAC: " + otac);
 	}
 
 	async signin()
@@ -24,10 +43,9 @@ export class LoginComponent
 		this.authService.register(this.signinInformation)
 			.subscribe(result => 
 			{
-				console.log("Sucess: " + result);
+				this.useOTAC(result);
 			}, error => {
 				console.log("Register error: " + error);
 			});
-		console.log("Register returned");
 	}
 }

src/app/services/auth.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { UserManager, UserManagerSettings, User } from 'oidc-client';
 import {HttpClient} from "@angular/common/http";
 import { catchError } from 'rxjs/operators';
-import {EMPTY} from "rxjs";
+import {EMPTY, Observable} from "rxjs";
 import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Injectable({
@@ -23,14 +23,20 @@ export class AuthService
 		});
 	}
 
-	login()
+	login(loginInformation: any)
 	{
-		return this._userManager.signinRedirect();
+		return this.http.post("/api/account/login", loginInformation).pipe(catchError((error =>
+		{
+			console.log(error.status + " - " + error.message);
+			this.snackBar.open(`An unknown error occured: ${error.message}.`, null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
+			return EMPTY;
+		})));
 	}
 	
-	register(userRegistration: any)
+	register(userRegistration: any) : Observable<string>
 	{
-		return this.http.post("/api/account/register", userRegistration).pipe(catchError((error => 
+		// @ts-ignore
+		return this.http.post<string>("/api/account/register", userRegistration, {responseType: "text"}).pipe(catchError((error => 
 		{
 			console.log(error.status + " - " + error.message);
 			this.snackBar.open(`An unknown error occured: ${error.message}.`, null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });