Version bump; remove logging

- Handle notes being nil
- Distinguish between request not found, error retrieving notes, and no notes for present request
- Minor UI tweaks to use smart quotes

.gitignore

@@ -253,7 +253,9 @@ paket-files/
 *.sln.iml
 
 # Compiled files / application
-src/api/public/index.html
+src/api/build
-src/api/public/static
+src/public/index.html
-src/api/appsettings.json
+src/public/static
-build/
+src/config.json
+/build
+src/*.exe

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/app.js

@@ -1,35 +0,0 @@
-'use strict'
-
-const chalk = require('chalk')
-
-const { env } = require('./appsettings.json') // process.env.NODE_ENV || 'dev'
-
-if ('dev' === env) require('babel-register')
-const src = (env === 'dev') ? './src' : './build'
-
-const app = require(`${src}/index`).default
-const db = require(`${src}/db`).default
-
-const fullEnv = ('dev' === env) ? 'Development' : 'Production'
-
-const { port } = require('./appsettings.json')
-
-/**
- * Log a start-up message for the app
- * @param {string} status The status to display
- */
-const startupMsg = (status) => {
-  console.log(chalk`{reset myPrayerJournal ${status} | Port: {bold ${port}} | Mode: {bold ${fullEnv}}}`)
-}
-
-// Ensure the database exists before starting up
-db.verify()
-.then(() => app.listen(port, () => startupMsg('ready')))
-.catch(err => {
-  console.log(chalk`\n{reset {bgRed.white.bold ||  Error connecting to PostgreSQL  }}`)
-  for (let key of Object.keys(err)) {
-    console.log(chalk`${key}: {reset {bold ${err[key]}}}`)
-  }
-  console.log('')
-  startupMsg('failed')
-})

src/api/data/data.go

