From f64955c69d91e578e580b409ba31ac4b3477da96 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Wed, 12 Jul 2023 01:28:23 -0400
Subject: Initial commit

---
 front-end/src/views/Account/[comp].vue             | 136 +++++++++
 .../views/Account/components/oauth/CreateApp.vue   | 183 ++++++++++++
 .../src/views/Account/components/oauth/Oauth.vue   |  93 ++++++
 .../Account/components/oauth/SingleApplication.vue | 190 ++++++++++++
 .../src/views/Account/components/oauth/o2Api.ts    | 176 +++++++++++
 .../views/Account/components/profile/Profile.vue   | 199 +++++++++++++
 .../Account/components/profile/profile-schema.ts   | 310 ++++++++++++++++++++
 .../src/views/Account/components/settings/Fido.vue |  53 ++++
 .../Account/components/settings/PasswordReset.vue  | 235 +++++++++++++++
 .../src/views/Account/components/settings/Pki.vue  | 182 ++++++++++++
 .../views/Account/components/settings/Security.vue |  81 ++++++
 .../views/Account/components/settings/Settings.vue |  16 +
 .../Account/components/settings/TotpSettings.vue   | 263 +++++++++++++++++
 front-end/src/views/Blog/blog-api/index.ts         |  22 ++
 front-end/src/views/Blog/ckeditor/Editor.vue       | 155 ++++++++++
 front-end/src/views/Blog/ckeditor/build.ts         | 125 ++++++++
 front-end/src/views/Blog/components/Channels.vue   |  99 +++++++
 .../views/Blog/components/Channels/ChannelEdit.vue | 157 ++++++++++
 .../Blog/components/Channels/ChannelTable.vue      |  48 +++
 front-end/src/views/Blog/components/Content.vue    | 133 +++++++++
 .../Blog/components/Content/ContentEditor.vue      | 225 ++++++++++++++
 .../views/Blog/components/Content/ContentTable.vue |  75 +++++
 .../src/views/Blog/components/ContentSearch.vue    | 115 ++++++++
 .../src/views/Blog/components/EditorTable.vue      |  96 ++++++
 front-end/src/views/Blog/components/FeedFields.vue | 140 +++++++++
 front-end/src/views/Blog/components/Posts.vue      | 113 +++++++
 .../src/views/Blog/components/Posts/PostEdit.vue   | 155 ++++++++++
 .../src/views/Blog/components/Posts/PostTable.vue  |  62 ++++
 .../components/podcast-helpers/EpisodeAdder.vue    | 164 +++++++++++
 .../components/podcast-helpers/podcast-form.ts     | 174 +++++++++++
 front-end/src/views/Blog/form-helpers/channels.ts  | 227 +++++++++++++++
 front-end/src/views/Blog/form-helpers/index.ts     |  17 ++
 front-end/src/views/Blog/form-helpers/posts.ts     | 116 ++++++++
 front-end/src/views/Blog/index.vue                 | 324 +++++++++++++++++++++
 front-end/src/views/Login/components/Social.vue    |  57 ++++
 front-end/src/views/Login/components/Totp.vue      |  65 +++++
 front-end/src/views/Login/components/UserPass.vue  |  92 ++++++
 front-end/src/views/Login/index.vue                | 182 ++++++++++++
 front-end/src/views/Login/pki/index.vue            |  80 +++++
 front-end/src/views/Login/social/[type].vue        | 127 ++++++++
 .../src/views/Register/components/CompleteReg.vue  | 116 ++++++++
 front-end/src/views/Register/index.vue             | 161 ++++++++++
 front-end/src/views/[...all].vue                   |  24 ++
 front-end/src/views/index.vue                      |  18 ++
 44 files changed, 5781 insertions(+)
 create mode 100644 front-end/src/views/Account/[comp].vue
 create mode 100644 front-end/src/views/Account/components/oauth/CreateApp.vue
 create mode 100644 front-end/src/views/Account/components/oauth/Oauth.vue
 create mode 100644 front-end/src/views/Account/components/oauth/SingleApplication.vue
 create mode 100644 front-end/src/views/Account/components/oauth/o2Api.ts
 create mode 100644 front-end/src/views/Account/components/profile/Profile.vue
 create mode 100644 front-end/src/views/Account/components/profile/profile-schema.ts
 create mode 100644 front-end/src/views/Account/components/settings/Fido.vue
 create mode 100644 front-end/src/views/Account/components/settings/PasswordReset.vue
 create mode 100644 front-end/src/views/Account/components/settings/Pki.vue
 create mode 100644 front-end/src/views/Account/components/settings/Security.vue
 create mode 100644 front-end/src/views/Account/components/settings/Settings.vue
 create mode 100644 front-end/src/views/Account/components/settings/TotpSettings.vue
 create mode 100644 front-end/src/views/Blog/blog-api/index.ts
 create mode 100644 front-end/src/views/Blog/ckeditor/Editor.vue
 create mode 100644 front-end/src/views/Blog/ckeditor/build.ts
 create mode 100644 front-end/src/views/Blog/components/Channels.vue
 create mode 100644 front-end/src/views/Blog/components/Channels/ChannelEdit.vue
 create mode 100644 front-end/src/views/Blog/components/Channels/ChannelTable.vue
 create mode 100644 front-end/src/views/Blog/components/Content.vue
 create mode 100644 front-end/src/views/Blog/components/Content/ContentEditor.vue
 create mode 100644 front-end/src/views/Blog/components/Content/ContentTable.vue
 create mode 100644 front-end/src/views/Blog/components/ContentSearch.vue
 create mode 100644 front-end/src/views/Blog/components/EditorTable.vue
 create mode 100644 front-end/src/views/Blog/components/FeedFields.vue
 create mode 100644 front-end/src/views/Blog/components/Posts.vue
 create mode 100644 front-end/src/views/Blog/components/Posts/PostEdit.vue
 create mode 100644 front-end/src/views/Blog/components/Posts/PostTable.vue
 create mode 100644 front-end/src/views/Blog/components/podcast-helpers/EpisodeAdder.vue
 create mode 100644 front-end/src/views/Blog/components/podcast-helpers/podcast-form.ts
 create mode 100644 front-end/src/views/Blog/form-helpers/channels.ts
 create mode 100644 front-end/src/views/Blog/form-helpers/index.ts
 create mode 100644 front-end/src/views/Blog/form-helpers/posts.ts
 create mode 100644 front-end/src/views/Blog/index.vue
 create mode 100644 front-end/src/views/Login/components/Social.vue
 create mode 100644 front-end/src/views/Login/components/Totp.vue
 create mode 100644 front-end/src/views/Login/components/UserPass.vue
 create mode 100644 front-end/src/views/Login/index.vue
 create mode 100644 front-end/src/views/Login/pki/index.vue
 create mode 100644 front-end/src/views/Login/social/[type].vue
 create mode 100644 front-end/src/views/Register/components/CompleteReg.vue
 create mode 100644 front-end/src/views/Register/index.vue
 create mode 100644 front-end/src/views/[...all].vue
 create mode 100644 front-end/src/views/index.vue

(limited to 'front-end/src/views')

