Arno Kaimbacher
010bead723
Some checks failed
CI Pipeline / japa-tests (push) Failing after 1m0s
- add public opensearch api host
257 lines
10 KiB
Vue
257 lines
10 KiB
Vue
<script setup lang="ts">
|
|
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
|
import { ref } from 'vue';
|
|
import { useForm } from '@inertiajs/vue3';
|
|
// import { ref } from 'vue';
|
|
// import { reactive } from 'vue';
|
|
import {
|
|
mdiAccount,
|
|
// mdiAccountCircle,
|
|
mdiLock,
|
|
// mdiMail,
|
|
mdiAsterisk,
|
|
mdiFormTextboxPassword,
|
|
mdiArrowLeftBoldOutline,
|
|
mdiAlertBoxOutline,
|
|
} from '@mdi/js';
|
|
import SectionMain from '@/Components/SectionMain.vue';
|
|
import CardBox from '@/Components/CardBox.vue';
|
|
import BaseDivider from '@/Components/BaseDivider.vue';
|
|
import FormField from '@/Components/FormField.vue';
|
|
import FormControl from '@/Components/FormControl.vue';
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
import BaseButtons from '@/Components/BaseButtons.vue';
|
|
import NotificationBar from '@/Components/NotificationBar.vue';
|
|
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
|
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
import passwordMeter from '@/Components/SimplePasswordMeter/password-meter.vue';
|
|
import { computed, Ref } from 'vue';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
|
|
import PersonalTotpSettings from '@/Components/PersonalTotpSettings.vue';
|
|
// import PersonalSettings from '@/Components/PersonalSettings.vue';
|
|
// import { MainService } from '@/Stores/main';
|
|
// const mainService = MainService();
|
|
|
|
const emit = defineEmits(['confirm', 'update:confirmation'])
|
|
|
|
const enabled = ref(false);
|
|
const handleScore = (score: number) => {
|
|
if (score == 4){
|
|
enabled.value = true;
|
|
} else {
|
|
enabled.value = false;
|
|
}
|
|
// strengthLabel.value = scoreLabel;
|
|
// score.value = scoreValue;
|
|
};
|
|
|
|
defineProps({
|
|
// user will be returned from controller action
|
|
user: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
twoFactorEnabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
code: {
|
|
type: Object,
|
|
},
|
|
backupState: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
errors: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
// const factorForm = useForm({
|
|
// login: props.user.login,
|
|
// email: props.user.email,
|
|
// });
|
|
// const enableTwoFactorAuthentication = async () => {
|
|
// await router.post(stardust.route('account.password.enable2fa'));
|
|
// };
|
|
// const disableTwoFactorAuthentication = async () => {
|
|
// await router.post(stardust.route('account.password.disable2fa'));
|
|
// };
|
|
|
|
|
|
const passwordForm = useForm({
|
|
old_password: '',
|
|
new_password: '',
|
|
confirm_password: '',
|
|
});
|
|
const passwordSubmit = async () => {
|
|
await passwordForm.post(stardust.route('account.password.store'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
// console.log(resp);
|
|
passwordForm.reset();
|
|
},
|
|
});
|
|
};
|
|
|
|
const flash: Ref<any> = computed(() => {
|
|
return usePage().props.flash;
|
|
});
|
|
|
|
// const confirmationCode = ref('');
|
|
|
|
// const confirm = () => {
|
|
// emit('update:confirmation', confirmationCode);
|
|
// emit('confirm');
|
|
// };
|
|
|
|
// const onConfirmKeyDown = (e) => {
|
|
// if (e.which === 13) {
|
|
// confirm()
|
|
// }
|
|
// };
|
|
|
|
// const generateSecretCode = (user) => {
|
|
// const secret = generateSecret({
|
|
// name: 'TethysCloud',
|
|
// account: user.email,
|
|
// });
|
|
// return secret.secret;
|
|
// }
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<LayoutAuthenticated>
|
|
<SectionMain>
|
|
<SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
|
|
<BaseButton :route-name="stardust.route('dashboard')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
|
color="white" rounded-full small />
|
|
</SectionTitleLineWithButton>
|
|
|
|
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
|
{{ flash.message }}
|
|
</NotificationBar>
|
|
<!-- <NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
|
|
{{ $page.props.flash.message }}
|
|
</NotificationBar> -->
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- <div class="grid grid-cols-1 lg:grid-cols-1 gap-6"> -->
|
|
|
|
<!-- password form -->
|
|
<!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileForm.post(route('admin.account.info.store'))"> -->
|
|
<!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileSubmit()">
|
|
<FormField label="Login" help="Required. Your login name" :class="{ 'text-red-400': errors.login }">
|
|
<FormControl v-model="profileForm.login" v-bind:icon="mdiAccount" name="login" required :error="errors.login">
|
|
<div class="text-red-400 text-sm" v-if="errors.login">
|
|
{{ errors.login }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<FormField label="Email" help="Required. Your e-mail" :class="{ 'text-red-400': errors.email }">
|
|
<FormControl v-model="profileForm.email" :icon="mdiMail" type="email" name="email" required :error="errors.email">
|
|
<div class="text-red-400 text-sm" v-if="errors.email">
|
|
{{ errors.email }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
|
|
<template #footer>
|
|
<BaseButtons>
|
|
<BaseButton color="info" type="submit" label="Submit" />
|
|
</BaseButtons>
|
|
</template>
|
|
</CardBox> -->
|
|
|
|
<!-- password form -->
|
|
<!-- <CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordForm.post(route('admin.account.password.store'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => passwordForm.reset(),
|
|
}) "> -->
|
|
<CardBox id="passwordForm" title="Change Password" :icon="mdiLock" form @submit.prevent="passwordSubmit()">
|
|
<FormValidationErrors v-bind:errors="errors" />
|
|
|
|
<FormField label="Current password" help="Required. Your current password"
|
|
:class="{ 'text-red-400': passwordForm.errors.old_password }">
|
|
<FormControl v-model="passwordForm.old_password" :icon="mdiAsterisk" name="old_password"
|
|
type="password" required :error="passwordForm.errors.old_password">
|
|
<div class="text-red-400 text-sm" v-if="passwordForm.errors.old_password">
|
|
{{ passwordForm.errors.old_password }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<BaseDivider />
|
|
|
|
<FormField label="New password" help="Required. New password"
|
|
:class="{ 'text-red-400': passwordForm.errors.new_password }">
|
|
<FormControl v-model="passwordForm.new_password" :icon="mdiFormTextboxPassword" name="new_password"
|
|
type="password" required :error="passwordForm.errors.new_password">
|
|
<div class="text-red-400 text-sm" v-if="passwordForm.errors.new_password">
|
|
{{ passwordForm.errors.new_password }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
<password-meter :password="passwordForm.new_password" @score="handleScore" />
|
|
|
|
|
|
<FormField label="Confirm password" help="Required. New password one more time"
|
|
:class="{ 'text-red-400': passwordForm.errors.confirm_password }">
|
|
<FormControl v-model="passwordForm.confirm_password" :icon="mdiFormTextboxPassword"
|
|
name="confirm_password" type="password" required :error="passwordForm.errors.confirm_password">
|
|
<div class="text-red-400 text-sm" v-if="passwordForm.errors.confirm_password">
|
|
{{ passwordForm.errors.confirm_password }}
|
|
</div>
|
|
</FormControl>
|
|
</FormField>
|
|
|
|
|
|
<div v-if="flash && flash.warning" class="flex flex-col mt-6 animate-fade-in">
|
|
<div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
|
|
<p class="font-bold">Be Warned</p>
|
|
<p>{{ flash.warning }}</p>
|
|
</div>
|
|
</div>
|
|
<BaseDivider />
|
|
|
|
<template #footer>
|
|
<BaseButtons>
|
|
<BaseButton type="submit" color="info" label="Change password" :disabled="passwordForm.processing == true || enabled == false" />
|
|
</BaseButtons>
|
|
</template>
|
|
</CardBox>
|
|
|
|
|
|
|
|
<PersonalTotpSettings :twoFactorEnabled="twoFactorEnabled" :backupState="backupState">
|
|
</PersonalTotpSettings>
|
|
<!-- <PersonalSettings :state="backupState"/> -->
|
|
|
|
<!-- <CardBox v-if="!props.twoFactorEnabled" title="Two-Factor Authentication" :icon="mdiInformation" form
|
|
@submit.prevent="enableTwoFactorAuthentication()">
|
|
<div class="text-lg font-medium text-gray-900">
|
|
You have not enabled two factor authentication.
|
|
</div>
|
|
<div class="text-sm text-gray-600">
|
|
When two factor authentication is enabled, you will be prompted for a secure,
|
|
random token during authentication. You may retrieve this token from your phone's
|
|
Google Authenticator application.
|
|
</div>
|
|
|
|
<template #footer>
|
|
<BaseButtons>
|
|
<BaseButton color="info" type="submit" label="Enable" />
|
|
</BaseButtons>
|
|
</template>
|
|
</CardBox> -->
|
|
|
|
|
|
|
|
</div>
|
|
</SectionMain>
|
|
</LayoutAuthenticated>
|
|
</template>
|