Cleanup profile
This commit is contained in:
@@ -18,7 +18,7 @@
|
|||||||
<div v-if="!smAndDown" class="w-full ml-64">
|
<div v-if="!smAndDown" class="w-full ml-64">
|
||||||
<div v-if="!brandingStore.loading"
|
<div v-if="!brandingStore.loading"
|
||||||
class="min-h-screen justify-center items-center bg-hBackground">
|
class="min-h-screen justify-center items-center bg-hBackground">
|
||||||
<router-view class="p-2"></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -31,10 +31,10 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/@:creator',
|
path: '/@:creator',
|
||||||
component: CreatorLayout,
|
component: CreatorLayout,
|
||||||
name: 'creator',
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
|
name: 'creator',
|
||||||
component: CreatorHome,
|
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>
|
<template>
|
||||||
|
|
||||||
<div class="flex flex-col gap-8 p-8">
|
<!-- Modal -->
|
||||||
<account-page></account-page>
|
<v-dialog v-model="dialogEditFullnameShown" max-width="800px">
|
||||||
<creator-page></creator-page>
|
<fullname-dialog
|
||||||
</div>
|
: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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import CreatorPage from "@/views/profile/CreatorPage.vue";
|
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
|
||||||
import AccountPage from "@/views/profile/AccountPage.vue";
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
<template>
|
||||||
<v-card>
|
<div class="pb-5 text-2xl">Courriel</div>
|
||||||
<v-card-title>
|
|
||||||
Courriel
|
|
||||||
</v-card-title>
|
|
||||||
|
|
||||||
<div class="m-4">
|
<div class="m-4">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
v-model="email"
|
v-model="email"
|
||||||
label="Votre courriel"
|
label="Votre courriel"
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
</div>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {ref} from 'vue';
|
import {ref} from 'vue';
|
||||||
|
import {useClient} from "@/plugins/api.js";
|
||||||
|
|
||||||
const props = defineProps(['email'])
|
const props = defineProps({
|
||||||
const emit = defineEmits(['close', 'save'])
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const cancel = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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">
|
<div class="flex flex-col space-y-4">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
@@ -68,6 +68,7 @@ const cancel = () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="pb-5 text-2xl">Reseaux Sociaux</div>
|
<div class="pb-5 text-2xl">Reseaux Sociaux</div>
|
||||||
|
|
||||||
<div class="flex flex-row align-center">
|
<div class="flex flex-row align-center">
|
||||||
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
|
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
Reference in New Issue
Block a user