tethys.backend/resources/js/Pages/Admin/User/AccountInfo.vue

<script setup lang="ts">
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import { useForm } from '@inertiajs/vue3';
// 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 { Inertia } from '@inertiajs/inertia';

const props = defineProps({
  // user will be returned from controller action
  user: {
    type: Object,
    default: () => ({}),
  },
  errors: {
    type: Object,
    default: () => ({}),
  },
});

const profileForm = useForm({
  login: props.user.login,
  email: props.user.email,
});
const profileSubmit = async () => {
    await profileForm.post(stardust.route('admin.account.info.store', [props.user.id]));
};

const passwordForm = useForm({
  old_password: "",
  new_password: "",
  confirm_password: "",
});
const passwordSubmit = async () => {
    await passwordForm.post(stardust.route('admin.account.info.store'), {
        preserveScroll: true,
        onSuccess: (resp) => {
            console.log(resp);
            passwordForm.reset();
        }
    });
};
</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="$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">

        <!-- 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 title="Change Password" :icon="mdiLock" form @submit.prevent="passwordSubmit()">
          <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>

          <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>

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

      </div>
    </SectionMain>
  </LayoutAuthenticated>
</template>