Refactor login and signup page

Code/groupH_M32COM.Angular/ClientApp/src/app/account/component/account.component.html

@@ -0,0 +1,38 @@
+<div>
+  <mat-card>
+    <form class="form-container" [formGroup]="form" (submit)="onSubmit()">
+      <mat-form-field appearance="outline">
+        <input matInput type="email" formControlName="Email" placeholder="Email">
+        <mat-error *ngIf="Email.invalid">Please enter a valid email</mat-error>
+
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <input matInput type="text" formControlName="FirstName" placeholder="First name">
+        <mat-error *ngIf="FirstName.invalid">Please enter your first name</mat-error>
+
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <input matInput type="text" formControlName="LastName" placeholder="Last name">
+        <mat-error *ngIf="LastName.invalid">Please enter your last name</mat-error>
+
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <input matInput type="text" formControlName="Crew" placeholder="Crew">
+        <mat-error *ngIf="Crew.invalid">Please enter your crew name</mat-error>
+      </mat-form-field>
+
+      <div>
+        <button type="submit"  [disabled]="form.invalid" mat-stroked-button> Submit</button>
+      </div>
+      <!-- 
+          <mat-form-field>
+            <mat-select placeholder="Select">
+              <mat-option formControlName="" value="option">Option</mat-option>
+            </mat-select>
+          </mat-form-field> -->
+    </form>
+  </mat-card>
+</div>

Code/groupH_M32COM.Angular/ClientApp/src/app/account/component/account.component.scss

@@ -0,0 +1,12 @@
+.form-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-container > * {
+    width: 100%;
+  }
+
+  mat-card{
+      margin:50px;
+  }

Code/groupH_M32COM.Angular/ClientApp/src/app/account/component/account.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountComponent } from './account.component';
+
+describe('AccountComponent', () => {
+  let component: AccountComponent;
+  let fixture: ComponentFixture<AccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Code/groupH_M32COM.Angular/ClientApp/src/app/account/component/account.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.scss']
+})
+export class AccountComponent implements OnInit {
+
+  constructor() { }
+  form: FormGroup;
+
+  ngOnInit() {
+    this.form = new FormGroup({
+      Email: new FormControl(null, {
+        validators: [Validators.required, Validators.email]
+      }),
+      FirstName: new FormControl(null, { validators: [Validators.required] }),
+      LastName: new FormControl(null, { validators: [Validators.required] }),
+      Crew: new FormControl(null, { validators: [Validators.required] }),
+    });
+  }
+
+  get Email(){
+    return this.form.get("Email")
+  }
+  get FirstName(){
+    return this.form.get("FirstName")
+  }
+  get LastName(){
+    return this.form.get("LastName")
+  }
+
+  get Crew(){
+    return this.form.get("Crew")
+  }
+}

Code/groupH_M32COM.Angular/ClientApp/src/app/app.module.ts

