package and ui updates

11 files changed, 12 insertions, 677 deletions

diff --git a/front-end/src/views/Account/[comp].vue b/front-end/src/views/Account/[comp].vue
index 75fd086..9e6343d 100644
--- a/front-end/src/views/Account/[comp].vue
+++ b/front-end/src/views/Account/[comp].vue
@@ -14,12 +14,6 @@
 
           <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>
@@ -34,10 +28,6 @@
         </TabPanel>
         
         <TabPanel :unmount="false">
-          <OauthApps />
-        </TabPanel>
-        
-        <TabPanel :unmount="false">
           <Settings />
         </TabPanel>
 
@@ -54,7 +44,6 @@ 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')
diff --git a/front-end/src/views/Account/components/oauth/CreateApp.vue b/front-end/src/views/Account/components/oauth/CreateApp.vue
deleted file mode 100644
index b10dd2c..0000000
--- a/front-end/src/views/Account/components/oauth/CreateApp.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<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-es'
-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
deleted file mode 100644
index 119aa50..0000000
--- a/front-end/src/views/Account/components/oauth/Oauth.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<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
deleted file mode 100644
index 247f2f3..0000000
--- a/front-end/src/views/Account/components/oauth/SingleApplication.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<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-es'
-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
deleted file mode 100644
index 40db64e..0000000
--- a/front-end/src/views/Account/components/oauth/o2Api.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import { forEach } from 'lodash-es'
-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/settings/Pki.vue b/front-end/src/views/Account/components/settings/Pki.vue
index 9700e28..a937cc7 100644
--- a/front-end/src/views/Account/components/settings/Pki.vue
+++ b/front-end/src/views/Account/components/settings/Pki.vue
@@ -55,10 +55,9 @@
 
 <script setup lang="ts">
 import { isEmpty, isNil } from 'lodash-es'
-import { apiCall, useConfirm, useSession, debugLog, useFormToaster } from '@vnuge/vnlib.browser'
+import { apiCall, useConfirm, useSession, debugLog, useFormToaster, PkiApi } 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
@@ -69,7 +68,7 @@ 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 { enabled, refresh } = props.pkaiApi
 
 const isOpen = ref(false)
 const keyData = ref('')
@@ -81,7 +80,7 @@ watch(isOpen, () =>{
     pemFormat.value = false
     explicitCurve.value = ""
     //Reload status
-    props.pkaiApi.refresh()
+    refresh()
 })
 
 const setIsOpen = (value : boolean) => isOpen.value = value
diff --git a/front-end/src/views/Account/components/settings/Security.vue b/front-end/src/views/Account/components/settings/Security.vue
index 3f8d8d6..39df512 100644
--- a/front-end/src/views/Account/components/settings/Security.vue
+++ b/front-end/src/views/Account/components/settings/Security.vue
@@ -52,8 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAutoHeartbeat } from '@vnuge/vnlib.browser'
-import { useMfaConfig, MfaMethod, usePkiConfig } from '@vnuge/vnlib.browser/dist/mfa'
+import { useAutoHeartbeat, useMfaConfig, MfaMethod, usePkiConfig } from '@vnuge/vnlib.browser'
 import { computed } from 'vue'
 import { Switch } from '@headlessui/vue'
 import { includes } from 'lodash-es'
diff --git a/front-end/src/views/Account/components/settings/TotpSettings.vue b/front-end/src/views/Account/components/settings/TotpSettings.vue
index 755ae61..4dc686a 100644
--- a/front-end/src/views/Account/components/settings/TotpSettings.vue
+++ b/front-end/src/views/Account/components/settings/TotpSettings.vue
@@ -102,9 +102,10 @@ import {
   useMessage,
   useConfirm,
   usePassConfirm,
-  useFormToaster
+  useFormToaster,
+  MfaApi,
+  MfaMethod
 } from '@vnuge/vnlib.browser'
-import { MfaApi, MfaMethod } from '@vnuge/vnlib.browser/dist/mfa';
 
 interface TotpConfig{
     secret: string;
diff --git a/front-end/src/views/Login/components/Social.vue b/front-end/src/views/Login/components/Social.vue
index 34c5a1e..6eb65e7 100644
--- a/front-end/src/views/Login/components/Social.vue
+++ b/front-end/src/views/Login/components/Social.vue
@@ -14,20 +14,10 @@
         </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';
+import { apiCall, useWait, useSession, useSessionUtils, WebMessage } from '@vnuge/vnlib.browser'
 
 const { waiting } = useWait()
 const { browserId, publicKey } = useSession()
diff --git a/front-end/src/views/Login/index.vue b/front-end/src/views/Login/index.vue
index d0fa9b2..7c30047 100644
--- a/front-end/src/views/Login/index.vue
+++ b/front-end/src/views/Login/index.vue
@@ -48,8 +48,10 @@ 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 { 
+  useMfaLogin, totpMfaProcessor, IMfaFlowContinuiation, MfaMethod, apiCall, 
+  useMessage, useWait, useUser, useSession, useLastPage, useTitle, debugLog 
+} from '@vnuge/vnlib.browser'
 import { useTimeoutFn } from '@vueuse/shared'
 import { isNil } from 'lodash-es'
 
diff --git a/front-end/src/views/Login/social/[type].vue b/front-end/src/views/Login/social/[type].vue
index bdb0240..da1aa25 100644
--- a/front-end/src/views/Login/social/[type].vue
+++ b/front-end/src/views/Login/social/[type].vue
@@ -73,9 +73,6 @@ const run = async () => {
       case 'discord':
         loginUrl = '/login/social/discord';
         break;
-      case 'auth0':
-        loginUrl = '/login/social/auth0';
-        break;
       default:
         router.push({ name: 'Login' })
         break;