<main class="np-main np-box-container">
  <div class="np-box">
    {% include "header_minimal" %}
    <div class="np-box-content-container">
      <form class="np-form np-box-content" id="sign-up-form" action="{% route sign_up %}" method="post" novalidate autocomplete="off">
        <div class="np-form-title"> {% t .create_account %} </div>
        {% form_authenticity_token %}
        <div class="np-form-flex-desktop">
          <div class="np-form-field">
            <label class="np-input-label" for="learner_first_name">
              {% t shared.first_name %}
            </label>
            <input
              class="np-input"
              autofocus="autofocus"
              type="text"
              name="learner[first_name]"
              id="learner_first_name"
            >
          </div>
          <div class="np-form-field">
            <label class="np-input-label" for="learner_last_name">
              {% t shared.last_name %}
            </label>
            <input
              class="np-input"
              type="text"
              name="learner[last_name]"
              id="learner_last_name"
            >
          </div>
        </div>
        <div class="np-form-field">
          <label class="np-input-label" for="learner_email">
            {% t shared.email_address %}
          </label>
          <input
            class="np-input"
            autofocus="autofocus"
            type="email"
            name="learner[email]"
            id="learner_email"
            {%- comment -%} onkeyup="emailValidator()" {%- endcomment -%}
            onchange="emailValidator()"
          >
        </div>
        <div class="np-form-field">
          <label class="np-input-label" for="learner_password">
            {% t shared.password %}
          </label>
          <input
            class="np-input"
            type="password"
            name="learner[password]"
            id="learner_password"
          >
        </div>
        <button type="submit" id='sign-up-button' class="np-button np-button-big np-button-large-font np-form-action" onclick="redirectSecurer()">
          {% t shared.sign_up %}
        </button>
        <span class="np-form-terms">
          {% t .terms %}
          <a
            class="np-form-link np-button-color"
            target="_blank"
            href="{{ current_school.terms_of_service_url }}"
          >
            {% t .terms_link %}
          </a>
        </span>
      </form>
    </div>
  </div>
</main>

<script>
  let redirectSecurer = () => {
    localStorage.setItem("registered", true);
  }

  let emailValidator = () => {
    let learnerEmail = event.target.value;

    const regexExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if(regexExp.test(learnerEmail) == true){
      let domain = learnerEmail.split('@')[1];
      domain = `@${domain.toLowerCase()}`

      let allDomains = (`{{ current_school.properties.master_domain_list }}`);
      allDomains = allDomains.split('\n');

      if(allDomains.indexOf(domain) > -1){
        if(document.querySelector('.invalid-domain-error')){
          document.getElementById('sign-up-form').children[3].removeChild(document.querySelector('.invalid-domain-error'))
          document.getElementById('sign-up-button').classList.remove('disabled');
        }
      } else {
        if(!document.querySelector('.invalid-domain-error')){
          let errorMessage = document.createElement('span');
          errorMessage.textContent = 'Please enter your work email'
          errorMessage.classList.add('np-form-terms');
          errorMessage.classList.add('invalid-domain-error')

          document.getElementById('sign-up-form').children[3].appendChild(errorMessage);
          document.getElementById('sign-up-button').classList.add('disabled');
        } 
      }
    }
  }
</script>

<style>
  .disabled{
    background: #808080;
    pointer-events: none;
  }

  .invalid-domain-error{
    color: #f05a24;
    margin-bottom: 20px;
    margin-top: 10px;
  }
</style>