Форма логина на AngularJS с ASP.NET, часть 2

<form name="myForm" novalidate ng-submit="LoginForm()">
  <input type="email" 
         ng-model="UserModel.Email" 
         name="UserEmail" 
         ng-class="Submited?'ng-dirty':''" 
         required autofocus />
         
  <span style="color:red" 
        ng-show="(myForm.UserEmail.$dirty||Submited)&&myForm.UserEmail.$error.required">
    Введите email
  </span>
  
  <span style="color:red" 
        ng-show="myForm.UserEmail.$error.email">
    Email некорректен
  </span>
</form>

angular.module('myApp').directive('passwordStrength', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$validators.passwordStrength = function(value) {
        // Должен содержать хотя бы одну цифру и одну заглавную букву
        var strongRegex = /^(?=.*[A-Z])(?=.*\d).+$/;
        return strongRegex.test(value);
      };
    }
  };
});

// validation-constants.js
var VALIDATION = {
  PASSWORD_MIN_LENGTH: 8,
  PASSWORD_REGEX: /^(?=.*[A-Z])(?=.*\d).+$/
};
[/CSHARP]
 
[CSHARP]
// ValidationConstants.cs
public static class ValidationConstants
{
    public const int PasswordMinLength = 8;
    public const string PasswordRegex = @"^(?=.*[A-Z])(?=.*\d).+$";
}

loginService.login = function(credentials) {
  return $http.post('/api/auth/login', credentials)
    .catch(function(response) {
      if (response.status === 400 && response.data.modelState) {
        // Преобразуем ошибки валидации с сервера в формат для отображения
        var errors = [];
        angular.forEach(response.data.modelState, function(messages, field) {
          angular.forEach(messages, function(message) {
            errors.push({ field: field, message: message });
          });
        });
        return $q.reject(errors);
      }
      return $q.reject(response);
    });
};

$scope.login = function() {
  loginService.login($scope.credentials)
    .then(function(result) {
      // Успешный вход
    })
    .catch(function(errors) {
      if (Array.isArray(errors)) {
        // Это ошибки валидации, показываем их в форме
        $scope.serverErrors = errors;
      } else {
        // Другая ошибка
        $scope.errorMessage = "Произошла ошибка. Попробуйте позже.";
      }
    });
};

(function() {
  'use strict';
  
  // Создаем модуль аутентификации с зависимостями
  angular.module('app.auth', [
    'ngRoute',     // Для маршрутизации
    'ngStorage'    // Для хранения токена в localStorage
  ]);
})();

/app
  /auth
    /services
      auth.service.js   // Основная логика аутентификации
      token.service.js  // Работа с токенами и сессиями
    /controllers
      login.controller.js
      register.controller.js
      password-reset.controller.js
    /directives
      password-strength.directive.js
    /views
      login.html
      register.html
      password-reset.html
    auth.module.js      // Определение модуля
    auth.routes.js      // Конфигурация маршрутов
    auth.interceptor.js // HTTP-перехватчик для добавления токенов

(function() {
  'use strict';
  
  angular
    .module('app.auth')
    .factory('authService', authService);
  
  authService.$inject = ['$http', '$q', 'tokenService'];
  
  function authService($http, $q, tokenService) {
    var service = {
      login: login,
      logout: logout,
      register: register,
      isAuthenticated: isAuthenticated,
      getCurrentUser: getCurrentUser
    };
    
    return service;
    
    function login(credentials) {
      return $http.post('/api/auth/token', credentials)
        .then(function(response) {
          tokenService.setToken(response.data.token);
          return response.data;
        });
    }
    
    function logout() {
      return $http.delete('/api/auth/session')
        .finally(function() {
          tokenService.removeToken();
        });
    }
    
    function register(user) {
      return $http.post('/api/users', user);
    }
    
    function isAuthenticated() {
      return tokenService.getToken() !== null;
    }
    
    function getCurrentUser() {
      if (!isAuthenticated()) {
        return $q.reject('Пользователь не авторизован');
      }
      
      return $http.get('/api/users/me')
        .then(function(response) {
          return response.data;
        });
    }
  }
})();

(function() {
  'use strict';
  
  angular
    .module('app.auth')
    .factory('tokenService', tokenService);
  
  tokenService.$inject = ['$localStorage'];
  
  function tokenService($localStorage) {
    var TOKEN_KEY = 'auth_token';
    
    var service = {
      getToken: getToken,
      setToken: setToken,
      removeToken: removeToken
    };
    
    return service;
    
    function getToken() {
      return $localStorage[TOKEN_KEY];
    }
    
    function setToken(token) {
      $localStorage[TOKEN_KEY] = token;
    }
    
    function removeToken() {
      delete $localStorage[TOKEN_KEY];
    }
  }
})();

