143 lines
5.1 KiB
Vue
143 lines
5.1 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { computed, ref } from 'vue';
|
|
import AvatarCard from '@/components/users/AvatarCard.vue';
|
|
import LoginDetailsForm from '@/components/users/LoginDetailsForm.vue';
|
|
import TwoFactorPanel from '@/components/users/TwoFactorPanel.vue';
|
|
import UserDetailsForm from '@/components/users/UserDetailsForm.vue';
|
|
import Message from '@/components/ui/Message.vue';
|
|
import type { SelectOption } from '@/components/ui/Select.vue';
|
|
import Tabs from '@/components/ui/Tabs.vue';
|
|
import { useSettings, useTranslations } from '@/composables/useVanguard';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import type {
|
|
AvatarSource,
|
|
LoginDetailsFormData,
|
|
TwoFactorState,
|
|
UserDetailsFormData,
|
|
UserFormPayload,
|
|
} from '@/types';
|
|
|
|
const props = defineProps<{
|
|
user: UserFormPayload;
|
|
roles: SelectOption[];
|
|
statuses: SelectOption[];
|
|
countries: SelectOption[];
|
|
avatarSources: AvatarSource[];
|
|
twoFactor: TwoFactorState;
|
|
forcePasswordChange: boolean;
|
|
activeTab: string;
|
|
}>();
|
|
|
|
const { __ } = useTranslations();
|
|
const { setting } = useSettings();
|
|
|
|
const details = useForm<UserDetailsFormData>({
|
|
role_id: props.user.role_id,
|
|
status: props.user.status,
|
|
first_name: props.user.first_name,
|
|
last_name: props.user.last_name,
|
|
birthday: props.user.birthday,
|
|
phone: props.user.phone,
|
|
address: props.user.address,
|
|
country_id: props.user.country_id,
|
|
});
|
|
|
|
const login = useForm<LoginDetailsFormData>({
|
|
email: props.user.email,
|
|
username: props.user.username,
|
|
password: '',
|
|
password_confirmation: '',
|
|
});
|
|
|
|
const tabs = computed(() => {
|
|
const items = [
|
|
{ value: 'details', label: __('User Details') },
|
|
{ value: 'login', label: __('Login Details') },
|
|
];
|
|
|
|
if (setting('2fa.enabled')) {
|
|
items.push({ value: '2fa', label: __('Two-Factor Authentication') });
|
|
}
|
|
|
|
return items;
|
|
});
|
|
|
|
const tab = ref(props.activeTab);
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout
|
|
:title="__('My Profile')"
|
|
:heading="__('My Profile')"
|
|
:breadcrumbs="[{ label: __('My Profile') }]"
|
|
>
|
|
<Message v-if="forcePasswordChange" severity="warn" class="mb-4">
|
|
{{ __('Before continuing please update your password and set a new one.') }}
|
|
</Message>
|
|
|
|
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
|
<div class="lg:col-span-2">
|
|
<div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
|
|
<Tabs v-model="tab" :tabs="tabs">
|
|
<template #details>
|
|
<form
|
|
@submit.prevent="
|
|
details.put(route('profile.update.details'), {
|
|
preserveScroll: true,
|
|
})
|
|
"
|
|
>
|
|
<!--
|
|
Role and status are read only here, matching the
|
|
disabled selects the Blade profile rendered.
|
|
-->
|
|
<UserDetailsForm
|
|
v-model="details"
|
|
locked
|
|
:roles="roles"
|
|
:statuses="statuses"
|
|
:countries="countries"
|
|
:errors="details.errors"
|
|
:submit-label="__('Update Details')"
|
|
:processing="details.processing"
|
|
/>
|
|
</form>
|
|
</template>
|
|
|
|
<template #login>
|
|
<form
|
|
@submit.prevent="
|
|
login.put(route('profile.update.login-details'), {
|
|
preserveScroll: true,
|
|
})
|
|
"
|
|
>
|
|
<LoginDetailsForm
|
|
v-model="login"
|
|
edit
|
|
:errors="login.errors"
|
|
:submit-label="__('Update Details')"
|
|
:processing="login.processing"
|
|
/>
|
|
</form>
|
|
</template>
|
|
|
|
<template #2fa>
|
|
<TwoFactorPanel :user-id="user.id" :two-factor="twoFactor" />
|
|
</template>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
|
|
<AvatarCard
|
|
:avatar="user.avatar"
|
|
:name-or-email="user.nameOrEmail"
|
|
:sources="avatarSources"
|
|
:upload-url="route('profile.update.avatar')"
|
|
:external-url="route('profile.update.avatar-external')"
|
|
/>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|