@@ -0,0 +1,366 @@
+// Package data contains data access functions for myPrayerJournal.
+package data
+
+import (
+	"database/sql"
+	"fmt"
+	"log"
+	"time"
+
+	// Register the PostgreSQL driver.
+	_ "github.com/lib/pq"
+	"github.com/lucsky/cuid"
+)
+
+const (
+	currentRequestSQL = `
+		SELECT "requestId", "text", "asOf", "lastStatus"
+		  FROM mpj.journal`
+	journalSQL = `
+		SELECT "requestId", "text", "asOf", "lastStatus"
+		  FROM mpj.journal
+		 WHERE "userId" = $1
+		   AND "lastStatus" <> 'Answered'`
+)
+
+// db is a connection to the database for the entire application.
+var db *sql.DB
+
+// Settings holds the PostgreSQL configuration for myPrayerJournal.
+type Settings struct {
+	Host     string `json:"host"`
+	Port     int    `json:"port"`
+	User     string `json:"user"`
+	Password string `json:"password"`
+	DbName   string `json:"dbname"`
+}
+
+/* Data Access */
+
+// Retrieve a basic request
+func retrieveRequest(reqID, userID string) (*Request, bool) {
+	req := Request{}
+	err := db.QueryRow(`
+		SELECT "requestId", "enteredOn"
+		  FROM mpj.request
+		 WHERE "requestId" = $1
+		   AND "userId" = $2`, reqID, userID).Scan(
+		&req.ID, &req.EnteredOn,
+	)
+	if err != nil {
+		if err != sql.ErrNoRows {
+			log.Print(err)
+		}
+		return nil, false
+	}
+	req.UserID = userID
+	return &req, true
+}
+
+// Unix time in JavaScript Date.now() precision.
+func jsNow() int64 {
+	return time.Now().UnixNano() / int64(1000000)
+}
+
+// Loop through rows and create journal requests from them.
+func makeJournal(rows *sql.Rows, userID string) []JournalRequest {
+	var out []JournalRequest
+	for rows.Next() {
+		req := JournalRequest{}
+		err := rows.Scan(&req.RequestID, &req.Text, &req.AsOf, &req.LastStatus)
+		if err != nil {
+			log.Print(err)
+			continue
+		}
+		out = append(out, req)
+	}
+	if rows.Err() != nil {
+		log.Print(rows.Err())
+		return nil
+	}
+	return out
+}
+
+// AddHistory creates a history entry for a prayer request, given the status and updated text.
+func AddHistory(userID, reqID, status, text string) int {
+	if _, ok := retrieveRequest(reqID, userID); !ok {
+		return 404
+	}
+	_, err := db.Exec(`
+        INSERT INTO mpj.history
+        	("requestId", "asOf", "status", "text")
+        VALUES
+			($1, $2, $3, NULLIF($4, ''))`,
+		reqID, jsNow(), status, text)
+	if err != nil {
+		log.Print(err)
+		return 500
+	}
+	return 204
+}
+
+// AddNew stores a new prayer request and its initial history record.
+func AddNew(userID, text string) (*JournalRequest, bool) {
+	id := cuid.New()
+	now := jsNow()
+	tx, err := db.Begin()
+	if err != nil {
+		log.Print(err)
+		return nil, false
+	}
+	defer func() {
+		if err != nil {
+			log.Print(err)
+			tx.Rollback()
+		} else {
+			tx.Commit()
+		}
+	}()
+	_, err = tx.Exec(
+		`INSERT INTO mpj.request ("requestId", "enteredOn", "userId") VALUES ($1, $2, $3)`,
+		id, now, userID)
+	if err != nil {
+		return nil, false
+	}
+	_, err = tx.Exec(
+		`INSERT INTO mpj.history ("requestId", "asOf", "status", "text") VALUES ($1, $2, 'Created', $3)`,
+		id, now, text)
+	if err != nil {
+		return nil, false
+	}
+	return &JournalRequest{RequestID: id, Text: text, AsOf: now, LastStatus: `Created`}, true
+}
+
+// AddNote adds a note to a prayer request.
+func AddNote(userID, reqID, note string) int {
+	if _, ok := retrieveRequest(reqID, userID); !ok {
+		return 404
+	}
+	_, err := db.Exec(`
+		INSERT INTO mpj.note
+			("requestId", "asOf", "notes")
+		VALUES
+			($1, $2, $3)`,
+		reqID, jsNow(), note)
+	if err != nil {
+		log.Print(err)
+		return 500
+	}
+	return 204
+}
+
+// Answered retrieves all answered requests for the given user.
+func Answered(userID string) []JournalRequest {
+	rows, err := db.Query(currentRequestSQL+
+		` WHERE "userId" = $1
+		   AND "lastStatus" = 'Answered'
+		 ORDER BY "asOf" DESC`,
+		userID)
+	if err != nil {
+		log.Print(err)
+		return nil
+	}
+	defer rows.Close()
+	return makeJournal(rows, userID)
+}
+
+// ByID retrieves a journal request by its ID.
+func ByID(userID, reqID string) (*JournalRequest, bool) {
+	req := JournalRequest{}
+	err := db.QueryRow(currentRequestSQL+
+		` WHERE "requestId" = $1
+		   AND "userId" = $2`,
+		reqID, userID).Scan(
+		&req.RequestID, &req.Text, &req.AsOf, &req.LastStatus,
+	)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return nil, true
+		}
+		log.Print(err)
+		return nil, false
+	}
+	return &req, true
+}
+
+// Connect establishes a connection to the database.
+func Connect(s *Settings) bool {
+	connStr := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable",
+		s.Host, s.Port, s.User, s.Password, s.DbName)
+	var err error
+	db, err = sql.Open("postgres", connStr)
+	if err != nil {
+		log.Print(err)
+		return false
+	}
+	err = db.Ping()
+	if err != nil {
+		log.Print(err)
+		return false
+	}
+	log.Printf("Connected to postgres://%s@%s:%d/%s\n", s.User, s.Host, s.Port, s.DbName)
+	return true
+}
+
+// FullByID retrieves a journal request, including its full history and notes.
+func FullByID(userID, reqID string) (*JournalRequest, bool) {
+	req, ok := ByID(userID, reqID)
+	if !ok {
+		return nil, false
+	}
+	hRows, err := db.Query(`
+        SELECT "asOf", "status", COALESCE("text", '') AS "text"
+          FROM mpj.history
+         WHERE "requestId" = $1
+		 ORDER BY "asOf"`,
+		reqID)
+	if err != nil {
+		log.Print(err)
+		return nil, false
+	}
+	defer hRows.Close()
+	for hRows.Next() {
+		hist := History{}
+		err = hRows.Scan(&hist.AsOf, &hist.Status, &hist.Text)
+		if err != nil {
+			log.Print(err)
+			continue
+		}
+		req.History = append(req.History, hist)
+	}
+	if hRows.Err() != nil {
+		log.Print(hRows.Err())
+		return nil, false
+	}
+	req.Notes, err = NotesByID(userID, reqID)
+	if err != nil {
+		log.Print(err)
+		return nil, false
+	}
+	return req, true
+}
+
+// Journal retrieves the current user's active prayer journal.
+func Journal(userID string) []JournalRequest {
+	rows, err := db.Query(journalSQL+` ORDER BY "asOf"`, userID)
+	if err != nil {
+		log.Print(err)
+		return nil
+	}
+	defer rows.Close()
+	return makeJournal(rows, userID)
+}
+
+// NotesByID retrieves the notes for a given prayer request
+func NotesByID(userID, reqID string) ([]Note, error) {
+	if _, ok := retrieveRequest(reqID, userID); !ok {
+		return nil, sql.ErrNoRows
+	}
+	rows, err := db.Query(`
+        SELECT "asOf", "notes"
+          FROM mpj.note
+         WHERE "requestId" = $1
+		 ORDER BY "asOf" DESC`,
+		reqID)
+	if err != nil {
+		log.Print(err)
+		return nil, err
+	}
+	defer rows.Close()
+	var notes []Note
+	for rows.Next() {
+		note := Note{}
+		err = rows.Scan(&note.AsOf, &note.Notes)
+		if err != nil {
+			log.Print(err)
+			continue
+		}
+		notes = append(notes, note)
+	}
+	if rows.Err() != nil {
+		log.Print(rows.Err())
+		return nil, err
+	}
+	return notes, nil
+}
+
+/* DDL */
+
+// EnsureDB makes sure we have a known state of data structures.
+func EnsureDB() {
+	tableSQL := func(table string) string {
+		return fmt.Sprintf(`SELECT 1 FROM pg_tables WHERE schemaname='mpj' AND tablename='%s'`, table)
+	}
+	indexSQL := func(table, index string) string {
+		return fmt.Sprintf(`SELECT 1 FROM pg_indexes WHERE schemaname='mpj' AND tablename='%s' AND indexname='%s'`,
+			table, index)
+	}
+	check := func(name, test, fix string) {
+		count := 0
+		err := db.QueryRow(test).Scan(&count)
+		if err != nil {
+			if err == sql.ErrNoRows {
+				log.Printf("Fixing up %s...\n", name)
+				_, err = db.Exec(fix)
+				if err != nil {
+					log.Fatal(err)
+				}
+			} else {
+				log.Fatal(err)
+			}
+		}
+	}
+	check(`myPrayerJournal Schema`, `SELECT 1 FROM pg_namespace WHERE nspname='mpj'`,
+		`CREATE SCHEMA mpj;
+		COMMENT ON SCHEMA mpj IS 'myPrayerJournal data'`)
+	if _, err := db.Exec(`SET search_path TO mpj`); err != nil {
+		log.Fatal(err)
+	}
+	check(`request Table`, tableSQL(`request`),
+		`CREATE TABLE mpj.request (
+			"requestId" varchar(25) PRIMARY KEY,
+			"enteredOn" bigint NOT NULL,
+			"userId" varchar(100) NOT NULL);
+		COMMENT ON TABLE mpj.request IS 'Requests'`)
+	check(`history Table`, tableSQL(`history`),
+		`CREATE TABLE mpj.history (
+			"requestId" varchar(25) NOT NULL REFERENCES mpj.request,
+			"asOf" bigint NOT NULL,
+			"status" varchar(25),
+			"text" text,
+			PRIMARY KEY ("requestId", "asOf"));
+		COMMENT ON TABLE mpj.history IS 'Request update history'`)
+	check(`note Table`, tableSQL(`note`),
+		`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'`)
+	check(`request.userId Index`, indexSQL(`request`, `idx_request_userId`),
+		`CREATE INDEX "idx_request_userId" ON mpj.request ("userId");
+		COMMENT ON INDEX "idx_request_userId" IS 'Requests are retrieved by user'`)
+	check(`journal View`, `SELECT 1 FROM pg_views WHERE schemaname='mpj' AND viewname='journal'`,
+		`CREATE VIEW mpj.journal AS
+			SELECT
+				request."requestId",
+				request."userId",
+				(SELECT "text"
+				   FROM mpj.history
+				  WHERE history."requestId" = request."requestId"
+					AND "text" IS NOT NULL
+				  ORDER BY "asOf" DESC
+				  LIMIT 1) AS "text",
+				(SELECT "asOf"
+				   FROM mpj.history
+				  WHERE history."requestId" = request."requestId"
+				  ORDER BY "asOf" DESC
+				  LIMIT 1) AS "asOf",
+				(SELECT "status"
+				   FROM mpj.history
+				  WHERE history."requestId" = request."requestId"
+				  ORDER BY "asOf" DESC
+				  LIMIT 1) AS "lastStatus"
+			  FROM mpj.request;
+		COMMENT ON VIEW mpj.journal IS 'Requests with latest text'`)
+}