(function() {
  'use strict';
  
  angular
    .module('app.auth')
    .factory('authInterceptor', authInterceptor)
    .config(configFunction);
  
  authInterceptor.$inject = ['$q', 'tokenService', '$location'];
  configFunction.$inject = ['$httpProvider'];
  
  function authInterceptor($q, tokenService, $location) {
    return {
      request: function(config) {
        config.headers = config.headers || {};
        
        var token = tokenService.getToken();
        if (token) {
          config.headers.Authorization = 'Bearer ' + token;
        }
        
        return config;
      },
      responseError: function(rejection) {
        if (rejection.status === 401) {
          // Если сервер вернул 401, удаляем токен и перенаправляем на логин
          tokenService.removeToken();
          $location.path('/login');
        }
        
        return $q.reject(rejection);
      }
    };
  }
  
  function configFunction($httpProvider) {
    $httpProvider.interceptors.push('authInterceptor');
  }
})();

(function() {
  'use strict';
  
  angular
    .module('app.auth')
    .controller('LoginController', LoginController);
  
  LoginController.$inject = ['$scope', '$location', 'authService'];
  
  function LoginController($scope, $location, authService) {
    $scope.UserModel = {
      Email: '',
      Password: ''
    };
    $scope.Submited = false;
    $scope.IsLoggedIn = false;
    $scope.IsFormValid = false;
    $scope.msg = "";
    
    // Отслеживаем валидность формы
    $scope.$watch("myForm.$valid", function(TrueOrFalse) {
      $scope.IsFormValid = TrueOrFalse;
    });
    
    $scope.LoginForm = function() {
      $scope.Submited = true;
      if ($scope.IsFormValid) {
        authService.login($scope.UserModel)
          .then(function(response) {
            if (response.Email != null) {
              $scope.IsLoggedIn = true;
              $scope.msg = "Вы успешно вошли, " + response.FullName;
              // Перенаправление на защищенную страницу
              $location.path('/dashboard');
            } else {
              alert("Неверные учетные данные!");
            }
          })
          .catch(function(error) {
            $scope.errorMessage = "Ошибка при входе. Пожалуйста, попробуйте еще раз.";
          });
      }
    };
  }
})();

(function() {
  'use strict';
  
  angular
    .module('app.auth')
    .config(routeConfig);
  
  routeConfig.$inject = ['$routeProvider'];
  
  function routeConfig($routeProvider) {
    $routeProvider
      .when('/login', {
        templateUrl: 'app/auth/views/login.html',
        controller: 'LoginController'
      })
      .when('/dashboard', {
        templateUrl: 'app/dashboard/dashboard.html',
        controller: 'DashboardController',
        resolve: {
          authCheck: ['authService', function(authService) {
            return authService.getCurrentUser();
          }]
        }
      });
  }
})();

(function() {
  'use strict';
  
  angular
    .module('app.auth')
    .run(runBlock);
  
  runBlock.$inject = ['$rootScope', '$location'];
  
  function runBlock($rootScope, $location) {
    $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) {
      if (rejection === 'Пользователь не авторизован') {
        $location.path('/login');
      }
    });
  }
})();

