From 196db30cc5a2bb127e6393417e7806584ec48a70 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel.summers.2415@gmail.com>
Date: Sat, 5 Aug 2017 22:48:09 -0500
Subject: [PATCH] +Vuex +ElementUI +Pug

- Log on now works, storing user profile in vuex state
- Templates in Pug = awesome
---
 src/app/package-lock.json             | 349 +++++++++++++++++++++++++-
 src/app/package.json                  |   7 +-
 src/app/src/App.vue                   |  34 +--
 src/app/src/api/Api.js                |   0
 src/app/src/auth/AuthService.js       |  69 +++--
 src/app/src/components/Dashboard.vue  |  20 +-
 src/app/src/components/Home.vue       |  34 +--
 src/app/src/components/Navigation.vue |  52 ++--
 src/app/src/components/PageTitle.vue  |   7 +-
 src/app/src/components/user/LogOn.vue |  15 +-
 src/app/src/main.js                   |   8 +-
 src/app/src/store/index.js            |  31 +++
 src/app/src/store/mutation-types.js   |   2 +
 13 files changed, 506 insertions(+), 122 deletions(-)
 create mode 100644 src/app/src/api/Api.js
 create mode 100644 src/app/src/store/index.js
 create mode 100644 src/app/src/store/mutation-types.js

diff --git a/src/app/package-lock.json b/src/app/package-lock.json
index c2236bd..e047a2e 100644
--- a/src/app/package-lock.json
+++ b/src/app/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "djs-consulting",
-  "version": "1.0.0",
+  "name": "my-prayer-journal",
+  "version": "0.8.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -51,6 +51,21 @@
         }
       }
     },
+    "acorn-globals": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
+      "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
+      "requires": {
+        "acorn": "4.0.13"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c="
+        }
+      }
+    },
     "acorn-jsx": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
@@ -236,6 +251,11 @@
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
@@ -295,6 +315,11 @@
       "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.6.9.tgz",
+      "integrity": "sha1-qDCdqouDQhzb1GKOAm1quyUZLTQ="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -581,6 +606,11 @@
         "babel-types": "6.25.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz",
+      "integrity": "sha1-rOscNzWIJ54nVeoc/TXCI5T9M/g="
+    },
     "babel-helpers": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
@@ -1572,6 +1602,14 @@
         "supports-color": "4.2.1"
       }
     },
+    "character-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+      "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
+      "requires": {
+        "is-regex": "1.0.4"
+      }
+    },
     "chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -1911,6 +1949,22 @@
         }
       }
     },
+    "constantinople": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.0.tgz",
+      "integrity": "sha1-dWnKqKo/jVk11i4fqW+fcCzYHHk=",
+      "requires": {
+        "acorn": "3.3.0",
+        "is-expression": "2.1.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+        }
+      }
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -2551,6 +2605,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.0.tgz",
+      "integrity": "sha512-Hm4+NyDQGgH3oYhKqR0gd99veBBZpnEUNoEfFl+3PRkQL+LKGJEBgqimeofAWzUn6aBzcaYPJrRigto/WfDzTg=="
+    },
     "defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -2663,6 +2722,11 @@
         "isarray": "1.0.0"
       }
     },
+    "doctypes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk="
+    },
     "dom-converter": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
@@ -2834,6 +2898,17 @@
       "integrity": "sha1-0OAmc1dUdwkBrjAaIWZMukXZL30=",
       "dev": true
     },
+    "element-ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-1.4.1.tgz",
+      "integrity": "sha512-4jZu41iMuV8Semz0MG7nd8HIicyXlMJY923NvuIXoM3Q3llnwpwBVBqaPAgL3VrRnwzLKxyR/GjxxQDBqf/bvQ==",
+      "requires": {
+        "async-validator": "1.6.9",
+        "babel-helper-vue-jsx-merge-props": "2.0.2",
+        "deepmerge": "1.5.0",
+        "throttle-debounce": "1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
@@ -3899,8 +3974,7 @@
     "function-bind": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.0.tgz",
-      "integrity": "sha1-FhdnFMgBeY5Ojyz391KUZ7tKV3E=",
-      "dev": true
+      "integrity": "sha1-FhdnFMgBeY5Ojyz391KUZ7tKV3E="
     },
     "generate-function": {
       "version": "2.0.0",
@@ -4024,8 +4098,7 @@
     "graceful-readlink": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
-      "dev": true
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
     },
     "growl": {
       "version": "1.9.2",
@@ -4410,7 +4483,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.1.tgz",
       "integrity": "sha1-hGFzP1OLCDfJNh45qauelwTcLyg=",
-      "dev": true,
       "requires": {
         "function-bind": "1.1.0"
       }
@@ -4942,6 +5014,22 @@
         "is-primitive": "2.0.0"
       }
     },
