MarkdownEditor and ProfileView migrated

Lots of other site-wide changes:
- Components now set the page title in the browser
- Transitions between components have a bit of fade out/in

src/JobsJobsJobs/Api/Data.fs

@@ -382,6 +382,16 @@ module Continent =
         r.Table(Table.Continent)
           .RunResultAsync<Continent list> conn)
   
+  /// Get a continent by its ID
+  let findById (contId : ContinentId) conn = task {
+    let! continent =
+      withReconn(conn).ExecuteAsync(fun () ->
+          r.Table(Table.Continent)
+            .Get(contId)
+            .RunResultAsync<Continent> conn)
+    return toOption continent
+  }
+
 
 /// Job listing data access functions
 [<RequireQualifiedAccess>]

src/JobsJobsJobs/Api/Handlers.fs

@@ -204,6 +204,29 @@ module Profile =
       | None -> return! Error.notFound next ctx
       }
 
+  // GET: /api/profile/view/[id]
+  let view citizenId : HttpHandler =
+    authorize
+    >=> fun next ctx -> task {
+      let citId  = CitizenId citizenId
+      let dbConn = conn ctx
+      match! Data.Profile.findById citId dbConn with
+      | Some profile ->
+          match! Data.Citizen.findById citId dbConn with
+          | Some citizen ->
+              match! Data.Continent.findById profile.continentId dbConn with
+              | Some continent ->
+                  return!
+                    json {
+                      profile   = profile
+                      citizen   = citizen
+                      continent = continent
+                      } next ctx
+              | None -> return! Error.notFound next ctx
+          | None -> return! Error.notFound next ctx
+      | None -> return! Error.notFound next ctx
+      }
+  
   // GET: /api/profile/count
   let count : HttpHandler =
     authorize
@@ -365,6 +388,7 @@ let allEndpoints = [
         route  ""               Profile.current
         route  "/count"         Profile.count
         routef "/get/%O"        Profile.get
+        routef "/view/%O"       Profile.view
         route  "/public-search" Profile.publicSearch
         route  "/search"        Profile.search
         ]

src/JobsJobsJobs/App/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jobs-jobs-jobs",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1353,6 +1353,12 @@
       "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==",
       "dev": true
     },
+    "@types/marked": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-2.0.4.tgz",
+      "integrity": "sha512-L9VRSe0Id8xbPL99mUo/4aKgD7ZoRwFZqUQScNKHi2pFjF9ZYSMNShUHD6VlMT6J/prQq0T1mxuU25m3R7dFzg==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -8454,6 +8460,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz",
+      "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

src/JobsJobsJobs/App/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@mdi/font": "5.9.55",
     "core-js": "^3.6.5",
+    "marked": "^2.1.3",
     "roboto-fontface": "*",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
@@ -18,6 +19,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/marked": "^2.0.4",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",

src/JobsJobsJobs/App/src/App.vue

@@ -8,7 +8,11 @@
     </v-app-bar>
     <v-main>
       <v-container fluid>
-        <router-view></router-view>
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
       </v-container>
     </v-main>
     <v-footer app>
@@ -29,11 +33,6 @@ export default defineComponent({
     AppFooter,
     AppNav,
     TitleBar
-  },
-  setup () {
-    return {
-      //
-    }
   }
 })
 </script>
@@ -66,4 +65,11 @@ ul
   justify-content: center
 .v-footer
   flex-direction: row-reverse
+// Route transitions
+.fade-enter-active,
+.fade-leave-active
+  transition: opacity 0.125s ease
+.fade-enter-from,
+.fade-leave-to
+  opacity: 0
 </style>

src/JobsJobsJobs/App/src/api/index.ts

@@ -1,4 +1,5 @@
-import { Citizen, Continent, Count, LogOnSuccess, Profile } from './types'
+import { MarkedOptions } from 'marked'
+import { Citizen, Continent, Count, LogOnSuccess, Profile, ProfileForView } from './types'
 
 /**
  * Create a URL that will access the API
@@ -24,6 +25,31 @@ const reqInit = (method : string, user : LogOnSuccess) : RequestInit => {
   }
 }
 
+/**
+ * Retrieve a result for an API call
+ *
+ * @param resp The response received from the API
+ * @param action The action being performed (used in error messages)
+ * @returns The expected result (if found), undefined (if not found), or an error string
+ */
+async function apiResult<T> (resp : Response, action : string) : Promise<T | undefined | string> {
+  if (resp.status === 200) return await resp.json() as T
+  if (resp.status === 404) return undefined
+  return `Error ${action} - ${await resp.text()}`
+}
+
+/**
+ * Run an API action that does not return a result
+ *
+ * @param resp The response received from the API call
+ * @param action The action being performed (used in error messages)
+ * @returns Undefined (if successful), or an error string
+ */
+const apiAction = async (resp : Response, action : string) : Promise<string | undefined> => {
+  if (resp.status === 200) return undefined
+  return `Error ${action} - ${await resp.text()}`
+}
+
 export default {
 
   /** API functions for citizens */
@@ -48,11 +74,8 @@ export default {
      * @param user The currently logged-on user
      * @returns The citizen, or an error
      */
-    retrieve: async (id : string, user : LogOnSuccess) : Promise<Citizen | string> => {
+    retrieve: async (id : string, user : LogOnSuccess) : Promise<Citizen | string | undefined> =>
-      const resp = await fetch(apiUrl(`citizen/get/${id}`), reqInit('GET', user))
+      apiResult<Citizen>(await fetch(apiUrl(`citizen/get/${id}`), reqInit('GET', user)), `retrieving citizen ${id}`),
-      if (resp.status === 200) return await resp.json() as Citizen
-      return `Error retrieving citizen ${id} - ${await resp.text()}`
-    },
 
     /**
      * Delete the current citizen's entire Jobs, Jobs, Jobs record
@@ -60,11 +83,8 @@ export default {
      * @param user The currently logged-on user
      * @returns Undefined if successful, an error if not
      */
-    delete: async (user : LogOnSuccess) : Promise<string | undefined> => {
+    delete: async (user : LogOnSuccess) : Promise<string | undefined> =>
-      const resp = await fetch(apiUrl('citizen'), reqInit('DELETE', user))
+      apiAction(await fetch(apiUrl('citizen'), reqInit('DELETE', user)), 'deleting citizen')
-      if (resp.status === 200) return undefined
-      return `Error deleting citizen - ${await resp.text()}`
-    }
   },
 
   /** API functions for continents */
@@ -75,11 +95,8 @@ export default {
      *
      * @returns All continents, or an error
      */
-    all: async () : Promise<Continent[] | string> => {
+    all: async () : Promise<Continent[] | string | undefined> =>
-      const resp = await fetch(apiUrl('continent/all'), { method: 'GET' })
+      apiResult<Continent[]>(await fetch(apiUrl('continent/all'), { method: 'GET' }), 'retrieving continents')
-      if (resp.status === 200) return await resp.json() as Continent[]
-      return `Error retrieving continents - ${await resp.text()}`
-    }
   },
 
   /** API functions for profiles */
@@ -99,6 +116,16 @@ export default {
       if (resp.status !== 204) return `Error retrieving profile - ${await resp.text()}`
     },
 
+    /**
+     * Retrieve a profile for viewing
+     *
+     * @param id The ID of the profile to retrieve for viewing
+     * @param user The currently logged-on user
+     * @returns The profile (if found), undefined (if not found), or an error string
+     */
+    retreiveForView: async (id : string, user : LogOnSuccess) : Promise<ProfileForView | string | undefined> =>
+      apiResult<ProfileForView>(await fetch(apiUrl(`profile/view/${id}`), reqInit('GET', user)), 'retrieving profile'),
+
     /**
      * Count profiles in the system
      *
@@ -120,12 +147,15 @@ export default {
      * @param user The currently logged-on user
      * @returns Undefined if successful, an error if not
      */
-    delete: async (user : LogOnSuccess) : Promise<string | undefined> => {
+    delete: async (user : LogOnSuccess) : Promise<string | undefined> =>
-      const resp = await fetch(apiUrl('profile'), reqInit('DELETE', user))
+      apiAction(await fetch(apiUrl('profile'), reqInit('DELETE', user)), 'deleting profile')
-      if (resp.status === 200) return undefined
-      return `Error deleting profile - ${await resp.text()}`
-    }
   }
 }
 