angular.module('app.auth').factory('authService', function($http, $q, localStorageService) {
  // Приватные переменные сервиса
  var currentUser = null;
  
  // Публичное API сервиса
  var service = {
    login: login,
    logout: logout,
    isAuthenticated: isAuthenticated,
    getCurrentUser: getCurrentUser,
    resetPassword: resetPassword,
    refreshToken: refreshToken
  };
  
  return service;
  
  // Реализация методов
  function login(credentials) {
    return $http.post('/api/auth/token', credentials)
      .then(function(response) {
        // Сохраняем токен в localStorage
        localStorageService.set('auth_token', response.data.token);
        // Сохраняем время истечения токена
        var expirationDate = new Date();
        expirationDate.setMinutes(expirationDate.getMinutes() + 30); // 30 минут
        localStorageService.set('token_expires', expirationDate.getTime());
        
        // Запрашиваем данные пользователя
        return getUserProfile();
      })
      .catch(function(error) {
        // Централизованная обработка ошибок
        return handleAuthError(error, 'Ошибка при входе в систему');
      });
  }
  
  function getUserProfile() {
    return $http.get('/api/users/me')
      .then(function(response) {
        currentUser = response.data;
        return currentUser;
      });
  }
  
  function logout() {
    // Отправляем запрос на сервер для инвалидации токена
    var token = localStorageService.get('auth_token');
    
    if (token) {
      // Не ждем ответа - даже если запрос не удастся, мы все равно
      // удалим токен на клиенте
      $http.delete('/api/auth/token');
      
      // Очищаем локальное хранилище
      localStorageService.remove('auth_token');
      localStorageService.remove('token_expires');
      currentUser = null;
    }
    
    return $q.resolve();
  }
  
  function isAuthenticated() {
    var token = localStorageService.get('auth_token');
    var expires = localStorageService.get('token_expires');
    
    if (!token || !expires) {
      return false;
    }
    
    // Проверяем, не истек ли токен
    return new Date().getTime() < expires;
  }
  
  function getCurrentUser() {
    if (!isAuthenticated()) {
      return $q.reject('Пользователь не авторизован');
    }
    
    if (currentUser) {
      return $q.resolve(currentUser);
    }
    
    // Если у нас есть токен, но нет данных пользователя, запрашиваем их
    return getUserProfile();
  }
  
  function refreshToken() {
    if (!isAuthenticated()) {
      return $q.reject('Невозможно обновить токен: пользователь не авторизован');
    }
    
    return $http.post('/api/auth/token/refresh')
      .then(function(response) {
        localStorageService.set('auth_token', response.data.token);
        
        var expirationDate = new Date();
        expirationDate.setMinutes(expirationDate.getMinutes() + 30);
        localStorageService.set('token_expires', expirationDate.getTime());
        
        return response.data;
      });
  }
  
  function resetPassword(email) {
    return $http.post('/api/auth/reset-password', { email: email })
      .catch(function(error) {
        return handleAuthError(error, 'Ошибка при сбросе пароля');
      });
  }
  
  // Приватный метод для обработки ошибок
  function handleAuthError(error, defaultMessage) {
    var errorMessage = defaultMessage;
    
    if (error.data && error.data.message) {
      errorMessage = error.data.message;
    } else if (error.status === 401) {
      errorMessage = 'Неверные учетные данные';
    } else if (error.status === 403) {
      errorMessage = 'Доступ запрещен';
    } else if (error.status === 429) {
      errorMessage = 'Слишком много попыток. Попробуйте позже.';
    }
    
    return $q.reject({ message: errorMessage, originalError: error });
  }
});

angular.module('app.auth').controller('LoginController', function($scope, $location, authService, notifyService) {
  // Модель для привязки к форме
  $scope.credentials = {
    email: '',
    password: ''
  };
  
  // Флаги состояния
  $scope.isLoading = false;
  $scope.errorMessage = null;
  $scope.rememberMe = false;
  
  // Отслеживаем состояние формы для валидации
  $scope.submitted = false;
  
  // Метод для отправки формы
  $scope.login = function() {
    $scope.submitted = true;
    $scope.errorMessage = null;
    
    // Проверяем валидность формы
    if ($scope.loginForm.$invalid) {
      return;
    }
    
    $scope.isLoading = true;
    
    authService.login($scope.credentials)
      .then(function(user) {
        notifyService.success('Добро пожаловать, ' + user.displayName + '!');
        
        // Если пользователь был перенаправлен на страницу логина,
        // возвращаем его на исходную страницу
        var redirectUrl = $location.search().redirect || '/dashboard';
        $location.path(redirectUrl).search('redirect', null);
      })
      .catch(function(error) {
        $scope.errorMessage = error.message;
      })
      .finally(function() {
        $scope.isLoading = false;
      });
  };
  
  // Метод для сброса пароля
  $scope.forgotPassword = function() {
    var email = $scope.credentials.email;
    
    if (!email) {
      $scope.errorMessage = 'Введите email для сброса пароля';
      return;
    }
    
    $scope.isLoading = true;
    
    authService.resetPassword(email)
      .then(function() {
        notifyService.info('Инструкции по сбросу пароля отправлены на ' + email);
      })
      .catch(function(error) {
        $scope.errorMessage = error.message;
      })
      .finally(function() {
        $scope.isLoading = false;
      });
  };
});