src/api/data/entities.go

@@ -0,0 +1,34 @@
+package data
+
+// History is a record of action taken on a prayer request, including updates to its text.
+type History struct {
+	RequestID string `json:"requestId"`
+	AsOf      int64  `json:"asOf"`
+	Status    string `json:"status"`
+	Text      string `json:"text"`
+}
+
+// Note is a note regarding a prayer request that does not result in an update to its text.
+type Note struct {
+	RequestID string `json:"requestId"`
+	AsOf      int64  `json:"asOf"`
+	Notes     string `json:"notes"`
+}
+
+// Request is the identifying record for a prayer request.
+type Request struct {
+	ID        string `json:"requestId"`
+	EnteredOn int64  `json:"enteredOn"`
+	UserID    string `json:"userId"`
+}
+
+// JournalRequest is the form of a prayer request returned for the request journal display. It also contains
+// properties that may be filled for history and notes.
+type JournalRequest struct {
+	RequestID  string    `json:"requestId"`
+	Text       string    `json:"text"`
+	AsOf       int64     `json:"asOf"`
+	LastStatus string    `json:"lastStatus"`
+	History    []History `json:"history,omitempty"`
+	Notes      []Note    `json:"notes,omitempty"`
+}

src/api/json.mjs

@@ -1,12 +0,0 @@
-'use strict'
-
-import fs from 'fs'
-
-/**
- * Read and parse a JSON file
- * @param {string} path The path to the file
- * @param {string} encoding The encoding of the file (defaults to UTF-8)
- * @return {*} The parsed contents of the file
- */
-export default (path, encoding = 'utf-8') =>
-  JSON.parse(fs.readFileSync(path, encoding))

src/api/package.json

@@ -1,45 +0,0 @@
-{
-  "name": "my-prayer-journal-api",
-  "private": true,
-  "version": "0.8.0",
-  "description": "Server API for myPrayerJournal",
-  "main": "index.js",
-  "author": "Daniel J. Summers <daniel@djs-consulting.com>",
-  "license": "MIT",
-  "dependencies": {
-    "chalk": "^2.1.0",
-    "cuid": "^1.3.8",
-    "jwks-rsa-koa": "^1.1.3",
-    "koa": "^2.3.0",
-    "koa-bodyparser": "^4.2.0",
-    "koa-jwt": "^3.2.2",
-    "koa-router": "^7.2.1",
-    "koa-send": "^4.1.0",
-    "koa-static": "^4.0.1",
-    "pg": "^7.3.0"
-  },
-  "scripts": {
-    "start": "node app.js",
-    "build": "babel src -d build",
-    "vue": "cd ../app && node build/build.js prod && cd ../api && node app.js"
-  },
-  "devDependencies": {
-    "babel": "^6.23.0",
-    "babel-cli": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-register": "^6.26.0",
-    "koa-morgan": "^1.0.1"
-  },
-  "babel": {
-    "presets": [
-      [
-        "env",
-        {
-          "targets": {
-            "node": "current"
-          }
-        }
-      ]
-    ]
-  }
-}

src/api/routes/handlers.go

@@ -0,0 +1,182 @@
+package routes
+
+import (
+	"database/sql"
+	"encoding/json"
+	"errors"
+	"log"
+	"net/http"
+	"strings"
+
+	"github.com/danieljsummers/myPrayerJournal/src/api/data"
+	jwt "github.com/dgrijalva/jwt-go"
+	routing "github.com/go-ozzo/ozzo-routing"
+)
+
+/* Support */
+
+// Set the content type, the HTTP error code, and return the error message.
+func sendError(c *routing.Context, err error) error {
+	w := c.Response
+	w.Header().Set("Content-Type", "application/json; encoding=UTF-8")
+	w.WriteHeader(http.StatusInternalServerError)
+	if err := json.NewEncoder(w).Encode(map[string]string{"error": err.Error()}); err != nil {
+		log.Print("Error creating error JSON: " + err.Error())
+	}
+	return err
+}
+
+// Set the content type and return the JSON to the user.
+func sendJSON(c *routing.Context, result interface{}) error {
+	w := c.Response
+	w.Header().Set("Content-Type", "application/json; encoding=UTF-8")
+	w.WriteHeader(http.StatusOK)
+	if err := json.NewEncoder(w).Encode(result); err != nil {
+		return sendError(c, err)
+	}
+	return nil
+}
+
+// Send an HTTP 404 response.
+func notFound(c *routing.Context) error {
+	c.Response.WriteHeader(404)
+	return nil
+}
+
+// Parse the request body as JSON.
+func parseJSON(c *routing.Context) (map[string]interface{}, error) {
+	payload := make(map[string]interface{})
+	if err := json.NewDecoder(c.Request.Body).Decode(&payload); err != nil {
+		log.Println("Error decoding JSON:", err)
+		return payload, err
+	}
+	return payload, nil
+}
+
+// userID is a convenience function to extract the subscriber ID from the user's JWT.
+// NOTE: Do not call this from public routes; there are a lot of type assertions that won't be true if the request
+//       hasn't gone through the authorization process.
+func userID(c *routing.Context) string {
+	return c.Request.Context().Value("user").(*jwt.Token).Claims.(jwt.MapClaims)["sub"].(string)
+}
+
+/* Handlers */
+
+// GET: /api/journal/
+func journal(c *routing.Context) error {
+	reqs := data.Journal(userID(c))
+	if reqs == nil {
+		reqs = []data.JournalRequest{}
+	}
+	return sendJSON(c, reqs)
+}
+
+// POST: /api/request/
+func requestAdd(c *routing.Context) error {
+	payload, err := parseJSON(c)
+	if err != nil {
+		return sendError(c, err)
+	}
+	result, ok := data.AddNew(userID(c), payload["requestText"].(string))
+	if !ok {
+		return sendError(c, errors.New("error adding request"))
+	}
+	return sendJSON(c, result)
+}
+
+// GET: /api/request/<id>
+func requestGet(c *routing.Context) error {
+	request, ok := data.ByID(userID(c), c.Param("id"))
+	if !ok {
+		return sendError(c, errors.New("error retrieving request"))
+	}
+	if request == nil {
+		return notFound(c)
+	}
+	return sendJSON(c, request)
+}
+
+// GET: /api/request/<id>/complete
+func requestGetComplete(c *routing.Context) error {
+	request, ok := data.FullByID(userID(c), c.Param("id"))
+	if !ok {
+		return sendError(c, errors.New("error retrieving request"))
+	}
+	var err error
+	request.Notes, err = data.NotesByID(userID(c), c.Param("id"))
+	if err != nil {
+		return sendError(c, err)
+	}
+	return sendJSON(c, request)
+}
+
+// GET: /api/request/<id>/full
+func requestGetFull(c *routing.Context) error {
+	request, ok := data.FullByID(userID(c), c.Param("id"))
+	if !ok {
+		return sendError(c, errors.New("error retrieving request"))
+	}
+	return sendJSON(c, request)
+}
+
+// POST: /api/request/<id>/history
+func requestAddHistory(c *routing.Context) error {
+	payload, err := parseJSON(c)
+	if err != nil {
+		return sendError(c, err)
+	}
+	c.Response.WriteHeader(
+		data.AddHistory(userID(c), c.Param("id"), payload["status"].(string), payload["updateText"].(string)))
+	return nil
+}
+
+// POST: /api/request/<id>/note
+func requestAddNote(c *routing.Context) error {
+	payload, err := parseJSON(c)
+	if err != nil {
+		return sendError(c, err)
+	}
+	c.Response.WriteHeader(data.AddNote(userID(c), c.Param("id"), payload["notes"].(string)))
+	return nil
+}
+
+// GET: /api/request/<id>/notes
+func requestGetNotes(c *routing.Context) error {
+	notes, err := data.NotesByID(userID(c), c.Param("id"))
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return notFound(c)
+		}
+		return sendError(c, err)
+	}
+	if notes == nil {
+		notes = []data.Note{}
+	}
+	return sendJSON(c, notes)
+}
+
+// GET: /api/request/answered
+func requestsAnswered(c *routing.Context) error {
+	reqs := data.Answered(userID(c))
+	if reqs == nil {
+		reqs = []data.JournalRequest{}
+	}
+	return sendJSON(c, reqs)
+}
+
+// GET: /*
+func staticFiles(c *routing.Context) error {
+	// serve index for known routes handled client-side by the app
+	r := c.Request
+	w := c.Response
+	for _, prefix := range ClientPrefixes {
+		if strings.HasPrefix(r.URL.Path, prefix) {
+			w.Header().Add("Content-Type", "text/html")
+			http.ServeFile(w, r, "./public/index.html")
+			return nil
+		}
+	}
+	// 404 here is fine; quit hacking, y'all...
+	http.ServeFile(w, r, "./public"+r.URL.Path)
+	return nil
+}

