Added log-in view

martincarrera · May 30, 2016 · 174aac0 · 174aac0
1 parent 18c5a1d
commit 174aac0
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 44 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
     <base href="/">
     <title>Clash Royale CMS</title>
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="style/styles.css">
     <script src="bower_components/angular/angular.min.js"></script>
     <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
     <script src="bower_components/api-check/dist/api-check.min.js"></script>
@@ -28,23 +29,6 @@
 
   </head>
   <body ng-app="clash-royale-api">
-    <div class="container">
-      <nav class="navbar navbar-inverse">
-          <div class="navbar-header">
-              <a class="navbar-brand" href="/">
-                Clash Royale API
-              </a>
-          </div>
-          <div class="collapse navbar-collapse">
-              <ul class="nav navbar-nav navbar-right">
-                <li><a ui-sref="arenas">Arenas</a></li>
-                <li><a ui-sref="cards">Cards</a></li>
-                <li><a ui-sref="chests">Chests</a></li>
-                <li><a ui-sref="players">Players</a></li>
-              </ul>
-          </div>
-      </nav>
-      <div ui-view></div>
-    </div>
+    <div ui-view></div>
   </body>
 </html>
diff --git a/public/js/controllers/LoginController.js b/public/js/controllers/LoginController.js
@@ -1,12 +1,38 @@
 (function () {
 
-  function LoginController() {
+  angular
+  .module('clash-royale-api')
+  .controller('LoginController', LoginController);
+
+  LoginController.$inject = ['LoginService'];
+
+  function LoginController(LoginService) {
     var vm = this;
     vm.title = 'Log In';
-  }
+    vm.model = {};
+    vm.fields = [
+      {
+        key: 'user',
+        type: 'input',
+        templateOptions: {
+          label: 'User',
+          required: true
+        }
+      },
+      {
+        key: 'password',
+        type: 'input',
+        templateOptions: {
+          label: 'Password',
+          required: true,
+          type: 'password',
+        }
+      },
+    ];
 
-  angular
-    .module('clash-royale-api')
-    .controller('LoginController', LoginController);
+    vm.submit = function(model) {
+      LoginService.authenticate(model);
+    }
+  }
 
 })();
diff --git a/public/js/services/LoginService.js b/public/js/services/LoginService.js
@@ -1,16 +1,8 @@
 angular.module('clash-royale-api').factory('LoginService', function($http) {
 
     return {
-        get : function() {
-            return $http.get('/api/authentication');
-        },
-
-        create : function(userData) {
-            return $http.post('/api/authentication', cardData);
-        },
-
-        delete : function(id) {
-            return $http.delete('/api/authentication/' + id);
+        authenticate : function(userData) {
+          return $http.post('/api/authenticate', userData);
         }
     }
 

diff --git a/public/style/styles.css b/public/style/styles.css
@@ -0,0 +1,7 @@
+.form-signin {
+  min-height: 100vh;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/public/views/genericTemplate.html b/public/views/genericTemplate.html
@@ -1,12 +1,29 @@
-<div>
-  <div class="jumbotron text-center">
-    <h1>{{ vm.title }}</h1>
+<div class="container">
+  <nav class="navbar navbar-inverse">
+      <div class="navbar-header">
+          <a class="navbar-brand" href="/">
+            Clash Royale API
+          </a>
+      </div>
+      <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav navbar-right">
+            <li><a ui-sref="arenas">Arenas</a></li>
+            <li><a ui-sref="cards">Cards</a></li>
+            <li><a ui-sref="chests">Chests</a></li>
+            <li><a ui-sref="players">Players</a></li>
+          </ul>
+      </div>
+  </nav>
+  <div>
+    <div class="jumbotron text-center">
+      <h1>{{ vm.title }}</h1>
+    </div>
+    <form ng-submit="vm.submit(vm.model)" novalidate>
+      <formly-form model="vm.model" fields="vm.fields" form="vm.form">
+        <button type="submit" ng-disabled="vm.form.$invalid" class="btn btn-default">Submit</button>
+      </formly-form>
+    </form>
+    <h2>{{ vm.previewTitle }}</h2>
+    <pre>{{ vm.model | json }}</pre>
   </div>
-  <form ng-submit="vm.submit(vm.model)" novalidate>
-    <formly-form model="vm.model" fields="vm.fields" form="vm.form">
-      <button type="submit" ng-disabled="vm.form.$invalid" class="btn btn-default">Submit</button>
-    </formly-form>
-  </form>
-  <h2>{{ vm.previewTitle }}</h2>
-  <pre>{{ vm.model | json }}</pre>
 </div>
diff --git a/public/views/login.html b/public/views/login.html
@@ -0,0 +1,7 @@
+<div class="container">
+  <form class="form-signin" ng-submit="vm.submit(vm.model)" novalidate>
+    <formly-form model="vm.model" fields="vm.fields" form="vm.form">
+      <button type="submit" ng-disabled="vm.form.$invalid" class="btn btn-default">Submit</button>
+    </formly-form>
+  </form>
+</div>
diff --git a/src/router.js b/src/router.js
@@ -12,10 +12,10 @@ const authMiddleware = require('./middlewares/auth-middleware');
 module.exports = (req, res, next) => {
   req.app.use('/', mainRoute);
   req.app.use('/api/authenticate', authRoute);
+  req.app.use('/cms/', cmsRoute);
   if (!config.DISABLE_AUTH) {
     req.app.use(authMiddleware);
   }
-  req.app.use('/cms', cmsRoute);
   req.app.use('/api/arenas', arenaRoute);
   req.app.use('/api/cards', cardRoute);
   req.app.use('/api/chests', chestRoute);