Update Login and Registration for new api configuration

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
     );

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">

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) => {

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

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;