+/** The standard Jobs, Jobs, Jobs options for `marked` (GitHub-Flavo(u)red Markdown (GFM) with smart quotes) */
+export const markedOptions : MarkedOptions = {
+  gfm: true,
+  smartypants: true
+}
+
 export * from './types'

src/JobsJobsJobs/App/src/api/types.ts

@@ -71,6 +71,16 @@ export interface Profile {
   skills : Skill[]
 }
 
+/** The data required to show a viewable profile */
+export interface ProfileForView {
+  /** The profile itself */
+  profile : Profile
+  /** The citizen to whom the profile belongs */
+  citizen : Citizen
+  /** The continent for the profile */
+  continent : Continent
+}
+
 /** A count */
 export interface Count {
   /** The count being returned */

src/JobsJobsJobs/App/src/components/MarkdownEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <nav class="nav nav-pills">
-    <a href="#" class="nav-link @MarkdownClass" @click.prevent="showMarkdown">Markdown</a>
+    <v-btn rounded="pill" :color="sourceColor" @click="showMarkdown">Markdown</v-btn> &nbsp;
-    <a href="#" class="nav-link @PreviewClass" @click.prevent="showPreview">Preview</a>
+    <v-btn rounded="pill" :color="previewColor" @click="showPreview">Preview</v-btn>
   </nav>
   <section v-if="preview" class="preview" v-html="previewHtml">
   </section>
@@ -10,7 +10,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+import marked from 'marked'
+import { markedOptions } from '../api'
+
 export default defineComponent({
   name: 'MarkdownEditor',
   props: {
@@ -32,12 +35,13 @@ export default defineComponent({
     const previewHtml = ref('')
 
     /** Show the Markdown source */
-    const showMarkdown = () => { preview.value = false }
+    const showMarkdown = () => {
+      preview.value = false
+    }
 
     /** Show the Markdown preview */
     const showPreview = () => {
-      // TODO: render markdown as HTML
+      previewHtml.value = marked(props.text, markedOptions)
-      previewHtml.value = props.text
       preview.value = true
     }
 
@@ -45,8 +49,15 @@ export default defineComponent({
       preview,
       previewHtml,
       showMarkdown,
-      showPreview
+      showPreview,
+      sourceColor: computed(() => preview.value ? '' : 'primary'),
+      previewColor: computed(() => preview.value ? 'primary' : '')
     }
   }
 })
 </script>
+
+<style lang="sass" scoped>
+textarea
+  width: 100%
+</style>

src/JobsJobsJobs/App/src/components/PageTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <p v-if="false"></p>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue'
+
+export default defineComponent({
+  name: 'PageTitle',
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  setup (props) {
+    /** The name of the application */
+    const appName = 'Jobs, Jobs, Jobs'
+
+    /** Set the page title based on the input title attribute */
+    const setTitle = () => {
+      if (props.title === '') {
+        document.title = appName
+      } else {
+        document.title = `${props.title} | ${appName}`
+      }
+    }
+
+    onMounted(setTitle)
+
+    return {
+      setTitle
+    }
+  },
+  watch: {
+    title: 'setTitle'
+  }
+})
+</script>

src/JobsJobsJobs/App/src/main.ts

@@ -3,9 +3,13 @@ import vuetify from './plugins/vuetify'
 import App from './App.vue'
 import router from './router'
 import store, { key } from './store'
+import PageTitle from './components/PageTitle.vue'
 
-createApp(App)
+const app = createApp(App)
   .use(router)
   .use(store, key)
   .use(vuetify)
-  .mount('#app')
+
+app.component('PageTitle', PageTitle)
+
+app.mount('#app')

src/JobsJobsJobs/App/src/store/index.ts

@@ -4,8 +4,11 @@ import api, { Continent, LogOnSuccess } from '../api'
 
 /** The state tracked by the application */
 export interface State {
+  /** The currently logged-on user */
   user: LogOnSuccess | undefined
+  /** The state of the log on process */
   logOnState: string
+  /** All continents (use `ensureContinents` action) */
   continents: Continent[]
 }
 
@@ -26,13 +29,13 @@ export default createStore({
     }
   },
   mutations: {
-    setUser (state, user: LogOnSuccess) {
+    setUser (state, user : LogOnSuccess) {
       state.user = user
     },
     clearUser (state) {
       state.user = undefined
     },
-    setLogOnState (state, message) {
+    setLogOnState (state, message : string) {
       state.logOnState = message
     },
     setContinents (state, continents : Continent[]) {

src/JobsJobsJobs/App/src/views/Home.vue

@@ -1,4 +1,6 @@
 <template>
+  <article>
+    <page-title title="Welcome!" />
     <p>
       Welcome to Jobs, Jobs, Jobs (AKA No Agenda Careers), where citizens of Gitmo Nation can assist one another in
       finding employment. This will enable them to continue providing value-for-value to Adam and John, as they continue
@@ -9,6 +11,7 @@
       <a href="https://noagendashow.net" target="_blank">The Best Podcast in the Universe</a>
       <em><audio-clip clip="thats-true"> (that&rsquo;s true!)</audio-clip></em> and find out what you&rsquo;re missing.
     </p>
+  </article>
 </template>
 
 <script lang="ts">

src/JobsJobsJobs/App/src/views/HowItWorks.vue

@@ -1,47 +1,49 @@
 <template>
+  <article>
+    <page-title title="How It Works" />
     <h3>How It Works</h3>
 
     <h4>Completing Your Profile</h4>
     <ul>
       <li>
         The &ldquo;View Your Employment Profile&rdquo; link (which you&rdquo;ll see on this page, once your profile is
-      established) shows your profile the way all other validated users will be able to see it. While this site does not
+        established) shows your profile the way all other validated users will be able to see it. While this site does
-      perform communication with others over No Agenda Social, the name on employment profiles is a link to that
+        not perform communication with others over No Agenda Social, the name on employment profiles is a link to that
         user&rsquo;s profile; from there, others can communicate further with you using the tools Mastodon provides.
       </li>
       <li>
-      The &ldquo;Professional Biography&rdquo; and &ldquo;Experience&rdquo; sections support Markdown, a plain-text way
+        The &ldquo;Professional Biography&rdquo; and &ldquo;Experience&rdquo; sections support Markdown, a plain-text
-      to specify formatting quite similar to that provided by word processors. The
+        way to specify formatting quite similar to that provided by word processors. The
         <a href="https://daringfireball.net/projects/markdown/" target="_blank">original page</a> for the project is a
         good overview of its capabilities, and the pages at
-      <a href="https://www.markdownguide.org/" target="_blank">Markdown Guide</a> give in-depth lessons to make the most
+        <a href="https://www.markdownguide.org/" target="_blank">Markdown Guide</a> give in-depth lessons to make the
-      of this language. The version of Markdown employed here supports many popular extensions, include smart quotes
+        most of this language. The version of Markdown employed here supports many popular extensions, include smart
-      (turning "a quote" into &ldquo;a quote&rdquo;), tables, super/subscripts, and more.
+        quotes (turning "a quote" into &ldquo;a quote&rdquo;), tables, super/subscripts, and more.
       </li>
       <li>
         Skills are optional, but they are the place to record skills you have. Along with the skill, there is a
-      &ldquo;Notes&rdquo; section, which can be used to indicate the time you&rsquo;ve practiced a particular skill, the
+        &ldquo;Notes&rdquo; section, which can be used to indicate the time you&rsquo;ve practiced a particular skill,
-      mastery you have of that skill, etc. It is free-form text, so it is all up to you how you utilize the field.
+        the mastery you have of that skill, etc. It is free-form text, so it is all up to you how you utilize the field.
       </li>
       <li>
-      The &ldquo;Experience&rdquo; field is intended to capture a chronological or topical employment history; with this
+        The &ldquo;Experience&rdquo; field is intended to capture a chronological or topical employment history; with
-      &ldquo;quick-n-dirty&rdquo; implementation, this Markdown box can be used to capture that information however you
+        this &ldquo;quick-n-dirty&rdquo; implementation, this Markdown box can be used to capture that information
-      would like it presented to fellow citizens.
+        however you would like it presented to fellow citizens.
       </li>
       <li>
         If you check the &ldquo;Allow my profile to be searched publicly&rdquo; checkbox, <strong>and</strong> you are
-      seeking employment, your continent, region, and skills fields will be searchable and displayed to public users of
+        seeking employment, your continent, region, and skills fields will be searchable and displayed to public users
-      the site. They will not be tied to your No Agenda Social handle or real name; they are there to let people peek
+        of the site. They will not be tied to your No Agenda Social handle or real name; they are there to let people
-      behind the curtain a bit, and hopefully inspire them to join us.
+        peek behind the curtain a bit, and hopefully inspire them to join us.
       </li>
     </ul>
 
     <h4>Searching Profiles</h4>
     <p>
-    The &ldquo;View Profiles&rdquo; link at the side allows you to search for profiles by continent, the citizen&rsquo;s
+      The &ldquo;View Profiles&rdquo; link at the side allows you to search for profiles by continent, the
-    desire for remote work, a skill, or any text in their professional biography and experience. If you find someone
+      citizen&rsquo;s desire for remote work, a skill, or any text in their professional biography and experience. If
-    with whom you&rsquo;d like to discuss potential opportunities, the name at the top of the profile links to their No
+      you find someone with whom you&rsquo;d like to discuss potential opportunities, the name at the top of the profile
-    Agenda Social account, where you can use its features to get in touch.
+      links to their No Agenda Social account, where you can use its features to get in touch.
     </p>
 
     <h4>Finding Employment</h4>
@@ -49,31 +51,33 @@
       If your profile indicates that you are seeking employment, and you secure employment, that is something you will
       want to update (and &ndash; congratulations!). From both the Dashboard and the Edit Profile pages, you will see a
       link that encourages you to tell us about it. Click either of those links, and you will be brought to a page that
-    allows you to indicate whether your employment actually came from someone finding your profile on Jobs, Jobs, Jobs,
+      allows you to indicate whether your employment actually came from someone finding your profile on Jobs, Jobs,
-    and gives you a place to write about the experience. These stories are only viewable by validated users, so feel
+      Jobs, and gives you a place to write about the experience. These stories are only viewable by validated users, so
-    free to use as much (or as little) identifying information as you&rsquo;d like. You can also submit this page with
+      feel free to use as much (or as little) identifying information as you&rsquo;d like. You can also submit this page
-    all the fields blank; in that case, your &ldquo;Seeking Employment&rdquo; flag is cleared, and the
+      with all the fields blank; in that case, your &ldquo;Seeking Employment&rdquo; flag is cleared, and the
       &ldquo;story&rdquo; is recorded.
     </p>
     <p>
-    As a validated user, you can also view others success stories. Clicking &ldquo;Success Stories&rdquo; in the sidebar
+      As a validated user, you can also view others success stories. Clicking &ldquo;Success Stories&rdquo; in the
-    will display a list of all the stories that have been recorded. If there is a story to be read, there will be a link
+      sidebar will display a list of all the stories that have been recorded. If there is a story to be read, there will
-    to read it; if you submitted the story, there will also be an &ldquo;Edit&rdquo; link.
+      be a link to read it; if you submitted the story, there will also be an &ldquo;Edit&rdquo; link.
     </p>
 
     <h4>Publicly Available Information</h4>
     <p>
-    The &ldquo;Job Seekers&rdquo; page for profile information will allow users to search for and display the continent,
+      The &ldquo;Job Seekers&rdquo; page for profile information will allow users to search for and display the
-    region, skills, and notes of users who are seeking employment <strong>and</strong> have opted in to their
+      continent, region, skills, and notes of users who are seeking employment <strong>and</strong> have opted in to
-    information being publicly searchable. If you are a public user, this information is always the latest we have;
+      their information being publicly searchable. If you are a public user, this information is always the latest we
-    check out the link at the top of the search results for how you can learn more about these fine human resources!
+      have; check out the link at the top of the search results for how you can learn more about these fine human
+      resources!
     </p>
 
     <h4>Help / Suggestions</h4>
     <p>
       This is open-source software
       <a href="https://github.com/bit-badger/jobs-jobs-jobs" _target="_blank">developed on Github</a>; feel free to
-    <a href="https://github.com/bit-badger/jobs-jobs-jobs/issues" target="_blank">create an issue there</a>, or look up
+      <a href="https://github.com/bit-badger/jobs-jobs-jobs/issues" target="_blank">create an issue there</a>, or look
-    @danieljsummers on No Agenda Social.
+      up @danieljsummers on No Agenda Social.
     </p>
+  </article>
 </template>

src/JobsJobsJobs/App/src/views/PrivacyPolicy.vue

@@ -1,5 +1,6 @@
 <template>
-
+  <article>
+    <page-title title="Privacy Policy" />
     <h3>Privacy Policy</h3>
     <p><em>(as of February 6<sup>th</sup>, 2021)</em></p>
 
@@ -9,25 +10,26 @@
     </p>
     <p>
       This Privacy Policy applies to our website, and its associated subdomains (collectively, our “Service”) alongside
-    our application, {{name}}. By accessing or using our Service, you signify that you have read, understood, and agree
+      our application, {{name}}. By accessing or using our Service, you signify that you have read, understood, and
-    to our collection, storage, use, and disclosure of your personal information as described in this Privacy Policy and
+      agree to our collection, storage, use, and disclosure of your personal information as described in this Privacy
-    our Terms of Service.
+      Policy and our Terms of Service.
     </p>
 
     <h4>Definitions and key terms</h4>
     <p>
-    To help explain things as clearly as possible in this Privacy Policy, every time any of these terms are referenced,
+      To help explain things as clearly as possible in this Privacy Policy, every time any of these terms are
-    are strictly defined as:
+      referenced, are strictly defined as:
     </p>
 
     <ul>
       <li>
         Cookie: small amount of data generated by a website and saved by your web browser. It is used to identify your
-      browser, provide analytics, remember information about you such as your language preference or login information.
+        browser, provide analytics, remember information about you such as your language preference or login
+        information.
       </li>
       <li>
-      Company: when this policy mentions “Company,” “we,” “us,” or “our,” it refers to {{name}}, that is responsible for
+        Company: when this policy mentions “Company,” “we,” “us,” or “our,” it refers to {{name}}, that is responsible
-      your information under this Privacy Policy.
+        for your information under this Privacy Policy.
       </li>
       <li>Country: where {{name}} or the owners/founders of {{name}} are based, in this case is US.</li>
       <li>
@@ -40,20 +42,20 @@
       </li>
       <li>
         IP address: Every device connected to the Internet is assigned a number known as an Internet protocol (IP)
-      address. These numbers are usually assigned in geographic blocks. An IP address can often be used to identify the
+        address. These numbers are usually assigned in geographic blocks. An IP address can often be used to identify
-      location from which a device is connecting to the Internet.
+        the location from which a device is connecting to the Internet.
       </li>
       <li>
-      Personnel: refers to those individuals who are employed by {{name}} or are under contract to perform a service on
+        Personnel: refers to those individuals who are employed by {{name}} or are under contract to perform a service
-      behalf of one of the parties.
+        on behalf of one of the parties.
       </li>
       <li>
         Personal Data: any information that directly, indirectly, or in connection with other information — including a
         personal identification number — allows for the identification or identifiability of a natural person.
       </li>
       <li>
-      Service: refers to the service provided by {{name}} as described in the relative terms (if available) and on this
+        Service: refers to the service provided by {{name}} as described in the relative terms (if available) and on
-      platform.
+        this platform.
       </li>
       <li>
         Third-party service: refers to advertisers, contest sponsors, promotional and marketing partners, and others who
@@ -109,16 +111,16 @@
     <h4>Do we share the information we collect with third parties?</h4>
     <p>
       We may disclose personal and non-personal information about you to government or law enforcement officials or
-    private parties as we, in our sole discretion, believe necessary or appropriate in order to respond to claims, legal
+      private parties as we, in our sole discretion, believe necessary or appropriate in order to respond to claims,
-    process (including subpoenas), to protect our rights and interests or those of a third party, the safety of the
+      legal process (including subpoenas), to protect our rights and interests or those of a third party, the safety of
-    public or any person, to prevent or stop any illegal, unethical, or legally actionable activity, or to otherwise
+      the public or any person, to prevent or stop any illegal, unethical, or legally actionable activity, or to
-    comply with applicable court orders, laws, rules and regulations.
+      otherwise comply with applicable court orders, laws, rules and regulations.
     </p>
 
     <h4>Where and when is information collected from customers and end users?</h4>
     <p>
-    {{name}} will collect personal information that you submit to us. We may also receive personal information about you
+      {{name}} will collect personal information that you submit to us. We may also receive personal information about
-    from third parties as described above.
+      you from third parties as described above.
     </p>
 
     <h4>How Do We Use Your E-mail Address?</h4>
@@ -130,9 +132,9 @@
 
     <h4>How Long Do We Keep Your Information?</h4>
     <p>
-    We keep your information only so long as we need it to provide {{name}} to you and fulfill the purposes described in
+      We keep your information only so long as we need it to provide {{name}} to you and fulfill the purposes described
-    this policy. When we no longer need to use your information and there is no need for us to keep it to comply with
+      in this policy. When we no longer need to use your information and there is no need for us to keep it to comply
-    our legal or regulatory obligations, we’ll either remove it from our systems or depersonalize it so that we
+      with our legal or regulatory obligations, we’ll either remove it from our systems or depersonalize it so that we
       can&rsquo;t identify you.
     </p>
 
@@ -140,28 +142,28 @@
     <p>
       We implement a variety of security measures to maintain the safety of your personal information when you enter,
       submit, or access your personal information. We mandate the use of a secure server. We cannot, however, ensure or
-    warrant the absolute security of any information you transmit to {{name}} or guarantee that your information on the
+      warrant the absolute security of any information you transmit to {{name}} or guarantee that your information on
-    Service may not be accessed, disclosed, altered, or destroyed by a breach of any of our physical, technical, or
+      the Service may not be accessed, disclosed, altered, or destroyed by a breach of any of our physical, technical,
-    managerial safeguards.
+      or managerial safeguards.
     </p>
 
     <h4>Could my information be transferred to other countries?</h4>
     <p>
-    {{name}} is hosted in the US. Information collected via our website may be viewed and hosted anywhere in the world,
+      {{name}} is hosted in the US. Information collected via our website may be viewed and hosted anywhere in the
-    including countries that may not have laws of general applicability regulating the use and transfer of such data. To
+      world, including countries that may not have laws of general applicability regulating the use and transfer of such
-    the fullest extent allowed by applicable law, by using any of the above, you voluntarily consent to the trans-border
+      data. To the fullest extent allowed by applicable law, by using any of the above, you voluntarily consent to the
-    transfer and hosting of such information.
+      trans-border transfer and hosting of such information.
     </p>
 
     <h4>Is the information collected through the {{name}} Service secure?</h4>
     <p>
       We take precautions to protect the security of your information. We have physical, electronic, and managerial
       procedures to help safeguard, prevent unauthorized access, maintain data security, and correctly use your
-    information. However, neither people nor security systems are foolproof, including encryption systems. In addition,
+      information. However, neither people nor security systems are foolproof, including encryption systems. In
-    people can commit intentional crimes, make mistakes, or fail to follow policies. Therefore, while we use reasonable
+      addition, people can commit intentional crimes, make mistakes, or fail to follow policies. Therefore, while we use
-    efforts to protect your personal information, we cannot guarantee its absolute security. If applicable law imposes
+      reasonable efforts to protect your personal information, we cannot guarantee its absolute security. If applicable
-    any non-disclaimable duty to protect your personal information, you agree that intentional misconduct will be the
+      law imposes any non-disclaimable duty to protect your personal information, you agree that intentional misconduct
-    standards used to measure our compliance with that duty.
+      will be the standards used to measure our compliance with that duty.
     </p>
 
     <h4>Can I update or correct my information?</h4>
@@ -173,10 +175,10 @@
       Customers have the right to request the restriction of certain uses and disclosures of personally identifiable
       information as follows. You can contact us in order to (1) update or correct your personally identifiable
       information, or (3) delete the personally identifiable information maintained about you on our systems (subject to
-    the following paragraph), by cancelling your account. Such updates, corrections, changes and deletions will have no
+      the following paragraph), by cancelling your account. Such updates, corrections, changes and deletions will have
-    effect on other information that we maintain in accordance with this Privacy Policy prior to such update,
+      no effect on other information that we maintain in accordance with this Privacy Policy prior to such update,
-    correction, change, or deletion. You are responsible for maintaining the secrecy of your unique password and account
+      correction, change, or deletion. You are responsible for maintaining the secrecy of your unique password and
-    information at all times.
+      account information at all times.
     </p>
     <p>
       {{name}} also provides ways for users to modify or remove the information we have collected from them from the
@@ -186,9 +188,9 @@
       You should be aware that it is not technologically possible to remove each and every record of the information you
       have provided to us from our system. The need to back up our systems to protect information from inadvertent loss
       means that a copy of your information may exist in a non-erasable form that will be difficult or impossible for us
-    to locate. Promptly after receiving your request, all personal information stored in databases we actively use, and
+      to locate. Promptly after receiving your request, all personal information stored in databases we actively use,
-    other readily searchable media will be updated, corrected, changed, or deleted, as appropriate, as soon as and to
+      and other readily searchable media will be updated, corrected, changed, or deleted, as appropriate, as soon as and
-    the extent reasonably and technically practicable.
+      to the extent reasonably and technically practicable.
     </p>
     <p>
       If you are an end user and wish to update, delete, or receive any information we have about you, you may do so by
@@ -198,19 +200,19 @@
     <h4>Governing Law</h4>
     <p>
       This Privacy Policy is governed by the laws of US without regard to its conflict of laws provision. You consent to
-    the exclusive jurisdiction of the courts in connection with any action or dispute arising between the parties under
+      the exclusive jurisdiction of the courts in connection with any action or dispute arising between the parties
-    or in connection with this Privacy Policy except for those individuals who may have rights to make claims under
+      under or in connection with this Privacy Policy except for those individuals who may have rights to make claims
-    Privacy Shield, or the Swiss-US framework.
+      under Privacy Shield, or the Swiss-US framework.
     </p>
     <p>
-    The laws of US, excluding its conflicts of law rules, shall govern this Agreement and your use of the website. Your
+      The laws of US, excluding its conflicts of law rules, shall govern this Agreement and your use of the website.
-    use of the website may also be subject to other local, state, national, or international laws.
+      Your use of the website may also be subject to other local, state, national, or international laws.
     </p>
     <p>
-    By using {{name}} or contacting us directly, you signify your acceptance of this Privacy Policy. If you do not agree
+      By using {{name}} or contacting us directly, you signify your acceptance of this Privacy Policy. If you do not
-    to this Privacy Policy, you should not engage with our website, or use our services. Continued use of the website,
+      agree to this Privacy Policy, you should not engage with our website, or use our services. Continued use of the
-    direct engagement with us, or following the posting of changes to this Privacy Policy that do not significantly
+      website, direct engagement with us, or following the posting of changes to this Privacy Policy that do not
-    affect the use or disclosure of your personal information will mean that you accept those changes.
+      significantly affect the use or disclosure of your personal information will mean that you accept those changes.
     </p>
 
     <h4>Your Consent</h4>
@@ -223,11 +225,11 @@
     <h4>Links to Other Websites</h4>
     <p>
       This Privacy Policy applies only to the Services. The Services may contain links to other websites not operated or
-    controlled by {{name}}. We are not responsible for the content, accuracy or opinions expressed in such websites, and
+      controlled by {{name}}. We are not responsible for the content, accuracy or opinions expressed in such websites,
-    such websites are not investigated, monitored or checked for accuracy or completeness by us. Please remember that
+      and such websites are not investigated, monitored or checked for accuracy or completeness by us. Please remember
-    when you use a link to go from the Services to another website, our Privacy Policy is no longer in effect. Your
+      that when you use a link to go from the Services to another website, our Privacy Policy is no longer in effect.
-    browsing and interaction on any other website, including those that have a link on our platform, is subject to that
+      Your browsing and interaction on any other website, including those that have a link on our platform, is subject
-    website’s own rules and policies. Such third parties may use their own cookies or other methods to collect
+      to that website’s own rules and policies. Such third parties may use their own cookies or other methods to collect
       information about you.
     </p>
 
@@ -238,17 +240,17 @@
     <p>
       We do not address anyone under the age of 13. We do not knowingly collect personally identifiable information from
       anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with
-    Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age
+      Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the
-    of 13 without verification of parental consent, We take steps to remove that information from Our servers.
+      age of 13 without verification of parental consent, We take steps to remove that information from Our servers.
     </p>
 
     <h4>Changes To Our Privacy Policy</h4>
     <p>
       We may change our Service and policies, and we may need to make changes to this Privacy Policy so that they
       accurately reflect our Service and policies. Unless otherwise required by law, we will notify you (for example,
-    through our Service) before we make changes to this Privacy Policy and give you an opportunity to review them before
+      through our Service) before we make changes to this Privacy Policy and give you an opportunity to review them
-    they go into effect. Then, if you continue to use the Service, you will be bound by the updated Privacy Policy. If
+      before they go into effect. Then, if you continue to use the Service, you will be bound by the updated Privacy
-    you do not want to agree to this or any updated Privacy Policy, you can delete your account.
+      Policy. If you do not want to agree to this or any updated Privacy Policy, you can delete your account.
     </p>
 
     <h4>Third-Party Services</h4>
@@ -269,17 +271,17 @@
 
     <h4>Tracking Technologies</h4>
     <p>
-    {{name}} does not use any tracking technologies. When an authorization code is received from No Agenda Social, that
+      {{name}} does not use any tracking technologies. When an authorization code is received from No Agenda Social,
-    token is stored in the browser&rsquo;s memory, and the Service uses tokens on each request for data. If the page is
+      that token is stored in the browser&rsquo;s memory, and the Service uses tokens on each request for data. If the
-    refreshed or the browser window/tab is closed, this token disappears, and a new one must be generated before the
+      page is refreshed or the browser window/tab is closed, this token disappears, and a new one must be generated
-    application can be used again.
+      before the application can be used again.
     </p>
 
     <h4>Information about General Data Protection Regulation (GDPR)</h4>
     <p>
       We may be collecting and using information from you if you are from the European Economic Area (EEA), and in this
-    section of our Privacy Policy we are going to explain exactly how and why is this data collected, and how we maintain
+      section of our Privacy Policy we are going to explain exactly how and why is this data collected, and how we
-    this data under protection from being replicated or used in the wrong way.
+      maintain this data under protection from being replicated or used in the wrong way.
     </p>
 
     <h4>What is GDPR?</h4>
@@ -289,16 +291,16 @@
     </p>
     <p>
       The GDPR is relevant to any globally operating company and not just the EU-based businesses and EU residents. Our
-    customers’ data is important irrespective of where they are located, which is why we have implemented GDPR controls
+      customers’ data is important irrespective of where they are located, which is why we have implemented GDPR
-    as our baseline standard for all our operations worldwide.
+      controls as our baseline standard for all our operations worldwide.
     </p>
 
     <h4>What is personal data?</h4>
     <p>
-    Any data that relates to an identifiable or identified individual. GDPR covers a broad spectrum of information that
+      Any data that relates to an identifiable or identified individual. GDPR covers a broad spectrum of information
-    could be used on its own, or in combination with other pieces of information, to identify a person. Personal data
+      that could be used on its own, or in combination with other pieces of information, to identify a person. Personal
-    extends beyond a person’s name or email address. Some examples include financial information, political opinions,
+      data extends beyond a person’s name or email address. Some examples include financial information, political
-    genetic data, biometric data, IP addresses, physical address, sexual orientation, and ethnicity.
+      opinions, genetic data, biometric data, IP addresses, physical address, sexual orientation, and ethnicity.
     </p>
     <p>The Data Protection Principles include requirements such as:</p>
     <ul>
@@ -312,8 +314,8 @@
       </li>
       <li>Personal data should be held no longer than necessary to fulfil its purpose.</li>
       <li>
-      People covered by the GDPR have the right to access their own personal data. They can also request a copy of their
+        People covered by the GDPR have the right to access their own personal data. They can also request a copy of
-      data, and that their data be updated, deleted, restricted, or moved to another organization.
+        their data, and that their data be updated, deleted, restricted, or moved to another organization.
       </li>
     </ul>
 
@@ -322,33 +324,33 @@
       GDPR adds some new requirements regarding how companies should protect individuals&rsquo; personal data that they
       collect and process. It also raises the stakes for compliance by increasing enforcement and imposing greater fines
       for breach. Beyond these facts, it&rsquo;s simply the right thing to do. At {{name}} we strongly believe that your
-    data privacy is very important and we already have solid security and privacy practices in place that go beyond the
+      data privacy is very important and we already have solid security and privacy practices in place that go beyond
-    requirements of this regulation.
+      the requirements of this regulation.
     </p>
 
     <h4>Individual Data Subject&rsquo;s Rights - Data Access, Portability, and Deletion</h4>
     <p>
       We are committed to helping our customers meet the data subject rights requirements of GDPR. {{name}} processes or
-    stores all personal data in fully vetted, DPA compliant vendors. We do store all conversation and personal data for
+      stores all personal data in fully vetted, DPA compliant vendors. We do store all conversation and personal data
-    up to 6 years unless your account is deleted. In which case, we dispose of all data in accordance with our Terms of
+      for up to 6 years unless your account is deleted. In which case, we dispose of all data in accordance with our
-    Service and Privacy Policy, but we will not hold it longer than 60 days.
+      Terms of Service and Privacy Policy, but we will not hold it longer than 60 days.
     </p>
     <p>
       We are aware that if you are working with EU customers, you need to be able to provide them with the ability to
-    access, update, retrieve and remove personal data. We got you! We've been set up as self service from the start and
+      access, update, retrieve and remove personal data. We got you! We've been set up as self service from the start
-    have always given you access to your data. Our customer support team is here for you to answer any questions you
+      and have always given you access to your data. Our customer support team is here for you to answer any questions
-    might have about working with the API.
+      you might have about working with the API.
     </p>
 
     <h4>California Residents</h4>
     <p>
-    The California Consumer Privacy Act (CCPA) requires us to disclose categories of Personal Information we collect and
+      The California Consumer Privacy Act (CCPA) requires us to disclose categories of Personal Information we collect
-    how we use it, the categories of sources from whom we collect Personal Information, and the third parties with whom
+      and how we use it, the categories of sources from whom we collect Personal Information, and the third parties with
-    we share it, which we have explained above.
+      whom we share it, which we have explained above.
     </p>
     <p>
-    We are also required to communicate information about rights California residents have under California law. You may
+      We are also required to communicate information about rights California residents have under California law. You
-    exercise the following rights:
+      may exercise the following rights:
     </p>
     <ul>
       <li>
@@ -359,8 +361,8 @@
       </li>
       <li>Right to Equal Service. We will not discriminate against you if you exercise your privacy rights.</li>
       <li>
-      Right to Delete. You may submit a verifiable request to close your account and we will delete Personal Information
+        Right to Delete. You may submit a verifiable request to close your account and we will delete Personal
-      about you that we have collected.
+        Information about you that we have collected.
       </li>
       <li>Request that a business that sells a consumer's personal data, not sell the consumer's personal data.</li>
     </ul>
@@ -387,8 +389,8 @@
       </li>
       <li>Right to Equal Service. We will not discriminate against you if you exercise your privacy rights.</li>
       <li>
-      Right to Delete. You may submit a verifiable request to close your account and we will delete Personal Information
+        Right to Delete. You may submit a verifiable request to close your account and we will delete Personal
-      about you that we have collected.
+        Information about you that we have collected.
       </li>
       <li>
         Right to request that a business that sells a consumer's personal data, not sell the consumer's personal data.
@@ -406,6 +408,7 @@
     <ul>
       <li>Via this Link: <router-link to="/how-it-works">https://noagendacareers.com/how-it-works</router-link></li>
     </ul>
+  </article>
 </template>
 
 <script lang="ts">

src/JobsJobsJobs/App/src/views/TermsOfService.vue

@@ -1,20 +1,22 @@
 <template>
+  <article>
+    <page-title title="Terms of Service" />
     <h3>Terms of Service</h3>
     <p><em>(as of February 6<sup>th</sup>, 2021)</em></p>
 
     <h4>Acceptance of Terms</h4>
     <p>
-    By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are responsible
+      By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are
-    to ensure that your use of this site complies with all applicable laws. Your continued use of this site implies your
+      responsible to ensure that your use of this site complies with all applicable laws. Your continued use of this
-    acceptance of these terms.
+      site implies your acceptance of these terms.
     </p>
 
     <h4>Description of Service and Registration</h4>
     <p>
-    Jobs, Jobs, Jobs is a service that allows individuals to enter and amend employment profiles, restricting access to
+      Jobs, Jobs, Jobs is a service that allows individuals to enter and amend employment profiles, restricting access
-    the details of these profiles to other users of <a href="https://noagendasocial.com" target="_blank">No Agenda
+      to the details of these profiles to other users of <a href="https://noagendasocial.com" target="_blank">No Agenda
-    Social</a>. Registration is accomplished by allowing Jobs, Jobs, Jobs to read one&rsquo;s No Agenda Social profile.
+      Social</a>. Registration is accomplished by allowing Jobs, Jobs, Jobs to read one&rsquo;s No Agenda Social
-    See our <router-link to="/privacy-policy">privacy policy</router-link> for details on the personal (user)
+      profile. See our <router-link to="/privacy-policy">privacy policy</router-link> for details on the personal (user)
       information we maintain.
     </p>
 
@@ -37,4 +39,5 @@
       You may also wish to review our <router-link to="/privacy-policy">privacy policy</router-link> to learn how we
       handle your data.
     </p>
+  </article>
 </template>

src/JobsJobsJobs/App/src/views/citizen/Authorized.vue

@@ -1,5 +1,8 @@
 <template>
+  <article>
+    <page-title title="Logging on..." />
     <p>{{message}}</p>
+  </article>
 </template>
 
 <script lang="ts">

src/JobsJobsJobs/App/src/views/citizen/Dashboard.vue

@@ -1,4 +1,6 @@
 <template>
+  <article>
+    <page-title title="Dashboard" />
     <h3>Welcome, {{user.name}}</h3>
     <load-data :load="retrieveData">
       <template v-if="profile">
@@ -20,9 +22,10 @@
       </template>
       <hr>
       <p>
-      There <span v-if="profileCount === 1">is</span><span v-else>are</span> <span v-if="profileCount === 0">no</span><span v-else>{{profileCount}}</span>
+        There <template v-if="profileCount === 1">is</template><template v-else>are</template>&nbsp;
-      employment profile<span v-if="profileCount !== 1">s</span> from citizens of Gitmo Nation.
+        <template v-if="profileCount === 0">no</template><template v-else>{{profileCount}}</template>
-      <span v-if="profileCount > 0">Take a look around and see if you can help them find work!</span>
+        employment profile<template v-if="profileCount !== 1">s</template> from citizens of Gitmo Nation.
+        <template v-if="profileCount > 0">Take a look around and see if you can help them find work!</template>
       </p>
     </load-data>
     <hr>
@@ -30,6 +33,7 @@
       To see how this application works, check out &ldquo;How It Works&rdquo; in the sidebar (last updated June
       14<sup>th</sup>, 2021).
     </p>
+  </article>
 </template>
 
 <script lang="ts">

src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue

@@ -1,6 +1,7 @@
 <template>
+  <article>
+    <page-title title="Edit Profile" />
     <h3>Employment Profile</h3>
-
     <load-data :load="retrieveData">
       <form>
         <v-container>
@@ -69,8 +70,8 @@
           <h4>Experience</h4>
           <p>
             This application does not have a place to individually list your chronological job history; however, you can
-          use this area to list prior jobs, their dates, and anything else you want to include that&rsquo;s not already a
+            use this area to list prior jobs, their dates, and anything else you want to include that&rsquo;s not
-          part of your Professional Biography above.
+            already a part of your Professional Biography above.
           </p>
           <v-row>
             <v-col>
@@ -88,25 +89,28 @@
           <v-row>
             <v-col>
               <br>
-            <button type="submit" class="btn btn-outline-primary">Save</button>
+              <v-btn text color="primary">Save</v-btn>
             </v-col>
           </v-row>
         </v-container>
       </form>
       <p v-if="!isNew">
-      <br><router-link :to="`/profile/view/${user.citizenId}`"><v-icon icon="file-account-outline" /> View Your User
+        <br>
-      Profile</router-link>
+        <v-btn color="primary" @click="viewProfile">
+          <v-icon icon="mdi-file-account-outline" />&nbsp; View Your User Profile
+        </v-btn>
       </p>
     </load-data>
     <p>
-    <br>If you want to delete your profile, or your entire account, <router-link to="/so-long/options">see your deletion
+      <br>If you want to delete your profile, or your entire account, <router-link to="/so-long/options">see your
-    options here</router-link>.
+      deletion options here</router-link>.
     </p>
-
+  </article>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, Ref, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import api, { LogOnSuccess, Profile } from '../../api'
 import MarkdownEditor from '../../components/MarkdownEditor.vue'
 import LoadData from '../../components/shared/LoadData.vue'
@@ -120,6 +124,7 @@ export default defineComponent({
   },
   setup () {
     const store = useStore()
+    const router = useRouter()
 
     /** The currently logged-on user */
     const user = store.state.user as LogOnSuccess
@@ -148,7 +153,7 @@ export default defineComponent({
       const nameResult = await api.citizen.retrieve(user.citizenId, user)
       if (typeof nameResult === 'string') {
         errors.push(nameResult)
-      } else {
+      } else if (typeof nameResult !== 'undefined') {
         realName.value = nameResult.realName || ''
       }
     }
@@ -159,7 +164,8 @@ export default defineComponent({
       isNew,
       profile,
       realName,
-      continents: computed(() => store.state.continents)
+      continents: computed(() => store.state.continents),
+      viewProfile: () => router.push(`/profile/view/${user.citizenId}`)
     }
   }
 })

src/JobsJobsJobs/App/src/views/citizen/LogOff.vue

@@ -1,5 +1,8 @@
 <template>
+  <article>
+    <page-title title="Logging off..." />
     <p>Logging off&hellip;</p>
+  </article>
 </template>
 
 <script lang="ts">

src/JobsJobsJobs/App/src/views/profile/ProfileView.vue

@@ -1,19 +1,103 @@
 <template>
-  <p>TODO: convert this template</p>
+  <article>
+    <page-title :title="pageTitle" />
+    <load-data :load="retrieveProfile">
+      <h2><a :href="it.citizen.profileUrl" target="_blank">{{citizenName}}</a></h2>
+      <h4>{{it.continent.name}}, {{it.profile.region}}</h4>
+      <p v-html="workTypes"></p>
+      <hr>
+      <div v-html="bioHtml"></div>
+
+      <template v-if="it.profile.skills.length > 0">
+        <hr>
+        <h4>Skills</h4>
+        <ul>
+          <li v-for="(skill, idx) in it.profile.skills" :key="idx">
+            {{skill.description}}<template v-if="skill.notes"> ({{skill.notes}})</template>
+          </li>
+        </ul>
+      </template>
+
+      <template v-if="it.profile.experience">
+        <hr>
+        <h4>Experience / Employment History</h4>
+        <div v-html="expHtml"></div>
+      </template>
+
+      <template v-if="user.citizenId === it.citizen.id">
+        <br><br>
+        <v-btn color="primary" @click="editProfile"><v-icon icon="mdi-pencil" />&nbsp; Edit Your Profile</v-btn>
+      </template>
+    </load-data>
+  </article>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref, Ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import marked from 'marked'
+import LoadData from '../../components/shared/LoadData.vue'
+import { useStore } from '../../store'
+import api, { LogOnSuccess, markedOptions, ProfileForView } from '../../api'
 
 export default defineComponent({
   name: 'ProfileEdit',
+  components: { LoadData },
   setup () {
+    const store = useStore()
     const route = useRoute()
-    const profileId = route.params.id
+    const router = useRouter()
+
+    /** The currently logged-on user */
+    const user = store.state.user as LogOnSuccess
+
+    /** The requested profile */
+    const it : Ref<ProfileForView | undefined> = ref(undefined)
+
+    /** The citizen's name (real, display, or NAS, whichever is found first) */
+    const citizenName = computed(() => {
+      const c = it.value?.citizen
+      return c?.realName || c?.displayName || c?.naUser || ''
+    })
+
+    /** The work types for the top of the page */
+    const workTypes = computed(() => {
+      const parts : string[] = []
+      if (it.value) {
+        const p = it.value.profile
+        if (p.seekingEmployment) {
+          parts.push('<strong><em>CURRENTLY SEEKING EMPLOYMENT</em></strong>')
+        } else {
+          parts.push('Not actively seeking employment')
+        }
+        parts.push(`${p.fullTime ? 'I' : 'Not i'}nterested in full-time employment`)
+        parts.push(`${p.remoteWork ? 'I' : 'Not i'}nterested in remote opportunities`)
+      }
+      return parts.join(' &bull; ')
+    })
+
+    /** Retrieve the profile and supporting data */
+    const retrieveProfile = async (errors : string[]) => {
+      const profileResp = await api.profile.retreiveForView(route.params.id as string, user)
+      if (typeof profileResp === 'string') {
+        errors.push(profileResp)
+      } else if (typeof profileResp === 'undefined') {
+        errors.push('Profile not found')
+      } else {
+        it.value = profileResp
+      }
+    }
 
     return {
-      profileId
+      pageTitle: computed(() => it.value ? `Employment profile for ${citizenName.value}` : 'Loading Profile...'),
+      user,
+      retrieveProfile,
+      it,
+      workTypes,
+      citizenName,
+      bioHtml: computed(() => marked(it.value?.profile.biography || '', markedOptions)),
+      expHtml: computed(() => marked(it.value?.profile.experience || '', markedOptions)),
+      editProfile: () => router.push('/citizen/profile')
     }
   }
 })

src/JobsJobsJobs/App/src/views/so-long/DeletionOptions.vue

@@ -1,26 +1,28 @@
 <template>
+  <article>
+    <page-title title="Account Deletion Options" />
     <h3>Account Deletion Options</h3>
 
     <p v-if="error !== ''">{{error}}</p>
 
     <h4>Option 1 &ndash; Delete Your Profile</h4>
     <p>
-    Utilizing this option will remove your current employment profile and skills. This will preserve any success stories
+      Utilizing this option will remove your current employment profile and skills. This will preserve any success
-    you may have written, and preserves this application&rsquo;s knowledge of you. This is what you want to use if you
+      stories you may have written, and preserves this application&rsquo;s knowledge of you. This is what you want to
-    want to clear out your profile and start again (and remove the current one from others&rsquo; view).
+      use if you want to clear out your profile and start again (and remove the current one from others&rsquo; view).
     </p>
     <p class="text-center">
-    <button class="btn btn-danger" @click="deleteProfile">Delete Your Profile</button>
+      <v-btn color="error" @click="deleteProfile">Delete Your Profile</v-btn>
     </p>
 
     <hr>
 
     <h4>Option 2 &ndash; Delete Your Account</h4>
     <p>
-    This option will make it like you never visited this site. It will delete your profile, skills, success stories, and
+      This option will make it like you never visited this site. It will delete your profile, skills, success stories,
-    account. This is what you want to use if you want to disappear from this application. Clicking the button below
+      and account. This is what you want to use if you want to disappear from this application. Clicking the button
-    <strong>will not</strong> affect your No Agenda Social account in any way; its effects are limited to Jobs, Jobs,
+      below <strong>will not</strong> affect your No Agenda Social account in any way; its effects are limited to Jobs,
-    Jobs.
+      Jobs, Jobs.
     </p>
     <p>
       <em>
@@ -30,8 +32,9 @@
       </em>
     </p>
     <p class="text-center">
-    <button class="btn btn-danger" @click="deleteAccount">Delete Your Entire Account</button>
+      <v-btn color="error" @click="deleteAccount">Delete Your Entire Account</v-btn>
     </p>
+  </article>
 </template>
 
 <script lang="ts">

src/JobsJobsJobs/App/src/views/so-long/DeletionSuccess.vue

@@ -1,4 +1,6 @@
 <template>
+  <article>
+    <page-title title="Account Deletion Success" />
     <h3>Account Deletion Success</h3>
     <p>
       Your account has been successfully deleted. To revoke the permissions you have previously granted to this
@@ -9,4 +11,5 @@
     <p>
       Thank you for participating, and thank you for your courage. #GitmoNation
     </p>
+  </article>
 </template>

src/JobsJobsJobs/Domain/SharedTypes.fs

@@ -122,6 +122,17 @@ type ProfileSearchResult = {
   }
 
 
+/// The data required to show a viewable profile
+type ProfileForView = {
+  /// The profile itself
+  profile : Profile
+  /// The citizen to whom the profile belongs
+  citizen : Citizen
+  /// The continent for the profile
+  continent : Continent
+}
+
+
 /// The parameters for a public job search
 type PublicSearch = {
   /// Retrieve citizens from this continent