+Vuex +ElementUI +Pug

- Log on now works, storing user profile in vuex state
- Templates in Pug = awesome

src/app/package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "djs-consulting",
+  "name": "my-prayer-journal",
-  "version": "1.0.0",
+  "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=",
+      "integrity": "sha1-FhdnFMgBeY5Ojyz391KUZ7tKV3E="
-      "dev": true
     },
     "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=",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
-      "dev": true
     },
     "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=",
+      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME="
-      "dev": true
     },
     "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=",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
-      "dev": true
     },
     "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",

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",

src/app/src/App.vue

@@ -1,37 +1,17 @@
-<template>
+<template lang="pug">
-  <div id="app">
+  #app
-    <navigation :auth="auth" />
+    navigation
-    <div id="content" class="container">
+    #content.container
-      <router-view :auth="auth"></router-view>
+      router-view
-    </div>
+    footer
-    <footer>
+      p.text-right: i myPrayerJournal v0.8.0
-      <p class="text-right"><i>myPrayerJournal v0.8.0</i></p>
-    </footer>
-  </div>
 </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
   }

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) => {
+   * Promisified parseHash function
-      if (authResult && authResult.accessToken && authResult.idToken) {
+   */
-        this.setSession(authResult)
+  parseHash () {
-        router.replace('/dashboard')
+    return new Promise((resolve, reject) => {
-      } else if (err) {
+      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
+    localStorage.setItem('user_profile', JSON.stringify({}))
-    this.authNotifier.emit('authChange', false)
     // navigate to the home route
+    store.commit(types.USER_LOGGED_OFF)
     router.replace('/')
   }
 

src/app/src/components/Dashboard.vue

@@ -1,21 +1,23 @@
-<template>
+<template lang="pug">
-  <article>
+  article
-    <page-title title="Your Dashboard" />
+    page-title(:title="title")
-    <p>here you are! {{ JSON.stringify(this.user) }}</p>
+    p here you are!
-  </article>
 </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>

src/app/src/components/Home.vue

@@ -1,22 +1,15 @@
-<template>
+<template lang="pug">
-  <article>
+  article
-    <page-title title="Welcome!" hideOnPage="true" />
+    page-title(title="Welcome!" hideOnPage="true")
-    <div class="row">
+    p &nbsp;
-      <div class="col">
+    p.
-        <p>&nbsp;</p>
+      myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
-        <p>
+      update them as God moves in the situation, and record a final answer received on that request.&nbsp; It will also
-          myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for
+      allow individuals to review their answered prayers.
-          them, update them as God moves in the situation, and record a final answer received on that request.&nbsp; It
+    p.
-          will also allow individuals to review their answered prayers.
+      This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp; If
-        </p>
+      this is something in which you are interested, check back around mid-November 2017 for an update on the
-        <p>
+      development progress.
-          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>
 
 <script>
@@ -24,9 +17,6 @@ import PageTitle from './PageTitle.vue'
 
 export default {
   name: 'home',
-  data () {
-    return {}
-  },
   components: {
     PageTitle
   }

src/app/src/components/Navigation.vue

@@ -1,25 +1,41 @@
-<template>
+<template lang="pug">
-  <b-navbar toggleable type="inverse" variant="inverse" fixed="top">
+  el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
-    <b-nav-toggle target="navCollapse"></b-nav-toggle>
+    el-menu-item(index="/")
-    <b-link class="navbar-brand" :to="{ name: 'Home' }">
+      span(style="font-weight:100;") my
-      <span style="font-weight:100;">my</span><span style="font-weight:600;">Prayer</span><span style="font-weight:700;">Journal</span>
+      span(style="font-weight:600;") Prayer
-    </b-link>
+      span(style="font-weight:700;") Journal
-    <b-collapse is-nav id="navCollapse">
+    el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
-      <b-nav is-nav-bar>
+    el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
-        <b-nav-item v-if="auth.authenticated" :to="{ name: 'Dashboard' }">Dashboard</b-nav-item>
+    el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
-        <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>
 
 <script>
+import { mapState } from 'vuex'
+import AuthService from '@/auth/AuthService'
+
 export default {
   name: 'navigation',
-  props: ['auth'],
+  data () {
-  data: function () {
+    return {
-    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>

src/app/src/components/PageTitle.vue

@@ -1,14 +1,11 @@
-<template>
+<template lang="pug">
-  <h2 v-if="!hideOnPage" class="mpj-page-title" v-html="title"></h2>
+  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`
   },

src/app/src/components/user/LogOn.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script>
-  export default {
+import AuthService from '@/auth/AuthService'
-    name: 'log-on',
+
-    props: ['auth'],
+export default {
-    data () {
+  name: 'log-on',
-      this.auth.handleAuthentication()
+  data () {
-      return {}
+    new AuthService().handleAuthentication(this.$store, this.$router)
-    }
+    return {}
   }
+}
 </script>

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 }
 })

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: {}
+})

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'