Developed more styling and backend for account page.

3 files changed, 79 insertions, 23 deletions

diff --git a/src/actions/firebase.js b/src/actions/firebase.js
index becc62e..2d24908 100644
--- a/src/actions/firebase.js
+++ b/src/actions/firebase.js
@@ -42,10 +42,11 @@ export const authFail = (errorCode) => {
 export const authSuccess = (_user) => {
   alert('Sign In Success');
   return {
-    type:     AUTH_SUCCESS,
-    payload:  true,
-    code:     "Success",
-    uid:      _user.uid
+    type:       AUTH_SUCCESS,
+    payload:    true,
+    code:       "Success",
+    uid:        _user.uid,
+    userEmail:  _user.email
   }
 }
 
@@ -57,10 +58,11 @@ export const signOut = () => (dispatch) => {
 
 export const authSignOut = () => {
   return {
-    type:     AUTH_SIGN_OUT,
-    payload:  false,
-    code:     "Signed Out User",
-    uid:      null
+    type:       AUTH_SIGN_OUT,
+    payload:    false,
+    code:       "Signed Out User",
+    uid:        "",
+    userEmail:  ""
   }
 }
 //End Firebase Auth
diff --git a/src/components/mao-account.js b/src/components/mao-account.js
index 6fb1d3d..f6f32c6 100644
--- a/src/components/mao-account.js
+++ b/src/components/mao-account.js
@@ -32,14 +32,9 @@ import { ButtonSharedStyles } from './button-shared-styles.js'
 // Import paper elements
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-card/paper-card.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
-import '@polymer/paper-item/paper-item.js';
 import '@polymer/paper-slider/paper-slider.js';
 import '@polymer/paper-button/paper-button.js';
 
-// Import other customElements
-import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
-
 class MaoAccount extends connect(store)(PageViewElement) {
   _render(props) {
     return html`
@@ -48,7 +43,7 @@ class MaoAccount extends connect(store)(PageViewElement) {
 
       <style>
 
-      .sign-in-card {
+      .sign-in-card, .acc-info-card {
         display: block;
       }
 
@@ -57,15 +52,23 @@ class MaoAccount extends connect(store)(PageViewElement) {
         margin-right: auto;
         display: block;
         width: 50%;
-        }
       }
+
+      .account-email {
+        word-break: break-all;
+      }
+
+      .center {
+        text-align: center;
+      }
+
       </style>
 
 
 
       <section>
 
-        <paper-card class="sign-in-card" elevation="0">
+        <paper-card class="sign-in-card" elevation="0" hidden="${props.signedIn}">
 
           <div class="card-content">
             <h2 class="underline">Sign In</h2>
@@ -79,7 +82,32 @@ class MaoAccount extends connect(store)(PageViewElement) {
 
           <div class="card-actions">
             <paper-button class="info" hidden="${props.signedIn}"  raised on-tap="${() => this.logIn()}">Sign In</paper-button>
-            <paper-button class="info" hidden="${!props.signedIn}" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button>
+          </div>
+
+        </paper-card>
+
+        <paper-card class="acc-info-card" elevation="0" hidden="${!props.signedIn}">
+
+          <div class="card-content">
+            <h2 class="underline">Account</h2>
+
+            <div class="center">
+              <h3>Email</h3>
+              <p class="account-email">${props.userEmail}</p>
+
+              <h3>Username</h3>
+              <p>${props.userEmail.replace("@communityschoolnaples.org", "")}</p>
+
+              <h3>Divison</h3>
+              <p>Mu</p>
+
+              <h3 hidden="${props.registeredComps.length<1}">Registered Competitions</h3>
+              <div id="competition-list"></div>
+            </div>
+          </div>
+
+          <div class="card-actions">
+            <paper-button class="info" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button>
           </div>
 
         </paper-card>
@@ -90,13 +118,19 @@ class MaoAccount extends connect(store)(PageViewElement) {
 
   static get properties() { return {
     // This is the data from the store.
-    signedIn:       Boolean,
-    authMessage:    String
+    signedIn:         Boolean,
+    authMessage:      String,
+    userEmail:        String,
+    registeredComps:  Array
   }}
 
   _stateChanged(state) {
-    this.signedIn       = state.firebase.initialized;
-    this.authMessage    = state.firebase.authMessage;
+    this.signedIn     = state.firebase.initialized;
+    this.authMessage  = state.firebase.authMessage;
+    this.userEmail    = state.firebase.userEmail;
+
+    this.registeredComps  =     state.firebase.registeredComps;
+    this.createCompetitionList( this.registeredComps);
   }
 
   logIn() {
@@ -113,6 +147,25 @@ class MaoAccount extends connect(store)(PageViewElement) {
     passwordElement.value = "";
   }
 
+  createCompetitionList(comps) {
+    if(this.shadowRoot) {
+      var listArea        = this.shadowRoot.getElementById('competition-list');
+      listArea.innerHTML  = "";
+
+      var mainDiv   = document.createElement('div');
+      mainDiv.role  = "listbox";
+
+      for(var i = 0; i < comps.length; i++) {
+        var competitionElement        = document.createElement('p');
+        competitionElement.innerHTML  = comps[i];
+        competitionElement.class      = "center";
+        mainDiv.appendChild(            competitionElement);
+      }
+
+      listArea.appendChild(mainDiv);
+    }
+  }
+
 }
 
 window.customElements.define('mao-account', MaoAccount);
diff --git a/src/reducers/firebase.js b/src/reducers/firebase.js
index b708dbe..1721d31 100644
--- a/src/reducers/firebase.js
+++ b/src/reducers/firebase.js
@@ -17,14 +17,15 @@ import {
 }
 from '../actions/firebase.js';
 
-const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: null, registeredComps: []}, action) => {
+const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: "", userEmail: "", registeredComps: []}, action) => {
   switch (action.type) {
     case AUTH_SUCCESS:
       return {
         ...state,
         initialized:  action.payload,
         authMessage:  action.code,
-        uid:          action.uid
+        uid:          action.uid,
+        userEmail:    action.userEmail
       };
     break;