chapter one complete

Author: EricSimons

src/js/app.js

@@ -14,6 +14,7 @@ import './home';
 import './profile';
 import './article';
 import './services';
+import './auth';
 
 
 // Create and bootstrap application
@@ -25,7 +26,8 @@ const requires = [
   'app.home',
   'app.profile',
   'app.article',
-  'app.services'
+  'app.services',
+  'app.auth'
 ];
 
 // Mount on window for testing

src/js/auth/auth.config.js

@@ -0,0 +1,22 @@
+function AuthConfig($stateProvider, $httpProvider) {
+  'ngInject';
+
+  $stateProvider
+
+  .state('app.login', {
+    url: '/login',
+    controller: 'AuthCtrl as $ctrl',
+    templateUrl: 'auth/auth.html',
+    title: 'Sign in'
+  })
+
+  .state('app.register', {
+    url: '/register',
+    controller: 'AuthCtrl as $ctrl',
+    templateUrl: 'auth/auth.html',
+    title: 'Sign up'
+  });
+
+};
+
+export default AuthConfig;

src/js/auth/auth.controller.js

@@ -0,0 +1,17 @@
+class AuthCtrl {
+  constructor($state) {
+    'ngInject';
+
+    this.title = $state.current.title;
+    this.authType = $state.current.name.replace('app.', '');
+
+  }
+
+  submitForm() {
+    this.isSubmitting = true;
+
+    console.log(this.formData);
+  }
+}
+
+export default AuthCtrl;

src/js/auth/auth.html

@@ -0,0 +1,53 @@
+<div class="auth-page">
+  <div class="container page">
+    <div class="row">
+
+      <div class="col-md-6 offset-md-3 col-xs-12">
+        <h1 class="text-xs-center" ng-bind="::$ctrl.title"></h1>
+        <p class="text-xs-center">
+          <a ui-sref="app.login"
+            ng-show="$ctrl.authType === 'register'">
+            Have an account?
+          </a>
+          <a ui-sref="app.register"
+            ng-show="$ctrl.authType === 'login'">
+            Need an account?
+          </a>
+        </p>
+
+        <form ng-submit="$ctrl.submitForm()">
+          <fieldset ng-disabled="$ctrl.isSubmitting">
+
+            <fieldset class="form-group" ng-show="$ctrl.authType === 'register'">
+              <input class="form-control form-control-lg"
+                type="text"
+                placeholder="Username"
+                ng-model="$ctrl.formData.username" />
+            </fieldset>
+
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg"
+                type="email"
+                placeholder="Email"
+                ng-model="$ctrl.formData.email" />
+            </fieldset>
+
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg"
+                type="password"
+                placeholder="Password"
+                ng-model="$ctrl.formData.password" />
+            </fieldset>
+
+            <button class="btn btn-lg btn-primary pull-xs-right"
+              type="submit"
+              ng-bind="::$ctrl.title">
+            </button>
+
+          </fieldset>
+        </form>
+      </div>
+
+    </div>
+  </div>
+</div>

src/js/auth/index.js

@@ -0,0 +1,16 @@
+import angular from 'angular';
+
+// Create the module where our functionality can attach to
+let authModule = angular.module('app.auth', []);
+
+// Include our UI-Router config settings
+import AuthConfig from './auth.config';
+authModule.config(AuthConfig);
+
+
+// Include controllers
+import AuthCtrl from './auth.controller';
+authModule.controller('AuthCtrl', AuthCtrl);
+
+
+export default authModule;

src/js/home/home.controller.js

@@ -4,6 +4,7 @@ class HomeCtrl {
 
     this.appName = AppConstants.appName;
 
+
   }