#17 Login with Material Design Lite

demo-shell-ng2/app/components/login/login.component.css

@@ -1,40 +1,92 @@
-body {
+.login-card-wide.mdl-card {
-    padding-top: 40px;
+    width: 512px;
-    padding-bottom: 40px;
+    margin: auto;
-    background-color: #eee;
+}
+.login-card-wide > .mdl-card__menu {
+    color: #000;
 }
 
-.form-signin {
+
-    max-width: 330px;
+
-    padding: 15px;
+.ng-invalid.ng-invalid.ng-touched {
-    margin: 0 auto;
+    border-color: rgb(222, 50, 38);
+    box-shadow: none;
 }
-.form-signin .form-signin-heading,
+
-.form-signin .checkbox {
+.ng-invalid.ng-invalid.ng-touched + label {
-    margin-bottom: 10px;
+    color: rgb(222, 50, 38);
+    font-size: 12px;
 }
-.form-signin .checkbox {
+
+.ng-invalid.ng-invalid.ng-touched + label:after {
+    background-color: rgb(222, 50, 38);
+}
+
+.ng-invalid.ng-invalid.ng-touched ~ .mdl-tooltip--validation {
+    background-color: rgb(222, 50, 38);
+}
+
+
+.ng-invalid.ng-touched:not(:focus) + label::before {
+    font-family: 'Material Icons';
     font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    /* Preferred icon size */
+
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    /* Support for all WebKit browsers. */
+
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+
+    -moz-osx-font-smoothing: grayscale;
+    /* Support for IE. */
+
+    font-feature-settings: 'liga';
+    content: "warning";
+    position: absolute;
+    right: 0;
+    bottom: 20px;
 }
-.form-signin .form-control {
+
-    position: relative;
+.ng-valid.ng-touched:not(:focus) + label::before {
-    height: auto;
+    font-family: 'Material Icons';
-    -webkit-box-sizing: border-box;
+    font-weight: normal;
-    -moz-box-sizing: border-box;
+    font-style: normal;
-    box-sizing: border-box;
+    font-size: 24px;
-    padding: 10px;
+    /* Preferred icon size */
-    font-size: 16px;
+
-}
+    display: inline-block;
-.form-signin .form-control:focus {
+    width: 1em;
-    z-index: 2;
+    height: 1em;
-}
+    line-height: 1;
-.form-signin input[type="username"] {
+    text-transform: none;
-    margin-bottom: -1px;
+    letter-spacing: normal;
-    border-bottom-right-radius: 0;
+    word-wrap: normal;
-    border-bottom-left-radius: 0;
+    /* Support for all WebKit browsers. */
-}
+
-.form-signin input[type="password"] {
+    -webkit-font-smoothing: antialiased;
-    margin-bottom: 10px;
+    /* Support for Safari and Chrome. */
-    border-top-left-radius: 0;
+
-    border-top-right-radius: 0;
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+
+    -moz-osx-font-smoothing: grayscale;
+    /* Support for IE. */
+
+    font-feature-settings: 'liga';
+    content: "done";
+    position: absolute;
+    right: 0;
+    bottom: 20px;
 }

demo-shell-ng2/app/components/login/login.component.html

@@ -1,29 +1,33 @@
-<div class="row">
+<div mdl class="login-card-wide mdl-card mdl-shadow--4dp">
-    <div class="col-md-4 col-md-offset-4">
+    <form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
-        <form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)" class="form-signin">
+        <div class="mdl-card__title">
-            <div [ngClass]="{'has-error': isErrorStyle(form.controls.username)}" class="form-group">
+            <h2 class="mdl-card__title-text ">Login</h2>
-                <label for="username">Username</label>
+        </div>
-                <input id="username" class="form-control " type="text" placeholder="username" ngControl="username">
+        <div class="mdl-card__supporting-text">
-                <div [hidden]="form.controls.username.valid || form.controls.username.pristine" class="alert alert-danger">
+            <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
-                    <p *ngIf="form.controls.username.dirty && form.controls.username.errors && form.controls.username.errors.minlength">
+                <label for="username" class="mdl-textfield__label">Username</label>
-                        Your username needs to be at least 4 characters.
+                <input type="text" class="mdl-textfield__input" id="username" ngControl="username" />
-                    </p>
+                <span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="form.controls.username.hasError('required')">
-                    <p *ngIf="form.controls.username.hasError('required')">
+                        <span>Required.</span>
-                        Username is required
+                </span>
-                    </p>
+                <span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="form.controls.username.hasError('minlength')">
-                </div>
+                        <span>Your username needs to be at least 4 characters.</span>
+                </span>
             </div>
-            <div [ngClass]="{'has-error': isErrorStyle(form.controls.password)}" class="form-group">
+
-                <label for="password">Password</label>
+            <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-                <input id="password" class="form-control" type="password" placeholder="password" ngControl="password">
+                <label for="password" class="mdl-textfield__label">Password</label>
-                <div [hidden]="form.controls.password.valid || form.controls.password.pristine" class="alert alert-danger">
+                <input type="password" class="mdl-textfield__input" id="password" ngControl="password" />
-                    <p *ngIf="form.controls.password.hasError('required')">
+                <span class="mdl-tooltip mdl-tooltip--validation" for="password" *ngIf="form.controls.password.hasError('required')">
-                        Password is required
+                        <span>Required.</span>
-                    </p>
+                </span>
-                </div>
             </div>
-            <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="!form.valid">Login</button>
+        </div>
-            <div *ngIf="error" class="alert alert-danger">You have entered an invalid username or password</div>
+        <div class="mdl-card__actions mdl-card--border">
-        </form>
+            <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" [disabled]="!form.valid">Login</button>
-    </div>
+        </div>
+        <div class="mdl-card__menu">
+            <div class="mdl-spinner mdl-js-spinner"></div>
+        </div>
+    </form>
 </div>

demo-shell-ng2/app/components/login/login.ts

@@ -2,11 +2,13 @@ import {Component} from 'angular2/core';
 import {Router, ROUTER_DIRECTIVES} from 'angular2/router';
 import {FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators} from 'angular2/common';
 import {Authentication} from '../../services/authentication';
+import {MDL} from '../MaterialDesignLiteUpgradeElement';
+declare let componentHandler;
 
 @Component({
     selector: 'login',
     moduleId: 'app/components/login/login',
-    directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
+    directives: [MDL, ROUTER_DIRECTIVES, FORM_DIRECTIVES],
     templateUrl: 'login.component.html',
     styleUrls: ['login.component.css'],
 })
@@ -15,6 +17,7 @@ export class Login {
     error:boolean = false;
 
     isErrorStyle(field:ControlGroup) {
+        componentHandler.upgradeAllRegistered();
         if (field.valid) {
             return false;
         } else {