src/api/routes/router.go

@@ -0,0 +1,119 @@
+package routes
+
+import (
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io/ioutil"
+	"log"
+	"net/http"
+
+	"github.com/auth0/go-jwt-middleware"
+	jwt "github.com/dgrijalva/jwt-go"
+	"github.com/go-ozzo/ozzo-routing"
+	"github.com/go-ozzo/ozzo-routing/fault"
+)
+
+// AuthConfig contains the Auth0 configuration passed from the "auth" JSON object.
+type AuthConfig struct {
+	Domain       string `json:"domain"`
+	ClientID     string `json:"id"`
+	ClientSecret string `json:"secret"`
+}
+
+// JWKS is a structure into which the JSON Web Key Set is unmarshaled.
+type JWKS struct {
+	Keys []JWK `json:"keys"`
+}
+
+// JWK is a structure into which a single JSON Web Key is unmarshaled.
+type JWK struct {
+	Kty string   `json:"kty"`
+	Kid string   `json:"kid"`
+	Use string   `json:"use"`
+	N   string   `json:"n"`
+	E   string   `json:"e"`
+	X5c []string `json:"x5c"`
+}
+
+// authCfg is the Auth0 configuration provided at application startup.
+var authCfg *AuthConfig
+
+// jwksBytes is a cache of the JSON Web Key Set for this domain.
+var jwksBytes = make([]byte, 0)
+
+// getPEMCert is a function to get the applicable certificate for a JSON Web Token.
+func getPEMCert(token *jwt.Token) (string, error) {
+	cert := ""
+
+	if len(jwksBytes) == 0 {
+		resp, err := http.Get(fmt.Sprintf("https://%s/.well-known/jwks.json", authCfg.Domain))
+		if err != nil {
+			return cert, err
+		}
+		defer resp.Body.Close()
+
+		if jwksBytes, err = ioutil.ReadAll(resp.Body); err != nil {
+			return cert, err
+		}
+	}
+
+	jwks := JWKS{}
+	if err := json.Unmarshal(jwksBytes, &jwks); err != nil {
+		return cert, err
+	}
+	for k, v := range jwks.Keys[0].X5c {
+		if token.Header["kid"] == jwks.Keys[k].Kid {
+			cert = fmt.Sprintf("-----BEGIN CERTIFICATE-----\n%s\n-----END CERTIFICATE-----", v)
+		}
+	}
+	if cert == "" {
+		err := errors.New("unable to find appropriate key")
+		return cert, err
+	}
+
+	return cert, nil
+}
+
+// authZero is an instance of Auth0's JWT middlware. Since it doesn't support the http.HandlerFunc sig, it is wrapped
+// below; it's defined outside that function, though, so it does not get recreated every time.
+var authZero = jwtmiddleware.New(jwtmiddleware.Options{
+	ValidationKeyGetter: func(token *jwt.Token) (interface{}, error) {
+		if checkAud := token.Claims.(jwt.MapClaims).VerifyAudience(authCfg.ClientID, false); !checkAud {
+			return token, errors.New("invalid audience")
+		}
+		iss := fmt.Sprintf("https://%s/", authCfg.Domain)
+		if checkIss := token.Claims.(jwt.MapClaims).VerifyIssuer(iss, false); !checkIss {
+			return token, errors.New("invalid issuer")
+		}
+
+		cert, err := getPEMCert(token)
+		if err != nil {
+			panic(err.Error())
+		}
+
+		result, _ := jwt.ParseRSAPublicKeyFromPEM([]byte(cert))
+		return result, nil
+	},
+	SigningMethod: jwt.SigningMethodRS256,
+})
+
+// authMiddleware is a wrapper for the Auth0 middleware above with a signature ozzo-routing recognizes.
+func authMiddleware(c *routing.Context) error {
+	return authZero.CheckJWT(c.Response, c.Request)
+}
+
+// NewRouter returns a configured router to handle all incoming requests.
+func NewRouter(cfg *AuthConfig) *routing.Router {
+	authCfg = cfg
+	router := routing.New()
+	router.Use(fault.Recovery(log.Printf))
+	for _, route := range routes {
+		if route.IsPublic {
+			router.To(route.Method, route.Pattern, route.Func)
+		} else {
+			router.To(route.Method, route.Pattern, authMiddleware, route.Func)
+		}
+	}
+	return router
+}

src/api/routes/routes.go

