Updated docs/README; version bump

So long alpha - hello, beta!

README.md

@@ -1,7 +1,11 @@
 # myPrayerJournal
 
+## About myPrayerJournal
+
 Journaling has a long history; it helps people remember what happened, and the act of writing helps people think about what happened and process it. A prayer journal is not a new concept; it helps you keep track of the requests for which you've prayed, you can use it to pray over things repeatedly, and you can write the result when the answer comes _(or it was "no")_.
 
-This is borne of out of a personal desire I had to have something that would help me with my prayer life. When it's time to pray, it's not really time to use an app, so the design goal here is to keep it simple and unobtrusive. It will also help eliminate some of the downsides to a paper prayer journal, like not remembering whether you've prayed for a request, or running out of room to write another update on one.
+myPrayerJournal was borne of out of a personal desire I (Daniel) had to have something that would help me with my prayer life. When it's time to pray, it's not really time to use an app, so the design goal here is to keep it simple and unobtrusive. It will also help eliminate some of the downsides to a paper prayer journal, like not remembering whether you've prayed for a request, or running out of room to write another update on one.
 
-It is still a work-in-progress (WIP). It will eventually be hosted at <https://prayerjournal.me>, and will be available for public use.
+## Futher Reading
+
+The documentation for the site is at <https://danieljsummers.github.io/myPrayerJournal/>.

docs/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-architect

docs/index.md

