101 lines
4.3 KiB
Vue
101 lines
4.3 KiB
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> |