(js) Make use of 'controllerAs' in MainUI module

Alinto · Aug 7, 2015 · fb7d5b6 · fb7d5b6
1 parent 6e82a7b
commit fb7d5b6
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 53 deletions.
diff --git a/UI/MainUI/English.lproj/Localizable.strings b/UI/MainUI/English.lproj/Localizable.strings
@@ -9,6 +9,7 @@
 
 "Connect" = "Connect";
 
+"Authentication Failed" = "Authentication Failed";
 "Wrong username or password." = "Wrong username or password.";
 "cookiesNotEnabled" = "You cannot login because your browser's cookies are disabled. Please enable cookies in your browser's settings and try again.";
 

diff --git a/UI/Templates/MainUI/SOGoRootPage.wox b/UI/Templates/MainUI/SOGoRootPage.wox
@@ -17,59 +17,38 @@
   -->
   <main class="view md-layout-fill md-layout-padding" ui-view="login" layout="row" layout-align="center start">
     <md-content class="md-padding" md-scroll-y="true">
-      <div ng-controller="loginController">
+      <div ng-controller="LoginController as app">
 
         <script type="text/javascript">
           var cookieUsername = '<var:string var:value="cookieUsername" const:escapeHTML="NO"/>';
         </script>
-        <!--   <div id="aboutBox" style="display:none;">
-             <div>
-             <p class="logo"><img const:alt="SOGo" rsrc:src="img/sogo-logo.png"/></p>
-             <p>Version <var:string value="version"/> <span class="buildDate">(<var:string value="buildDate" />)</span></p>
-             <p class="scroll"><var:string label:value="AboutBox" const:escapeHTML="NO"/></p>
-             <img const:alt="Inverse" rsrc:src="img/inverse.png"/>
-             <p class="links"><a href="http://sogo.nu/" target="_new">sogo.nu</a> / 
-             <a href="http://inverse.ca/" target="_new">inverse.ca</a></p>
-             <p><a id="aboutClose" href="#" class="button">
-             <span><var:string label:value="OK" /></span></a></p>
-             </div>
-             </div> -->
-        <!-- <nav class="top-bar">
-             <section class="top-bar-section">
-             <ul class="right">
-             <li><a href="#"><var:string label:value="About" /></a></li>
-             </ul>
-             </section>
-             </nav> -->
         <div id="login">
           <div id="logo">
             <img const:alt="*" id="splash" rsrc:src="img/sogo-full.svg"/>
           </div>
 
           <form name="loginForm" layout="column"
                 ng-cloak="ng-cloak"
-                ng-controller="loginController"
-                ng-submit="login(creds)">
+                ng-submit="app.login()">
             <var:if condition="hasLoginSuffix">
-              <input type="hidden" ng-model="creds.loginSuffix" var:value="loginSuffix"/>
+              <input type="hidden" ng-model="app.creds.loginSuffix" var:value="loginSuffix"/>
             </var:if>
-            <div ng-show="warning" ng-cloak="ng-cloak" alert="alert" class="alert-box radius warning">{{warning}}</div>
             <md-input-container>
               <label>
                 <var:string label:value="Username"/>
               </label>
-              <input autocapitalize="off" type="text" ng-model="creds.username" required="required" />
+              <input autocapitalize="off" type="text" ng-model="app.creds.username" required="required" />
             </md-input-container>
             <md-input-container>
               <label>
                 <var:string label:value="Password"/>
               </label>
-              <input type="password" ng-model="creds.password" required="required" />
+              <input type="password" ng-model="app.creds.password" required="required" />
             </md-input-container>
 
             <!-- CONNECT BUTTON -->
             <div layout="row" layout-align="end center">
-              <md-button class="md-raised" type="submit" ng-disabled='!loginForm.$valid'>
+              <md-button class="md-raised" type="submit" ng-disabled='app.loginForm.$invalid'>
                 <span>
                   <var:string label:value="Connect"/>
                 </span>
@@ -82,7 +61,7 @@
                 <label class="login-lang">
                   <var:string label:value="Language"/>
                 </label>
-                <md-select flex="true" ng-model="creds.language">
+                <md-select flex="true" ng-model="app.creds.language">
                   <var:foreach list="languages" item="item">
                     <md-option var:value="item">
                       <var:string value="languageText"/>
@@ -98,7 +77,7 @@
 	        <label>
                 <var:string label:value="Domain"/>
               </label>