@@ -0,0 +1,49 @@
+# Documentation
+
+## About myPrayerJournal
+
+Journaling has a long history; it helps people remember what happened, and the act of writing helps people think about what happened and process it. A prayer journal is not a new concept; it helps you keep track of the requests for which you've prayed, you can use it to pray over things repeatedly, and you can write the result when the answer comes _(or it was "no")_.
+
+myPrayerJournal was borne of out of a personal desire I (Daniel) had to have something that would help me with my prayer life. When it's time to pray, it's not really time to use an app, so the design goal here is to keep it simple and unobtrusive. It will also help eliminate some of the downsides to a paper prayer journal, like not remembering whether you've prayed for a request, or running out of room to write another update on one.
+
+## Finding the Site
+
+The application is at <https://prayerjournal.me>.
+
+## Signing Up
+
+myPrayerJournal uses login services using Google or Microsoft accounts. The only information the application stores in its database is your user Id token it receives from these services, so there are no permissions you should have to accept from these provider other than establishing that you can log on with that account. Because of this, you'll want to pick the same one each time; the tokens between the two accounts are different, even if you use the same e-mail address to log on to both.
+
+## Your Prayer Journal
+
+Your current requests will be presented in three columns (or two or one, depending on the size of your screen or device). Each request is in its own card, and the buttons at the top of each card apply to that request. The last line of each request also tells you how long it has been since anything has been done on that request. Any time you see something like "a few minutes ago," you can hover over that to see the actual date/time the action was taken.
+
+## Adding a Request
+
+To add a request, click the "Add a New Request" button at the top of your journal. Then, enter the text of the request as you see fit; there is no right or wrong way, and you are the only person who will see the text you enter. When you save the request, it will go to the bottom of the list of requests.
+
+## Praying for Requests
+
+The first button for each request has a checkmark icon; clicking this button will mark the request as "Prayed" and move it to the bottom of the list. This allows you, if you're praying through your requests, to start at the top left (with the request that it's been the longest since you've prayed) and click the button as you pray; when the request goes to the bottom of the list, the next-least-recently-prayed request will take the top spot.
+
+## Editing Requests
+
+The second button for each request has a pencil icon. This allows you to edit the text of the request, pretty much the same way you entered it; it starts with the current text, and you can add to it, modify it, or completely replace it. By default, updates will go in with an "Updated" status; you have the option to also mark this update as "Prayed" or "Answered." Answered requests will drop off the journal list.
+
+## Adding Notes
+
+The third button for each request has an icon that looks like a piece of paper with writing; this lets you record notes about the request. If there is something you want to record that doesn't change the text of the request, this is the place to do it. For example, you may be praying for a long-term health issue, and that person tells you that their status is the same; or, you may want to record something God said to you while you were praying for that request.
+
+## Viewing a Request and Its History
+
+myPrayerJournal tracks all of the actions related to a request; the fourth button, with the magnifying glass icon, will show you the entire history, including the text as it changed, and all the times "Prayed" was recorded.
+
+## Answered Requests
+
+Next to "Journal" on the top navigation is the word "Answered." This page lists all answered requests, from most recent to least recent, along with the text of the request at the time it was marked as answered. It will also show you when it was marked answered. The button at the bottom of each request, with the magnifying glass and the words "Show Full Request", link to a page that shows that request's complete history and notes, along with a few statistics about that request. The history and notes are listed from most recent to least recent; if you want to read it chronologically, just press the "End" key on your keyboard and read it from the bottom up.
+
+## Final Notes
+
+- myPrayerJournal is currently in public beta. If you encounter errors, please [file an issue on GitHub](https://github.com/danieljsummers/myPrayerJournal/issues) with as much detail as possible. You can also browse the list of issues to see what has been done and what is still left to do.
+- Prayer requests and their history are securely backed up nightly along with other Bit Badger Solutions data.
+- Prayer changes things - most of all, the one doing the praying. I pray that this tool enables you to deepen and strengthen your prayer life.

src/api/package.json

@@ -1,10 +1,10 @@
 {
   "name": "my-prayer-journal-api",
   "private": true,
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Server API for myPrayerJournal",
   "main": "index.js",
-  "author": "Daniel J. Summers <daniel@djs-consulting.com>",
+  "author": "Daniel J. Summers <daniel@bitbadger.solutions>",
   "license": "MIT",
   "dependencies": {
     "chalk": "^2.1.0",

src/api/src/db/ddl.js

@@ -46,6 +46,17 @@ const ddl = [
         PRIMARY KEY ("requestId", "asOf"));
       COMMENT ON TABLE mpj.history IS 'Request update history'`
   },
+  {
+    name: 'note Table',
+    check: tableSql('note'),
+    fix: `
+      CREATE TABLE mpj.note (
+        "requestId" varchar(25) NOT NULL REFERENCES mpj.request,
+        "asOf" bigint NOT NULL,
+        "notes" text NOT NULL,
+        PRIMARY KEY ("requestId", "asOf"));
+      COMMENT ON TABLE mpj.note IS 'Notes regarding a request'`
+  },
   {
     name: 'request.userId Index',
     check: indexSql('request', 'idx_request_userId'),

src/api/src/db/request.js

@@ -18,21 +18,41 @@ const requestNotFound = {
 }
 
 export default function (pool) {
+  
+  /**
+   * Retrieve basic information about a single request
+   * @param {string} requestId The Id of the request to retrieve
+   * @param {string} userId The Id of the user to whom the request belongs
+   */
+  let retrieveRequest = (requestId, userId) =>
+    pool.query(`
+      SELECT "requestId", "enteredOn"
+        FROM mpj.request
+      WHERE "requestId" = $1
+        AND "userId" = $2`,
+      [ requestId, userId ])
+  
   return {
     /**
      * Add a history entry for this request
-     * @param {string} requestId The Id of the request
+     * @param {string} userId The Id of the user to whom this request belongs
+     * @param {string} requestId The Id of the request to which the update applies
      * @param {string} status The status for this history entry
      * @param {string} updateText The updated text for the request (pass blank if no update)
+     * @return {number} 404 if the request is not found or does not belong to the given user, 204 if successful
      */
-    addHistory: async (requestId, status, updateText) => {
+    addHistory: async (userId, requestId, status, updateText) => {
-      const asOf = Date.now()
+      const req = retrieveRequest(requestId, userId)
+      if (req.rowCount === 0) {
+        return 404
+      }
       await pool.query(`
         INSERT INTO mpj.history
           ("requestId", "asOf", "status", "text")
         VALUES
           ($1, $2, $3, NULLIF($4, ''))`,
-      [ requestId, asOf, status, updateText ])
+        [ requestId, Date.now(), status, updateText ])
+      return 204
     },
 
     /**
@@ -68,6 +88,39 @@ export default function (pool) {
       })
     },
 
+    /**
+     * Add a note about a prayer request
+     * @param {string} userId The Id of the user to whom the request belongs
+     * @param {string} requestId The Id of the request to which the note applies
+     * @param {string} note The notes to add
+     * @return {number} 404 if the request is not found or does not belong to the given user, 204 if successful
+     */
+    addNote: async (userId, requestId, note) => {
+      const req = retrieveRequest(requestId, userId)
+      if (req.rowCount === 0) {
+        return 404
+      }
+      await pool.query(`
+        INSERT INTO mpj.note
+          ("requestId", "asOf", "notes")
+        VALUES
+          ($1, $2, $3)`,
+        [ requestId, Date.now(), note ])
+      return 204
+    },
+
+    /**
+     * Get all answered requests with their text as of the "Answered" status
+     * @param {string} userId The Id of the user for whom requests should be retrieved
+     * @return All requests
+     */
+    answered: async (userId) => 
+      (await pool.query(`${currentRequestSql}
+        WHERE "userId" = $1
+          AND "lastStatus" = 'Answered'
+        ORDER BY "asOf" DESC`,
+        [ userId ])).rows,
+
     /**
      * Get the "current" version of a request by its Id
      * @param {string} requestId The Id of the request to retrieve
@@ -89,12 +142,7 @@ export default function (pool) {
      * @return The request, or a request-like object indicating that the request was not found
      */
     fullById: async (userId, requestId) => {
-      const reqResults = await pool.query(`
+      const reqResults = await retrieveRequest(requestId, userId)
-        SELECT "requestId", "enteredOn"
-          FROM mpj.request
-         WHERE "requestId" = $1
-           AND "userId" = $2`,
-        [ requestId, userId ])
       if (0 === reqResults.rowCount) {
         return requestNotFound
       }
@@ -114,7 +162,27 @@ export default function (pool) {
      * @param {string} userId The Id of the user
      * @return The requests that make up the current journal
      */
-    journal: async userId => (await pool.query(`${journalSql} ORDER BY "asOf"`, [ userId ])).rows
+    journal: async userId => (await pool.query(`${journalSql} ORDER BY "asOf"`, [ userId ])).rows,
+
+    /**
+     * Get the notes for a request, most recent first
+     * @param {string} userId The Id of the user to whom the request belongs
+     * @param {string} requestId The Id of the request whose notes should be retrieved
+     * @return The notes for the request
+     */
+    notesById: async (userId, requestId) => {
+      const reqResults = await retrieveRequest(requestId, userId)
+      if (0 === reqResults.rowCount) {
+        return requestNotFound
+      }
+      const notes = await pool.query(`
+        SELECT "asOf", "notes"
+          FROM mpj.note
+         WHERE "requestId" = $1
+         ORDER BY "asOf" DESC`,
+        [ requestId ])
+      return notes.rows
+    }
     
   }
 }

src/api/src/routes/request.js

@@ -16,8 +16,13 @@ export default function (checkJwt) {
     // Add a request history entry (prayed, updated, answered, etc.)
     .post('/:id/history', checkJwt, async (ctx, next) => {
       const body = ctx.request.body
-      await db.request.addHistory(ctx.params.id, body.status, body.updateText)
+      ctx.response.status = await db.request.addHistory(ctx.state.user.sub, ctx.params.id, body.status, body.updateText)
-      ctx.response.status = 204
+      await next()
+    })
+    // Add a note to a request
+    .post('/:id/note', checkJwt, async (ctx, next) => {
+      const body = ctx.request.body
+      ctx.response.status = await db.request.addNote(ctx.state.user.sub, ctx.params.id, body.notes)
       await next()
     })
     // Get a journal-style request by its Id
@@ -40,12 +45,35 @@ export default function (checkJwt) {
       }
       await next()
     })
-    // Get the least-recently-updated request (used for the "pray through the journal" feature)
+    // Get the notes for a request
-    .get('/:id/oldest', checkJwt, async (ctx, next) => {
+    .get('/:id/notes', checkJwt, async (ctx, next) => {
-      ctx.body = await db.request.oldest(ctx.state.user.sub)
+      const notes = await db.request.notesById(ctx.state.user.sub, ctx.params.id)
+      if (notes.text && 'Not Found' === notes.text) {
+        ctx.response.status = 404
+      } else {
+        ctx.body = notes
+        ctx.response.status = 200
+      }
+      await next()
+    })
+    // Get a complete request; equivalent to full + notes
+    .get('/:id/complete', checkJwt, async (ctx, next) => {
+      const req = await db.request.fullById(ctx.state.user.sub, ctx.params.id)
+      if ('Not Found' === req.text) {
+        ctx.response.status = 404
+      } else {
+        ctx.response.status = 200
+        req.notes = await db.request.notesById(ctx.state.user.sub, ctx.params.id)
+        ctx.body = req
+      }
+      await next()
+    })
+    // Get all answered requests
+    .get('/answered', checkJwt, async (ctx, next) => {
+      ctx.body = await db.request.answered(ctx.state.user.sub)
+      ctx.response.status = 200
       await next()
     })
 
-
   return router
 }

src/api/yarn.lock

@@ -3,8 +3,8 @@
 
 
 abbrev@1:
-  version "1.1.0"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
 
 accepts@^1.2.2:
   version "1.3.4"
@@ -20,6 +20,15 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^5.1.0:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.4.tgz#3daf9a8b67221299fdae8d82d117ed8e6c80244b"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    json-schema-traverse "^0.3.0"
+    json-stable-stringify "^1.0.1"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -94,7 +103,11 @@ aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
 
-aws4@^1.2.1:
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
@@ -495,8 +508,8 @@ babel-polyfill@^6.26.0:
     regenerator-runtime "^0.10.5"
 
 babel-preset-env@^1.6.0:
-  version "1.6.0"
+  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.0.tgz#2de1c782a780a0a5d605d199c957596da43c44e4"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
   dependencies:
     babel-plugin-check-es2015-constants "^6.22.0"
     babel-plugin-syntax-trailing-function-commas "^6.22.0"
@@ -597,9 +610,11 @@ base64url@2.0.0, base64url@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/base64url/-/base64url-2.0.0.tgz#eac16e03ea1438eff9423d69baa36262ed1f70bb"
 
-basic-auth@~1.1.0:
+basic-auth@~2.0.0:
-  version "1.1.0"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-1.1.0.tgz#45221ee429f7ee1e5035be3f51533f1cdfd29884"
+  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.0.tgz#015db3f353e02e56377755f962742e8981e7bbba"
+  dependencies:
+    safe-buffer "5.1.1"
 
 bcrypt-pbkdf@^1.0.0:
   version "1.0.1"
@@ -623,6 +638,18 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
 brace-expansion@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
@@ -643,11 +670,11 @@ browser-fingerprint@0.0.1:
   resolved "https://registry.yarnpkg.com/browser-fingerprint/-/browser-fingerprint-0.0.1.tgz#8df3cdca25bf7d5b3542d61545d730053fce604a"
 
 browserslist@^2.1.2:
-  version "2.4.0"
+  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.4.0.tgz#693ee93d01e66468a6348da5498e011f578f87f8"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.5.1.tgz#68e4bc536bbcc6086d62843a2ffccea8396821c6"
   dependencies:
-    caniuse-lite "^1.0.30000718"
+    caniuse-lite "^1.0.30000744"
-    electron-to-chromium "^1.3.18"
+    electron-to-chromium "^1.3.24"
 
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
@@ -661,9 +688,9 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
-caniuse-lite@^1.0.30000718:
+caniuse-lite@^1.0.30000744:
-  version "1.0.30000733"
+  version "1.0.30000749"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000733.tgz#ebfc48254117cc0c66197a4536cb4397a6cfbccd"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000749.tgz#2ff382865aead8cca35dacfbab04f58effa4c01c"
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -680,8 +707,8 @@ chalk@^1.1.3:
     supports-color "^2.0.0"
 
 chalk@^2.1.0:
-  version "2.1.0"
+  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.2.0.tgz#477b3bf2f9b8fd5ca9e429747e37f724ee7af240"
   dependencies:
     ansi-styles "^3.1.0"
     escape-string-regexp "^1.0.5"
@@ -788,6 +815,12 @@ cryptiles@2.x.x:
   dependencies:
     boom "2.x.x"
 
+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
 cuid@^1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/cuid/-/cuid-1.3.8.tgz#4b875e0969bad764f7ec0706cf44f5fb0831f6b7"
@@ -803,14 +836,14 @@ dashdash@^1.12.0:
     assert-plus "^1.0.0"
 
 debug@*:
-  version "3.0.1"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.0.1.tgz#0564c612b521dc92d9f2988f0549e34f9c98db64"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
     ms "2.0.0"
 
-debug@2.6.8, debug@^2.2.0, debug@^2.6.3, debug@^2.6.8:
+debug@2.6.9, debug@^2.2.0, debug@^2.6.3, debug@^2.6.8:
-  version "2.6.8"
+  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
     ms "2.0.0"
 
@@ -830,7 +863,7 @@ delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
 
-depd@1.1.1, depd@^1.1.0, depd@~1.1.0, depd@~1.1.1:
+depd@1.1.1, depd@^1.1.0, depd@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
 
@@ -861,9 +894,9 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-electron-to-chromium@^1.3.18:
+electron-to-chromium@^1.3.24:
-  version "1.3.21"
+  version "1.3.27"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.21.tgz#a967ebdcfe8ed0083fc244d1894022a8e8113ea2"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz#78ecb8a399066187bb374eede35d9c70565a803d"
 
 error-inject@~1.0.0:
   version "1.0.0"
@@ -893,7 +926,7 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
-extend@~3.0.0:
+extend@~3.0.0, extend@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
@@ -907,6 +940,10 @@ extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
 
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -943,6 +980,14 @@ form-data@~2.1.1:
     combined-stream "^1.0.5"
     mime-types "^2.1.12"
 
+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
 fresh@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -1034,6 +1079,10 @@ har-schema@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
 
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
 har-validator@~4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
@@ -1041,6 +1090,13 @@ har-validator@~4.2.1:
     ajv "^4.9.1"
     har-schema "^1.0.5"
 
+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -1064,10 +1120,23 @@ hawk@3.1.3, hawk@~3.1.3:
     hoek "2.x.x"
     sntp "1.x.x"
 
+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
 hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -1107,6 +1176,14 @@ http-signature@~1.1.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
 iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -1261,6 +1338,10 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@@ -1397,8 +1478,8 @@ koa-router@^7.2.1:
     path-to-regexp "^1.1.1"
 
 koa-send@^4.1.0:
-  version "4.1.0"
+  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/koa-send/-/koa-send-4.1.0.tgz#07d5a4eaab212679fe99916aae6b1109c08c2361"
+  resolved "https://registry.yarnpkg.com/koa-send/-/koa-send-4.1.1.tgz#bd3fa116b1f592f5fff23c9670aae69787f6cb57"
   dependencies:
     debug "^2.6.3"
     http-errors "^1.6.1"
@@ -1517,7 +1598,7 @@ mime-db@~1.30.0:
   version "1.30.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
 
-mime-types@^2.0.7, mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.7:
+mime-types@^2.0.7, mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
   version "2.1.17"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
   dependencies:
@@ -1544,16 +1625,16 @@ minimist@^1.2.0:
     minimist "0.0.8"
 
 moment@2.x.x:
-  version "2.18.1"
+  version "2.19.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.1.tgz#56da1a2d1cbf01d38b7e1afc31c10bcfa1929167"
 
 morgan@^1.6.1:
-  version "1.8.2"
+  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.8.2.tgz#784ac7734e4a453a9c6e6e8680a9329275c8b687"
+  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.9.0.tgz#d01fa6c65859b76fcf31b3cb53a3821a311d8051"
   dependencies:
-    basic-auth "~1.1.0"
+    basic-auth "~2.0.0"
-    debug "2.6.8"
+    debug "2.6.9"
-    depd "~1.1.0"
+    depd "~1.1.1"
     on-finished "~2.3.0"
     on-headers "~1.0.1"
 
@@ -1626,7 +1707,7 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-oauth-sign@~0.8.1:
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
@@ -1715,6 +1796,10 @@ performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
 pg-connection-string@0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/pg-connection-string/-/pg-connection-string-0.1.3.tgz#da1847b20940e42ee1492beaf65d49d91b245df7"
@@ -1774,8 +1859,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 private@^0.1.6, private@^0.1.7:
-  version "0.1.7"
+  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
 
 process-nextick-args@~1.0.6:
   version "1.0.7"
@@ -1789,7 +1874,7 @@ punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
-qs@^6.4.0:
+qs@^6.4.0, qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
@@ -1814,8 +1899,8 @@ raw-body@^2.2.0:
     unpipe "1.0.0"
 
 rc@^1.1.7:
-  version "1.2.1"
+  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077"
   dependencies:
     deep-extend "~0.4.0"
     ini "~1.3.0"
@@ -1905,7 +1990,7 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-request@2.81.0, request@^2.73.0:
+request@2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
@@ -1932,6 +2017,33 @@ request@2.81.0, request@^2.73.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
+request@^2.73.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
 resolve-path@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/resolve-path/-/resolve-path-1.3.3.tgz#4d83aba6468c2b8e632a575e3f52b0fa0dbe1a5c"
@@ -1945,7 +2057,7 @@ rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1:
   dependencies:
     glob "^7.0.5"
 
-safe-buffer@^5.0.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
@@ -1987,6 +2099,12 @@ sntp@1.x.x:
   dependencies:
     hoek "2.x.x"
 
+sntp@2.x.x:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.0.2.tgz#5064110f0af85f7cfdb7d6b67a40028ce52b4b2b"
+  dependencies:
+    hoek "4.x.x"
+
 source-map-support@^0.4.15:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
@@ -2018,8 +2136,8 @@ sshpk@^1.7.0:
     tweetnacl "~0.14.0"
 
 "statuses@>= 1.3.1 < 2", statuses@^1.2.0:
-  version "1.3.1"
+  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
 
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
@@ -2035,7 +2153,7 @@ string_decoder@~1.0.3:
   dependencies:
     safe-buffer "~5.1.0"
 
-stringstream@~0.0.4:
+stringstream@~0.0.4, stringstream@~0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
 
@@ -2054,8 +2172,8 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
 supports-color@^4.0.0:
-  version "4.4.0"
+  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
   dependencies:
     has-flag "^2.0.0"
 
@@ -2106,9 +2224,9 @@ topo@1.x.x:
   dependencies:
     hoek "2.x.x"
 
-tough-cookie@~2.3.0:
+tough-cookie@~2.3.0, tough-cookie@~2.3.3:
-  version "2.3.2"
+  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
   dependencies:
     punycode "^1.4.1"
 
@@ -2149,7 +2267,7 @@ util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
 
-uuid@^3.0.0:
+uuid@^3.0.0, uuid@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
 
@@ -2160,8 +2278,8 @@ v8flags@^2.1.1:
     user-home "^1.1.1"
 
 vary@^1.0.0:
-  version "1.1.1"
+  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
 
 verror@1.10.0:
   version "1.10.0"

src/app/package.json

@@ -1,8 +1,8 @@
 {
   "name": "my-prayer-journal",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "myPrayerJournal - Front End",
-  "author": "Daniel J. Summers <daniel@djs-consulting.com>",
+  "author": "Daniel J. Summers <daniel@bitbadger.solutions>",
   "private": true,
   "scripts": {
     "dev": "node build/dev-server.js",
@@ -16,12 +16,14 @@
   "dependencies": {
     "auth0-js": "^8.10.1",
     "axios": "^0.16.2",
-    "element-ui": "^1.4.4",
+    "bootstrap-vue": "^1.0.0-beta.9",
     "moment": "^2.18.1",
     "pug": "^2.0.0-rc.4",
     "vue": "^2.4.4",
+    "vue-awesome": "^2.3.3",
     "vue-progressbar": "^0.7.3",
     "vue-router": "^2.6.0",
+    "vue-toast": "^3.1.0",
     "vuex": "^2.4.0"
   },
   "devDependencies": {

src/app/src/App.vue

@@ -4,8 +4,14 @@
   #content.container
     router-view
     vue-progress-bar
+    toast(ref='toast')
   footer
-    p.text-right: i myPrayerJournal v0.8.0
+    p.text-right.text-muted
+      | myPrayerJournal v{{ version }}
+      br
+      em: small.
+        #[a(href='https://github.com/danieljsummers/myprayerjournal') Developed] and hosted by
+        #[a(href='https://bitbadger.solutions') Bit Badger Solutions]
 </template>
 
 <script>
@@ -13,53 +19,52 @@
 
 import Navigation from './components/Navigation.vue'
 
+import { version } from '../package.json'
+
 export default {
   name: 'app',
   components: {
     Navigation
+  },
+  data () {
+    return { version }
+  },
+  mounted () {
+    this.$refs.toast.setOptions({ position: 'bottom right' })
+  },
+  computed: {
+    toast () {
+      return this.$refs.toast
+    }
   }
 }
 </script>
 
 <style>
-@import url('../node_modules/element-ui/lib/theme-default/index.css');
+html, body {
-body {
+  background-color: whitesmoke;
-  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif;
-  padding-top: 60px;
-  margin: 0;
 }
-#content {
+body {
-  padding: 0 10px;
+  padding-top: 60px;
 }
 footer {
   border-top: solid 1px lightgray;
   margin-top: 1rem;
   padding: 0 1rem;
-
 }
 footer p {
   margin: 0;
 }
-.text-right {
+a:link, a:visited {
-  text-align: right;
+  color: #050;
 }
-.material-icons.md-18 {
+.mpj-request-text {
-  font-size: 18px;
+  white-space: pre-line;
 }
-.material-icons.md-24 {
+.bg-mpj {
-  font-size: 24px;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#050), to(whitesmoke));
-}
+  background-image: -webkit-linear-gradient(top, #050, whitesmoke);
-.material-icons.md-36 {
+  background-image: -moz-linear-gradient(top, #050, whitesmoke);
-  font-size: 36px;
+  background-image: linear-gradient(to bottom, #050, whitesmoke);
-}
-.material-icons.md-48 {
-  font-size: 48px;
-}
-.material-icons {
-  vertical-align: middle;
-}
-.mpj-page-title {
-  border-bottom: solid 1px lightgray;
-  margin-bottom: 20px;
 }
 </style>

src/app/src/api/index.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const http = axios.create({
-  baseURL: 'http://localhost:3000/api/'
+  baseURL: `${location.protocol}//${location.host}/api/`
 })
 
 /**
@@ -21,9 +21,11 @@ export default {
   removeBearer: () => delete http.defaults.headers.common['authorization'],
 
   /**
-   * Get all prayer requests and their most recent updates
+   * Add a note for a prayer request
+   * @param {string} requestId The Id of the request to which the note applies
+   * @param {string} notes The notes to be added
    */
-  journal: () => http.get('journal/'),
+  addNote: (requestId, notes) => http.post(`request/${requestId}/note`, { notes }),
 
   /**
    * Add a new prayer request
@@ -32,13 +34,21 @@ export default {
   addRequest: requestText => http.post('request/', { requestText }),
 
   /**
-   * Update a prayer request
+   * Get all answered requests, along with the text they had when it was answered
-   * @param request The request (should have requestId, status, and updateText properties)
    */
-  updateRequest: request => http.post(`request/${request.requestId}/history`, {
+  getAnsweredRequests: () => http.get('request/answered'),
-    status: request.status,
+
-    updateText: request.updateText
+  /**
-  }),
+   * Get a prayer request (full; includes all history)
+   * @param {string} requestId The Id of the request to retrieve
+   */
+  getFullRequest: requestId => http.get(`request/${requestId}/full`),
+
+  /**
+   * Get past notes for a prayer request
+   * @param {string} requestId The Id of the request for which notes should be retrieved
+   */
+  getNotes: requestId => http.get(`request/${requestId}/notes`),
 
   /**
    * Get a prayer request (journal-style; only latest update)
@@ -47,9 +57,22 @@ export default {
   getRequest: requestId => http.get(`request/${requestId}`),
 
   /**
-   * Get a prayer request (full; includes all history)
+   * Get a complete request; equivalent of "full" and "notes" combined
-   * @param {string} requestId The Id of the request to retrieve
    */
-  getFullRequest: requestId => http.get(`request/${requestId}/full`)
+  getRequestComplete: requestId => http.get(`request/${requestId}/complete`),
+
+  /**
+   * Get all prayer requests and their most recent updates
+   */
+  journal: () => http.get('journal/'),
+
+  /**
+   * Update a prayer request
+   * @param request The request (should have requestId, status, and updateText properties)
+   */
+  updateRequest: request => http.post(`request/${request.requestId}/history`, {
+    status: request.status,
+    updateText: request.updateText
+  })
 
 }

src/app/src/auth/AuthService.js

@@ -5,6 +5,8 @@ import auth0 from 'auth0-js'
 import AUTH_CONFIG from './auth0-variables'
 import mutations from '@/store/mutation-types'
 
+var tokenRenewalTimeout
+
 export default class AuthService {
 
   constructor () {
@@ -17,7 +19,7 @@ export default class AuthService {
   auth0 = new auth0.WebAuth({
     domain: AUTH_CONFIG.domain,
     clientID: AUTH_CONFIG.clientId,
-    redirectUri: AUTH_CONFIG.callbackUrl,
+    redirectUri: AUTH_CONFIG.appDomain + AUTH_CONFIG.callbackUrl,
     audience: `https://${AUTH_CONFIG.domain}/userinfo`,
     responseType: 'token id_token',
     scope: 'openid profile email'
@@ -67,7 +69,7 @@ export default class AuthService {
           this.userInfo(authResult.accessToken)
             .then(user => {
               store.commit(mutations.USER_LOGGED_ON, user)
-              router.replace('/dashboard')
+              router.replace('/journal')
             })
         }
       })
@@ -78,6 +80,16 @@ export default class AuthService {
       })
   }
 
+  scheduleRenewal () {
+    let expiresAt = JSON.parse(localStorage.getItem('expires_at'))
+    let delay = expiresAt - Date.now()
+    if (delay > 0) {
+      tokenRenewalTimeout = setTimeout(() => {
+        this.renewToken()
+      }, delay)
+    }
+  }
+
   setSession (authResult) {
     // Set the time that the access token will expire at
     let expiresAt = JSON.stringify(
@@ -86,10 +98,30 @@ export default class AuthService {
     localStorage.setItem('access_token', authResult.accessToken)
     localStorage.setItem('id_token', authResult.idToken)
     localStorage.setItem('expires_at', expiresAt)
+    this.scheduleRenewal()
+  }
+
+  renewToken () {
+    console.log('attempting renewal...')
+    this.auth0.renewAuth(
+      {
+        audience: `https://${AUTH_CONFIG.domain}/userinfo`,
+        redirectUri: `${AUTH_CONFIG.appDomain}/static/silent.html`,
+        usePostMessage: true
+      },
+      (err, result) => {
+        if (err) {
+          console.log(err)
+        } else {
+          this.setSession(result)
+        }
+      }
+    )
   }
 
   logout (store, router) {
     // Clear access token and ID token from local storage
+    clearTimeout(tokenRenewalTimeout)
     localStorage.removeItem('access_token')
     localStorage.removeItem('id_token')
     localStorage.removeItem('expires_at')

src/app/src/components/Answered.vue

@@ -0,0 +1,61 @@
+<template lang="pug">
+article
+  page-title(title='Answered Requests')
+  p(v-if='!loaded') Loading answered requests...
+  div(v-if='loaded').mpj-answered-list
+    p.mpj-request-text(v-for='req in requests' :key='req.requestId')
+      | {{ req.text }}
+      br
+      br
+      b-btn(:to='{ name: "AnsweredDetail", params: { id: req.requestId }}'
+            size='sm'
+            variant='outline-secondary')
+        icon(name='search')
+        = ' View Full Request'
+      small.text-muted: em.
+        &nbsp; Answered #[date-from-now(:value='req.asOf')]
+</template>
+
+<script>
+'use static'
+
+import api from '@/api'
+
+export default {
+  name: 'answered',
+  data () {
+    return {
+      requests: [],
+      loaded: false
+    }
+  },
+  computed: {
+    toast () {
+      return this.$parent.$refs.toast
+    }
+  },
+  async mounted () {
+    this.$Progress.start()
+    try {
+      const reqs = await api.getAnsweredRequests()
+      this.requests = reqs.data
+      this.$Progress.finish()
+    } catch (err) {
+      console.error(err)
+      this.toast.showToast('Error loading requests; check console for details', { theme: 'danger' })
+      this.$Progress.fail()
+    } finally {
+      this.loaded = true
+    }
+  }
+}
+</script>
+
+<style>
+.mpj-answered-list p {
+  border-top: solid 1px lightgray;
+}
+.mpj-answered-list p:first-child {
+  border-top: none;
+}
+</style>

src/app/src/components/AnsweredDetail.vue

@@ -0,0 +1,82 @@
+<template lang="pug">
+article
+  page-title(title='Answered Request')
+  p(v-if='!request') Loading request...
+  template(v-if='request')
+    p.
+      Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) &nbsp;
+      #[small: em.text-muted prayed {{ prayedCount }} times, open {{ openDays }} days]
+    p.mpj-request-text {{ lastText }}
+    b-table(small hover :fields='fields' :items='log')
+      template(slot='action' scope='data').
+        {{ data.item.status }} on #[span.text-nowrap {{ formatDate(data.item.asOf) }}]
+</template>
+
+<script>
+'use strict'
+
+import moment from 'moment'
+
+import api from '@/api'
+
+const asOfDesc = (a, b) => b.asOf - a.asOf
+
+export default {
+  name: 'answer-detail',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      request: null,
+      fields: [
+        { key: 'action', label: 'Action' },
+        { key: 'text', label: 'Update / Notes' }
+      ]
+    }
+  },
+  computed: {
+    answered () {
+      return this.request.history.find(hist => hist.status === 'Answered').asOf
+    },
+    lastText () {
+      return this.request.history
+        .filter(hist => hist.text > '')
+        .sort(asOfDesc)[0].text
+    },
+    log () {
+      return this.request.notes
+        .map(note => ({ asOf: note.asOf, text: note.notes, status: 'Notes' }))
+        .concat(this.request.history)
+        .sort(asOfDesc)
+        .slice(1)
+    },
+    openDays () {
+      return Math.floor(
+        (this.answered - this.request.history.find(hist => hist.status === 'Created').asOf) / 1000 / 60 / 60 / 24)
+    },
+    prayedCount () {
+      return this.request.history.filter(hist => hist.status === 'Prayed').length
+    }
+  },
+  async mounted () {
+    this.$Progress.start()
+    try {
+      const req = await api.getRequestComplete(this.id)
+      this.request = req.data
+      this.$Progress.finish()
+    } catch (e) {
+      console.log(e)
+      this.$Progress.fail()
+    }
+  },
+  methods: {
+    formatDate (asOf) {
+      return moment(asOf).format('LL')
+    }
+  }
+}
+</script>

src/app/src/components/Dashboard.vue

@@ -1,46 +0,0 @@
-<template lang="pug">
-article
-  page-title(:title="title")
-  p(v-if="isLoadingJournal") Loading your prayer journal...
-  template(v-if="!isLoadingJournal")
-    new-request
-    el-row
-      el-col(:span='4'): strong Actions
-      el-col(:span='16'): strong Request
-      el-col(:span='4'): strong As Of
-    request-list-item(v-for="request in journal" :request="request" :key="request.requestId")
-</template>
-
-<script>
-'use strict'
-
-import { mapState } from 'vuex'
-
-import PageTitle from './PageTitle'
-import NewRequest from './request/NewRequest'
-import RequestListItem from './request/RequestListItem'
-
-import actions from '@/store/action-types'
-
-export default {
-  name: 'dashboard',
-  components: {
-    PageTitle,
-    NewRequest,
-    RequestListItem
-  },
-  computed: {
-    title () {
-      return `${this.user.given_name}'s Dashboard`
-    },
-    ...mapState(['user', 'journal', 'isLoadingJournal'])
-  },
-  async created () {
-    await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
-    this.$message({
-      message: `Loaded ${this.journal.length} prayer requests`,
-      type: 'success'
-    })
-  }
-}
-</script>

src/app/src/components/Home.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 article
-  page-title(title="Welcome!" hideOnPage="true")
+  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,
@@ -15,12 +16,7 @@ article
 <script>
 'use strict'
 
-import PageTitle from './PageTitle.vue'
-
 export default {
-  name: 'home',
+  name: 'home'
-  components: {
-    PageTitle
-  }
 }
 </script>

src/app/src/components/Journal.vue

@@ -0,0 +1,68 @@
+<template lang="pug">
+article
+  page-title(:title='title')
+  p(v-if='isLoadingJournal') Loading your prayer journal...
+  template(v-if='!isLoadingJournal')
+    new-request
+    br
+    b-row(v-if='journal.length > 0')
+      request-card(v-for='request in journal'
+                   :key='request.requestId'
+                   :request='request'
+                   :events='eventBus'
+                   :toast='toast')
+    p.text-center(v-if='journal.length === 0'): em No requests found; click the "Add a New Request" button to add one
+    edit-request(:events='eventBus'
+                 :toast='toast')
+    notes-edit(:events='eventBus'
+               :toast='toast')
+    full-request(:events='eventBus')
+</template>
+
+<script>
+'use strict'
+
+import Vue from 'vue'
+import { mapState } from 'vuex'
+import chunk from 'lodash/chunk'
+
+import EditRequest from './request/EditRequest'
+import FullRequest from './request/FullRequest'
+import NewRequest from './request/NewRequest'
+import NotesEdit from './request/NotesEdit'
+import RequestCard from './request/RequestCard'
+
+import actions from '@/store/action-types'
+
+export default {
+  name: 'journal',
+  components: {
+    EditRequest,
+    FullRequest,
+    NewRequest,
+    NotesEdit,
+    RequestCard
+  },
+  data () {
+    return {
+      eventBus: new Vue()
+    }
+  },
+  computed: {
+    title () {
+      return `${this.user.given_name}'s Prayer Journal`
+    },
+    journalCardRows () {
+      return chunk(this.journal, 3)
+    },
+    toast () {
+      return this.$parent.$refs.toast
+    },
+    ...mapState(['user', 'journal', 'isLoadingJournal'])
+  },
+  async created () {
+    await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
+    this.toast.showToast(`Loaded ${this.journal.length} prayer requests`, { theme: 'success' })
+  }
+}
+</script>

src/app/src/components/Navigation.vue

@@ -1,12 +1,24 @@
 <template lang="pug">
-el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
+b-navbar(toggleable='sm'
-  el-menu-item(index="/")
+         type='dark'
-    span(style="font-weight:100;") my
+         variant='mpj'
-    span(style="font-weight:600;") Prayer
+         fixed='top')
-    span(style="font-weight:700;") Journal
+  b-nav-toggle(target='nav_collapse')
-  el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
+  b-navbar-brand(to='/')
-  el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
+    span(style='font-weight:100;') my
-  el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
+    span(style='font-weight:600;') Prayer
+    span(style='font-weight:700;') Journal
+  b-collapse#nav_collapse(is-nav)
+    b-nav(is-nav-bar)
+      b-nav-item(v-if='isAuthenticated'
+                 to='/journal') Journal
+      b-nav-item(v-if='isAuthenticated'
+                 to='/answered') Answered
+      b-nav-item(v-if='isAuthenticated'): a(@click.stop='logOff()') Log Off
+      b-nav-item(v-if='!isAuthenticated'): a(@click.stop='logOn()') Log On
+      b-nav-item(href='https://danieljsummers.github.io/myPrayerJournal/'
+                 target='_blank'
+                 @click.stop='') Docs
 </template>
 
 <script>
@@ -22,6 +34,9 @@ export default {
       auth0: new AuthService()
     }
   },
+  computed: {
+    ...mapState([ 'isAuthenticated' ])
+  },
   methods: {
     logOn () {
       this.auth0.login()
@@ -29,17 +44,6 @@ export default {
     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,18 +0,0 @@
-<template lang="pug">
-h2.mpj-page-title(v-if="!hideOnPage" v-html="title")
-</template>
-
-<script>
-export default {
-  name: 'page-title',
-  props: [ 'title', 'hideOnPage' ],
-  created () {
-    document.title = `${this.title} « myPrayerJournal`
-  },
-  watch: {
-    title () {
-      document.title = `${this.title} « myPrayerJournal`
-    }
-  }
-}
-</script>

src/app/src/components/common/DateFromNow.vue

@@ -0,0 +1,52 @@
+<script>
+'use strict'
+
+import moment from 'moment'
+
+export default {
+  name: 'date-from-now',
+  props: {
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    interval: {
+      type: Number,
+      default: 10000
+    }
+  },
+  data () {
+    const dt = moment(this.value)
+    return {
+      fromNow: dt.fromNow(),
+      actual: dt.format('LLLL'),
+      intervalId: null
+    }
+  },
+  mounted () {
+    this.intervalId = setInterval(this.updateFromNow, this.interval)
+    this.$watch('value', this.updateFromNow)
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId)
+  },
+  methods: {
+    updateFromNow () {
+      let newFromNow = moment(this.value).fromNow()
+      if (newFromNow !== this.fromNow) this.fromNow = newFromNow
+    }
+  },
+  render (createElement) {
+    return createElement(this.tag, {
+      domProps: {
+        title: this.actual,
+        innerText: this.fromNow
+      }
+    })
+  }
+}
+</script>

src/app/src/components/common/PageTitle.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+h2.mpj-page-title(v-if='!hideOnPage'
+                  v-html='title')
+</template>
+
+<script>
+export default {
+  name: 'page-title',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    hideOnPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    title () {
+      document.title = `${this.title} « myPrayerJournal`
+    }
+  },
+  created () {
+    document.title = `${this.title} « myPrayerJournal`
+  }
+}
+</script>
+
+<style scoped>
+.mpj-page-title {
+  border-bottom: solid 1px lightgray;
+  margin-bottom: 20px;
+}
+</style>

src/app/src/components/request/EditRequest.vue

@@ -1,18 +1,30 @@
 <template lang="pug">
-span
+b-modal(v-model='editVisible'
-  el-button(icon='edit' @click='openDialog()' title='Edit')
+        header-bg-variant='mpj'
-  el-dialog(title='Edit Prayer Request' :visible.sync='editVisible')
+        header-text-variant='light'
-    el-form(:model='form' :label-position='top')
+        size='lg'
-      el-form-item(label='Prayer Request')
+        title='Edit Prayer Request'
-        el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
+        @edit='openDialog()'
-      el-form-item(label='Also Mark As')
+        @shows='focusRequestText')
-        el-radio-group(v-model='form.status')
+  b-form
-          el-radio-button(label='Updated') Updated
+    b-form-group(label='Prayer Request'
-          el-radio-button(label='Prayed') Prayed
+                 label-for='request_text')
-          el-radio-button(label='Answered') Answered
+      b-textarea#request_text(ref='toFocus'
-    span.dialog-footer(slot='footer')
+                              v-model='form.requestText'
-      el-button(@click='closeDialog()') Cancel
+                              :rows='10'
-      el-button(type='primary' @click='saveRequest()') Save
+                              @blur='trimText()')
+    b-form-group(label='Also Mark As')
+      b-radio-group(v-model='form.status'
+                    buttons)
+        b-radio(value='Updated') Updated
+        b-radio(value='Prayed') Prayed
+        b-radio(value='Answered') Answered
+  div.w-100.text-right(slot='modal-footer')
+    b-btn(variant='primary'
+          @click='saveRequest()') Save
+    | &nbsp; &nbsp;
+    b-btn(variant='outline-secondary'
+          @click='closeDialog()') Cancel
 </template>
 
 <script>
@@ -22,45 +34,55 @@ import actions from '@/store/action-types'
 
 export default {
   name: 'edit-request',
-  props: [ 'request' ],
+  props: {
+    toast: { required: true },
+    events: { required: true }
+  },
   data () {
     return {
       editVisible: false,
       form: {
-        requestText: this.request.text,
+        requestId: '',
+        requestText: '',
         status: 'Updated'
-      },
-      formLabelWidth: '120px'
       }
+    }
+  },
+  created () {
+    this.events.$on('edit', this.openDialog)
   },
   methods: {
     closeDialog () {
+      this.form.requestId = ''
       this.form.requestText = ''
       this.form.status = 'Updated'
       this.editVisible = false
     },
-    openDialog () {
+    focusRequestText (e) {
+      this.$refs.toFocus.focus()
+    },
+    openDialog (request) {
+      this.form.requestId = request.requestId
+      this.form.requestText = request.text
       this.editVisible = true
+      this.focusRequestText(null)
+    },
+    trimText () {
+      this.form.requestText = this.form.requestText.trim()
     },
     async saveRequest () {
       await this.$store.dispatch(actions.UPDATE_REQUEST, {
         progress: this.$Progress,
-        requestId: this.request.requestId,
+        requestId: this.form.requestId,
         updateText: this.form.requestText,
         status: this.form.status
       })
       if (this.form.status === 'Answered') {
-        this.$message({
+        this.toast.showToast('Request updated and removed from active journal', { theme: 'success' })
-          message: 'Request updated and removed from active journal',
-          type: 'success'
-        })
       } else {
-        this.$message({
+        this.toast.showToast('Request updated', { theme: 'success' })
-          message: 'Request updated',
-          type: 'success'
-        })
       }
-      this.editVisible = false
+      this.closeDialog()
     }
   }
 }

src/app/src/components/request/FullRequest.vue

@@ -1,11 +1,19 @@
 <template lang="pug">
 span
-  el-button(icon='document' @click='openDialog()' title='Show History')
+  b-modal(v-model='historyVisible'
-  el-dialog(title='Prayer Request History' :visible.sync='historyVisible')
+          header-bg-variant='mpj'
-    span(v-if='null !== full')
+          header-text-variant='light'
-      full-request-history(v-for='item in full.history' :history='item' :key='item.asOf')
+          size='lg'
-    span.dialog-footer(slot='footer')
+          title='Prayer Request History'
-      el-button(type='primary' @click='closeDialog()') Close
+          @shows='focusRequestText')
+    b-list-group(v-if='null !== full'
+                 flush)
+      full-request-history(v-for='item in full.history'
+                           :key='item.asOf'
+                           :history='item')
+    div.w-100.text-right(slot='modal-footer')
+      b-btn(variant='primary'
+            @click='closeDialog()') Close
 </template>
 
 <script>
@@ -17,25 +25,30 @@ import api from '@/api'
 
 export default {
   name: 'full-request',
-  props: [ 'request' ],
+  components: {
+    FullRequestHistory
+  },
+  props: {
+    events: { required: true }
+  },
   data () {
     return {
       historyVisible: false,
       full: null
     }
   },
-  components: {
+  created () {
-    FullRequestHistory
+    this.events.$on('full', this.openDialog)
   },
   methods: {
     closeDialog () {
       this.full = null
       this.historyVisible = false
     },
-    async openDialog () {
+    async openDialog (requestId) {
       this.historyVisible = true
       this.$Progress.start()
-      const req = await api.getFullRequest(this.request.requestId)
+      const req = await api.getFullRequest(requestId)
       this.full = req.data
       this.$Progress.finish()
     }

src/app/src/components/request/FullRequestHistory.vue

@@ -1,7 +1,9 @@
 <template lang="pug">
-p.journal-request
+b-list-group-item
-  | {{ history.status }} {{ asOf }}
+  | {{ history.status }}
-  span(v-if='0 < history.text.length') &nbsp;&raquo; {{ history.text }}
+  |
+  small.text-muted {{ asOf }}
+  div(v-if='hasText').mpj-request-text {{ history.text }}
 </template>
 
 <script>
@@ -11,10 +13,15 @@ import moment from 'moment'
 
 export default {
   name: 'full-request-history',
-  props: [ 'history' ],
+  props: {
+    history: { required: true }
+  },
   computed: {
     asOf () {
       return moment(this.history.asOf).fromNow()
+    },
+    hasText () {
+      return this.history.text.length > 0
     }
   }
 }

src/app/src/components/request/NewRequest.vue

@@ -1,13 +1,28 @@
 <template lang="pug">
 div
-  el-button(icon='plus' @click='openDialog()') Add a New Request
+  b-btn(@click='openDialog()' size='sm' variant='primary')
-  el-dialog(title='Add a New Prayer Request' :visible.sync='showNewVisible')
+    icon(name='plus')
-    el-form(:model='form' :label-position='top')
+    | &nbsp; Add a New Request
-      el-form-item(label='Prayer Request')
+  b-modal(v-model='showNewVisible'
-        el-input(type='textarea' v-model.trim='form.requestText' :rows='10')
+          header-bg-variant='mpj'
-    span.dialog-footer(slot='footer')
+          header-text-variant='light'
-      el-button(@click='closeDialog()') Cancel
+          size='lg'
-      el-button(type='primary' @click='saveRequest()') Save
+          title='Add a New Prayer Request'
+          @shown='focusRequestText')
+    b-form
+      b-form-group(label='Prayer Request'
+                   label-for='request_text')
+        b-textarea#request_text(ref='toFocus'
+                                v-model='form.requestText'
+                                :rows='10'
+                                @blur='trimText()')
+    div.w-100.text-right(slot='modal-footer')
+      b-btn(variant='primary'
+            @click='saveRequest()') Save
+      | &nbsp; &nbsp;
+      b-btn(variant='outline-secondary'
+            @click='closeDialog()') Cancel
+  toast(ref='toast')
 </template>
 
 <script>
@@ -26,23 +41,29 @@ export default {
       formLabelWidth: '120px'
     }
   },
+  mounted () {
+    this.$refs.toast.setOptions({ position: 'bottom right' })
+  },
   methods: {
     closeDialog () {
       this.form.requestText = ''
       this.showNewVisible = false
     },
+    focusRequestText (e) {
+      this.$refs.toFocus.focus()
+    },
     openDialog () {
       this.showNewVisible = true
     },
+    trimText () {
+      this.form.requestText = this.form.requestText.trim()
+    },
     async saveRequest () {
       await this.$store.dispatch(actions.ADD_REQUEST, {
         progress: this.$Progress,
         requestText: this.form.requestText
       })
-      this.$message({
+      this.$refs.toast.showToast('New prayer request added', { theme: 'success' })
-        message: 'New prayer request added',
-        type: 'success'
-      })
       this.closeDialog()
     }
   }

src/app/src/components/request/NotesEdit.vue

@@ -0,0 +1,116 @@
+<template lang="pug">
+b-modal(v-model='notesVisible'
+        header-bg-variant='mpj'
+        header-text-variant='light'
+        size='lg'
+        title='Add Notes to Prayer Request'
+        @edit='openDialog()'
+        @shows='focusNotes')
+  b-form
+    b-form-group(label='Notes'
+                 label-for='notes')
+      b-textarea#notes(ref='toFocus'
+                       v-model='form.notes'
+                       :rows='10'
+                       @blur='trimText()')
+  div(v-if='hasPriorNotes')
+    p.text-center: strong Prior Notes for This Request
+    b-list-group(flush)
+      b-list-group-item(v-for='note in priorNotes'
+                        :key='note.asOf')
+        small.text-muted: date-from-now(:value='note.asOf')
+        br
+        div.mpj-request-text {{ note.notes }}
+  div(v-else-if='noPriorNotes').text-center.text-muted There are no prior notes for this request
+  div(v-else).text-center
+    b-btn(variant='outline-secondary'
+          @click='loadNotes()') Load Prior Notes
+  div.w-100.text-right(slot='modal-footer')
+    b-btn(variant='primary'
+          @click='saveNotes()') Save
+    | &nbsp; &nbsp;
+    b-btn(variant='outline-secondary'
+          @click='closeDialog()') Cancel
+</template>
+
+<script>
+'use strict'
+
+import api from '@/api'
+
+export default {
+  name: 'notes-edit',
+  props: {
+    toast: { required: true },
+    events: { required: true }
+  },
+  data () {
+    return {
+      notesVisible: false,
+      form: {
+        requestId: '',
+        notes: ''
+      },
+      priorNotes: [],
+      priorNotesLoaded: false
+    }
+  },
+  computed: {
+    hasPriorNotes () {
+      return this.priorNotesLoaded && this.priorNotes.length > 0
+    },
+    noPriorNotes () {
+      return this.priorNotesLoaded && this.priorNotes.length === 0
+    }
+  },
+  created () {
+    this.events.$on('notes', this.openDialog)
+  },
+  methods: {
+    closeDialog () {
+      this.form.requestId = ''
+      this.form.notes = ''
+      this.priorNotes = []
+      this.priorNotesLoaded = false
+      this.notesVisible = false
+    },
+    focusNotes (e) {
+      this.$refs.toFocus.focus()
+    },
+    async loadNotes () {
+      this.$Progress.start()
+      try {
+        const notes = await api.getNotes(this.form.requestId)
+        this.priorNotes = notes.data
+        console.log(this.priorNotes)
+        this.$Progress.finish()
+      } catch (e) {
+        console.error(e)
+        this.$Progress.fail()
+      } finally {
+        this.priorNotesLoaded = true
+      }
+    },
+    openDialog (request) {
+      this.form.requestId = request.requestId
+      this.notesVisible = true
+      this.focusNotes(null)
+    },
+    async saveNotes () {
+      this.$Progress.start()
+      try {
+        await api.addNote(this.form.requestId, this.form.notes)
+        this.$Progress.finish()
+        this.toast.showToast('Added notes', { theme: 'success' })
+        this.closeDialog()
+      } catch (e) {
+        console.error(e)
+        this.$Progress.fail()
+      }
+    },
+    trimText () {
+      this.form.notes = this.form.notes.trim()
+    }
+  }
+}
+</script>

src/app/src/components/request/RequestCard.vue

@@ -0,0 +1,59 @@
+<template lang="pug">
+b-col(md='6' lg='4')
+  .mpj-request-card
+    b-card-header.text-center.py-1.
+      #[b-btn(@click='markPrayed()' variant='outline-primary' title='Pray' size='sm'): icon(name='check')]
+      #[b-btn(@click.stop='showEdit()' variant='outline-secondary' title='Edit' size='sm'): icon(name='pencil')]
+      #[b-btn(@click.stop='showNotes()' variant='outline-secondary' title='Add Notes' size='sm'): icon(name='file-text-o')]
+      #[b-btn(@click.stop='showFull()' variant='outline-secondary' title='View Full Request' size='sm'): icon(name='search')]
+    b-card-body.p-0
+      p.card-text.mpj-request-text.mb-1.px-3.pt-3
+        | {{ request.text }}
+      p.card-text.p-0.pr-1.text-right: small.text-muted: em
+        = '(last activity '
+        date-from-now(:value='request.asOf')
+        | )
+</template>
+
+<script>
+'use strict'
+
+import actions from '@/store/action-types'
+
+export default {
+  name: 'request-card',
+  props: {
+    request: { required: true },
+    toast: { required: true },
+    events: { required: true }
+  },
+  methods: {
+    async markPrayed () {
+      await this.$store.dispatch(actions.UPDATE_REQUEST, {
+        progress: this.$Progress,
+        requestId: this.request.requestId,
+        status: 'Prayed',
+        updateText: ''
+      })
+      this.toast.showToast('Request marked as prayed', { theme: 'success' })
+    },
+    showEdit () {
+      this.events.$emit('edit', this.request)
+    },
+    showFull () {
+      this.events.$emit('full', this.request.requestId)
+    },
+    showNotes () {
+      this.events.$emit('notes', this.request)
+    }
+  }
+}
+</script>
+
+<style>
+.mpj-request-card {
+  border: solid 1px darkgray;
+  border-radius: 5px;
+  margin-bottom: 15px;
+}
+</style>

src/app/src/components/request/RequestListItem.vue

@@ -1,57 +0,0 @@
-<template lang="pug">
-el-row.journal-request
-  el-col(:span='4'): p
-    el-button(icon='check' @click='markPrayed()' title='Pray')
-    edit-request(:request='request')
-    full-request(:request='request')
-  el-col(:span='16'): p {{ text }}
-  el-col(:span='4'): p {{ asOf }}
-</template>
-
-<script>
-'use strict'
-
-import moment from 'moment'
-
-import EditRequest from './EditRequest'
-import FullRequest from './FullRequest'
-
-import actions from '@/store/action-types'
-
-export default {
-  name: 'request-list-item',
-  props: [ 'request' ],
-  components: {
-    EditRequest,
-    FullRequest
-  },
-  methods: {
-    async markPrayed () {
-      await this.$store.dispatch(actions.UPDATE_REQUEST, {
-        progress: this.$Progress,
-        requestId: this.request.requestId,
-        status: 'Prayed',
-        updateText: ''
-      })
-      this.$message({
-        message: 'Request marked as prayed',
-        type: 'success'
-      })
-    }
-  },
-  computed: {
-    asOf () {
-      return moment(this.request.asOf).fromNow()
-    },
-    text () {
-      return this.request.text.split('\n').join('<br>')
-    }
-  }
-}
-</script>
-
-<style>
-.journal-request {
-  border-bottom: dotted 1px lightgray;
-}
-</style>

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

@@ -1,5 +1,7 @@
 <template lang="pug">
-p Logging you on...
+article
+  pageTitle(title='Logging On')
+  p Logging you on...
 </template>
 
 <script>

src/app/src/main.js

@@ -1,20 +1,33 @@
 // 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 ElementUI from 'element-ui'
+import BootstrapVue from 'bootstrap-vue'
+import Icon from 'vue-awesome/components/Icon'
 import VueProgressBar from 'vue-progressbar'
-import 'element-ui/lib/theme-default/index.css'
+import VueToast from 'vue-toast'
+
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'vue-toast/dist/vue-toast.min.css'
+
+// Only import the icons we need; the whole set is ~500K!
+import 'vue-awesome/icons/check'
+import 'vue-awesome/icons/file-text-o'
+import 'vue-awesome/icons/pencil'
+import 'vue-awesome/icons/plus'
+import 'vue-awesome/icons/search'
 
 import App from './App'
 import router from './router'
 import store from './store'
+import DateFromNow from './components/common/DateFromNow'
+import PageTitle from './components/common/PageTitle'
 
 Vue.config.productionTip = false
 
-Vue.use(ElementUI)
+Vue.use(BootstrapVue)
-
 Vue.use(VueProgressBar, {
-  color: 'rgb(32, 160, 255)',
+  color: 'yellow',
   failedColor: 'red',
   height: '5px',
   transition: {
@@ -24,6 +37,11 @@ Vue.use(VueProgressBar, {
   }
 })
 
+Vue.component('icon', Icon)
+Vue.component('date-from-now', DateFromNow)
+Vue.component('page-title', PageTitle)
+Vue.component('toast', VueToast)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/app/src/router/index.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
-import Dashboard from '@/components/Dashboard'
+import Answered from '@/components/Answered'
+import AnsweredDetail from '@/components/AnsweredDetail'
 import Home from '@/components/Home'
+import Journal from '@/components/Journal'
 import LogOn from '@/components/user/LogOn'
 
 Vue.use(Router)
@@ -10,8 +12,31 @@ Vue.use(Router)
 export default new Router({
   mode: 'history',
   routes: [
-    { path: '/', name: 'Home', component: Home },
+    {
-    { path: '/dashboard', name: 'Dashboard', component: Dashboard },
+      path: '/',
-    { path: '/user/log-on', name: 'LogOn', component: LogOn }
+      name: 'Home',
+      component: Home
+    },
+    {
+      path: '/answered/:id',
+      name: 'AnsweredDetail',
+      component: AnsweredDetail,
+      props: true
+    },
+    {
+      path: '/answered',
+      name: 'Answered',
+      component: Answered
+    },
+    {
+      path: '/journal',
+      name: 'Journal',
+      component: Journal
+    },
+    {
+      path: '/user/log-on',
+      name: 'LogOn',
+      component: LogOn
+    }
   ]
 })

src/app/src/store/index.js

@@ -33,7 +33,13 @@ const logError = function (error) {
 export default new Vuex.Store({
   state: {
     user: JSON.parse(localStorage.getItem('user_profile') || '{}'),
-    isAuthenticated: this.auth0.isAuthenticated(),
+    isAuthenticated: (() => {
+      this.auth0.scheduleRenewal()
+      if (this.auth0.isAuthenticated()) {
+        api.setBearer(localStorage.getItem('id_token'))
+      }
+      return this.auth0.isAuthenticated()
+    })(),
     journal: {},
     isLoadingJournal: false
   },

src/app/static/silent.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="https://cdn.auth0.com/js/auth0/8.9/auth0.min.js"></script>
+  <script>
+    var webAuth = new auth0.WebAuth({
+      domain: 'djs-consulting.auth0.com',
+      clientID: 'Of2s0RQCQ3mt3dwIkOBY5h85J9sXbF2n',
+      scope: 'openid profile email',
+      responseType: 'token id_token',
+      redirectUri: location.protocol + '//' + location.host + '/static/silent.html'
+    })
+  </script>
+  <script>
+    webAuth.parseHash(window.location.hash, function (err, response) {
+      parent.postMessage(err || response, location.protocol + '//' + location.host);
+    })
+  </script>
+</head>
+<body></body>
+</html>