From a5f17b80eb728d0149bb92e6819cd28add333c5e Mon Sep 17 00:00:00 2001
From: kevinpauer <kevinpauer@t-online.de>
Date: Sun, 27 Mar 2022 21:33:35 +0200
Subject: [PATCH] Update Login and Registration for new api configuration

---
 frontend/src/app/Services/auth.service.ts     |  9 ++++----
 .../src/app/Views/login/login.component.html  | 22 +++++++++----------
 .../src/app/Views/login/login.component.ts    |  8 +++----
 .../Views/register/register.component.html    | 18 +++++++++++++++
 .../app/Views/register/register.component.ts  |  7 +++---
 5 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/Services/auth.service.ts b/frontend/src/app/Services/auth.service.ts
index 4fcdef9..85ad53a 100644
--- a/frontend/src/app/Services/auth.service.ts
+++ b/frontend/src/app/Services/auth.service.ts
@@ -11,18 +11,19 @@ const httpOptions = {
 })
 export class AuthService {
   constructor(private http: HttpClient) {}
-  login(username: string, password: string): Observable<any> {
+  login(email: string, password: string): Observable<any> {
     return this.http.post(AUTH_API + '/login', {
-      username,
+      email,
       password,
     });
   }
-  register(username: string, password: string): Observable<any> {
+  register(email: string, username: string, password: string): Observable<any> {
     return this.http.post(
       AUTH_API + '/register',
       {
-        username,
+        email,
         password,
+        username,
       },
       httpOptions
     );
diff --git a/frontend/src/app/Views/login/login.component.html b/frontend/src/app/Views/login/login.component.html
index b1ce7dc..42f01b4 100644
--- a/frontend/src/app/Views/login/login.component.html
+++ b/frontend/src/app/Views/login/login.component.html
@@ -14,21 +14,21 @@
       class="backgorund"
     >
       <div class="form-group">
-        <label for="username">Username</label>
+        <label for="email">Email</label>
         <input
-          type="text"
+          type="email"
           class="form-control"
-          name="username"
-          [(ngModel)]="form.username"
+          name="email"
+          [(ngModel)]="form.email"
           required
-          #username="ngModel"
+          email
+          #email="ngModel"
         />
-        <div
-          class="alert alert-danger"
-          role="alert"
-          *ngIf="username.errors && f.submitted"
-        >
-          Username is required!
+        <div class="alert-danger" *ngIf="email.errors && f.submitted">
+          <div *ngIf="email.errors?.['required']">Email is required</div>
+          <div *ngIf="email.errors?.['email']">
+            Email must be a valid email address
+          </div>
         </div>
       </div>
       <div class="form-group">
diff --git a/frontend/src/app/Views/login/login.component.ts b/frontend/src/app/Views/login/login.component.ts
index dac1bc2..2837bd2 100644
--- a/frontend/src/app/Views/login/login.component.ts
+++ b/frontend/src/app/Views/login/login.component.ts
@@ -10,7 +10,7 @@ import { Router } from '@angular/router';
 })
 export class LoginComponent implements OnInit {
   form: any = {
-    username: null,
+    email: null,
     password: null,
   };
   isLoggedIn = false;
@@ -39,15 +39,15 @@ export class LoginComponent implements OnInit {
 
   //onSubmit() saves valuable information in session storage
   onSubmit(): void {
-    const { username, password } = this.form;
-    this.authService.login(username, password).subscribe(
+    const { email, password } = this.form;
+    this.authService.login(email, password).subscribe(
       (data) => {
         this.tokenStorage.saveToken(data.data.token);
         this.tokenStorage.saveUser(data.data);
 
         this.isLoginFailed = false;
         this.isLoggedIn = true;
-        this.accountName = username;
+        this.accountName = email;
         this.router.navigate(['']);
       },
       (err) => {
diff --git a/frontend/src/app/Views/register/register.component.html b/frontend/src/app/Views/register/register.component.html
index 486f037..6b21679 100644
--- a/frontend/src/app/Views/register/register.component.html
+++ b/frontend/src/app/Views/register/register.component.html
@@ -35,6 +35,24 @@
           </div>
         </div>
       </div>
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input
+          type="email"
+          class="form-control"
+          name="email"
+          [(ngModel)]="form.email"
+          required
+          email
+          #email="ngModel"
+        />
+        <div class="alert-danger" *ngIf="email.errors && f.submitted">
+          <div *ngIf="email.errors?.['required']">Email is required</div>
+          <div *ngIf="email.errors?.['email']">
+            Email must be a valid email address
+          </div>
+        </div>
+      </div>
       <div class="form-group">
         <label for="password">Password</label>
         <input
diff --git a/frontend/src/app/Views/register/register.component.ts b/frontend/src/app/Views/register/register.component.ts
index c032d71..b52f311 100644
--- a/frontend/src/app/Views/register/register.component.ts
+++ b/frontend/src/app/Views/register/register.component.ts
@@ -9,8 +9,9 @@ import { AuthService } from '../../Services/auth.service';
 })
 export class RegisterComponent implements OnInit {
   form: any = {
-    username: null,
+    email: null,
     password: null,
+    username: null,
   };
   isSuccessful = false;
   isSignUpFailed = false;
@@ -23,8 +24,8 @@ export class RegisterComponent implements OnInit {
   constructor(private authService: AuthService, private router: Router) {}
   ngOnInit(): void {}
   onSubmit(): void {
-    const { username, password } = this.form;
-    this.authService.register(username, password).subscribe(
+    const { email, username, password } = this.form;
+    this.authService.register(email, username, password).subscribe(
       (data) => {
         this.isSuccessful = true;
         this.isSignUpFailed = false;