Set up front end create account form

app/views/login/controller.js

@@ -1,13 +1,112 @@
 import { ViewController } from '../controller';
 
 export class LoginController extends ViewController {
-  constructor(state, i18n) {
+  constructor(state, emit, i18n) {
     // Super passes state, view name, and default state to ViewController,
     // which stores state in this.appState and the view controller's state to this.state
-    super(state, i18n, 'login', {});
+    super(state, i18n, 'login', {
+      fieldValues: {
+        loginEmail: '',
+        loginPassword: '',
+        createEmail: '',
+        createUsername: '',
+        createDisplayName: '',
+        createPassword: '',
+        createConfirm: '',
+      },
+      loginError: '',
+      createError: '',
+      createMessage: '',
+      pageMessage: '',
+      isChecking: false,
+    });
+
+    this.emit = emit;
 
     // If using controller methods in an input's onchange or onclick instance,
     // either bind the class's 'this' instance to the method first...
     // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
   }
+
+  clearCreateAccountForm () {
+    this.state.fieldValues.createEmail = '';
+    this.state.fieldValues.createUsername = '';
+    this.state.fieldValues.createDisplayName = '';
+    this.state.fieldValues.createPassword = '';
+    this.state.fieldValues.createConfirm = '';
+    
+    this.emit('render');
+  }
+
+  validateCreateAccount () {
+    const { __ } = this.i18n;
+    this.state.createError = '';
+    this.state.isChecking = true;
+
+    this.emit('render', () => {
+      const {
+        createEmail,
+        createUsername,
+        createPassword,
+        createConfirm
+      } = this.state.fieldValues;
+
+      if ([
+        createEmail,
+        createUsername,
+        createPassword,
+        createConfirm,
+      ].includes('')) {
+        this.state.createError = __('login.create_required_field_blank');
+        this.state.isChecking = false;
+        this.emit('render');
+        return;
+      }
+
+      if (createPassword !== createConfirm) {
+        this.state.createError = __('login.create_password_confirm_mismatch');
+        this.state.isChecking = false;
+        this.emit('render');
+        return;
+      }
+
+      this.createAccount();
+    });
+  }
+
+  createAccount () {
+    const { __ } = this.i18n;
+    const {
+      createEmail,
+      createUsername,
+      createDisplayName,
+      createPassword
+    } = this.state.fieldValues;
+
+    fetch('/api/account/create', {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        email: createEmail,
+        username: createUsername,
+        displayName: createDisplayName,
+        password: createPassword,
+      }),
+    }).then(response => response.json())
+    .then(response => {
+      if (response.error !== false) {
+        console.error(response);
+        this.state.createError = __(response.message);
+        this.state.isChecking = false;
+        this.emit('render');
+        return;
+      }
+
+      this.state.createMessage = __(response.message);
+      this.state.isChecking = false;
+      this.clearCreateAccountForm();
+    })
+  }
 }

app/views/login/index.js

@@ -3,11 +3,17 @@ import html from 'choo/html';
 import { LoginController } from './controller';
 
 export const loginView = (state, emit, i18n) => {
-  const controller = new LoginController(state, i18n);
+  const controller = new LoginController(state, emit, i18n);
   const { __ } = controller.i18n;
 
   return html`<section>
 
+    ${
+      controller.state.pageMessage === ''
+      ? null
+      : html`<div class="info card"><header>${controller.state.pageMessage}</header></div>`
+    }
+
     <div class="flex one two-700">
       <div>
         <article class="card">
@@ -17,13 +23,32 @@ export const loginView = (state, emit, i18n) => {
           <footer>
             <label>
               <span>${__('login.email')}</span>
-              <input type="email" name="email">
+              <input type="email" name="email"
+                value=${controller.state.fieldValues.loginEmail}
+                oninput=${e => controller.state.fieldValues.loginEmail = e.target.value.trim()}
+              >
             </label>
             <label>
               <span>${__('login.password')}</span>
-              <input type="password" name="password">
+              <input type="password" name="password"
+                value=${controller.state.fieldValues.loginPassword}
+                oninput=${e => controller.state.fieldValues.loginPassword = e.target.value}
+              >
             </label>
-            <input type="submit" value="${__('login.login_button')}">
+            ${
+              controller.state.loginError === ''
+              ? null
+              : html`<div class="error card">${controller.state.loginError}</div>`
+            }
+            <button ${controller.state.isChecking ? 'disabled' : null}
+              onclick=${() => controller.validateLogin()}
+            >
+              ${
+                controller.state.isChecking
+                ? html`<span><i class="icon-loading"></i></span><span>Loading</span>`
+                : __('login.login_button')
+              }
+            </button>
           </footer>
         </article>
       </div>
@@ -33,27 +58,61 @@ export const loginView = (state, emit, i18n) => {
             <h3>${__('login.create_account')}</h3>
           </header>
           <footer>
+            ${
+              controller.state.createMessage === ''
+              ? null
+              : html`<div class="success card"><header>${controller.state.createMessage}</header></div>`
+            }
             <label>
               <span>${__('login.email')}</span>
-              <input type="email" name="new_email">
+              <input type="email" name="new_email"
+                value=${controller.state.fieldValues.createEmail}
+                oninput=${e => controller.state.fieldValues.createEmail = e.target.value.trim()}
+              >
             </label>
             <label>
               <span>${__('login.password')}</span>
-              <input type="password" name="new_password">
+              <input type="password" name="new_password"
+                value=${controller.state.fieldValues.createPassword}
+                oninput=${e => controller.state.fieldValues.createPassword = e.target.value}
+              >
             </label>
             <label>
               <span>${__('login.confirm_password')}</span>
-              <input type="password" name="confirm_password">
+              <input type="password" name="confirm_password"
+                value=${controller.state.fieldValues.createConfirm}
+                oninput=${e => controller.state.fieldValues.createConfirm = e.target.value}
+              >
             </label>
             <label>
               <span>${__('login.username')}</span>
-              <input type="text" name="new_username">
+              <input type="text" name="new_username"
+                value=${controller.state.fieldValues.createUsername}
+                oninput=${e => controller.state.fieldValues.createUsername = e.target.value.trim()}
+              >
             </label>
             <label>
               <span>${__('login.display_name')}</span>
-              <input type="text" name="new_displayname">
+              <input type="text" name="new_displayname"
+                value=${controller.state.fieldValues.createDisplayName}
+                oninput=${e => controller.state.fieldValues.createDisplayName = e.target.value.trim()}
+              >
             </label>
-            <input type="submit" class="success" value="${__('login.create_account_button')}">
+            ${
+              controller.state.createError === ''
+              ? null
+              : html`<div class="error card"><header>${controller.state.createError}</header></div>`
+            }
+            <button class="success"
+              ${controller.state.isChecking ? 'disabled' : null}
+              onclick=${() => controller.validateCreateAccount()}
+            >
+              ${
+                controller.state.isChecking
+                ? html`<span><i class="icon-loading"></i></span><span>Loading</span>`
+                : __('login.create_account_button')
+              }
+            </button>
           </footer>
         </article>
       </div>