@@ -18,6 +18,7 @@ import { FlatpickrModule } from 'angularx-flatpickr';
 import { HttpClientModule } from '@angular/common/http';
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService } from './in-memory-data.service';
+import {environment} from '../environments/environment';
 @NgModule({
   declarations: [
     AppComponent,
@@ -45,7 +46,7 @@ import { InMemoryDataService } from './in-memory-data.service';
     // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
     // and returns simulated server responses.
     // Remove it when a real server is ready to receive requests.
-    HttpClientInMemoryWebApiModule.forRoot(
+    environment.production ? [] : HttpClientInMemoryWebApiModule.forRoot(
       InMemoryDataService, { dataEncapsulation: false }
     )
   ],

Code/groupH_M32COM.Angular/ClientApp/src/app/auth/auth.service.ts

@@ -9,7 +9,7 @@ import { LoginComponent } from './login/login.component';
   providedIn: 'root'
 })
 export class AuthService {
-  constructor(private http: HttpClient, private router: Router) { }
+  constructor(private http: HttpClient, private router: Router) {}
   public isAuthenticated = false;
   private token: string = ' ';
   private authStatuesListener = new Subject<boolean>();
@@ -27,13 +27,12 @@ export class AuthService {
   }
   createUser(email: string, password: string) {
     const authData: IAuthData = { Email: email, Password: password };
-    this.http
-      .post('http://localhost:3000/api/user/signup', authData)
-      .subscribe(
-        () => this.router.navigate(['/']),
-        error => {
-          this.authStatuesListener.next(false);
-        });
+    this.http.post('http://localhost:3000/api/user/signup', authData).subscribe(
+      () => this.router.navigate(['/']),
+      error => {
+        this.authStatuesListener.next(false);
+      }
+    );
   }
 
   login(email: string, password) {
@@ -43,29 +42,30 @@ export class AuthService {
         'http://localhost:3000/api/user/login',
         authData
       )
-      .subscribe(response => {
-        const token = response.token;
-        const userId = response.userId;
-        if (token) {
-          const expiresInDuration = response.expiresIn;
-          this.setAuthTimer(expiresInDuration);
-          this.token = token;
-          this.isAuthenticated = true;
-          this.userId = response.userId;
-          this.authStatuesListener.next(true);
-          const now = new Date();
-          const expirationDate = new Date(
-            now.getTime() + expiresInDuration * 1000
-          );
-          console.log(expirationDate);
-          this.saveAuthData(token, expirationDate, this.userId);
-          this.router.navigate(['/']);
+      .subscribe(
+        response => {
+          console.log(response);
+          const token = response.token;
+          if (token) {
+            const expiresInDuration = response.expiresIn;
+            this.setAuthTimer(expiresInDuration);
+            this.token = token;
+            this.isAuthenticated = true;
+            this.userId = response.userId;
+            this.authStatuesListener.next(true);
+            const now = new Date();
+            const expirationDate = new Date(
+              now.getTime() + expiresInDuration * 1000
+            );
+            console.log(expirationDate);
+            this.saveAuthData(token, expirationDate, this.userId);
+            this.router.navigate(['/']);
+          }
+        },
+        error => {
+          this.authStatuesListener.next(false);
         }
-      }, error => {
-        this.authStatuesListener.next(false);
-      });
-
-    this.router.navigate(['/']);
+      );
   }
 
   autoAuthUser() {

Code/groupH_M32COM.Angular/ClientApp/src/app/auth/login/login.component.ts

@@ -1,20 +1,19 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { AuthService } from '../auth.service';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
-
-  constructor() { }
+  constructor(private authService: AuthService) {}
   form: FormGroup;
   private crewMemberId: string;
   private roleId: string;
   private boatId: string;
   ngOnInit() {
-
     this.form = new FormGroup({
       Email: new FormControl(null, {
         validators: [Validators.required, Validators.email]
@@ -31,7 +30,7 @@ export class LoginComponent implements OnInit {
   // CrewMemberId:string;*
   // RoleId:string;*
   // BoatId:string;*
-  
+
   // Editable
   // DOB:Date;*
   // FirstName:string;*
@@ -44,7 +43,7 @@ export class LoginComponent implements OnInit {
   get BoatId() {
     return this.boatId;
   }
-  
+
   get RoleId() {
     return this.roleId;
   }
@@ -63,22 +62,23 @@ export class LoginComponent implements OnInit {
   }
   get DateOfBirth() {
     return this.form.get('DateOfBirth');
-  }  
+  }
   get Email() {
-    return this.form.get("Email")
+    return this.form.get('Email');
   }
   get FirstName() {
-    return this.form.get("FirstName")
+    return this.form.get('FirstName');
   }
   get LastName() {
-    return this.form.get("LastName")
+    return this.form.get('LastName');
   }
 
-  onSubmit(){
-    console.log("submit")
-    console.log(this.form);
-    if(this.form.invalid){
+  onSubmit() {
+    if (this.form.invalid) {
       return;
     }
+
+    this.authService.login(this.form.value.Email, this.form.value.Password);
+
   }
 }

Code/groupH_M32COM.Angular/ClientApp/src/app/event/event.service.ts

@@ -26,20 +26,12 @@ export class EventService {
   constructor(private http: HttpClient) {}
 
   getTestDate(dateTo: Date, days: number) {
-    var date = new Date(dateTo.valueOf());
+    const date = new Date(dateTo.valueOf());
     date.setDate(date.getDate() + days);
     return date;
   }
 
   getEvents() {
-
-    return this.http.get<EventDetail[]>('/api/events')
-
-  }
-
-  getCrew() {
-
-    return this.http.get<CrewMember[]>('/api/people')
-
+    return this.http.get<EventDetail[]>('http://localhost:3000/api/events')   ;
   }
 }

Code/groupH_M32COM.Angular/ClientApp/src/app/event/models/Event.ts

@@ -0,0 +1,12 @@
+export class Event {
+  _id: string;
+  StartDate: Date;
+  Duration: number;
+  Type: BoatType;
+}
+
+enum BoatType {
+  Motor,
+  Wind,
+  Rowing
+}

Code/groupH_M32COM.Angular/ClientApp/src/app/event/models/Registration.ts

@@ -0,0 +1,6 @@
+export class Registration {
+  _id: string;
+  AccountId: string;
+  EventId: string;
+  BoatDesc: string;
+}

Code/groupH_M32COM.Angular/ClientApp/src/app/home/home.component.ts

@@ -170,14 +170,6 @@ export class HomeComponent implements OnInit {
   }
 
   ngOnInit(){
-
-
-    this.eventsService.getCrew().subscribe(crews =>{
-      crews.forEach(event =>{
-      console.log(event);
-      })
-     });
-
      this.eventsService.getEvents().subscribe(events =>{
       events.forEach(event =>{
       console.log(event);