update auth controller to fit to the new server side authentication
authorrougeronj
Thu, 11 Jun 2015 15:36:42 +0200
changeset 169 76fb2dd72ce4
parent 168 4b1294eaec0a
child 170 533a98367f99
update auth controller to fit to the new server side authentication
client/app/auth/auth.css
client/app/auth/auth_controller.js
client/app/auth/login_modal.html
client/app/auth/register_modal.html
client/app/components/messages.html
--- a/client/app/auth/auth.css	Thu Jun 11 15:36:07 2015 +0200
+++ b/client/app/auth/auth.css	Thu Jun 11 15:36:42 2015 +0200
@@ -6,4 +6,16 @@
 .auth input{
     width: 300px;
     margin: 10px 0;
+}
+
+.ng-invalid {
+    border-color: red;
+    outline-color: red;
+}
+
+.messages {
+  font-size: smaller;
+  padding-top: 5px;
+  padding-bottom: 10px;
+  color: red;
 }
\ No newline at end of file
--- a/client/app/auth/auth_controller.js	Thu Jun 11 15:36:07 2015 +0200
+++ b/client/app/auth/auth_controller.js	Thu Jun 11 15:36:42 2015 +0200
@@ -1,7 +1,7 @@
 (function(){
     'use strict';
 
-    angular.module('ammicoAuth',['ngRoute'])
+    angular.module('ammicoAuth',['ngRoute', 'ngMessages'])
     .controller('authCtrl', function($location, $rootScope, $routeParams, $modal){
         $modal.open({
             templateUrl: 'auth/' + $routeParams.action + '_modal.html',
@@ -37,16 +37,49 @@
         };
     })
     .controller('authregisterCtrl', function($scope, $modalInstance, authApi){
-        $scope.register = function () {
-            authApi.user.save({
-                email: $scope.email,
-                password: $scope.password,
-            }, function(){
-                $modalInstance.close('/auth/login');
-            });
+        $scope.message = "";
+
+        $scope.user = {
+            email: "",
+            password: "",
+            confirmPassword: ""
+        };
+
+        $scope.submit = function(isValid) {
+            console.log(isValid);
+            console.log($scope);
+            console.log($scope.email);
+            if (isValid) {
+                authApi.user.save({
+                    email: $scope.user.email,
+                    password: $scope.user.password,
+                }, function(){
+                    $modalInstance.close('/auth/login');
+                });
+            } else {
+                $scope.message = "Il reste toujours des champs invalides";
+            }
         };
         $scope.back = function () {
             $modalInstance.close('/auth/login');
         };
+    })
+    .directive("compareTo", function(){
+        return {
+            require: "ngModel",
+            scope: {
+              otherModelValue: "=compareTo"
+            },
+            link: function($scope, element, attributes, ngModel) {
+
+              ngModel.$validators.compareTo = function(modelValue) {
+                return modelValue == $scope.otherModelValue;
+              };
+
+              $scope.$watch("otherModelValue", function() {
+                  ngModel.$validate();
+              });
+            }
+        }
     });
 })();
--- a/client/app/auth/login_modal.html	Thu Jun 11 15:36:07 2015 +0200
+++ b/client/app/auth/login_modal.html	Thu Jun 11 15:36:42 2015 +0200
@@ -4,8 +4,14 @@
 
 <form ng-submit="login()">
     <div class="modal-body ng-scope">
-        <input type="text" class="form-control" ng-model='email' placeholder="Email">
-        <input type="password" class="form-control" ng-model='password' placeholder="Password">
+        <div class="form-group">
+            <label>Votre Email</label>
+            <input type="text" class="form-control" ng-model='email' placeholder="Email" autofocus>
+        </div>
+        <div class="form-group">
+            <label>Mot de Passe</label>
+            <input type="password" class="form-control" ng-model='password' placeholder="Password">
+        </div>
     </div>
 
     <div class="modal-footer ng-scope">
--- a/client/app/auth/register_modal.html	Thu Jun 11 15:36:07 2015 +0200
+++ b/client/app/auth/register_modal.html	Thu Jun 11 15:36:42 2015 +0200
@@ -2,16 +2,37 @@
     <h3 class="modal-title">Créer un Compte</h3>
 </div>
 
-<form ng-submit="register()">
-    <div class="modal-body ng-scope">
-            <input type="text" class="form-control" ng-model='username' placeholder="Nom d'utilisateur"></input>
-            <input type="text" class="form-control" ng-model='email' placeholder="Email"></input>
-            <input type="password" class="form-control" ng-model='password' placeholder="Mot de passe"></input>
-            <input type="password" class="form-control" ng-model='password2' placeholder="Confirmer le mot de pass"></input>
+<form name="registrationForm" novalidate ng-submit="submit(registrationForm)">
+   <div class="modal-body ng-scope">
+        <h3>{{ message }}</h3> 
+       <div class="form-group">
+            <label>Email</label>
+            <input type="text" name="email" class="form-control" ng-model="user.email" required autofocus/>
+            <div ng-messages="registrationForm.email.$error">
+                <ng-messages-include src="components/messages.html"></ng-messages-include>
+            </div>
+        </div>
+        <div class="form-group">
+            <label>Mot de passe</label>
+            <input type="password" name="password" class="form-control" ng-model="user.password" required />
+            <div ng-messages="registrationForm.password.$error">
+                <ng-messages-include src="components/messages.html"></ng-messages-include>
+            </div>
+        </div>
+        <div class="form-group">
+            <label>Confirmer le mot de passe</label>
+            <input type="password" name="confirmPassword" class="form-control" 
+                   ng-model="user.confirmPassword" 
+                   required compare-to="user.password" />
+            <div ng-messages="registrationForm.confirmPassword.$error">
+                <ng-messages-include src="components/messages.html"></ng-messages-include>
+            </div>
+        </div>
     </div>
-    
     <div class="modal-footer ng-scope">
-        <button type="button" ng-click="back()" class="btn btn-warning">Retour</button>
-        <button type="submit" class="btn btn-primary">Créer</button>
+        <div class="form-group">
+            <button type="button" ng-click="back()" class="btn btn-warning">Retour</button>
+            <button type="submit" class="btn btn-primary">Créer</button>
+        </div>
     </div>
 </form>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/app/components/messages.html	Thu Jun 11 15:36:42 2015 +0200
@@ -0,0 +1,7 @@
+<div class="messages">
+    <div ng-message="required">Obligatoire</div>
+    <div ng-message="minlength">Trop court</div>
+    <div ng-message="maxlength">Trop long</div>
+    <div ng-message="email">Adresse email incorrecte</div>
+    <div ng-message="compareTo">Vous devez rentrer le même mot de passe</div>
+</div>
\ No newline at end of file