@@ -0,0 +1,99 @@
+// Package routes contains endpoint handlers for the myPrayerJournal API.
+package routes
+
+import (
+	"net/http"
+
+	routing "github.com/go-ozzo/ozzo-routing"
+)
+
+// Route is a route served in the application.
+type Route struct {
+	Name     string
+	Method   string
+	Pattern  string
+	Func     routing.Handler
+	IsPublic bool
+}
+
+// Routes is the collection of all routes served in the application.
+type Routes []Route
+
+// routes is the actual list of routes for the application.
+var routes = Routes{
+	Route{
+		"Journal",
+		http.MethodGet,
+		"/api/journal/",
+		journal,
+		false,
+	},
+	Route{
+		"AddNewRequest",
+		http.MethodPost,
+		"/api/request/",
+		requestAdd,
+		false,
+	},
+	// Must be above GetRequestByID
+	Route{
+		"GetAnsweredRequests",
+		http.MethodGet,
+		"/api/request/answered",
+		requestsAnswered,
+		false,
+	},
+	Route{
+		"GetRequestByID",
+		http.MethodGet,
+		"/api/request/<id>",
+		requestGet,
+		false,
+	},
+	Route{
+		"GetCompleteRequestByID",
+		http.MethodGet,
+		"/api/request/<id>/complete",
+		requestGetComplete,
+		false,
+	},
+	Route{
+		"GetFullRequestByID",
+		http.MethodGet,
+		"/api/request/<id>/full",
+		requestGetFull,
+		false,
+	},
+	Route{
+		"AddNewHistoryEntry",
+		http.MethodPost,
+		"/api/request/<id>/history",
+		requestAddHistory,
+		false,
+	},
+	Route{
+		"AddNewNote",
+		http.MethodPost,
+		"/api/request/<id>/note",
+		requestAddNote,
+		false,
+	},
+	Route{
+		"GetNotesForRequest",
+		http.MethodGet,
+		"/api/request/<id>/notes",
+		requestGetNotes,
+		false,
+	},
+	// keep this route last
+	Route{
+		"StaticFiles",
+		http.MethodGet,
+		"/*",
+		staticFiles,
+		true,
+	},
+}
+
+// ClientPrefixes is a list of known route prefixes handled by the Vue app.
+var ClientPrefixes = []string{"/answered", "/journal", "/user"}

src/api/src/db/ddl.js

@@ -1,97 +0,0 @@
-'use strict'
-
-import { Pool } from 'pg'
-
-/**
- * SQL to check the existence of a table in the mpj schema
- * @param {string} table The name of the table whose existence should be checked
- */
-const tableSql = table => `SELECT 1 FROM pg_tables WHERE schemaname='mpj' AND tablename='${table}'`
-
-/**
- * SQL to determine if an index exists
- * @param {string} table The name of the table which the given index indexes
- * @param {string} index The name of the index
- */
-const indexSql = (table, index) =>
-  `SELECT 1 FROM pg_indexes WHERE schemaname='mpj' AND tablename='${table}' AND indexname='${index}'`
-
-const ddl = [
-  {
-    name: 'myPrayerJournal Schema',
-    check: `SELECT 1 FROM pg_namespace WHERE nspname='mpj'`,
-    fix: `
-      CREATE SCHEMA mpj;
-      COMMENT ON SCHEMA mpj IS 'myPrayerJournal data'`
-  },
-  {
-    name: 'request Table',
-    check: tableSql('request'),
-    fix: `
-      CREATE TABLE mpj.request (
-        "requestId" varchar(25) PRIMARY KEY,
-        "enteredOn" bigint NOT NULL,
-        "userId" varchar(100) NOT NULL);
-      COMMENT ON TABLE mpj.request IS 'Requests'`
-  },
-  {
-    name: 'history Table',
-    check: tableSql('history'),
-    fix: `
-      CREATE TABLE mpj.history (
-        "requestId" varchar(25) NOT NULL REFERENCES mpj.request,
-        "asOf" bigint NOT NULL,
-        "status" varchar(25),
-        "text" text,
-        PRIMARY KEY ("requestId", "asOf"));
-      COMMENT ON TABLE mpj.history IS 'Request update history'`
-  },
-  {
-    name: 'request.userId Index',
-    check: indexSql('request', 'idx_request_userId'),
-    fix: `
-      CREATE INDEX "idx_request_userId" ON mpj.request ("userId");
-      COMMENT ON INDEX "idx_request_userId" IS 'Requests are retrieved by user'`
-  },
-  {
-    name: 'journal View',
-    check: `SELECT 1 FROM pg_views WHERE schemaname='mpj' AND viewname='journal'`,
-    fix: `
-      CREATE VIEW mpj.journal AS
-        SELECT
-          request."requestId",
-          request."userId",
-          (SELECT "text"
-            FROM mpj.history
-            WHERE history."requestId" = request."requestId"
-              AND "text" IS NOT NULL
-            ORDER BY "asOf" DESC
-            LIMIT 1) AS "text",
-          (SELECT "asOf"
-            FROM mpj.history
-            WHERE history."requestId" = request."requestId"
-            ORDER BY "asOf" DESC
-            LIMIT 1) AS "asOf",
-          (SELECT "status"
-            FROM mpj.history
-            WHERE history."requestId" = request."requestId"
-            ORDER BY "asOf" DESC
-            LIMIT 1) AS "lastStatus"
-          FROM mpj.request;
-      COMMENT ON VIEW mpj.journal IS 'Requests with latest text'`
-  }
-]
-
-export default function (query) {
-  return {
-    /**
-     * Ensure that the database schema, tables, and indexes exist
-     */
-    ensureDatabase: async () => {
-      for (let item of ddl) {
-        const result = await query(item.check, [])
-        if (1 > result.rowCount) await query(item.fix, [])
-      }
-    }
-  }
-}

src/api/src/db/index.js

@@ -1,27 +0,0 @@
-'use strict'
-
-import { Pool, types } from 'pg'
-
-import appConfig from '../../appsettings.json'
-import ddl from './ddl'
-import request from './request'
-
-/** Pooled PostgreSQL instance */
-const pool = new Pool(appConfig.pgPool)
-
-// Return "bigint" (int8) instances as number instead of strings
-// ref: https://github.com/brianc/node-pg-types
-types.setTypeParser(20, val => parseInt(val))
-
-/**
- * Run a SQL query
- * @param {string} text The SQL command
- * @param {*[]} params The parameters for the query
- */
-const query = (text, params) => pool.query(text, params)
-
-export default {
-  query: query,
-  request: request(pool),
-  verify: ddl(query).ensureDatabase
-}

src/api/src/db/request.js

