Add create account

src/js/account/login.js

@@ -1,4 +1,5 @@
 import { request } from "./helpers";
+import { addMessage } from "../utilities";
 
 export function logIn() {
   const email = document.getElementById('loginEmail').value.trim(),
@@ -22,4 +23,67 @@ export function logIn() {
       password,
     });
   }
+}
+
+export function createAccount() {
+  const email = document.getElementById('createNewEmail').value.trim(),
+    password = document.getElementById('createNewPassword').value.trim(),
+    confirm = document.getElementById('createNewConfirm').value.trim(),
+    publicName = document.getElementById('createNewPublicName').value.trim(),
+    allowEmail = document.getElementById('createNewAllowEmails').checked;
+  const createAccountErrorMessages = document.getElementById('createAccountErrorMessages');
+  let errorHTML = '';
+
+  if (email === '') {
+    errorHTML += '<p class="bold red">Please enter an email address.</p>';
+  } else if (!/.+@.+\..+/.test(email)) {
+    errorHTML += '<p class="bold red">Please double-check your email address.</p>';
+  }
+  if (password === '') {
+    errorHTML += '<p class="bold red">Please enter a password.</p>';
+  } else if (confirm !== password) {
+    errorHTML += '<p class="bold red">The password you entered to confirm did not match the password you entered.</p>';
+  }
+  
+  createAccountErrorMessages.innerHTML = errorHTML;
+  if (errorHTML === '') {
+    request({
+      action: 'check-email',
+      email,
+    }, emailExists => {
+      if (emailExists) {
+        errorHTML += '<p class="bold red">The email address you entered already exists.</p>';
+      }
+    }, errorData => {
+      console.error(errorData);
+      errorHTML += `<p class="bold red">${errorData}</p>`;
+    }).then(() => {
+      createAccountErrorMessages.innerHTML = errorHTML;
+      if (errorHTML === '') {
+        console.log('creating account');
+        request({
+          action: 'create-account',
+          email,
+          password,
+          userData: {
+            publicName,
+            allowEmail,
+          },
+        }, responseData => {
+            return responseData;
+        }, errorData => {
+            errorHTML += `<p class="bold red">${errorData}</p>`;        
+        }).then(responseData => {
+          console.log(responseData);
+          createAccountErrorMessages.innerHTML = errorHTML;
+          if (errorHTML === '') {
+            const loginModal = document.getElementById('loginModal');
+            loginModal.parentElement.removeChild(loginModal);
+            addMessage('Account Created Successfully!');
+            addMessage(`Welcome${publicName !== '' ? ', ' + publicName : ''}! You are logged in.`);
+          }
+        });
+      }
+    }).catch(err => console.error(err));
+  }
 }

src/js/account/render.js

@@ -40,6 +40,7 @@ export function renderLoginForm() {
           <label>Allow Emails
             <input type="checkbox" id="createNewAllowEmails">
           </label>
+          <section id="createAccountErrorMessages"></section>
           <a id="createAccountSubmit" class="button">Create Account</a>
         </div>
       </div>

src/js/account/setupListeners.js

@@ -1,4 +1,4 @@
-import { logIn } from "./login";
+import { logIn, createAccount } from "./login";
 
 export function setupLoginModal(modal) {
   const closeElements = modal.querySelectorAll('.modal-background, .close-button');
@@ -9,4 +9,5 @@ export function setupLoginModal(modal) {
   });
 
   document.getElementById('loginSubmit').addEventListener('click', logIn);
+  document.getElementById('createAccountSubmit').addEventListener('click', createAccount);
 }