-              <md-select flex="true" ng-model="creds.domain" label:placeholder="choose">
+              <md-select class="md-flex" ng-model="app.creds.domain" label:placeholder="choose">
                 <var:foreach list="loginDomains" item="item">
                   <md-option var:value="item">
                     <var:string value="item"/>
@@ -109,15 +88,15 @@
 	    </var:if>
 
             <div layout="row" layout-align="center center">
-              <md-switch ng-model="creds.rememberLogin" label:arial-label="Remember username">
+              <md-switch ng-model="app.creds.rememberLogin" label:arial-label="Remember username">
                 <var:string label:value="Remember username"/>
               </md-switch>
             </div>
           </form>
           <div layout="row" layout-align="end end" ng-cloak="ng-cloak">
             <md-button class="sg-icon-button fg-sogoPaper-500"
                        label:aria-label="About"
-                       ng-click="showAbout()">
+                       ng-click="app.showAbout()">
               <md-icon class="material-icons fg-sogoPaper-500">info</md-icon>
             </md-button>
           </div>
@@ -136,7 +115,7 @@
         <!--<img class="full-image" const:alt="Inverse" rsrc:src="img/inverse.png"/>-->
       </md-dialog-content>
       <div class="md-actions">
-        <md-button ng-click="closeDialog()"><var:string label:value="Close"/></md-button>
+        <md-button ng-click="about.closeDialog()"><var:string label:value="Close"/></md-button>
       </div>
     </md-dialog>
   </script>

diff --git a/UI/WebServerResources/js/Common/Authentication.service.js b/UI/WebServerResources/js/Common/Authentication.service.js
@@ -26,9 +26,6 @@
   // TODO: convert to a Factory recipe?
   .provider('Authentication', Authentication);
 
-  /**
-   * @ngInject
-   */
   function Authentication() {
     function readCookie(name) {
       var foundCookie, prefix, pairs, i, currentPair, start;
@@ -91,9 +88,11 @@
 
     this.$get = getService;
 
+    /**
+     * @ngInject
+     */
     getService.$inject = ['$q', '$http', 'passwordPolicyConfig'];
     function getService($q, $http, passwordPolicyConfig) {
-
       var _this = this, service;
 
       service = {

diff --git a/UI/WebServerResources/js/Main/Main.app.js b/UI/WebServerResources/js/Main/Main.app.js
@@ -4,35 +4,46 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.MainUI', ['SOGo.Common', 'SOGo.Authentication'])
-    .controller('loginController', loginController);
+  angular.module('SOGo.MainUI', ['SOGo.Common', 'SOGo.Authentication']);
 
-  loginController.$inject = ['$scope', '$mdDialog', 'Authentication'];
-  function loginController($scope, $mdDialog, Authentication) {
-    $scope.warning = false;
-    $scope.creds = { username: cookieUsername, password: null };
-    $scope.login = function(creds) {
-      $scope.warning = false;
-      Authentication.login(creds)
+  /**
+   * @ngInject
+   */
+  LoginController.$inject = ['$scope', 'Dialog', '$mdDialog', 'Authentication'];
+  function LoginController($scope, Dialog, $mdDialog, Authentication) {
+    var vm = this;
+
+    vm.creds = { username: cookieUsername, password: null };
+    vm.login = login;
+    vm.showAbout = showAbout;
+
+    function login() {
+      Authentication.login(vm.creds)
         .then(function(url) {
           window.location.href = url;
         }, function(msg) {
-          $scope.warning = msg.error;
+          Dialog.alert(l('Authentication Failed'), msg.error);
         });
       return false;
-    };
-    $scope.showAbout = function($event) {
+    }
+
+    function showAbout($event) {
       $mdDialog.show({
         targetEvent: $event,
         templateUrl: 'aboutBox.html',
-        controller: AboutDialogController
+        controller: AboutDialogController,
+        controllerAs: 'about'
       });
-      AboutDialogController.$inject = ['scope', '$mdDialog'];
-      function AboutDialogController(scope, $mdDialog) {
-        scope.closeDialog = function() {
+      AboutDialogController.$inject = ['$mdDialog'];
+      function AboutDialogController($mdDialog) {
+        this.closeDialog = function() {
           $mdDialog.hide();
         };
       }
-    };
+    }
   }
+
+  angular
+    .module('SOGo.MainUI')
+    .controller('LoginController', LoginController);
 })();