Create top-level README.

.gitignore

@@ -1,6 +1,9 @@
 .DS_Store
+.terraform
 node_modules
+/api/deploy
 /web/dist
+/dist
 
 # local env files
 .env.local
@@ -23,3 +26,4 @@ pnpm-debug.log*
 .*.sw?
 
 api/hff_entry_forms_api
+api/test/runner

.lvimrc

@@ -0,0 +1,24 @@
+" The below configuration depends on global versions of some of these tools.
+" All tooling can be installed with the following:
+"
+"     asdf local nodejs latest
+"     npm install -g typescript prettier eslint vue-tsc
+"
+let g:ale_fixers = {
+  \ '*': ['remove_trailing_lines', 'trim_whitespace'],
+  \ 'javascript': ['eslint', 'prettier'],
+  \ 'typescript': ['prettier'],
+  \ 'vue': ['prettier'],
+  \}
+
+let g:ale_linters = {
+  \ 'markdown': [],
+  \ 'html': ['HTMLHint', 'proselint', 'write-good'],
+  \ 'rst': [],
+  \ 'typescript': ['typescript', 'eslint'],
+  \ 'javascript': ['eslint'],
+  \ 'vue': ['vuetsc', 'prettier'],
+  \}
+
+let g:ale_fix_on_save = 1
+"let g:ale_linters_explicit = 1

.tool-versions

@@ -0,0 +1,2 @@
+opentofu 1.8.1
+nim 1.6.20

Makefile

@@ -0,0 +1,35 @@
+VERSION:=$(shell git describe --always)
+TARGET_ENV ?= dev
+
+build: api-image dist/hff-entry-forms-web.${TARGET_ENV}.tar.gz
+
+clean:
+	-rm -r dist
+	make -C api clean
+	make -C web clean
+
+test:
+	(cd api && nimble unittest)
+
+update-version:
+	operations/update-version.sh
+
+api-image:
+	make -C api build-image
+
+dist/hff-entry-forms-web-${VERSION}.${TARGET_ENV}.tar.gz:
+	-mkdir dist
+	TARGET_ENV=${TARGET_ENV} make -C web build
+	tar czf dist/hff-entry-forms-web-${VERSION}.${TARGET_ENV}.tar.gz -C web/dist .
+
+deploy-api:
+	TARGET_ENV=${TARGET_ENV} make -C api build-image push-image publish
+
+deploy-web: dist/hff-entry-forms-web-${VERSION}.${TARGET_ENV}.tar.gz
+	mkdir -p temp-deploy/hff-entry-forms-web-${VERSION}
+	tar xzf dist/hff-entry-forms-web-${VERSION}.${TARGET_ENV}.tar.gz -C temp-deploy/hff-entry-forms-web-${VERSION}
+	aws s3 sync temp-deploy/hff-entry-forms-web-${VERSION} s3://forms.hopefamilyfellowship.com/${TARGET_ENV}/webroot
+	TARGET_ENV=${TARGET_ENV} operations/invalidate-cdn-cache.sh
+	rm -r temp-deploy
+
+deploy: test deploy-api deploy-web

README.md

@@ -0,0 +1,79 @@
+# HFF Entry Forms
+
+## Local Development
+
+### Web
+
+```sh
+cd web
+npm install
+make serve & # or run in a separate terminal/pane
+make build # as-needed to rebuild (not using hot-reload)
+```
+
+### API
+
+```sh
+cd api
+make serve
+
+make serve-docker   # alternatively
+```
+
+## Procedures
+
+### Version Bump
+
+1. Ensure you know the current deployed version and the current "marked
+   version." Check the current deployed version by hitting the live API:
+
+       curl https://forms-api.hopefamilyfellowship.com/v1/version
+
+   and by querying ECR:
+
+       aws ecr describe-images --repository-name 063932952339.dkr.ecr.us-west-2.amazonaws.com/hff_entry_forms_api
+
+   Check the current "marked version" by looking at the latest git tag:
+
+       git tag -n
+
+2. If necessary, bump the version using:
+
+       make update-version
+
+   This will invoke `operations/update-version.sh` which:
+
+   - updates `web/package.json`,
+   - updates `web/package-lock.json`,
+   - updates `api/src/hff_entry_forms_apipkg/version.nim`,
+   - updates `api/hff_entry_forms_api.nimble`,
+   - commits all of the above, and
+   - tags the commit with the new version.
+
+#### Release Candidates (`-rcX` versions)
+
+When we are preparing to release version a new version, we first create release
+candidates. So, in preparation for releasing, for example, version 1.2.4, we
+do the following:
+
+```sh
+# Development is concluded, ready to release 1.2.4
+$ make update-version
+Last Version: 1.2.3
+New Version: 1.2.4-rc1
+
+$ TARGET_ENV=dev make deploy
+# verify successful build and deployment
+# validate the release in the dev environment
+
+$ make update-version
+Last Version: 1.2.4-rc1
+New Version: 1.2.4
+
+$ TARGET_ENV=dev make deploy
+# verify successful build and deployment
+
+$ TARGET_ENV=prod make deploy
+# verify successful build and deployment
+# validate the release in the prod environment
+```

api/Dockerfile

@@ -0,0 +1,19 @@
+FROM 063932952339.dkr.ecr.us-west-2.amazonaws.com/alpine-nim:nim-1.6.10 AS build
+
+COPY hff_entry_forms_api.nimble /hff_entry_forms_api/
+COPY src /hff_entry_forms_api/src
+WORKDIR /hff_entry_forms_api
+RUN nimble build -y --passC:-fpermissive
+
+FROM alpine:3.16.4
+EXPOSE 80
+RUN apk -v --update add --no-cache \
+  ca-certificates \
+  libcrypto1.1 \
+  libssl1.1 \
+  pcre \
+  postgresql-client
+
+COPY --from=build /hff_entry_forms_api/hff_entry_forms_api /
+COPY hff_entry_forms_api.config.docker.json /hff_entry_forms_api.config.json
+CMD ["/hff_entry_forms_api", "serve"]

api/Makefile

