From b5e12c0374503ca9e5173e7eb7182b6d1922683c Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Mon, 12 Sep 2022 17:07:38 -0400
Subject: [PATCH] fixing login page.

---
 .../auth-signin/auth-signin.component.html    | 31 ++++++++++++++++---
 .../auth-signin/auth-signin.component.ts      | 16 +++++++++-
 .../auth-signup/auth-signup.component.html    |  6 ++--
 .../auth-signup/auth-signup.component.ts      |  1 -
 .../src/app/services/fasten-api.service.ts    | 18 +++++------
 5 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/pages/auth-signin/auth-signin.component.html b/frontend/src/app/pages/auth-signin/auth-signin.component.html
index 1a4d7d89..8e8f7481 100644
--- a/frontend/src/app/pages/auth-signin/auth-signin.component.html
+++ b/frontend/src/app/pages/auth-signin/auth-signin.component.html
@@ -5,21 +5,42 @@
       <h2>Welcome back!</h2>
       <h4>Please sign in to continue</h4>
 
-      <form>
+      <form (ngSubmit)="signinSubmit()" #userForm="ngForm">
         <div class="form-group">
           <label>Email</label>
-          <input type="text" class="form-control" placeholder="Enter your email" value="demo@bootstrapdash.com">
+          <input [(ngModel)]="existingUser.username" name="username" #username="ngModel" required minlength="2" type="text" class="form-control" placeholder="Enter your email">
+
+          <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
+            <div *ngIf="username.errors?.['required']">
+              Email is required.
+            </div>
+            <div *ngIf="username.errors?.['minlength']">
+              Email must be at least 4 characters long.
+            </div>
+            <div *ngIf="username.errors?.['email']">
+              Email is not a valid email address.
+            </div>
+          </div>
         </div><!-- form-group -->
         <div class="form-group">
           <label>Password</label>
-          <input type="password" class="form-control" placeholder="Enter your password" value="thisisademo">
+          <input [(ngModel)]="existingUser.password" name="password" #password="ngModel" required minlength="8" type="password" class="form-control" placeholder="Enter your password">
+
+          <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
+            <div *ngIf="password.errors?.['required']">
+              Password is required.
+            </div>
+            <div *ngIf="password.errors?.['minlength']">
+              Password must be at least 8 characters long.
+            </div>
+          </div>
         </div><!-- form-group -->
-        <a class="btn btn-az-primary btn-block" routerLink="/">Sign In</a>
+        <button [disabled]="!userForm.form.valid" type="submit" class="btn btn-az-primary btn-block">Sign In</button>
       </form>
     </div><!-- az-signin-header -->
     <div class="az-signin-footer">
       <p><a href="">Forgot password?</a></p>
-      <p>Don't have an account? <a routerLink="/general-pages/signup">Create an Account</a></p>
+      <p>Don't have an account? <a routerLink="/auth/signup">Create an Account</a></p>
     </div><!-- az-signin-footer -->
   </div><!-- az-card-signin -->
 </div><!-- az-signin-wrapper -->
diff --git a/frontend/src/app/pages/auth-signin/auth-signin.component.ts b/frontend/src/app/pages/auth-signin/auth-signin.component.ts
index 161d188b..f51a4b30 100644
--- a/frontend/src/app/pages/auth-signin/auth-signin.component.ts
+++ b/frontend/src/app/pages/auth-signin/auth-signin.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import {User} from '../../models/fasten/user';
+import {FastenApiService} from '../../services/fasten-api.service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-auth-signin',
@@ -6,10 +9,21 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./auth-signin.component.scss']
 })
 export class AuthSigninComponent implements OnInit {
+  submitted: boolean = false
+  existingUser: User = new User()
 
-  constructor() { }
+  constructor(private fastenApi: FastenApiService,  private router: Router) { }
 
   ngOnInit(): void {
   }
 
+  signinSubmit(){
+    this.submitted = true;
+
+    this.fastenApi.signin(this.existingUser.username, this.existingUser.password).subscribe((tokenResp: any) => {
+      console.log(tokenResp);
+
+      this.router.navigateByUrl('/dashboard');
+    })
+  }
 }
diff --git a/frontend/src/app/pages/auth-signup/auth-signup.component.html b/frontend/src/app/pages/auth-signup/auth-signup.component.html
index a123ab75..0a2a16a8 100644
--- a/frontend/src/app/pages/auth-signup/auth-signup.component.html
+++ b/frontend/src/app/pages/auth-signup/auth-signup.component.html
@@ -7,8 +7,6 @@
       <p>We are excited to launch our new company and product Azia. After being featured in too many magazines to mention and having created an online stir, we know that BootstrapDash is going to be big. We also hope to win Startup Fictional Business of the Year this year.</p>
       <p>Browse our site and see for yourself why you need Azia.</p>
       <a routerLink="/" class="btn btn-outline-indigo">Learn More</a>
-
-      {{ newUser | json }}
     </div>
   </div><!-- az-column-signup-left -->
   <div class="az-column-signup">
@@ -58,7 +56,7 @@
               Password is required.
             </div>
             <div *ngIf="password.errors?.['minlength']">
-              Name must be at least 8 characters long.
+              Password must be at least 8 characters long.
             </div>
           </div>
         </div><!-- form-group -->
@@ -66,7 +64,7 @@
       </form>
     </div><!-- az-signup-header -->
     <div class="az-signup-footer">
-      <p>Already have an account? <a routerLink="auth/signin">Sign In</a></p>
+      <p>Already have an account? <a routerLink="/auth/signin">Sign In</a></p>
     </div><!-- az-signin-footer -->
   </div><!-- az-column-signup -->
 </div><!-- az-signup-wrapper -->
diff --git a/frontend/src/app/pages/auth-signup/auth-signup.component.ts b/frontend/src/app/pages/auth-signup/auth-signup.component.ts
index 2cc27210..d9a6d896 100644
--- a/frontend/src/app/pages/auth-signup/auth-signup.component.ts
+++ b/frontend/src/app/pages/auth-signup/auth-signup.component.ts
@@ -26,7 +26,6 @@ export class AuthSignupComponent implements OnInit {
 
         this.router.navigateByUrl('/dashboard');
       })
-
   }
 
 }
diff --git a/frontend/src/app/services/fasten-api.service.ts b/frontend/src/app/services/fasten-api.service.ts
index c04675eb..5453c3b1 100644
--- a/frontend/src/app/services/fasten-api.service.ts
+++ b/frontend/src/app/services/fasten-api.service.ts
@@ -46,23 +46,19 @@ export class FastenApiService {
   }
 
 
-  signin(email: string, pass: string) {
-    const headers = {
-      headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Cache-Control': 'no-cache' })
-    };
+  signin(username: string, pass: string): Observable<any> {
 
     const data = {
-      email: email,
+      username: username,
       password: pass
     };
 
-    this._httpClient.post<any>(`${this.getBasePath()}/api/auth/signin`, data, headers).subscribe(
-      (res: any) => {
-        localStorage.setItem(this.AUTH_TOKEN_KEY, res.token);
-
-        this.router.navigateByUrl('/dashboard');
+    return this._httpClient.post<any>(`${this.getBasePath()}/api/auth/signin`, data).pipe(
+      map((res: any) => {
+        localStorage.setItem(this.AUTH_TOKEN_KEY, res.data);
+        return res.data
       }
-    );
+    ));
   }