@{
	ViewData["Title"] = "Edit credential";
}

<header>
	&#xE760; <a asp-action="Index" asp-controller="Admin" asp-area="">Back to main menu</a>
	<h1>Change credential information</h1>
</header>

<article>
	<h2>Change e-mail</h2>
	<div asp-validation-summary="All" class="text-danger"></div>
	<form method="post" onsubmit="return ValidateEmail()">
		<label for="value">New e-mail:</label>
		<input name="value" id="newEmail" type="email" placeholder="user@example.com" required />

		<label>Confirm e-mail:</label>
		<input id="confirmEmail" type="email" placeholder="user@example.com" required />

		<span class="text-danger" id="emailValidationError"></span>

		<input name="key" value="email" hidden />
		<button>Update e-mail</button>
	</form>

	<h2>Change password</h2>
	<form method="post" onsubmit="return ValidatePassword()">
		<label for="value">New password:</label>
		<input name="value" id="newPassword" type="password" required />


		<label>Confirm password:</label>
		<input id="confirmPassword" type="password" required />

		<span class="text-danger" id="passwordValidationError"></span>

		<input name="key" value="password" hidden />
		<button>Update password</button>
	</form>
</article>


@section Imports
{
	<script type="text/javascript">
		function ValidateEmail()
		{
			var newEmail = document.querySelector("#newEmail");
			var confirmEmail = document.querySelector("#confirmEmail");

			var emailValidation = document.querySelector("#emailValidationError");

			emailValidation.innerHTML = "";

			if (newEmail.value == confirmEmail.value)
				return true;

			emailValidation.innerHTML = "E-mail addresses are invalid or doesn't match";
			return false;
		}

		function ValidatePassword()
		{
			var newPassword = document.querySelector("#newPassword");
			var confirmPassword = document.querySelector("#confirmPassword");

			var passwordValidation = document.querySelector("#passwordValidationError");

			passwordValidation.innerHTML = "";

			if (newPassword.value == confirmPassword.value)
				return true;

			passwordValidation.innerHTML = "Passwords doesn't match";
			return false;
		}
	</script>
}