Added dedicated account page for logging in.

4 files changed, 126 insertions, 4 deletions

diff --git a/src/actions/app.js b/src/actions/app.js
index dedfb49..d58c7ff 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -40,6 +40,9 @@ const loadPage = (page) => (dispatch) => {
     case 'tutor':
       import('../components/mao-tutoring.js');
       break;
+    case 'account':
+      import('../components/mao-account.js');
+      break;
     default:
       page = 'view404';
       import('../components/my-view404.js');
diff --git a/src/actions/firebase.js b/src/actions/firebase.js
index 8cc7d39..becc62e 100644
--- a/src/actions/firebase.js
+++ b/src/actions/firebase.js
@@ -30,6 +30,7 @@ export const signIn  = (_email, _password) => (dispatch) => {
 }
 
 export const authFail = (errorCode) => {
+  alert(errorCode);
   return {
     type:     AUTH_FAIL,
     payload:  false,
@@ -39,7 +40,7 @@ export const authFail = (errorCode) => {
 }
 
 export const authSuccess = (_user) => {
-  alert('authSuccess');
+  alert('Sign In Success');
   return {
     type:     AUTH_SUCCESS,
     payload:  true,
@@ -70,8 +71,6 @@ export const UPDATE_HOURS   = 'UPDATE_HOURS';
 
 export const snapshotHours = () => (dispatch, getState) => {
 
-  alert('running');
-
   const currentState  = getState().firebase;
   if(currentState.initialized) {
     var totalHours;
@@ -96,7 +95,6 @@ export const snapshotHours = () => (dispatch, getState) => {
 }
 
 export const updateHours = (hours, reqHours) => {
-  console.log(reqHours);
   return {
     type:           'UPDATE_HOURS',
     approvedHours:  hours,
diff --git a/src/components/mao-account.js b/src/components/mao-account.js
new file mode 100644
index 0000000..6fb1d3d
--- /dev/null
+++ b/src/components/mao-account.js
@@ -0,0 +1,118 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { html } from '@polymer/lit-element';
+import { PageViewElement } from './page-view-element.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+
+// This element is connected to the Redux store.
+import { store } from '../store.js';
+
+//These are the actions needed by this element.
+import { signIn, signOut, requestHours } from '../actions/firebase.js';
+
+// We are lazy loading its reducer.
+import firebase from '../reducers/firebase.js';
+
+store.addReducers({
+  firebase
+});
+
+// These are the shared styles needed by this element.
+import { SharedStyles }       from './shared-styles.js';
+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`
+      ${SharedStyles}
+      ${ButtonSharedStyles}
+
+      <style>
+
+      .sign-in-card {
+        display: block;
+      }
+
+      .card-actions > paper-button {
+        margin-left:  auto;
+        margin-right: auto;
+        display: block;
+        width: 50%;
+        }
+      }
+      </style>
+
+
+
+      <section>
+
+        <paper-card class="sign-in-card" elevation="0">
+
+          <div class="card-content">
+            <h2 class="underline">Sign In</h2>
+
+            <paper-input label="username" id="emailField">
+            </paper-input>
+
+            <paper-input type="password" label="password" id="passwordField">
+            </paper-input>
+          </div>
+
+          <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>
+
+      </section>
+    `;
+  }
+
+  static get properties() { return {
+    // This is the data from the store.
+    signedIn:       Boolean,
+    authMessage:    String
+  }}
+
+  _stateChanged(state) {
+    this.signedIn       = state.firebase.initialized;
+    this.authMessage    = state.firebase.authMessage;
+  }
+
+  logIn() {
+    var emailElement     = this.shadowRoot.getElementById('emailField');
+    var passwordElement  = this.shadowRoot.getElementById('passwordField');
+
+    const email     = emailElement.value
+                      + "@communityschoolnaples.org";
+    const password  = passwordElement.value;
+
+    store.dispatch(signIn(email,password));
+
+    emailElement.value    = "";
+    passwordElement.value = "";
+  }
+
+}
+
+window.customElements.define('mao-account', MaoAccount);
diff --git a/src/components/mao-app.js b/src/components/mao-app.js
index d346fbc..f1c0c57 100644
--- a/src/components/mao-app.js
+++ b/src/components/mao-app.js
@@ -198,6 +198,7 @@ class MaoApp extends connect(store)(LitElement) {
         <a selected?="${_page === 'home'}" href="/home">Home</a>
         <a selected?="${_page === 'tutor'}" href="/tutor">Tutoring</a>
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
+        <a selected?="${_page === 'account'}" href="/account">Account</a>
       </nav>
     </app-header>
 
@@ -208,6 +209,7 @@ class MaoApp extends connect(store)(LitElement) {
         <a selected?="${_page === 'home'}" href="/home">Home</a>
         <a selected?="${_page === 'tutor'}" href="/tutor">Tutoring</a>
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
+        <a selected?="${_page === 'account'}" href="/account">Account</a>
       </nav>
     </app-drawer>
 
@@ -216,6 +218,7 @@ class MaoApp extends connect(store)(LitElement) {
       <mao-home class="page" active?="${_page === 'home'}"></mao-home>
       <mao-tutoring class="page" active?="${_page === 'tutor'}"></mao-tutoring>
       <mao-competitions class="page" active?="${_page === 'compete'}"></mao-competitions>
+      <mao-account class="page" active?="${_page === 'account'}"></mao-account>
       <my-view404 class="page" active?="${_page === 'view404'}"></my-view404>
     </main>