Creating a script for Anthology to update all the names of their learner properties based on new subscription model. Downloaded and updated some templates for this same project.

Custom_Templates/customer_templates/Anthology Academy/sign_up.html.liquid

@@ -0,0 +1,135 @@
+<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>
+  $(document).ready(function() {
+    $(window).keydown(function(event){
+      if(event.keyCode == 13) {
+        event.preventDefault();
+        return false;
+      }
+    });
+  });
+  
+  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 rawDomains = `{{ current_school.properties.master_domain_list }}`;
+
+      let allDomains = rawDomains.toLowerCase();
+      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>