Improved modal to stay on after reload

Error messages now are specific
Placed a gif on loading

src/assets/scripts/ads-details/ads-details.controller.js

@@ -2,23 +2,23 @@ import moment from 'moment';
 import Avatar from 'avatar-initials';
 
 const AdsDetailsController = ($scope, AdsDetailsService, $routeParams, UserService) => {
-    // $scope.$on('loadUserSuccess', function (event, user) {
-    //     $scope.user = user;
-    // });
-    // UserService.loadUser();
-    AdsDetailsService.fetchAdDetails($routeParams)
-            .then((result) => {
-                $scope.ad = result;
-                console.log(result);
+    $scope.$on('loadUserSuccess', function (event, user) {
+        $scope.user = user;
 
-                $scope.avatar = new Avatar(document.getElementById('ad-details-avatar'), {
-                    'useGravatar': false,
-                    'initials': result.companyname[0].toUpperCase()+result.companyname[1].toUpperCase(),
-                });
-            })
-            .catch((error) => { console.log(error); });
-        $scope.daysAgo = (timestamp) => { return moment(timestamp).fromNow(); }
+        AdsDetailsService.fetchAdDetails($routeParams)
+                .then((result) => {
+                    $scope.ad = result;
+                    console.log(result);
 
+                    $scope.avatar = new Avatar(document.getElementById('ad-details-avatar'), {
+                        'useGravatar': false,
+                        'initials': result.companyname[0].toUpperCase()+result.companyname[1].toUpperCase(),
+                    });
+                })
+                .catch((error) => { console.log(error); });
+            $scope.daysAgo = (timestamp) => { return moment(timestamp).fromNow(); }
+    });
+        UserService.loadUser();
 }
 
 export default AdsDetailsController;

src/assets/scripts/dashboard/dashboard.controller.js

@@ -9,6 +9,7 @@ const DashboardController = ($scope, UserService) => {
     }); 
         
     // tutte le funzioni del controller
+    UserService.loadUser();
     masonry();
     chart();
     pieChart();

src/assets/scripts/logout/index.js

@@ -1,8 +1,8 @@
 import angular from 'angular';
 import ngCookies from 'angular-cookies';
-import LogoutController from './controller';
-import LogoutService from './service';
+import LogoutController from './logout.controller';
+import LogoutService from './logout.service';
 
 angular.module('nwLogout', [ngCookies])
-    .controller(LogoutController.name, LogoutController)
-    .factory(LogoutService.name, LogoutService);
+    .controller('LogoutController', LogoutController)
+    .factory('LogoutService', LogoutService);

src/assets/scripts/nwLogin/controller.js

@@ -1,27 +0,0 @@
-const LoginController = ($scope, $cookies, $location, LoginService, UserService) => {
-
-	// load the user if already logged in, for all controllers
-	UserService.loadUser();
-
-	$scope.userLogin = async (isValid) => {
-		if(isValid){
-			let result = await LoginService.loginUserService($scope.user); 
-			if( typeof result.token !== "undefined"){
-
-				// save the cookie and reload the user for all controllers
-				$cookies.put('access_token', result.token);
-				UserService.loadUser();
-				$location.path('/');
-				// temporary solution
-				//window.location.reload(false);
-				$scope.$emit('needReload');
-				
-			} else {
-				alert(result);
-			}
-		}
-	}
-
-};
-
-export default LoginController;

src/assets/scripts/nwLogin/index.js

@@ -1,12 +1,12 @@
 import * as angular from 'angular';
 import ngCookies from 'angular-cookies';
-import LoginController from './controller';
-import LoginService from './service';
+import LoginController from './login.controller';
+import LoginService from './login.service';
 
 angular.module('NomitWisp-Login', [ngCookies])
     .directive('nwLogin', nwLogin)
-    .controller(LoginController.name, LoginController)
-    .factory(LoginService.name, LoginService);
+    .controller('LoginController', LoginController)
+    .factory('LoginService', LoginService);
 
 /** @ngInject */
 function nwLogin(){

src/assets/scripts/nwLogin/login.controller.js

@@ -0,0 +1,28 @@
+/** @ngInject */
+const LoginController = ['$scope', '$cookies', '$location', 'LoginService', 'UserService' ,
+	function ($scope, $cookies, $location, LoginService, UserService) {
+
+	// load the user if already logged in, for all controllers
+	UserService.loadUser();
+
+	$scope.userLogin = async (isValid) => {
+		$scope.dataLoading = true;
+		if(isValid){
+			await LoginService.loginUserService($scope.user)
+				.then((result) => {
+					// save the cookie and reload the user for all controllers
+					$cookies.put('access_token', result.token);
+					UserService.loadUser();
+					$location.path('/');
+					$scope.$emit('needReload');
+					$scope.dataLoading = false;
+				})
+				.catch((err) => {
+					$scope.dataLoading = false;
+					alert(err);
+				})
+		}
+	}
+}];
+
+export default LoginController;

src/assets/scripts/nwLogin/nwLogin.html

@@ -139,12 +139,16 @@
                   <h2 style="font-size: 16px;">Sign In</h2>
                   <form ng-submit="userLogin(LoginForm.$valid)" name="LoginForm" novalidate>
                     <input name="email" class="modal-username form-control" ng-model="user.email" type="email" placeholder="Email" required />
-                    <p ng-show="LoginForm.email.$error.required">This field is required.</p>
-                    <p ng-show="LoginForm.email.$error.email">Invalid email.</p>
+                    <span ng-if="LoginForm.email.$dirty && LoginForm.email.$error.required">This field is required.</span>
+                    <span ng-if="LoginForm.email.$error.email">Invalid email.</span>
                     
                     <input name="pwd" class="modal-username form-control" type="password" ng-model="user.password" placeholder="Password" ng-minlength=5 required />
-                    <p ng-show="LoginForm.pwd.$error.minlength">Min 5 characters.</p>
-                    <button type="submit" class="btn btn-signin btn-centered mt-4 mb-3">SIGN IN</button>
+                    <span ng-if="LoginForm.pwd.$error.minlength">Min 5 characters.</span>
+                    <span ng-if="LoginForm.pwd.$dirty && LoginForm.pwd.$error.required">This field is required.</span>
+                    <div class="form-actions">
+                        <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-signin btn-centered mt-4 mb-3" style="display:inline-block">Login</button>
+                        <img ng-if="dataLoading" src="assets/static/images/loading.gif" height="80px" width="80px" style="display:inline-block"/>
+                    </div>
                     <a class="text-terms" href="#">Terms & Conditions</a>
                   </form>
                 </div>