@@ -0,0 +1,110 @@
+SOURCES=$(wildcard src/*.nim) $(wildcard src/hff_entry_forms_apipkg/*.nim)
+
+# AWS Account URL for the ECR repository
+ECR_ACCOUNT_URL ?= 063932952339.dkr.ecr.us-west-2.amazonaws.com
+
+# The port on the host machine (not the container)
+ifeq ($(TARGET_ENV),prod)
+	PORT=6006
+else
+	PORT=6005
+endif
+
+# The server to target when publishing the API
+TARGET_SERVER ?= sobeck.jdb-software.com
+
+TARGET_ENV ?= local
+
+# The Notion integration token.
+AUTH_SECRET ?= 123abc
+
+VERSION ?=`git describe`
+
+default: serve-docker
+
+# Running the API locally on bare metal
+# -------------------------------------
+
+hff_entry_forms_api: $(SOURCES)
+	nimble build
+
+# Run the API on this machine. Note that configuration is taken by default
+# from the `hff_entry_forms_api.config.json` file, but environment variables
+# specified when running make can be used to override these (to change the
+# INTEGRATION_TOKEN, for example).
+serve: hff_entry_forms_api
+	./hff_entry_forms_api serve --debug
+
+# Run tests
+# ---------
+#unittest:
+#	nim c -r src/unittest/nim/runner
+#
+#functest: DB_NAME = live_budget_test
+#functest: DB_CONFIG = test
+#functest: hff_entry_forms_api start-postgres
+#	echo "\n--------" >> functest-api-server.log
+#	./hff_entry_forms_api serve --config hff_entry_forms_api.config.test.json >> functest-api-server.log &
+#	-nim c -r src/functest/nim/runner "$(TEST_NAME)"
+#	curl -s -X POST localhost:$(PORT)/api/v1/control/shutdown | jq .
+#	db_migrate down -c database-$(DB_CONFIG).json
+#	PGPASSWORD=password psql -p 5500 -U postgres -h localhost -c "DROP DATABASE $(DB_NAME);"
+
+# Building and deploying the API container image
+# ----------------------------------------------
+
+# Build the container image.
+build-image: $(SOURCES)
+	docker image build -t $(ECR_ACCOUNT_URL)/hff_entry_forms_api:$(VERSION) .
+
+# Push the container image to the private AWS ECR
+push-image: build-image
+	docker push $(ECR_ACCOUNT_URL)/hff_entry_forms_api:$(VERSION)
+
+# Running locally in a container
+# --------------------------------------
+
+# Run the API in a docker container. Note that the configuration loaded into
+# the Docker container defines very little of the actual configuration as
+# environment variables are used in the deployed environments. Accordingly,
+# we must specify them explicitly here.
+serve-docker: build-image
+	docker run \
+		-e INTEGRATION_TOKEN=$(INTEGRATION_TOKEN) \
+		-e PORT=80 \
+		-p 127.0.0.1:$(PORT):80/tcp \
+		$(ECR_ACCOUNT_URL)/hff_entry_forms_api:$(VERSION)
+
+# Utility
+# -------
+
+clean:
+	-docker image rm $(ECR_ACCOUNT_URL)/hff_entry_forms_api:$(VERSION)
+
+# Authenticate docker to the AWS private elastic container repository.
+ecr-auth:
+	aws ecr get-login-password --region us-west-2 | docker login --username AWS --password-stdin $(ECR_ACCOUNT_URL)
+
+echo-vars:
+	@echo \
+		" ECR_ACCOUNT_URL=$(ECR_ACCOUNT_URL)\n" \
+		"VERSION=$(VERSION)\n" \
+		"PORT=$(PORT)\n" \
+		"INTEGRATION_TOKEN=$(INTEGRATION_TOKEN)\n"
+
+publish:
+	-rm -r deploy
+	-mkdir deploy
+	m4 \
+		-D "HFF_ENTRY_FORMS_API_VERSION=$(VERSION)" \
+		-D "TARGET_ENV=$(TARGET_ENV)" \
+		-D "TARGET_PORT=$(PORT)" \
+		hff_entry_forms_api.service \
+		> deploy/hff_entry_forms_api.$(TARGET_ENV).service
+	-ssh deployer@$(TARGET_SERVER) "docker stop hff_entry_forms_api.$(TARGET_ENV).service && sudo systemctl stop hff_entry_forms_api.$(TARGET_ENV)"
+	ssh deployer@$(TARGET_SERVER) "aws ecr get-login-password --region us-west-2 | docker login --username AWS --password-stdin $(ECR_ACCOUNT_URL) && docker pull $(ECR_ACCOUNT_URL)/hff_entry_forms_api:$(VERSION)"
+	scp \
+		deploy/hff_entry_forms_api.$(TARGET_ENV).service \
+		deployer@$(TARGET_SERVER):/etc/systemd/system/hff_entry_forms_api.$(TARGET_ENV).service
+	ssh deployer@$(TARGET_SERVER) "sudo systemctl daemon-reload"
+	ssh deployer@$(TARGET_SERVER) "sudo systemctl start hff_entry_forms_api.$(TARGET_ENV)"

api/hff_entry_forms_api.config.docker.json

@@ -0,0 +1,7 @@
+{
+  "eventParentId": "ffff5ca5cb0547b6a99fb78cdb9b0170",
+  "knownOrigins": [ "https://forms.hopefamilyfellowship.com" ],
+  "notionApiBaseUrl": "https://api.notion.com/v1",
+  "notionVersion": "2021-08-16",
+  "port": 80
+}

api/hff_entry_forms_api.config.json

@@ -1,6 +1,6 @@
 {
   "eventParentId": "ffff5ca5cb0547b6a99fb78cdb9b0170",
-  "knownOrigins": [ "http://curl.localhost" ],
+  "knownOrigins": [ "http://localhost:8080", "http://curl.localhost" ],
   "notionApiBaseUrl": "https://api.notion.com/v1",
   "notionVersion": "2021-08-16",
   "port": 8300

api/hff_entry_forms_api.nimble

@@ -1,6 +1,6 @@
 # Package
 
-version       = "0.1.0"
+version       = "0.3.3"
 author        = "Jonathan Bernard"
 description   = "Hope Family Fellowship entry forms."
 license       = "GPL-3.0-or-later"
@@ -15,7 +15,11 @@ requires @["docopt", "jester"]
 
 requires "https://git.jdb-software.com/jdb/nim-cli-utils.git >= 0.6.3"
 requires "https://git.jdb-software.com/jdb/nim-time-utils.git >= 0.5.0"
-requires "https://git.jdb-software.com/jdb/update-nim-package-version"
+requires "https://git.jdb-software.com/jdb/update-nim-package-version.git"
+requires "https://git.jdb-software.com/hope-family-fellowship/notion-api-client.git"
 
 task updateVersion, "Update the version of this package.":
-  exec "update_nim_package_version hff_entry_forms_api 'src/hff_entry_forms_apipkg/version.nim'"
+  exec "update_nim_package_version hff_entry_forms_api 'src/hff_entry_forms_apipkg/version.nim'"
+
+task unittest, "Runs the unit test suite.":
+  exec "nim c -r test/runner"

api/hff_entry_forms_api.service

@@ -0,0 +1,16 @@
+[Unit]
+Description=HFF Entry Forms (TARGET_ENV)
+After=network-online.target
+Requires=docker.service
+
+[Service]
+TimeoutStartSec=0
+Restart=always
+ExecStartPre=-/usr/bin/docker rm %n
+ExecStart=/usr/bin/docker run --rm -p TARGET_PORT:80 --name %n \
+  --env-file /etc/hff_entry_forms/TARGET_ENV.env \
+  063932952339.dkr.ecr.us-west-2.amazonaws.com/hff_entry_forms_api:HFF_ENTRY_FORMS_API_VERSION
+ExecStop=/usr/bin/docker stop --name %n
+
+[Install]
+WantedBy=default.target

api/src/hff_entry_forms_api.nim

@@ -1,4 +1,5 @@
-import cliutils, docopt, json, logging, sequtils, strutils, tables
+import std/[json, logging, os, sequtils, strutils, tables]
+import cliutils, docopt
 
 import hff_entry_forms_apipkg/api
 import hff_entry_forms_apipkg/version
@@ -26,12 +27,13 @@ proc loadConfig(args: Table[string, docopt.Value]): HffEntryFormsApiConfig =
   let cfg = CombinedConfig(docopt: args, json: json)
 
   result = HffEntryFormsApiConfig(
-    debug: parseBool(cfg.getVal("debug")),
+    debug: cfg.hasKey("debug") and cfg.getVal("debug") == "true",
     eventParentId: cfg.getVal("event-parent-id"),
     integrationToken: cfg.getVal("integration-token"),
-    knownOrigins: cfg.getVal("known-origins")[1..^2].split(',').mapIt(it[1..^2]),
+    knownOrigins: cfg.getVal("known-origins")[1..^2].split(',').mapIt(it.strip[1..^2]),
     notionApiBaseUrl: cfg.getVal("notion-api-base-url"),
     notionVersion: cfg.getVal("notion-version"),
+    notionConfigDbId: cfg.getVal("notion-config-db-id"),
     port: parseInt(cfg.getVal("port", "8300")))
 
 when isMainModule:
@@ -42,7 +44,7 @@ Usage:
 
 Options:
 
-  -C, --config <cfgFile>    Location of the config file to use (defaults to
+  -c, --config <cfgFile>    Location of the config file to use (defaults to
                             hff_entry_forms_api.config.json)
 
   -d, --debug               Log debugging information.
@@ -52,17 +54,18 @@ Options:
 
   let consoleLogger = newConsoleLogger(
     levelThreshold=lvlInfo,
-    fmtStr="$app - $levelname: ")
+    fmtStr="$appname - $levelname: ",
+    useStderr=true)
   logging.addHandler(consoleLogger)
 
   # Initialize our service context
   let args = docopt(doc, version = HFF_ENTRY_FORMS_API_VERSION)
 
-  if args["--debug"]:
-    consoleLogger.levelThreshold = lvlDebug
-
   let cfg = loadConfig(args)
 
+  if cfg.debug:
+    consoleLogger.levelThreshold = lvlDebug
+
   if args["serve"]: start(cfg)
 
  except:

api/src/hff_entry_forms_apipkg/api.nim

@@ -26,7 +26,7 @@ template jsonResp(code: HttpCode,
                   headersToSend: RawHeaders = @{:} ) =
   ## Immediately send a JSON response and stop processing the request.
   let reqOrigin =
-    if request.headers.hasKey("Origin"): $(request.headers["Origin"])
+    if headers(request).hasKey("Origin"): $(headers(request)["Origin"])
     else: ""
 
   let corsHeaders =
@@ -34,11 +34,13 @@ template jsonResp(code: HttpCode,
       @{
         "Access-Control-Allow-Origin": reqOrigin,
         "Access-Control-Allow-Credentials": "true",
-        "Access-Control-Allow-Methods": $(request.reqMethod),
+        "Access-Control-Allow-Methods": $(reqMethod(request)),
         "Access-Control-Allow-Headers": "Authorization,X-CSRF-TOKEN"
       }
     else: @{:}
 
+  #debug "Request origin: $#\nKnown origins: $#\nAdding headers:\n$#" %
+  #  [ reqOrigin, cfg.knownOrigins.join(" | "), $corsHeaders ]
   halt(
     code,
     headersToSend & corsHeaders & @{
@@ -81,7 +83,7 @@ template errorResp(err: ref ApiError): void =
 template optionsResp(allowedMethods: seq[HttpMethod]) =
 
   let reqOrigin =
-    if request.headers.hasKey("Origin"): $(request.headers["Origin"])
+    if headers(request).hasKey("Origin"): $(headers(request)["Origin"])
     else: ""
 
   let corsHeaders =
@@ -126,9 +128,15 @@ proc start*(cfg: HffEntryFormsApiConfig): void =
     get "/version":
       jsonResp(Http200, $(%("hff_entry_forms_api v" & HFF_ENTRY_FORMS_API_VERSION)))
 
-    options "/add-page": optionsResp(@[HttpPost])
+    options "/event-proposals/config": optionsResp(@[HttpGet])
 
-    post "/propose-event":
+    get "/event-proposals/config":
+      withApiErrors:
+        dataResp(%getEventProposalConfig(cfg))
+
+    options "/event-proposals": optionsResp(@[HttpPost])
+
+    post "/event-proposals":
       withApiErrors:
         let ep = parseEventProposal(parseJson(request.body))
         if createProposedEvent(cfg, ep): statusResp(Http200)

api/src/hff_entry_forms_apipkg/models.nim

@@ -1,4 +1,6 @@
-import json, times, timeutils
+import std/json, std/times
+import hff_notion_api_client/utils, timeutils
+
 
 type
   EventProposal* = object
@@ -7,9 +9,15 @@ type
     purpose*: string
     department*: string
     owner*: string
+    location*: string
     date*: DateTime
     budgetInDollars*: int
 
+  MultiSelectOption = tuple[value: string, color: string]
+
+  EventProposalConfig* = object
+    departmentOptions*: seq[MultiSelectOption]
+
 proc getOrFail(n: JsonNode, key: string): JsonNode =
   ## convenience method to get a key from a JObject or raise an exception
   if not n.hasKey(key):
@@ -20,14 +28,6 @@ proc getOrFail(n: JsonNode, key: string): JsonNode =
 proc parseIso8601(n: JsonNode, key: string): DateTime =
   return parseIso8601(n.getOrFail(key).getStr)
 
-proc textProp(value: string): JsonNode =
-  return %*[
-    {
-      "type": "text",
-      "text": { "content": value }
-    }
-  ]
-
 proc parseEventProposal*(n: JsonNode): EventProposal {.raises: [JsonParsingError].} =
 
   try:
@@ -36,42 +36,55 @@ proc parseEventProposal*(n: JsonNode): EventProposal {.raises: [JsonParsingError
       description: n.getOrFail("description").getStr,
       purpose: n.getOrFail("purpose").getStr,
       department: n.getOrFail("department").getStr,
+      location: n.getOrFail("location").getStr,
       owner: n.getOrFail("owner").getStr,
       date: n.parseIso8601("date"),
       budgetInDollars: n.getOrFail("budgetInDollars").getInt)
   except:
     raise newException(JsonParsingError, "Invalid EventProposal: " & getCurrentExceptionMsg())
 
-proc asNotionPage*(ep: EventProposal): JsonNode =
+proc toPage*(ep: EventProposal): JsonNode =
   result = %*{
     "properties": {
-      "Event": { "title": textProp(ep.name) },
+      "Event": makeTextProp("title", ep.name),
       "Date": { "date": { "start": formatIso8601(ep.date) } },
       "Department": { "multi_select": [ { "name": ep.department } ] },
-      "Location": { "rich_text": textProp("") },
-      "Owner": { "rich_text": textProp(ep.owner) },
-      "State": { "select": { "name": "Proposed" } }
+      "Location": makeTextProp("rich_text", ep.location),
+      "Owner": makeTextProp("rich_text", ep.owner),
+      "State": { "select": { "name": "Proposed" } },
+      "Visibility": { "select": { "name": "Public" } }
     },
     "children": [
       {
         "object": "block",
         "type": "heading_2",
-        "heading_2": { "text": textProp("Purpose") }
+        "heading_2": makeTextProp("text", "Purpose")
       },
       {
         "object": "block",
         "type": "paragraph",
-        "paragraph": { "text": textProp(ep.purpose) }
+        "paragraph": makeTextProp("text", ep.purpose)
       },
       {
         "object": "block",
         "type": "heading_2",
-        "heading_2": { "text": textProp("Description") }
+        "heading_2": makeTextProp("text", "Description")
       },
       {
         "object": "block",
         "type": "paragraph",
-        "paragraph": { "text": textProp(ep.description) }
+        "paragraph": makeTextProp("text", ep.description)
       }
     ]
   }
+
+proc `%`(mso: MultiSelectOption): JsonNode =
+  %*{
+    "value": mso.value,
+    "color": mso.color
+  }
+
+proc `%`*(epc: EventProposalConfig): JsonNode =
+  %*{
+    "departments": epc.departmentOptions
+  }

api/src/hff_entry_forms_apipkg/notion_client.nim

@@ -1,22 +1,46 @@
-import json, logging, std/httpclient, strutils
+import std/[json, httpclient, logging, options, sequtils, strutils]
+import hff_notion_api_client
+import hff_notion_api_client/config
 
 import ./models, ./service
 
+var notionClient = none[NotionClient]()
+
+proc getNotionClient(cfg: HffEntryFormsApiConfig): NotionClient =
+  if notionClient.isNone:
+    notionClient = some(initNotionClient(NotionClientConfig(
+      apiVersion: cfg.notionVersion,
+      apiBaseUrl: cfg.notionApiBaseUrl,
+      configDbId: cfg.notionConfigDbId,
+      integrationToken: cfg.integrationToken)))
+  return notionClient.get
+
+proc getEventProposalConfig*(cfg: HffEntryFormsApiConfig): EventProposalConfig =
+  let notion = getNotionClient(cfg)
+
+  var bodyJson: JsonNode
+  try: bodyJson = notion.fetchDatabaseObject(cfg.eventParentId)
+  except:
+    raiseApiError(Http500,
+      "unable to read event propsal configuration from notion API")
+
+  let departmentOptionsJson = bodyJson{
+    "properties", "Department", "multi_select", "options"}
+
+  if departmentOptionsJson.isNil:
+    raiseApiError(Http500,
+      "missing read department values from Notion API-supplied event schema")
+
+  return EventProposalConfig(
+    departmentOptions: departmentOptionsJson.toSeq.mapIt(
+      ( value: it["name"].getStr, color: it["color"].getStr )
+    )
+  )
+
 proc createProposedEvent*(cfg: HffEntryFormsApiConfig, ep: EventProposal): bool =
-  let headers = newHttpHeaders([
-    ("Content-Type", "application/json"),
-    ("Authorization", "Bearer " & cfg.integrationToken),
-    ("Notion-Version", cfg.notionVersion)
-  ], true)
-  let http = newHttpClient(headers = headers, )
+  let notion = getNotionClient(cfg)
 
-  debug $headers
-  let epNotionPage = ep.asNotionPage
-  epNotionPage["parent"] = %*{ "database_id": cfg.eventParentId }
-
-  let apiResp = http.post(cfg.notionApiBaseUrl & "/pages", $epNotionPage)
-
-  debug apiResp.status
-  if not apiResp.status.startsWith("2"): debug apiResp.body
-
-  return apiResp.status.startsWith("2")
+  try:
+    discard notion.createDbPage(cfg.eventParentId, ep)
+    return true
+  except: return false

api/src/hff_entry_forms_apipkg/service.nim

@@ -12,6 +12,7 @@ type
     knownOrigins*: seq[string]
     notionApiBaseUrl*: string
     notionVersion*: string
+    notionConfigDbId*: string
     port*: int
 
 proc newApiError*(parent: ref Exception = nil, respCode: HttpCode, respMsg: string, msg = ""): ref ApiError =

api/src/hff_entry_forms_apipkg/version.nim

@@ -1 +1 @@
-const HFF_ENTRY_FORMS_API_VERSION* = "0.1.0"
+const HFF_ENTRY_FORMS_API_VERSION* = "0.3.3"

api/test/config.nims

@@ -0,0 +1,2 @@
+switch("path", "../src")
+switch("verbosity", "0")

api/test/runner.nim

@@ -0,0 +1,3 @@
+import std/unittest
+
+import ./tmodels

api/test/tmodels.nim

@@ -0,0 +1,20 @@
+import std/json, std/times, std/unittest
+
+import hff_entry_forms_apipkg/models
+
+suite "models":
+
+  test "toPage(EventProposal)":
+    let ep = EventProposal(
+      name: "Test Event",
+      description: "A test event.",
+      purpose: "Event example for unit testing.",
+      department: "Testing",
+      location: "Hope Family Fellowship",
+      owner: "Jonathan Bernard",
+      date: parse("2021-10-30", "YYYY-MM-dd"),
+      budgetInDollars: 56)
+
+    let expectedJson = """{"properties":{"Event":{"title":[{"type":"text","text":{"content":"Test Event"}}]},"Date":{"date":{"start":"2021-10-30T00:00:00-05:00"}},"Department":{"multi_select":[{"name":"Testing"}]},"Location":{"rich_text":[{"type":"text","text":{"content":"Hope Family Fellowship"}}]},"Owner":{"rich_text":[{"type":"text","text":{"content":"Jonathan Bernard"}}]},"State":{"select":{"name":"Proposed"}},"Visibility":{"select":{"name":"Public"}}},"children":[{"object":"block","type":"heading_2","heading_2":{"text":[{"type":"text","text":{"content":"Purpose"}}]}},{"object":"block","type":"paragraph","paragraph":{"text":[{"type":"text","text":{"content":"Event example for unit testing."}}]}},{"object":"block","type":"heading_2","heading_2":{"text":[{"type":"text","text":{"content":"Description"}}]}},{"object":"block","type":"paragraph","paragraph":{"text":[{"type":"text","text":{"content":"A test event."}}]}}]}"""
+
+    check $(ep.toPage) == expectedJson

operations/README.md

@@ -0,0 +1,13 @@
+# HFF Entry Forms - DevOps
+
+## System Components
+
+* DNS - managed by AWS
+* API Server - hosted on `sobeck.jdb-software.com`
+* API Loadbalancer - using the main load balancer for JDB Software
+* Web App - Served by CloudFront from an S3 bucket managed by JDB Software
+* Certificates - Manually created and validated for \*.HFF.com
+* Notion Integration - defined in Notion, token provided via the environment
+  specific config files at `/etc/hff_entry_forms/{dev,prod}.env` and passed
+  into the docker container at runtime ad defined in the SystemD service file
+  (see `api/hff_entry_forms_api.service`)

operations/invalidate-cdn-cache.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+echo "Looking up CloudFront distribution ID for HFF Entry Forms ${TARGET_ENV} environment."
+cloudfront_distribution_id=$(\
+  aws cloudfront list-distributions \
+    --query "DistributionList.Items[?starts_with(Comment, 'HFF Entry Forms ${TARGET_ENV}')].Id | [0]" \
+  | sed -e 's/^"//' -e 's/"$//'
+)
+
+if [[ -z "${cloudfront_distribution_id}" ]]; then
+  >&2 echo "Unable to find CloudFront distribution for domain ${TARGET_ENV}."
+  exit 3
+fi
+
+echo "Found distribution ID ${cloudfront_distribution_id}."
+
+echo "Invalidating the CloudFront cache for ${TARGET_ENV}."
+invalidation_id=$(aws cloudfront create-invalidation \
+  --query 'Invalidation.Id' \
+  --distribution-id "${cloudfront_distribution_id}" \
+  --paths '/index.html')
+
+if [[ $? -ne 0 || -z "${invalidation_id}" ]]; then
+  >&2 echo "Unable to create the CloudFront invalidation."
+else
+  echo "Successfully created invalidation ${invalidation_id}."
+fi
+
+echo "Done."

operations/opentofu/.terraform.lock.hcl

@@ -0,0 +1,36 @@
+# This file is maintained automatically by "tofu init".
+# Manual edits may be lost in future updates.
+
+provider "registry.opentofu.org/hashicorp/aws" {
+  version = "5.62.0"
+  hashes = [
+    "h1:DzXMlmL2hRPfACAbN1PUhnLDGY9Kl0vbrt05qSfGsxA=",
+    "zh:2cb519ce7f3cbcb88b2e93dd3b3424ad85a347fc0e7429661945da5df8a20fda",
+    "zh:2fc7ed911cceaa1652d1f4090eaa91e8463aba86873910bccf16601260379886",
+    "zh:395b32d157adeb92571a0efd230c73bbee01744782a50356fb16e8946bd63ffb",
+    "zh:43303d36af40a568cd40bd54dc9e8430e18c4a4d78682b459dca8c755c717a0c",
+    "zh:65b2c6e955deeeffb9d9cd4ed97e8c532a453ba690d0e3d88c740f9036bccc4d",
+    "zh:a9d09dc9daf33b16894ed7d192ceb4c402261da58cded503a3ffa1dd2373e3fb",
+    "zh:c5e9f8bc4397c2075b6dc62458be51b93322517affd760c161633d56b0b9a334",
+    "zh:db0921c091402179edd549f8aa4f12dce18aab09d4302e800c67d6ec6ff88a86",
+    "zh:e7d13f9c0891446d03c29e4fcd60de633f71bbf1bc9786fca47a0ee356ac979a",
+    "zh:f128a725dbdbd31b9ed8ea478782152339c9fab4d635485763c8da2a477fe3f6",
+  ]
+}
+
+provider "registry.opentofu.org/hashicorp/external" {
+  version = "2.3.3"
+  hashes = [
+    "h1:bDJy8Mj5PMTEuxm6Wu9A9dATBL+mQDmHx8NnLzjvCcc=",
+    "zh:1ec36864a1872abdfd1c53ba3c6837407564ac0d86ab80bf4fdc87b41106fe68",
+    "zh:2117e0edbdc88f0d22fe02fe6b2cfbbbc5d5ce40f8f58e484d8d77d64dd7340f",
+    "zh:4bcfdacd8e2508c16e131de9072cecd359e0ade3b8c6798a049883f37a5872ea",
+    "zh:4da71bc601a37bf8b7413c142d43f5f28e97e531d4836ee8624f41b9fb62e250",
+    "zh:55b9eebac79a46f88db5615f1ee0ac4c3f9351caa4eb8542171ef5d87de60338",
+    "zh:74d64afaef190321f8ddf1c4a9c6489d6cf51098704a2456c1553406e8306328",
+    "zh:8a357e51a0ec69872fafc64da3c6a1039277d325255ef5a264b727d83995d18b",
+    "zh:aacd2e6c13fe19115d51cd28a40a28da017bb48c2e18dec4460d1c37506b1495",
+    "zh:e19c8bdf0e059341d008a50f9138c44009e9ebb3a8047a300e6bc63ed8af8ea0",
+    "zh:fafa9639d8b8402e35f3864c6cfb0762ec57cc365a8f383e2acf81105b1b9eea",
+  ]
+}

operations/opentofu/common.tf

@@ -0,0 +1,21 @@
+### Variables
+
+variable "aws_region" {
+  description = "https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-regions-availability-zones.html"
+  default = "us-west-2" # Oregon
+}
+
+variable "app_root_url" {
+  description = "Name of the S3 bucket to store deployed artifacts, logs, etc."
+  default = "forms.hopefamilyfellowship.com"
+}
+
+variable "cloudfront_certificate_arn" {
+  description = "Name of the certificate to use for CloudFront distributions (must be in us-east-1)."
+  default = "arn:aws:acm:us-east-1:063932952339:certificate/8e4b4a05-d61e-49af-b7e9-8e59999f197a"
+}
+
+variable "api_certificate_arn" {
+  description = "Name of the certificate to use for the API load balancer (must be in the same region as the loadbalancer)."
+  default = "arn:aws:acm:us-west-2:063932952339:certificate/04c33fd7-a6b0-4f58-8e8a-fddbe361aa85"
+}

operations/opentofu/deployed_env/cloudfront.tf

@@ -0,0 +1,99 @@
+data "aws_iam_policy_document" "bucket_access_policy" {
+  statement {
+    actions   = [ "s3:GetObject" ]
+    effect    = "Allow"
+    resources = [ "${var.artifact_bucket.arn}/${var.environment}/webroot/*" ]
+
+    principals {
+      type        = "AWS"
+      identifiers = [ aws_cloudfront_origin_access_identity.origin_access_identity.iam_arn ]
+    }
+  }
+
+  statement {
+    actions   = [ "s3:ListBucket" ]
+    effect    = "Allow"
+    resources = [ var.artifact_bucket.arn ]
+
+    principals {
+      type        = "AWS"
+      identifiers = [ aws_cloudfront_origin_access_identity.origin_access_identity.iam_arn ]
+    }
+  }
+}
+
+output "oai_access_policy" {
+ value = data.aws_iam_policy_document.bucket_access_policy
+}
+
+resource "aws_cloudfront_origin_access_identity" "origin_access_identity" {
+  comment = "OAI for HFF Entry Forms {$var.environment} environment."
+}
+
+resource "aws_cloudfront_distribution" "s3_distribution" {
+  origin {
+    domain_name = var.artifact_bucket.bucket_regional_domain_name
+    origin_id   = "S3-HffEntryForms-${var.environment}"
+    origin_path = "/${var.environment}/webroot"
+
+    s3_origin_config {
+      origin_access_identity = aws_cloudfront_origin_access_identity.origin_access_identity.cloudfront_access_identity_path
+    }
+  }
+
+  enabled             = true
+  is_ipv6_enabled     = true
+  comment             = "HFF Entry Forms ${var.environment} distribution."
+  default_root_object = "/index.html"
+
+  logging_config {
+    include_cookies = false
+    bucket          = var.artifact_bucket.bucket_domain_name
+    prefix          = "${var.environment}/logs/cloudfront"
+  }
+
+  aliases = [local.app_domain_name]
+
+  default_cache_behavior {
+    allowed_methods   = ["GET", "HEAD", "OPTIONS"]
+    cached_methods    = ["GET", "HEAD", "OPTIONS"]
+    target_origin_id  = "S3-HffEntryForms-${var.environment}"
+
+    forwarded_values {
+      query_string = false
+
+      cookies {
+        forward = "none"
+      }
+    }
+
+    min_ttl                 = 0
+    default_ttl             = 60 * 60 * 24 * 365  # cache for a year
+    max_ttl                 = 60 * 60 * 24 * 365  # cache for a year
+    compress                = true
+    viewer_protocol_policy  = "redirect-to-https"
+  }
+
+  custom_error_response {
+    error_code          = 404
+    response_code       = 200
+    response_page_path  = "/index.html"
+  }
+
+  price_class = "PriceClass_100" # US and Canada only
+
+  restrictions {
+    geo_restriction {
+      restriction_type = "none"
+    }
+  }
+  tags = {
+    Environment = local.environment_name
+  }
+
+  viewer_certificate {
+    # TODO
+    acm_certificate_arn = var.cloudfront_certificate_arn
+    ssl_support_method  = "sni-only"
+  }
+}

operations/opentofu/deployed_env/load-balancer.tf

@@ -0,0 +1,49 @@
+resource "aws_lb_target_group" "hff_entry_forms_api" {
+  name        = "${local.environment_name}-${substr(uuid(), 0, 2)}"
+  port        = var.target_port
+  protocol    = "HTTP"
+  target_type = "instance"
+  vpc_id      = data.terraform_remote_state.jdbsoft.outputs.aws_vpc_jdbsoft.id
+
+  health_check {
+    enabled   = true
+    matcher   = "200"
+    path      = "/v1/version"
+  }
+
+  lifecycle {
+    create_before_destroy = true
+    ignore_changes        = [name]
+  }
+
+  tags = {
+    Name        = local.api_domain_name
+    Environment = local.environment_name
+  }
+}
+
+resource "aws_lb_listener_rule" "hff_entry_forms_api" {
+  listener_arn  = data.terraform_remote_state.jdbsoft.outputs.aws_lb_listener_https.arn
+
+  action {
+    type              = "forward"
+    target_group_arn  = aws_lb_target_group.hff_entry_forms_api.arn
+  }
+
+  condition {
+    host_header {
+      values = [ local.api_domain_name ]
+    }
+  }
+
+  tags = {
+    Name        = "${local.api_domain_name} HTTPS"
+    Environment = local.environment_name
+  }
+}
+
+resource "aws_lb_target_group_attachment" "hff_entry_forms_api" {
+  target_group_arn  = aws_lb_target_group.hff_entry_forms_api.arn
+  target_id         = data.terraform_remote_state.jdbsoft.outputs.sobeck-instance-id
+  port              = var.target_port
+}

operations/opentofu/deployed_env/variables.tf

@@ -0,0 +1,46 @@
+### Variables
+
+variable "environment" {
+  description = "The short name of this deployed environment. For example: 'dev' or 'prod'. This short name will be used to name resources (CloudFront distributions, etc.)"
+}
+
+variable "artifact_bucket" {
+  description = "The aws_s3_bucket object representing the artifact bucket where deployed artifacts, logs, etc. live."
+}
+
+variable "ecr_repo" {
+  description = "ECR repository information."
+}
+
+variable "target_port" {
+  description = "The port the deployed service will listen on."
+}
+
+variable "api_certificate_arn" {
+  description = "ARN of the certificate to use for the API loadbalancer."
+}
+
+variable "cloudfront_certificate_arn" {
+  description = "ARN of the certificate to use for CloudFront."
+}
+
+locals {
+  environment_name  = "HffEntryForms-${var.environment}"
+  app_domain_name   = "forms${var.environment == "prod" ? "" : "-${var.environment}"}.hopefamilyfellowship.com"
+  api_domain_name   = "forms-api${var.environment == "prod" ? "" : "-${var.environment}"}.hopefamilyfellowship.com"
+}
+
+data "external" "git_describe" {
+  program = ["sh", "-c", "git describe | xargs printf '{\"version\": \"%s\"}'"]
+}
+
+data "terraform_remote_state" "jdbsoft" {
+  backend = "s3"
+
+  config = {
+    bucket = "operations.jdb-software.com"
+    region = "us-west-2"
+    key    = "terraform/operations.tfstate"
+    dynamodb_table = "terraform-state-lock.jdb-software.com"
+  }
+}

operations/opentofu/ecr.tf

@@ -0,0 +1,8 @@
+resource "aws_ecr_repository" "hff_entry_forms_api" {
+  name                  = "hff_entry_forms_api"
+  image_tag_mutability  = "IMMUTABLE"
+
+  image_scanning_configuration {
+    scan_on_push  = true
+  }
+}

operations/opentofu/main.tf

@@ -0,0 +1,42 @@
+provider "aws" {
+  region = var.aws_region
+}
+
+resource "aws_s3_bucket" "hff_entry_forms" {
+  bucket = var.app_root_url
+  acl    = "log-delivery-write"
+}
+
+module "dev_env" {
+  source = "./deployed_env"
+
+  environment                 = "dev"
+  api_certificate_arn         = var.api_certificate_arn
+  artifact_bucket             = aws_s3_bucket.hff_entry_forms
+  cloudfront_certificate_arn  = var.cloudfront_certificate_arn
+  ecr_repo                    = aws_ecr_repository.hff_entry_forms_api
+  target_port                 = 6005
+}
+
+module "prod_env" {
+  source = "./deployed_env"
+
+  environment                 = "prod"
+  api_certificate_arn         = var.api_certificate_arn
+  artifact_bucket             = aws_s3_bucket.hff_entry_forms
+  cloudfront_certificate_arn  = var.cloudfront_certificate_arn
+  ecr_repo                    = aws_ecr_repository.hff_entry_forms_api
+  target_port                 = 6006
+}
+
+data "aws_iam_policy_document" "cloudfront_access_policy" {
+  source_policy_documents = [
+    module.dev_env.oai_access_policy.json,
+    module.prod_env.oai_access_policy.json
+  ]
+}
+
+resource "aws_s3_bucket_policy" "hff_entry_forms" {
+  bucket = aws_s3_bucket.hff_entry_forms.id
+  policy = data.aws_iam_policy_document.cloudfront_access_policy.json
+}

operations/opentofu/terraform.tf

@@ -0,0 +1,8 @@
+terraform {
+  backend "s3" {
+    bucket = "forms.hopefamilyfellowship.com"
+    region = "us-west-2"
+    key    = "terraform.tfstate"
+    dynamodb_table = "terraform-state-lock.jdb-software.com"
+  }
+}

operations/opentofu/terraform.tfstate.backup

@@ -0,0 +1,88 @@
+{
+  "version": 4,
+  "terraform_version": "0.13.1",
+  "serial": 3,
+  "lineage": "a0c8b19d-5dd4-8895-bb16-f9d47e764e93",
+  "outputs": {},
+  "resources": [
+    {
+      "mode": "managed",
+      "type": "aws_ecr_repository",
+      "name": "hff_entry_forms",
+      "provider": "provider[\"registry.terraform.io/hashicorp/aws\"]",
+      "instances": [
+        {
+          "schema_version": 0,
+          "attributes": {
+            "arn": "arn:aws:ecr:us-west-2:063932952339:repository/hff_entry_forms",
+            "encryption_configuration": [
+              {
+                "encryption_type": "AES256",
+                "kms_key": ""
+              }
+            ],
+            "id": "hff_entry_forms",
+            "image_scanning_configuration": [
+              {
+                "scan_on_push": true
+              }
+            ],
+            "image_tag_mutability": "IMMUTABLE",
+            "name": "hff_entry_forms",
+            "registry_id": "063932952339",
+            "repository_url": "063932952339.dkr.ecr.us-west-2.amazonaws.com/hff_entry_forms",
+            "tags": null,
+            "tags_all": {},
+            "timeouts": null
+          },
+          "private": "eyJlMmJmYjczMC1lY2FhLTExZTYtOGY4OC0zNDM2M2JjN2M0YzAiOnsiZGVsZXRlIjoxMjAwMDAwMDAwMDAwfX0="
+        }
+      ]
+    },
+    {
+      "mode": "managed",
+      "type": "aws_s3_bucket",
+      "name": "hff_entry_forms",
+      "provider": "provider[\"registry.terraform.io/hashicorp/aws\"]",
+      "instances": [
+        {
+          "schema_version": 0,
+          "attributes": {
+            "acceleration_status": "",
+            "acl": "log-delivery-write",
+            "arn": "arn:aws:s3:::forms.hopefamilyfellowship.com",
+            "bucket": "forms.hopefamilyfellowship.com",
+            "bucket_domain_name": "forms.hopefamilyfellowship.com.s3.amazonaws.com",
+            "bucket_prefix": null,
+            "bucket_regional_domain_name": "forms.hopefamilyfellowship.com.s3.us-west-2.amazonaws.com",
+            "cors_rule": [],
+            "force_destroy": false,
+            "grant": [],
+            "hosted_zone_id": "Z3BJ6K6RIION7M",
+            "id": "forms.hopefamilyfellowship.com",
+            "lifecycle_rule": [],
+            "logging": [],
+            "object_lock_configuration": [],
+            "policy": null,
+            "region": "us-west-2",
+            "replication_configuration": [],
+            "request_payer": "BucketOwner",
+            "server_side_encryption_configuration": [],
+            "tags": null,
+            "tags_all": {},
+            "versioning": [
+              {
+                "enabled": false,
+                "mfa_delete": false
+              }
+            ],
+            "website": [],
+            "website_domain": null,
+            "website_endpoint": null
+          },
+          "private": "bnVsbA=="
+        }
+      ]
+    }
+  ]
+}

operations/update-version.sh

@@ -0,0 +1,62 @@
+#!/bin/bash
+#
+# Script to update the version number, commit the changes to the version files,
+# and tag the new commit.
+
+set -e
+
+origDir=$(pwd)
+rootDir=$(git rev-parse --show-toplevel)
+cd "$rootDir"
+
+currentBranch=$(git rev-parse --abbrev-ref HEAD)
+if [ "$currentBranch" != "main" ]; then
+  printf "You are currently on the '%s' branch. Is this intended (yes/no)? " "$currentBranch"
+  read -r confirmation
+
+  if [ "$confirmation" != "yes" ]; then exit 1; fi
+fi
+
+lastVersion=$(jq -r .version web/package.json)
+printf "Last version: %s\n" "$lastVersion"
+printf "New version: "
+read -r newVersion
+
+printf "New version will be \"%s\". Is this correct (yes/no)? " "$newVersion"
+read -r confirmation
+
+if [ "$confirmation" != "yes" ]; then
+  printf "\n"
+  "$origDir/$0"
+  exit
+fi
+
+printf ">> Updating /web/package.json with \"version\": \"%s\"\n" "$newVersion"
+printf "jq \".version = \\\"%s\\\"\" web/package.json > temp.json\n" "$newVersion"
+jq ".version = \"${newVersion}\"" web/package.json > temp.json
+printf "mv temp.json web/package.json\n"
+mv temp.json web/package.json
+
+printf ">> Updating /web/package-lock.json with \"version\": \"%s\"\n" "$newVersion"
+printf "jq \".version = \\\"%s\\\"\" web/package-lock.json > temp.json\n" "$newVersion"
+jq ".version = \"${newVersion}\"" web/package-lock.json > temp.json
+printf "mv temp.json web/package-lock.json\n"
+mv temp.json web/package-lock.json
+
+printf ">> Updating /api/src/hff_entry_forms_apipkg/version.nim with PM_API_VERSION* = \"%s\"" "$newVersion"
+printf "sed -i \"s/%s/%s/\" api/src/hff_entry_forms_apipkg/version.nim" "$lastVersion" "$newVersion"
+sed -i "s/${lastVersion}/${newVersion}/" api/src/hff_entry_forms_apipkg/version.nim
+
+printf ">> Updating /api/hff_entry_forms_api.nimble with version = \"%s\"" "$newVersion"
+printf "sed -i \"s/%s/%s/\" api/hff_entry_forms_api.nimble" "$lastVersion" "$newVersion"
+sed -i "s/${lastVersion}/${newVersion}/" api/hff_entry_forms_api.nimble
+
+printf ">> Committing new version.\n"
+printf "git add web/package.json web/package-lock.json api/src/hff_entry_forms_apipkg/version.nim"
+git add web/package.json web/package-lock.json api/src/hff_entry_forms_apipkg/version.nim api/hff_entry_forms_api.nimble
+printf "git commit -m \"Update package version to %s\"\n" "$newVersion"
+git commit -m "Update package version to ${newVersion}"
+
+printf ">> Tagging commit.\n"
+printf "git tag -m \"Version %s\" \"%s\"\n" "$newVersion" "$newVersion"
+git tag -m "Version ${newVersion}" "${newVersion}"

web/.env

@@ -0,0 +1 @@
+VUE_APP_API_BASE_URL=https://forms-api-dev.hopefamilyfellowship.com/v1/

web/.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_API_BASE_URL=https://forms-api-dev.hopefamilyfellowship.com/v1/

web/.env.production

@@ -0,0 +1 @@
+VUE_APP_API_BASE_URL=https://forms-api.hopefamilyfellowship.com/v1/

web/.eslintrc.js

@@ -4,17 +4,17 @@ module.exports = {
     node: true,
   },
   extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
   ],
   parserOptions: {
     ecmaVersion: 2020,
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
 };

web/Makefile

@@ -0,0 +1,8 @@
+build:
+	npm run build-${TARGET_ENV}
+
+serve:
+	npm run serve
+
+clean:
+	-rm -r dist

web/README.md

@@ -1,24 +0,0 @@
-# hff-entry-form-web
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

web/package.json

@@ -1,20 +1,27 @@
 {
   "name": "hff-entry-form-web",
-  "version": "0.1.0",
+  "version": "0.3.3",
   "private": true,
   "scripts": {
     "serve": "npx servor dist",
-    "vue-serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "build-dev": "vue-cli-service build --mode development",
+    "build-prod": "vue-cli-service build --mode production",
+    "lint": "vue-cli-service lint",
+    "vue-serve": "vue-cli-service serve"
   },
   "dependencies": {
-    "vue": "^3.0.0"
+    "@jdbernard/logging": "^1.1.3",
+    "axios": "^0.23.0",
+    "dayjs": "^1.10.7",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.14",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
@@ -23,6 +30,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
+    "git-describe": "^4.1.0",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",

web/src/App.scss

@@ -0,0 +1,111 @@
+@import "~@/styles/forSize.mixin";
+
+html { font-size: 16px; }
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
+
+  button, input, select, textarea {
+    font-size: inherit;
+
+    &:disabled { cursor: not-allowed; }
+  }
+
+  button {
+    color: #1084AC;
+    cursor: pointer;
+    background-color: #1084AC0A;
+    border: solid thin #1084AC;
+    border-radius: 0.25em;
+    font-weight: bold;
+    font-size: 125%;
+    padding: 0.5em;
+
+    &:not(:disabled) {
+      &:hover, &:focus {
+        color: white;
+        background-color: #1084AC;
+        box-shadow: 0.125em 0.125em 0.25em #aaa;
+      }
+
+      &:active {
+        box-shadow: 0 0 0.125em #999;
+        position: relative;
+        top: 0.125em;
+        left: 0.125em;
+      }
+    }
+
+    &:disabled { opacity: 0.75; }
+
+  }
+
+  button.low-profile {
+    color: black;
+    background-color: unset;
+    border: none;
+    box-shadow: none;
+    font-weight: normal;
+    transition-property: color, font-weight;
+    transition-duration: 250ms;
+
+    &:not(:disabled) {
+      &:hover, &:focus {
+        color: #1084AC;
+        font-weight: bold;
+        background-color: unset;
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.spin {
+  animation-name: spin;
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.tumble {
+  animation-name: spin;
+  animation-duration: 2000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(180deg); }
+}
+
+@include forSize(mobile) {
+  body { margin: 0; }
+
+  #app #debug-information .mobile { display: inline-block; }
+}
+
+@include forSize(tablet) {
+  #app #debug-information .tablet { display: inline-block; }
+}
+
+@include forSize(desktop) {
+  #app #debug-information .desktop { display: inline-block; }
+}
+
+@include forSize(ultrawide) {
+  html { font-size: 24px; }
+
+  #app #debug-information .ultrawide { display: inline-block; }
+}

web/src/App.ts

@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+import DebugInfo from '@/components/DebugInfo.vue';
+
+export default defineComponent({
+  components: { DebugInfo },
+});

web/src/App.vue

@@ -1,27 +1,6 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+  <router-view />
+  <DebugInfo />
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import HelloWorld from "./components/HelloWorld.vue";
-
-export default defineComponent({
-  name: "App",
-  components: {
-    HelloWorld,
-  },
-});
-</script>
-
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<script lang="ts" src="./App.ts"></script>
+<style lang="scss" src="./App.scss"></style>

web/src/api-client/event-proposal.models.ts

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { default as dayjs } from 'dayjs';
+
+interface MutableEventProposalModel {
+  name: string;
+  description: string;
+  purpose: string;
+  department: string;
+  location: string;
+  owner: string;
+  date: Date;
+  budgetInDollars: number;
+}
+
+interface MutableEventProposalConfig {
+  departments: Array<{
+    value: string;
+    color: string;
+  }>;
+}
+
+export type EventProposalModel = Readonly<MutableEventProposalModel>;
+export type EventProposalConfig = Readonly<MutableEventProposalConfig>;
+
+// eslint-disable-next-line
+export function eventProposalConfigFromDTO(dto: any): EventProposalConfig {
+  const { departments } = dto;
+  return { departments };
+}
+
+export function eventProposalModelToDTO(ep: EventProposalModel): any {
+  return { ...ep, date: dayjs(ep.date).format() };
+}
+
+export function newEventProposal(): EventProposalModel {
+  return {
+    name: '',
+    description: '',
+    purpose: '',
+    department: '',
+    location: '',
+    owner: '',
+    date: new Date(),
+    budgetInDollars: 0,
+  };
+}

web/src/api-client/index.ts

@@ -0,0 +1,52 @@
+import { default as Axios, AxiosInstance } from 'axios';
+import { logService } from '@jdbernard/logging';
+
+import {
+  EventProposalConfig,
+  eventProposalConfigFromDTO,
+  EventProposalModel,
+  eventProposalModelToDTO,
+} from './event-proposal.models';
+
+export * from './event-proposal.models';
+
+const logger = logService.getLogger('client-api');
+
+export class HffEntryFormsApiClient {
+  private http: AxiosInstance;
+
+  private cachedEventProposalConfig: EventProposalConfig | null = null;
+
+  constructor(apiBase: string) {
+    this.http = Axios.create({ baseURL: apiBase });
+    logger.trace('Initialized HffEntryFormsApiClient');
+  }
+
+  public async version(): Promise<string> {
+    const resp = await this.http.get('version');
+    return resp.data as string;
+  }
+
+  public async getEventProposalConfig(): Promise<EventProposalConfig> {
+    if (!this.cachedEventProposalConfig) {
+      logger.trace('GET /event-proposals/config');
+      const resp = await this.http.get('/event-proposals/config');
+      this.cachedEventProposalConfig = eventProposalConfigFromDTO(
+        (resp.data as any).data
+      );
+    }
+
+    return this.cachedEventProposalConfig;
+  }
+
+  public async proposeEvent(ep: EventProposalModel): Promise<boolean> {
+    logger.trace('POST /event-proposals');
+    const resp = await this.http.post(
+      '/event-proposals',
+      eventProposalModelToDTO(ep)
+    );
+    return resp.status < 300;
+  }
+}
+
+export default new HffEntryFormsApiClient(process.env.VUE_APP_API_BASE_URL);

web/src/components/DebugInfo.scss

@@ -0,0 +1,23 @@
+#debug-information {
+  position: fixed;
+  left: 1em;
+  bottom: 1em;
+  opacity: 0.5;
+  font-size: 80%;
+
+  .toggle-content { display: none; }
+  .toggle-content.visible { display: block; }
+
+  .mobile, .tablet, .desktop, .ultrawide { display: none; }
+
+  ul, li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  label {
+    display: inline-block;
+    width: 8em;
+  }
+}

web/src/components/DebugInfo.ts

@@ -0,0 +1,16 @@
+import { defineComponent, ref } from 'vue';
+
+import EyeClosedIcon from '@/components/svg/EyeClosedIcon.vue';
+import EyeOpenIcon from '@/components/svg/EyeOpenIcon.vue';
+import VERSION from '@/version-info';
+
+export default defineComponent({
+  name: 'DebugInfo',
+  components: { EyeOpenIcon, EyeClosedIcon },
+  setup: function DebugInfo() {
+    const showDebugInfo = ref(false);
+    const version = ref(VERSION);
+
+    return { showDebugInfo, version };
+  },
+});

web/src/components/DebugInfo.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="debug-information">
+    <div class="toggle-content" :class="{ visible: showDebugInfo }">
+      <ul>
+        <li class="version"><label>version:</label>{{ version.version }}</li>
+        <li class="hash"><label>build hash:</label>{{ version.hash }}</li>
+        <li class="raw"><label>build hash (raw):</label>{{ version.raw }}</li>
+      </ul>
+      <label>device size: </label>
+      <label class="mobile">mobile</label>
+      <label class="tablet">tablet</label>
+      <label class="desktop">desktop</label>
+      <label class="ultrawide">ultrawide</label>
+    </div>
+    <button class="low-profile" @click="showDebugInfo = !showDebugInfo">
+      <EyeOpenIcon v-if="showDebugInfo" />
+      <EyeClosedIcon v-if="!showDebugInfo" />
+    </button>
+  </div>
+</template>
+<script lang="ts" src="./DebugInfo.ts"></script>
+<style scoped lang="scss" src="./DebugInfo.scss"></style>

web/src/components/HelloWorld.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

web/src/components/RedirectComponent.vue

@@ -0,0 +1,16 @@
+<template>Redirecting...</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    target: {
+      type: String,
+      required: true,
+    },
+  },
+  setup: function RedirectComponent(props) {
+    window.location.assign(props.target);
+  },
+});
+</script>

web/src/components/svg/CircleCheckIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

web/src/components/svg/CircleCrossIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

web/src/components/svg/EyeClosedIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.7649 6.07595C14.9991 6.22231 15.0703 6.53078 14.9239 6.76495C14.4849 7.46742 13.9632 8.10644 13.3702 8.66304L14.5712 9.86405C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30816C11.8049 9.90282 10.9089 10.3621 9.93374 10.651L10.383 12.3276C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76266 13.0115 9.4885 12.8532 9.41703 12.5864L8.95916 10.8775C8.48742 10.958 8.00035 10.9999 7.5 10.9999C6.99964 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97063 12.94C4.7039 12.8685 4.5456 12.5944 4.61706 12.3277L5.06624 10.651C4.09111 10.3621 3.19503 9.90281 2.3989 9.30814L1.1359 10.5711C0.940638 10.7664 0.624058 10.7664 0.428797 10.5711C0.233537 10.3759 0.233537 10.0593 0.428797 9.86404L1.62982 8.66302C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53078 0.000898544 6.22231 0.235064 6.07595C0.46923 5.9296 0.777703 6.00078 0.924057 6.23495C1.40354 7.00212 1.989 7.68056 2.66233 8.2427C2.67315 8.25096 2.6837 8.25971 2.69397 8.26897C4.00897 9.35527 5.65536 9.9999 7.5 9.9999C10.3078 9.9999 12.6563 8.50629 14.0759 6.23495C14.2223 6.00078 14.5308 5.9296 14.7649 6.07595Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

web/src/components/svg/EyeOpenIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

web/src/components/svg/HourGlassIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.999878 0.5C0.999878 0.223858 1.22374 0 1.49988 0H13.4999C13.776 0 13.9999 0.223858 13.9999 0.5C13.9999 0.776142 13.776 1 13.4999 1L9 1V5C9 5.55228 8.55228 6 8 6H7C6.44772 6 6 5.55228 6 5V1H1.49988C1.22374 1 0.999878 0.776142 0.999878 0.5ZM7 9C6.44772 9 6 9.44771 6 10V14H1.49988C1.22374 14 0.999878 14.2239 0.999878 14.5C0.999878 14.7761 1.22374 15 1.49988 15H13.4999C13.776 15 13.9999 14.7761 13.9999 14.5C13.9999 14.2239 13.776 14 13.4999 14H9V10C9 9.44772 8.55228 9 8 9H7Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

web/src/components/svg/SpinnerIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.90321 7.29677C1.90321 10.341 4.11041 12.4147 6.58893 12.8439C6.87255 12.893 7.06266 13.1627 7.01355 13.4464C6.96444 13.73 6.69471 13.9201 6.41109 13.871C3.49942 13.3668 0.86084 10.9127 0.86084 7.29677C0.860839 5.76009 1.55996 4.55245 2.37639 3.63377C2.96124 2.97568 3.63034 2.44135 4.16846 2.03202L2.53205 2.03202C2.25591 2.03202 2.03205 1.80816 2.03205 1.53202C2.03205 1.25588 2.25591 1.03202 2.53205 1.03202L5.53205 1.03202C5.80819 1.03202 6.03205 1.25588 6.03205 1.53202L6.03205 4.53202C6.03205 4.80816 5.80819 5.03202 5.53205 5.03202C5.25591 5.03202 5.03205 4.80816 5.03205 4.53202L5.03205 2.68645L5.03054 2.68759L5.03045 2.68766L5.03044 2.68767L5.03043 2.68767C4.45896 3.11868 3.76059 3.64538 3.15554 4.3262C2.44102 5.13021 1.90321 6.10154 1.90321 7.29677ZM13.0109 7.70321C13.0109 4.69115 10.8505 2.6296 8.40384 2.17029C8.12093 2.11718 7.93465 1.84479 7.98776 1.56188C8.04087 1.27898 8.31326 1.0927 8.59616 1.14581C11.4704 1.68541 14.0532 4.12605 14.0532 7.70321C14.0532 9.23988 13.3541 10.4475 12.5377 11.3662C11.9528 12.0243 11.2837 12.5586 10.7456 12.968L12.3821 12.968C12.6582 12.968 12.8821 13.1918 12.8821 13.468C12.8821 13.7441 12.6582 13.968 12.3821 13.968L9.38205 13.968C9.10591 13.968 8.88205 13.7441 8.88205 13.468L8.88205 10.468C8.88205 10.1918 9.10591 9.96796 9.38205 9.96796C9.65819 9.96796 9.88205 10.1918 9.88205 10.468L9.88205 12.3135L9.88362 12.3123C10.4551 11.8813 11.1535 11.3546 11.7585 10.6738C12.4731 9.86976 13.0109 8.89844 13.0109 7.70321Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

web/src/components/svg/index.ts

@@ -0,0 +1,4 @@
+export { default as HourGlassIcon } from './HourGlassIcon.vue';
+export { default as SpinnerIcon } from './SpinnerIcon.vue';
+export { default as CircleCheckIcon } from './CircleCheckIcon.vue';
+export { default as CircleCrossIcon } from './CircleCrossIcon.vue';

web/src/main.ts

@@ -1,4 +1,13 @@
-import { createApp } from "vue";
-import App from "./App.vue";
+import { createApp } from 'vue';
+import { logService, LogLevel, ConsoleLogAppender } from '@jdbernard/logging';
 
-createApp(App).mount("#app");
+import App from './App.vue';
+import router from './router';
+
+const consoleLogAppender = new ConsoleLogAppender(LogLevel.ALL);
+logService.ROOT_LOGGER.appenders.push(consoleLogAppender);
+
+const logger = logService.getLogger('main');
+
+createApp(App).use(router).mount('#app');
+logger.trace('App mounted.');

web/src/router.ts

@@ -0,0 +1,24 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import RedirectComponent from '@/components/RedirectComponent.vue';
+import TheProposeEventView from '@/views/ProposeEvent.vue';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: RedirectComponent,
+    props: { target: 'https://hopefamilyfellowship.com' },
+  },
+  {
+    path: '/propose-event',
+    name: 'ProposeEvent',
+    component: TheProposeEventView,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;

web/src/styles/forSize.mixin.scss

@@ -0,0 +1,20 @@
+$maxMobileWidth: 640px;
+$maxTabletWidth: 1079px;
+$ultrawideMinWidth: 1600px;
+
+// --- mobMaxW --- tabMaxW --------------- ultrawideMinW
+//     mobile   |   tablet  |  desktop  |  ultrawide
+
+@mixin forSize($size) {
+
+  @if $size == mobile {
+    @media screen and (max-width: $maxMobileWidth) { @content; } }
+  @else if $size == tablet {
+    @media screen and (min-width: $maxMobileWidth + 1) and (max-width: $maxTabletWidth) { @content; } }
+  @else if $size == desktop {
+    @media screen and (min-width: $maxTabletWidth + 1) and (max-width: $ultrawideMinWidth - 1) { @content; } }
+  @else if $size == ultrawide {
+    @media screen and (min-width: $ultrawideMinWidth) { @content; } }
+  @else if $size == notMobile {
+    @media screen and (min-width: $maxMobileWidth + 1) { @content; } }
+}

web/src/version-info.ts

@@ -0,0 +1,17 @@
+export interface VersionInfo {
+  version: string;
+  hash: string;
+  raw: string;
+}
+
+const gitVersion: { hash: string; raw: string } = process.env
+  .VUE_APP_HFF_ENTRY_FORMS_GIT_HASH
+  ? JSON.parse(process.env.VUE_APP_HFF_ENTRY_FORMS_GIT_HASH)
+  : { hash: 'missing', raw: 'missing' };
+
+export const VERSION: VersionInfo = {
+  ...gitVersion,
+  version: process.env.VUE_APP_HFF_ENTRY_FORMS_VERSION || 'unavailable',
+};
+
+export default VERSION;

web/src/views/ProposeEvent.scss

@@ -0,0 +1,126 @@
+@import "~@/styles/forSize.mixin";
+
+#event-proposal {
+  header {
+    background-color: #FFFCFC;
+    border-bottom: thin solid #aaa;
+    padding: 0.5em;
+
+    h1, h2 {
+      margin: 0;
+      margin-top: 0.5em;
+      padding: 0;
+    }
+
+    h2 {
+      font-weight: normal;
+      margin-bottom: -0.30em;
+    }
+
+  }
+
+  &.success header { background-color: #38b00010; }
+  &.error header { background-color: #d9042910; }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    fieldset {
+      border: none;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      margin: 0.5em;
+      padding: 0;
+      width: calc(100% - 1em);
+    }
+  }
+
+  label {
+    margin: 0.5em;
+    display: flex;
+
+    input, textarea, select { flex-grow: 1; }
+  }
+
+  .invalid-message {
+    display: flex;
+    margin: 0.5em;
+    color: #d90429;
+    font-style: italic;
+    justify-content: center;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: center;
+    margin: 0.5em;
+
+    button svg {
+      position: relative;
+      margin: 0 0.125em;
+      top: 0.125em;
+    }
+  }
+
+  &.success button {
+    color: #38b000;
+    background-color: #38b00010;
+    border-color: #38b000;
+  }
+
+  &.error button {
+    color: #d90429;
+    background-color: #d9042910;
+    border-color: #d90429;
+  }
+}
+
+.successes, .errors { margin: 0.5em auto; }
+
+.successes { color: #38b000; }
+.errors { color: #d90429; }
+
+@include forSize(mobile) {
+  #header-splash {
+    width: 100%;
+  }
+
+  #event-proposal {
+    padding: 0 1em;
+    width: 100%;
+
+    label {
+      flex-wrap: wrap;
+
+      span { width: 100%; }
+      input, select, textarea {
+        margin: 0.125em 1em;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@include forSize(notMobile) {
+  #header-splash {
+    object-fit: cover;
+    object-position: center 56%;
+    width: 100%;
+    height: 20em;
+  }
+
+  #event-proposal {
+    border: solid thin #bbb;
+    border-radius: 0.25em;
+    box-shadow: 0.25em 0.25em 0.75em #aaa;
+    margin: 2em auto;
+    width: 30em;
+
+    label span { width: 9em; }
+  }
+
+  .successes, .errors { width: 26em; }
+}

web/src/views/ProposeEvent.ts

@@ -0,0 +1,84 @@
+import { defineComponent, ref } from 'vue';
+import { logService } from '@jdbernard/logging';
+import {
+  default as api,
+  EventProposalModel,
+  newEventProposal,
+} from '@/api-client';
+
+import {
+  CircleCheckIcon,
+  CircleCrossIcon,
+  HourGlassIcon,
+  SpinnerIcon,
+} from '@/components/svg';
+
+const logger = logService.getLogger('/propose-events');
+
+type FormState =
+  | 'loading'
+  | 'ready'
+  | 'submitting'
+  | 'invalid'
+  | 'success'
+  | 'error';
+
+export default defineComponent({
+  name: 'TheProposeEventView',
+  props: {},
+  components: { CircleCheckIcon, CircleCrossIcon, HourGlassIcon, SpinnerIcon },
+  setup: function TheProposeEventView() {
+    const departments = ref<{ value: string; color: string }[]>([]);
+    const formState = ref<FormState>('loading');
+
+    setTimeout(async () => {
+      departments.value = (await api.getEventProposalConfig()).departments;
+      formState.value = 'ready';
+    });
+
+    const formVal = { event: newEventProposal() };
+    const successes: string[] = [];
+    const errors: string[] = [];
+
+    function validateEvent(ev: EventProposalModel): boolean {
+      return (
+        !!ev.name &&
+        !!ev.description &&
+        !!ev.purpose &&
+        !!ev.department &&
+        !!ev.location &&
+        !!ev.owner
+      );
+    }
+
+    async function proposeEvent(): Promise<void> {
+      if (!validateEvent(formVal.event)) {
+        formState.value = 'invalid';
+        return;
+      }
+
+      formState.value = 'submitting';
+      logger.trace({ formState: formState.value });
+      if (await api.proposeEvent(formVal.event)) {
+        formState.value = 'success';
+        successes.push(
+          `We've recorded the proposed details for ${formVal.event.name}.`,
+        );
+      } else {
+        formState.value = 'error';
+        errors.push(
+          'We were unable to record the proposed details for ' +
+            formVal.event.name +
+            ". Poke Jonathan and tell him it's broken.",
+        );
+      }
+
+      setTimeout(() => {
+        formVal.event = newEventProposal();
+        formState.value = 'ready';
+      }, 5000);
+    }
+
+    return { departments, errors, formState, formVal, successes, proposeEvent };
+  },
+});

web/src/views/ProposeEvent.vue

@@ -0,0 +1,93 @@
+<template>
+  <img id="header-splash" src="../assets/welcome-wood.jpg" />
+  <div id="event-proposal" :class="[formState]">
+    <header>
+      <h1>Propose an Event</h1>
+      <h2>Hope Family Fellowship</h2>
+    </header>
+    <form @submit.prevent="proposeEvent">
+      <fieldset :disabled="formState !== 'ready' && formState !== 'invalid'">
+        <label>
+          <span>Event Name</span>
+          <input
+            type="text"
+            name="name"
+            placeholder="e.g. Men's Bible Study"
+            v-model="formVal.event.name"
+          />
+        </label>
+        <label>
+          <span>Date and time</span>
+          <input
+            type="datetime-local"
+            name="date"
+            v-model="formVal.event.date"
+          />
+        </label>
+        <label>
+          <span>Department / Event Type</span>
+          <select name="department" v-model="formVal.event.department">
+            <option value="">--- select a department or type ---</option>
+            <option
+              v-for="opt in departments"
+              :key="opt.value"
+              class="color-{{opt.color}}"
+            >
+              {{ opt.value }}
+            </option>
+          </select>
+        </label>
+        <label>
+          <span>Owner</span>
+          <input type="text" name="owner" v-model="formVal.event.owner" />
+        </label>
+        <label>
+          <span>Location</span>
+          <textarea v-model="formVal.event.location"></textarea>
+        </label>
+        <label>
+          <span>Purpose</span>
+          <textarea v-model="formVal.event.purpose"></textarea>
+        </label>
+        <label>
+          <span>Description</span>
+          <textarea v-model="formVal.event.description"></textarea>
+        </label>
+        <div class="invalid-message" v-if="formState === 'invalid'">
+          All fields are required.
+        </div>
+        <div class="actions">
+          <button type="submit">
+            <span v-if="formState === 'ready' || formState === 'invalid'"
+              >Propose Event</span
+            >
+            <span v-if="formState === 'submitting'">
+              <SpinnerIcon class="spin" />
+              submitting...
+            </span>
+            <span v-if="formState === 'loading'">
+              <HourGlassIcon class="tumble" />
+              Loading...
+            </span>
+            <span v-if="formState === 'success'">
+              <CircleCheckIcon />
+              Event Proposed!
+            </span>
+            <span v-if="formState === 'error'">
+              <CircleCheckIcon />
+              An error occurred.
+            </span>
+          </button>
+        </div>
+      </fieldset>
+    </form>
+  </div>
+  <div class="successes">
+    <div v-for="s in successes" :key="s">{{ s }}</div>
+  </div>
+  <div class="errors">
+    <div v-for="e in errors" :key="e">{{ s }}</div>
+  </div>
+</template>
+<script lang="ts" src="./ProposeEvent.ts"></script>
+<style scoped lang="scss" src="./ProposeEvent.scss"></style>

web/vue.config.js

@@ -0,0 +1,7 @@
+const fs = require('fs');
+
+process.env.VUE_APP_HFF_ENTRY_FORMS_VERSION = require('./package.json').version;
+
+process.env.VUE_APP_HFF_ENTRY_FORMS_GIT_HASH = JSON.stringify(
+  require('git-describe').gitDescribeSync('.')
+);