Created View for Change Password & Login (#94)

MatiasComercio · Feb 4, 2017 · 98350b9 · 98350b9
1 parent 0550152
commit 98350b9
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 5 deletions.
diff --git a/app/scripts/controllers/user/UserChangePasswordCtrl.js b/app/scripts/controllers/user/UserChangePasswordCtrl.js
@@ -0,0 +1,15 @@
+'use strict';
+
+define(['paw'], function(paw) {
+  paw.controller('UserChangePasswordCtrl', ['$window',function($window) {
+    var _this = this;
+
+    this.cancel = function() {
+      $window.history.back();
+    };
+
+    this.changePassword = function(passwordForm) {
+      // Change Password
+    };
+  }]);
+});
diff --git a/app/scripts/i18n/translations.es.js b/app/scripts/i18n/translations.es.js
@@ -22,6 +22,15 @@ define([], function() {
     i18nCoursesIndex: 'Ver todas',
     i18nAddCourse: 'Agregar materia',
 
+    // Login
+    i18nLogin: 'Iniciar Sesión',
+    i18nPassword: 'Contraseña',
+    i18nChangePassword: 'Cambiar contraseña',
+    i18nCurrentPassword: 'Contraseña actual',
+    i18nNewPassword: 'Contraseña nueva',
+    i18nRepeatPassword: 'Repetir contraseña nueva',
+    i18nPasswordNotMatch: 'Las contraseñas deben coincidir',
+
     // Admin subSidebar
     i18nAdminShow: 'Ver perfil',
     i18nAdminEdit: 'Editar perfil',

diff --git a/app/scripts/routes.js b/app/scripts/routes.js
@@ -96,6 +96,11 @@ define([], function() {
                 templateUrl: '/views/admins/show.html',
                 controller: 'AdminsShowCtrl',
                 relativePath: '/admins'
+            },
+            '/user/change_password': {
+                templateUrl: 'views/user/change_password.html',
+                controller: 'UserChangePasswordCtrl',
+                relativePath: '/user'
             }
             /* ===== yeoman hook ===== */
             /* Do not remove these commented lines! Needed for auto-generation */

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -28,3 +28,5 @@ $fa-font-path: '../bower_components/font-awesome/fonts';
 @import 'partials/students/new';
 @import 'partials/admins/new';
 @import 'partials/admins/show';
+@import 'partials/login';
+@import 'partials/user/change_password';
diff --git a/app/styles/partials/_login.scss b/app/styles/partials/_login.scss
@@ -0,0 +1,32 @@
+@import 'modules/variables/importer';
+
+.login-container {
+
+  .data-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+
+    .data-item {
+      width: 350px;
+      padding: 5px;
+    }
+  }
+  .buttons-container{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+  }
+  .page-header-container{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+  }
+}
diff --git a/app/views/login.html b/app/views/login.html
@@ -1,7 +1,43 @@
-<div ng-controller="LoginCtrl as controller">
-  <form name="loginForm" novalidate class='simple-form'>
-    <label>DNI: <input type='text' ng-model='controller.user.dni' required/></label><br />
-    <label>Password: <input type='password' ng-model='controller.user.password' required/></label><br />
-    <input type='submit' ng-click='loginForm.$valid && controller.login(controller.user)' value='Login' />
+<div ng-controller="LoginCtrl as controller" class='login-container'>
+  <!-- Page Heading -->
+  <div class='page-header-container'>
+    <h1 translate='i18nLogin' class='page-header'></h1>
+  </div>
+  <!-- /Page Heading -->
+
+  <!-- Login Form -->
+  <form name="form" novalidate class='simple-form'>
+    <div class='data-container'>
+      <!-- DNI -->
+      <div class='data-item'>
+        <label for='dni'>
+          <span translate='i18nDni'/>
+        </label>
+        <input type='text' name='dni' id='dni' class='form-input-field' ng-model='controller.user.dni' required/>
+        <div ng-messages='form.dni.$error' ng-show='form.dni.$touched || form.$submitted' class='form-errors' role='alert'>
+          <div ng-message='required'>
+            <p translate='i18nRequiredField'></p>
+          </div>
+        </div>
+      </div>
+      <!-- /DNI -->
+      <!-- Password -->
+      <div class='data-item'>
+        <label for='password'>
+          <span translate='i18nPassword'/>
+        </label>
+        <input type='password' name='password' id='password' class='form-input-field' ng-model='controller.user.password' required/>
+        <div ng-messages='form.password.$error' ng-show='form.password.$touched || form.$submitted' class='form-errors' role='alert'>
+          <div ng-message='required'>
+            <p translate='i18nRequiredField'></p>
+          </div>
+        </div>
+      </div>
+      <!-- /Password -->
+    </div>
+    <div class='buttons-container'>
+      <input type='submit' class='btn btn-action' ng-click='form.$valid && controller.login(controller.user)' translate='i18nLogin' value="{{ 'i18nLogin' | translate }}" />
+    </div>
   </form>
+  <!-- /Login Form -->
 </div>
diff --git a/app/views/user/change_password.html b/app/views/user/change_password.html
@@ -0,0 +1,72 @@
+<div ng-controller="UserChangePasswordCtrl as controller" class='user-change-password-container'>
+  <!-- Page Heading -->
+  <h1 translate='i18nChangePassword' class='page-header'></h1>
+  <!-- /Page Heading -->
+
+  <!-- Change Password Form -->
+  <form name="form" novalidate class='simple-form'>
+    <div class='data-container'>
+      <!-- Current Password -->
+      <div class='data-item'>
+        <label for='currentPassword'>
+          <span translate='i18nCurrentPassword'/>
+        </label>
+        <input type='password' name='currentPassword' id='currentPassword' class='form-input-field' ng-model='controller.passwordForm.currentPassword' required/>
+        <div ng-messages='form.currentPassword.$error' ng-show='form.currentPassword.$touched || form.$submitted' class='form-errors' role='alert'>
+          <div ng-message='required'>
+            <p translate='i18nRequiredField'></p>
+          </div>
+        </div>
+      </div>
+      <!-- /Current Password -->
+      <!-- New Password -->
+      <div class='data-item'>
+        <label for='newPassword'>
+          <span translate='i18nNewPassword'/>
+        </label>
+        <input type='password' name='newPassword' id='newPassword' class='form-input-field' ng-model='controller.passwordForm.newPassword' required ng-minlength='8' ng-maxlength='32'/>
+        <div ng-messages='form.newPassword.$error' ng-show='form.newPassword.$touched || form.$submitted' class='form-errors' role='alert'>
+          <div ng-message='required'>
+            <p translate='i18nRequiredField'></p>
+          </div>
+          <div ng-message-exp="['minlength', 'maxlength']">
+            <span translate='i18nLengthPrefix'></span>
+            <span> 8 </span>
+            <span translate='i18nLengthAnd'></span>
+            <span> 32 </span>
+            <span translate='i18nLengthSuffix'></span>
+          </div>
+        </div>
+      </div>
+      <!-- New Password -->
+      <!-- Repeat Password -->
+      <div class='data-item'>
+        <label for='repeatPassword'>
+          <span translate='i18nRepeatPassword'/>
+        </label>
+        <input type='password' name='repeatPassword' id='repeatPassword' class='form-input-field' ng-model='controller.passwordForm.repeatPassword' required ng-minlength='8' ng-maxlength='32'/>
+        <div ng-messages='form.repeatPassword.$error' ng-show='form.repeatPassword.$touched || form.$submitted' class='form-errors' role='alert'>
+          <div ng-message='required'>
+            <p translate='i18nRequiredField'></p>
+          </div>
+          <div ng-message-exp="['minlength', 'maxlength']">
+            <span translate='i18nLengthPrefix'></span>
+            <span> 8 </span>
+            <span translate='i18nLengthAnd'></span>
+            <span> 32 </span>
+            <span translate='i18nLengthSuffix'></span>
+          </div>
+        </div>
+        <div ng-show='form.newPassword.$touched && form.repeatPassword.$touched && controller.passwordForm.newPassword != controller.passwordForm.repeatPassword' class='form-errors'>
+          <p><p translate='i18nPasswordNotMatch'/></p>
+        </div>
+      </div>
+      <!-- /Repeat Password -->
+    </div>
+    <div class='buttons-container'>
+      <input type='submit' class='btn btn-action' ng-click='form.$valid && controller.changePassword(controller.passwordForm)' value="{{ 'i18nChangePassword' | translate }}" />
+      <input type='button' class='btn btn-default' ng-click='controller.cancel()' value="{{ 'i18nButtonCancel' | translate }}" />
+    </div>
+  </form>
+  <!-- /Login Form -->
+</div>