+    "is-expression": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-2.1.0.tgz",
+      "integrity": "sha1-kb6dR968/vB3l36XIr5tz7RGXvA=",
+      "requires": {
+        "acorn": "3.3.0",
+        "object-assign": "4.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+        }
+      }
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -5038,11 +5126,24 @@
       "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
       "dev": true
     },
+    "is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
+    },
     "is-property": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
       "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
     },
+    "is-regex": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
+      "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
+      "requires": {
+        "has": "1.0.1"
+      }
+    },
     "is-resolvable": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.0.0.tgz",
@@ -5228,6 +5329,11 @@
         "nopt": "3.0.6"
       }
     },
+    "js-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -5334,6 +5440,15 @@
         }
       }
     },
+    "jstransformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+      "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
+      "requires": {
+        "is-promise": "2.1.0",
+        "promise": "7.3.1"
+      }
+    },
     "karma": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/karma/-/karma-1.7.0.tgz",
@@ -6950,8 +7065,7 @@
     "path-parse": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
-      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
-      "dev": true
+      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -9030,6 +9144,14 @@
       "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
       "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74="
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "2.0.6"
+      }
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -9095,6 +9217,180 @@
         "randombytes": "2.0.5"
       }
     },
+    "pug": {
+      "version": "2.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.0-rc.2.tgz",
+      "integrity": "sha1-B4RVJ3kKssa+Z9z16x8xgECB8Eo=",
+      "requires": {
+        "pug-code-gen": "1.1.1",
+        "pug-filters": "2.1.3",
+        "pug-lexer": "3.1.0",
+        "pug-linker": "3.0.1",
+        "pug-load": "2.0.7",
+        "pug-parser": "3.0.0",
+        "pug-runtime": "2.0.3",
+        "pug-strip-comments": "1.0.2"
+      }
+    },
+    "pug-attrs": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.2.tgz",
+      "integrity": "sha1-i+KyIlVo/6ddG4Zpgr/59BEa/8s=",
+      "requires": {
+        "constantinople": "3.1.0",
+        "js-stringify": "1.0.2",
+        "pug-runtime": "2.0.3"
+      }
+    },
+    "pug-code-gen": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-1.1.1.tgz",
+      "integrity": "sha1-HPcnRO8qA56uajNAyqoRBYcSWOg=",
+      "requires": {
+        "constantinople": "3.1.0",
+        "doctypes": "1.1.0",
+        "js-stringify": "1.0.2",
+        "pug-attrs": "2.0.2",
+        "pug-error": "1.3.2",
+        "pug-runtime": "2.0.3",
+        "void-elements": "2.0.1",
+        "with": "5.1.1"
+      }
+    },
+    "pug-error": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.2.tgz",
+      "integrity": "sha1-U659nSm7A89WRJOgJhCfVMR/XyY="
+    },
+    "pug-filters": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-2.1.3.tgz",
+      "integrity": "sha1-1ZdnoiDeeX3XVUifZoNM+aqDqlQ=",
+      "requires": {
+        "clean-css": "3.4.28",
+        "constantinople": "3.1.0",
+        "jstransformer": "1.0.0",
+        "pug-error": "1.3.2",
+        "pug-walk": "1.1.3",
+        "resolve": "1.3.3",
+        "uglify-js": "2.8.29"
+      },
+      "dependencies": {
+        "clean-css": {
+          "version": "3.4.28",
+          "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
+          "integrity": "sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=",
+          "requires": {
+            "commander": "2.8.1",
+            "source-map": "0.4.4"
+          }
+        },
+        "commander": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
+          "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
+          "requires": {
+            "graceful-readlink": "1.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        },
+        "uglify-js": {
+          "version": "2.8.29",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+          "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
+          "requires": {
+            "source-map": "0.5.6",
+            "uglify-to-browserify": "1.0.2",
+            "yargs": "3.10.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.5.6",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+              "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI="
+            }
+          }
+        }
+      }
+    },
+    "pug-lexer": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-3.1.0.tgz",
+      "integrity": "sha1-/QhzdtSmdbT1n4/vQiiDQ06VgaI=",
+      "requires": {
+        "character-parser": "2.2.0",
+        "is-expression": "3.0.0",
+        "pug-error": "1.3.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c="
+        },
+        "is-expression": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz",
+          "integrity": "sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=",
+          "requires": {
+            "acorn": "4.0.13",
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
+    "pug-linker": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.1.tgz",
+      "integrity": "sha1-uj+P8hPKjzowSFm0T+0Tynud+hk=",
+      "requires": {
+        "pug-error": "1.3.2",
+        "pug-walk": "1.1.3"
+      }
+    },
+    "pug-load": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.7.tgz",
+      "integrity": "sha1-Ux0MbhFUYBDphGMNA99AY2fS3nc=",
+      "requires": {
+        "object-assign": "4.1.1",
+        "pug-walk": "1.1.3"
+      }
+    },
+    "pug-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-3.0.0.tgz",
+      "integrity": "sha1-N8YZ3YAPZCGHzk1s4aFkzddUh6M=",
+      "requires": {
+        "pug-error": "1.3.2",
+        "token-stream": "0.0.1"
+      }
+    },
+    "pug-runtime": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.3.tgz",
+      "integrity": "sha1-mBYmB7D86eJU1CfzOYelrucWi9o="
+    },
+    "pug-strip-comments": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.2.tgz",
+      "integrity": "sha1-0xOvoBvMN0mA4TmeI+vy65vchRM=",
+      "requires": {
+        "pug-error": "1.3.2"
+      }
+    },
+    "pug-walk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.1.3.tgz",
+      "integrity": "sha1-181bI9s8qHxjbIaglz+c2OAwQ2w="
+    },
     "punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