@@ -1,120 +0,0 @@
-'use strict'
-
-import { Pool } from 'pg'
-import cuid from 'cuid'
-
-const currentRequestSql = `
-  SELECT "requestId", "text", "asOf", "lastStatus"
-    FROM mpj.journal`
-
-const journalSql = `${currentRequestSql}
-  WHERE "userId" = $1
-    AND "lastStatus" <> 'Answered'`
-
-const requestNotFound = {
-  requestId: '',
-  text: 'Not Found',
-  asOf: 0
-}
-
-export default function (pool) {
-  return {
-    /**
-     * Add a history entry for this request
-     * @param {string} requestId The Id of the request
-     * @param {string} status The status for this history entry
-     * @param {string} updateText The updated text for the request (pass blank if no update)
-     */
-    addHistory: async (requestId, status, updateText) => {
-      const asOf = Date.now()
-      await pool.query(`
-        INSERT INTO mpj.history
-          ("requestId", "asOf", "status", "text")
-        VALUES
-          ($1, $2, $3, NULLIF($4, ''))`,
-      [ requestId, asOf, status, updateText ])
-    },
-
-    /**
-     * Add a new prayer request
-     * @param {string} userId The Id of the user
-     * @param {string} requestText The text of the request
-     * @return The created request
-     */
-    addNew: async (userId, requestText) => {
-      const id = cuid()
-      const enteredOn = Date.now()
-      return (async () => {
-        const client = await pool.connect()
-        try {
-          await client.query('BEGIN')
-          await client.query(
-            'INSERT INTO mpj.request ("requestId", "enteredOn", "userId") VALUES ($1, $2, $3)',
-            [ id, enteredOn, userId ])
-          await client.query(
-            `INSERT INTO mpj.history ("requestId", "asOf", "status", "text") VALUES ($1, $2, 'Created', $3)`,
-            [ id, enteredOn, requestText ])
-          await client.query('COMMIT')
-        } catch (e) {
-          await client.query('ROLLBACK')
-          throw e
-        } finally {
-          client.release()
-        }
-        return { requestId: id, text: requestText, asOf: enteredOn, lastStatus: 'Created' }
-      })().catch(e => {
-        console.error(e.stack)
-        return { requestId: '', text: 'error', asOf: 0, lastStatus: 'Errored' }
-      })
-    },
-
-    /**
-     * Get the "current" version of a request by its Id
-     * @param {string} requestId The Id of the request to retrieve
-     * @param {string} userId The Id of the user to which the request belongs
-     * @return The request, or a request-like object indicating that the request was not found
-     */
-    byId: async (userId, requestId) => {
-      const reqs = await pool.query(`${currentRequestSql}
-        WHERE "requestId" = $1
-          AND "userId" = $2`,
-        [ requestId, userId ])
-      return (0 < reqs.rowCount) ? reqs.rows[0] : requestNotFound
-    },
-
-    /**
-     * Get a prayer request, including its full history, by its Id
-     * @param {string} userId The Id of the user to which the request belongs
-     * @param {string} requestId The Id of the request to retrieve
-     * @return The request, or a request-like object indicating that the request was not found
-     */
-    fullById: async (userId, requestId) => {
-      const reqResults = await pool.query(`
-        SELECT "requestId", "enteredOn"
-          FROM mpj.request
-         WHERE "requestId" = $1
-           AND "userId" = $2`,
-        [ requestId, userId ])
-      if (0 === reqResults.rowCount) {
-        return requestNotFound
-      }
-      const req = reqResults.rows[0]
-      const history = await pool.query(`
-        SELECT "asOf", "status", COALESCE("text", '') AS "text"
-          FROM mpj.history
-         WHERE "requestId" = $1
-         ORDER BY "asOf"`,
-        [ requestId ])
-      req.history = history.rows
-      return req
-    },
-
-    /**
-     * Get the current requests for a user (i.e., their complete current journal)
-     * @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
-    
-  }
-}

src/api/src/index.js

@@ -1,36 +0,0 @@
-'use strict'
-
-import Koa from 'koa'
-import bodyParser from 'koa-bodyparser'
-import morgan from 'koa-morgan'
-import send from 'koa-send'
-import serveFrom from 'koa-static'
-
-import appConfig from '../appsettings.json'
-import router from './routes'
-
-/** Koa app */
-const app = new Koa()
-
-if (appConfig.env === 'dev') app.use(morgan('dev'))
-
-export default app
-  // Serve the Vue files from /public
-  .use(serveFrom('public'))
-  // Parse the body into ctx.request.body, if present
-  .use(bodyParser())
-  // Tie in all the routes
-  .use(router.routes())
-  .use(router.allowedMethods())
-  // Send the index.html file for what would normally get a 404
-  .use(async (ctx, next) => {
-    if (ctx.url.indexOf('/api') === -1) {
-      try {
-        await send(ctx, 'index.html', { root: __dirname + '/../public/' })
-      }
-      catch (err) {
-        return await next(err)
-      }
-    }
-    return await next()
-  })

src/api/src/routes/index.js

@@ -1,39 +0,0 @@
-'use strict'
-
-import jwt from 'koa-jwt'
-import jwksRsa from 'jwks-rsa-koa'
-import Router from 'koa-router'
-
-import appConfig from '../../appsettings.json'
-import journal from './journal'
-import request from './request'
-
-/** Authentication middleware to verify the access token against the Auth0 JSON Web Key Set */
-const checkJwt = jwt({
-  // Dynamically provide a signing key
-  // based on the kid in the header and 
-  // the singing keys provided by the JWKS endpoint.
-  secret: jwksRsa.koaJwt2Key({
-    cache: true,
-    rateLimit: true,
-    jwksRequestsPerMinute: 5,
-    jwksUri: `https://${appConfig.auth0.domain}/.well-known/jwks.json`
-  }),
-
-  // Validate the audience and the issuer.
-  audience: appConfig.auth0.clientId,
-  issuer: `https://${appConfig.auth0.domain}/`,
-  algorithms: ['RS256']
-})
-
-/** /api/journal routes */
-const journalRoutes = journal(checkJwt)
-/** /api/request routes */
-const requestRoutes = request(checkJwt)
-
-/** Combined router */
-const router = new Router({ prefix: '/api' })
-router.use('/journal', journalRoutes.routes(), journalRoutes.allowedMethods())
-router.use('/request', requestRoutes.routes(), requestRoutes.allowedMethods())
-
-export default router

src/api/src/routes/journal.js

@@ -1,16 +0,0 @@
-'use strict'
-
-import Router from 'koa-router'
-import db from '../db'
-
-const router = new Router()
-
-export default function (checkJwt) {
-
-  router.get('/', checkJwt, async (ctx, next) => {
-    const reqs = await db.request.journal(ctx.state.user.sub)
-    ctx.body = reqs
-    return await next()
-  })
-  return router
-}

src/api/src/routes/request.js

@@ -1,51 +0,0 @@
-'use strict'
-
-import Router from 'koa-router'
-import db from '../db'
-
-const router = new Router()
-
-export default function (checkJwt) {
-
-  router
-    // Add a new request
-    .post('/', checkJwt, async (ctx, next) => {
-      ctx.body = await db.request.addNew(ctx.state.user.sub, ctx.request.body.requestText)
-      await next()
-    })
-    // 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 = 204
-      await next()
-    })
-    // Get a journal-style request by its Id
-    .get('/:id', checkJwt, async (ctx, next) => {
-      const req = await db.request.byId(ctx.state.user.sub, ctx.params.id)
-      if ('Not Found' === req.text) {
-        ctx.response.status = 404
-      } else {
-        ctx.body = req
-      }
-      await next()
-    })
-    // Get a request, along with its full history
-    .get('/:id/full', 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.body = req
-      }
-      await next()
-    })
-    // Get the least-recently-updated request (used for the "pray through the journal" feature)
-    .get('/:id/oldest', checkJwt, async (ctx, next) => {
-      ctx.body = await db.request.oldest(ctx.state.user.sub)
-      await next()
-    })
-  
-
-  return router
-}

