tethys.backend/resources/js/Pages/ProfileView.vue

<script setup>
import { reactive } from "vue";
import { MainService } from "@/Stores/main";
import {
    mdiAccount,
    mdiMail,
    mdiAsterisk,
    mdiFormTextboxPassword,
    mdiGithub,
} 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 FormFilePicker from "@/Components/FormFilePicker.vue";
import BaseButton from "@/Components/BaseButton.vue";
import BaseButtons from "@/Components/BaseButtons.vue";
// import UserCard from "@/Components/UserCard.vue";
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue";
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue";
const mainService = MainService();
const profileForm = reactive({
    name: mainService.userName,
    email: mainService.userEmail,
});
const passwordForm = reactive({
    password_current: "",
    password: "",
    password_confirmation: "",
});
const submitProfile = () => {
    mainService.setUser(profileForm);
};
const submitPass = () => {
    //
};
</script>

<template>
    <LayoutAuthenticated>
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
                <BaseButton href="https://github.com/justboil/admin-one-vue-tailwind" target="_blank" :icon="mdiGithub"
                    label="Star on GitHub" color="contrast" rounded-full small />
            </SectionTitleLineWithButton>

            <UserCard class="mb-6" />

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <CardBox is-form @submit.prevent="submitProfile">
                    <FormField label="Avatar" help="Max 500kb">
                        <FormFilePicker label="Upload" />
                    </FormField>

                    <FormField label="Name" help="Required. Your name">
                        <FormControl v-model="profileForm.name" :icon="mdiAccount" name="username" required
                            autocomplete="username" />
                    </FormField>
                    <FormField label="E-mail" help="Required. Your e-mail">
                        <FormControl v-model="profileForm.email" :icon="mdiMail" type="email" name="email" required
                            autocomplete="email" />
                    </FormField>

                    <template #footer>
                        <BaseButtons>
                            <BaseButton color="info" type="submit" label="Submit" />
                            <BaseButton color="info" label="Options" outline />
                        </BaseButtons>
                    </template>
                </CardBox>

                <CardBox is-form @submit.prevent="submitPass">
                    <FormField label="Current password" help="Required. Your current password">
                        <FormControl v-model="passwordForm.password_current" :icon="mdiAsterisk" name="password_current"
                            type="password" required autocomplete="current-password" />
                    </FormField>

                    <BaseDivider />

                    <FormField label="New password" help="Required. New password">
                        <FormControl v-model="passwordForm.password" :icon="mdiFormTextboxPassword" name="password"
                            type="password" required autocomplete="new-password" />
                    </FormField>

                    <FormField label="Confirm password" help="Required. New password one more time">
                        <FormControl v-model="passwordForm.password_confirmation" :icon="mdiFormTextboxPassword"
                            name="password_confirmation" type="password" required autocomplete="new-password" />
                    </FormField>

                    <template #footer>
                        <BaseButtons>
                            <BaseButton type="submit" color="info" label="Submit" />
                            <BaseButton color="info" label="Options" outline />
                        </BaseButtons>
                    </template>
                </CardBox>
            </div>
        </SectionMain>
    </LayoutAuthenticated>
</template>