From f0815df6642642db3e5063b6800d2ed0f681754c Mon Sep 17 00:00:00 2001
From: Michael Foiani <mfoiani2019@communityschoolnaples.org>
Date: Thu, 26 Jul 2018 00:31:25 -0400
Subject: Created basic login system using firebase and redux.

---
 src/actions/firebase.js    | 30 ++++++++++++++++++++++++++
 src/components/mao-home.js | 54 ++++++++++++++++++++++++++++++++++++++++++++--
 src/firebase.js            | 11 ++++++++++
 src/reducers/firebase.js   | 36 +++++++++++++++++++++++++++++++
 4 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 src/actions/firebase.js
 create mode 100644 src/firebase.js
 create mode 100644 src/reducers/firebase.js

(limited to 'src')

diff --git a/src/actions/firebase.js b/src/actions/firebase.js
new file mode 100644
index 0000000..e13ab10
--- /dev/null
+++ b/src/actions/firebase.js
@@ -0,0 +1,30 @@
+import { firebase } from '../firebase.js';
+
+export const AUTH_FAIL    = 'AUTH_FAIL';
+export const AUTH_SUCCESS = 'AUTH_SUCCESS';
+
+const auth = firebase.auth();
+
+export const signIn  = (_email, _password) => (dispatch) => {
+  auth.signInWithEmailAndPassword(_email, _password).then((user) => {
+    dispatch(authSuccess(user.email));
+  })
+  .catch((error) => {
+    dispatch(authFail(error.code));
+  });
+
+}
+
+export const authFail = (errorCode) => {
+  return {
+    type:     AUTH_FAIL,
+    payload:  false
+  }
+}
+
+export const authSuccess = (email) => {
+  return {
+    type:     AUTH_SUCCESS,
+    payload:  true
+  }
+}
diff --git a/src/components/mao-home.js b/src/components/mao-home.js
index 468677f..f56d858 100644
--- a/src/components/mao-home.js
+++ b/src/components/mao-home.js
@@ -10,11 +10,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 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 } 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';
 
-class MaoHome extends PageViewElement {
+// Import paper elements
+import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-button/paper-button.js';
+
+class MaoHome extends connect(store)(PageViewElement) {
   _render(props) {
     return html`
       ${SharedStyles}
@@ -26,12 +44,44 @@ class MaoHome extends PageViewElement {
       <section>
         <h2>Welcome</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare, aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.</p>
+
+
       </section>
       <section>
-        <p>Vestibulum at est ex. Aenean id ligula id nibh dictum laoreet. Etiam non semper erat. Pellentesque eu justo rhoncus diam vulputate facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat metus ex, vel fringilla massa tincidunt sit amet. Nunc facilisis bibendum tristique. Mauris commodo, dolor vitae dapibus fermentum, odio nibh viverra lorem, eu cursus diam turpis et sapien. Nunc suscipit tortor a ligula tincidunt, id hendrerit tellus sollicitudin.</p>
+        <paper-input label="username" id="emailField">
+          <div slot="suffix">@communityschoolnaples.org</div>
+        </paper-input>
+
+        <paper-input label="password" id="passwordField">
+        </paper-input>
+
+        <paper-button disabled="${this.signedIn}" on-tap="${() => this.doSomething()}">Sign In</paper-button>
+        <paper-button raised on-tap="${() => this.status()}">Status</paper-button>
       </section>
     `;
   }
+
+  static get properties() { return {
+    // This is the data from the store.
+    signedIn: Boolean,
+  }}
+
+  _stateChanged(state) {
+    this.signedIn = state.firebase.initialized;
+  }
+
+  doSomething() {
+    const email     = this.shadowRoot.getElementById('emailField')    .value +
+                      '@communityschoolnaples.org';
+    const password  = this.shadowRoot.getElementById('passwordField') .value;
+
+    store.dispatch(signIn(email,password));
+  }
+
+  status() {
+    alert(this.signedIn);
+  }
+
 }
 
 window.customElements.define('mao-home', MaoHome);
diff --git a/src/firebase.js b/src/firebase.js
new file mode 100644
index 0000000..bf62e37
--- /dev/null
+++ b/src/firebase.js
@@ -0,0 +1,11 @@
+export const firebase = window.firebase;
+// Initialize Firebase
+var config = {
+  apiKey: "AIzaSyC68wOeR88PPiw5VqzUYs7lm4ewyJgHf20",
+  authDomain: "csn-2019-site.firebaseapp.com",
+  databaseURL: "https://csn-2019-site.firebaseio.com",
+  projectId: "csn-2019-site",
+  storageBucket: "csn-2019-site.appspot.com",
+  messagingSenderId: "764071630447"
+};
+firebase.initializeApp(config);
diff --git a/src/reducers/firebase.js b/src/reducers/firebase.js
new file mode 100644
index 0000000..2c7ba56
--- /dev/null
+++ b/src/reducers/firebase.js
@@ -0,0 +1,36 @@
+/**
+@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 { AUTH_FAIL, AUTH_SUCCESS } from '../actions/firebase.js';
+
+const firebase = (state = {initialized: false}, action) => {
+  switch (action.type) {
+    case AUTH_SUCCESS:
+      alert(action.payload);
+      return {
+        ...state,
+        initialized:  action.payload
+      };
+      break;
+
+    case AUTH_FAIL:
+      alert(action.payload);
+      return {
+        ...state,
+        initialized:  action.payload
+      };
+      break;
+
+    default:
+      return state;
+  }
+};
+
+export default firebase;
-- 
cgit v1.2.3-70-g09d2