@@ -9592,7 +9888,6 @@
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.3.3.tgz",
       "integrity": "sha1-ZVkHw0aahoDcLeOidaj91paR8OU=",
-      "dev": true,
       "requires": {
         "path-parse": "1.0.5"
       }
@@ -10421,6 +10716,11 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
     },
+    "throttle-debounce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.0.1.tgz",
+      "integrity": "sha1-2tD+Ew+drzcZ/eoz3Dao5rp/MLU="
+    },
     "throttleit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -10487,6 +10787,11 @@
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
       "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
     },
+    "token-stream": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
+      "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo="
+    },
     "toposort": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.3.tgz",
@@ -10799,8 +11104,7 @@
     "void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
-      "dev": true
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
     },
     "vue": {
       "version": "2.4.2",
@@ -10921,6 +11225,11 @@
       "integrity": "sha512-j3TBDtjqz7pC9XUzeSeqF5oekqPahxyUHsdG+kZKDH/V/DTexq5inYdLGstnqCUljoLC9LTj3H/5hmyToeSd1A==",
       "dev": true
     },
+    "vuex": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-2.3.1.tgz",
+      "integrity": "sha1-zejpl8H5lXcZvH3qFU+appHZgaY="
+    },
     "watchpack": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz",
@@ -11217,6 +11526,22 @@
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
       "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0="
     },
+    "with": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz",
+      "integrity": "sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=",
+      "requires": {
+        "acorn": "3.3.0",
+        "acorn-globals": "3.1.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+        }
+      }
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
diff --git a/src/app/package.json b/src/app/package.json
index c5d2572..e06ef02 100644
--- a/src/app/package.json
+++ b/src/app/package.json
@@ -14,11 +14,12 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "EventEmitter": "^1.0.0",
     "auth0-js": "^8.8.0",
