444 lines
15 KiB
Vue
444 lines
15 KiB
Vue
<script setup>
|
|
import {ref, markRaw} from 'vue';
|
|
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
|
|
import {useUserProfileStore} from "@/stores/userProfileStore.js";
|
|
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 ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
|
|
import ChangeNameDialog from '@/views/profile/creators/ChangeNameDialog.vue';
|
|
import ChangeSlugDialog from '@/views/profile/creators/ChangeSlugDialog.vue';
|
|
import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
|
|
import Youtube from "@/views/svg/Youtube.vue";
|
|
import Web from "@/views/svg/Web.vue";
|
|
import Reddit from "@/views/svg/Reddit.vue";
|
|
import X from "@/views/svg/X.vue";
|
|
import Linkedin from "@/views/svg/Linkedin.vue";
|
|
import Tiktok from "@/views/svg/Tiktok.vue";
|
|
import Instagram from "@/views/svg/Instagram.vue";
|
|
import Facebook from "@/views/svg/Facebook.vue";
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
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 dialogShown = ref(false);
|
|
const currentComponent = ref('');
|
|
const restoreDialogShown = ref(false);
|
|
const deleteDialogShown = ref(false);
|
|
|
|
const componentsMap = {
|
|
EmailDialog: markRaw(EmailDialog),
|
|
SocialsDialog: markRaw(SocialsDialog),
|
|
ChangeSlugDialog: markRaw(ChangeSlugDialog),
|
|
ChangeNameDialog: markRaw(ChangeNameDialog),
|
|
ChangeTitleDialog: markRaw(ChangeTitleDialog),
|
|
ChangeStripeIdDialog: markRaw(ChangeStripeIdDialog),
|
|
};
|
|
|
|
function requestCancel() {
|
|
currentComponent.value = null;
|
|
dialogShown.value = false;
|
|
}
|
|
|
|
const openDialog = (component) => {
|
|
currentComponent.value = componentsMap[component];
|
|
dialogShown.value = true;
|
|
};
|
|
|
|
const closeDialog = () => {
|
|
currentComponent.value = null;
|
|
dialogShown.value = false;
|
|
};
|
|
|
|
function handleRestore() {
|
|
creatorProfileStore.restoreCreatorPage();
|
|
restoreDialogShown.value = false;
|
|
}
|
|
|
|
function handleDelete() {
|
|
creatorProfileStore.removeCreatorPage();
|
|
deleteDialogShown.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="min-h-screen w-full">
|
|
|
|
<v-dialog v-model="dialogEditFullnameShown">
|
|
<fullname-dialog
|
|
:firstname="userProfileStore.user.firstname"
|
|
:lastname="userProfileStore.user.lastname"
|
|
@close="handleCloseEditFullname"
|
|
@save="handleSaveEditFullname"
|
|
></fullname-dialog>
|
|
</v-dialog>
|
|
<v-dialog v-model="dialogEditAliasShown">
|
|
<alias-dialog
|
|
:alias="userProfileStore.user.alias"
|
|
@close="handleCloseEditAlias"
|
|
@save="handleSaveEditAlias"
|
|
></alias-dialog>
|
|
</v-dialog>
|
|
<v-dialog v-model="dialogShown">
|
|
<component
|
|
:is="currentComponent"
|
|
:creator="creatorProfileStore.creator"
|
|
:email="userProfileStore.user.email"
|
|
@closeRequested="closeDialog"
|
|
></component>
|
|
</v-dialog>
|
|
<v-dialog v-model="restoreDialogShown">
|
|
<div class="card dialog">
|
|
<div class="card-title">{{ t('restoreCreatorPage') }}</div>
|
|
<div class="card-content">
|
|
<p>{{ t('restoreWarning') }}</p>
|
|
<div class="card-actions">
|
|
<button class="secondary" @click="restoreDialogShown = false">
|
|
{{ t('cancel') }}
|
|
</button>
|
|
<button class="primary" @click="handleRestore">
|
|
{{ t('accept') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-dialog>
|
|
<v-dialog v-model="deleteDialogShown">
|
|
<div class="card dialog">
|
|
<div class="card-title">{{ t('deleteCreatorPage') }}</div>
|
|
<div class="card-content">
|
|
<p>{{ t('deleteWarning') }}</p>
|
|
<div class="card-actions">
|
|
<button class="secondary" @click="deleteDialogShown = false">
|
|
{{ t('cancel') }}
|
|
</button>
|
|
<button class="primary danger-action" @click="handleDelete">
|
|
{{ t('accept') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-dialog>
|
|
|
|
<div class="flex flex-col items-center gap-4 m-4">
|
|
|
|
<div class="card">
|
|
|
|
<div class="card-title">
|
|
{{ t('personalInfo') }}
|
|
</div>
|
|
|
|
<div class="content">
|
|
<button
|
|
class="action"
|
|
@click="openEditFullname">
|
|
<span class="label">{{ t('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('alias') }}</span>
|
|
<span class="value">{{ userProfileStore.user.alias }}</span>
|
|
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card">
|
|
|
|
<div class="card-title">
|
|
{{ t('contactInfo') }}
|
|
</div>
|
|
|
|
<div class="content">
|
|
<button class="action" @click="openDialog('EmailDialog')">
|
|
<span class="label">{{ t('email') }}</span>
|
|
<span class="value">{{ userProfileStore.user.email }}</span>
|
|
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<template v-if="creatorProfileStore.creator !== undefined">
|
|
<div class="card">
|
|
<div class="card-title">
|
|
{{ t('creatorInfo') }}
|
|
</div>
|
|
<div class="content">
|
|
|
|
<!-- NAME -->
|
|
<button class="action" @click="openDialog('ChangeNameDialog')">
|
|
<span class="label">{{ t('name') }}</span>
|
|
<span class="value">{{ creatorProfileStore.creator.name }}</span>
|
|
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
|
</button>
|
|
|
|
<button class="action" @click="openDialog('ChangeSlugDialog')">
|
|
<span class="label">{{ t('username') }}</span>
|
|
<span class="value">@{{ creatorProfileStore.creator.slug }}</span>
|
|
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
|
</button>
|
|
|
|
<!-- TITLE -->
|
|
<button class="action" @click="openDialog('ChangeTitleDialog')">
|
|
<span class="label">{{ t('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">{{ t('stripeAccountId') }}</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="card-title">
|
|
{{ t('socialNetworks') }}
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<button class="action" @click="openDialog('SocialsDialog')">
|
|
<span class="label">
|
|
<facebook class="social-icon"></facebook>
|
|
</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">
|
|
<instagram class="social-icon"></instagram>
|
|
</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 class="social-icon"></x>
|
|
</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">
|
|
<linkedin class="social-icon"></linkedin>
|
|
</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">
|
|
<tiktok class="social-icon"></tiktok>
|
|
</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">
|
|
<youtube class="social-icon"></youtube>
|
|
</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">
|
|
<reddit class="social-icon"></reddit>
|
|
</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">
|
|
<web class="social-icon"></web>
|
|
</span>
|
|
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
|
|
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-title">{{ t('dangerZone') }}</div>
|
|
<div class="content">
|
|
<p>
|
|
{{ t('dangerZoneWarning') }}
|
|
</p>
|
|
<button v-if="!creatorProfileStore.creator.isDeleted"
|
|
class="primary danger-action"
|
|
@click="deleteDialogShown = true">
|
|
{{ t('deleteCreatorPage') }}
|
|
</button>
|
|
<button v-else
|
|
class="primary safe-action"
|
|
@click="restoreDialogShown = true">
|
|
{{ t('restoreCreatorPage') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
@apply bg-hBackground rounded-lg p-4 w-full max-w-2xl;
|
|
}
|
|
|
|
.card-title {
|
|
@apply text-hOnBackground text-lg font-bold mb-4;
|
|
}
|
|
|
|
.content {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.action {
|
|
@apply flex flex-row items-center justify-between w-full p-2 rounded-lg;
|
|
@apply hover:bg-hSurface;
|
|
}
|
|
|
|
.label {
|
|
@apply text-hOnBackground;
|
|
}
|
|
|
|
.value {
|
|
@apply text-hOnBackground opacity-70;
|
|
}
|
|
|
|
.chevron {
|
|
@apply text-hOnBackground opacity-70;
|
|
}
|
|
|
|
.social-icon {
|
|
@apply fill-current w-6 h-6;
|
|
@apply text-hOnBackground;
|
|
}
|
|
|
|
.danger-action {
|
|
@apply bg-red-800 hover:bg-red-700 active:bg-red-600;
|
|
}
|
|
|
|
.safe-action {
|
|
@apply bg-green-800 hover:bg-green-700 active:bg-green-600;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"personalInfo": "Personal Information",
|
|
"fullName": "Full Name",
|
|
"alias": "Alias",
|
|
"contactInfo": "Contact Information",
|
|
"email": "Email",
|
|
"creatorInfo": "Creator Information",
|
|
"dangerZone": "Danger Zone",
|
|
"dangerZoneWarning": "The actions below can have significant impacts on your creator page. Please proceed with caution.",
|
|
"deleteWarning": "Are you sure you want to delete your creator page? This action cannot be undone.",
|
|
"restoreWarning": "Are you sure you want to restore your creator page? This will make your page visible again.",
|
|
"deleteCreatorPage": "Delete Creator Page",
|
|
"restoreCreatorPage": "Restore Creator Page"
|
|
},
|
|
"fr": {
|
|
"personalInfo": "Informations Personnelles",
|
|
"fullName": "Nom Complet",
|
|
"alias": "Alias",
|
|
"contactInfo": "Informations de Contact",
|
|
"email": "Email",
|
|
"creatorInfo": "Informations du Créateur",
|
|
"dangerZone": "Zone de Danger",
|
|
"dangerZoneWarning": "Les actions ci-dessous peuvent avoir des impacts significatifs sur votre page de créateur. Veuillez procéder avec précaution.",
|
|
"deleteWarning": "Êtes-vous sûr de vouloir supprimer votre page de créateur ? Cette action est irréversible.",
|
|
"restoreWarning": "Êtes-vous sûr de vouloir restaurer votre page de créateur ? Cela rendra votre page à nouveau visible.",
|
|
"deleteCreatorPage": "Supprimer la Page Créateur",
|
|
"restoreCreatorPage": "Restaurer la Page Créateur"
|
|
},
|
|
"es": {
|
|
"personalInfo": "Información Personal",
|
|
"fullName": "Nombre Completo",
|
|
"alias": "Alias",
|
|
"contactInfo": "Información de Contacto",
|
|
"email": "Correo Electrónico",
|
|
"creatorInfo": "Información del Creador",
|
|
"dangerZone": "Zona de Peligro",
|
|
"dangerZoneWarning": "Las acciones a continuación pueden tener impactos significativos en tu página de creador. Por favor, procede con precaución.",
|
|
"deleteWarning": "¿Estás seguro de que quieres eliminar tu página de creador? Esta acción no se puede deshacer.",
|
|
"restoreWarning": "¿Estás seguro de que quieres restaurar tu página de creador? Esto hará que tu página sea visible nuevamente.",
|
|
"deleteCreatorPage": "Eliminar Página de Creador",
|
|
"restoreCreatorPage": "Restaurar Página de Creador"
|
|
}
|
|
}
|
|
</i18n> |