@{
	Layout = "~/Views/Shared/_LayoutThemed.cshtml";
}



<article class="article gradient-2">
	<h2 class="title container text-center">ART FIND</h2>
	<section class="form-section">
		<div class="section-inner container text-center">
			<div class="row">
				<div ng-controller="mainController as main" class="col-md-10 col-sm-12 col-xs-12 col-md-push-1 col-sm-push-0 col-xs-push-0">
					<h3 class="subtitle titleArea">{{main.login}}</h3>
					<div class="content">
						<div class="form-container col-md-10 col-sm-12 col-xs-12 col-md-push-1 col-sm-push-0 col-xs-push-0">
							<!--Beginning of form-->
							<form id="loginForm" name="main.loginForm" class="contact-form form" novalidate>
								<div class="contact-form-inner">
									<h3 class="subtitle"></h3>
									<div class="row">

										<!--Username Field-->
										<div class="col-md-6 col-sm-6 col-xs-12 form-group" ng-class="{'has-error' : main.loginForm.inputUsername.$invalid && main.loginForm.$submitted }">
											<label class="sr-only" for="inputUsername">Username</label>
											<input type="text" class="form-control inputUsername" name="inputUsername" ng-model="main.inputUsername" placeholder="Username" ng-minlength="2" required>
											<p ng-show="main.loginForm.inputUsername.$error.minlength && main.loginForm.$submitted" class="help-block">Username must have at least 2 characters</p>
											<p ng-show="main.loginForm.inputUsername.$error.required && main.loginForm.$submitted" class="help-block">Username is required</p>
										</div>

										<!--Password Field-->
										<div class="col-md-6 col-sm-6 col-xs-12 form-group" ng-class="{'has-error' : main.loginForm.inputPassword.$invalid && main.loginForm.$submitted }">
											<label class="sr-only" for="inputPassword">Password</label>
											<input type="password" class="form-control inputPassword" name="inputPassword" ng-model="main.inputPassword" placeholder="Password" ng-minlength="2" required>
											<p ng-show="main.loginForm.inputPassword.$error.minlength && main.loginForm.$submitted" class="help-block">Password must have at least 2 characters</p>
											<p ng-show="main.loginForm.inputPassword.$error.required && main.loginForm.$submitted" class="help-block">Password is required</p>
										</div>

										<!--Login Button-->
										<div class="col-md-12 col-sm-12 col-xs-12 form-group">
											<!--main.loginForm.$valid-->
											<button type="submit" ng-click="main.submitForm(main.loginForm.$valid)" class="btn btn-block btn-cta btn-cta-primary loginBtn">Login</button>
										</div>
										<div class="col-md-12 col-sm-12 col-xs-12 form-group">
											<button id="fbArtFindBtn" class="btn btn-block btn-cta btn-cta-primary" style="background-color: rgb(66,103,178); border: none; border-radius: 2px;"><i class="fa fa-facebook-official" aria-hidden="true"></i> &nbsp; Log in With Facebook</button>
										</div>

									</div><!--//row-->
									<div class="fb-login-button" id="fbBtn" scope="public_profile, email" data-max-rows="1" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false" onlogin=" sabio.page.checkLoginState()"></div>
								</div>
							</form><!--//contact-form-->
						</div>
							<div>
								<a href="/Users/Create" class="btn btn-cta btn-cta-primary createBtn" role="button">New to Art Find? Click here to sign up!</a>
							</div>
							<div>
								<br />
								<a href="/Users/forgot-password" class="btn btn-cta btn-cta-primary" role="button">Forgot Password?</a>
							</div>
					</div><!--//content-->
				</div>
			</div><!--//row-->
		</div>
	</section>
</article>

@section scripts
{
	<script src="~/Scripts/jquery.validate.js"></script>
	<script src="~/Scripts/artfind/services/artfind.services.users.js"></script>
	<script src="~/Scripts/artfind/services/artfind.services.notifications.js"></script>


		(function () {
			"use strict";

			angular.module(APPNAME)
				.controller('mainController', MainController);

			MainController.$inject = ['$scope', '$baseController', 'usersService', 'notificationsService', '$window', 'appConfig',];

			function MainController(
				$scope
				, $baseController, usersService, notificationsService, $window, appConfig) {

				var vm = this;

				$baseController.merge(vm, $baseController);

				vm.$scope = $scope;
				vm.usersService = usersService;
				vm.notificationsService = notificationsService;
				vm.onConfirm = _onConfirm;
				vm.submitForm = _submitForm;
				vm.loginSuccess = _loginSuccess;
				vm.loginError = _loginError;
				vm.inputUsername = null;
				vm.inputPassword = null;
				vm.error = null;
				vm.login = 'Login';

				render();

				function render() {

					vm.$log.log("Page Startup");

				}

				function _onConfirm() {
					$window.location.href = '/home';
				};

				function _submitForm(isValid) {
					if (isValid) {
						var loginUser = {
							username: vm.inputUsername,
							password: vm.inputPassword
						};
						usersService.login(loginUser, _loginSuccess, _loginError);
					}
				}

				function _loginSuccess() {
					notificationsService.success("Login successful!");

					if (appConfig.returnUrl) {
						$window.location.href = appConfig.returnUrl;
					}
					else {
						$window.location.href = "/notice";
					}
				}

				function _loginError() {
					notificationsService.error("Invalid login");
				}
			}
		})();
	</script>
}