CreateLoginScreen- added to overall login screen UI

Author: mhelmstadter

src/app/app.component.html

@@ -1,4 +1,14 @@
-<app-toolbar></app-toolbar>
-<div style="text-align:center">
-  <app-login></app-login>
-</div>
+<div class="page">
+  <app-toolbar title="UltiCar"></app-toolbar>
+  <div class="main">
+    <div class="navLinks">
+      <a [routerLink]="['']">Register</a>
+      <a [routerLink]="['/login']">Sign In</a>
+    </div>
+    <div id="routing">
+      <div class="container">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  </div>
+  

src/app/app.component.scss

@@ -0,0 +1,6 @@
+.page {
+  background-color: rgb(31, 95, 121);
+}
+.main {
+  text-align: center;
+}

src/app/app.component.spec.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'Lit';
+  title = 'UltiCar';
 }

src/app/app.component.ts

@@ -1,11 +1,16 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
+import { Routes, RouterModule } from '@angular/router';
 import { FeCommonModule } from './common/common.module';
 import { AppComponent } from './app.component';
+import { LoginComponent } from 'app/common/components/smart/login/login.component';
 
-import { MatToolbarModule} from '@angular/material';
+const routes:Routes = [ 
+    {path: '', redirectTo: 'login', pathMatch: 'full'},
+    {path: 'login', component: LoginComponent},
+    {path: 'dashboard', component: LoginComponent}
+]
 
 @NgModule({
   declarations: [
@@ -15,15 +20,8 @@ import { MatToolbarModule} from '@angular/material';
     BrowserModule,
     BrowserAnimationsModule,
     FeCommonModule,
-    MatToolbarModule
-  ],
-  exports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    FeCommonModule,
-    MatToolbarModule
+    RouterModule.forRoot(routes)
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.module.ts

@@ -6,13 +6,15 @@ import { CheckBoxComponent } from './components/presentation/check-box/check-box
 import { ToolbarComponent } from './components/presentation/toolbar/toolbar.component';
 import { RaisedButtonComponent } from './components/presentation/raised-button/raised-button.component';
 import { BasicButtonComponent } from './components/presentation/basic-button/basic-button.component';
-import { MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule} from '@angular/material';
+import { IconButtonComponent } from './components/presentation/icon-button/icon-button.component';
+import { MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatFormFieldControl, MatInputModule, MatIconModule, MatCardModule } from '@angular/material';
 
 @NgModule({
   imports: [
-    CommonModule, MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule
+    CommonModule, MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, MatCardModule
   ],
-  declarations: [TextBoxComponent, LoginComponent, CheckBoxComponent, ToolbarComponent, RaisedButtonComponent, BasicButtonComponent],
-  exports: [LoginComponent, TextBoxComponent, CheckBoxComponent, ToolbarComponent, RaisedButtonComponent, MatFormFieldModule],
+  declarations: [TextBoxComponent, LoginComponent, CheckBoxComponent, ToolbarComponent, RaisedButtonComponent, BasicButtonComponent, IconButtonComponent],
+  exports: [ToolbarComponent],
 })
+
 export class FeCommonModule { }

src/app/common/common.module.ts

@@ -1 +1 @@
-<button mat-button color="accent">{{label}}</button>
+<button mat-button [color]="color" (click)="click($event)">{{label}}</button>

src/app/common/components/presentation/basic-button/basic-button.component.html

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-basic-button',
@@ -7,11 +7,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BasicButtonComponent implements OnInit {
 
-  label = 'Register'
+  @Input() private label:string
+  @Input() private color:string
 
+  @Output() public clickEvent:EventEmitter<any> = new EventEmitter();
+    
   constructor() { }
 
   ngOnInit() {
   }
 
+  click(event) {
+    this.clickEvent.emit(event);
+  }
+
 }

src/app/common/components/presentation/basic-button/basic-button.component.spec.ts

@@ -1 +1 @@
-<mat-checkbox>{{label}}</mat-checkbox>
+<mat-checkbox [color]="color">{{label}}</mat-checkbox>