<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="0">
	
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="common/css/bootstrap.cerulean.min.css" />
	<!-- Icons CSS -->
	<link rel="stylesheet" href="common/css/fontawesome-all.min.css">
	
	<title th:text="${sysconf.title} + ': authorization request'"></title>
</head>

<body ng-app="authReqApp" ng-controller="authReqCtrl">

	<div class="container">
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<a class="navbar-brand" href="#"><img src="resources/images/openaire_logo_small.png" width="30" height="30" alt="OpenAIRE logo"><span th:text="${sysconf.title}"></span></a>
			
			<button class="navbar-toggler" type="button" data-toggle="collapse"	data-target="#navbarSupportedContent"><span class="navbar-toggler-icon"></span></button>
			
			<div class="collapse navbar-collapse w-100 order-1" id="navbarSupportedContent">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Support</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" th:href="${sp.value}" th:each="sp : ${supportPages}" th:text='${sp.key}' target="_blank"></a>
						</div>
					</li>
				</ul>
			</div>
		</nav>
		
		<div ng-if="registrationMessage">
			<div class="alert" style="margin-top: 25px" ng-class="{'alert-info': registrationStatus == 1, 'alert-warning': registrationStatus == 2, 'alert-danger': registrationStatus == -1}">{{registrationMessage}}</div>
			<a class="btn btn-sm btn-primary" th:href="@{/logout}">Close</a>
		</div>		

	    <div class="card" style="margin-top: 25px" ng-if="registrationStatus == 0">
			<div class="card-body">
				<h5 class="card-title">Authorization request</h5>
				<p class="card-text" th:inline="text">
					Hello '<span th:text="${email}" id="current_user"></span>', you don't have a role yet <br />
					To apply as data curator compile the form below, an administrator will authorize you as soon as possible.
				</p>	

				<form class="small">
					<div class="form-group row">
						<label class="col-sm-2 col-form-label">Fullname</label>
						<div class="col-sm-10">
							<input type="text" readonly class="form-control-plaintext" th:value="${fullname}" />
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-2 col-form-label">Organization</label>
						<div class="col-sm-10">
							<input type="text" readonly class="form-control-plaintext" th:value="${organization}" />
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-2 col-form-label">Reference person</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" ng-model="user.referencePerson" />
							<small class="form-text text-muted">Please indicate your reference person (if available)</small>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-2 col-form-label">Request message</label>
						<div class="col-sm-10">
							<textarea class="form-control" ng-model="user.requestMessage" cols="4"></textarea>
							<small class="form-text text-muted">Specify the reason of your request</small>
						</div>
					</div>
				
					<div class="card" style="margin-top: 25px">
						<div class="card-header">Select your countries</div>
							
						<div class="card-body">
							<div class="form-group row">
								<div class="col-xs-12 col-md-6 col-lg-4" ng-repeat="c in vocCountries">
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="checkbox" checklist-model="user.countries" checklist-value="c.value"/>
										<label class="form-check-label">{{c.name}}</label>
									</div>
								</div>
							</div>
						</div>
							
						<div class="card-footer">
							<button id="btnRegister" class="btn btn-sm btn-primary" ng-click="register()">send request</button>
							<a class="btn btn-sm btn-danger" th:href="@{/logout}">abort request</a>
						</div>
					</div>
				</form>

			</div>
		</div>
	</div>

	<script src="common/js/jquery.min.js"></script>
	<script src="common/js/popper.min.js"></script>
	<script src="common/js/bootstrap.min.js"></script>
	<script src="common/js/angular.min.js"></script>
	<script src='common/js/checklist-model.js'></script>

	<script>
	angular.module('authReqApp', ['checklist-model']).controller('authReqCtrl', function($scope, $http) {
		$scope.vocCountries = [];
		
		$scope.user = {
			'referencePerson' : '',
			'requestMessage' : '',
			'countries' : []
		};
		
		$scope.registrationStatus = 0;
		$scope.registrationMessage = '';
		
		$http.get('registration_api/voc/allCountries').then(function successCallback(res) {
			$scope.vocCountries = res.data;
		}, function errorCallback(res) {
			alert('ERROR: ' + res.data.error + ' (' + res.data.message + ')');
		});
		
		$scope.register = function () {
			$('#btnRegister').attr("disabled", "disabled");
			$http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";

			$http.post('registration_api/newUser', $scope.user).then(function successCallback(res) {
				$scope.registrationStatus = res.data.status;
				if (res.data.status == 1) {
					$scope.registrationMessage = 'Registration saved !';
				} else {
					$scope.registrationMessage = 'User already registered !';
				}
			}, function errorCallback(res) {
				$scope.registerStatus = -1;
				$scope.registrationMessage = 'Error saving registration !';
				alert('ERROR: ' + res.data.error + ' (' + res.data.message + ')');
			});
		}
	});
	</script>
	
</body>

</html>