angular.module('app.common').factory('notifyService', function($rootScope) {
  var service = {
    success: showSuccess,
    error: showError,
    info: showInfo,
    warning: showWarning
  };
  
  return service;
  
  function showSuccess(message) {
    show({ type: 'success', message: message });
  }
  
  function showError(message) {
    show({ type: 'error', message: message });
  }
  
  function showInfo(message) {
    show({ type: 'info', message: message });
  }
  
  function showWarning(message) {
    show({ type: 'warning', message: message });
  }
  
  function show(notification) {
    // Отправляем событие, которое будет перехвачено директивой уведомлений
    $rootScope.$broadcast('notify', notification);
  }
});

angular.module('app.auth').factory('authStateService', function($rootScope, authService) {
  // Храним состояние аутентификации
  var isAuthenticated = authService.isAuthenticated();
  var currentUser = null;
  
  // Инициализация: получаем текущего пользователя
  if (isAuthenticated) {
    authService.getCurrentUser()
      .then(function(user) {
        currentUser = user;
        broadcastAuthChange();
      });
  }
  
  // При смене маршрута проверяем состояние аутентификации
  $rootScope.$on('$routeChangeStart', function() {
    var newState = authService.isAuthenticated();
    
    if (newState !== isAuthenticated) {
      isAuthenticated = newState;
      
      if (isAuthenticated) {
        authService.getCurrentUser()
          .then(function(user) {
            currentUser = user;
            broadcastAuthChange();
          });
      } else {
        currentUser = null;
        broadcastAuthChange();
      }
    }
  });
  
  // Уведомляем компоненты об изменении состояния
  function broadcastAuthChange() {
    $rootScope.$broadcast('auth:stateChanged', {
      isAuthenticated: isAuthenticated,
      currentUser: currentUser
    });
  }
  
  return {
    isAuthenticated: function() { return isAuthenticated; },
    getCurrentUser: function() { return currentUser; }
  };
});

angular.module('app.auth').directive('authInput', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      model: '=ngModel',
      type: '@',
      label: '@',
      required: '=?',
      minLength: '@?',
      placeholder: '@?',
      name: '@'
    },
    templateUrl: 'app/auth/directives/auth-input.html',
    link: function(scope, element, attrs, ctrl) {
      // Устанавливаем значения по умолчанию
      scope.required = scope.required !== false;
      scope.type = scope.type || 'text';
      scope.minLength = scope.minLength || 0;
      
      // Уникальный ID для связи label с input
      scope.inputId = 'input_' + scope.name + '_' + Math.random().toString(36).substr(2, 9);
    }
  };
});

angular.module('app.auth').directive('loginForm', function() {
  return {
    restrict: 'E',
    scope: {
      onSuccess: '&',
      redirectUrl: '@?'
    },
    templateUrl: 'app/auth/directives/login-form.html',
    controller: function($scope, $location, authService, notifyService) {
      $scope.credentials = {
        email: '',
        password: ''
      };
      
      $scope.isLoading = false;
      $scope.errorMessage = null;
      
      $scope.login = function() {
        if ($scope.loginForm.$invalid) {
          return;
        }
        
        $scope.isLoading = true;
        $scope.errorMessage = null;
        
        authService.login($scope.credentials)
          .then(function(user) {
            if ($scope.onSuccess) {
              $scope.onSuccess({user: user});
            } else if ($scope.redirectUrl) {
              $location.path($scope.redirectUrl);
            }
          })
          .catch(function(error) {
            $scope.errorMessage = error.message;
          })
          .finally(function() {
            $scope.isLoading = false;
          });
      };
    }
  };
});

angular.module('app.auth').component('loginForm', {
  templateUrl: 'app/auth/components/login-form.html',
  bindings: {
    onSuccess: '&',
    redirectUrl: '@?'
  },
  controller: function($location, authService) {
    var ctrl = this;
    
    ctrl.credentials = {
      email: '',
      password: ''
    };
    
    ctrl.isLoading = false;
    ctrl.errorMessage = null;
    
    ctrl.login = function() {
      if (ctrl.loginForm.$invalid) {
        return;
      }
      
      ctrl.isLoading = true;
      ctrl.errorMessage = null;
      
      authService.login(ctrl.credentials)
        .then(function(user) {
          if (ctrl.onSuccess) {
            ctrl.onSuccess({user: user});
          } else if (ctrl.redirectUrl) {
            $location.path(ctrl.redirectUrl);
          }
        })
        .catch(function(error) {
          ctrl.errorMessage = error.message;
        })
        .finally(function() {
          ctrl.isLoading = false;
        });
    };
  }
});