1 files changed, 61 insertions, 11 deletions
diff --git a/src/components/mao-account.js b/src/components/mao-account.js
index f6f32c6..72eb8b8 100644
--- a/src/components/mao-account.js
+++ b/src/components/mao-account.js
@@ -16,7 +16,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js';
 import { store } from '../store.js';
 
 //These are the actions needed by this element.
-import { signIn, signOut, requestHours } from '../actions/firebase.js';
+import { signIn, signOut, requestHours, createAccount } from '../actions/firebase.js';
 
 // We are lazy loading its reducer.
 import firebase from '../reducers/firebase.js';
@@ -43,7 +43,7 @@ class MaoAccount extends connect(store)(PageViewElement) {
 
       <style>
 
-      .sign-in-card, .acc-info-card {
+      .sign-in-card, .acc-info-card, .create-acc-card {
         display: block;
       }
 
@@ -54,7 +54,7 @@ class MaoAccount extends connect(store)(PageViewElement) {
         width: 50%;
       }
 
-      .account-email {
+      .account-email, span {
         word-break: break-all;
       }
 
@@ -62,6 +62,10 @@ class MaoAccount extends connect(store)(PageViewElement) {
         text-align: center;
       }
 
+      .create-acc-card {
+        --paper-card-background-color: #f7f7f7;
+      }
+
       </style>
 
 
@@ -113,6 +117,29 @@ class MaoAccount extends connect(store)(PageViewElement) {
         </paper-card>
 
       </section>
+
+      <section hidden="${props.signedIn}">
+
+      <paper-card class="create-acc-card" elevation="0">
+
+        <div class="card-content">
+          <h2 class="underline">Create Account</h2>
+
+          <paper-input label="email" id="createEmailField">
+            <span slot="suffix">@communityschoolnaples.org</span>
+          </paper-input>
+
+          <paper-input type="password" label="password" id="createPasswordField">
+          </paper-input>
+        </div>
+
+        <div class="card-actions">
+          <paper-button class="info" hidden="${props.signedIn}"  raised on-tap="${() => this.makeAccount()}">Create Account</paper-button>
+        </div>
+
+      </paper-card>
+
+      </section>
     `;
   }
 
@@ -134,17 +161,19 @@ class MaoAccount extends connect(store)(PageViewElement) {
   }
 
   logIn() {
-    var emailElement     = this.shadowRoot.getElementById('emailField');
-    var passwordElement  = this.shadowRoot.getElementById('passwordField');
+    if(this.shadowRoot) {
+      var emailElement     = this.shadowRoot.getElementById('emailField');
+      var passwordElement  = this.shadowRoot.getElementById('passwordField');
 
-    const email     = emailElement.value
-                      + "@communityschoolnaples.org";
-    const password  = passwordElement.value;
+      const email     = emailElement.value
+                        + "@communityschoolnaples.org";
+      const password  = passwordElement.value;
 
-    store.dispatch(signIn(email,password));
+      store.dispatch(signIn(email,password));
 
-    emailElement.value    = "";
-    passwordElement.value = "";
+      emailElement.value    = "";
+      passwordElement.value = "";
+    }
   }
 
   createCompetitionList(comps) {
@@ -166,6 +195,27 @@ class MaoAccount extends connect(store)(PageViewElement) {
     }
   }
 
+  makeAccount() {
+    var emailElement     = this.shadowRoot.getElementById('createEmailField');
+    var passwordElement  = this.shadowRoot.getElementById('createPasswordField');
+
+    if( emailElement.value.includes('2019') ||
+        emailElement.value.includes('2020')
+      )
+    {
+      const email     = emailElement.value
+                        + "@communityschoolnaples.org";
+      const password  = passwordElement.value;
+
+      store.dispatch(createAccount(email,password));
+    } else {
+      alert('Please use a validated email.');
+    }
+
+    emailElement.value    = "";
+    passwordElement.value = "";
+  }
+
 }
 
 window.customElements.define('mao-account', MaoAccount);