diff options
Diffstat (limited to 'front-end/src/components/Settings.vue')
-rw-r--r-- | front-end/src/components/Settings.vue | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/front-end/src/components/Settings.vue b/front-end/src/components/Settings.vue new file mode 100644 index 0000000..e03ae61 --- /dev/null +++ b/front-end/src/components/Settings.vue @@ -0,0 +1,64 @@ +<script setup lang="ts"> +import { useDark } from '@vueuse/core'; +import { useStore } from '../store'; +import Oauth2Apps from './Settings/Oauth2Apps.vue'; +import PasswordReset from './Settings/PasswordReset.vue'; +import PkiSettings from './Settings/PkiSettings.vue'; +import TotpSettings from './Settings/TotpSettings.vue'; + +const store = useStore(); +const darkMode = useDark(); + +</script> + +<template> + <div class="w-full sm:pt-10 lg:pl-[15%] sm:pl-4 px-4"> + <h2 class="text-2xl font-bold">Settings</h2> + <div class="flex flex-col w-full max-w-3xl gap-10 mt-3"> + + <div class=""> + <h3 class="text-xl font-bold"> + General + </h3> + <div class="grid grid-cols-1 gap-3 p-4"> + <div class=""> + <label class="relative inline-flex items-center cursor-pointer"> + <input type="checkbox" value="" class="sr-only peer" v-model="darkMode"> + <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> + <span class="text-sm font-medium text-gray-900 ms-3 dark:text-gray-300">Dark mode</span> + </label> + </div> + <div class=""> + <label class="relative inline-flex items-center cursor-pointer"> + <input type="checkbox" value="" class="sr-only peer" v-model="store.autoHeartbeat"> + <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> + <span class="text-sm font-medium text-gray-900 ms-3 dark:text-gray-300">Stay signed in</span> + </label> + </div> + </div> + </div> + + <PasswordReset /> + + <div class=""> + <h3 class="text-xl font-bold">Multi Factor Auth</h3> + + <div class="relative mt-4 py-2.5"> + <TotpSettings /> + </div> + </div> + + <PkiSettings /> + + <!-- Only load component if oauth2 plugin is enabled --> + <div v-if="store.oauth2" class=""> + <Oauth2Apps /> + </div> + + </div> + </div> +</template> + +<style lang="scss"> + +</style>
\ No newline at end of file |