Version Bump

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-token",
-  "version": "0.2.0-beta.6",
+  "version": "0.2.0-beta.7",
   "description": "Angular2 service for token based authentication",
 
   "main": "./angular2-token.js",

src/a2t-ui/a2t-reset-password/a2t-reset-password.component.ts

@@ -7,9 +7,25 @@ import { RESET_PASSWORD_FORM } from '../';
 
 @Component({
     selector:       'a2t-reset-password',
-    templateUrl:    './a2t-reset-password.component.html',
-    styleUrls:      ['./a2t-reset-password.component.css'],
-    providers:      [A2tFormService]
+    providers:      [A2tFormService],
+    template: `
+        <a2t-headline *ngIf="!_emailSend">Reset your Password</a2t-headline>
+        <a2t-form *ngIf="!_emailSend">Reset Password</a2t-form>
+        <p class="email-send-text" *ngIf="_emailSend">
+            If the entered email is registered we will send instruction on how to reset your password.
+        </p>
+        <a2t-links *ngIf="!_emailSend" case="reset-password"></a2t-links>
+    `,
+    styles: [`
+        .email-send-text {
+            background-color: #72c380;
+            color: white;
+            font-size: 16pt;
+            text-align: center;
+            padding: 20px;
+            border-radius: 3px;
+        }
+    `]
 })
 export class A2tResetPasswordComponent {
 

src/a2t-ui/a2t-shared/a2t-error/a2t-error.component.ts

@@ -3,7 +3,22 @@ import { Component, Input } from '@angular/core';
 @Component({
     selector:   'a2t-error',
     template:   '<div *ngFor="let error of errors"><p>{{error}}</p></div>',
-    styleUrls:  ['./a2t-error.component.css']
+    styles: [`
+        div {
+            width: 100%;
+            background-color: #df6564;
+            color: white;
+            font-weight: 300;
+            font-size: 15px;
+            padding: 10px 20px;
+            border-radius: 3px;
+            margin-bottom: 15px;
+        }
+
+        div > p {
+            margin-bottom: 0;
+        }
+    `]
 })
 export class A2tErrorComponent {
 

src/a2t-ui/a2t-shared/a2t-form/a2t-form-field/a2t-form-field.component.ts

@@ -4,9 +4,82 @@ import { FormGroup, AbstractControl } from '@angular/forms';
 import { BaseField } from '../../../';
 
 @Component({
-    selector:       'a2t-form-field',
-    templateUrl:    './a2t-form-field.component.html',
-    styleUrls:      ['./a2t-form-field.component.css']
+    selector:   'a2t-form-field',
+    template: `
+        <div class="a2t-input-group"
+            [formGroup]="form">
+
+            <label
+                [attr.for]="question.key"
+                [style.color]="labelColor"
+                *ngIf="_control.pristine">
+                {{question.label}}
+            </label>
+
+            <label class="a2t-error"
+                [attr.for]="question.key"
+                *ngIf="_control.hasError('required') && !_control.pristine">
+                {{question.label}} is required
+            </label>
+
+            <label class="a2t-error"
+                [attr.for]="question.key"
+                *ngIf="_control.hasError('minlength')">
+                {{question.label}} is too short
+            </label>
+
+            <label class="a2t-error"
+                [attr.for]="question.key"
+                *ngIf="_control.hasError('maxlength')">
+                {{question.label}} is too long
+            </label>
+
+            <label class="a2t-valid"
+                [attr.for]="question.key"
+                *ngIf="_control.valid && !_control.pristine">
+                {{question.label}}
+            </label>
+
+            <input
+                [formControlName]="question.key"
+                [id]="question.key"
+                [type]="question.type">
+        </div>
+    `,
+    styles: [`
+        .a2t-input-group {
+            padding-bottom: 40px;
+            padding-right: 20px;
+            padding-left: 20px;
+            font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+        }
+
+        .a2t-input-group input {
+            width: 100%;
+            outline: none;
+            border: none;
+            background-color: #eee;
+            line-height: 40px;
+
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+        .a2t-input-group label {
+            color: #666;
+            font-weight: 600;
+            font-size: 13px;
+            margin-bottom: 0;
+        }
+
+        .a2t-error {
+            color: #df6564 !important;
+        }
+
+        .a2t-valid {
+            color: #72c380 !important;
+        }
+    `]
 })
 
 export class A2tFormFieldComponent implements OnInit {

src/a2t-ui/a2t-shared/a2t-form/a2t-form.component.ts

@@ -4,9 +4,65 @@ import { A2tFormService } from './a2t-form.service';
 import { A2tFormFieldComponent } from './a2t-form-field/a2t-form-field.component';
 
 @Component({
-    selector:       'a2t-form',
-    templateUrl:    './a2t-form.component.html',
-    styleUrls:      ['./a2t-form.component.css']
+    selector: 'a2t-form',
+    template: `
+        <form class="a2t-form"
+            (ngSubmit)="_formService.submit()"
+            [formGroup]="_formService.formGroup">
+
+            <a2t-form-field
+                *ngFor="let field of this._formService.fields"
+                [question]="field"
+                [form]="_formService.formGroup">
+            </a2t-form-field>
+
+            <button type="submit" [disabled]="!_formService.formGroup.valid || _formService.formGroup.pristine || _formService.submitLock">
+                <ng-content *ngIf="!_formService.submitLock"></ng-content>
+                <span *ngIf="_formService.submitLock">Submitting ...</span>
+            </button>
+        </form>
+    `,
+    styles: [`
+        .a2t-form {
+            background-color: white;
+            border-radius: 3px;
+            box-shadow: 0px 1px 5px 0 rgba(0,0,0,0.3);
+            padding-top: 20px;
+            font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+        }
+
+        .a2t-form button {
+            width: 100%;
+
+            transition: .3s;
+            background-color: #72c380;
+
+            border-bottom-right-radius: 3px;
+            border-bottom-left-radius: 3px;
+
+            outline: none;
+            text-align: center;
+            font-weight: 400;
+            border: none;
+            font-size: 16px;
+            line-height: 30px;
+
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+            color: white;
+            border-bottom: 3px solid transparent;
+        }
+
+        .a2t-form button:disabled {
+            background-color: #eee !important;
+            cursor: not-allowed;
+            color: #999;
+            text-shadow: none;
+        }
+
+        .a2t-form button:hover {
+            background-color: #a6d9ae;
+        }
+    `]
 })
 
 export class A2tFormComponent {