From 8721810bc6f32c6fbe79b7e0bd46f753321cda5c Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Fri, 13 Sep 2019 23:34:58 -0600
Subject: [PATCH] Add create account form to /login view

---
 app/i18n/locales/en.json |  8 ++++-
 app/views/login/index.js | 65 +++++++++++++++++++++++++++++++---------
 2 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index d860b7a..798a79e 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -12,9 +12,15 @@
     "logged_out_join_now": "Join Now!"
   },
   "login": {
+    "log_in": "Log In",
     "email": "Email",
     "password": "Password",
-    "login_button": "Log In!"
+    "login_button": "Log In!",
+    "create_account": "Create a New Account",
+    "confirm_password": "Confirm Password",
+    "username": "Username",
+    "display_name": "Display Name",
+    "create_account_button": "Create Account!"
   },
   "search": {
     "header": "Search",
diff --git a/app/views/login/index.js b/app/views/login/index.js
index be839a8..7ba9b82 100644
--- a/app/views/login/index.js
+++ b/app/views/login/index.js
@@ -8,19 +8,56 @@ export const loginView = (state, emit) => {
 
   return html`<section>
 
-  <article class="card">
-    <div class="container wide">
-      <label>
-        <span>${i18n.__('login.email')}</span>
-        <input type="email" name="email">
-      </label>
-      <label>
-        <span>${i18n.__('login.password')}</span>
-        <input type="password" name="password">
-      </label>
-      <input type="submit" value="${i18n.__('login.login_button')}">
+    <div class="flex one two-700">
+      <div>
+        <article class="card">
+          <header>
+            <h3>${i18n.__('login.log_in')}</h3>
+          </header>
+          <footer>
+            <label>
+              <span>${i18n.__('login.email')}</span>
+              <input type="email" name="email">
+            </label>
+            <label>
+              <span>${i18n.__('login.password')}</span>
+              <input type="password" name="password">
+            </label>
+            <input type="submit" value="${i18n.__('login.login_button')}">
+          </footer>
+        </article>
+      </div>
+      <div>
+        <article class="card">
+          <header>
+            <h3>${i18n.__('login.create_account')}</h3>
+          </header>
+          <footer>
+            <label>
+              <span>${i18n.__('login.email')}</span>
+              <input type="email" name="new_email">
+            </label>
+            <label>
+              <span>${i18n.__('login.password')}</span>
+              <input type="password" name="new_password">
+            </label>
+            <label>
+              <span>${i18n.__('login.confirm_password')}</span>
+              <input type="password" name="confirm_password">
+            </label>
+            <label>
+              <span>${i18n.__('login.username')}</span>
+              <input type="text" name="new_username">
+            </label>
+            <label>
+              <span>${i18n.__('login.display_name')}</span>
+              <input type="text" name="new_displayname">
+            </label>
+            <input type="submit" class="success" value="${i18n.__('login.create_account_button')}">
+          </footer>
+        </article>
+      </div>
     </div>
-  </article>
-  
-</section>`;
+    
+  </section>`;
 }
\ No newline at end of file