-    "bootstrap-vue": "^0.18.0",
+    "element-ui": "^1.4.1",
+    "pug": "^2.0.0-rc.2",
     "vue": "^2.3.3",
-    "vue-router": "^2.6.0"
+    "vue-router": "^2.6.0",
+    "vuex": "^2.3.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/src/app/src/App.vue b/src/app/src/App.vue
index 0da62e1..ea4fe4f 100644
--- a/src/app/src/App.vue
+++ b/src/app/src/App.vue
@@ -1,37 +1,17 @@
-<template>
-  <div id="app">
-    <navigation :auth="auth" />
-    <div id="content" class="container">
-      <router-view :auth="auth"></router-view>
-    </div>
-    <footer>
-      <p class="text-right"><i>myPrayerJournal v0.8.0</i></p>
-    </footer>
-  </div>
+<template lang="pug">
+  #app
+    navigation
+    #content.container
+      router-view
+    footer
+      p.text-right: i myPrayerJournal v0.8.0
 </template>
 
 <script>
-import AuthService from './auth/AuthService'
 import Navigation from './components/Navigation.vue'
 
-const auth = new AuthService()
-const { login, logout, authenticated, authNotifier } = auth
-
 export default {
   name: 'app',
-  data: function () {
-    authNotifier.on('authChange', authState => {
-      this.authenticated = authState.authenticated
-    })
-    return {
-      auth,
-      authenticated
-    }
-  },
-  methods: {
-    login,
-    logout
-  },
   components: {
     Navigation
   }
diff --git a/src/app/src/api/Api.js b/src/app/src/api/Api.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/src/auth/AuthService.js b/src/app/src/auth/AuthService.js
index a84f743..c71717f 100644
--- a/src/app/src/auth/AuthService.js
+++ b/src/app/src/auth/AuthService.js
@@ -1,11 +1,9 @@
 import auth0 from 'auth0-js'
 import { AUTH_CONFIG } from './auth0-variables'
-import EventEmitter from 'EventEmitter'
-import router from './../router'
+
+import * as types from '@/store/mutation-types'
 
 export default class AuthService {
-  authenticated = this.isAuthenticated()
-  authNotifier = new EventEmitter()
 
   constructor () {
     this.login = this.login.bind(this)
@@ -20,24 +18,62 @@ export default class AuthService {
     redirectUri: AUTH_CONFIG.callbackUrl,
     audience: `https://${AUTH_CONFIG.domain}/userinfo`,
     responseType: 'token id_token',
-    scope: 'openid'
+    scope: 'openid profile email'
   })
 
   login () {
     this.auth0.authorize()
   }
 
-  handleAuthentication () {
-    this.auth0.parseHash((err, authResult) => {
-      if (authResult && authResult.accessToken && authResult.idToken) {
-        this.setSession(authResult)
-        router.replace('/dashboard')
-      } else if (err) {
+  /**
+   * Promisified parseHash function
+   */
+  parseHash () {
+    return new Promise((resolve, reject) => {
+      this.auth0.parseHash((err, authResult) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(authResult)
+        }
+      })
+    })
+  }
+
+  /**
+   * Promisified userInfo function
+   *
+   * @param token The auth token from the login result
+   */
+  userInfo (token) {
+    return new Promise((resolve, reject) => {
+      this.auth0.client.userInfo(token, (err, user) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(user)
+        }
+      })
+    })
+  }
+
+  handleAuthentication (store, router) {
+    this.parseHash()
+      .then(authResult => {
+        if (authResult && authResult.accessToken && authResult.idToken) {
+          this.setSession(authResult)
+          this.userInfo(authResult.accessToken)
+            .then(user => {
+              store.commit(types.USER_LOGGED_ON, user)
+              router.replace('/dashboard')
+            })
+        }
+      })
+      .catch(err => {
         router.replace('/')
         console.log(err)
         alert(`Error: ${err.error}. Check the console for further details.`)
-      }
-    })
+      })
   }
 
   setSession (authResult) {
@@ -48,17 +84,16 @@ export default class AuthService {
     localStorage.setItem('access_token', authResult.accessToken)
     localStorage.setItem('id_token', authResult.idToken)
     localStorage.setItem('expires_at', expiresAt)
-    this.authNotifier.emit('authChange', { authenticated: true })
   }
 
-  logout () {
+  logout (store, router) {
     // Clear access token and ID token from local storage
     localStorage.removeItem('access_token')
     localStorage.removeItem('id_token')
     localStorage.removeItem('expires_at')
-    this.userProfile = null
-    this.authNotifier.emit('authChange', false)
+    localStorage.setItem('user_profile', JSON.stringify({}))
     // navigate to the home route
+    store.commit(types.USER_LOGGED_OFF)
     router.replace('/')
   }
 
diff --git a/src/app/src/components/Dashboard.vue b/src/app/src/components/Dashboard.vue
index e5c4203..36c86e0 100644
--- a/src/app/src/components/Dashboard.vue
+++ b/src/app/src/components/Dashboard.vue
@@ -1,21 +1,23 @@
-<template>
-  <article>
-    <page-title title="Your Dashboard" />
-    <p>here you are! {{ JSON.stringify(this.user) }}</p>
-  </article>
+<template lang="pug">
+  article
+    page-title(:title="title")
+    p here you are!
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import PageTitle from './PageTitle'
 
 export default {
   name: 'dashboard',
-  props: ['user'],
-  data () {
-    return {}
-  },
   components: {
     PageTitle
+  },
+  computed: {
+    title () {
+      return `${this.user.given_name}'s Dashboard`
+    },
+    ...mapState(['user'])
   }
 }
 </script>
diff --git a/src/app/src/components/Home.vue b/src/app/src/components/Home.vue
index 7dd756f..e8edb8e 100644
--- a/src/app/src/components/Home.vue
+++ b/src/app/src/components/Home.vue
@@ -1,22 +1,15 @@
-<template>
-  <article>
-    <page-title title="Welcome!" hideOnPage="true" />
-    <div class="row">
-      <div class="col">
-        <p>&nbsp;</p>
-        <p>
-          myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for
-          them, update them as God moves in the situation, and record a final answer received on that request.&nbsp; It
-          will also allow individuals to review their answered prayers.
-        </p>
-        <p>
-          This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp;
-          If this is something in which you are interested, check back around mid-November 2017 for an update on the
-          development progress.
-        </p>
-      </div>
-    </div>
-  </article>
+<template lang="pug">
+  article
+    page-title(title="Welcome!" hideOnPage="true")
+    p &nbsp;
+    p.
+      myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
+      update them as God moves in the situation, and record a final answer received on that request.&nbsp; It will also
+      allow individuals to review their answered prayers.
+    p.
+      This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp; If
+      this is something in which you are interested, check back around mid-November 2017 for an update on the
+      development progress.
 </template>
 
 <script>
@@ -24,9 +17,6 @@ import PageTitle from './PageTitle.vue'
 
 export default {
   name: 'home',
-  data () {
-    return {}
-  },
   components: {
     PageTitle
   }
diff --git a/src/app/src/components/Navigation.vue b/src/app/src/components/Navigation.vue
index deb0aa1..03aaf26 100644
--- a/src/app/src/components/Navigation.vue
+++ b/src/app/src/components/Navigation.vue
@@ -1,25 +1,41 @@
-<template>
-  <b-navbar toggleable type="inverse" variant="inverse" fixed="top">
-    <b-nav-toggle target="navCollapse"></b-nav-toggle>
-    <b-link class="navbar-brand" :to="{ name: 'Home' }">
-      <span style="font-weight:100;">my</span><span style="font-weight:600;">Prayer</span><span style="font-weight:700;">Journal</span>
-    </b-link>
-    <b-collapse is-nav id="navCollapse">
-      <b-nav is-nav-bar>
-        <b-nav-item v-if="auth.authenticated" :to="{ name: 'Dashboard' }">Dashboard</b-nav-item>
-        <b-nav-item v-if="auth.authenticated" @click="auth.logout()">Log Off</b-nav-item>
-        <b-nav-item v-if="!auth.authenticated" @click="auth.login()">Log On</b-nav-item>
-      </b-nav>
-    </b-collapse>
-  </b-navbar>
+<template lang="pug">
+  el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
+    el-menu-item(index="/")
+      span(style="font-weight:100;") my
+      span(style="font-weight:600;") Prayer
+      span(style="font-weight:700;") Journal
+    el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
+    el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
+    el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import AuthService from '@/auth/AuthService'
+
 export default {
   name: 'navigation',
-  props: ['auth'],
-  data: function () {
-    return { }
-  }
+  data () {
+    return {
+      auth0: new AuthService()
+    }
+  },
+  methods: {
+    logOn () {
+      this.auth0.login()
+    },
+    logOff () {
+      this.auth0.logout(this.$store, this.$router)
+    }
+  },
+  computed: mapState(['isAuthenticated'])
 }
 </script>
+
+<style scoped>
+.mpj-top-nav {
+  position: fixed;
+  top: 0px;
+  width: 100%;
+}
+</style>
diff --git a/src/app/src/components/PageTitle.vue b/src/app/src/components/PageTitle.vue
index 01bd2d3..df8aace 100644
--- a/src/app/src/components/PageTitle.vue
+++ b/src/app/src/components/PageTitle.vue
@@ -1,14 +1,11 @@
-<template>
-  <h2 v-if="!hideOnPage" class="mpj-page-title" v-html="title"></h2>
+<template lang="pug">
+  h2.mpj-page-title(v-if="!hideOnPage" v-html="title")
 </template>
 
 <script>
 export default {
   name: 'page-title',
   props: ['title', 'hideOnPage'],
-  data () {
-    return {}
-  },
   created () {
     document.title = `${this.title} « myPrayerJournal`
   },
diff --git a/src/app/src/components/user/LogOn.vue b/src/app/src/components/user/LogOn.vue
index eff3851..9cc04ea 100644
--- a/src/app/src/components/user/LogOn.vue
+++ b/src/app/src/components/user/LogOn.vue
@@ -3,12 +3,13 @@
 </template>
 
 <script>
-  export default {
-    name: 'log-on',
-    props: ['auth'],
-    data () {
-      this.auth.handleAuthentication()
-      return {}
-    }
+import AuthService from '@/auth/AuthService'
+
+export default {
+  name: 'log-on',
+  data () {
+    new AuthService().handleAuthentication(this.$store, this.$router)
+    return {}
   }
+}
 </script>
diff --git a/src/app/src/main.js b/src/app/src/main.js
index be1eb82..7bef638 100644
--- a/src/app/src/main.js
+++ b/src/app/src/main.js
@@ -1,18 +1,22 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import BootstrapVue from 'bootstrap-vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-default/index.css'
+
 import App from './App'
 import router from './router'
+import store from './store'
 
 Vue.config.productionTip = false
 
-Vue.use(BootstrapVue)
+Vue.use(ElementUI)
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  store,
   template: '<App/>',
   components: { App }
 })
diff --git a/src/app/src/store/index.js b/src/app/src/store/index.js
new file mode 100644
index 0000000..199ba50
--- /dev/null
+++ b/src/app/src/store/index.js
@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import AuthService from '@/auth/AuthService'
+
+import * as types from './mutation-types'
+
+Vue.use(Vuex)
+
+this.auth0 = new AuthService()
+
+export default new Vuex.Store({
+  state: {
+    user: JSON.parse(localStorage.getItem('user_profile') || '{}'),
+    isAuthenticated: this.auth0.isAuthenticated()
+  },
+  mutations: {
+    [types.USER_LOGGED_ON] (state, user) {
+      localStorage.setItem('user_profile', JSON.stringify(user))
+      state.user = user
+      state.isAuthenticated = true
+    },
+    [types.USER_LOGGED_OFF] (state) {
+      state.user = {}
+      state.isAuthenticated = false
+    }
+  },
+  actions: {},
+  getters: {},
+  modules: {}
+})
diff --git a/src/app/src/store/mutation-types.js b/src/app/src/store/mutation-types.js
new file mode 100644
index 0000000..6176026
--- /dev/null
+++ b/src/app/src/store/mutation-types.js
@@ -0,0 +1,2 @@
+export const USER_LOGGED_OFF = 'user-logged-out'
+export const USER_LOGGED_ON = 'user-logged-on'