src/app/build/build.js

@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

src/app/build/check-versions.js

@@ -0,0 +1,48 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+var shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

src/app/build/dev-client.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

src/app/build/dev-server.js

@@ -0,0 +1,92 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = process.env.NODE_ENV === 'testing'
+  ? require('./webpack.prod.conf')
+  : require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: () => {},
+  heartbeat: 2000
+})
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+var uri = 'http://localhost:' + port
+
+var _resolve
+var readyPromise = new Promise(resolve => {
+  _resolve = resolve
+})
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+  console.log('> Listening at ' + uri + '\n')
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+  _resolve()
+})
+
+var server = app.listen(port)
+
+module.exports = {
+  ready: readyPromise,
+  close: () => {
+    server.close()
+  }
+}

src/app/build/utils.js

@@ -0,0 +1,71 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}

src/app/build/vue-loader.conf.js

@@ -0,0 +1,18 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  }),
+  transformToRequire: {
+    video: 'src',
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

src/app/build/webpack.base.conf.js

@@ -0,0 +1,75 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}

src/app/build/webpack.dev.conf.js

@@ -0,0 +1,35 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})

src/app/build/webpack.prod.conf.js

@@ -0,0 +1,125 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    }),
+    noParse: [/moment.js/]
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true
+      }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

src/app/build/webpack.test.conf.js

@@ -0,0 +1,31 @@
+// This is the webpack config used for unit tests.
+
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseConfig = require('./webpack.base.conf')
+
+var webpackConfig = merge(baseConfig, {
+  // use inline sourcemap for karma-sourcemap-loader
+  module: {
+    rules: utils.styleLoaders()
+  },
+  devtool: '#inline-source-map',
+  resolveLoader: {
+    alias: {
+      // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 
+      // see discussion at https://github.com/vuejs/vue-loader/issues/724
+      'scss-loader': 'sass-loader'
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/test.env')
+    })
+  ]
+})
+
+// no need for app entry during tests
+delete webpackConfig.entry
+
+module.exports = webpackConfig

src/app/config/index.js

