<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>Email Verification</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <link rel="stylesheet" href="<%= BASE_PATH %>public/css/admin.css">
    <%- include ../partials/head %>
  </head>
  <body class="confirm-email-page">
    <div id="root">
      <div class="error-console container"></div>
      <form id="verify-email-form" class="container">
        <legend class="legend"><%= t('confirm_email.click_to_confirm') %></legend>
        <button type="submit"><%= t('confirm_email.confirm') %></button>
      </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        function showError(error) {
          try {
            let err = JSON.parse(error);
            $('.error-console').text(err.message).addClass('active');
          } catch (err) {
            $('.error-console').text(error).addClass('active');
          }
        }

        function handleSubmit(e) {
          e.preventDefault();
          $('.error-console').removeClass('active');

          $.ajax({
            url: '<%= BASE_PATH %>api/v1/account/email/verify',
            contentType: 'application/json',
            method: 'POST',
            data: JSON.stringify({token: location.hash.replace('#', '')})
          }).then(function (success) {
            location.href = success.redirectUri;
          }).catch(function (error) {
            showError(error.responseText);
          });
        }

        $.ajax({
          url: '<%= BASE_PATH %>api/v1/account/email/verify',
          contentType: 'application/json',
          method: 'POST',
          data: JSON.stringify({token: location.hash.replace('#', ''), check: true})
        })
        .then(function () {
          $('#verify-email-form').fadeIn().on('submit', handleSubmit);
        })
        .catch(function (error) {
          showError(error.responseText);
        });
      });
    </script>
  </body>
</html>
