<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>Password Reset</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="password-reset-page">
    <div id="root">
      <div class="error-console container"></div>
      <form id="reset-password-form" class="container">
        <legend class="legend"><%= t('password_reset.set_new_password') %></legend>
        <label for="password">
          <%= t('password_reset.new_password') %>
          <input type="password" name="password" placeholder="<%= t('password_reset.new_password') %>" />
          <p><small><%= t('password_reset.new_password_help') %></small></p>
        </label>

        <label for="confirm-password">
          <%= t('password_reset.confirm_new_password') %>
          <input type="password" name="confirm-password" placeholder="<%= t('password_reset.confirm_new_password') %>" />
        </label>
        <button type="submit"><%= t('password_reset.change_password') %></button>
      </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $(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');

          var password = $('[name="password"]').val();
          var confirm = $('[name="confirm-password"]').val();

          if (password === '' || password.length < 8) {
            showError('Passwords must be at least 8 characters.');
            return false;
          }

          if (password !== confirm) {
            showError('New password and confirm password must match');
            return false;
          }

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

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