@@ -4,8 +4,8 @@ var path = require('path')
 module.exports = {
   build: {
     env: require('./prod.env'),
-    index: path.resolve(__dirname, '../../api/public/index.html'),
+    index: path.resolve(__dirname, '../../public/index.html'),
-    assetsRoot: path.resolve(__dirname, '../../api/public'),
+    assetsRoot: path.resolve(__dirname, '../../public'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     productionSourceMap: true,

src/app/package.json

@@ -1,8 +1,8 @@
 {
   "name": "my-prayer-journal",
-  "version": "0.8.0",
+  "version": "0.9.5",
   "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",
@@ -11,18 +11,23 @@
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
+    "apistart": "cd .. && go build -o mpj-api.exe && mpj-api.exe",
+    "vue": "node build/build.js prod && cd .. && go build -o mpj-api.exe && mpj-api.exe"
   },
   "dependencies": {
-    "auth0-js": "^8.10.1",
+    "auth0-js": "^9.3.3",
-    "axios": "^0.16.2",
+    "axios": "^0.18.0",
-    "element-ui": "^1.4.4",
+    "bootstrap": "^4.0.0",
+    "bootstrap-vue": "^1.0.0-beta.9",
     "moment": "^2.18.1",
-    "pug": "^2.0.0-rc.4",
+    "pug": "^2.0.1",
-    "vue": "^2.4.4",
+    "vue": "^2.5.15",
+    "vue-awesome": "^2.3.3",
     "vue-progressbar": "^0.7.3",
-    "vue-router": "^2.6.0",
+    "vue-router": "^3.0.0",
-    "vuex": "^2.4.0"
+    "vue-toast": "^3.1.0",
+    "vuex": "^3.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.4",

src/app/src/App.vue

@@ -4,8 +4,16 @@
   #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.
+        #[router-link(:to="{ name: 'PrivacyPolicy' }") Privacy Policy] •
+        #[router-link(:to="{ name: 'TermsOfService' }") Terms of Service] •
+        #[a(href='https://github.com/danieljsummers/myprayerjournal') Developed] and hosted by
+        #[a(href='https://bitbadger.solutions') Bit Badger Solutions]
 </template>
 
 <script>
@@ -13,53 +21,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,63 @@
+<template lang="pug">
+article
+  page-title(title='Answered Requests')
+  p(v-if='!loaded') Loading answered requests...
+  div(v-if='loaded').mpj-answered-list
+    p.text-center(v-if='requests.length === 0'): em.
+      No answered requests found; once you have marked one as &ldquo;Answered&rdquo;, it will appear here
+    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,26 +1,22 @@
 <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,
-    update them as God moves in the situation, and record a final answer received on that request.&nbsp; It will also
+    update them as God moves in the situation, and record a final answer received on that request. It will also allow
-    allow individuals to review their answered prayers.
+    individuals to review their answered prayers.
   p.
-    This site is currently in very limited alpha, as it is being developed with a core group of test users.&nbsp; If
+    This site is currently in beta, but it is open and available to the general public. To get started, simply click
-    this is something in which you are interested, check back around mid-November 2017 for an update on the
+    the &ldquo;Log On&rdquo; link above, and log on with either a Microsoft or Google account. You can also learn more
-    development progress.
+    about the site at the &ldquo;Docs&rdquo; link, also above.
 </template>
 
 <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,69 @@
+<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 &ldquo;Add a New Request&rdquo; 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}&rsquo;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-navbar-nav
+      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.replace('&rsquo;', "'")} « myPrayerJournal`
+    }
+  },
+  created () {
+    document.title = `${this.title.replace('&rsquo;', "'")} « myPrayerJournal`
+  }
+}
+</script>
+
+<style scoped>
+.mpj-page-title {
+  border-bottom: solid 1px lightgray;
+  margin-bottom: 20px;
+}
+</style>

src/app/src/components/legal/PrivacyPolicy.vue

@@ -0,0 +1,54 @@
+<template lang="pug">
+article
+  page-title(title='Privacy Policy')
+  p: small: em (as of May 21, 2018)
+  p.
+    The nature of the service is one where privacy is a must. The items below will help you understand the data we
+    collect, access, and store on your behalf as you use this service.
+  hr
+  h3 Third Party Services
+  p.
+    myPrayerJournal utilizes a third-party authentication and identity provider. You should familiarize yourself with
+    the privacy policy for #[a(href='https://auth0.com/privacy' target='_blank') Auth0], as well as your chosen provider
+    (#[a(href='https://privacy.microsoft.com/en-us/privacystatement' target='_blank') Microsoft] or
+    #[a(href='https://policies.google.com/privacy' target='_blank') Google]).
+  hr
+  h3 What We Collect
+  h4 Identifying Data
+  ul
+    li.
+      The only identifying data myPrayerJournal stores is the subscriber (&ldquo;sub&rdquo;) field from the token we
+      receive from Auth0, once you have signed in through their hosted service. All information is associated with you
+      via this field.
+    li.
+      While you are signed in, within your browser, the service has access to your first and last names, along with a
+      URL to the profile picture (provided by your selected identity provider). This information is not transmitted to
+      the server, and is removed when &ldquo;Log Off&rdquo; is clicked.
+  h4 User Provided Data
+  ul
+    li.
+      myPrayerJournal stores the information you provide, including the text of prayer requests, updates, and notes;
+      and the date/time when certain actions are taken.
+  hr
+  h3 How Your Data Is Accessed / Secured
+  ul
+    li.
+      Your provided data is returned to you, as required, to display your journal or your answered requests.
+      On the server, it is stored in a controlled-access database.
+    li.
+      Your data is backed up, along with other Bit Badger Solutions hosted systems, in a rolling manner; backups are
+      preserved for the prior 7 days, and backups from the 1st and 15th are preserved for 3 months. These backups are
+      stored in a private cloud data repository.
+    li.
+      The data collected and stored is the absolute minimum necessary for the functionality of the service. There are
+      no plans to &ldquo;monetize&rdquo; this service, and storing the minimum amount of information means that the
+      data we have is not interesting to purchasers (or those who may have more nefarious purposes).
+    li Access to servers and backups is strictly controlled and monitored for unauthorized access attempts.
+  hr
+  h3 Removing Your Data
+  p.
+    At any time, you may choose to discontinue using this service. Both Microsoft and Google provide ways to revoke
+    access from this application. However, if you want your data removed from the database, please contact daniel at
+    bitbadger.solutions (via e-mail, replacing at with @) prior to doing so, to ensure we can determine which
+    subscriber ID belongs to you.
+</template>

src/app/src/components/legal/TermsOfService.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+article
+  page-title(title='Terms of Service')
+  p: small: em (as of May 21, 2018)
+  h3 1. Acceptance of Terms
+  p.
+    By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are
+    responsible to ensure that your use of this site complies with all applicable laws. Your continued use of this
+    site implies your acceptance of these terms.
+  h3 2. Description of Service and Registration
+  p.
+    myPrayerJournal is a service that allows individuals to enter and amend their prayer requests. It requires no
+    registration by itself, but access is granted based on a successful login with an external identity provider. See
+    #[router-link(:to="{ name: 'PrivacyPolicy' }") our privacy policy] for details on how that information is accessed
+    and stored.
+  h3 3. Third Party Services
+  p.
+    This service utilizes a third-party service provider for identity management. Review the terms of service for
+    #[a(href='https://auth0.com/terms' target='_blank') Auth0], as well as those for the selected authorization
+    provider (#[a(href='https://www.microsoft.com/en-us/servicesagreement' target='_blank') Microsoft] or
+    #[a(href='https://policies.google.com/terms' target='_blank') Google]).
+  h3 4. Liability
+  p.
+    This service is provided "as is", and no warranty (express or implied) exists. The service and its developers may
+    not be held liable for any damages that may arise through the use of this service.
+  h3 5. Updates to Terms
+  p.
+    These terms and conditions may be updated at any time, and this service does not have the capability to notify
+    users when these change. The date at the top of the page will be updated when any of the text of these terms is
+    updated.
+  hr
+  p.
+    You may also wish to review our #[router-link(:to="{ name: 'PrivacyPolicy' }") privacy policy] to learn how we
+    handle your data.
+</template>

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,17 +1,54 @@
 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'
+import PrivacyPolicy from '@/components/legal/PrivacyPolicy'
+import TermsOfService from '@/components/legal/TermsOfService'
 
 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: '/legal/privacy-policy',
+      name: 'PrivacyPolicy',
+      component: PrivacyPolicy
+    },
+    {
+      path: '/legal/terms-of-service',
+      name: 'TermsOfService',
+      component: TermsOfService
+    },
+    {
+      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>

src/my-prayer-journal.go

@@ -0,0 +1,48 @@
+// myPrayerJournal API Server
+package main
+
+import (
+	"encoding/json"
+	"log"
+	"net/http"
+	"os"
+
+	"github.com/danieljsummers/myPrayerJournal/src/api/data"
+	"github.com/danieljsummers/myPrayerJournal/src/api/routes"
+)
+
+// Web contains configuration for the web server.
+type Web struct {
+	Port string `json:"port"`
+}
+
+// Settings contains configuration for the myPrayerJournal API.
+type Settings struct {
+	Data *data.Settings     `json:"data"`
+	Web  *Web               `json:"web"`
+	Auth *routes.AuthConfig `json:"auth"`
+}
+
+// readSettings parses the JSON configuration file into the Settings struct.
+func readSettings(f string) *Settings {
+	config, err := os.Open(f)
+	if err != nil {
+		log.Fatal(err)
+	}
+	defer config.Close()
+	settings := Settings{}
+	if err = json.NewDecoder(config).Decode(&settings); err != nil {
+		log.Fatal(err)
+	}
+	return &settings
+}
+
+func main() {
+	cfg := readSettings("config.json")
+	if ok := data.Connect(cfg.Data); !ok {
+		log.Fatal("Unable to connect to database; exiting")
+	}
+	data.EnsureDB()
+	log.Printf("myPrayerJournal API listening on %s", cfg.Web.Port)
+	log.Fatal(http.ListenAndServe(cfg.Web.Port, routes.NewRouter(cfg.Auth)))
+}