fixing login page.

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

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');
+    })
+  }
 }

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

frontend/src/app/pages/auth-signup/auth-signup.component.ts

@@ -26,7 +26,6 @@ export class AuthSignupComponent implements OnInit {
 
         this.router.navigateByUrl('/dashboard');
       })
-
   }
 
 }

frontend/src/app/services/fasten-api.service.ts

@@ -46,23 +46,19 @@ export class FastenApiService {
   }
 
 
-  signin(email: string, pass: string) {
+  signin(username: string, pass: string): Observable<any> {
-    const headers = {
-      headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Cache-Control': 'no-cache' })
-    };
 
     const data = {
-      email: email,
+      username: username,
       password: pass
     };
 
-    this._httpClient.post<any>(`${this.getBasePath()}/api/auth/signin`, data, headers).subscribe(
+    return this._httpClient.post<any>(`${this.getBasePath()}/api/auth/signin`, data).pipe(
-      (res: any) => {
+      map((res: any) => {
-        localStorage.setItem(this.AUTH_TOKEN_KEY, res.token);
+        localStorage.setItem(this.AUTH_TOKEN_KEY, res.data);
-
+        return res.data
-        this.router.navigateByUrl('/dashboard');
       }
-    );
+    ));
   }