Cleanup profile
This commit is contained in:
@@ -18,7 +18,7 @@
|
||||
<div v-if="!smAndDown" class="w-full ml-64">
|
||||
<div v-if="!brandingStore.loading"
|
||||
class="min-h-screen justify-center items-center bg-hBackground">
|
||||
<router-view class="p-2"></router-view>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,10 +31,10 @@ const routes = [
|
||||
{
|
||||
path: '/@:creator',
|
||||
component: CreatorLayout,
|
||||
name: 'creator',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'creator',
|
||||
component: CreatorHome,
|
||||
}
|
||||
],
|
||||
|
||||
@@ -1,293 +0,0 @@
|
||||
<template>
|
||||
|
||||
<v-card rounded="xl" class="w-full">
|
||||
|
||||
<v-card-title>
|
||||
{{ $t('personnalinformation.informations') }}
|
||||
</v-card-title>
|
||||
|
||||
<!-- <button-->
|
||||
<!-- class="editableValue"-->
|
||||
<!-- @click="openEditPortrait">-->
|
||||
<!-- <span class="label">{{ $t('personnalinformation.profilepicture') }}</span>-->
|
||||
<!-- <span class="value">Un portrait vous permet de personnaliser votre profil</span>-->
|
||||
<!-- <span>-->
|
||||
<!-- <img-->
|
||||
<!-- :src="userProfileStore.user.portraitUrl"-->
|
||||
<!-- alt="Profile Image"-->
|
||||
<!-- class="rounded-full"-->
|
||||
<!-- width="48px"-->
|
||||
<!-- height="48px"/>-->
|
||||
<!-- </span>-->
|
||||
<!-- </button>-->
|
||||
|
||||
<button
|
||||
class="editableValue"
|
||||
@click="openEditFullname">
|
||||
<span class="label">{{ $t('personnalinformation.fullname') }}</span>
|
||||
<span class="value">{{ userProfileStore.fullname }}</span>
|
||||
<span><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="editableValue"
|
||||
@click="openEditAlias">
|
||||
<span class="label">{{ $t('personnalinformation.alias') }}</span>
|
||||
<span class="value">{{ userProfileStore.user.alias }}</span>
|
||||
<span><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<!-- <button-->
|
||||
<!-- class="editableValue"-->
|
||||
<!-- @click="openEditBirthday">-->
|
||||
<!-- <span class="label">{{ $t('personnalinformation.dob') }}</span>-->
|
||||
<!-- <span class="value">{{ userProfileStore.user.birthDate }}</span>-->
|
||||
<!-- <span><v-icon>mdi-chevron-right</v-icon></span>-->
|
||||
<!-- </button>-->
|
||||
|
||||
</v-card>
|
||||
|
||||
<!-- Phone & email -->
|
||||
<v-card rounded="xl" class="w-full">
|
||||
<v-card-title>
|
||||
{{ $t('personnalinformation.contactdetails') }}
|
||||
</v-card-title>
|
||||
|
||||
<button
|
||||
class="editableValue"
|
||||
@click="openEditEmail">
|
||||
<span class="label">{{ $t('personnalinformation.email') }}</span>
|
||||
<span class="value">{{ userProfileStore.user.email }}</span>
|
||||
<span><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<!-- <button-->
|
||||
<!-- class="editableValue"-->
|
||||
<!-- @click="openEditPhone">-->
|
||||
<!-- <span class="label">{{ $t('personnalinformation.phone') }}</span>-->
|
||||
<!-- <span class="value">{{ userProfileStore.user.phoneNumber }}</span>-->
|
||||
<!-- <span><v-icon>mdi-chevron-right</v-icon></span>-->
|
||||
<!-- </button>-->
|
||||
</v-card>
|
||||
|
||||
<!-- Address -->
|
||||
<!-- <v-card class="w-full">-->
|
||||
<!-- <v-card-title>-->
|
||||
<!-- {{ $t('personnalinformation.addresses') }}-->
|
||||
<!-- </v-card-title>-->
|
||||
|
||||
<!-- <button-->
|
||||
<!-- class="editableValue"-->
|
||||
<!-- @click="openEditAddress">-->
|
||||
<!-- <span class="label">{{ $t('personnalinformation.home') }}</span>-->
|
||||
<!-- <span class="value">{{ userProfileStore.user.address }}</span>-->
|
||||
<!-- <span><v-icon>mdi-chevron-right</v-icon></span>-->
|
||||
<!-- </button>-->
|
||||
<!-- </v-card>-->
|
||||
|
||||
<!-- Modal -->
|
||||
<v-dialog v-model="dialogEditPortraitShown" max-width="600px">
|
||||
<portrait-dialog
|
||||
:portrait-url="userProfileStore.user.portraitUrl"
|
||||
@close="handleCloseEditPortrait"
|
||||
@save="handleSaveEditPortrait"
|
||||
></portrait-dialog>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialogEditFullnameShown" max-width="600px">
|
||||
<fullname-dialog
|
||||
:firstname="userProfileStore.user.firstname"
|
||||
:lastname="userProfileStore.user.lastname"
|
||||
@close="handleCloseEditFullname"
|
||||
@save="handleSaveEditFullname"
|
||||
></fullname-dialog>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialogEditAliasShown" max-width="600px">
|
||||
<alias-dialog
|
||||
:alias="userProfileStore.user.alias"
|
||||
@close="handleCloseEditAlias"
|
||||
@save="handleSaveEditAlias"
|
||||
></alias-dialog>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialogEditBirthdayShown" max-width="600px">
|
||||
<birthday-dialog
|
||||
:birth-date="userProfileStore.user.birthDate"
|
||||
@close="handleCloseEditBirthday"
|
||||
@save="handleSaveEditBirthday"
|
||||
></birthday-dialog>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialogEditPhoneShown" max-width="600px">
|
||||
<phone-dialog
|
||||
:phone="userProfileStore.user.phoneNumber"
|
||||
@close="handleCloseEditPhone"
|
||||
@save="handleSaveEditPhone"
|
||||
></phone-dialog>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialogEditEmailShown" max-width="600px">
|
||||
<email-dialog
|
||||
:email="userProfileStore.user.email"
|
||||
@close="handleCloseEditEmail"
|
||||
@save="handleSaveEditEmail"
|
||||
></email-dialog>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialogEditAddressShown" max-width="600px">
|
||||
<address-dialog
|
||||
:address="userProfileStore.user.address"
|
||||
@close="handleCloseEditAddress"
|
||||
@save="handleSaveEditAddress"
|
||||
></address-dialog>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
import AddressDialog from './account/AddressDialog.vue';
|
||||
import EmailDialog from "./account/EmailDialog.vue";
|
||||
import PhoneDialog from "@/views/profile/account/PhoneDialog.vue";
|
||||
import BirthdayDialog from "@/views/profile/account/BirthdayDialog.vue";
|
||||
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
|
||||
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
|
||||
import PortraitDialog from "@/views/profile/account/PortraitDialog.vue";
|
||||
import {useUserProfileStore} from "@/stores/userProfileStore.js";
|
||||
|
||||
const userProfileStore = useUserProfileStore()
|
||||
|
||||
|
||||
// ### Portrait
|
||||
|
||||
const dialogEditPortraitShown = ref(false)
|
||||
|
||||
function openEditPortrait() {
|
||||
dialogEditPortraitShown.value = true
|
||||
}
|
||||
|
||||
function handleCloseEditPortrait() {
|
||||
dialogEditPortraitShown.value = false
|
||||
}
|
||||
|
||||
function handleSaveEditPortrait(portraitData) {
|
||||
userProfileStore.changePortrait(portraitData)
|
||||
dialogEditPortraitShown.value = false
|
||||
}
|
||||
|
||||
// ### Fullname
|
||||
|
||||
const dialogEditFullnameShown = ref(false)
|
||||
|
||||
function openEditFullname() {
|
||||
dialogEditFullnameShown.value = true
|
||||
}
|
||||
|
||||
function handleCloseEditFullname() {
|
||||
dialogEditFullnameShown.value = false
|
||||
}
|
||||
|
||||
function handleSaveEditFullname(firstname, lastname) {
|
||||
userProfileStore.changeFullname(firstname, lastname)
|
||||
dialogEditFullnameShown.value = false
|
||||
}
|
||||
|
||||
// ### Alias
|
||||
|
||||
const dialogEditAliasShown = ref(false)
|
||||
|
||||
function openEditAlias() {
|
||||
dialogEditAliasShown.value = true
|
||||
}
|
||||
|
||||
function handleCloseEditAlias() {
|
||||
dialogEditAliasShown.value = false
|
||||
}
|
||||
|
||||
function handleSaveEditAlias(alias) {
|
||||
userProfileStore.changeAlias(alias)
|
||||
dialogEditAliasShown.value = false
|
||||
}
|
||||
|
||||
// ### Birthday
|
||||
|
||||
const dialogEditBirthdayShown = ref(false)
|
||||
|
||||
function openEditBirthday() {
|
||||
dialogEditBirthdayShown.value = true
|
||||
}
|
||||
|
||||
function handleCloseEditBirthday() {
|
||||
dialogEditBirthdayShown.value = false
|
||||
}
|
||||
|
||||
function handleSaveEditBirthday(birthday) {
|
||||
userProfileStore.changeBirthday(birthday)
|
||||
dialogEditBirthdayShown.value = false
|
||||
}
|
||||
|
||||
// ### Phone
|
||||
|
||||
const dialogEditPhoneShown = ref(false)
|
||||
|
||||
function openEditPhone() {
|
||||
dialogEditPhoneShown.value = true
|
||||
}
|
||||
|
||||
function handleCloseEditPhone() {
|
||||
dialogEditPhoneShown.value = false
|
||||
}
|
||||
|
||||
function handleSaveEditPhone(phone) {
|
||||
userProfileStore.changePhone(phone)
|
||||
dialogEditPhoneShown.value = false
|
||||
}
|
||||
|
||||
// ### Email
|
||||
|
||||
const dialogEditEmailShown = ref(false)
|
||||
|
||||
function openEditEmail() {
|
||||
dialogEditEmailShown.value = true
|
||||
}
|
||||
|
||||
function handleCloseEditEmail() {
|
||||
dialogEditEmailShown.value = false
|
||||
}
|
||||
|
||||
function handleSaveEditEmail(email) {
|
||||
userProfileStore.changeEmail(email)
|
||||
dialogEditEmailShown.value = false
|
||||
}
|
||||
|
||||
// ### ADDRESS
|
||||
const dialogEditAddressShown = ref(false)
|
||||
|
||||
function openEditAddress() {
|
||||
dialogEditAddressShown.value = true
|
||||
}
|
||||
|
||||
function handleCloseEditAddress() {
|
||||
dialogEditAddressShown.value = false
|
||||
}
|
||||
|
||||
function handleSaveEditAddress(address) {
|
||||
userProfileStore.changeAddress(address)
|
||||
dialogEditAddressShown.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.editableValue {
|
||||
@apply py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
|
||||
@apply hover:bg-[#A6147D] hover:text-white hover:opacity-90;
|
||||
}
|
||||
|
||||
.label {
|
||||
@apply p-2 min-w-40 text-left;
|
||||
}
|
||||
|
||||
.value {
|
||||
@apply flex-auto pr-6 text-left;
|
||||
}
|
||||
</style>
|
||||
@@ -1,257 +0,0 @@
|
||||
<script setup>
|
||||
import XIcon from '@/assets/icons/x.svg';
|
||||
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
|
||||
import ChangeStripeID from '@/views/profile/creators/ChangeStripeID.vue';
|
||||
import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
|
||||
import {ref} from 'vue';
|
||||
import LogoPicker from '../creators/CreatorLogoEditor.vue';
|
||||
import Socials from './creators/Socials.vue';
|
||||
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
|
||||
const dialog = ref(false);
|
||||
const currentComponent = ref('');
|
||||
|
||||
const componentsMap = {
|
||||
LogoPicker,
|
||||
Socials,
|
||||
ChangeTitle,
|
||||
ChangeStripeID,
|
||||
};
|
||||
|
||||
function requestCancel() {
|
||||
currentComponent.value = null;
|
||||
dialog.value = false;
|
||||
}
|
||||
|
||||
const openDialog = (component) => {
|
||||
currentComponent.value = componentsMap[component];
|
||||
dialog.value = true;
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
currentComponent.value = null;
|
||||
dialog.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog v-model="dialog" max-width="800px">
|
||||
<v-card
|
||||
:style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }"
|
||||
>
|
||||
<v-card-text>
|
||||
<component
|
||||
:is="currentComponent"
|
||||
:creator="creatorProfileStore.creator"
|
||||
@closeRequested="closeDialog"
|
||||
@requestAccept="requestAccept"
|
||||
@requestCancel="requestCancel"
|
||||
></component>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Lorsque l'utilisateur n'a pas de creator name-->
|
||||
<v-card rounded="xl" class="w-full">
|
||||
<h1 class="uppercase">
|
||||
{{ $t('creatorinfopage.informations') }}
|
||||
</h1>
|
||||
|
||||
<!-- INFOS -->
|
||||
<div class="flex flex-col w-full">
|
||||
<button
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="flex-none pa-2 min-w-32 text-left">
|
||||
{{ $t('creatorinfopage.name') }}
|
||||
</span>
|
||||
|
||||
<span class="flex-auto text-left pr-6 capitalize">
|
||||
{{ creatorProfileStore.creator.name }}
|
||||
</span>
|
||||
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TITLE -->
|
||||
<div class="flex flex-col w-full">
|
||||
<button
|
||||
@click="openDialog('ChangeTitle')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="flex-none pa-2 min-w-32 text-left">{{
|
||||
$t('creatorinfopage.title')
|
||||
}}</span>
|
||||
<span class="flex-auto text-left pr-6 capitalize">`{{
|
||||
creatorProfileStore.creator.title
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- STRIPE -->
|
||||
<div class="flex flex-col w-full">
|
||||
<button
|
||||
@click="openDialog('ChangeStripeID')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b"
|
||||
>
|
||||
<span class="flex-none pa-2 min-w-32 text-left"
|
||||
>Stripe Account ID</span
|
||||
>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.stripeId
|
||||
}}</span>
|
||||
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
|
||||
<v-card rounded="xl" class="w-full">
|
||||
<div class="uppercase">
|
||||
{{ $t('creatorinfopage.socialnetwork') }}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="pa-2 min-w-32 text-left">
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
</span>
|
||||
|
||||
<span class="flex-auto text-left pr-6">
|
||||
{{ creatorProfileStore.creator.socials?.facebookUrl }}
|
||||
</span>
|
||||
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="flex-none pa-2 min-w-32 text-left">
|
||||
<v-icon>mdi-instagram</v-icon></span
|
||||
>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.socials?.instagramUrl
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="flex-none pa-2 w-9 h-9 text-left ml-0.5">
|
||||
<XIcon></XIcon>
|
||||
</span>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.socials?.xUrl
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="pa-2 min-w-32 text-left"
|
||||
><v-icon>mdi-linkedin</v-icon></span
|
||||
>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.socials?.linkedInUrl
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="flex-none pa-2 min-w-32 text-left">
|
||||
<XIcon class="w-5 h-5"></XIcon>
|
||||
</span>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.socials?.tikTokUrl
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="pa-2 min-w-32 text-left"
|
||||
><v-icon>mdi-youtube</v-icon></span
|
||||
>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.socials?.youtubeUrl
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
|
||||
>
|
||||
<span class="pa-2 min-w-32 text-left"
|
||||
><v-icon>mdi-reddit</v-icon></span
|
||||
>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.socials?.redditUrl
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b"
|
||||
>
|
||||
<span class="pa-2 min-w-32 text-left"
|
||||
><v-icon>mdi-web</v-icon></span
|
||||
>
|
||||
<span class="flex-auto text-left pr-6">{{
|
||||
creatorProfileStore.creator.socials?.websiteUrl
|
||||
}}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.HoverBtn:hover {
|
||||
@apply bg-[#A6147D] text-white;
|
||||
@apply hover:opacity-90;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,284 @@
|
||||
<template>
|
||||
|
||||
<div class="flex flex-col gap-8 p-8">
|
||||
<account-page></account-page>
|
||||
<creator-page></creator-page>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<v-dialog v-model="dialogEditFullnameShown" max-width="800px">
|
||||
<fullname-dialog
|
||||
:firstname="userProfileStore.user.firstname"
|
||||
:lastname="userProfileStore.user.lastname"
|
||||
@close="handleCloseEditFullname"
|
||||
@save="handleSaveEditFullname"
|
||||
></fullname-dialog>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="dialogEditAliasShown" max-width="800px">
|
||||
<alias-dialog
|
||||
:alias="userProfileStore.user.alias"
|
||||
@close="handleCloseEditAlias"
|
||||
@save="handleSaveEditAlias"
|
||||
></alias-dialog>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Creator Section (integrated directly) -->
|
||||
<v-dialog v-model="dialog" max-width="800px">
|
||||
<div class="card">
|
||||
<component
|
||||
:is="currentComponent"
|
||||
:creator="creatorProfileStore.creator"
|
||||
@closeRequested="closeDialog"
|
||||
></component>
|
||||
</div>
|
||||
</v-dialog>
|
||||
|
||||
<div class="space-y-6 p-4">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="title">
|
||||
{{ $t('personnalinformation.informations') }}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<button
|
||||
class="action"
|
||||
@click="openEditFullname">
|
||||
<span class="label">{{ $t('personnalinformation.fullname') }}</span>
|
||||
<span class="value">{{ userProfileStore.fullname }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="action"
|
||||
@click="openEditAlias">
|
||||
<span class="label">{{ $t('personnalinformation.alias') }}</span>
|
||||
<span class="value">{{ userProfileStore.user.alias }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Phone & email -->
|
||||
<div class="card">
|
||||
|
||||
<div class="title">
|
||||
{{ $t('personnalinformation.contactdetails') }}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<button class="action" @click="openDialog('EmailDialog')">
|
||||
<span class="label">{{ $t('personnalinformation.email') }}</span>
|
||||
<span class="value">{{ userProfileStore.user.email }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Lorsque l'utilisateur n'a pas de creator name-->
|
||||
<div class="card">
|
||||
|
||||
<div class="title">
|
||||
{{ $t('creatorinfopage.informations') }}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<!-- NAME -->
|
||||
<button class="action">
|
||||
<span class="label">{{ $t('creatorinfopage.name') }}</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.name }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<!-- TITLE -->
|
||||
<button class="action" @click="openDialog('ChangeTitleDialog')">
|
||||
<span class="label">{{ $t('creatorinfopage.title') }}</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.title }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<!-- STRIPE -->
|
||||
<button class="action" @click="openDialog('ChangeStripeIdDialog')">
|
||||
<span class="label">Stripe Account ID</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="title">
|
||||
{{ $t('creatorinfopage.socialnetwork') }}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-facebook</v-icon></span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-instagram</v-icon></span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-linkedin</v-icon></span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-youtube</v-icon></span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-reddit</v-icon></span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-web</v-icon></span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CreatorPage from "@/views/profile/CreatorPage.vue";
|
||||
import AccountPage from "@/views/profile/AccountPage.vue";
|
||||
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
|
||||
import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
|
||||
import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
|
||||
import {ref} from 'vue';
|
||||
import SocialsDialog from './creators/SocialsDialog.vue';
|
||||
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
|
||||
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
|
||||
import EmailDialog from "@/views/profile/account/EmailDialog.vue";
|
||||
import {useUserProfileStore} from "@/stores/userProfileStore.js";
|
||||
import XIcon from "@/assets/icons/x.svg"
|
||||
|
||||
const userProfileStore = useUserProfileStore()
|
||||
|
||||
// ### Fullname
|
||||
const dialogEditFullnameShown = ref(false)
|
||||
function openEditFullname() {
|
||||
dialogEditFullnameShown.value = true
|
||||
}
|
||||
function handleCloseEditFullname() {
|
||||
dialogEditFullnameShown.value = false
|
||||
}
|
||||
function handleSaveEditFullname(firstname, lastname) {
|
||||
userProfileStore.changeFullname(firstname, lastname)
|
||||
dialogEditFullnameShown.value = false
|
||||
}
|
||||
|
||||
// ### Alias
|
||||
const dialogEditAliasShown = ref(false)
|
||||
function openEditAlias() {
|
||||
dialogEditAliasShown.value = true
|
||||
}
|
||||
function handleCloseEditAlias() {
|
||||
dialogEditAliasShown.value = false
|
||||
}
|
||||
function handleSaveEditAlias(alias) {
|
||||
userProfileStore.changeAlias(alias)
|
||||
dialogEditAliasShown.value = false
|
||||
}
|
||||
|
||||
// ### Email
|
||||
const dialogEditEmailShown = ref(false)
|
||||
function openEditEmail() {
|
||||
dialogEditEmailShown.value = true
|
||||
}
|
||||
function handleCloseEditEmail() {
|
||||
dialogEditEmailShown.value = false
|
||||
}
|
||||
function handleSaveEditEmail(firstname, lastname) {
|
||||
userProfileStore.changeEmail(firstname, lastname)
|
||||
dialogEditEmailShown.value = false
|
||||
}
|
||||
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
|
||||
const dialog = ref(false);
|
||||
const currentComponent = ref('');
|
||||
|
||||
const componentsMap = {
|
||||
EmailDialog,
|
||||
SocialsDialog,
|
||||
ChangeTitleDialog,
|
||||
ChangeStripeIdDialog,
|
||||
};
|
||||
|
||||
function requestCancel() {
|
||||
currentComponent.value = null;
|
||||
dialog.value = false;
|
||||
}
|
||||
|
||||
const openDialog = (component) => {
|
||||
currentComponent.value = componentsMap[component];
|
||||
dialog.value = true;
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
currentComponent.value = null;
|
||||
dialog.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
.card {
|
||||
@apply p-4 bg-hSurface text-hOnSurface shadow-md rounded-lg mb-4;
|
||||
}
|
||||
|
||||
.title {
|
||||
@apply text-lg font-semibold text-hOnSecondary mb-2;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply text-base font-semibold text-hOnSurface flex flex-col w-full;
|
||||
}
|
||||
|
||||
.action {
|
||||
@apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
|
||||
}
|
||||
|
||||
.label {
|
||||
@apply flex-none min-w-32 text-left;
|
||||
}
|
||||
|
||||
.value {
|
||||
@apply flex-auto text-left pr-6 capitalize;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
@apply flex-none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,38 +1,60 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Courriel
|
||||
</v-card-title>
|
||||
<div class="pb-5 text-2xl">Courriel</div>
|
||||
|
||||
<div class="m-4">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="email"
|
||||
label="Votre courriel"
|
||||
></v-text-field>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="email"
|
||||
label="Votre courriel"
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-4">
|
||||
<v-btn color="black" variant="text" @click="cancel">
|
||||
Annuler
|
||||
</v-btn>
|
||||
<v-btn color="#A6147D" @click="save">
|
||||
Enregistrer
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn variant="plain" @click="requestClose">
|
||||
Annuler
|
||||
</v-btn>
|
||||
<v-btn color="#A6147D" @click="requestSave">
|
||||
Enregistrer
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
|
||||
const props = defineProps(['email'])
|
||||
const emit = defineEmits(['close', 'save'])
|
||||
const props = defineProps({
|
||||
creator: {
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const email = ref(props.email)
|
||||
const emits = defineEmits(['closeRequested'])
|
||||
|
||||
const email = ref(props.creator.email)
|
||||
|
||||
const client = useClient()
|
||||
const save = async () => {
|
||||
try {
|
||||
await client.post(
|
||||
`/api/creators/${props.creator.id}/email`,
|
||||
{
|
||||
"facebookUrl": facebookUrl.value
|
||||
})
|
||||
|
||||
props.creator.socials.facebookUrl = facebookUrl
|
||||
|
||||
emits('closeRequested')
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
emits('closeRequested')
|
||||
}
|
||||
|
||||
const requestClose = () => emit('close')
|
||||
const requestSave = () => emit('save', email.value)
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ const cancel = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pb-5 text-2xl">Modifier le id Stripe</div>
|
||||
<div class="pb-5 text-2xl">Modifier le Stripe ID</div>
|
||||
<div class="flex flex-col space-y-4">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
@@ -68,6 +68,7 @@ const cancel = () => {
|
||||
|
||||
<template>
|
||||
<div class="pb-5 text-2xl">Reseaux Sociaux</div>
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
|
||||
<v-text-field
|
||||
Reference in New Issue
Block a user