Step 19.19: Create a template for LoginComponent

Urigo · Nov 27, 2016 · 1231713 · 1231713
1 parent a5f4c4e
commit 1231713
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/client/imports/app/auth/login.component.html b/client/imports/app/auth/login.component.html
@@ -0,0 +1,37 @@
+<div class="md-content" layout="row" layout-align="center start" layout-fill layout-margin>
+  <div layout="column" flex flex-md="50" flex-lg="50" flex-gt-lg="33" class="md-whiteframe-z2" layout-fill>
+    <md-toolbar class="md-primary" color="primary">
+      Sign in
+    </md-toolbar>
+
+    <div layout="column" layout-margin layout-padding>
+      <div layout="row" layout-margin>
+        <p class="md-body-2"> Sign in with your email</p>
+      </div>
+
+      <form [formGroup]="loginForm" #f="ngForm" (ngSubmit)="login()"
+            layout="column" layout-fill layout-padding layout-margin>
+
+        <md-input formControlName="email" type="email" placeholder="Email"></md-input>
+        <md-input formControlName="password" type="password" placeholder="Password"></md-input>
+
+        <div layout="row" layout-align="space-between center">
+          <a md-button [routerLink]="['/recover']">Forgot password?</a>
+          <button md-raised-button class="md-primary" type="submit" aria-label="login">Sign In</button>
+        </div>
+      </form>
+
+      <div [hidden]="error == ''">
+        <md-toolbar class="md-warn" layout="row" layout-fill layout-padding layout-margin>
+          <p class="md-body-1">{{ error }}</p>
+        </md-toolbar>
+      </div>
+
+      <md-divider></md-divider>
+
+      <div layout="row" layout-align="center">
+        <a md-button [routerLink]="['/signup']">Need an account?</a>
+      </div>
+    </div>
+  </div>
+</div>