Merge pull request #1 from AITestingOrg/CreateLoginScreen

added and incorporated basic presentation components

Author: mhelmstadter

src/app/app.component.html

@@ -1,8 +1,14 @@
-<!--The whole content below can be removed with the new code.-->
-<div style="text-align:center">
-  <h1>
-    {{title}}!!
-  </h1>
-  <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 { MatButtonModule, MatCheckboxModule} from '@angular/material';
+const routes:Routes = [ 
+    {path: '', redirectTo: 'login', pathMatch: 'full'},
+    {path: 'login', component: LoginComponent},
+    {path: 'dashboard', component: LoginComponent}
+]
 
 @NgModule({
   declarations: [
@@ -14,9 +19,9 @@ import { MatButtonModule, MatCheckboxModule} from '@angular/material';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    FeCommonModule
+    FeCommonModule,
+    RouterModule.forRoot(routes)
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.module.ts

@@ -1,15 +1,21 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import { TextBoxComponent } from './components/presentation/text-box/text-box.component';
 import { LoginComponent } from './components/smart/login/login.component';
 import { CheckBoxComponent } from './components/presentation/check-box/check-box.component';
+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 { IconButtonComponent } from './components/presentation/icon-button/icon-button.component';
+import { MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatFormFieldControl, MatInputModule, MatIconModule, MatCardModule } from '@angular/material';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule, MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, MatCardModule, FormsModule
   ],
-  declarations: [TextBoxComponent, LoginComponent, CheckBoxComponent],
-  exports: [ 
-    LoginComponent, TextBoxComponent, CheckBoxComponent]
+  declarations: [TextBoxComponent, LoginComponent, CheckBoxComponent, ToolbarComponent, RaisedButtonComponent, BasicButtonComponent, IconButtonComponent],
+  exports: [ToolbarComponent],
 })
+
 export class FeCommonModule { }

src/app/common/common.module.ts

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

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

@@ -0,0 +1,3 @@
+.mat-button {
+  min-width: 200px;
+}

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

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-button',
+  templateUrl: './basic-button.component.html',
+  styleUrls: ['./basic-button.component.scss']
+})
+export class BasicButtonComponent implements OnInit {
+
+  @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.ts

@@ -1,3 +1 @@
-<p>
-  DRIVER-CHECKBOX
-</p>
+<mat-checkbox [color]="color" [(ngModel)]="checkboxValue" (ngModelChange)="onChange($event)">{{label}}</mat-checkbox>