Squashed commit of the following:

commit 069f81fc3c87c437eceff756ddca7a4c1b58044d
Author: vnugent <public@vaughnnugent.com>
Date:   Sat Feb 24 22:33:34 2024 -0500

    feat: #3 setup mode, admin signup, fixes, and contianerize!

commit 97ffede9eb312fca0257afa06969d47a12703f3b
Author: vnugent <public@vaughnnugent.com>
Date:   Mon Feb 19 22:26:03 2024 -0500

    feat: new account setup and invitation links

commit 1c8f59bc0a1b25ce5013b0f1fc7fa73c0de415d6
Author: vnugent <public@vaughnnugent.com>
Date:   Thu Feb 15 16:49:59 2024 -0500

    feat: update packages, drag/drop link, and fix some button padding

1 files changed, 16 insertions, 10 deletions

diff --git a/front-end/src/App.vue b/front-end/src/App.vue
index 01e91e7..4bd94c8 100644
--- a/front-end/src/App.vue
+++ b/front-end/src/App.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useStore, TabId } from './store';
-import { defineAsyncComponent } from 'vue';
-import { apiCall } from '@vnuge/vnlib.browser';
+import { computed, defineAsyncComponent } from 'vue';
 import { isEqual } from 'lodash-es';
 import { useDark } from '@vueuse/core';
 import SideMenuItem from './components/SideMenuItem.vue';
@@ -12,6 +11,7 @@ const Settings = defineAsyncComponent(() => import('./components/Settings.vue'))
 const Confirm = defineAsyncComponent(() => import('./components/global/ConfirmPrompt.vue'));
 const Alerts = defineAsyncComponent(() => import('./components/Alerts.vue'));
 const Login = defineAsyncComponent(() => import('./components/Login.vue'));
+const Registation = defineAsyncComponent(() => import('./components/Registation.vue'));
 const PasswordPrompt = defineAsyncComponent(() => import('./components/global/PasswordPrompt.vue'));
 
 const store = useStore();
@@ -20,12 +20,7 @@ const darkMode = useDark()
 
 store.setSiteTitle('Simple Bookmark')
 
-const logout = () => {
-  apiCall(async () => {
-    const { logout } = await store.socialOauth()
-    await logout()
-  })
-}
+const isSetupMode = computed(() => store.registation.status?.setup_mode === true)
 
 const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active)
 
@@ -39,7 +34,7 @@ const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active)
     <div id="app" class="min-h-screen pb-16 text-gray-700 bg-gray-50 dark:bg-gray-900 dark:text-white sm:pb-0">
       
       <div class="relative">
-          <div class="absolute z-50 right-10 top-10">
+          <div class="fixed z-50 right-10 top-10">
             <Alerts />
           </div>
       </div>
@@ -47,7 +42,7 @@ const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active)
       <Confirm />
       <PasswordPrompt />
 
-      <aside id="logo-sidebar" class="fixed top-0 left-0 z-10 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
+      <aside id="logo-sidebar" class="fixed top-0 left-0 z-20 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
           <div class="flex flex-col h-full px-3 py-4 overflow-y-auto bg-white dark:bg-gray-800">
               <div class="flex-auto">
                   <a href="/" class="flex items-center ps-2.5 mb-5">
@@ -106,7 +101,14 @@ const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active)
         </div>
       </aside>
 
+      <div v-if="isSetupMode" class="relative mb-16 sm:mb-10">
+          <div class="fixed top-0 z-10 w-full p-2 text-center text-white bg-amber-600">
+              Setup mode is enabled. Restart the server without --setup flag to disable this warning
+          </div>
+      </div>
+
       <div class="h-full py-6 md:p-6 sm:ml-64">
+        
         <div v-if="showIf(TabId.Bookmarks, activeTab)" class="flex flex-col w-full h-full">
           <Bookmarks />
         </div>
@@ -118,6 +120,10 @@ const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active)
         <div v-if="showIf(TabId.Settings, activeTab)" class="flex w-full h-full">
           <Settings />
         </div>
+
+        <div v-if="showIf(TabId.Register, activeTab)" class="flex w-full h-full">
+          <Registation/>
+        </div>
       </div>
 
       <div class="fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 sm:hidden dark:bg-gray-700 dark:border-gray-600">