diff --git a/front-end/src/views/Account/[comp].vue b/front-end/src/views/Account/[comp].vue
new file mode 100644
index 0000000..75fd086
--- /dev/null
+++ b/front-end/src/views/Account/[comp].vue
@@ -0,0 +1,136 @@
+<template>
+  <div id="account-template" class="app-component-entry">
+    <TabGroup :selectedIndex="tabId" @change="onTabChange" as="div" class="container h-full m-auto mt-0 mb-10 duration-150 ease-linear">
+
+      <div class="flex w-full py-2 xl:w-auto lg:pt-4 xl:fixed">
+        
+        <TabList as="div" class="flex flex-row mx-auto mb-1 xl:mx-0 xl:mb-0">
+          
+          <Tab v-slot="{ selected }" >
+            <span class="page-link" :class="{ 'active': selected }">
+             Profile
+            </span>
+          </tab>
+
+          <Tab v-slot="{ selected }" >
+            <span class="page-link" :class="{ 'active': selected }">
+             OAuth
+            </span>
+          </tab>
+
+          <Tab v-slot="{ selected }" >
+            <span class="page-link" :class="{ 'active': selected }">
+             Settings
+            </span>
+          </tab>
+
+        </TabList>
+      </div>
+
+      <TabPanels as="div" class="xl:my-16 md:mb-4">
+        
+        <TabPanel :unmount="false">
+          <Profile />
+        </TabPanel>
+        
+        <TabPanel :unmount="false">
+          <OauthApps />
+        </TabPanel>
+        
+        <TabPanel :unmount="false">
+          <Settings />
+        </TabPanel>
+
+      </TabPanels>
+
+    </TabGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { usePageGuard, useTitle } from '@vnuge/vnlib.browser'
+import { useRouteParams } from '@vueuse/router'
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
+import Settings from './components/settings/Settings.vue'
+import Profile from './components/profile/Profile.vue'
+import OauthApps from './components/oauth/Oauth.vue'
+
+usePageGuard()
+useTitle('Account')
+
+enum ComponentType{
+  Profile = 'profile',
+  Oauth = 'oauth',
+  Settings = 'settings'
+}
+
+const comp = useRouteParams<ComponentType>('comp')
+
+const tabId = computed<number>(() =>{
+   switch (comp.value) {
+    case ComponentType.Oauth:
+      return 1
+    case ComponentType.Settings:
+      return 2
+    case ComponentType.Profile:
+    default:
+      return 0
+  }
+})
+
+const onTabChange = (tabid : number) =>{
+  switch (tabid) {
+    case 1:
+      comp.value = ComponentType.Oauth
+      break
+    case 2:
+      comp.value = ComponentType.Settings
+      break
+    case 0:
+    default:
+      comp.value = ComponentType.Profile
+      break
+  }
+}
+
+</script>
+
+<style lang="scss">
+#account-template{
+  p{
+    @apply text-gray-700 dark:text-gray-400;
+  }
+
+  .page-link{
+    font-size: 1.1rem;
+    @apply border-b-2 border-transparent cursor-pointer mx-2 px-1;
+  }
+
+  .page-link.active{
+    @apply border-primary-500;
+  }
+
+  .acnt-content-container{
+    @apply m-auto max-w-3xl;
+  }
+
+  .panel-container{
+
+  }
+
+  .panel-container .panel-header{
+    @apply flex flex-row px-2;
+  }
+
+  .panel-container .panel-content{
+    @apply bg-white dark:bg-dark-800 border-transparent dark:border-dark-500;
+    @apply m-auto max-w-3xl border sm:rounded-md shadow-md sm:p-4 p-3 sm:my-3 my-2;
+  }
+
+  .panel-container .panel-header .panel-title{
+    @apply my-auto;
+  }
+}
+
+</style>
diff --git a/front-end/src/views/Account/components/oauth/CreateApp.vue b/front-end/src/views/Account/components/oauth/CreateApp.vue
new file mode 100644
index 0000000..2321743
--- /dev/null
+++ b/front-end/src/views/Account/components/oauth/CreateApp.vue
@@ -0,0 +1,183 @@
+<template>
+    <Dialog :open="isOpen" @close="close" class="relative z-10">
+        <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
+        <div class="fixed inset-0 flex justify-center top-20">
+            <DialogPanel class="new-o2-app-dialog">
+                <DialogTitle>Create app</DialogTitle>
+                <div class="flex">
+                    <div class="m-auto mb-3 text-sm">
+                        <p class="my-1">
+                            Step 1: Enter a name for your app.
+                        </p>
+                        <p class="my-1">
+                            Step 2: Submit the form.
+                        </p>
+                        <p class="my-1 text-red-500">
+                            Step 3: Save your Client ID and Secret somewhere safe.
+                        </p>
+                    </div>
+                </div>
+                <!-- If secret is set, show the scret window -->
+                <div v-if="newAppBuffer.secret" class="mt-2">
+                    <div class="block mx-1 sm:inline">
+                        Secret:
+                    </div>
+                    <div class="px-1 py-4 my-2 break-all border-2 border-gray-300 rounded-lg">
+                        <div class="text-center secret">
+                            <span class="block mx-1 sm:inline">
+                            {{ newAppBuffer.secret }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="text-sm">
+                        <p class="p-2">
+                            This secret will only be displayed <strong>once</strong>, and you cannot request it again.
+                            If you lose it, you will need to update the secret from the app edit pane.
+                        </p>
+                        <p class="p-2">
+                            Please remember to keep this secret somewhere safe. If an attacker gains
+                            access to it, they will be able to access any APIs on your behalf!
+                        </p>
+                    </div>
+                    <div class="flex justify-end">
+                    <button v-if="!copied" class="btn primary" @click="copy(newAppBuffer.secret)">
+                        Copy
+                    </button>
+                    <button v-else class="btn primary" @click="close">
+                        Done
+                    </button>
+                    </div>
+                </div>
+                <div v-else>
+                    <form id="o2-app-creation" class="" @submit.prevent="onFormSubmit">
+                        <fieldset class="flex flex-col gap-4">
+                            <div class="input-container">
+                                <label>App Name</label>
+                                <input 
+                                    class="w-full mt-1 input primary"
+                                    :class="{'invalid':v$.name.$invalid, 'dirty': v$.name.$dirty}"
+                                    name="name"
+                                    type="text"
+                                    v-model="v$.name.$model"
+                                />
+                            </div>
+                            <div class="input-container">
+                                <label>Description</label>
+                                <textarea 
+                                    class="w-full mt-1 input primary" 
+                                    :class="{ 'invalid': v$.description.$invalid, 'dirty': v$.name.$dirty }" 
+                                    name="description" 
+                                    v-model="v$.description.$model" 
+                                    rows="3" 
+                                />
+                            </div>
+                            <div class="input-container">
+                                <label>Permissions</label>
+                                <div class="flex flex-col flex-wrap sm:flex-row">
+                                    <div v-for="permission in appPermissions" :key="permission.type" class="my-2 sm:m-3">
+                                        <label class="flex cursor-pointer">
+                                            <input class="w-5 cursor-pointer" type="checkbox" :name="permission.type" @change="permissionChanged">
+                                            <span class="pl-1">{{ permission.label }}</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </fieldset>
+                        <div class="flex justify-end mt-4">
+                            <div class="button-group">
+                                <button type="submit" form="o2-app-creation" class="btn primary">Submit</button>
+                                <button class="btn" @click.prevent="close">Cancel</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </DialogPanel>
+        </div>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { indexOf, pull } from 'lodash'
+import { ref, toRefs } from 'vue';
+import { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue'
+import { apiCall } from '@vnuge/vnlib.browser'
+import { useOAuth2Apps, getAppValidator, getAppPermissions } from './o2Api'
+import { useClipboard } from '@vueuse/core'
+
+const emit = defineEmits(['close'])
+
+const props = defineProps<{
+    isOpen: boolean
+}>()
+
+const { isOpen } = toRefs(props);
+
+const { copied, copy } = useClipboard();
+//Init the oauth2 app api
+const { createApp } = useOAuth2Apps('/oauth/apps');
+const appPermissions = getAppPermissions();
+
+const newAppBuffer = ref({});
+const newAppPermissions = ref([]);
+
+const { v$, validate, reset } = getAppValidator(newAppBuffer);
+
+const close = () => {
+    newAppBuffer.value = {}
+    reset()
+    emit('close')
+}
+
+const onFormSubmit = async () =>{
+
+    // Validate the new app form
+    if (!await validate()) {
+        return
+    }
+
+    // Create the new app
+    await apiCall(async () => {
+
+        const { secret } = await createApp(newAppBuffer.value)
+
+        // Reset the new app buffer and pass the secret value
+        newAppBuffer.value = { secret }
+    })
+
+    // reset the validator
+    v$.value.$reset()
+}
+
+const permissionChanged = (e : any) => {
+    if (e.target.checked) {
+        // Make sure the permission is not already in the list
+        if (indexOf(newAppPermissions.value, e.target.name) > -1) {
+            return
+        }
+        // Add the permission to the list
+        newAppPermissions.value.push(e.target.name)
+    } else {
+        // Remove the permission from the list
+        pull(newAppPermissions.value, e.target.name)
+    }
+    // Update the permissions model
+    v$.value.permissions.$model = newAppPermissions.value.join(',')
+}
+
+</script>
+
+<style lang="scss">
+
+.new-o2-app-dialog{
+    @apply w-full max-w-lg p-8 pt-4 m-auto mt-0 shadow-md sm:rounded-md;
+    @apply bg-white dark:bg-dark-600 dark:text-gray-200;
+
+    #o2-app-creation{
+        input.dirty.invalid,
+        textarea.dirty.invalid{
+            @apply border-red-500 focus:border-red-500;
+        }
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Account/components/oauth/Oauth.vue b/front-end/src/views/Account/components/oauth/Oauth.vue
new file mode 100644
index 0000000..119aa50
--- /dev/null
+++ b/front-end/src/views/Account/components/oauth/Oauth.vue
@@ -0,0 +1,93 @@
+<template>
+  <div id="oauth-apps" class="acnt-content-container">
+    <div class="app-container panel-container">
+      <div class="mb-6 panel-header">
+        <div class="flex ml-0 mr-auto">
+          <div class="my-auto panel-title">
+            <h4>Your applications</h4>
+          </div>
+        </div>
+        <div class="ml-auto mr-0">
+          <div class="button-container">
+            <button class="btn primary sm" :disabled="!isLocalAccount" @click="editNew = true">
+              Create App
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="apps?.length == 0" class="no-apps-container">
+        <div class="m-auto">
+          You dont have any OAuth2 client applications yet.
+        </div>
+      </div>
+      <div v-else>
+        <div v-for="app in apps" :key="app.data.Id" class="panel-content">
+          <SingleApplication :application="app" :allow-edit="isLocalAccount" @appDeleted="loadApps" />
+        </div>
+      </div>
+    </div>
+    <div class="px-2 my-10">
+      <div class="m-auto text-sm">
+        OAuth2 applications allow you grant api access to OAuth2 clients using the Client Credentials grant type.
+        <a class="link" href="https://oauth.net" target="_blank">
+          Learn more
+        </a>
+      </div>
+      <div v-show="!isLocalAccount" class="mt-3 text-center text-red-500">
+        You may not create or edit applications if you are using external authentication.
+      </div>
+    </div>
+    <CreateApp :is-open="editNew" @close="newAppClose" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import CreateApp from './CreateApp.vue'
+import { useSession, apiCall } from '@vnuge/vnlib.browser'
+
+import SingleApplication from './SingleApplication.vue'
+import { AppBuffer, OAuth2Application, useOAuth2Apps } from './o2Api'
+
+const { isLocalAccount } = useSession()
+const { getApps } = useOAuth2Apps('/oauth/apps');
+
+const apps = ref<AppBuffer<OAuth2Application>[]>();
+const editNew = ref(false);
+
+const loadApps = async () => {
+  await apiCall(async () => {
+    const appList = await getApps();
+    // sort apps from newest to oldest
+    appList.sort((a, b) => {
+      if (a.data.Created > b.data.Created) return -1
+      if (a.data.Created < b.data.Created) return 1
+      return 0
+    })
+    // set the apps
+    apps.value = appList
+  })
+}
+
+const newAppClose = () => {
+  editNew.value = false;
+  //Reload apps on close
+  loadApps();
+}
+
+//Load apps, but do not await 
+loadApps()
+
+</script>
+
+<style>
+
+#oauth-apps {
+  @apply m-auto max-w-3xl;
+}
+
+#oauth-apps .app-container .no-apps-container {
+  @apply w-full flex h-36 sm:border sm:rounded-md mt-4 mb-20 dark:border-dark-500 border-gray-300;
+}
+
+</style>
diff --git a/front-end/src/views/Account/components/oauth/SingleApplication.vue b/front-end/src/views/Account/components/oauth/SingleApplication.vue
new file mode 100644
index 0000000..9fcc5e3
--- /dev/null
+++ b/front-end/src/views/Account/components/oauth/SingleApplication.vue
@@ -0,0 +1,190 @@
+<template>
+  <div :id="data.Id">
+    <div class="flex flex-row">
+      <div class="flex ml-0 mr-auto">
+        <div class="flex w-8 h-8 rounded-full bg-primary-500">
+          <div class="m-auto text-white dark:text-dark-500">
+            <fa-icon icon="key"></fa-icon>
+          </div>
+        </div>
+        <div class="inline my-auto ml-2">
+          <h5 class="m-0">{{ name }}</h5>
+        </div>
+      </div>
+      <div v-if="allowEdit && editMode" class="button-group">
+        <button class="btn primary xs" :disabled="modified" @click="onSubmit">Update</button>
+        <button class="btn xs" @click="onCancel">Cancel</button>
+      </div>
+      <div v-else class="">
+        <button class="btn no-border xs" @click="editMode = true">Edit</button>
+      </div>
+    </div>
+    <div class="px-3 py-1 text-gray-500">
+      <div class="my-1">
+        <span> Client ID: </span>
+        <span class="font-mono text-black dark:text-white">{{ clientId }}</span>
+      </div>
+      <div class="text-sm">
+        <span> Created: </span>
+        <span>{{ createdTime }}</span>
+      </div>
+      <div v-if="!editMode" class="text-sm">
+        <span>{{ data.description }}</span>
+      </div>
+    </div>
+    <div v-if="newSecret" class="flex">
+      <div class="max-w-md py-4 mx-auto">
+        <div class="pl-1 mb-2">
+          New secret
+        </div>
+        <div class="p-4 text-sm break-all border-2 rounded-lg dark:border-dark-400">
+            {{ newSecret }}
+        </div>
+        <div class="flex justify-end my-3">
+          <button v-if="!copied" class="rounded btn" @click="copy(newSecret)">
+            Copy
+          </button>
+          <button v-else class="rounded btn" @click="closeNewSecret">
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="editMode" class="app-form-container">
+      <div class="py-4">
+        <form :id="formId" class="max-w-md mx-auto">
+          <fieldset :disabled="waiting" class="">
+            <div class="input-container">
+              <div class="pl-1 mb-1">
+                App name
+              </div>
+              <input class="w-full input primary" :class="{ 'invalid': v$.name.$invalid }" v-model="v$.name.$model" type="text" name="name" />
+            </div>
+            <div class="mt-3 input-container">
+              <div class="pl-1 mb-1">
+                App description
+                <span class="text-sm">(optional)</span>
+              </div>
+              <textarea class="w-full input primary" :class="{ 'invalid': v$.description.$invalid }" v-model="v$.description.$model" name="description" rows="3" />
+            </div>
+          </fieldset>
+        </form>
+      </div>
+      <div class="mt-3">
+        <div class="flex flex-row justify-center gap-3 mx-auto">
+           <div class="">
+              <button class="w-full btn yellow" @click="updateSecret">
+                Update Secret
+              </button>
+          </div>
+          <div class="">
+            <button class="w-full btn red" @click="onDelete">
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toUpper } from 'lodash'
+import { apiCall, useWait,  useConfirm, usePassConfirm } from '@vnuge/vnlib.browser'
+import { ref, computed, toRefs } from 'vue'
+import { useClipboard, useTimeAgo } from '@vueuse/core'
+import { useOAuth2Apps, getAppValidator, AppBuffer, OAuth2Application } from './o2Api'
+
+const props = defineProps<{
+  application: AppBuffer<OAuth2Application>
+  allowEdit: boolean
+}>()
+
+const emit = defineEmits(['secretUpdated', 'AppDeleted'])
+
+const { application, allowEdit } = toRefs(props)
+const { data, buffer, revert, modified } = application.value;
+
+const { waiting } = useWait()
+const { reveal } = useConfirm()
+const { elevatedApiCall } = usePassConfirm()
+const { copied, copy } = useClipboard()
+const { deleteApp, updateAppMeta, updateAppSecret } = useOAuth2Apps('/oauth/apps');
+
+const { v$, validate, reset } = getAppValidator(buffer)
+
+const editMode = ref(false)
+const newSecret = ref<string | null>(null);
+
+const name = computed(() => data.name)
+const clientId = computed(() => toUpper(data.client_id))
+const createdTime = useTimeAgo(data.Created);
+const formId = computed(() => `app-form-${data.client_id}`)
+
+const onCancel = function () {
+  revert()
+  reset()
+  editMode.value = false
+}
+
+const onSubmit = async function () {
+  // Validate the new app form
+  if (!await validate()) {
+    return
+  }
+  // Create the new app
+  await apiCall(async ({ toaster }) => {
+    // Update does not return anything, if successful
+    await updateAppMeta(application.value)
+    toaster.general.success({
+      text: 'Application successfully updated',
+      title: 'Success'
+    })
+    reset()
+    editMode.value = false
+  })
+}
+
+const updateSecret = async function () {
+  // Show a confrimation prompt
+  const { isCanceled } = await reveal({
+    title: 'Update Secret',
+    text: `Are you sure you want to update the secret? Any active sessions will be invalidated, and the old secret will be invalidated.`
+  })
+  if (isCanceled) {
+    return
+  }
+  await elevatedApiCall(async ({ password }) => {
+    // Submit the secret update with the new challenge
+    newSecret.value = await updateAppSecret(application.value, password)
+  })
+}
+
+const onDelete = async function () {
+  // Show a confirmation prompt
+  const { isCanceled } = await reveal({
+    title: 'Delete Application',
+    text: 'Are you sure you want to delete this application?',
+    subtext: 'This action cannot be undone'
+  })
+  if (isCanceled) {
+    return
+  }
+  await elevatedApiCall(async ({ password, toaster }) => {
+    await deleteApp(application.value, password)
+    toaster.general.success({
+      text: 'Application deleted successfully',
+      title: 'Success'
+    })
+    emit('AppDeleted')
+  })
+}
+
+const closeNewSecret = () => newSecret.value = null;
+
+</script>
+
+<style lang="scss">
+
+
+</style>
diff --git a/front-end/src/views/Account/components/oauth/o2Api.ts b/front-end/src/views/Account/components/oauth/o2Api.ts
new file mode 100644
index 0000000..c21e4ed
--- /dev/null
+++ b/front-end/src/views/Account/components/oauth/o2Api.ts
@@ -0,0 +1,176 @@
+import { forEach } from 'lodash'
+import { Ref } from 'vue'
+import useVuelidate from '@vuelidate/core'
+import { maxLength, helpers, required } from '@vuelidate/validators'
+import { useAxios, useDataBuffer, useVuelidateWrapper } from '@vnuge/vnlib.browser'
+import { AxiosResponse } from 'axios'
+
+export interface OAuth2Application{
+    readonly Id: string,
+    readonly name: string,
+    readonly description: string,
+    readonly permissions: string[],
+    readonly client_id: string,
+    readonly Created: Date,
+    readonly LastModified: Date,
+}
+
+export interface NewAppResponse {
+    readonly secret: string
+    readonly app: AppBuffer<OAuth2Application>
+}
+
+export interface AppBuffer<T>{
+    readonly data: T,
+    buffer: T
+    readonly modified: Readonly<Ref<boolean>>
+    apply: (data: T) => void
+    revert(): void
+}
+
+/**
+ * Initializes the oauth2 applications api
+ * @param o2EndpointUrl The url of the oauth2 applications endpoint
+ * @returns The oauth2 applications api
+ */
+export const useOAuth2Apps = (o2EndpointUrl : string) => {
+    const { post, get, put } = useAxios(null);
+
+    /**
+     * Gets all of the user's oauth2 applications from the server
+     * @returns The user's oauth2 applications
+     */
+    const getApps = async (): Promise<AppBuffer<OAuth2Application>[]>=> {
+        // Get all apps
+        const { data } = await get(o2EndpointUrl);
+
+        const apps: AppBuffer<OAuth2Application>[] = []
+
+        //Loop through the apps and create a new state manager for each
+        forEach(data, (appData) => {
+
+            //Store the created time as a date object
+            appData.created = new Date(appData?.Created ?? 0)
+            
+            //create a new state manager for the user's profile
+            const app: AppBuffer<OAuth2Application> = useDataBuffer(appData)
+
+            apps.push(app)
+        })
+
+        return apps
+    }
+
+    /**
+     * Creates a new application from the given data
+     * @param param0 The application server buffer
+     * @returns The newly created application
+     */
+    const createApp = async ({ name, description, permissions } : OAuth2Application): Promise<NewAppResponse> => {
+        
+        // make the post request, response is the new app data with a secret
+        const { data } = await post(`${o2EndpointUrl}?action=create`, { name, description, permissions })
+
+        // Store secret
+        const secret = data.raw_secret
+
+        // remove secre tfrom the response
+        delete data.raw_secret
+
+        return { secret, app: useDataBuffer(data) }
+    }
+
+    /**
+     * Updates an Oauth2 application's metadata
+     */
+    const updateAppMeta = async (app: AppBuffer<OAuth2Application>): Promise<void> => {
+
+        //Update the app metadata
+        await put(o2EndpointUrl, app.buffer)
+
+        //Get the app data from the server to update the local copy
+        const response = await get(`${o2EndpointUrl}?Id=${app.data.Id}`)
+
+        //Update the app
+        app.apply(response.data)
+    }
+
+    /**
+     * Requets a new secret for an application from the server
+     * @param app The app to request a new secret for
+     * @param password The user's password
+     * @returns The new secret
+     */
+    const updateAppSecret = async (app: AppBuffer<OAuth2Application>, password: string): Promise<string> => {
+        const response = await post(`${o2EndpointUrl}?action=secret`, { Id: app.data.Id, password })
+        return response.data.raw_secret
+    }
+
+    /**
+     * Deletes an application from the server
+     * @param app The application to delete
+     * @param password The user's password
+     * @returns The response from the server
+     */
+    const deleteApp = (app: AppBuffer<OAuth2Application>, password: string): Promise<AxiosResponse> => {
+        return post(`${o2EndpointUrl}?action=delete`, { password, Id: app.data.Id });
+    }
+
+    return { getApps, createApp, updateAppMeta, updateAppSecret, deleteApp }
+}
+
+
+//Custom alpha numeric regex
+const alphaNumRegex = helpers.regex(/^[a-zA-Z0-9_,\s]*$/)
+
+const rules = {
+    name: {
+        alphaNumSpace: helpers.withMessage("Name contains invalid characters", alphaNumRegex),
+        maxLength: helpers.withMessage('App name must be less than 50 characters', maxLength(50)),
+        required: helpers.withMessage('Oauth Application name is required', required)
+    },
+    description: {
+        alphaNumSpace: helpers.withMessage("Description contains invalid characters", alphaNumRegex),
+        maxLength: helpers.withMessage('Description must be less than 50 characters', maxLength(50))
+    },
+    permissions: {
+        alphaNumSpace: helpers.regex(/^[a-zA-Z0-9_,:\s]*$/),
+        maxLength: helpers.withMessage('Permissions must be less than 64 characters', maxLength(64))
+    }
+}
+
+export interface AppValidator {
+    readonly v$: ReturnType<typeof useVuelidate>
+    readonly validate: () => Promise<boolean>
+    readonly reset: () => void
+}
+
+/**
+ * Gets the validator for the given application (or new appication) buffer
+ * @param buffer The app buffer to validate
+ * @returns The validator instance, validate function, and reset function
+ */
+export const getAppValidator = <T>(buffer: T) : AppValidator => {
+    //App validator
+    const v$ = useVuelidate(rules, buffer, { $lazy: true, $autoDirty: true })
+    //validate wrapper function
+    const { validate } = useVuelidateWrapper(v$);
+    return { v$, validate, reset: v$.value.$reset };
+}
+
+export const getAppPermissions = () =>{
+    return [
+        {
+            type: 'account:read',
+            label: 'Account Read'
+        },
+        {
+            type: 'account:write',
+            label: 'Account Write'
+        },
+        {
+            type: 'email:send',
+            label: 'Send Emails'
+        }
+    ]
+}
\ No newline at end of file
diff --git a/front-end/src/views/Account/components/profile/Profile.vue b/front-end/src/views/Account/components/profile/Profile.vue
new file mode 100644
index 0000000..e01707c
--- /dev/null
+++ b/front-end/src/views/Account/components/profile/Profile.vue
@@ -0,0 +1,199 @@
+<template>
+  <div id="account-profile" class="acnt-content-container panel-container">
+    <div class="acnt-content profile-container panel-content">
+
+      <div id="profile-control-container" class="flex flex-row" :modified="modified">
+        <div class="m-0">
+          <div class="flex rounded-full w-14 h-14 bg-primary-500 dark:bg-primary-600">
+            <div class="m-auto text-white dark:text-dark-400">
+              <fa-icon :icon="['fas', 'user']" size="2xl" />
+            </div>
+          </div>
+        </div>
+
+        <div class="my-auto ml-6">
+          <h3 class="m-0">Profile</h3>
+        </div>
+
+        <div class="gap-3 ml-auto">
+          <div v-if="editMode" class="button-group">
+             <button form="profile-edit-form" class="btn primary sm" :disabled="waiting" @click="onSubmit">Submit</button>
+             <button class="btn sm" @click="revertProfile">Cancel</button>
+          </div>
+          <div v-else class="">
+            <button class="btn no-border" @click="editMode = true">Edit</button>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        
+        <p class="profile-text">
+          You may set or change your profile information here. All fields are optional,
+          but some features may not work without some information.
+        </p>
+
+        <div class="locked-info">
+          <div class="mx-auto my-1 sm:mx-0 sm:my-2">
+            <span class="pr-2">Email:</span>
+            <span class="">{{ data.email }}</span>
+          </div>
+          <div class="mx-auto my-1 sm:mx-0 sm:my-2">
+            <span class="pr-2">Created:</span>
+            <span>{{ createdTime }}</span>
+          </div>
+        </div>
+
+        <dynamic-form id="profile-edit-form"
+          :form="FormSchema"
+          :disabled="!editMode"
+          :validator="v$"
+          @submit="onSubmit"
+          @input="onInput"
+        />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defaultTo } from 'lodash'
+import useVuelidate  from '@vuelidate/core'
+import { ref, computed, watch } from 'vue'
+import { Rules, FormSchema } from './profile-schema.ts'
+import { apiCall, useMessage, useWait, useDataBuffer, useUser, useVuelidateWrapper } from '@vnuge/vnlib.browser'
+import { IUserProfile } from '@vnuge/vnlib.browser/dist/user'
+
+const ACCOUNT_URL = '/account/profile'
+
+interface UserProfile extends IUserProfile{
+  created : string | Date
+}
+
+const { waiting } = useWait()
+const { getProfile } = useUser()
+const { onInput, clearMessage } = useMessage()
+const { data, buffer, apply, revert, modified } = useDataBuffer<UserProfile>({} as UserProfile)
+
+const editMode = ref(false)
+
+// Create validator based on the profile buffer as a data model
+const v$ = useVuelidate(Rules, buffer, { $lazy:true, $autoDirty:false })
+
+// Setup the validator wrapper
+const { validate } = useVuelidateWrapper(v$);
+
+//const modified = computed(() => profile.value.Modified)
+const createdTime = computed(() => defaultTo(data.created?.toLocaleString(), ''))
+
+const loadProfileData = async () => {
+  await apiCall(async () => {
+    // Get the user's profile
+    const profile = await getProfile<UserProfile>()
+    profile.created = new Date(profile.created)
+    //Apply the profile to the buffer
+    apply(profile)
+  })
+}
+
+const revertProfile = () => {
+  //Revert the buffer
+  revert()
+  clearMessage()
+  editMode.value = false
+}
+
+const onSubmit = async () => {
+  if(waiting.value){
+    return;
+  }
+  // Validate the form
+  if (!await validate()) {
+    return
+  }
+  // Init the api call
+  await apiCall(async ({ axios, toaster }) => {
+    // Apply the buffer to the profile
+    const response = await axios.post(ACCOUNT_URL, buffer)
+
+    if(!response.data.success){
+      throw { response }
+    }
+
+    //No longer in edit mode
+    editMode.value = false
+
+    //Show success message
+    toaster.general.success({
+      title: 'Update successful',
+      text: response.data.result,
+    })
+
+    //reload the profile data
+    loadProfileData()
+  })
+}
+
+watch(editMode, () => v$.value.$reset())
+
+//Inital profile data load, dont await
+loadProfileData()
+
+</script>
+
+<style lang="scss">
+
+#account-profile {
+
+  p.profile-text{
+    @apply p-2 md:py-3 md:my-1 text-sm;
+  }
+  
+  .locked-info{
+    @apply w-full flex flex-col sm:flex-row sm:justify-evenly pt-3 sm:pb-1;
+  }
+
+  #profile-edit-form .input-group {
+    @apply pt-4;
+
+    .input-container{
+      @apply p-2 rounded-md flex sm:flex-row flex-col sm:gap-4;
+
+      &.dirty.data-invalid.dynamic-form .dynamic-input{
+        @apply border-red-600;
+      }
+
+      &.dirty.data-invalid.dynamic-form label.dynamic-form{
+        @apply text-red-500;
+      }
+
+      &.dirty.dynamic-form label.dynamic-form{
+        @apply text-primary-500;
+      }
+
+      select:disabled{
+        @apply appearance-none;
+      }
+    }
+
+    .input-container:nth-child(odd) {
+      @apply bg-slate-50 dark:bg-dark-700;
+    }
+
+    .dynamic-form.dynamic-input{
+      @apply py-2 w-full bg-transparent border-x-0 border-t-0 border-b border-gray-300 dark:border-dark-300 pl-2;
+      @apply focus:bg-gray-200 focus:dark:bg-transparent;
+
+      &:disabled{
+        @apply py-1 border-transparent; 
+      }
+    }
+
+    label.dynamic-form{
+      flex-basis: 15%;
+      @apply sm:text-right my-auto;
+    }
+  }
+}
+</style>
diff --git a/front-end/src/views/Account/components/profile/profile-schema.ts b/front-end/src/views/Account/components/profile/profile-schema.ts
new file mode 100644
index 0000000..85dacff
--- /dev/null
+++ b/front-end/src/views/Account/components/profile/profile-schema.ts
@@ -0,0 +1,310 @@
+
+import { maxLength, helpers, numeric, alpha, alphaNum } from '@vuelidate/validators'
+
+export const Rules = {
+  first: {
+    alpha,
+    maxLength: helpers.withMessage('First name must be less than 50 characters', maxLength(50))
+  },
+  last: {
+    alpha,
+    maxLength: helpers.withMessage('Last name must be less than 50 characters', maxLength(50))
+  },
+  company: {
+    alphaNum: helpers.regex(/^[a-zA-Z0-9\s.&!]*$/),
+    maxLength: helpers.withMessage('Company name must be less than 50 characters', maxLength(50))
+  },
+  phone: {
+    numeric: helpers.withMessage('Phone number must contain only numbers', numeric),
+    maxLength: helpers.withMessage('Phone number must be less than 11 numbers', maxLength(11))
+  },
+  street: {
+    alphaNum: helpers.regex(/^[a-zA-Z0-9\s&]*$/),
+    maxLength: helpers.withMessage('Street name must be less than 50 characters', maxLength(50))
+  },
+  city: {
+    alphaNum,
+    maxLength: helpers.withMessage('City name must be less than 50 characters', maxLength(50))
+  },
+  state: {
+    alpha,
+    maxLength: helpers.withMessage('State code is invalid', maxLength(2))
+  },
+  zip: {
+    numeric,
+    maxLength: helpers.withMessage('Zip code must be exactly 5 numbers', maxLength(5))
+  }
+}
+
+
+export const FormSchema = {
+  id: 'profile-edit-form',
+  fields: [
+    {
+      label: 'First',
+      name: 'first',
+      type: 'text',
+      id: 'first-name'
+    },
+    {
+      label: 'Last',
+      name: 'last',
+      type: 'text',
+      id: 'last-name'
+    },
+    {
+      label: 'Company',
+      name: 'company',
+      type: 'text',
+      id: 'company'
+    },
+    {
+      label: 'Phone',
+      name: 'phone',
+      type: 'text',
+      id: 'phone'
+    },
+    {
+      label: 'Street',
+      name: 'street',
+      type: 'text',
+      id: 'street'
+    },
+    {
+      label: 'City',
+      name: 'city',
+      type: 'text',
+      id: 'city'
+    },
+    {
+      label: 'State',
+      name: 'state',
+      type: 'select',
+      id: 'state',
+      options: [
+        {
+          'label':'Select State',
+          'value': ''
+        },
+        {
+          "label": "Alabama",
+          "value": "AL"
+        },
+        {
+          "label": "Alaska",
+          "value": "AK"
+        },
+        {
+          "label": "Arizona",
+          "value": "AZ"
+        },
+        {
+          "label": "Arkansas",
+          "value": "AR"
+        },
+        {
+          "label": "California",
+          "value": "CA"
+        },
+        {
+          "label": "Colorado",
+          "value": "CO"
+        },
+        {
+          "label": "Connecticut",
+          "value": "CT"
+        },
+        {
+          "label": "Delaware",
+          "value": "DE"
+        },
+        {
+          "label": "District Of Columbia",
+          "value": "DC"
+        },
+        {
+          "label": "Florida",
+          "value": "FL"
+        },
+        {
+          "label": "Georgia",
+          "value": "GA"
+        },
+        {
+          "label": "Guam",
+          "value": "GU"
+        },
+        {
+          "label": "Hawaii",
+          "value": "HI"
+        },
+        {
+          "label": "Idaho",
+          "value": "ID"
+        },
+        {
+          "label": "Illinois",
+          "value": "IL"
+        },
+        {
+          "label": "Indiana",
+          "value": "IN"
+        },
+        {
+          "label": "Iowa",
+          "value": "IA"
+        },
+        {
+          "label": "Kansas",
+          "value": "KS"
+        },
+        {
+          "label": "Kentucky",
+          "value": "KY"
+        },
+        {
+          "label": "Louisiana",
+          "value": "LA"
+        },
+        {
+          "label": "Maine",
+          "value": "ME"
+        },
+        {
+          "label": "Maryland",
+          "value": "MD"
+        },
+        {
+          "label": "Massachusetts",
+          "value": "MA"
+        },
+        {
+          "label": "Michigan",
+          "value": "MI"
+        },
+        {
+          "label": "Minnesota",
+          "value": "MN"
+        },
+        {
+          "label": "Mississippi",
+          "value": "MS"
+        },
+        {
+          "label": "Missouri",
+          "value": "MO"
+        },
+        {
+          "label": "Montana",
+          "value": "MT"
+        },
+        {
+          "label": "Nebraska",
+          "value": "NE"
+        },
+        {
+          "label": "Nevada",
+          "value": "NV"
+        },
+        {
+          "label": "New Hampshire",
+          "value": "NH"
+        },
+        {
+          "label": "New Jersey",
+          "value": "NJ"
+        },
+        {
+          "label": "New Mexico",
+          "value": "NM"
+        },
+        {
+          "label": "New York",
+          "value": "NY"
+        },
+        {
+          "label": "North Carolina",
+          "value": "NC"
+        },
+        {
+          "label": "North Dakota",
+          "value": "ND"
+        },
+        {
+          "label": "Ohio",
+          "value": "OH"
+        },
+        {
+          "label": "Oklahoma",
+          "value": "OK"
+        },
+        {
+          "label": "Oregon",
+          "value": "OR"
+        },
+        {
+          "label": "Pennsylvania",
+          "value": "PA"
+        },
+        {
+          "label": "Puerto Rico",
+          "value": "PR"
+        },
+        {
+          "label": "Rhode Island",
+          "value": "RI"
+        },
+        {
+          "label": "South Carolina",
+          "value": "SC"
+        },
+        {
+          "label": "South Dakota",
+          "value": "SD"
+        },
+        {
+          "label": "Tennessee",
+          "value": "TN"
+        },
+        {
+          "label": "Texas",
+          "value": "TX"
+        },
+        {
+          "label": "Utah",
+          "value": "UT"
+        },
+        {
+          "label": "Vermont",
+          "value": "VT"
+        },
+        {
+          "label": "Virginia",
+          "value": "VA"
+        },
+        {
+          "label": "Washington",
+          "value": "WA"
+        },
+        {
+          "label": "West Virginia",
+          "value": "WV"
+        },
+        {
+          "label": "Wisconsin",
+          "value": "WI"
+        },
+        {
+          "label": "Wyoming",
+          "value": "WY"
+        }
+      ]
+    },
+    {
+      label: 'Zip',
+      name: 'zip',
+      type: 'text',
+      id: 'zip'
+    }
+  ]
+}
\ No newline at end of file
diff --git a/front-end/src/views/Account/components/settings/Fido.vue b/front-end/src/views/Account/components/settings/Fido.vue
new file mode 100644
index 0000000..340d6d9
--- /dev/null
+++ b/front-end/src/views/Account/components/settings/Fido.vue
@@ -0,0 +1,53 @@
+<template>
+  <div id="account-fido-settings">
+    <div v-if="!isLocalAccount" class="flex flex-row justify-between">
+      <h6 class="block">
+        FIDO/WebAuthN Authentication
+      </h6>
+      <div class="text-red-500">
+        Unavailable for external auth
+      </div>
+    </div>
+    <div v-else class="flex flex-row flex-wrap justify-between">
+      <h6>FIDO/WebAuthN Authentication</h6>
+      <div class="">
+        <div v-if="fidoEnabled" class="">
+          <button class="ml-1 btn red sm" @click.prevent="Disable">
+            <fa-icon icon="minus-circle" />
+            <span class="pl-3">Disable</span>
+          </button>
+        </div>
+        <div v-else>
+          <button class="btn primary sm" @click.prevent="Setup">
+            <fa-icon icon="plus" />
+            <span class="pl-3">Setup</span>
+          </button>
+        </div>
+      </div>
+      <p class="p-1 pt-3 text-sm text-gray-600">
+        WebAuthN/FIDO is not yet supported, due to complexity and browser support. 
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSession } from '@vnuge/vnlib.browser'
+import { toRefs } from 'vue';
+
+const props = defineProps<{
+  fidoEnabled?: boolean
+}>()
+
+const { fidoEnabled } = toRefs(props)
+
+const { isLocalAccount } = useSession()
+
+const Disable = () => {}
+const Setup = () => {}
+
+</script>
+
+<style>
+
+</style>
diff --git a/front-end/src/views/Account/components/settings/PasswordReset.vue b/front-end/src/views/Account/components/settings/PasswordReset.vue
new file mode 100644
index 0000000..ff04193
--- /dev/null
+++ b/front-end/src/views/Account/components/settings/PasswordReset.vue
@@ -0,0 +1,235 @@
+<template>
+  <div id="pwreset-settings" class="container">
+    <div class="panel-content">
+
+      <h5>Password Reset</h5>
+
+      <div v-if="!pwResetShow" class="py-2">
+        <div class="flex flex-wrap items-center justify-between">
+
+          <div class="my-auto">
+            Click to reset
+          </div>
+
+          <div class="flex justify-end">
+            <button class="btn red sm" @click="showForm">
+              <fa-icon icon="sync" />
+              <span class="pl-3">Reset Password</span>
+            </button>
+          </div>
+        </div>
+
+        <p class="mt-3 text-sm">
+          You may only reset your password if you have an internal user account. If you exclusivly use an external
+          authentication provider (like GitHub or Discord), you will need to reset your password externally.
+        </p>
+      </div>
+
+      <div v-else class="px-2 my-2">
+
+        <p class="my-3 text-center">
+          Enter your current password, new password, and confirm the new password.
+        </p>
+
+        <dynamic-form
+          id="password-reset-form" 
+          class="pwreset-form primary"
+          :form="formSchema"
+          :disabled="waiting"
+          :validator="v$"
+          @submit="onSubmit"
+          @input="onInput"
+        />
+        
+        <div class="flex flex-row justify-end my-2">
+          <div class="button-group">
+            <button type="submit" form="password-reset-form" class="btn primary sm" :disabled="waiting">
+              <fa-icon v-if="!waiting" icon="check" />
+              <fa-icon v-else class="animate-spin" icon="spinner" />
+              Update
+            </button>
+            <button class="btn sm cancel-btn" :disabled="waiting" @click="resetForm">
+              Cancel
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toSafeInteger } from 'lodash';
+import useVuelidate from '@vuelidate/core'
+import { required, maxLength, minLength, helpers } from '@vuelidate/validators'
+import { useUser, apiCall, useMessage, useWait, useConfirm, useVuelidateWrapper } from '@vnuge/vnlib.browser'
+import { computed, reactive, ref, toRefs, watch } from 'vue'
+
+const props = defineProps<{
+  totpEnabled: boolean,
+  fidoEnabled: boolean
+}>()
+
+const { totpEnabled, fidoEnabled } = toRefs(props)
+
+const formSchema = ref({
+  fields: [
+    {
+      label: 'Current Password',
+      name: 'current',
+      type: 'password',
+      id: 'current-password'
+    },
+    {
+      label: 'New Password',
+      name: 'newPassword',
+      type: 'password',
+      id: 'new-password'
+    },
+    {
+      label: 'Confirm Password',
+      name: 'repeatPassword',
+      type: 'password',
+      id: 'confirm-password'
+    }
+  ]
+})
+
+const { waiting } = useWait()
+const { onInput } = useMessage()
+const { reveal } = useConfirm()
+const { resetPassword } = useUser()
+
+const pwResetShow = ref(false)
+
+const vState = reactive({
+  newPassword: '',
+  repeatPassword: '',
+  current: '',
+  totpCode:''
+})
+
+const rules = computed(() =>{
+  return {
+    current: {
+      required: helpers.withMessage('Current password cannot be empty', required),
+      minLength: helpers.withMessage('Current password must be at least 8 characters', minLength(8)),
+      maxLength: helpers.withMessage('Current password must have less than 128 characters', maxLength(128))
+    },
+    newPassword: {
+      notOld: helpers.withMessage('New password cannot be the same as your current password', (value : string) => value != vState.current),
+      required: helpers.withMessage('New password cannot be empty', required),
+      minLength: helpers.withMessage('New password must be at least 8 characters', minLength(8)),
+      maxLength: helpers.withMessage('New password must have less than 128 characters', maxLength(128))
+    },
+    repeatPassword: {
+      sameAs: helpers.withMessage('Your new passwords do not match', (value : string) => value == vState.newPassword),
+      required: helpers.withMessage('Repeast password cannot be empty', required),
+      minLength: helpers.withMessage('Repeast password must be at least 8 characters', minLength(8)),
+      maxLength: helpers.withMessage('Repeast password must have less than 128 characters', maxLength(128))
+    },
+    totpCode:{
+      required: helpers.withMessage('TOTP code cannot be empty', required),
+      minLength: helpers.withMessage('TOTP code must be at least 6 characters', minLength(6)),
+      maxLength: helpers.withMessage('TOTP code must have less than 12 characters', maxLength(12))
+    }
+  }
+})
+
+const v$ = useVuelidate(rules, vState, { $lazy: true })
+const { validate } = useVuelidateWrapper(v$)
+
+const showTotpCode = computed(() => totpEnabled.value && !fidoEnabled.value)
+
+watch(showTotpCode, (val) => {
+  if(val){
+    //Add totp code field
+    formSchema.value.fields.push({
+      label: 'TOTP Code',
+      name: 'totpCode',
+      type: 'text',
+      id: 'totp-code'
+    })
+  }
+})
+
+const showForm = async function () {
+  const { isCanceled } = await reveal({
+    title: 'Reset Password',
+    text: 'Are you sure you want to reset your password? This cannot be reversed.'
+  })
+  pwResetShow.value = !isCanceled
+}
+
+const onSubmit = async () => {
+
+  // validate
+  if (! await validate()) {
+    return
+  }
+
+  interface IResetPasswordArgs {
+    totp_code?: number
+  }
+
+  await apiCall(async ({ toaster }) => {
+    const args : IResetPasswordArgs = {}
+
+    //Add totp code if enabled
+    if(showTotpCode.value){
+      args.totp_code = toSafeInteger(v$.value.totpCode.$model)
+    }
+
+    //Exec pw reset
+    const { getResultOrThrow } = await resetPassword(v$.value.current.$model, v$.value.newPassword.$model, args)
+
+    //Get result or raise exception to handler
+    const result = getResultOrThrow()
+
+    // success
+    resetForm()
+
+    // Push a success toast
+    toaster.general.success({
+      title: 'Success',
+      text: result
+    })
+
+  })
+}
+
+const resetForm = () => {
+  v$.value.current.$model = ''
+  v$.value.newPassword.$model = ''
+  v$.value.repeatPassword.$model = ''
+  v$.value.totpCode.$model = ''
+  v$.value.$reset()
+  pwResetShow.value = false
+}
+
+</script>
+
+<style lang="scss">
+
+#password-reset-form{
+
+  .dynamic-form.input-container{
+    @apply flex flex-col sm:flex-row my-4 max-w-lg mx-auto;
+    
+    label{
+      flex-basis: 40%;
+      @apply pl-1 text-sm sm:text-right my-auto mr-2 mb-1 sm:mb-auto;
+    }
+  }
+  
+  .dynamic-form.dynamic-input.input {
+    @apply p-2 w-full border rounded-md;
+    @apply focus:border-primary-500 focus:dark:border-primary-600 dark:border-dark-400 bg-transparent dark:bg-dark-800;
+  }
+  .dirty.data-invalid.dynamic-form.input-container input{
+    @apply border-red-500 focus:border-red-500;
+  }
+}
+
+</style>
diff --git a/front-end/src/views/Account/components/settings/Pki.vue b/front-end/src/views/Account/components/settings/Pki.vue
new file mode 100644
index 0000000..a621bf2
--- /dev/null
+++ b/front-end/src/views/Account/components/settings/Pki.vue
@@ -0,0 +1,182 @@
+<template>
+    <div id="pki-settings" v-show="pkiEnabled" class="container">
+        <div class="panel-content">
+            <h5>PKI Authentication</h5>
+            <div class="flex flex-row flex-wrap justify-between">
+                <h6>Authentication keys</h6>
+
+                <div v-if="enabled" class="button-group">
+                    <button class="btn yellow sm" @click.prevent="setIsOpen(true)">
+                        <fa-icon icon="sync" />
+                        <span class="pl-3">Update Key</span>
+                    </button>
+                    <button class="btn red sm" @click.prevent="onDisable">
+                        <fa-icon icon="minus-circle" />
+                        <span class="pl-3">Disable</span>
+                    </button>
+                </div>
+                
+                <div v-else class="">
+                    <button class="btn primary sm" @click.prevent="setIsOpen(true)">
+                        <fa-icon icon="plus" />
+                        <span class="pl-3">Add Key</span>
+                    </button>
+                </div>
+                
+                <p class="p-1 pt-3 text-sm text-gray-600">
+                  PKI authentication is a method of authenticating your user account with signed messages and a shared public key. This method implementation 
+                  uses client signed Json Web Tokens to authenticate user generated outside this website as a One Time Password (OTP). This allows for you to
+                  use your favorite hardware or software tools, to generate said OTPs to authenticate your user.
+                
+                </p>
+            </div>
+        </div>
+    </div>
+    <Dialog :open="isOpen" @close="setIsOpen" class="relative z-30">
+        <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+        <div class="fixed inset-0 flex justify-center">
+          <DialogPanel class="w-full max-w-lg p-4 m-auto mt-24 bg-white rounded dark:bg-dark-600 dark:text-gray-300">
+            <h4>Configure your authentication key</h4>
+            <p class="mt-2 text-sm">
+                Please paste your authenticator's public key as a Json Web Key (JWK) object. Your JWK must include a kid (key id) and a kty (key type) field.
+            </p>
+            <div class="p-2 mt-3">
+                <textarea class="w-full p-1 text-sm border dark:bg-dark-700 ring-0 dark:border-dark-400" rows="10" v-model="keyData" />
+            </div>
+            <div class="flex justify-end gap-2 mt-4">
+                <button class="rounded btn sm primary" @click.prevent="onSubmitKeys">Submit</button>
+                <button class="rounded btn sm red" @click.prevent="setIsOpen(false)">Cancel</button>
+            </div>
+          </DialogPanel>
+        </div>
+      </Dialog>
+</template>
+
+<script setup lang="ts">
+import { isEmpty, isNil } from 'lodash'
+import { apiCall, useConfirm, useSession, debugLog, useFormToaster } from '@vnuge/vnlib.browser'
+import { computed, ref, watch } from 'vue'
+import { Dialog, DialogPanel } from '@headlessui/vue'
+import { PkiApi } from '@vnuge/vnlib.browser/dist/mfa';
+
+const props = defineProps<{
+    pkaiApi: PkiApi
+}>()
+
+const { reveal } = useConfirm()
+const { isLocalAccount } = useSession()
+const { error } = useFormToaster()
+
+const pkiEnabled = computed(() => isLocalAccount.value && !isNil(import.meta.env.VITE_PKI_ENDPOINT) && window.crypto.subtle)
+const { enabled } = props.pkaiApi
+
+const isOpen = ref(false)
+const keyData = ref('')
+const pemFormat = ref(false)
+const explicitCurve = ref("")
+
+watch(isOpen, () =>{
+    keyData.value = ''
+    pemFormat.value = false
+    explicitCurve.value = ""
+    //Reload status
+    props.pkaiApi.refresh()
+})
+
+const setIsOpen = (value : boolean) => isOpen.value = value
+
+const onDisable = async () => {
+     const { isCanceled } = await reveal({
+        title: 'Are you sure?',
+        text: 'This will disable PKI authentication for your account.'
+    })
+    if (isCanceled) {
+       return;
+    }
+
+    //Delete pki
+    await apiCall(async ({ toaster }) =>{
+
+        //Disable pki
+        //TODO: require password or some upgrade to disable
+        const { success } = await props.pkaiApi.disable();
+        
+        if(success){
+            toaster.general.success({
+                title: 'Success',
+                text: 'PKI authentication has been disabled.'
+            })
+        }
+        else{
+            toaster.general.error({
+                title: 'Error',
+                text: 'PKI authentication could not be disabled.'
+            })
+        }
+
+        //Refresh the status
+        props.pkaiApi.refresh();
+    });
+}
+
+//Server requires the JWK to set a keyid (kid) field
+interface IdJsonWebKey extends JsonWebKey {
+    readonly kid?: string
+}
+
+const onSubmitKeys = async () =>{
+    
+    if(window.crypto.subtle == null){
+        error({ title: "Your browser does not support PKI authentication." })
+        return;
+    }
+    
+    //Validate key data
+    if(isEmpty(keyData.value)){
+        error({ title: "Please enter key data" })
+        return;
+    }
+
+    let jwk : IdJsonWebKey;
+    try {
+        //Try to parse as jwk
+        jwk = JSON.parse(keyData.value)
+        if(isEmpty(jwk.use) 
+        || isEmpty(jwk.kty) 
+        || isEmpty(jwk.alg) 
+        || isEmpty(jwk.kid)
+        || isEmpty(jwk.x) 
+        || isEmpty(jwk.y)){
+            throw new Error("Invalid JWK");
+        }
+    }
+    catch (e) {
+        //Write error to debug log
+        debugLog(e)
+        error({ title:"The key is not a valid Json Web Key (JWK)"})
+        return;
+    }
+
+    //Send to server
+    await apiCall(async ({ toaster }) => {
+
+        //init/update the key
+        //TODO: require password or some upgrade to disable
+        const { getResultOrThrow } = await props.pkaiApi.initOrUpdate(jwk);
+
+        const result = getResultOrThrow();
+
+        toaster.general.success({
+            title: 'Success',
+            text: result
+        })
+        setIsOpen(false)
+    })
+}
+
+</script>
+
+<style>
+
+</style>
diff --git a/front-end/src/views/Account/components/settings/Security.vue b/front-end/src/views/Account/components/settings/Security.vue
new file mode 100644
index 0000000..9ba83f7
--- /dev/null
+++ b/front-end/src/views/Account/components/settings/Security.vue
@@ -0,0 +1,81 @@
+<template>
+  <div id="account-security-settings">
+    <div class="panel-container">
+      
+      <div class="panel-header">
+        <div class="panel-title">
+          <h4>Security</h4>
+        </div>
+      </div>
+
+      <password-reset :totpEnabled="totpEnabled" :fido-enabled="fidoEnabled" />
+
+      <div id="account-mfa-settings" class="panel-content">
+        <h5>Multi Factor Authentication</h5>
+        <div class="py-2 border-b-2 border-gray-200 dark:border-dark-400">
+          <TotpSettings :mfa="mfaApi" />
+        </div>
+        <div class="py-2">
+          <Fido :fido-enabled="fidoEnabled"/>
+        </div>
+      </div>
+
+      <Pki :pkai-api="pkiApi" />
+
+      <div id="browser-poll-settings" class="panel-content" >
+        <div class="flex justify-between">
+          <h5>Keep me logged in</h5>
+          <div class="pl-1">
+              <Switch
+                  v-model="enabled"
+                  :class="enabled ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-400'"
+                  class="relative inline-flex items-center h-6 rounded-full w-11"
+                >
+                  <span class="sr-only">Enable auto heartbeat</span>
+                  <span
+                    :class="enabled ? 'translate-x-6' : 'translate-x-1'"
+                    class="inline-block w-4 h-4 transition transform bg-white rounded-full"
+                  />
+                </Switch>
+          </div>
+        </div>
+
+        <p class="p-1 text-sm">
+          When enabled, continuously regenerates your login credentials to keep you logged in. The longer you are logged in,
+          the easier session fixation attacks become. If disabled, you will need to log when your credentials have expired.
+          It is recommneded that you leave this disabled <span class="text-yellow-500">Disabled</span>
+        </p>
+        
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAutoHeartbeat } from '@vnuge/vnlib.browser'
+import { useMfaConfig, MfaMethod, usePkiConfig } from '@vnuge/vnlib.browser/dist/mfa'
+import { computed } from 'vue'
+import { Switch } from '@headlessui/vue'
+import { includes } from 'lodash'
+import Fido from './Fido.vue'
+import Pki from './Pki.vue'
+import TotpSettings from './TotpSettings.vue'
+import PasswordReset from './PasswordReset.vue'
+
+const { enabled } = useAutoHeartbeat()
+
+const mfaApi = useMfaConfig('/account/mfa')
+const pkiApi = usePkiConfig(import.meta.env.VITE_PKI_ENDPOINT, mfaApi)
+
+const fidoEnabled = computed(() => includes(mfaApi.enabledMethods.value, 'fido' as MfaMethod))
+const totpEnabled = computed(() => includes(mfaApi.enabledMethods.value, MfaMethod.TOTP))
+
+</script>
+
+<style>
+
+#account-security-settings .modal-body{
+    @apply w-full sm:max-w-md ;
+}
+
+</style>
diff --git a/front-end/src/views/Account/components/settings/Settings.vue b/front-end/src/views/Account/components/settings/Settings.vue
new file mode 100644
index 0000000..cd2ab48
--- /dev/null
+++ b/front-end/src/views/Account/components/settings/Settings.vue
@@ -0,0 +1,16 @@
+<template>
+  <div id="account-settings" class="container">
+    <div class="acnt-content-container">
+      <Security />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Security from './security.vue'
+
+</script>
+
+<style>
+
+</style>
diff --git a/front-end/src/views/Account/components/settings/TotpSettings.vue b/front-end/src/views/Account/components/settings/TotpSettings.vue
new file mode 100644
index 0000000..20ee0d0
--- /dev/null
+++ b/front-end/src/views/Account/components/settings/TotpSettings.vue
@@ -0,0 +1,263 @@
+<template>
+  <div id="totp-settings">
+
+    <div v-if="!isLocalAccount" class="flex flex-row justify-between">
+      <h6 class="block">
+        TOTP Authenticator App
+      </h6>
+      <div class="text-red-500">
+        Unavailable for external auth
+      </div>
+    </div>
+
+    <div v-else-if="showTotpCode" class="w-full py-2 text-center">
+      <h5 class="text-center" />
+      <p class="py-2">
+        Scan the QR code with your TOTP authenticator app.
+      </p>
+
+      <div class="flex">
+        <VueQrcode class="m-auto" :value="qrCode" />
+      </div>
+
+      <p class="py-2">
+        Your secret, if your application requires it.
+      </p>
+
+      <p class="flex flex-row flex-wrap justify-center p-2 bg-gray-200 border border-gray-300 dark:bg-dark-800 dark:border-dark-300">
+        <span v-for="code in secretSegments" :key="code" class="px-2 font-mono tracking-wider" >
+          {{ code }}
+        </span>
+      </p>
+
+      <p class="py-2">
+        Please enter your code from your authenticator app to continue.
+      </p>
+
+      <div class="m-auto w-min">
+           <VOtpInput
+                class="otp-input"
+                input-type="letter-numeric"
+                separator=""
+                :is-disabled="showSubmitButton"
+                input-classes="primary input rounded"
+                :num-inputs="6"
+                @on-change="onInput"
+                @on-complete="VerifyTotp"
+            />
+      </div>
+
+      <div v-if="showSubmitButton" class="flex flex-row justify-end my-2">
+        <button class="btn primary" @click.prevent="CloseQrWindow">
+          Complete
+        </button>
+      </div>
+    </div>
+    
+    <div v-else class="flex flex-row flex-wrap justify-between">
+      <h6>TOTP Authenticator App</h6>
+
+      <div v-if="totpEnabled" class="button-group">
+        <button class="btn yellow sm" @click.prevent="regenTotp">
+          <fa-icon icon="sync" />
+          <span class="pl-3">Regenerate</span>
+        </button>
+        <button class="btn red sm" @click.prevent="disable">
+          <fa-icon icon="minus-circle" />
+          <span class="pl-3">Disable</span>
+        </button>
+      </div>
+
+      <div v-else>
+        <button class="btn primary sm" @click.prevent="configTotp">
+          <fa-icon icon="plus" />
+          <span class="pl-3">Setup</span>
+        </button>
+      </div>
+      <p class="p-1 pt-3 text-sm text-gray-600">
+        TOTP is a time based one time password. You can use it as a form of Multi Factor Authentication when
+        using another device such as a smart phone or TOTP hardware device. You can use TOTP with your smart
+        phone
+        using apps like Google Authenticator, Authy, or Duo. Read more on
+        <a class="link" href="https://en.wikipedia.org/wiki/Time-based_one-time_password" target="_blank">
+          Wikipedia.
+        </a>
+      </p>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isNil, chunk, defaultTo, includes, map, join } from 'lodash'
+import { TOTP } from 'otpauth'
+import base32Encode from 'base32-encode'
+import VueQrcode from '@chenfengyuan/vue-qrcode'
+import VOtpInput from "vue3-otp-input";
+import { computed, ref } from 'vue'
+import { 
+  useSessionUtils,
+  useSession,
+  useUser,
+  useMessage,
+  useConfirm,
+  usePassConfirm,
+  useFormToaster
+} from '@vnuge/vnlib.browser'
+import { MfaApi, MfaMethod } from '@vnuge/vnlib.browser/dist/mfa';
+
+interface TotpConfig{
+    secret: string;
+    readonly issuer: string;
+    readonly algorithm: string;
+    readonly digits?: number;
+    readonly period?: number;
+}
+
+const props = defineProps<{
+  mfa: MfaApi
+}>()
+
+const { isLocalAccount } = useSession()
+const { KeyStore } = useSessionUtils()
+const { userName } = useUser()
+const { reveal } = useConfirm()
+const { elevatedApiCall } = usePassConfirm()
+const { onInput, setMessage } = useMessage()
+
+const { enabledMethods, disableMethod, initOrUpdateMethod, refreshMethods }  = props.mfa;
+const totpEnabled = computed(() => includes(enabledMethods.value, MfaMethod.TOTP))
+
+const totpMessage = ref<TotpConfig>()
+const showSubmitButton = ref(false)
+const toaster = useFormToaster()
+
+const showTotpCode = computed(() => !isNil(totpMessage.value?.secret))
+
+const secretSegments = computed<string[]>(() => {
+  //Chunk the secret into 6 character segments
+  const chunks = chunk(totpMessage.value?.secret, 6)
+  //Join the chunks into their chunk arrays
+  return map(chunks, chunk => join(chunk, ''))
+})
+
+const qrCode = computed(() => {
+  if (isNil(totpMessage.value?.secret)) {
+    return ''
+  }
+
+  const m = totpMessage.value!;
+
+  // Build the totp qr codeurl
+  const params = new URLSearchParams()
+  params.append('secret', m.secret)
+  params.append('issuer', m.issuer)
+  params.append('algorithm', m.algorithm)
+  params.append('digits', defaultTo(m.digits, 6).toString())
+  params.append('period', defaultTo(m.period, 30).toString())
+  const url = `otpauth://totp/${m.issuer}:${userName.value}?${params.toString()}`
+  return url
+})
+
+const ProcessAddOrUpdate = async () => {
+  await elevatedApiCall(async ({ password }) => {
+
+    // Init or update the totp method and get the encrypted totp message
+    const res =  await initOrUpdateMethod<TotpConfig>(MfaMethod.TOTP, password);
+
+    //Get the encrypted totp message
+    const totp = res.getResultOrThrow()
+
+    // Decrypt the totp secret
+    const secretBuf = await KeyStore.decryptDataAsync(totp.secret)
+
+    // Encode the secret to base32
+    totp.secret = base32Encode(secretBuf, 'RFC3548', { padding: false })
+
+    totpMessage.value = totp
+  })
+}
+
+const configTotp = async () => {
+  const { isCanceled } = await reveal({
+    title: 'Enable TOTP multi factor?',
+    text: 'Are you sure you understand TOTP multi factor and wish to enable it?',
+  })
+
+  if(!isCanceled){
+    ProcessAddOrUpdate()
+  }
+}
+
+const regenTotp = async () => {
+  // If totp is enabled, show a prompt to regenerate totp
+  if (!totpEnabled.value) {
+    return
+  }
+
+  const { isCanceled } = await reveal({
+    title: 'Are you sure?',
+    text: 'If you continue your previous TOTP authenticator and recovery codes will no longer be valid.'
+  })
+
+  if(!isCanceled){
+    ProcessAddOrUpdate()
+  }
+}
+
+const disable = async () => {
+  // Show a confrimation prompt
+  const { isCanceled } = await reveal({
+    title: 'Disable TOTP',
+    text: 'Are you sure you want to disable TOTP? You may re-enable TOTP later.'
+  })
+
+  if (isCanceled) {
+    return
+  }
+
+  await elevatedApiCall(async ({ password }) => {
+
+    // Disable the totp method
+    const res = await disableMethod(MfaMethod.TOTP, password)
+    res.getResultOrThrow()
+    
+    refreshMethods()
+  })
+}
+
+const VerifyTotp = async (code : string) => {
+  // Create a new TOTP instance from the current message
+  const totp = new TOTP(totpMessage.value)
+
+  // validate the code
+  const valid = totp.validate({ token: code, window: 4 })
+
+  if (valid) {
+    showSubmitButton.value = true
+    toaster.success({
+      title: 'Success',
+      text: 'Your TOTP code is valid and your account is now verified.'
+    })
+  } else {
+    setMessage('Your TOTP code is not valid.')
+  }
+}
+
+const CloseQrWindow = () => {
+  showSubmitButton.value = false
+  totpMessage.value = undefined
+  
+  //Fresh methods
+  refreshMethods()
+}
+
+</script>
+
+<style>
+
+#totp-settings .otp-input input {
+    @apply w-12 text-center text-lg mx-1 focus:border-primary-500;
+}
+
+</style>
diff --git a/front-end/src/views/Blog/blog-api/index.ts b/front-end/src/views/Blog/blog-api/index.ts
new file mode 100644
index 0000000..678883b
--- /dev/null
+++ b/front-end/src/views/Blog/blog-api/index.ts
@@ -0,0 +1,22 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { ComputedChannels, ComputedContent, ComputedPosts } from '@vnuge/cmnext-admin'
+
+export interface BlogState {
+    readonly channels: ComputedChannels,
+    readonly posts: ComputedPosts,
+    readonly content: ComputedContent
+}
\ No newline at end of file
diff --git a/front-end/src/views/Blog/ckeditor/Editor.vue b/front-end/src/views/Blog/ckeditor/Editor.vue
new file mode 100644
index 0000000..87c0595
--- /dev/null
+++ b/front-end/src/views/Blog/ckeditor/Editor.vue
@@ -0,0 +1,155 @@
+<template>
+    <div class="pt-6">
+        <div class="flex justify-end w-full gap-2 my-2">
+             <div class="w-fit">
+                 <Popover class="relative">
+                    <PopoverButton class="btn">
+                        Add
+                        <fa-icon class="ml-2" icon="photo-film" />
+                    </PopoverButton>
+                    <PopoverPanel class="absolute right-0 z-10 top-10">
+                        <div class="md-pannel">
+                            <div class="">
+                                Search for content by its id or file name.
+                            </div>
+                            <ContentSearch :blog="$props.blog"/>
+                        </div>
+                    </PopoverPanel>
+                </Popover>
+            </div>
+            <div class="w-fit">
+                 <Popover class="relative">
+                    <PopoverButton class="btn" @click="recoverMd">
+                        Markdown
+                        <fa-icon class="ml-2" :icon="['fab','markdown']" />
+                    </PopoverButton>
+                    <PopoverPanel class="absolute right-0 z-10 top-10">
+                        <div class="md-pannel">
+                            <div class="">
+                                Paste your markdown here to convert it to html.
+                            </div>
+                            <div class="my-4">
+                                <textarea class="w-full h-40 p-2 bg-transparent border" v-model="mdBuffer"></textarea>
+                            </div>
+                            <div class="flex justify-end">
+                                <button class="btn primary" @click="convertMarkdown">Convert</button>
+                            </div>
+                        </div>
+                    </PopoverPanel>
+                </Popover>
+            </div>
+            <div class="w-fit">
+                <button class="btn" @click="recoverFromCrash">
+                    Recover
+                    <fa-icon class="ml-2" icon="rotate-left" />
+                </button>
+            </div>
+        </div>
+        <div id="ck-editor-frame" ref="editorFrame">
+            <div class="w-full text-center">
+                <h5>Loading editor...</h5>
+                <fa-icon class="text-2xl" icon="spinner" spin />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from 'lodash';
+import { ref } from 'vue';
+import { useSessionStorage } from '@vueuse/core';
+import { tryOnMounted } from '@vueuse/shared';
+import { apiCall } from '@vnuge/vnlib.browser';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { BlogState } from '../blog-api'
+import { Converter } from 'showdown'
+
+//Import the editor config
+import { config } from './build.ts'
+import ContentSearch from '../components/ContentSearch.vue';
+
+const emit = defineEmits(['change', 'load'])
+
+defineProps<{
+    blog: BlogState
+}>()
+
+let editor = {}
+//Init new shodown converter
+const showdownConverter = new Converter()
+const mdBuffer = ref('')
+const editorFrame = ref(null)
+const crashBuffer = useSessionStorage('post-crash', '')
+
+const recoverFromCrash = () => {
+    //Set editor content from crash buffer
+    editor.setData(crashBuffer.value);
+}
+
+const onChange = (content:string) =>{
+    //Save the content to the crash buffer
+    crashBuffer.value = content;
+    emit('change', content)
+}
+
+const convertMarkdown = () => {
+  
+    const html = showdownConverter.makeHtml(mdBuffer.value);
+
+    //Set initial data
+    editor.setData(html)
+
+    //manually trigger change event
+    onChange(html)
+
+    //Clear the buffer
+    mdBuffer.value = ''
+}
+
+const recoverMd = () => {
+    const current = editor.getData();
+    const md = showdownConverter.makeMd(current);
+    mdBuffer.value = md;
+}
+
+tryOnMounted(() =>
+    //Load the editor once the component is mounted
+   apiCall(async ({ toaster }) => {
+
+        //Entry script creates promise that resolves when the editor script is loaded
+        if(window.editorLoadResult){
+            //Wait for the editor script to load
+            await (window.editorLoadResult as Promise<boolean>)
+        }
+
+        if (!window['CKEDITOR']) {
+            toaster.general.error({
+                title: 'Script Error',
+                text: 'The CKEditor script failed to load, check script permissions.'
+            })
+            return;
+        }
+
+        //CKEditor 5 superbuild in global scope
+        const { ClassicEditor } = window['CKEDITOR']
+
+        //Init editor when loading is complete
+        editor = await ClassicEditor.create(editorFrame.value, config);
+
+        //Update the local copy when the editor data changes
+        editor.model.document.on('change:data', debounce(() => onChange(editor.getData())), 500)
+
+        //Call initial load hook
+        emit('load', editor);
+    })
+)
+
+</script>
+
+<style lang="scss">
+
+.md-pannel{
+    @apply p-6 min-w-[32rem] bg-white shadow-md dark:bg-dark-700 border dark:border-dark-300;
+}
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/ckeditor/build.ts b/front-end/src/views/Blog/ckeditor/build.ts
new file mode 100644
index 0000000..83b46a7
--- /dev/null
+++ b/front-end/src/views/Blog/ckeditor/build.ts
@@ -0,0 +1,125 @@
+export const config = {
+    // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
+    toolbar: {
+        items: [
+            'findAndReplace', 'selectAll', '|',
+            'heading', '|',
+            'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
+            'bulletedList', 'numberedList', 'todoList', '|',
+            'outdent', 'indent', 'alignment', '|',
+            'undo', 'redo',
+            '-',
+            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
+            'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
+            'specialCharacters', 'horizontalLine', 'pageBreak', '|',
+            'exportPDF', 'exportWord', 'sourceEditing'
+        ],
+        shouldNotGroupWhenFull: true
+    },
+    // Changing the language of the interface requires loading the language file using the <script> tag.
+    // language: 'es',
+    list: {
+        properties: {
+            styles: true,
+            startIndex: true,
+            reversed: true
+        }
+    },
+    // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
+    heading: {
+        options: [
+            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+            { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+            { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
+            { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
+            { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
+        ]
+    },
+    // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
+    placeholder: 'Welcome to CKEditor 5!',
+    // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
+    fontFamily: {
+        options: [
+            'default',
+            'Arial, Helvetica, sans-serif',
+            'Courier New, Courier, monospace',
+            'Georgia, serif',
+            'Lucida Sans Unicode, Lucida Grande, sans-serif',
+            'Tahoma, Geneva, sans-serif',
+            'Times New Roman, Times, serif',
+            'Trebuchet MS, Helvetica, sans-serif',
+            'Verdana, Geneva, sans-serif'
+        ],
+        supportAllValues: true
+    },
+    // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
+    fontSize: {
+        options: [10, 12, 14, 'default', 18, 20, 22],
+        supportAllValues: true
+    },
+    // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
+    // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
+    htmlSupport: {
+        allow: [
+            {
+                name: /.*/,
+                attributes: true,
+                classes: true,
+                styles: true
+            }
+        ]
+    },
+    // Be careful with enabling previews
+    // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
+    htmlEmbed: {
+        showPreviews: true
+    },
+    // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
+    link: {
+        decorators: {
+            addTargetToExternalLinks: true,
+            defaultProtocol: 'https://',
+            toggleDownloadable: {
+                mode: 'manual',
+                label: 'Downloadable',
+                attributes: {
+                    download: 'file'
+                }
+            }
+        }
+    },
+    // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
+    mention: {
+    },
+    // The "super-build" contains more premium features that require additional configuration, disable them below.
+    // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
+    removePlugins: [
+        // These two are commercial, but you can try them out without registering to a trial.
+        // 'ExportPdf',
+        // 'ExportWord',
+        'CKBox',
+        'CKFinder',
+        'EasyImage',
+        // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
+        // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
+        // Storing images as Base64 is usually a very bad idea.
+        // Replace it on production website with other solutions:
+        // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
+        // 'Base64UploadAdapter',
+        'RealTimeCollaborativeComments',
+        'RealTimeCollaborativeTrackChanges',
+        'RealTimeCollaborativeRevisionHistory',
+        'PresenceList',
+        'Comments',
+        'TrackChanges',
+        'TrackChangesData',
+        'RevisionHistory',
+        'Pagination',
+        'WProofreader',
+        // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
+        // from a local file system (file://) - load this site via HTTP server if you enable MathType
+        'MathType'
+    ],
+}
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Channels.vue b/front-end/src/views/Blog/components/Channels.vue
new file mode 100644
index 0000000..ad88e50
--- /dev/null
+++ b/front-end/src/views/Blog/components/Channels.vue
@@ -0,0 +1,99 @@
+<template>
+    <div id="channel-editor">
+        <EditorTable title="Manage channels" :show-edit="showEdit" :pagination="pagination" @open-new="openNew">
+            <template v-slot:table>
+                <ChannelTable
+                    :channels="items"
+                    @open-edit="openEdit"
+                />
+            </template>
+            <template #editor>
+                <ChannelEdit 
+                    :blog="$props.blog"
+                    @close="closeEdit"
+                    @on-submit="onSubmit"
+                    @on-delete="onDelete"
+                />
+            </template>
+        </EditorTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { BlogState } from '../blog-api';
+import { isEmpty, filter as _filter } from 'lodash';
+import { apiCall } from '@vnuge/vnlib.browser';
+import { BlogChannel, ChannelFeed, useFilteredPages } from '@vnuge/cmnext-admin';
+import ChannelEdit from './Channels/ChannelEdit.vue';
+import ChannelTable from './Channels/ChannelTable.vue';
+import EditorTable from './EditorTable.vue';
+
+const emit = defineEmits(['close', 'reload'])
+
+const props = defineProps<{
+    blog: BlogState,
+}>()
+
+const { updateChannel, addChannel, deleteChannel, getQuery } = props.blog.channels;
+const { channelEdit } = getQuery()
+
+//Setup channel filter
+const { items, pagination } = useFilteredPages(props.blog.channels, 15)
+
+const showEdit = computed(() => !isEmpty(channelEdit.value))
+
+const openEdit = (channel: BlogChannel) => channelEdit.value = channel.id;
+
+const closeEdit = (update?:boolean) => {
+    channelEdit.value = ''
+    //reload channels
+    if(update){
+        emit('reload')
+    }
+    //Reset page to top
+    window.scrollTo(0, 0)
+}
+
+const openNew = () => {
+    channelEdit.value = 'new'
+    //Reset page to top
+    window.scrollTo(0, 0)
+}
+
+const onSubmit = async ({channel, feed} : { channel:BlogChannel, feed? : ChannelFeed}) => {
+
+    //Check for new channel, or updating old channel
+    if(channelEdit.value === 'new'){
+        //Exec create call
+        await apiCall(async () => {
+            await addChannel(channel, feed);
+            //Close the edit panel
+            closeEdit(true);
+        })
+    }
+    else if(!isEmpty(channelEdit.value)){
+        //Exec update call
+        await apiCall(async () => {
+            await updateChannel(channel, feed);
+            //Close the edit panel
+            closeEdit(true);
+        })
+    }
+    //Notify error state
+}
+
+const onDelete = async (channel : BlogChannel) => {
+    //Exec delete call
+    await apiCall(async () => {
+        await deleteChannel(channel);
+        //Close the edit panel
+        closeEdit(true);
+    })
+}
+
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Channels/ChannelEdit.vue b/front-end/src/views/Blog/components/Channels/ChannelEdit.vue
new file mode 100644
index 0000000..56376fe
--- /dev/null
+++ b/front-end/src/views/Blog/components/Channels/ChannelEdit.vue
@@ -0,0 +1,157 @@
+<template>
+    <div class="flex flex-col w-full">
+        <div class="my-4 ml-auto">
+            <div class="button-group">
+                <button class="btn primary" form="channel-edit-form">Save</button>
+                <button class="btn" @click="close">Cancel</button>
+            </div>
+        </div>
+        <div class="mx-auto">
+            <h4 v-if="editMode" class="text-center">Edit Channel</h4>
+            <h4 v-else class="text-center">Create Channel</h4>
+            <p>
+                Your root directory and index file name must be unique within your S3 bucket.
+            </p>
+        </div>
+        <dynamic-form
+            id="channel-edit-form"
+            class="mx-auto"
+            :form="channelSchema"
+            :validator="channelVal.v$"
+            @submit="onSubmit"
+        />
+         <div class="relative">
+            <div class="absolute top-0 right-10">
+                <button class="btn xs no-border red" @click="disableFeed" v-if="feedEnabled">
+                    Disable
+                </button>
+            </div>
+        </div>
+        <div class="max-w-xl mx-auto mt-6">
+            <h4 v-if="editMode" class="text-center">Edit Feed</h4>
+            <h4 v-else class="text-center">Create Feed</h4>
+            <p>
+                Optionally define the rss feed for this channel. If you do not configure the feed, posts
+                to this channel will not be published to an rss feed, you may configure this feed at any time.
+            </p>
+        </div>
+        
+        <!-- Feed edit form -->
+        <dynamic-form
+            id="feed-edit-form"
+            class="mx-auto mt-4"
+            :form="feedSchema"
+            :validator="feedVal.v$"
+            @submit="onSubmit"
+        />
+
+        <!-- Feed properties -->
+        <FeedFields :properties="feedProps" />
+
+        <div class="mt-6">
+            <div class="mx-auto w-fit">
+                <button class="btn red" @click="onDelete" v-if="editMode">
+                    Delete Permenantly
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { BlogState } from '../../blog-api';
+import { forEach, isEmpty, cloneDeep, isNil } from 'lodash';
+import { reactiveComputed } from '@vueuse/core';
+import { useConfirm } from '@vnuge/vnlib.browser';
+import FeedFields from '../FeedFields.vue';
+import { BlogChannel, ChannelFeed, useXmlProperties } from '@vnuge/cmnext-admin';
+import { getChannelForm } from '../../form-helpers';
+
+const emit = defineEmits(['close', 'onSubmit', 'onDelete'])
+
+const props = defineProps<{
+    blog: BlogState
+}>()
+
+//Disallow empty channels
+const channel = computed(() => props.blog.channels.editChannel.value || {} as BlogChannel)
+const editMode = computed(() => !isNil(channel.value.id))
+
+const { getChannelValidator, channelSchema, feedSchema, getFeedValidator } = getChannelForm(editMode);
+const { reveal } = useConfirm();
+
+//Get the feed properties
+const feedProps = useXmlProperties(computed(() => channel.value.feed));
+
+//Must have reactive buffers for the channel and feed
+const channelBuffer = reactiveComputed(() => cloneDeep(channel.value) as BlogChannel)
+const feedBuffer = reactiveComputed(() => cloneDeep(channel.value.feed || {}) as ChannelFeed)
+
+//Get validators for channel and feed
+const channelVal = getChannelValidator(channelBuffer);
+const feedVal = getFeedValidator(feedBuffer);
+
+const feedEnabled = computed(() => !isEmpty(feedBuffer.url))
+
+const disableFeed = () => {
+    //Clear the feed
+    forEach(feedBuffer, (_value, key) => feedBuffer[key] = null)
+    //Reset the feed validator
+    feedVal.reset();
+}
+
+const onSubmit = async () => {
+    //validate
+    if(!await channelVal.validate()){
+        return;
+    }
+
+    //Feed may not be defined, if it is validate it
+    if(feedEnabled.value){
+        
+        if(!await feedVal.validate()){
+            return;
+        }
+
+        //set/overwite feed properties
+        const feed = {
+            ...feedBuffer,
+            properties:feedProps.getCurrentProperties()
+        }
+
+        //Invoke submitted with feed
+        emit('onSubmit', { channel: channelBuffer, feed })
+    }
+    else{
+        //Invoke submitted without feed
+        emit('onSubmit', { channel: channelBuffer, feed: null})
+    }
+   
+}
+
+const onDelete = async () => {
+    //Show confirm
+    const { isCanceled } = await reveal({
+        title: 'Delete Channel?',
+        text: 'Are you sure you want to delete this channel? This action cannot be undone.',
+    })
+    if(isCanceled){
+        return;
+    }
+
+    if(!confirm('Are you sure you want to delete this channel forever?')){
+        return;
+    }
+
+    emit('onDelete', channelBuffer)
+}
+
+const close = () => emit('close')
+
+</script>
+
+<style lang="scss">
+
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Channels/ChannelTable.vue b/front-end/src/views/Blog/components/Channels/ChannelTable.vue
new file mode 100644
index 0000000..cdf15e0
--- /dev/null
+++ b/front-end/src/views/Blog/components/Channels/ChannelTable.vue
@@ -0,0 +1,48 @@
+<template>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Path</th>
+            <th>Index</th>
+            <th>Feed?</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr v-for="channel in channels" :key="channel.id" class="table-row">
+            <td>
+                {{ channel.name }}
+            </td>
+            <td>
+                {{ channel.path }}
+            </td>
+            <td>
+                {{ channel.index }}
+            </td>
+            <td>
+                {{ feedEnabled(channel) }}
+            </td>
+            <td class="w-12">
+                <button class="btn xs no-border" @click="openEdit(channel)">
+                    <fa-icon icon="pencil" />
+                </button>
+            </td>
+        </tr>
+    </tbody>
+</template>
+
+<script setup lang="ts">
+import { BlogChannel } from '@vnuge/cmnext-admin';
+import { toRefs } from 'vue';
+const emit = defineEmits(['open-edit'])
+
+const props = defineProps<{
+    channels:BlogChannel[]
+}>()
+
+const { channels } = toRefs(props)
+
+const feedEnabled = (channel: BlogChannel) => channel.feed ? 'Enabled' : 'Disabled'
+const openEdit = (channel: BlogChannel) => emit('open-edit', channel)
+
+</script>
diff --git a/front-end/src/views/Blog/components/Content.vue b/front-end/src/views/Blog/components/Content.vue
new file mode 100644
index 0000000..00f8602
--- /dev/null
+++ b/front-end/src/views/Blog/components/Content.vue
@@ -0,0 +1,133 @@
+<template>
+    <div id="content-editor" class="">
+        <EditorTable title="Manage content" :show-edit="showEdit" :pagination="pagination" @open-new="openNew">
+            <template v-slot:table>
+                <ContentTable 
+                    :content="items"
+                    @open-edit="openEdit"
+                    @copy-link="copyLink"
+                />
+            </template>
+            <template #editor>
+                <ContentEditor 
+                    :blog="$props.blog"
+                    @submit="onSubmit"
+                    @close="closeEdit"
+                    @delete="onDelete"
+                />
+            </template>
+        </EditorTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { BlogState } from '../blog-api';
+import { isEmpty } from 'lodash';
+import { apiCall } from '@vnuge/vnlib.browser';
+import EditorTable from './EditorTable.vue';
+import ContentEditor from './Content/ContentEditor.vue';
+import ContentTable from './Content/ContentTable.vue';
+import { useClipboard } from '@vueuse/core';
+import { ContentMeta, useFilteredPages } from '@vnuge/cmnext-admin';
+
+const emit = defineEmits(['reload'])
+
+const props = defineProps<{
+   blog: BlogState
+}>()
+
+
+//Get the computed content
+const { selectedId, 
+    updateContent,
+    uploadContent,
+    deleteContent,
+    updateContentName,
+    getPublicUrl
+ } = props.blog.content;
+
+ //Setup content filter
+ const { items, pagination } = useFilteredPages(props.blog.content, 15)
+
+const showEdit = computed(() => !isEmpty(selectedId.value));
+
+const openEdit = async (item: ContentMeta) => selectedId.value = item.id
+
+const closeEdit = (update?: boolean) => {
+    selectedId.value = ''
+    //reload channels
+    if (update) {
+        emit('reload')
+    }
+    //Reset page to top
+    window.scrollTo(0, 0)
+}
+
+const openNew = () => {
+    selectedId.value = 'new'
+    //Reset page to top
+    window.scrollTo(0, 0)
+}
+
+interface OnSubmitValue{
+    item: ContentMeta,
+    file: File | undefined
+}
+
+//Allow copying of the public url to clipboard
+const { copy } = useClipboard()
+const copyLink = async (item : ContentMeta) =>{
+    apiCall(async ({toaster}) =>{
+        const url = await getPublicUrl(item);
+        await copy(url);
+        toaster.general.info({ title: 'Copied link to clipboard' })
+    });
+}
+
+const onSubmit = async (value : OnSubmitValue) => {
+
+    //Check for new channel, or updating old channel
+    if (selectedId.value === 'new') {
+        //Exec create call
+        await apiCall(async () => {
+
+            if(!value.file?.name){
+                throw Error('No file selected')
+            }
+
+            //endpoint returns the content
+            await uploadContent(value.file, value.item.name!);
+
+            //Close the edit panel
+            closeEdit(true);
+        })
+    }
+    else if (!isEmpty(selectedId.value)) {
+        //Exec update call
+        await apiCall(async () => {
+            //If no file was attached, just update the file name
+            if(value.file?.name){
+                await updateContent(value.item, value.file);
+            }
+            else{
+                await updateContentName(value.item, value.item.name!);
+            }
+            //Close the edit panel
+            closeEdit(true);
+        })
+    }
+    //Notify error state
+}
+
+const onDelete = async (item: ContentMeta) => {
+    //Exec delete call
+    await apiCall(async () => {
+        await deleteContent(item);
+        //Close the edit panel
+        closeEdit(true);
+    })
+}
+
+
+</script>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Content/ContentEditor.vue b/front-end/src/views/Blog/components/Content/ContentEditor.vue
new file mode 100644
index 0000000..4de7f8a
--- /dev/null
+++ b/front-end/src/views/Blog/components/Content/ContentEditor.vue
@@ -0,0 +1,225 @@
+<template>
+    <div id="content-editor" class="flex flex-col w-full">
+        <div class="my-4 ml-auto">
+            <div class="button-group">
+                <!-- Submit the post form -->
+                <button :disabled="waiting" class="btn primary" form="content-upload-form">
+                    <fa-icon icon="spinner" v-if="waiting" class="animate-spin" />
+                    <span v-else>Save</span>
+                </button>
+                <button class="btn" @click="onClose">Cancel</button>
+            </div>
+        </div>
+        <div class="mx-auto sm:min-w-[20rem]">
+            <h4 class="text-center">Edit Content</h4>
+            <p>
+                Add or edit content file
+            </p>
+            <div class="mt-3 text-sm">
+                Publishing to: 
+            </div>
+            <div class="p-2 px-3 bg-gray-200 border border-gray-300 rounded-md dark:bg-transparent">
+                {{ selectedChannelName }}
+            </div>
+        </div>
+        <div id="content-edit-body" class="min-h-[24rem] my-10">
+            <form id="content-upload-form" class="flex" @submit.prevent="onSubmit">
+                <fieldset class="mx-auto flex flex-col gap-10 w-[32rem]">
+                    <div class="flex flex-col">
+                        <div class="p-3 py-0.5">
+                            <label class="">File name</label>
+                            <input
+                                type="text" 
+                                class="w-full input primary"
+                                placeholder="Title"
+                                v-model="v$.name.$model" 
+                                :class="{'invalid':v$.name.$invalid && v$.name.$dirty}"
+                            />
+                        </div>
+                        <div v-if="editFile?.id" class="mt-3">
+                            <div class="p-3 py-0.5">
+                                <label>Content Id</label>
+                                <input type="text" class="w-full input primary" :value="editFile.id" readonly />
+                            </div>
+                        </div>
+                         
+                        <div v-if="uploadedFile.name" class="border border-gray-300 p-4 w-[24rem] mx-auto rounded-sm relative mt-5">
+                            <div class="absolute top-0 text-right -right-12">
+                                <button class="rounded-sm btn sm red" @click.prevent="removeNewFile">
+                                    <fa-icon :icon="['fas', 'trash']" />
+                                </button>
+                            </div>
+                            <div class="">
+                                Name:
+                                <span class="border-b border-coolGray-400">
+                                    {{ getFileName(uploadedFile) }}
+                                </span>
+                            </div>
+                            <div class="mt-3">
+                                Size: {{ getFileSize(uploadedFile) }}
+                            </div>
+                            <div class="mt-3">
+                                Content-Type: {{ getContentType(uploadedFile) }}
+                            </div>
+                        </div>
+                        <div v-else-if="editFile?.id" >
+                            <div class="border border-gray-300 p-4 min-w-[24rem] mx-auto rounded-sm relative mt-5">
+                                <div class="">
+                                    Name: {{ getFileName(editFile) }}
+                                </div>
+                                <div class="mt-3">
+                                    Size: {{ getSizeinKb(editFile?.length) }}
+                                </div>
+                                <div class="mt-3">
+                                    File Path: {{ editFile.path }}
+                                </div>
+                                <div class="mt-3">
+                                    Content-Type: {{ editFile.content_type }}
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="!uploadedFile.name" class="m-auto mt-5 w-fit">
+                            <button class="btn" @click.prevent="open()">
+                                {{ editFile?.id ? 'Overwrite file' : 'Select File' }}
+                            </button>
+                        </div>
+                    </div>
+                </fieldset>
+            </form>
+        </div>
+        <div class="mt-4">
+            <div class="mx-auto w-fit">
+                <button class="btn red" @click="onDelete">Delete Forever</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { reactiveComputed, useFileDialog } from '@vueuse/core';
+import { ContentMeta } from '@vnuge/cmnext-admin';
+import { useConfirm, useVuelidateWrapper, useFormToaster, useWait } from '@vnuge/vnlib.browser';
+import { defaultTo, first, isEmpty, round, truncate } from 'lodash';
+import { required, helpers, maxLength } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core';
+import { BlogState } from '../../blog-api';
+
+const emit = defineEmits(['close', 'submit', 'delete']);
+const props = defineProps<{
+   blog: BlogState
+}>();
+
+const { reveal } = useConfirm();
+const { waiting } = useWait();
+
+const { content, channels } = props.blog;
+
+const selectedId = computed(() => content.selectedId.value);
+const selectedContent = computed<ContentMeta>(() => defaultTo(content.selectedItem.value, {} as ContentMeta));
+const metaBuffer = reactiveComputed<ContentMeta>(() => ({ ...selectedContent.value}));
+const selectedChannelName = computed(() => defaultTo(channels.selectedItem.value?.name, 'No channel selected'));
+
+const v$ = useVuelidate({
+    name: { 
+        required,
+        maxLen:maxLength(50),
+        reg: helpers.withMessage('The file name contains invalid characters', helpers.regex(/^[a-zA-Z0-9 \-\.]*$/))
+     },
+}, metaBuffer)
+
+const { validate } = useVuelidateWrapper(v$);
+
+const file = ref<File | undefined>();
+const { files, open, reset, onChange } = useFileDialog({ accept: '*' })
+//update the file buffer when a user selects a file to upload
+onChange(() => {
+    file.value = first(files.value)
+    v$.value.name.$model = file.value?.name;
+})
+
+const editFile = computed<ContentMeta | undefined>(() => selectedContent.value);
+const uploadedFile = computed<File>(() => defaultTo(file.value, {} as File));
+
+const getFileName = (file : File | ContentMeta) => truncate(file.name, { length: 20 });
+const getFileSize = (file : File) => {
+    const size = round(file.size > 1024 ? file.size / 1024 : file.size, 2);
+    return `${size} ${file.size > 1024 ? 'KB' : 'B'}`;
+}
+const getContentType = (file : File) => file.type;
+const getSizeinKb = (value : number | undefined) => {
+    value = defaultTo(value, 0);
+    const size = round(value > 1024 ? value / 1024 : value, 2);
+    return `${size} ${value > 1024 ? 'KB' : 'B'}`;
+}
+
+const onSubmit = async () => {
+
+    const { error } = useFormToaster()
+    const hasFile = !isEmpty(file.value?.name);
+
+    //Validate the form
+    if(!await validate()){
+        return;
+    }
+
+    //Check if in edit mode
+    if(selectedId.value === 'new'){
+        //New file upload
+        if(!hasFile){
+            error({ title: 'No file selected' })
+            return;
+        }
+    }
+    //Edit mode
+    else{
+        //If a new file has been attached, then we should prompt for an overwrite
+        if(hasFile){
+             //Confirm overwrite
+            const { isCanceled } = await reveal({
+                title: 'Overwrite file?',
+                text: 'Are you sure you want to overwrite the file? This action cannot be undone.',
+            })
+            if (isCanceled) {
+                return;
+            }
+        }
+    }
+    emit('submit', { item: metaBuffer, file: file.value });
+}
+
+const onClose = () => emit('close');
+
+const onDelete = async () => {
+    //Show confirm
+    const { isCanceled } = await reveal({
+        title: 'Delete File?',
+        text: 'Are you sure you want to delete this file? This action cannot be undone.',
+    })
+    if (isCanceled) {
+        return;
+    }
+
+    if (!confirm('Are you sure you want to delete this file forever?')) {
+        return;
+    }
+
+    //Emit the delete event with the original post
+    emit('delete', metaBuffer)
+}
+
+const removeNewFile = () =>{
+    file.value = undefined;
+    v$.value.name.$model = editFile.value?.name ?? '';
+    reset();
+}
+
+</script>
+
+<style lang="scss">
+#content-upload-form{
+    input.primary.invalid{
+        @apply border-red-500;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Content/ContentTable.vue b/front-end/src/views/Blog/components/Content/ContentTable.vue
new file mode 100644
index 0000000..c47a063
--- /dev/null
+++ b/front-end/src/views/Blog/components/Content/ContentTable.vue
@@ -0,0 +1,75 @@
+<template>
+    <thead>
+        <tr>
+            <th>File Name</th>
+            <th>Id</th>
+            <th>Date</th>
+            <th>Content Type</th>
+            <th>Length</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr v-for="item in content" :key="item.id" class="table-row">
+            <td>
+                {{ getItemName(item) }}
+            </td>
+            <td>
+                {{ getItemId(item) }}
+            </td>
+            <td>
+                {{ getDateString(item.date) }}
+            </td>
+            <td>
+                {{ item.content_type }}
+            </td>
+            <td>
+                {{ getItemLength(item) }}
+            </td>
+            <td class="w-24">
+                <fieldset :disabled="waiting">
+                    <button class="btn xs no-border" @click="copyLink(item)">
+                        <fa-icon icon="link" />
+                    </button>
+                    <button class="btn xs no-border" @click="copy(item.id)">
+                        <fa-icon icon="copy" />
+                    </button>
+                    <button class="btn xs no-border" @click="openEdit(item)">
+                        <fa-icon icon="pencil" />
+                    </button>
+                </fieldset>
+            </td>
+        </tr>
+    </tbody>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { filter as _filter, truncate } from 'lodash';
+import { useClipboard } from '@vueuse/core';
+import { useWait } from '@vnuge/vnlib.browser';
+import { ContentMeta } from '@vnuge/cmnext-admin';
+
+const emit = defineEmits(['open-edit', 'copy-link'])
+
+const props = defineProps<{
+    content: ContentMeta[]
+}>()
+
+const { content } = toRefs(props)
+
+const { waiting } = useWait()
+const { copy } = useClipboard()
+
+const getDateString = (time?: number) => new Date((time || 0) * 1000).toLocaleString();
+const getItemLength = (item: ContentMeta) : string =>{
+    const length = item.length || 0;
+    return length > 1024 ? `${(length / 1024).toFixed(2)} KB` : `${length} B`
+}
+const getItemId = (item: ContentMeta) => truncate(item.id || '', { length: 20 })
+const getItemName = (item : ContentMeta) => truncate(item.name || '', { length: 30 })
+
+const openEdit = async (item: ContentMeta) => emit('open-edit', item)
+const copyLink = (item : ContentMeta) => emit('copy-link', item)
+
+</script>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/ContentSearch.vue b/front-end/src/views/Blog/components/ContentSearch.vue
new file mode 100644
index 0000000..37fd438
--- /dev/null
+++ b/front-end/src/views/Blog/components/ContentSearch.vue
@@ -0,0 +1,115 @@
+<template>
+    <div id="content-search" class="my-4">
+        <div class="">
+            <div class="">
+                <input class="w-full input primary" placeholder="Search..." v-model="search" />
+            </div>
+        </div>
+        <div class="search-results">
+            <div v-if="searchResults.length == 0" class="result">
+                No results found.
+            </div>
+            <div v-else v-for="result in searchResults" :key="result.id" @click.prevent="onSelected(result)" class="result">
+                <div class="flex-auto result name">
+                    {{ result.shortName }}
+                </div>
+                <div class="result id">
+                    {{ result.shortId }}
+                </div>
+                <div class="rseult controls">
+                    <div v-if="waiting">
+                        <fa-icon icon="spinner" spin />
+                    </div>
+                    <div v-else-if="result.copied.value" class="text-sm text-amber-500">
+                        copied
+                    </div>
+                    <div v-else class="">
+                         <button class="btn secondary sm borderless" @click="result.copyLink()">
+                            <fa-icon icon="link" />
+                         </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+import { apiCall, useWait } from '@vnuge/vnlib.browser';
+import { computed, Ref, ref } from 'vue';
+import { map, slice, truncate } from 'lodash';
+import { ContentMeta } from '@vnuge/cmnext-admin';
+import { BlogState } from '../blog-api';
+
+const emit = defineEmits(['selected'])
+
+const props = defineProps<{
+    blog: BlogState,
+}>()
+
+const { createReactiveSearch, getPublicUrl } = props.blog.content
+const { waiting } = useWait()
+
+const search = ref('')
+const searcher = createReactiveSearch(search);
+
+interface ContentResult extends ContentMeta {
+    readonly shortId: string,
+    readonly shortName: string,
+    readonly copied: Ref<boolean>,
+    copyLink(): void
+}
+
+const searchResults = computed<ContentResult[]>(() => {
+    const current = slice(searcher.value, 0, 5);
+
+    //Copies the link to the clipboard from the server to insert into the editor
+    const copyLink = (result : ContentMeta, copy : (text: string) => Promise<void> ) => {
+        apiCall(async () =>{
+            const link = await getPublicUrl(result);
+            await copy(link);
+        })
+    }
+
+    //Formats the result for display
+    return map(current, content => {
+        //scoped clipboard for copy link
+        const { copied, copy } = useClipboard();
+        return {
+            ...content,
+            //truncate the id and name for display
+            shortId: truncate(content.id, { length: 15 }),
+            shortName: truncate(content.name, { length: 24 }),
+            copyLink: () => copyLink(content, copy),
+            copied
+        }
+    })
+})
+
+const onSelected = (result: ContentResult) => {
+    emit('selected', result)
+}
+
+</script>
+
+<style lang="scss">
+
+    .search-results{
+        @apply mt-3;
+    }
+    
+    .result{
+        @apply flex flex-row items-center justify-between;
+        @apply p-1 cursor-pointer hover:bg-gray-100 dark:hover:bg-dark-600;
+
+        .id{
+            @apply text-sm;
+        }
+
+        .controls{
+            @apply min-w-[4rem] text-center;
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/EditorTable.vue b/front-end/src/views/Blog/components/EditorTable.vue
new file mode 100644
index 0000000..4ec5a33
--- /dev/null
+++ b/front-end/src/views/Blog/components/EditorTable.vue
@@ -0,0 +1,96 @@
+<template>
+    <slot class="flex flex-row">
+        <div class="flex-1 px-4 mt-3">
+            <div v-if="!showEdit" class="">
+                <div class="flex justify-between p-4 pt-0">
+                    <div class="w-[20rem]">
+                        <h4>{{ $props.title }}</h4>
+                    </div>
+                     <div class="h-full">
+                        <div :class="{'opacity-100':waiting}" class="opacity-0">
+                            <fa-icon icon="spinner" class="animate-spin" />
+                        </div>
+                    </div>
+                     <div class="mt-auto">
+                        <div class="flex justify-center">
+                            <nav aria-label="Pagination">
+                                <ul class="inline-flex items-center space-x-1 text-sm rounded-md">
+                                    <li>
+                                        <button :disabled="isFirstPage" class="page-button" @click="prev">
+                                            <fa-icon icon="chevron-left" />
+                                        </button>
+                                    </li>
+                                    <li>
+                                        <span class="inline-flex items-center px-4 py-2 space-x-1">
+                                            Page 
+                                            <b class="mx-1">
+                                                {{ currentPage }}
+                                            </b>
+                                                of
+                                            <b class="ml-1">
+                                                {{ pageCount }}
+                                            </b>
+                                        </span>
+                                    </li>
+                                    <li>
+                                        <button :disabled="isLastPage" class="page-button" @click="next">
+                                            <fa-icon icon="chevron-right" />
+                                        </button>
+                                    </li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                    
+                    <div class="h-fit">
+                        <button class="rounded btn primary sm" @click="openNew">
+                            <fa-icon :icon="['fas', 'plus']" class="mr-2" />
+                            New
+                        </button>
+                    </div>
+                </div>
+                <table class="edit-table">
+                   <slot name="table" />
+                </table>
+            </div>
+            <div v-else class="">
+                <slot name="editor" />
+            </div>
+        </div>
+    </slot>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { useWait } from '@vnuge/vnlib.browser';
+import { UseOffsetPaginationReturn } from '@vueuse/core';
+
+const emit = defineEmits(['open-new'])
+const props = defineProps<{
+    title: string,
+    showEdit: boolean,
+    pagination: UseOffsetPaginationReturn
+}>()
+
+const { showEdit } = toRefs(props)
+
+const { waiting } = useWait()
+
+//Get pagination
+const { pageCount, next, prev, isLastPage, isFirstPage, currentPage } = props.pagination
+
+const openNew = () => {
+    emit('open-new')
+}
+
+</script>
+
+<style lang="scss">
+
+button.page-button{
+    @apply inline-flex items-center px-2 py-1.5 space-x-2 font-medium;
+    @apply text-gray-500 bg-white border border-gray-300 rounded-full hover:bg-gray-50;
+    @apply dark:border-dark-300 dark:bg-transparent dark:text-gray-300 hover:dark:bg-dark-700; 
+}
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/FeedFields.vue b/front-end/src/views/Blog/components/FeedFields.vue
new file mode 100644
index 0000000..90e1454
--- /dev/null
+++ b/front-end/src/views/Blog/components/FeedFields.vue
@@ -0,0 +1,140 @@
+<template>
+    <div id="feed-custom-fields">
+        <div class="my-3 text-center">
+            <h4>Feed custom fields</h4>
+        </div>
+
+        <div v-if="cleanXml" class="w-full max-w-2xl mx-auto">
+            <pre class="xml">
+{{ cleanXml }}
+            </pre>
+        </div>
+
+        
+        <div class="my-2 ml-auto w-fit">
+            <div v-if="!editMode"  class="button-group">
+                <button class="btn" @click="edit">Edit</button>
+            </div>
+            <div v-else class="button-group">
+                <button class="btn primary" @click="save" >Update</button>
+                <button class="btn" @click="cancel">Cancel</button>
+            </div>
+        </div>
+
+
+        <div v-if="editMode" class="flex flex-col">
+            <div v-if="$props.blog" class="mb-2">
+                <EpAdder :blog="$props.blog" @submit="onAddEnclosure" />
+            </div>
+
+            <div class="">
+                <JsonEditorVue :ask-to-format="true" class="json" v-model="jsonFeedData"/>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { FeedProperty, UseXmlProperties } from '@vnuge/cmnext-admin';
+import { BlogState } from '../blog-api';
+import JsonEditorVue from 'json-editor-vue'
+import EpAdder from './podcast-helpers/EpisodeAdder.vue';
+
+const props = defineProps<{
+    properties: UseXmlProperties,
+    blog?: BlogState
+}>()
+
+const { getXml, saveJson, getModel, addProperties } = props.properties
+
+const jsonFeedData = ref()
+const editMode = ref(false)
+const xmlData = ref<string | undefined>(getXml())
+
+const cleanXml = computed(() => {
+
+    const formatXml = (xml : string) => { // tab = optional indent value, default is tab (\t)
+        var formatted = '', indent = '';
+        xml.split(/>\s*</).forEach(function (node) {
+            if (node.match(/^\/\w/)){
+                indent = indent.substring(1); // decrease indent by one 'tab'
+            }
+            formatted += indent + '<' + node + '>\r\n';
+            if (node.match(/^<?\w[^>]*[^\/]$/)){
+                 indent += '\t';              // increase indent
+            }
+        });
+
+        return formatted.substring(1, formatted.length - 3);
+    }
+    return formatXml(xmlData.value || '')
+})
+
+const edit = () => {
+    jsonFeedData.value = getModel()
+    editMode.value = true
+}
+
+const save = () : void => {
+    //Only close editor if the json is valid
+    if(saveJson(jsonFeedData.value)){
+        editMode.value = false
+        //update xml
+        xmlData.value = getXml()
+    }
+}
+
+const cancel = () : void => {
+    editMode.value = false
+    xmlData.value = getXml()
+}
+
+const onAddEnclosure = (props: FeedProperty[]) =>{
+    addProperties(props);
+    //update xml
+    xmlData.value = getXml()
+    //update json editor
+    jsonFeedData.value = getModel()
+}
+
+</script>
+
+<style lang="scss">
+
+#feed-custom-fields{
+
+    @apply w-full max-w-[80%] mx-auto py-4 my-5;
+
+    .json > .jse-main{
+        @apply w-full min-h-[40rem] rounded bg-transparent mx-auto;
+    }
+
+    .feed-fields{
+        @apply mx-auto gap-4 flex flex-row justify-center my-6;
+        
+        input.primary{
+            @apply w-full;
+        }
+
+        textarea.primary{
+            @apply w-full h-full tracking-wider font-mono p-3 text-sm;
+        }
+
+        textarea.invalid{
+            @apply border-red-500;
+        }
+    }
+
+    .xml{
+        @apply tracking-wider font-mono p-3 text-sm border dark:border-dark-500 rounded whitespace-pre-wrap;
+    }
+
+    .xml.invalid{
+        @apply border-red-500;
+    }
+
+}
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Posts.vue b/front-end/src/views/Blog/components/Posts.vue
new file mode 100644
index 0000000..5ebeeac
--- /dev/null
+++ b/front-end/src/views/Blog/components/Posts.vue
@@ -0,0 +1,113 @@
+<template>
+    <div id="post-editor" class="">
+        <EditorTable title="Manage posts" :show-edit="showEdit" :pagination="pagination" @open-new="openNew">
+            <template v-slot:table>
+                <PostTable 
+                    :posts="items"
+                    @open-edit="openEdit"
+                />
+            </template> 
+            <template #editor>
+                <PostEditor 
+                    :blog="$props.blog"
+                    @submit="onSubmit"
+                    @close="closeEdit"
+                    @delete="onDelete"
+                />
+            </template>
+        </EditorTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { isEmpty } from 'lodash';
+import { PostMeta, useFilteredPages } from '@vnuge/cmnext-admin';
+import { apiCall, debugLog } from '@vnuge/vnlib.browser';
+import EditorTable from './EditorTable.vue';
+import PostEditor from './Posts/PostEdit.vue';
+import PostTable from './Posts/PostTable.vue';
+import { BlogState } from '../blog-api';
+
+const emit = defineEmits(['reload'])
+
+const props = defineProps<{
+   blog: BlogState
+}>()
+
+const { selectedId, publishPost, updatePost, deletePost } = props.blog.posts;
+const { updatePostContent } = props.blog.content;
+
+const showEdit = computed(() => !isEmpty(selectedId.value));
+
+//Init paginated items for the table and use filtered items
+const { pagination, items } = useFilteredPages(props.blog.posts, 15)
+
+//Open with the post id
+const openEdit = async (post: PostMeta) => selectedId.value = post.id;
+
+const closeEdit = (update?: boolean) => {
+    selectedId.value = ''
+    //reload channels
+    if (update) {
+        emit('reload')
+    }
+    //Reset page to top
+    window.scrollTo(0, 0)
+}
+
+const openNew = () => {
+    //Reset the edit post
+    selectedId.value = 'new'
+    //Reset page to top
+    window.scrollTo(0, 0)
+}
+
+const onSubmit = async ({post, content } : { post:PostMeta, content:string }) => {
+
+    debugLog('submitting', post, content);
+
+    //Check for new channel, or updating old channel
+    if (selectedId.value === 'new') {
+        //Exec create call
+        await apiCall(async () => {
+
+            //endpoint returns the content
+            const newMeta = await publishPost(post);
+
+            //Publish the content
+            await updatePostContent(newMeta, content)
+
+            //Close the edit panel
+            closeEdit(true);
+        })
+    }
+    else if (!isEmpty(selectedId.value)) {
+        //Exec update call
+        await apiCall(async () => {
+            await updatePost(post);
+           
+            //Publish the content
+            await updatePostContent(post, content)
+
+            //Close the edit panel
+            closeEdit(true);
+        })
+    }
+    //Notify error state
+}
+
+const onDelete = async (post: PostMeta) => {
+    //Exec delete call
+    await apiCall(async () => {
+        await deletePost(post);
+        //Close the edit panel
+        closeEdit(true);
+    })
+}
+
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Posts/PostEdit.vue b/front-end/src/views/Blog/components/Posts/PostEdit.vue
new file mode 100644
index 0000000..4f7b52b
--- /dev/null
+++ b/front-end/src/views/Blog/components/Posts/PostEdit.vue
@@ -0,0 +1,155 @@
+<template>
+    <div id="new-post-editor" class="flex flex-col w-full">
+        <div class="my-4 ml-auto">
+            <div class="button-group">
+                <!-- Submit the post form -->
+                <button class="btn primary" form="post-edit-form">Save</button>
+                <button class="btn" @click="onClose">Cancel</button>
+            </div>
+        </div>
+        <div class="mx-auto">
+            <h4 class="text-center">Edit Post</h4>
+            <p>
+                Add or edit a post to publish to your blog.
+            </p>
+        </div>
+        <div class="relative">
+            <div class="absolute top-2 right-10">
+                <button class="btn no-border" @click="setMeAsAuthor">@Me</button>
+            </div>
+        </div>
+        <dynamic-form
+            id="post-edit-form"
+            class="mx-auto"
+            :form="schema"
+            :disabled="false"
+            :validator="v$"
+            @submit="onSubmit"
+        />
+
+        <div id="post-content-editor" class="px-6" :class="{'invalid':v$.content.$invalid}">
+            <Editor @change="onContentChanged" :blog="$props.blog" @load="onEditorLoad" />
+        </div>
+
+         <FeedFields :properties="postProperties" :blog="$props.blog" />
+
+         <div class="mx-auto my-4">
+            <div class="button-group">
+                <!-- Submit the post form -->
+                <button class="btn primary" form="post-edit-form">Save</button>
+                <button class="btn" @click="onClose">Cancel</button>
+                <button v-if="!isNew" class="btn red" @click="onDelete">Delete Forever</button>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { BlogState } from '../../blog-api';
+import { reactiveComputed } from '@vueuse/core';
+import { isNil, isString, split } from 'lodash';
+import { PostMeta, useXmlProperties } from '@vnuge/cmnext-admin';
+import { apiCall, useConfirm, useUser } from '@vnuge/vnlib.browser';
+import { getPostForm } from '../../form-helpers';
+import Editor from '../../ckeditor/Editor.vue';
+import FeedFields from '../FeedFields.vue';
+
+const emit = defineEmits(['close', 'submit', 'delete']);
+const props = defineProps<{
+    blog: BlogState
+}>()
+
+const { reveal } = useConfirm();
+const { getProfile } = useUser();
+const { schema, getValidator } = getPostForm();
+
+const { posts, content } = props.blog;
+
+const isNew = computed(() => isNil(posts.selectedItem.value));
+
+/* Post meta may load delayed from the api so it must be computed 
+and reactive, it may also be empty when a new post is created */
+const postBuffer = reactiveComputed<PostMeta>(() => {
+    return {
+        ...posts.selectedItem.value,
+        content: ''
+    } as PostMeta
+});
+
+const { v$, validate } = getValidator(postBuffer);
+
+//Wrap the post properties in an xml feed editor
+const postProperties = useXmlProperties(posts.selectedItem);
+
+const onSubmit = async () =>{
+    if(!await validate()){
+        return;
+    }
+
+    //get all properties
+    const p = postProperties.getCurrentProperties();
+
+    const post = {
+        ...postBuffer,
+        properties: p,
+        content: undefined
+    }
+
+    //Remove the content from the post object
+    delete post.content;
+
+    //Convert the tags string to an array of strings
+    post.tags = isString(post.tags) ? split(post.tags, ',') : post.tags;
+
+    emit('submit', { post, content: v$.value.content.$model});
+}
+
+const onClose = () => emit('close');
+
+const onContentChanged = (content: string) => {
+    //Set the validator content string
+    v$.value.content.$model = content;
+}
+
+const onDelete = async () => {
+    //Show confirm
+    const { isCanceled } = await reveal({
+        title: 'Delete Post?',
+        text: 'Are you sure you want to delete this post? This action cannot be undone.',
+    })
+    if (isCanceled) {
+        return;
+    }
+
+    if (!confirm('Are you sure you want to delete this post forever?')) {
+        return;
+    }
+
+    //Emit the delete event with the original post
+    emit('delete', posts.selectedItem.value)
+}
+
+const setMeAsAuthor = () => {
+    apiCall(async () => {
+        const { first, last } = await getProfile<{first?:string, last?:string, email:string}>();
+        v$.value.author.$model = `${first} ${last}`
+    })
+}
+
+const onEditorLoad = async (editor : any) =>{
+
+    //Get the initial content
+    const postContent = await content.getSelectedPostContent();
+
+    //Set the initial content
+    if(!isNil(postContent)){
+        onContentChanged(postContent);
+        editor.setData(postContent);
+    }
+}
+
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Posts/PostTable.vue b/front-end/src/views/Blog/components/Posts/PostTable.vue
new file mode 100644
index 0000000..e5e45f2
--- /dev/null
+++ b/front-end/src/views/Blog/components/Posts/PostTable.vue
@@ -0,0 +1,62 @@
+<template>
+      <thead>
+        <tr>
+            <th>Title</th>
+            <th>Id</th>
+            <th>Date</th>
+            <th>Author</th>
+            <th>Summary</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr v-for="post in posts" :key="post.id" class="table-row">
+            <td>
+                {{ post.title }}
+            </td>
+            <td>
+                {{ getPostId(post) }}
+            </td>
+            <td>
+                {{ getDateString(post.date) }}
+            </td>
+            <td>
+                {{ post.author }}
+            </td>
+            <td>
+                {{ getSummaryString(post.summary) }}
+            </td>
+            <td class="w-20">
+                <button class="btn xs no-border" @click="copy(post.id)">
+                    <fa-icon icon="copy" />
+                </button>
+                <button class="btn xs no-border" @click="openEdit(post)">
+                    <fa-icon icon="pencil" />
+                </button>
+            </td>
+        </tr>
+    </tbody>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { filter as _filter, truncate } from 'lodash';
+import { useClipboard } from '@vueuse/core';
+import { PostMeta } from '@vnuge/cmnext-admin';
+
+const emit = defineEmits(['reload', 'open-edit'])
+
+const props = defineProps<{
+    posts: PostMeta[],
+}>()
+
+const { posts } = toRefs(props)
+
+const { copy } = useClipboard()
+
+const openEdit = async (post: PostMeta) => emit('open-edit', post)
+
+const getDateString = (time?: number) => new Date((time || 0) * 1000).toLocaleString();
+const getSummaryString = (summary?: string) => truncate(summary || '', { length: 40 })
+const getPostId = (post: PostMeta) => truncate(post.id || '', { length: 20 })
+</script>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/podcast-helpers/EpisodeAdder.vue b/front-end/src/views/Blog/components/podcast-helpers/EpisodeAdder.vue
new file mode 100644
index 0000000..79b21cf
--- /dev/null
+++ b/front-end/src/views/Blog/components/podcast-helpers/EpisodeAdder.vue
@@ -0,0 +1,164 @@
+<template>
+    <div id="podcast-upload-form">
+
+        <div class="ml-auto w-fit">
+            <div class="">
+                <button class="btn sm" @click="setIsOpen(true)">Add enclosure</button>
+            </div>
+        </div>
+
+        <Dialog id="enclosure-dialog" :open="isOpen" @close="setIsOpen" class="relative z-50">
+            <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+            <div class="fixed inset-0 flex justify-center pt-[8rem]">
+                <DialogPanel class="dialog">
+                    <div class="">
+                        <DialogTitle>Set feed enclosure</DialogTitle>
+                        <DialogDescription>
+                            You may set a podcast episode or other rss enclosure from 
+                            content stored in the cms.
+                        </DialogDescription>
+                        <div class="my-3 ml-auto w-fit">
+                            <Popover class="relative">
+                                <PopoverButton class="btn">
+                                    Add media
+                                    <fa-icon class="ml-2" icon="photo-film" />
+                                </PopoverButton>
+                                <PopoverPanel class="absolute right-0 z-10 top-10">
+                                    <div class="md-pannel">
+                                        <div class="">
+                                            Search for content by its id or file name.
+                                        </div>
+                                        <ContentSearch :blog="$props.blog" @selected="onContentSelected"/>
+                                    </div>
+                                </PopoverPanel>
+                            </Popover>
+                        </div>
+                        <dynamic-form
+                            class=""
+                            id="enclosure-form"
+                            :form="schema"
+                            :validator="v$"
+                            @submit="onFormSubmit"
+                            @cancel="onCancel"
+                        />
+                        <div class="mt-4 ml-auto w-fit">
+                            <div class="button-group">
+                                <button class="btn sm primary" @click="onFormSubmit">Submit</button>
+                                <button class="btn sm" @click="onCancel">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+                </DialogPanel>
+            </div>
+        </Dialog>
+    </div>
+</template>
+<script setup lang="ts">
+
+import { ref, reactive } from 'vue';
+import { BlogState } from '../../blog-api';
+import { PodcastEntity, getPodcastForm } from './podcast-form'
+import {
+    Dialog,
+    DialogPanel,
+    DialogTitle,
+    DialogDescription,
+    PopoverButton,
+    PopoverPanel,
+    Popover,
+} from '@headlessui/vue'
+import ContentSearch from '../ContentSearch.vue'
+import { apiCall, debugLog } from '@vnuge/vnlib.browser';
+import { ContentMeta } from '@vnuge/cmnext-admin';
+
+const emit = defineEmits(['submit'])
+
+const props = defineProps<{
+    blog: BlogState,
+}>()
+
+const isOpen = ref(false)
+const { getPublicUrl } = props.blog.content;
+const { schema, setEnclosureContent, getValidator, exportProperties } = getPodcastForm()
+
+const buffer = reactive<PodcastEntity>({} as PodcastEntity)
+
+const { v$, validate } = getValidator(buffer)
+
+const setIsOpen = (value: boolean) => isOpen.value = value
+
+const onFormSubmit = async () =>{
+    //Validate the form
+    if(! await validate()){
+        return
+    }
+
+    //get the enclosure properties to add to the xml
+    const props = exportProperties(buffer)
+    debugLog(props);
+    emit('submit', props)
+    setIsOpen(false)
+}
+
+const onCancel = () =>{
+    setIsOpen(false)
+}
+
+const onContentSelected = (content: ContentMeta) =>{
+    apiCall(async () =>{
+        //Get the content link from the server
+        const url = await getPublicUrl(content)
+
+        //set the form content
+        setEnclosureContent(buffer, content, `/${url}`)
+    })
+}
+
+</script>
+
+<style lang="scss">
+
+#enclosure-dialog{
+
+    .dialog{
+        @apply w-full max-w-3xl px-8 pb-8 pt-4 mx-auto mb-auto border rounded shadow-md;
+        @apply bg-white dark:bg-dark-700 dark:text-gray-300 dark:border-dark-500;
+    }
+    
+    .dynamic-form.input-group{
+        @apply grid grid-cols-2 gap-4;
+    }
+
+    .dynamic-form.input-container{
+        @apply flex flex-col;
+    }
+
+    .dynamic-form.field-description{
+        @apply text-sm text-gray-500 dark:text-gray-400 px-2;
+    }
+
+    .dynamic-form.input-label{
+        @apply text-sm font-semibold text-gray-700 dark:text-gray-100 ml-1 mb-1;
+    }
+
+    .dynamic-form.dynamic-input.input{
+        @apply py-1.5 bg-transparent;
+
+        &:disabled{
+            @apply bg-gray-100 dark:bg-transparent dark:border-transparent;
+        }
+
+        &:focus{
+            @apply border-primary-500;
+        }
+    }
+
+    .dirty.dynamic-form.input-container{
+        &.data-invalid .dynamic-form.dynamic-input.input{
+            @apply border-red-500;
+        }
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/podcast-helpers/podcast-form.ts b/front-end/src/views/Blog/components/podcast-helpers/podcast-form.ts
new file mode 100644
index 0000000..ab8ad8a
--- /dev/null
+++ b/front-end/src/views/Blog/components/podcast-helpers/podcast-form.ts
@@ -0,0 +1,174 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { computed, Ref } from 'vue';
+import { helpers, required, maxLength, alphaNum, numeric } from "@vuelidate/validators"
+import useVuelidate from "@vuelidate/core"
+import { MaybeRef } from '@vueuse/core';
+import { useVuelidateWrapper } from '@vnuge/vnlib.browser';
+import { ContentMeta, FeedProperty } from '@vnuge/cmnext-admin';
+
+export interface EnclosureEntity{
+    fileId: string;
+    contentUrl: string;
+    contentLength: number;
+    contentType: string;
+}
+
+export interface PodcastEntity extends EnclosureEntity{
+    episodeType: string;
+    duration: number;
+}
+
+export const getPodcastForm = (editMode?: Ref<boolean>) => {
+    const schema = computed(() => {
+        return {
+            fields: [
+                {
+                    id: 'episode-type',
+                    type: 'text',
+                    label: 'Episode Type',
+                    name: 'episodeType',
+                    placeholder: '',
+                    description: 'The itunes episode type, typically "full" or "trailer"',
+                },
+                {
+                    id: 'episode-duration',
+                    type: 'text',
+                    label: 'Duration',
+                    name: 'duration',
+                    placeholder: '',
+                    description: 'The duration in seconds for the episode',
+                },
+                {
+                    id: 'ep-content-id',
+                    type: 'text',
+                    label: 'File Id',
+                    name: 'fileId',
+                    placeholder: '',
+                    description: 'The file id of the episode already in the channel',
+                    disabled: true,
+                },
+                {
+                    id: 'content-url',
+                    type: 'text',
+                    label: 'Content url',
+                    name: 'contentUrl',
+                    placeholder: '',
+                    description: 'This the relative url to the episode content file',
+                    disabled: true,
+                },
+                {
+                    id: 'content-length',
+                    type: 'text',
+                    label: 'Content length',
+                    name: 'contentLength',
+                    placeholder: '',
+                    description: 'This the length in bytes of the episode content file',
+                    disabled: true,
+                },
+                {
+                    id: 'content-type',
+                    type: 'text',
+                    label: 'The MIME content type',
+                    name: 'contentType',
+                    placeholder: '',
+                    description: 'The MIME content type for the episode content file',
+                    disabled: true,
+                }
+            ]
+        }
+    });
+
+
+    const alphaNumSlash = helpers.regex(/^[a-zA-Z0-9\/]*$/);
+
+    const rules = {
+        fileId: {
+            required:helpers.withMessage('The file id is required', required),
+            maxLength: helpers.withMessage('The file id must be less than 64 characters', maxLength(64)),
+            alphaNumeric: helpers.withMessage('The file id must be alpha numeric', alphaNum)
+        },
+        episodeType: {
+            required: helpers.withMessage('The episode type is required', required),
+            maxLength: helpers.withMessage('The episode type must be less than 64 characters', maxLength(64)),
+            alphaNumeric: helpers.withMessage('The episode type must be alpha numeric', alphaNum)
+        },
+        duration: {
+            required: helpers.withMessage('The duration is required', required),
+            numeric: helpers.withMessage('The duration must be a number', numeric)
+        },
+        contentUrl: {
+            required: helpers.withMessage('The content url is required', required),
+            maxLength: helpers.withMessage('The content url must be less than 256 characters', maxLength(256))
+        },
+        contentLength: {
+            required: helpers.withMessage('The content length is required', required),
+            numeric: helpers.withMessage('The content length must be a number', numeric)
+        },
+        contentType: {
+            required: helpers.withMessage('The content type is required', required),
+            maxLength: helpers.withMessage('The content type must be less than 64 characters', maxLength(64)),
+            alphaNumeric: helpers.withMessage('The content type must be in MIME format', alphaNumSlash)
+        }
+    }
+
+    const getValidator = <T extends PodcastEntity>(buffer: MaybeRef<T>) => {
+        const v$ = useVuelidate(rules, buffer, { $lazy: true, $autoDirty: true });
+        const { validate } = useVuelidateWrapper(v$);
+
+        return { v$, validate, reset: v$.value.$reset };
+    }
+
+    const setEnclosureContent = (enclosure: EnclosureEntity, content: ContentMeta, url: string) => {
+        enclosure.fileId = content.id;
+        enclosure.contentLength = content.length
+        enclosure.contentType = content.content_type;
+        enclosure.contentUrl = url;
+    }
+
+    const exportProperties = (podcast: PodcastEntity) : FeedProperty[] => {
+        return [
+            { 
+                name: 'episodeType', 
+                namespace: 'itunes',
+                value: podcast.episodeType
+            },
+            {
+                name: 'duration',
+                namespace: 'itunes',
+                value: podcast.duration?.toString()
+            },
+            //Setup the enclosure
+            {
+                name:"enclosure",
+                attributes:{
+                    url: podcast.contentUrl,
+                    length: podcast.contentLength?.toString(),
+                    type: podcast.contentType
+                },
+            }
+        ]
+    } 
+
+    return {
+        schema,
+        rules,
+        getValidator,
+        setEnclosureContent,
+        exportProperties
+    };
+}
+
diff --git a/front-end/src/views/Blog/form-helpers/channels.ts b/front-end/src/views/Blog/form-helpers/channels.ts
new file mode 100644
index 0000000..cd33a20
--- /dev/null
+++ b/front-end/src/views/Blog/form-helpers/channels.ts
@@ -0,0 +1,227 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { MaybeRef, computed, watch, Ref } from 'vue'
+import { helpers, required, maxLength, numeric } from "@vuelidate/validators"
+import { useVuelidateWrapper } from '@vnuge/vnlib.browser';
+import { BlogChannel, ChannelFeed } from '@vnuge/cmnext-admin';
+import useVuelidate from "@vuelidate/core"
+
+export const getChannelForm = (editMode?: Ref<boolean>) => {
+    const channelSchema = computed(() => {
+        return {
+            fields: [
+                {
+                    id: 'channel-name',
+                    type: 'text',
+                    label: 'Channel Name',
+                    name: 'name',
+                    placeholder: 'Enter the name of the channel',
+                    description: 'A simple human readable name for the channel'
+                },
+                {
+                    id: 'channel-path',
+                    type: 'text',
+                    label: 'Root Path',
+                    name: 'path',
+                    placeholder: 'Enter the root path to the channel',
+                    description: editMode?.value ? 'You may not edit the channel directory' : 'The path in your bucket to the working directory for the channel',
+                    disabled: editMode?.value
+                },
+                {
+                    id: 'channel-index',
+                    type: 'text',
+                    label: 'Index File',
+                    name: 'index',
+                    placeholder: 'Enter the index file for the channel',
+                    description: editMode?.value ?
+                        'You may not edit the index file path'
+                        : 'The name or path of the post index file, stored under the root directory of the channel',
+                    disabled: editMode?.value
+                },
+                {
+                    id: 'channel-content-dir',
+                    type: 'text',
+                    label: 'Content Directory',
+                    name: 'content',
+                    placeholder: 'Enter the content directory for the channel',
+                    description: editMode?.value ?
+                        'You may not edit the content directory path'
+                        : 'The name or path of the content directory, stored under the root directory of the channel',
+                    disabled: editMode?.value
+                },
+                {
+                    id: 'index-file-example',
+                    type: 'text',
+                    label: 'Index Path',
+                    name: 'example',
+                    placeholder: 'Your index file path',
+                    description: 'This is the location within your bucket where the index file will be stored',
+                    disabled: true,
+                }
+            ]
+        }
+    });
+
+    const feedSchema = {
+        fields: [
+            {
+                id: 'channel-feed-url',
+                type: 'text',
+                label: 'Publish Url',
+                name: 'url',
+                placeholder: 'Enter the feed url for the channel',
+                description: 'The rss syndication url for your blog channel, the http url your blog resides at.'
+            },
+            {
+                id: 'channel-feed-path',
+                type: 'text',
+                label: 'Feed File',
+                name: 'path',
+                placeholder: 'feed.xml',
+                description: 'The path to the feed xml file within the channel directory'
+            },
+            {
+                id: 'channel-feed-image',
+                type: 'text',
+                label: 'Image Url',
+                name: 'image',
+                placeholder: 'Enter the url for the default feed image',
+                description: 'The full http url to the default feed image'
+            },
+            {
+                id: 'channel-feed-author',
+                type: 'text',
+                label: 'Feed Author',
+                name: 'author',
+                placeholder: 'Your name',
+                description: 'The author name for the feed'
+            },
+            {
+                id: 'channel-feed-contact',
+                type: 'text',
+                label: 'Feed Contact',
+                name: 'contact',
+                placeholder: 'Your contact email address',
+                description: 'The webmaster contact email address'
+            },
+            {
+                id: 'channel-feed-max-items',
+                type: 'number',
+                label: 'Feed Max Items',
+                name: 'maxItems',
+                placeholder: 'Enter the feed max items for the channel',
+                description: 'The maximum number of posts to publish in the feed'
+            },
+            {
+                id: 'channel-feed-description',
+                type: 'textarea',
+                label: 'Feed Description',
+                name: 'description',
+                placeholder: 'Enter the feed description for the channel',
+            }
+        ]
+    }
+
+    const alphaNumSpace = helpers.regex(/^[a-zA-Z0-9 ]*$/);
+    const httpUrl = helpers.regex(/^(http|https):\/\/[^ "]+$/);
+
+    const channelRules = {
+        name: {
+            required: helpers.withMessage('Channel name is required', required),
+            maxlength: helpers.withMessage('Channel name must be less than 50 characters', maxLength(50)),
+            alphaNumSpace: helpers.withMessage('Channel name must be alphanumeric', alphaNumSpace),
+        },
+        path: {
+            required: helpers.withMessage('Channel path is required', required),
+            maxlength: helpers.withMessage('Channel path must be less than 50 characters', maxLength(50)),
+        },
+        index: {
+            required: helpers.withMessage('Channel index is required', required),
+            maxlength: helpers.withMessage('Channel index must be less than 50 characters', maxLength(50)),
+        },
+        content: {
+            required: helpers.withMessage('Channel content directory is required', required),
+            maxlength: helpers.withMessage('Channel content directory must be less than 50 characters', maxLength(50)),
+        },
+        example: {}
+    }
+
+    const feedRules = {
+        url: {
+            required: helpers.withMessage('Channel feed url is required', required),
+            maxlength: helpers.withMessage('Channel feed url must be less than 100 characters', maxLength(100)),
+            url: helpers.withMessage('Channel feed url must be a valid url', httpUrl),
+        },
+        path: {
+            required: helpers.withMessage('Channel feed path is required', required),
+            maxlength: helpers.withMessage('Channel feed path must be less than 50 characters', maxLength(50)),
+        },
+        image: {
+            maxlength: helpers.withMessage('Channel feed image must be less than 200 characters', maxLength(200)),
+        },
+        contact: {
+            maxlength: helpers.withMessage('Channel feed contact must be less than 50 characters', maxLength(50)),
+        },
+        description: {
+            alphaNumSpace: helpers.withMessage('Channel feed description must be alphanumeric', alphaNumSpace),
+            maxlength: helpers.withMessage('Channel feed description must be less than 50 characters', maxLength(200)),
+        },
+        maxItems: {
+            numeric: helpers.withMessage('Channel feed max items must be a number', numeric),
+        },
+        author: {
+            alphaNumSpace: helpers.withMessage('Channel feed author must be alphanumeric', alphaNumSpace),
+            maxlength: helpers.withMessage('Channel feed author must be less than 50 characters', maxLength(50)),
+        }
+    }
+
+    const getChannelValidator = <T extends BlogChannel>(buffer: MaybeRef<T | undefined>) => {
+
+        const v$ = useVuelidate(channelRules, buffer, { $lazy: true, $autoDirty: true });
+
+        const updateExample = () => {
+            if (!v$.value.path.$model || !v$.value.index.$model) {
+                v$.value.example.$model = '';
+                return;
+            }
+            //Update the example path
+            v$.value.example.$model = `${v$.value.path.$model}/${v$.value.index.$model}`;
+        }
+
+        watch(v$, updateExample);
+
+        updateExample();
+
+        const { validate } = useVuelidateWrapper(v$);
+        return { v$, validate, reset: v$.value.$reset };
+    }
+
+    const getFeedValidator = <T extends ChannelFeed>(buffer: MaybeRef<T | undefined>) => {
+        const v$ = useVuelidate(feedRules, buffer, { $lazy: true, $autoDirty: true });
+        const { validate } = useVuelidateWrapper(v$);
+        return { v$, validate, reset: v$.value.$reset };
+    }
+
+    return {
+        channelSchema,
+        feedSchema,
+        channelRules,
+        feedRules,
+        getChannelValidator,
+        getFeedValidator
+    };
+}
+
diff --git a/front-end/src/views/Blog/form-helpers/index.ts b/front-end/src/views/Blog/form-helpers/index.ts
new file mode 100644
index 0000000..d3df0f7
--- /dev/null
+++ b/front-end/src/views/Blog/form-helpers/index.ts
@@ -0,0 +1,17 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+export * from './channels'
+export * from './posts'
\ No newline at end of file
diff --git a/front-end/src/views/Blog/form-helpers/posts.ts b/front-end/src/views/Blog/form-helpers/posts.ts
new file mode 100644
index 0000000..da805e7
--- /dev/null
+++ b/front-end/src/views/Blog/form-helpers/posts.ts
@@ -0,0 +1,116 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { MaybeRef, computed } from "vue";
+import { useVuelidateWrapper } from "@vnuge/vnlib.browser"
+import { PostMeta } from '@vnuge/cmnext-admin'
+import { helpers, required, maxLength } from "@vuelidate/validators"
+import useVuelidate from "@vuelidate/core"
+
+export const getPostForm = () => {
+
+    const schema = computed(() => {
+        return {
+            fields: [
+                {
+                    id: 'post-title',
+                    type: 'text',
+                    label: 'Post Title',
+                    name: 'title',
+                    placeholder: 'Enter the title of the post',
+                    description: 'A simple human readable title for the post'
+                },
+                {
+                    id: 'post-author',
+                    type: 'text',
+                    label: 'Post Author',
+                    name: 'author',
+                    placeholder: 'Enter the author of the post',
+                    description: 'The author of the post'
+                },
+                {
+                    id: 'post-tags',
+                    type: 'text',
+                    label: 'Post Tags',
+                    name: 'tags',
+                    placeholder: 'Enter the tags for the post',
+                    description: 'A comma separated list of tags for the post'
+                },
+                {
+                    id: 'post-image',
+                    type: 'text',
+                    label: 'Post Image',
+                    name: 'image',
+                    placeholder: 'Enter the image url for the post',
+                    description: 'The full http url to the post image'
+                },
+                {
+                    id: 'post-summary',
+                    type: 'textarea',
+                    label: 'Post Summary',
+                    name: 'summary',
+                    placeholder: 'Enter the summary of the post',
+                    description: 'A short summary of the post, also the description for the rss feed'
+                },
+                {
+                    id: 'existing-post-id',
+                    type: 'text',
+                    label: 'Post Id',
+                    name: 'id',
+                    placeholder: '',
+                    description: 'The id of the post, this cannot be changed',
+                    disabled: true,
+                }
+            ]
+        }
+    });
+
+    const alphaNumSpace = helpers.regex(/^[a-zA-Z0-9 ]*$/);
+    const httpUrl = helpers.regex(/^(http|https):\/\/[^ "]+$/);
+
+    const rules = {
+        title: {
+            required: helpers.withMessage('Post title is required', required),
+            maxlength: helpers.withMessage('Post title must be less than 50 characters', maxLength(50)),
+            alphaNumSpace: helpers.withMessage('Post title must be alphanumeric', alphaNumSpace),
+        },
+        summary: {
+            required: helpers.withMessage('Post summary is required', required),
+            maxlength: helpers.withMessage('Post summary must be less than 50 characters', maxLength(200)),
+        },
+        author: {
+            required: helpers.withMessage('Post author is required', required),
+            maxlength: helpers.withMessage('Post author must be less than 50 characters', maxLength(50)),
+        },
+        tags: {},
+        image: {
+            maxlength: helpers.withMessage('Post image must be less than 200 characters', maxLength(200)),
+            httpUrl: helpers.withMessage('Post image must be a valid http url', httpUrl),
+        },
+        content: {
+            required: helpers.withMessage('Post content is required', required),
+            maxLength: maxLength(50000),
+        },
+        id: {}
+    }
+
+    const getValidator = <T extends PostMeta>(buffer: MaybeRef<T | undefined>) => {
+        const v$ = useVuelidate(rules, buffer, { $lazy: true, $autoDirty: true });
+        const { validate } = useVuelidateWrapper(v$);
+        return { v$, validate, reset: v$.value.$reset };
+    }
+
+    return { schema, rules, getValidator };
+}
\ No newline at end of file
diff --git a/front-end/src/views/Blog/index.vue b/front-end/src/views/Blog/index.vue
new file mode 100644
index 0000000..6bfcb6e
--- /dev/null
+++ b/front-end/src/views/Blog/index.vue
@@ -0,0 +1,324 @@
+<template>
+    <div class="container mx-auto mt-10 mb-[10rem]">
+        <div id="blog-admin-template" class="">
+            
+           <TabGroup vertical :selected-index="tabId" @change="onTabChange">
+                <div class="menu">
+                    <TabList>
+                        <div class="inline-flex items-center justify-center w-16 h-16">
+                            <span class="username-box">
+                                {{ firstLetter }}
+                            </span>
+                        </div>
+
+                        <div class="border-t border-gray-100 dark:border-dark-500">
+                            <div class="px-2">
+                                
+                                 <Tab v-slot="{ selected }" as="div" class="py-4">
+                                    <div class="t group menu-item" :class="{'active':selected}">
+                                        
+                                        <fa-icon icon="bullhorn" size="lg" />
+
+                                        <span class="opacity-0 tooltip group-hover:opacity-100">
+                                            Channel
+                                        </span>
+                                    </div>
+                                </Tab>
+
+                                 <ul class="flex flex-col pt-4 space-y-1 border-t border-gray-100 dark:border-dark-500">
+                                    <Tab v-slot="{ selected }" as="li">
+                                        <div class="group menu-item" :class="{'active':selected}">
+                                            
+                                            <fa-icon icon="comment" size="xl" />
+
+                                            <span class="opacity-0 tooltip group-hover:opacity-100">
+                                                Posts
+                                            </span>
+                                        </div>
+                                    </Tab>
+                                    <Tab v-slot="{ selected }" as="li">
+                                         <div class="group menu-item" :class="{'active':selected}">
+                                            
+                                            <fa-icon icon="folder-open" size="lg" />
+
+                                            <span class="opacity-0 tooltip group-hover:opacity-100">
+                                                Content
+                                            </span>
+                                        </div>
+                                    </Tab>
+                                   
+                                 </ul>
+                            </div>
+                        </div>
+                    </TabList>
+                </div>
+                
+                <TabPanels class="tab-container">
+                    <div class="flex flex-row h-12 px-4 pb-2">
+                        
+                        <div class="inline-flex flex-row gap-3">
+                            <div class="my-auto">
+                                <fa-icon icon="bullhorn"  />
+                            </div>
+                            
+                            <select id="channel-select" class="" v-model="channel">
+                                <option value="">Select Channel</option>
+                                <option v-for="c in channels.items.value" :value="c.id">
+                                    {{ c.name }}
+                                </option>
+                            </select>
+                        </div>
+                        
+                        <div class="flex flex-row w-full max-w-md gap-4 ml-auto mr-4 filter">
+                            <div class="my-auto">Filter</div>
+                            <input class="w-full rounded input primary" v-model="search"/>
+                        </div>
+                        
+                        <div class="flex flex-row py-2 mr-auto">
+                            <Switch v-model="lastModified"
+                                :class="lastModified ? 'bg-primary-500' : 'bg-gray-300 dark:bg-dark-500'"
+                                class="relative inline-flex items-center w-10 h-5 my-auto duration-75 rounded-full">
+                                <span class="sr-only">Last modified</span>
+                                <span :class="lastModified ? 'translate-x-6' : 'translate-x-1'"
+                                    class="inline-block w-3 h-3 transition transform bg-white rounded-full" />
+                            </Switch>
+                            <div class="my-auto ml-3">
+                                Last Modifed
+                            </div>
+                        
+                        </div>
+                    </div>
+
+                    <TabPanel>
+                        <Channels :blog="blogState" />
+                    </TabPanel>
+                    
+                    <TabPanel>
+                       <Posts :blog="blogState" />
+                    </TabPanel>
+                    
+                    <TabPanel>
+                        <Content :blog="blogState" />
+                    </TabPanel>
+                
+                </TabPanels>
+           </TabGroup>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useScriptTag } from '@vueuse/core';
+import { useRouteQuery } from '@vueuse/router';
+import { TabGroup, TabList, Tab, TabPanels, TabPanel, Switch } from '@headlessui/vue'
+import { first } from 'lodash';
+import { usePageGuard, useUser, useTitle } from '@vnuge/vnlib.browser';
+import { createBlogContext, useComputedChannels, useComputedPosts, useComputedContent, SortType } from '@vnuge/cmnext-admin';
+import { BlogState } from './blog-api';
+import Channels from './components/Channels.vue';
+import Posts from './components/Posts.vue';
+import Content from './components/Content.vue';
+
+//Protect page
+usePageGuard();
+useTitle('CMNext Admin')
+
+//Load scripts
+const ckEditorTag = useScriptTag("https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js")
+//Store the wait result on the window for the editor script to wait
+window.editorLoadResult = ckEditorTag.load(true);
+
+const { userName, getProfile } = useUser()
+
+//Load user profile and forget if not set
+if(!userName.value){
+    getProfile()
+}
+
+const firstLetter = computed(() => first(userName.value))
+
+const tabIdQ = useRouteQuery<string>('tabid', '', { mode: 'push' })
+
+const context = createBlogContext({
+    channelUrl: '/blog/channels',
+    postUrl: '/blog/posts',
+    contentUrl: '/blog/content'
+})
+
+const { search, sort, channel } = context.getQuery();
+
+const channels = useComputedChannels(context)
+const posts = useComputedPosts(context)
+const content = useComputedContent(context)
+
+const blogState = { channels, posts, content } as BlogState
+
+//Map queries to their respective computed values
+const tabId = computed(() => tabIdQ.value ? parseInt(tabIdQ.value) : 0);
+const lastModified = computed({
+    get :() => sort.value === SortType.ModifiedTime,
+    set: (value:boolean) => {
+        sort.value = value ? SortType.ModifiedTime : SortType.CreatedTime
+    }
+})
+
+const onTabChange = (id:number) => tabIdQ.value = id.toString(10)
+
+</script>
+
+<style lang="scss">
+
+#blog-admin-template{
+    @apply flex flex-row flex-auto min-h-[50rem] border rounded-sm max-w-[82rem] mx-auto;
+    @apply dark:border-dark-600 dark:text-gray-300 border-gray-200;
+
+    .username-box{
+        @apply grid w-10 h-10 text-sm rounded-lg place-content-center;
+        @apply text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-dark-600;
+    }
+
+    .menu-item{
+        @apply relative flex justify-center rounded px-2 py-2 cursor-pointer;
+        @apply text-gray-500 hover:bg-gray-50 hover:text-gray-700 dark:hover:bg-dark-700 dark:hover:text-gray-300;
+
+        &.active{
+            @apply text-primary-600;
+        }
+
+        .tooltip{
+            @apply absolute start-full -translate-y-1/2 top-1/2 ms-4 rounded  px-2 py-1.5 text-xs font-medium;
+            @apply text-white bg-gray-900 dark:bg-dark-600;
+        }
+    }
+   
+    .menu{
+        @apply flex flex-col justify-between w-16 border-e;
+        @apply bg-white dark:bg-dark-800 dark:border-dark-500;
+    }
+   
+    #channel-select{
+        @apply w-full p-1 px-2 border rounded-sm sm:text-sm min-w-[13rem];
+        @apply border-gray-300 text-gray-700 bg-white;
+        @apply dark:bg-dark-800 dark:border-dark-500 focus:dark:border-dark-400 hover:dark:border-dark-400 dark:text-inherit; 
+
+        option{
+            @apply text-base;
+        }
+    }
+
+    .tab-container{
+        @apply flex-1 py-4 rounded-r-sm dark:bg-dark-800 bg-white text-gray-700 dark:text-inherit;
+    }
+
+    // Rules for dynamic forms in edit panes
+    .dynamic-form.form{
+        @apply w-full mt-4 md:px-12;
+
+        .dynamic-form.input-group{
+            @apply grid grid-flow-row grid-cols-2;
+        }
+
+        .dynamic-form.input-group{
+            @apply gap-x-16;
+
+            .dynamic-form.input-container{
+                
+                .dynamic-form.dynamic-input{
+                    @apply border rounded-sm p-2 bg-transparent w-full dark:border-dark-600;
+                    @apply dark:bg-dark-800 focus:border-primary-500;
+
+                    &.input-textarea{
+                        @apply h-40 outline-none;
+                    }
+
+                    &::placeholder{
+                        @apply dark:text-gray-500;
+                    }
+                    
+                    &:disabled{
+                        @apply text-rose-400 border-transparent;
+                    }
+                }
+
+                &.dirty.data-invalid .dynamic-form.dynamic-input{
+                    @apply border-red-500 focus:border-red-500;
+                }
+
+                .dynamic-form.field-description{
+                    @apply pt-1 p-2 pb-4 text-sm;
+                }
+
+            }
+
+            .dynamic-form.input-label{
+                @apply col-span-2 text-right m-auto mr-2;
+            }
+        }
+    }
+
+    table.edit-table {
+        @apply w-full divide-y-2 divide-gray-200 bg-white text-sm dark:divide-dark-500 dark:bg-dark-800;
+        
+        thead{
+            @apply text-left text-lg;
+        }
+
+        tbody{
+            @apply divide-y divide-gray-200 dark:divide-dark-500; 
+        }
+
+        thead th,
+        tr td{
+            @apply whitespace-nowrap px-4 py-2 font-medium;
+        }
+    }
+
+    .ck.ck-editor{
+        @apply border dark:border-coolGray-600;
+    }
+
+    .ck-editor .ck-content,
+    .ck-editor .ck-source-editing-area{
+        @apply min-h-[32rem] resize-y dark:bg-dark-800;
+
+        a {
+            @apply text-blue-500;
+        }
+
+        p{
+            @apply my-2;
+        }
+
+        pre{
+            @apply p-2 dark:text-gray-200;
+        }
+
+        h1, h2{
+            @apply border-b pb-3 mb-4;
+        }
+    }
+
+    .ck-source-editing-area textarea{
+        @apply dark:bg-transparent;
+    }
+
+    .ck.ck-toolbar,
+    .ck.ck-reset
+    {
+        @apply dark:bg-dark-800 dark:text-gray-300;
+
+        .ck-button,
+        .ck-dropdown
+        {
+            @apply dark:text-gray-300;
+
+            &:hover,
+            &.ck-on
+            {
+                @apply dark:bg-dark-600;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Login/components/Social.vue b/front-end/src/views/Login/components/Social.vue
new file mode 100644
index 0000000..34c5a1e
--- /dev/null
+++ b/front-end/src/views/Login/components/Social.vue
@@ -0,0 +1,57 @@
+<template>
+  
+    <form class="w-full" @submit.prevent="SocalLogin('/login/social/github')">
+        <button type="submit" class="btn social-button" :disabled="waiting">
+            <fa-icon :icon="['fab','github']" size="xl" />
+            Login with Github
+        </button>
+    </form>
+
+    <form class="mt-4" @submit.prevent="SocalLogin('/login/social/discord')">
+        <button type="submit" class="btn social-button" :disabled="waiting">
+            <fa-icon :icon="['fab','discord']" size="xl" />
+            Login with Discord
+        </button>
+    </form>
+
+    <form v-if="auth0Enabled" class="mt-4" @submit.prevent="SocalLogin('/login/social/auth0')">
+        <button type="submit" class="btn social-button" :disabled="waiting">
+            <fa-icon :icon="['fa','key']" size="xl" />
+            Login with Auth0
+        </button>
+    </form>
+
+</template>
+
+<script setup lang="ts">
+import { apiCall,  useWait, useSession, useSessionUtils, WebMessage } from '@vnuge/vnlib.browser'
+
+//auth0 enabled flag from env
+const auth0Enabled = import.meta.env.VITE_ENABLE_AUTH0 == 'true';
+
+const { waiting } = useWait()
+const { browserId, publicKey } = useSession()
+const { KeyStore } = useSessionUtils()
+
+const SocalLogin = async (url:string) => {
+  await apiCall(async ({ axios }) => {
+    const { data } = await axios.put<WebMessage<string>>(url, {
+      browser_id: browserId.value,
+      public_key: publicKey.value
+    })
+   
+    const encDat = data.getResultOrThrow()
+    // Decrypt the result which should be a redirect url
+    const result = await KeyStore.decryptDataAsync(encDat)
+    // get utf8 text
+    const text = new TextDecoder('utf-8').decode(result)
+    // Recover url
+    const redirect = new URL(text)
+    // Force https
+    redirect.protocol = 'https:'
+    // redirect to the url
+    window.location.href = redirect.href
+  })
+}
+
+</script>
\ No newline at end of file
diff --git a/front-end/src/views/Login/components/Totp.vue b/front-end/src/views/Login/components/Totp.vue
new file mode 100644
index 0000000..50a5be3
--- /dev/null
+++ b/front-end/src/views/Login/components/Totp.vue
@@ -0,0 +1,65 @@
+<template>
+    <div id="totp-login-form">
+        <h5>Enter your TOTP code</h5>
+        <div class="flex flex-col h-32">
+            <div class="h-8 mx-auto">
+                <fa-icon v-if="waiting" class="animate-spin" size="xl" icon="spinner"/>
+            </div>
+            <div class="mx-auto mt-4">
+                <VOtpInput
+                    class="otp-input"
+                    input-type="letter-numeric"
+                    :is-disabled="waiting"
+                    separator=""
+                    input-classes="primary input rounded"
+                    :num-inputs="6"
+                    value=""
+                    @on-change="onInput"
+                    @on-complete="SubimitTotp"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useMessage, useWait } from '@vnuge/vnlib.browser';
+import { toSafeInteger } from 'lodash';
+import VOtpInput from "vue3-otp-input";
+
+const emit = defineEmits(['submit'])
+
+const { waiting } = useWait();
+const { onInput } = useMessage();
+
+const SubimitTotp = async (code : string) => {
+    
+    //If a request is still pending, do nothing
+    if (waiting.value) {
+        return
+    }
+
+    //Submit a mfa upgrade result
+    emit('submit', {
+        code: toSafeInteger(code)
+    })
+}
+
+
+</script>
+
+<style lang="scss">
+
+#totp-login-form {
+   .otp-input {
+        @apply rounded-sm gap-2;
+
+        input {
+            @apply w-12 h-12 p-3 text-center text-2xl;
+            appearance: none;
+            -webkit-appearance: none;
+        }
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/Login/components/UserPass.vue b/front-end/src/views/Login/components/UserPass.vue
new file mode 100644
index 0000000..e218cb8
--- /dev/null
+++ b/front-end/src/views/Login/components/UserPass.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="">
+        <h3>Login</h3>
+        <form id="user-pass-submit-form" method="post" action="/login" @submit.prevent="SubmitLogin">
+            <fieldset class="" :disabled="waiting" >
+                <div>
+                    <div class="float-label">
+                        <input
+                            id="username"
+                            v-model="v$.username.$model"
+                            type="email"
+                            class="w-full primary input"
+                            placeholder="Email"
+                            :class="{ 'data-invalid': v$.username.$invalid }"
+                            @input="onInput"
+                        >
+                        <label for="username">Email</label>
+                    </div>
+                </div>
+                 <div class="py-3">
+                    <div class="mb-2 float-label">
+                        <input
+                            id="password"
+                            v-model="v$.password.$model"
+                            type="password"
+                            class="w-full primary input"
+                            placeholder="Password"
+                            :class="{ 'data-invalid': v$.password.$invalid }"
+                            @input="onInput"
+                        >
+                        <label for="password">Password</label>
+                    </div>
+                </div>
+            </fieldset>
+            <button type="submit" form="user-pass-submit-form" class="btn primary" :disabled="waiting">
+                <!-- Display spinner if waiting, otherwise the sign-in icon -->
+                <fa-icon :class="{'animate-spin':waiting}" :icon="waiting ? 'spinner' : 'sign-in-alt'"/>
+                Log-in
+            </button>
+        </form>
+         <div class="flex flex-row justify-between gap-3 pt-3 pb-2 form-links">
+            <router-link to="/pwreset">
+              Forgot password
+            </router-link>
+            <router-link to="/register">
+              Register a new account
+            </router-link>
+          </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import useVuelidate from '@vuelidate/core'
+import { required, maxLength, minLength, email, helpers } from '@vuelidate/validators'
+import { useMessage, useVuelidateWrapper, useWait } from '@vnuge/vnlib.browser'
+
+const emit = defineEmits(['login'])
+
+const { onInput } = useMessage();
+const { waiting } = useWait();
+
+const vState = reactive({ username: '', password: '' })
+
+const rules = {
+    username: {
+        required: helpers.withMessage('Email cannot be empty', required),
+        email: helpers.withMessage('Your email address is not valid', email),
+        maxLength: helpers.withMessage('Email address must be less than 50 characters', maxLength(50))
+    },
+    password: {
+        required: helpers.withMessage('Password cannot be empty', required),
+        minLength: helpers.withMessage('Password must be at least 8 characters', minLength(8)),
+        maxLength: helpers.withMessage('Password must have less than 128 characters', maxLength(128))
+    }
+}
+
+const v$ = useVuelidate(rules, vState)
+const { validate } = useVuelidateWrapper(v$);
+
+const SubmitLogin = async () => {
+
+    // If the form is not valid set the error message
+    if (!await validate()) {
+        return
+    }
+
+    //Emit login and pass the username and password
+    emit('login', { username: v$.value.username.$model, password: v$.value.password.$model });
+}
+
+</script>
\ No newline at end of file
diff --git a/front-end/src/views/Login/index.vue b/front-end/src/views/Login/index.vue
new file mode 100644
index 0000000..f3a3f59
--- /dev/null
+++ b/front-end/src/views/Login/index.vue
@@ -0,0 +1,182 @@
+<template>
+  <div id="login-template" class="app-component-entry">
+    <div class="login-container">
+
+      <div v-if="showTotp">
+        <Totp @submit="totpSubmit" />
+      </div>
+
+      <div v-else-if="!loggedIn">
+        <UserPass @login="submitLogin" />
+      </div>
+
+      <div v-else>
+        <h3>Logout</h3>
+        <p class="mt-3 mb-5 text-lg">
+          You are currently logged-in.
+        </p>
+         <div class="">
+            <button form="user-pass-submit-form" class="btn primary" @click="submitLogout" :disabled="waiting">
+                <!-- Display spinner if waiting, otherwise the sign-in icon -->
+                <fa-icon :class="{'animate-spin':waiting}" :icon="waiting ? 'spinner' : 'sign-in-alt'"/>
+                Log-out
+            </button>
+         </div>
+      </div>
+
+      <div v-if="!(loggedIn || showTotp)" class="w-full mt-6">
+        
+        <Social />
+
+        <!-- pki button, forward to the pki route -->
+        <div v-if="pkiEnabled" class="mt-4">
+          <router-link to="/login/pki">
+            <button type="submit" class="btn red social-button" :disabled="waiting">
+              <fa-icon :icon="['fa','certificate']" size="xl" />
+              Login with PKI Credential
+            </button>
+          </router-link>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import Totp from './components/Totp.vue'
+import UserPass from './components/UserPass.vue'
+import Social from './components/Social.vue'
+import { apiCall, useMessage, useWait, useUser, useSession, useLastPage, useTitle, debugLog } from '@vnuge/vnlib.browser'
+import { useMfaLogin, totpMfaProcessor, IMfaFlowContinuiation, MfaMethod } from '@vnuge/vnlib.browser/dist/mfa'
+import { useTimeoutFn } from '@vueuse/shared'
+import { isNil } from 'lodash'
+
+useTitle('Login')
+
+//pki enabled flag from env
+const pkiEnabled = !isNil(import.meta.env.VITE_PKI_ENDPOINT);
+
+const { waiting } = useWait()
+const { setMessage } = useMessage()
+const { logout } = useUser();
+const { loggedIn } = useSession()
+
+//Setup mfa login
+const { login } = useMfaLogin([
+  totpMfaProcessor()
+])
+
+//If logged in re-route to the last page the user 
+//was on but delayed to the session has time to be set
+const { gotoLastPage } = useLastPage()
+useTimeoutFn(() => loggedIn.value ? gotoLastPage() : null, 500)
+
+const mfaUpgrade = ref<IMfaFlowContinuiation>();
+const mfaTimer = ref<{stop:() => void}>();
+const showTotp = computed(() => mfaUpgrade.value?.type === MfaMethod.TOTP)
+
+const submitLogout = async () => {
+  //Submit logout request
+  await apiCall(async ({ toaster }) => {
+    // Attempt to login
+    await logout()
+    // Push a new toast message
+    toaster.general.success({
+      id: 'logout-success',
+      title: 'Success',
+      text: 'You have been logged out',
+      duration: 5000
+    })
+  })
+}
+
+const submitLogin = async ({username, password} : { username: string, password:string }) => {
+  // Run login in an apicall wrapper
+  await apiCall(async ({ toaster }) => {
+    // Attempt to login
+    const response = await login(username, password)
+
+    debugLog('Mfa-login',response)
+
+    //Try to get response as a flow continuation
+    const mfa = response as IMfaFlowContinuiation
+
+    // Response is a totp upgrade request
+    if (mfa.type === MfaMethod.TOTP) {
+
+      //Store the upgrade message
+      mfaUpgrade.value = mfa;
+
+      // Set timeout to reset the form when totp expires
+      mfaTimer.value = useTimeoutFn(() => {
+
+        //Clear upgrade message
+        mfaUpgrade.value = undefined;
+        
+        setMessage('Your TOTP request has expired')
+
+      }, mfa.expires! * 1000)
+    }
+    //If login without mfa was successful
+    else if (response.success) {
+        // Push a new toast message
+        toaster.general.success({
+          title: 'Success',
+          text: 'You have been logged in',
+        })
+
+        return;
+      }
+  })
+}
+
+const totpSubmit = ({ code } : {code:number}) =>{
+    apiCall(async ({ toaster }) =>{
+
+        if (!mfaUpgrade.value)
+            return;
+
+        //Submit totp code
+        const res = await mfaUpgrade.value.submit({ code })
+        res.getResultOrThrow()
+
+         //Clear timer
+        mfaTimer.value?.stop()
+
+        //Clear upgrade message
+        mfaUpgrade.value = undefined;
+
+        // Push a new toast message
+        toaster.general.success({
+            title: 'Success',
+            text: 'You have been logged in',
+        })
+    })
+}
+
+</script>
+
+<style lang="scss">
+#login-template {
+  .login-container{
+      @apply container max-w-sm w-full sm:mt-2 mt-8 mb-16 mx-auto lg:mt-16 px-6 py-4 flex flex-col;
+      @apply ease-linear duration-150 text-center;
+      @apply rounded-sm sm:bg-white sm:border shadow-sm border-gray-200 sm:dark:bg-dark-800 dark:border-dark-500;
+  }
+
+  .login-container button{
+    @apply w-full border py-2.5;
+  }
+
+  button.social-button {
+    @apply flex flex-row justify-center gap-3 items-center;
+  }
+
+  a {
+    @apply ease-in-out duration-100;
+    @apply hover:text-primary-600 dark:hover:text-primary-500;
+  }
+}
+</style>
diff --git a/front-end/src/views/Login/pki/index.vue b/front-end/src/views/Login/pki/index.vue
new file mode 100644
index 0000000..ae1a4a8
--- /dev/null
+++ b/front-end/src/views/Login/pki/index.vue
@@ -0,0 +1,80 @@
+<template>
+    <div id="pki-login-template" class="app-component-entry">
+        <div class="container max-w-lg mx-auto mt-6 lg:mt-20">
+            <div class="p-2 text-center bg-white border rounded shadow-md dark:border-dark-500 dark:bg-dark-800">
+                
+                <h4>Enter your PKI-OTP</h4>
+
+                <div class="p-3">
+                    <div class="">
+                        <textarea v-model="otp" class="w-full p-1 border rounded-sm input primary" rows="5"></textarea>
+                    </div>
+
+                    <div class="flex justify-between mt-4">
+                        <div class="text-sm">
+                            <a class="link" target="_blank" href="https://github.com/VnUgE/Plugins.Essentials/tree/master/plugins/VNLib.Plugins.Essentials.Accounts">
+                                Goto OTP spec
+                                <fa-icon icon="arrow-right" class="ml-1" />
+                            </a>
+                        </div>
+                        <div class="button-group">
+                            <RouterLink to="/login">
+                                <button class="btn">Back</button>
+                            </RouterLink>
+                            <button class="btn primary" @click.prevent="submit">Login</button>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from 'lodash';
+import { apiCall, debugLog, useUser, useMessage } from '@vnuge/vnlib.browser';
+import { ITokenResponse } from '@vnuge/vnlib.browser/dist/session';
+import { ref } from 'vue'
+import { decodeJwt } from 'jose'
+import { useRouter } from 'vue-router';
+
+const otp = ref('')
+
+const pkiEndpoint = import.meta.env.VITE_PKI_ENDPOINT
+
+const { prepareLogin } = useUser()
+const { setMessage } = useMessage()
+const { push } = useRouter()
+
+const submit = () =>{
+
+    apiCall(async ({ axios }) =>{
+        if(isEmpty(otp.value)){
+            setMessage('Please enter your OTP')
+            return
+        }
+
+        //try to decode the jwt to confirm its form is valid
+        const jwt = decodeJwt(otp.value)
+        debugLog(jwt)
+
+        //Prepare a login message
+        const loginMessage = prepareLogin()
+
+        //Set the 'login' field to the otp
+        loginMessage.login = otp.value
+
+        const { data }  = await axios.post<ITokenResponse>(pkiEndpoint, loginMessage)
+
+        data.getResultOrThrow()
+
+        //Finalize the login
+        await loginMessage.finalize(data);
+
+        //Go back to login page
+        push({ name: 'Login' })
+    })
+}
+
+</script>
\ No newline at end of file
diff --git a/front-end/src/views/Login/social/[type].vue b/front-end/src/views/Login/social/[type].vue
new file mode 100644
index 0000000..5a803bd
--- /dev/null
+++ b/front-end/src/views/Login/social/[type].vue
@@ -0,0 +1,127 @@
+<template>
+  <div id="social-login-template" class="app-component-entry">
+    <div class="container flex flex-col m-auto my-16">
+      <div id="social-final-template" class="flex justify-center">
+        <div class="entry-container">
+          <h3>Finalizing login</h3>
+          <div class="mt-6 mb-4">
+            <div v-if="message?.length > 0" class="text-lg text-red-500 dark:text-rose-500">
+              <p>{{ message }}</p>
+              <div class="flex justify-center mt-5">
+                <router-link to="/login">
+                  <button type="submit" class="btn primary" :disabled="waiting">
+                    <fa-icon icon="sign-in-alt" />
+                    Try again
+                  </button>
+                </router-link>
+              </div>
+            </div>
+            <div v-else>
+              <div class="flex justify-center">
+                <div class="m-auto">
+                  <fa-icon class="animate-spin" icon="spinner" size="2x"/>
+                </div>
+              </div>
+              <p>Please wait while we log you in.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isEqual } from 'lodash'
+import { useRouteParams, useRouteQuery } from '@vueuse/router'
+import { useSession, useWait, useUser, useTitle, configureApiCall } from '@vnuge/vnlib.browser'
+import { useRouter } from 'vue-router';
+import { ref } from 'vue'
+
+useTitle('Social Login')
+
+const { loggedIn } = useSession()
+const { prepareLogin } = useUser()
+const { waiting } = useWait()
+
+const type = useRouteParams('type')
+const result = useRouteQuery('result', '');
+const nonce = useRouteQuery('nonce', '');
+const router = useRouter()
+
+const message = ref('')
+
+//Override the message handler to capture the error message and display it
+const { apiCall } = configureApiCall(m => message.value = m)
+
+//If logged-in redirect to login page
+if (loggedIn.value) {
+  router.push({ name: 'Login' })
+}
+
+
+const run = async () => {
+  if (isEqual(result.value, 'authorized')) {
+
+    let loginUrl : string = ''
+
+    switch (type.value) {
+      case 'github':
+        loginUrl = '/login/social/github';
+        break;
+      case 'discord':
+        loginUrl = '/login/social/discord';
+        break;
+      case 'auth0':
+        loginUrl = '/login/social/auth0';
+        break;
+      default:
+        router.push('/login')
+        break;
+    }
+
+    // If nonce is set, then we can proceed with finalization
+    await apiCall(async ({ axios }) => {
+      const preppedLogin = prepareLogin()
+      // Send the login request
+      const response = await axios.post(loginUrl, { nonce: nonce.value })
+      if (response.data.success === true) {
+        // Finalize the login
+        await preppedLogin.finalize(response)
+        // If the login was successful, then we can redirect to the login page
+        router.push({ name: 'Login' })
+        return
+      }
+      // Otherwise, we can show an error
+      throw { response }
+    })
+  } else {
+    switch (result.value) {
+      case 'invalid':
+        message.value = 'The request was invalid, and you could not be logged in. Please try again.'
+        break
+      case 'expired':
+        message.value = 'The request has expired. Please try again.'
+        break
+      default:
+        message.value = 'There was an error processing the request. Please try again.'
+        break
+    }
+  }
+}
+
+//Run without awaiting
+run()
+
+</script>
+
+<style lang="scss">
+
+#social-login-template{
+  .entry-container{
+    @apply w-full max-w-[28rem] p-6 text-center sm:border rounded-sm sm:shadow-sm;
+    @apply sm:bg-white bg-transparent sm:dark:bg-dark-700 dark:border-dark-400;
+  }
+}
+
+</style>
diff --git a/front-end/src/views/Register/components/CompleteReg.vue b/front-end/src/views/Register/components/CompleteReg.vue
new file mode 100644
index 0000000..b8f8ef0
--- /dev/null
+++ b/front-end/src/views/Register/components/CompleteReg.vue
@@ -0,0 +1,116 @@
+<template>
+  <div id="reg-submit-template">
+    <form 
+      id="complete-registration"
+      method="POST"
+      action="#"
+      :disabled="waiting"
+      @submit.prevent="onSubmit"
+    >
+      <fieldset class="input-group">
+        <div class="input-container">
+          <label for="reg-password" class="pl-1">
+            Password
+          </label>
+          <input
+            id="reg-password"
+            v-model="v$.password.$model"
+            type="password"
+            class="input-field primary input"
+            @input="onInput"
+          >
+        </div>
+        <div class="input-container">
+          <label for="reg-repeat-pass" class="pl-1">
+            Repeat Password
+          </label>
+          <input
+            id="reg-repeat-pass"
+            v-model="v$.repeatPass.$model"
+            type="password"
+            class="input-field primary input"
+            @input="onInput"
+          >
+        </div>
+        <div class="flex flex-row justify-end gap-4 pt-4">
+          <button form="complete-registration" type="submit" class="btn primary">
+            Submit
+          </button>
+          <button class="text-red-500 cursor-pointer" @click.prevent="cancel">
+            Cancel
+          </button>
+        </div>
+      </fieldset>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { isEqual } from 'lodash'
+import useVuelidate from '@vuelidate/core'
+import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
+import { apiCall, useMessage, useWait, useVuelidateWrapper, WebMessage } from '@vnuge/vnlib.browser'
+import { computed, reactive, toRefs } from 'vue'
+
+const emit = defineEmits(['complete', 'cancel'])
+
+const props = defineProps<{
+  token: string
+  regPath: string
+}>()
+
+const { token, regPath } = toRefs(props)
+const { onInput } = useMessage()
+const { waiting } = useWait()
+
+const vState = reactive({ password: '', repeatPass: ''})
+
+const rules = computed(() => {
+  return {
+    password: {
+      required: helpers.withMessage('Password cannot be empty', required),
+      minLength: helpers.withMessage('Password must be at least 8 characters', minLength(8)),
+      maxLength: helpers.withMessage(' must have less than 128 characters', maxLength(128))
+    },
+    repeatPass: {
+      sameAs: helpers.withMessage('Your passwords do not match', (value : string) => isEqual(value, v$.value.password.$model)),
+      required: helpers.withMessage('Repeat password cannot be empty', required),
+      minLength: helpers.withMessage('Repeat password must be at least 8 characters', minLength(8)),
+      maxLength: helpers.withMessage('Repeat password must have less than 128 characters', maxLength(128))
+    },
+  }
+})
+
+const v$ = useVuelidate(rules, vState, { $lazy: true })
+
+const { validate } = useVuelidateWrapper(v$)
+
+const onSubmit = async function () {
+  
+  if (!await validate()) {
+    return
+  }
+
+  await apiCall(async ({ axios }) => {
+    // finalize by passing the token and the new password
+    const { data } = await axios.post<WebMessage>(regPath.value, {
+      token: token.value,
+      password: v$.value.password.$model
+    })
+  
+    //Throw if not successful
+    data.getResultOrThrow()
+    v$.value.$reset()
+    emit('complete')
+    
+  })
+}
+
+const cancel = () => emit('cancel')
+
+</script>
+
+<style>
+
+</style>
diff --git a/front-end/src/views/Register/index.vue b/front-end/src/views/Register/index.vue
new file mode 100644
index 0000000..92a5992
--- /dev/null
+++ b/front-end/src/views/Register/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <div id="reg-template" class="app-component-entry">
+    <div class="container flex flex-col m-auto my-2 duration-150 ease-linear lg:mt-16">
+      <div class="text-center">
+        <h2>Sign Up</h2>
+      </div>
+      <div class="mt-4 content-container">
+        <form v-if="formState === 0" @submit.prevent="OnSubmit" :disabled="waiting">
+          <fieldset class="input-group">
+            <div class="input-container">
+              <label for="reg-email" class="pl-1 text-sm">Email Address</label>
+              <input
+                id="reg-email" 
+                v-model="v$.emailAddress.$model"
+                type="email"
+                placeholder="user@example.com" 
+                required
+                class="input-field primary"
+                @input="onInput"
+              >
+            </div>
+          </fieldset>
+          <fieldset class="flex flex-row justify-between mt-6">
+            <div>
+              <label class="checkbox primary">
+                <input v-model="acceptedTerms" type="checkbox">
+                <span class="check" />
+                <span class="mx-2 text-sm"> 
+                  I agree to the
+                  <a class="link" href="#">Terms of Service</a>
+                </span>
+              </label>
+            </div>
+            <div>
+              <button type="submit" :disabled="!acceptedTerms || waiting" class="btn primary">
+                Submit
+              </button>
+            </div>
+          </fieldset>
+        </form>
+        <complete-reg
+          v-else-if="formState === 1"
+          :reg-path="regPath"
+          :token="token"
+          @cancel="formState = 0"
+          @complete="formState = 2"
+        />
+        <div v-else>
+          <div class="text-center">
+            <h3>Success</h3>
+            <fa-icon
+              :icon="['fa','check-circle']"
+              class="text-primary-500 dark:text-primary-600"
+              size="3x"
+            />
+            <p class="mt-4">
+              You may log in now.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isNil } from 'lodash';
+import useVuelidate from '@vuelidate/core'
+import { required, maxLength, email, helpers } from '@vuelidate/validators'
+import { ref, reactive, watch } from 'vue'
+import { useSession, apiCall, useMessage, useWait, useTitle, useVuelidateWrapper } from '@vnuge/vnlib.browser'
+import CompleteReg from './components/CompleteReg.vue'
+import { useRouter } from 'vue-router';
+import { useRouteQuery } from '@vueuse/router';
+
+const regPath = "/account/registration"
+
+useTitle('Registration')
+
+const { setMessage, onInput } = useMessage()
+const { waiting } = useWait()
+const { browserId } = useSession()
+const router = useRouter();
+
+//Token is the t query argument
+const token = useRouteQuery('t', null)
+
+const acceptedTerms = ref(false)
+const formState = ref(isNil(token.value) ? 0 : 1)
+
+const vState = reactive({
+  emailAddress: ''
+})
+
+const rules = {
+  emailAddress: {
+    required: helpers.withMessage('Email cannot be empty', required),
+    email: helpers.withMessage('Your email address is not valid', email),
+    maxLength: helpers.withMessage('Email address must be less than 50 characters', maxLength(50))
+  }
+}
+const v$ = useVuelidate(rules, vState, { $lazy: true })
+const { validate } = useVuelidateWrapper(v$)
+
+const OnSubmit = async function () {
+  if (!acceptedTerms.value) {
+    setMessage('You must accept the terms of service to continue.')
+    return
+  }
+  if (!await validate()) {
+    return
+  }
+  await apiCall(async ({ axios, toaster }) => {
+    const response = await axios.put(regPath, {
+      username: v$.value.emailAddress.$model,
+      clientid: browserId.value,
+      localtime: new Date().toISOString()
+    })
+    if (response.data.success) {
+      toaster.form.success({
+          id: 'logout-success',
+          title: 'Success',
+          text: response.data.result,
+          duration: 5000
+        }
+      )
+
+      acceptedTerms.value = false
+      v$.value.emailAddress.$model = '';
+      //Clear form
+      v$.value.$reset()
+    } else {
+      setMessage(response.data.result)
+    }
+  })
+}
+
+watch(formState, () => {
+  //Clear token if formState is not 1
+  v$.value.$reset()
+  acceptedTerms.value = false
+  v$.value.emailAddress.$model = '';
+  router.push({ query: {} })
+})
+
+</script>
+
+<style>
+#reg-template .content-container{
+    @apply mx-auto p-4 bg-white dark:bg-dark-700 border border-gray-200 dark:border-dark-500;
+    @apply sm:p-6 sm:rounded-md sm:shadow-sm w-full max-w-sm;
+}
+
+#reg-template input.input-field {
+    @apply block w-full p-2 border-b-2 my-2;
+}
+
+.content-container fieldset.input-group {
+    @apply mx-auto;
+}
+</style>
diff --git a/front-end/src/views/[...all].vue b/front-end/src/views/[...all].vue
new file mode 100644
index 0000000..1f439fc
--- /dev/null
+++ b/front-end/src/views/[...all].vue
@@ -0,0 +1,24 @@
+<template>
+    <div id="default-template" class="flex px-4 py-24 app-component-entry">
+        <div class="mx-auto">
+            <h2 class="text-center">404 - Resource not found</h2>
+            <p>
+                The resource you are looking for could not be found on the server. Please check the URL and try again,
+                or go back <router-link class="link" to="/">home</router-link>
+            </p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import { useTitle } from '@vnuge/vnlib.browser'
+useTitle('404 - Resource not found')
+
+</script>
+
+<style lang="scss">
+#default-template{
+
+}
+</style>
\ No newline at end of file
diff --git a/front-end/src/views/index.vue b/front-end/src/views/index.vue
new file mode 100644
index 0000000..07b0a09
--- /dev/null
+++ b/front-end/src/views/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <div id="home-page-entry" class="app-component-entry">
+        
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import { useRouter } from 'vue-router';
+
+const { push } = useRouter();
+push('/blog')
+
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
-- 
cgit