Arno Kaimbacher
36cd7a757b
All checks were successful
CI / container-job (push) Successful in 41s
- adonisrc.ts: Load official drive_provider and unload custom driver_provider. - packages.json: Add @headlessui/vue dependency for tab components. - AvatarController.ts: Rewrite avatar generation logic to always return the same avatar per user. - auth/UserController.ts: Add profile and profileUpdate methods to support user profile editing. - Submitter/datasetController.ts & app/models/file.ts: Adapt code to use the official drive_provider. - app/models/user.ts: Introduce “isAdmin” getter. - config/drive.ts: Create new configuration for the official drive_provider. - providers/vinejs_provider.ts: Adapt allowedExtensions control to use provided options or database enabled extensions. - resource/js/app.ts: Load default Head and Link components. - resources/js/menu.ts: Add settings-profile.edit menu point. - resources/js/Components/action-message.vue: Add new component for improved user feedback after form submissions. - New avatar-input.vue component: Enable profile picture selection. - Components/CardBox.vue: Alter layout to optionally show HeaderIcon in title bar. - FormControl.vue: Define a readonly prop for textareas. - Improve overall UI with updates to NavBar.vue, UserAvatar.vue, UserAvatarCurrentUser.vue, and add v-model support to password-meter.vue. - Remove profile editing logic from AccountInfo.vue and introduce new profile components (show.vue, update-password-form.vue, update-profile-information.vue). - app.edge: Modify page (add @inertiaHead tag) for better meta management. - routes.ts: Add new routes for editing user profiles. - General npm updates.
139 lines
No EOL
4.6 KiB
Vue
139 lines
No EOL
4.6 KiB
Vue
<script lang="ts" setup>
|
|
|
|
/*=========================================================================================
|
|
File Name: show profile
|
|
|
|
----------------------------------------------------------------------------------------
|
|
Author: Arno Kaimbacher
|
|
Author URL: https://jakint.at/
|
|
==========================================================================================*/
|
|
|
|
|
|
|
|
// import { useUrlSearchParams } from '@vueuse/core';
|
|
// import { usePage } from '@inertiajs/vue3';
|
|
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
|
|
import { ref, computed } from 'vue';
|
|
// import IconRounded from '@/Components/IconRounded.vue';
|
|
|
|
|
|
// import AdminLayout from '@/Layouts/AdminLayout.vue';
|
|
// import AppLayout from '@/Layouts/AppLayout.vue';
|
|
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
|
|
|
import UpdatePasswordForm from '@/Pages/profile/partials/update-password-form.vue';
|
|
import UpdateProfileInformationForm from '@/Pages/profile/partials/update-profile-information-form.vue';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
import SectionMain from '@/Components/SectionMain.vue';
|
|
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
|
import { mdiAccount, mdiArrowLeftBoldOutline, mdiFormTextboxPassword } from '@mdi/js';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
|
|
|
defineProps({
|
|
user: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
defaultUrl: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const tabs = [
|
|
{ id: 1, title: 'My Profile', icon: mdiAccount },
|
|
{ id: 2, title: 'Change Password', icon: mdiFormTextboxPassword },
|
|
];
|
|
|
|
// const params = useUrlSearchParams('history');
|
|
const selectedTab = ref(0);
|
|
|
|
function changeTab(index: number) {
|
|
selectedTab.value = index;
|
|
}
|
|
|
|
const user = computed(() => usePage().props.user);
|
|
// const sessions = computed(() => usePage().props.sessions);
|
|
// const Layout = computed(() => (user.value.is_super_admin ? AdminLayout : AppLayout));
|
|
</script>
|
|
|
|
<template>
|
|
<Component :is="LayoutAuthenticated">
|
|
|
|
<Head title="Profile"></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> -->
|
|
|
|
<div class="">
|
|
<TabGroup :selectedIndex="selectedTab" @change="changeTab">
|
|
<TabList class="flex space-x-7 p-1">
|
|
<Tab v-for="(tab, index) in tabs" as="template" :key="index" v-slot="{ selected }">
|
|
<button :class="[
|
|
'inline-flex items-center justify-center font-semibold focus:outline-none disabled:opacity-25 pb-2',
|
|
selected
|
|
? 'text-dark border-b-2 border-primary transition-all duration-500 inline-block'
|
|
: 'text-light',
|
|
]">
|
|
<!-- <IconRounded :name="tab.icon" class="h-5 mr-3" /> -->
|
|
<BaseIcon :path="tab.icon" class="flex-none" w="w-12" />
|
|
{{ tab.title }}
|
|
</button>
|
|
</Tab>
|
|
</TabList>
|
|
<transition v-show="selectedTab >= 0" enter-active-class="transition duration-100 ease-out"
|
|
enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
|
|
leave-active-class="transition duration-75 ease-in"
|
|
leave-from-class="transform scale-100 opacity-100"
|
|
leave-to-class="transform scale-95 opacity-0">
|
|
<TabPanels class="mt-2">
|
|
<TabPanel :key="Date.now().toString() + 1" :class="[]">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<UpdateProfileInformationForm class="p-5" :user="user" :default-url="defaultUrl" />
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel :key="Date.now().toString() + 3" :class="[]">
|
|
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-x-5 gap-y-7 items-start"> -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<UpdatePasswordForm class="p-5" />
|
|
</div>
|
|
</TabPanel>
|
|
|
|
</TabPanels>
|
|
</transition>
|
|
</TabGroup>
|
|
</div>
|
|
</SectionMain>
|
|
</Component>
|
|
</template>
|
|
|
|
<style>
|
|
.cool-link::after {
|
|
content: '';
|
|
display: block;
|
|
width: 0;
|
|
height: 2px;
|
|
background: #fda92d;
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.cool-link:hover::after {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<!-- <script>
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
layout: false,
|
|
});
|
|
</script> --> |