tethys.backend/resources/js/Pages/Auth/AccountInfo.vue
Arno Kaimbacher f04c1f6327 hotfix: enhance editor dataset management and UI improvements
- Implemented dataset editing functionality for editor roles, including fetching, updating, and categorizing datasets.
- Added routes and controller actions for editing, updating, and categorizing datasets within the editor interface.
- Integrated UI components for managing dataset metadata, subjects, references, and files.
- Enhanced keyword management with features for adding, editing, and deleting keywords, including handling keywords used by multiple datasets.
- Improved reference management with features for adding, editing, and deleting dataset references.
- Added validation for dataset updates using the `updateEditorDatasetValidator`.
- Updated the dataset edit form to include components for managing titles, descriptions, authors, contributors, licenses, coverage, subjects, references, and files.
- Implemented transaction management for dataset updates to ensure data consistency.
- Added a download route for files associated with datasets.
- Improved the UI for displaying and interacting with datasets in the editor index view, including adding edit and categorize buttons.
- Fixed an issue where the file size was not correctly calculated.
- Added a tooltip to the keyword value column in the TableKeywords component to explain the editability of keywords.
- Added a section to display keywords that are marked for deletion.
- Added a section to display references that are marked for deletion.
- Added a restore button to the references to delete section to restore references.
- Updated the SearchCategoryAutocomplete component to support read-only mode.
- Updated the FormControl component to support read-only mode.
- Added icons and styling improvements to various components.
- Added a default value for subjectsToDelete and referencesToDelete in the dataset model.
- Updated the FooterBar component to use the JustboilLogo component.
- Updated the app.ts file to fetch chart data without a year parameter.
- Updated the Login.vue file to invert the logo in dark mode.
- Updated the AccountInfo.vue file to add a Head component.
2025-04-08 14:16:35 +02:00

221 lines
8.1 KiB
Vue

<script setup lang="ts">
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import { ref } from 'vue';
import { useForm, Head } 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 { computed, Ref } from 'vue';
import { usePage } from '@inertiajs/vue3';
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
import PersonalTotpSettings from '@/Components/PersonalTotpSettings.vue';
import PasswordMeter from '@/Components/SimplePasswordMeter/password-meter.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>
<Head title="Profile Security"></Head>
<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 gap-6">
<!-- <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 />
<PasswordMeter v-model="passwordForm.new_password" :errors="passwordForm.errors"
@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>