Login form using Angular Material - #202

Author: jadjoubran

angular/app/components/login-form/login-form.component.html

@@ -0,0 +1,15 @@
+<div>
+	<md-input-container class="LoginForm-inputContainer">
+		<label>Email</label>
+		<input type="email" ng-model="vm.email">
+	</md-input-container>
+</div>
+
+<div>
+	<md-input-container class="LoginForm-inputContainer">
+		<label>Password</label>
+		<input type="password" ng-model="vm.password">
+	</md-input-container>
+</div>
+
+<md-button type="submit" class="LoginForm-submit md-primary md-raised">Login</md-button>

angular/app/components/login-form/login-form.component.js

@@ -0,0 +1,17 @@
+class LoginFormController{
+    constructor(){
+        'ngInject';
+
+        this.email = '';
+        this.password = '';
+    }
+}
+
+export const LoginFormComponent = {
+    templateUrl: './views/app/components/login-form/login-form.component.html',
+    controller: LoginFormController,
+    controllerAs: 'vm',
+    bindings: {}
+}
+
+

angular/app/components/login-form/login-form.less

@@ -0,0 +1,10 @@
+.LoginForm-inputContainer{
+    margin-top: 10px;
+    margin-bottom: 0px;
+    margin-left: 8px;
+    width: 80%;
+}
+
+.LoginForm-submit{
+    margin-bottom: 40px;
+}

angular/app/pages/login/login.less

@@ -0,0 +1,7 @@
+<md-content class="Page-container">
+	<div flex="80" flex-offset="10">
+		<h1>Login</h1>
+
+		<login-form></login-form>
+	</div>
+</md-content>

angular/app/pages/login/login.page.html

@@ -21,11 +21,20 @@ export function RoutesConfig($stateProvider, $urlRouterProvider) {
 			}
 		})
 		.state('app.landing', {
-			url: '/',
+            url: '/',
+            data: {},
+            views: {
+                'main@': {
+                    templateUrl: getView('landing')
+                }
+            }
+        })
+        .state('app.login', {
+			url: '/login',
 			data: {},
 			views: {
 				'main@': {
-					templateUrl: getView('landing')
+					templateUrl: getView('login')
 				}
 			}
 		});

angular/config/RoutesConfig.js

@@ -1,3 +1,3 @@
-//import {YourComponent} from './app/components/your/your.component';
+import {LoginFormComponent} from './app/components/login-form/login-form.component';
 
-//angular.module('app.components').component('yourComponent', YourComponent);
+angular.module('app.components').component('loginForm', LoginFormComponent);