CreateLoginScreen- added models/eventemitters to components, modified UI

Author: mhelmstadter

src/app/common/common.module.ts

@@ -1,5 +1,6 @@
 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';
@@ -11,7 +12,7 @@ import { MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModul
 
 @NgModule({
   imports: [
-    CommonModule, MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, MatCardModule
+    CommonModule, MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, MatCardModule, FormsModule
   ],
   declarations: [TextBoxComponent, LoginComponent, CheckBoxComponent, ToolbarComponent, RaisedButtonComponent, BasicButtonComponent, IconButtonComponent],
   exports: [ToolbarComponent],

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

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

src/app/common/components/presentation/check-box/check-box.component.html

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

src/app/common/components/presentation/check-box/check-box.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-check-box',
@@ -9,10 +9,19 @@ export class CheckBoxComponent implements OnInit {
 
   @Input() private label: string
   @Input() private color: string
+  @Input() private checkboxValue:boolean  
+
+  @Output() checkboxChange:EventEmitter<any> = new EventEmitter();
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  onChange(newValue) {
+    this.checkboxValue = newValue;
+    console.log("The checkbox value is: " + newValue);
+    this.checkboxChange.emit(newValue);
+  }
+
 }

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

@@ -1,3 +1,3 @@
 <button mat-icon-button>
-  <mat-icon aria-label="icon-button">{{icon}}</mat-icon>
+  <mat-icon aria-label="icon-button" (click)="click($event)">{{icon}}</mat-icon>
 </button>

src/app/common/components/presentation/icon-button/icon-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-icon-button',
@@ -9,9 +9,15 @@ export class IconButtonComponent implements OnInit {
 
   @Input() private icon:string;
 
+  @Output() public clickEvent:EventEmitter<any> = new EventEmitter();
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  click($event) {
+    this.clickEvent.emit(event);
+  }
+
 }

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

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