jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): deprecate Spanish language support in the frontend

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-08-26 15:58:06 -04:00
parent d5ca6b9972
commit 262f21d157
41 changed files with 4148 additions and 4212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/locales/es.json
View File

@@ -1,41 +0,0 @@
{
"save": "Guardar",
"cancel": "Cancelar",
"edit": "Editar",
"delete": "Eliminar",
"create": "Crear",
"apply": "Aplicar",
"preview": "Vista previa",
"label": "Etiqueta",
"confirm": "Confirmar",
"close": "Cerrar",
"accept": "Aceptar",
"loading": "Cargando...",
"error": "Error",
"success": "Éxito",
"changesSaved": "Cambios guardados con éxito",
"errorOccurred": "Ha ocurrido un error",
"name": "Nombre",
"email": "Correo electrónico",
"password": "Contraseña",
"description": "Descripción",
"title": "Título",
"image": "Imagen",
"file": "Archivo",
"required": "Este campo es obligatorio",
"invalidEmail": "Correo electrónico inválido",
"invalidPassword": "Contraseña inválida",
"facebook": "Facebook",
"instagram": "Instagram",
"linkedin": "LinkedIn",
"reddit": "Reddit",
"tiktok": "TikTok",
"x": "X (Twitter)",
"youtube": "YouTube",
"website": "Sitio web",
"errors": {
"unexpected": "Ha ocurrido un error inesperado",
"imageLoad": "Error al cargar la imagen",
"imageUpload": "Error al subir la imagen"
}
}

87
frontend/src/main.js
View File

@@ -5,54 +5,71 @@ import { createPinia } from 'pinia';
import 'vuetify/styles'; import 'vuetify/styles';
import { createVuetify } from 'vuetify'; import { createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'; import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
import { VDialog, VApp, VBtn, VProgressLinear, VProgressCircular, VIcon, VTextField, VSnackbar, VForm, VTextarea, VAlert } from 'vuetify/components'; import {
import { } from 'vuetify/directives'; VAlert,
VApp,
VBtn,
VDialog,
VForm,
VIcon,
VProgressCircular,
VProgressLinear,
VSnackbar,
VTextarea,
VTextField,
} from 'vuetify/components';
import vueGoogleOauth from 'vue3-google-login'; import vueGoogleOauth from 'vue3-google-login';
import { useAuthStore } from "@/stores/authStore.js"; import { useAuthStore } from '@/stores/authStore.js';
import { useUserProfileStore } from "@/stores/userProfileStore.js"; import { useUserProfileStore } from '@/stores/userProfileStore.js';
import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js"; import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
import Toast, { POSITION } from 'vue-toastification'; import Toast, { POSITION } from 'vue-toastification';
import 'vue-toastification/dist/index.css'; import 'vue-toastification/dist/index.css';
import './assets/main.css'; import './assets/main.css';
import { createI18n } from 'vue-i18n';
import en from '@/locales/en.json';
import fr from '@/locales/fr.json';
const vuetify = createVuetify({ const vuetify = createVuetify({
components: { components: {
VDialog, VApp, VBtn, VProgressLinear, VProgressCircular, VIcon, VTextField, VSnackbar, VForm, VTextarea, VAlert VDialog,
}, VApp,
directives: { VBtn,
}, VProgressLinear,
icons: { VProgressCircular,
defaultSet: 'mdi', VIcon,
aliases, VTextField,
sets: { mdi } VSnackbar,
} VForm,
VTextarea,
VAlert,
},
directives: {},
icons: {
defaultSet: 'mdi',
aliases,
sets: { mdi },
},
}); });
import { createI18n } from 'vue-i18n'
import en from '@/locales/en.json'
import fr from '@/locales/fr.json'
import es from '@/locales/es.json'
const i18n = createI18n({ const i18n = createI18n({
legacy: false, legacy: false,
fallbackLocale: 'en', fallbackLocale: 'fr',
messages: { messages: {
en: en, en: en,
fr: fr, fr: fr,
es: es },
} });
})
const pinia = createPinia(); const pinia = createPinia();
const app = createApp(App) const app = createApp(App)
.use(pinia) .use(pinia)
.use(vuetify) .use(vuetify)
.use(router) .use(router)
.use(i18n) .use(i18n)
.use(vueGoogleOauth, { .use(vueGoogleOauth, {
clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID, clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
}) })
.use(Toast, { .use(Toast, {
position: POSITION.TOP_CENTER, position: POSITION.TOP_CENTER,
}); });

65
frontend/src/stores/languageStore.js
View File

@@ -1,31 +1,38 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia';
import { useSessionStorage } from '@vueuse/core' import { useSessionStorage } from '@vueuse/core';
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n';
export const useLanguageStore = defineStore( const ALLOWED_LOCALES = ['en', 'fr'];
'language', const DEFAULT_LOCALE = 'fr';
() => {
// Initialize with the stored value or default to 'fr' export const useLanguageStore = defineStore('language', () => {
const storedLocale = useSessionStorage('user-locale', 'fr') const storedLocale = useSessionStorage('user-locale', DEFAULT_LOCALE);
// Get i18n instance // Get i18n instance (provided globally)
const { locale } = useI18n() const { locale } = useI18n();
// Set the initial locale from storage function sanitizeLocale(value) {
if (locale && storedLocale.value) { return ALLOWED_LOCALES.includes(value) ? value : DEFAULT_LOCALE;
locale.value = storedLocale.value
}
function setLocale(newLocale) {
if (locale) {
locale.value = newLocale
}
storedLocale.value = newLocale
}
return {
locale: storedLocale,
setLocale
}
} }
)
// Initialize locale with a sanitized value
const initial = sanitizeLocale(storedLocale.value);
storedLocale.value = initial;
if (locale) {
locale.value = initial;
}
function setLocale(newLocale) {
const next = sanitizeLocale(newLocale);
if (locale) {
locale.value = next;
}
storedLocale.value = next;
}
return {
locale: storedLocale,
setLocale,
allowedLocales: ALLOWED_LOCALES,
};
});

349
frontend/src/views/auth/ForgotPasswordView.vue
View File

@@ -1,209 +1,218 @@
<template> <template>
<div class="flex min-h-full justify-center items-center w-full p-4"> <div class="flex min-h-full justify-center items-center w-full p-4">
<div class="flex flex-col gap-10 w-full max-w-[512px]"> <div class="flex flex-col gap-10 w-full max-w-[512px]">
<h1 class="text-2xl font-bold text-center"> <h1 class="text-2xl font-bold text-center">
{{ t('title') }} {{ t('title') }}
</h1> </h1>
<p class="text-center text-hOnSurface"> <p class="text-center text-hOnSurface">
{{ t('description') }} {{ t('description') }}
</p> </p>
<div class="card"> <div class="card">
<form @submit.prevent="handleForgotPassword"> <form @submit.prevent="handleForgotPassword">
<div class="card-content"> <div class="card-content">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="form-field"> <div class="form-field">
<label for="email" class="form-label">{{ t('email') }}</label> <label
<input class="form-label"
id="email" for="email"
v-model="email" >
type="email" {{ t('email') }}
class="form-input" </label>
required <input
/> id="email"
</div> v-model="email"
class="form-input"
required
type="email"
/>
</div>
<button <button
type="submit" :disabled="isLoading"
class="primary w-full" class="primary w-full"
:disabled="isLoading" type="submit"
> >
<span v-if="isLoading" class="loading-spinner mr-2"></span> <span
{{ t('resetPassword') }} v-if="isLoading"
</button> class="loading-spinner mr-2"
></span>
{{ t('resetPassword') }}
</button>
<div class="text-center mt-4"> <div class="text-center mt-4">
<router-link to="/login" class="text-sm text-blue-500"> <router-link
{{ t('backToLogin') }} class="text-sm text-blue-500"
</router-link> to="/login"
</div> >
{{ t('backToLogin') }}
</router-link>
</div>
</div>
</div>
</form>
</div> </div>
</div>
</form>
</div>
<!-- Success message -->
<div v-if="showSuccessMessage" class="notification success">
{{ t('resetEmailSent') }}
</div>
<!-- Error message --> <!-- Success message -->
<div v-if="showErrorMessage" class="notification error"> <div
{{ errorMessage }} v-if="showSuccessMessage"
</div> class="notification success"
>
{{ t('resetEmailSent') }}
</div>
<!-- Error message -->
<div
v-if="showErrorMessage"
class="notification error"
>
{{ errorMessage }}
</div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue'; import { ref } from 'vue';
import {useI18n} from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {useRouter} from 'vue-router'; import { useRouter } from 'vue-router';
import {useClient} from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
const {t} = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
const clientApi = useClient(); const clientApi = useClient();
const email = ref(''); const email = ref('');
const isLoading = ref(false); const isLoading = ref(false);
const showSuccessMessage = ref(false); const showSuccessMessage = ref(false);
const showErrorMessage = ref(false); const showErrorMessage = ref(false);
const errorMessage = ref(''); const errorMessage = ref('');
async function handleForgotPassword() { async function handleForgotPassword() {
// Reset notification states // Reset notification states
showSuccessMessage.value = false; showSuccessMessage.value = false;
showErrorMessage.value = false; showErrorMessage.value = false;
if (!email.value) { if (!email.value) {
errorMessage.value = t('emailRequired'); errorMessage.value = t('emailRequired');
showErrorMessage.value = true; showErrorMessage.value = true;
return; return;
} }
isLoading.value = true; isLoading.value = true;
try { try {
// Call password reset API // Call password reset API
await clientApi.post('api/users/forgot-password', { await clientApi.post('api/users/forgot-password', {
email: email.value.trim() email: email.value.trim(),
}); });
// Show success message // Show success message
showSuccessMessage.value = true; showSuccessMessage.value = true;
// Clear the form // Clear the form
email.value = ''; email.value = '';
// Redirect to login after a short delay // Redirect to login after a short delay
setTimeout(() => { setTimeout(() => {
router.push('/login'); router.push('/login');
}, 3000); }, 3000);
} catch (error) { } catch (error) {
console.error('Password reset request failed:', error); console.error('Password reset request failed:', error);
errorMessage.value = error.response?.data?.message || t('resetRequestFailed'); errorMessage.value = error.response?.data?.message || t('resetRequestFailed');
showErrorMessage.value = true; showErrorMessage.value = true;
} finally { } finally {
isLoading.value = false; isLoading.value = false;
} }
} }
</script> </script>
<style scoped> <style scoped>
.card-content { .card-content {
@apply p-6; @apply p-6;
} }
.form-field { .form-field {
@apply flex flex-col mb-4; @apply flex flex-col mb-4;
} }
.form-label { .form-label {
@apply block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300; @apply block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300;
} }
.form-input { .form-input {
@apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
dark:bg-gray-700 dark:border-gray-600 dark:text-white; dark:bg-gray-700 dark:border-gray-600 dark:text-white;
} }
.primary { .primary {
@apply bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-sm px-5 py-2.5 @apply bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-sm px-5 py-2.5
focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed; focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed;
} }
.notification { .notification {
@apply fixed bottom-4 right-4 p-4 mb-4 rounded-lg text-sm; @apply fixed bottom-4 right-4 p-4 mb-4 rounded-lg text-sm;
animation: fade-in 0.3s ease-in, fade-out 0.3s ease-out 5s forwards; animation:
} fade-in 0.3s ease-in,
fade-out 0.3s ease-out 5s forwards;
}
.success { .success {
@apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300; @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300;
} }
.error { .error {
@apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300; @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300;
} }
.loading-spinner { .loading-spinner {
@apply inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]; @apply inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite];
} }
@keyframes fade-in { @keyframes fade-in {
from { from {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes fade-out { @keyframes fade-out {
from { from {
opacity: 1; opacity: 1;
} }
to { to {
opacity: 0; opacity: 0;
} }
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Forgot Password?", "title": "Forgot Password?",
"description": "Please enter your account email address. A password reset link will be sent to you.", "description": "Please enter your account email address. A password reset link will be sent to you.",
"email": "Email", "email": "Email",
"resetPassword": "Reset Password", "resetPassword": "Reset Password",
"backToLogin": "Back to Login", "backToLogin": "Back to Login",
"resetEmailSent": "Password reset email sent. Please check your inbox.", "resetEmailSent": "Password reset email sent. Please check your inbox.",
"resetRequestFailed": "Failed to request password reset. Please try again.", "resetRequestFailed": "Failed to request password reset. Please try again.",
"emailRequired": "Email is required." "emailRequired": "Email is required."
}, },
"fr": { "fr": {
"title": "Mot de passe oublié ?", "title": "Mot de passe oublié ?",
"description": "Veuillez saisir l'adresse e-mail de votre compte. Un lien de réinitialisation vous sera envoyé.", "description": "Veuillez saisir l'adresse e-mail de votre compte. Un lien de réinitialisation vous sera envoyé.",
"email": "Email", "email": "Email",
"resetPassword": "Réinitialiser le mot de passe", "resetPassword": "Réinitialiser le mot de passe",
"backToLogin": "Retour à la connexion", "backToLogin": "Retour à la connexion",
"resetEmailSent": "Email de réinitialisation du mot de passe envoyé. Veuillez vérifier votre boîte de réception.", "resetEmailSent": "Email de réinitialisation du mot de passe envoyé. Veuillez vérifier votre boîte de réception.",
"resetRequestFailed": "Échec de la demande de réinitialisation du mot de passe. Veuillez réessayer.", "resetRequestFailed": "Échec de la demande de réinitialisation du mot de passe. Veuillez réessayer.",
"emailRequired": "L'email est requis." "emailRequired": "L'email est requis."
}, }
"es": {
"title": "¿Olvidaste tu contraseña?",
"description": "Por favor, introduce la dirección de correo electrónico de tu cuenta. Te enviaremos un enlace para restablecer tu contraseña.",
"email": "Correo electrónico",
"resetPassword": "Restablecer contraseña",
"backToLogin": "Volver al inicio de sesión",
"resetEmailSent": "Correo electrónico de restablecimiento de contraseña enviado. Por favor revise su bandeja de entrada.",
"resetRequestFailed": "No se pudo solicitar el restablecimiento de contraseña. Por favor, inténtelo de nuevo.",
"emailRequired": "El correo electrónico es obligatorio."
}
} }
</i18n> </i18n>

343
frontend/src/views/auth/LoginView.vue
View File

@@ -1,195 +1,214 @@
<template> <template>
<div class="flex min-h-full w-full items-center justify-center p-4"> <div class="flex min-h-full w-full items-center justify-center p-4">
<div class="flex w-full max-w-[512px] flex-col gap-10">
<h1 class="login-text text-center text-2xl font-bold">
{{ t('title') }}
</h1>
<div class="flex w-full max-w-[512px] flex-col gap-10"> <div class="flex flex-col gap-4">
<h1 class="login-text text-center text-2xl font-bold"> <google-login
{{ t('title') }} :callback="googleCallback"
</h1> popup-type="TOKEN"
>
<button class="secondary">
<v-icon
:icon="mdiGoogle"
class="mr-2"
/>
{{ t('continueWithGoogle') }}
</button>
</google-login>
</div>
<div class="my-4 flex items-center">
<div class="h-px grow bg-gray-200"></div>
<span class="px-3 text-sm font-semibold uppercase text-gray-300">{{ t('orContinueWith') }}</span>
<div class="h-px grow bg-gray-200"></div>
</div>
<div class="flex flex-col gap-4"> <!-- Add email/password form -->
<google-login :callback="googleCallback" popup-type="TOKEN"> <v-form @submit.prevent="handleLocalLogin">
<button class="secondary"> <div class="flex flex-col gap-4">
<v-icon class="mr-2" :icon="mdiGoogle" /> <v-text-field
{{ t('continueWithGoogle') }} v-model="email"
</button> :label="t('email')"
</google-login> required
</div> type="email"
></v-text-field>
<div class="my-4 flex items-center"> <v-text-field
<div class="h-px grow bg-gray-200"></div> v-model="password"
<span class="px-3 text-sm font-semibold uppercase text-gray-300">{{ t('orContinueWith') }}</span> :label="t('password')"
<div class="h-px grow bg-gray-200"></div> :type="showPassword ? 'text' : 'password'"
</div> required
>
<template v-slot:append-inner>
<v-icon
:icon="showPassword ? mdiEyeOff : mdiEye"
class="visibility-toggle"
size="small"
@click="showPassword = !showPassword"
/>
</template>
</v-text-field>
<!-- Add email/password form --> <v-btn
<v-form @submit.prevent="handleLocalLogin"> block
<div class="flex flex-col gap-4"> color="primary"
<v-text-field v-model="email" :label="t('email')" type="email" required></v-text-field> type="submit"
>
{{ t('signIn') }}
</v-btn>
<v-text-field v-model="password" :label="t('password')" :type="showPassword ? 'text' : 'password'" required> <div class="text-center">
<template v-slot:append-inner> <a
<v-icon @click="showPassword = !showPassword" class="visibility-toggle" size="small" class="cursor-pointer text-sm text-blue-500"
:icon="showPassword ? mdiEyeOff : mdiEye" /> @click="forgotPassword"
</template> >
</v-text-field> {{ t('forgotPassword') }}
</a>
</div>
<v-btn type="submit" color="primary" block> <div class="mt-2 text-center">
{{ t('signIn') }} <a
</v-btn> class="cursor-pointer text-sm text-blue-500"
@click="resendVerification"
>
{{ t('resendVerification') }}
</a>
</div>
<div class="text-center"> <div class="mt-4 text-center">
<a @click="forgotPassword" class="cursor-pointer text-sm text-blue-500"> {{ t('noAccount') }}
{{ t('forgotPassword') }} <router-link
</a> class="text-blue-500"
</div> to="/register"
>
<div class="mt-2 text-center"> {{ t('register') }}
<a @click="resendVerification" class="cursor-pointer text-sm text-blue-500"> </router-link>
{{ t('resendVerification') }} </div>
</a> </div>
</div> </v-form>
<div class="mt-4 text-center">
{{ t('noAccount') }}
<router-link to="/register" class="text-blue-500">
{{ t('register') }}
</router-link>
</div>
</div> </div>
</v-form>
<!-- Error notification -->
<v-snackbar
v-model="errorSnackBar"
color="error"
>
{{ t('loginFailed') }}
</v-snackbar>
</div> </div>
<!-- Error notification -->
<v-snackbar v-model="errorSnackBar" color="error">
{{ t('loginFailed') }}
</v-snackbar>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { GoogleLogin } from "vue3-google-login"; import { GoogleLogin } from 'vue3-google-login';
import { useAuthStore } from '@/stores/authStore.js'; import { useAuthStore } from '@/stores/authStore.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { mdiGoogle, mdiEye, mdiEyeOff } from '@mdi/js'; import { mdiEye, mdiEyeOff, mdiGoogle } from '@mdi/js';
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
const authStore = useAuthStore(); const authStore = useAuthStore();
const email = ref(''); const email = ref('');
const password = ref(''); const password = ref('');
const errorSnackBar = ref(false); const errorSnackBar = ref(false);
const showPassword = ref(false); const showPassword = ref(false);
const props = defineProps({ const props = defineProps({
returnUrl: { returnUrl: {
type: String, type: String,
default: '/landing' default: '/landing',
} },
}); });
async function handleLocalLogin() { async function handleLocalLogin() {
try { try {
await authStore.login(email.value, password.value); await authStore.login(email.value, password.value);
await router.push(props.returnUrl); await router.push(props.returnUrl);
} catch (error) { } catch (error) {
console.error('Login failed:', error); console.error('Login failed:', error);
errorSnackBar.value = true; errorSnackBar.value = true;
} }
}
async function googleCallback(token) {
try {
const response = await authStore.loginWithGoogle(JSON.stringify(token));
if (response === true) {
await router.push(props.returnUrl);
} else {
errorSnackBar.value = true;
} }
} catch (error) {
console.error('Login failed:', error);
errorSnackBar.value = true;
}
}
function forgotPassword() { async function googleCallback(token) {
router.push('/forgot-password'); try {
} const response = await authStore.loginWithGoogle(JSON.stringify(token));
if (response === true) {
await router.push(props.returnUrl);
} else {
errorSnackBar.value = true;
}
} catch (error) {
console.error('Login failed:', error);
errorSnackBar.value = true;
}
}
function resendVerification() { function forgotPassword() {
router.push('/verify-email'); router.push('/forgot-password');
} }
function resendVerification() {
router.push('/verify-email');
}
</script> </script>
<style scoped> <style scoped>
.visibility-toggle { .visibility-toggle {
@apply cursor-pointer; @apply cursor-pointer;
@apply transition-opacity duration-300; @apply transition-opacity duration-300;
@apply opacity-60 hover:opacity-100; @apply opacity-60 hover:opacity-100;
@apply z-10; @apply z-10;
} }
/* Override Vuetify's default padding to accommodate our icon */ /* Override Vuetify's default padding to accommodate our icon */
:deep(.v-field__append-inner) { :deep(.v-field__append-inner) {
padding-inline-start: 0; padding-inline-start: 0;
} }
/* Dark mode support if needed */ /* Dark mode support if needed */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.custom-divider { .custom-divider {
background-color: rgb(75, 85, 99); background-color: rgb(75, 85, 99);
/* Equivalent to gray-600 */ /* Equivalent to gray-600 */
} }
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Sign in", "title": "Sign in",
"alt": "Login", "alt": "Login",
"email": "Email", "email": "Email",
"password": "Password", "password": "Password",
"signIn": "Connect", "signIn": "Connect",
"forgotPassword": "Forgot password?", "forgotPassword": "Forgot password?",
"resendVerification": "Resend verification email", "resendVerification": "Resend verification email",
"orContinueWith": "Or", "orContinueWith": "Or",
"noAccount": "Don't have an account?", "noAccount": "Don't have an account?",
"register": "Register", "register": "Register",
"loginFailed": "Login failed. Please check your credentials.", "loginFailed": "Login failed. Please check your credentials.",
"continueWithGoogle": "Continue with Google" "continueWithGoogle": "Continue with Google"
}, },
"fr": { "fr": {
"title": "Se connecter", "title": "Se connecter",
"alt": "Connexion", "alt": "Connexion",
"email": "Email", "email": "Email",
"password": "Mot de passe", "password": "Mot de passe",
"signIn": "Connexion", "signIn": "Connexion",
"forgotPassword": "Mot de passe oublié?", "forgotPassword": "Mot de passe oublié?",
"resendVerification": "Renvoyer l'email de vérification", "resendVerification": "Renvoyer l'email de vérification",
"orContinueWith": "Ou", "orContinueWith": "Ou",
"noAccount": "Vous n'avez pas de compte?", "noAccount": "Vous n'avez pas de compte?",
"register": "S'inscrire", "register": "S'inscrire",
"loginFailed": "Échec de la connexion. Veuillez vérifier vos identifiants.", "loginFailed": "Échec de la connexion. Veuillez vérifier vos identifiants.",
"continueWithGoogle": "Continuer avec Google" "continueWithGoogle": "Continuer avec Google"
}, }
"es": {
"title": "Iniciar sesión",
"alt": "Inicio de sesión",
"email": "Correo electrónico",
"password": "Contraseña",
"signIn": "Conéctate",
"forgotPassword": "¿Olvidó su contraseña?",
"resendVerification": "Reenviar correo de verificación",
"orContinueWith": "o",
"noAccount": "¿No tiene una cuenta?",
"register": "Registrarse",
"loginFailed": "Error de inicio de sesión. Por favor, compruebe sus credenciales.",
"continueWithGoogle": "Continuar con Google"
}
} }
</i18n> </i18n>

22
frontend/src/views/auth/RegisterView.vue
View File

@@ -25,8 +25,8 @@
{{ t('success.backToLogin') }} {{ t('success.backToLogin') }}
</router-link> </router-link>
<router-link <router-link
class="text-blue-500 hover:underline"
:to="{ path: '/verify-email', query: { email: userEmail } }" :to="{ path: '/verify-email', query: { email: userEmail } }"
class="text-blue-500 hover:underline"
> >
{{ t('success.resendVerification') }} {{ t('success.resendVerification') }}
</router-link> </router-link>
@@ -232,26 +232,6 @@
"backToLogin": "Retour à la connexion", "backToLogin": "Retour à la connexion",
"resendVerification": "Vous n'avez pas reçu l'email? Renvoyer la vérification" "resendVerification": "Vous n'avez pas reçu l'email? Renvoyer la vérification"
} }
},
"es": {
"title": "Crea tu cuenta",
"alt": "Registro de Hutopy",
"name": "Nombre completo",
"email": "Correo electrónico",
"password": "Contraseña",
"confirmPassword": "Confirmar contraseña",
"passwordRequirements": "La contraseña debe tener al menos 8 caracteres",
"register": "Registrarse",
"alreadyHaveAccount": "¿Ya tienes una cuenta?",
"signIn": "Iniciar sesión",
"passwordsDoNotMatch": "Las contraseñas no coinciden",
"registrationFailed": "El registro falló. Por favor, inténtelo de nuevo.",
"success": {
"title": "¡Registro exitoso!",
"message": "Por favor revisa tu correo electrónico para verificar tu cuenta. Hemos enviado un enlace de verificación a:",
"backToLogin": "Volver al inicio de sesión",
"resendVerification": "¿No recibiste el correo? Reenviar verificación"
}
} }
} }
</i18n> </i18n>

13
frontend/src/views/auth/ResetPasswordView.vue
View File

@@ -259,19 +259,6 @@
"passwordTooShort": "Le mot de passe doit comporter au moins 8 caractères", "passwordTooShort": "Le mot de passe doit comporter au moins 8 caractères",
"resetFailed": "Échec de la réinitialisation du mot de passe. Veuillez réessayer ou demander un nouveau lien de réinitialisation.", "resetFailed": "Échec de la réinitialisation du mot de passe. Veuillez réessayer ou demander un nouveau lien de réinitialisation.",
"invalidResetLink": "Lien de réinitialisation invalide ou expiré. Veuillez demander une nouvelle réinitialisation de mot de passe." "invalidResetLink": "Lien de réinitialisation invalide ou expiré. Veuillez demander une nouvelle réinitialisation de mot de passe."
},
"es": {
"title": "Restablecer su Contraseña",
"newPassword": "Nueva Contraseña",
"confirmPassword": "Confirmar Contraseña",
"passwordRequirements": "La contraseña debe tener al menos 8 caracteres",
"resetPassword": "Restablecer Contraseña",
"passwordResetSuccess": "¡Su contraseña ha sido restablecida con éxito!",
"proceedToLogin": "Proceder al Inicio de Sesión",
"passwordsDoNotMatch": "Las contraseñas no coinciden",
"passwordTooShort": "La contraseña debe tener al menos 8 caracteres",
"resetFailed": "Error al restablecer la contraseña. Inténtelo de nuevo o solicite un nuevo enlace de restablecimiento.",
"invalidResetLink": "Enlace de restablecimiento inválido o caducado. Solicite un nuevo restablecimiento de contraseña."
} }
} }
</i18n> </i18n>

408
frontend/src/views/auth/VerifyEmailView.vue
View File

@@ -1,219 +1,237 @@
<template> <template>
<div class="flex min-h-full w-full items-center justify-center p-4"> <div class="flex min-h-full w-full items-center justify-center p-4">
<div class="flex w-full max-w-[512px] flex-col gap-10 text-center"> <div class="flex w-full max-w-[512px] flex-col gap-10 text-center">
<!-- Loading state while verification is in progress --> <!-- Loading state while verification is in progress -->
<div v-if="isLoading" class="flex flex-col items-center gap-4"> <div
<v-progress-circular indeterminate color="primary" size="64"></v-progress-circular> v-if="isLoading"
<h2 class="text-xl font-medium">{{ t('verifying') }}</h2> class="flex flex-col items-center gap-4"
</div> >
<v-progress-circular
<!-- Success state --> color="primary"
<div v-else-if="verificationSuccess" class="flex flex-col items-center gap-6"> indeterminate
<v-icon icon="mdi-check-circle" color="green" size="64"></v-icon> size="64"
<h1 class="text-2xl font-bold text-green-600">{{ t('success.title') }}</h1> ></v-progress-circular>
<p>{{ t('success.message') }}</p> <h2 class="text-xl font-medium">{{ t('verifying') }}</h2>
<v-btn color="primary" @click="goToLogin">{{ t('success.goToLogin') }}</v-btn> </div>
</div>
<!-- Success state -->
<!-- Error state --> <div
<div v-else class="flex flex-col items-center gap-6"> v-else-if="verificationSuccess"
<v-icon icon="mdi-alert-circle" color="error" size="64"></v-icon> class="flex flex-col items-center gap-6"
<h1 class="text-2xl font-bold text-red-600">{{ t('error.title') }}</h1> >
<p>{{ errorMessage || t('error.defaultMessage') }}</p> <v-icon
color="green"
<div class="mt-4 flex flex-col gap-4 w-full"> icon="mdi-check-circle"
<v-btn color="primary" @click="goToLogin">{{ t('error.goToLogin') }}</v-btn> size="64"
<v-divider class="my-4"></v-divider> ></v-icon>
<h1 class="text-2xl font-bold text-green-600">{{ t('success.title') }}</h1>
<!-- Resend verification email section --> <p>{{ t('success.message') }}</p>
<h2 class="text-xl font-medium">{{ t('resend.title') }}</h2> <v-btn
<v-form @submit.prevent="handleResendVerification" class="w-full"> color="primary"
<div class="flex flex-col gap-4"> @click="goToLogin"
<v-text-field >
v-model="resendEmail" {{ t('success.goToLogin') }}
:label="t('resend.emailLabel')" </v-btn>
type="email" </div>
required
:error-messages="resendEmailError" <!-- Error state -->
></v-text-field> <div
v-else
<v-btn class="flex flex-col items-center gap-6"
type="submit" >
color="secondary" <v-icon
block color="error"
:loading="resendLoading" icon="mdi-alert-circle"
> size="64"
{{ t('resend.button') }} ></v-icon>
</v-btn> <h1 class="text-2xl font-bold text-red-600">{{ t('error.title') }}</h1>
<p>{{ errorMessage || t('error.defaultMessage') }}</p>
<!-- Resend success message -->
<div v-if="resendSuccess" class="mt-2 p-3 bg-green-50 border border-green-200 rounded text-green-700 text-sm"> <div class="mt-4 flex flex-col gap-4 w-full">
{{ t('resend.success') }} <v-btn
</div> color="primary"
@click="goToLogin"
<!-- Resend error message --> >
<div v-if="resendError" class="mt-2 p-3 bg-red-50 border border-red-200 rounded text-red-700 text-sm"> {{ t('error.goToLogin') }}
{{ resendError }} </v-btn>
</div> <v-divider class="my-4"></v-divider>
<!-- Resend verification email section -->
<h2 class="text-xl font-medium">{{ t('resend.title') }}</h2>
<v-form
class="w-full"
@submit.prevent="handleResendVerification"
>
<div class="flex flex-col gap-4">
<v-text-field
v-model="resendEmail"
:error-messages="resendEmailError"
:label="t('resend.emailLabel')"
required
type="email"
></v-text-field>
<v-btn
:loading="resendLoading"
block
color="secondary"
type="submit"
>
{{ t('resend.button') }}
</v-btn>
<!-- Resend success message -->
<div
v-if="resendSuccess"
class="mt-2 p-3 bg-green-50 border border-green-200 rounded text-green-700 text-sm"
>
{{ t('resend.success') }}
</div>
<!-- Resend error message -->
<div
v-if="resendError"
class="mt-2 p-3 bg-red-50 border border-red-200 rounded text-red-700 text-sm"
>
{{ resendError }}
</div>
</div>
</v-form>
</div>
</div> </div>
</v-form>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { onMounted, ref } from 'vue';
import { useClient } from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const clientApi = useClient(); const clientApi = useClient();
// Verification state // Verification state
const isLoading = ref(true); const isLoading = ref(true);
const verificationSuccess = ref(false); const verificationSuccess = ref(false);
const errorMessage = ref(''); const errorMessage = ref('');
// Resend verification state // Resend verification state
const resendEmail = ref(''); const resendEmail = ref('');
const resendEmailError = ref(''); const resendEmailError = ref('');
const resendLoading = ref(false); const resendLoading = ref(false);
const resendSuccess = ref(false); const resendSuccess = ref(false);
const resendError = ref(''); const resendError = ref('');
onMounted(async () => { onMounted(async () => {
const userId = route.query.userId; const userId = route.query.userId;
const token = route.query.token; const token = route.query.token;
// Populate resend email field if it was in the URL // Populate resend email field if it was in the URL
if (route.query.email) { if (route.query.email) {
resendEmail.value = route.query.email; resendEmail.value = route.query.email;
} }
// Check if we have the required parameters // Check if we have the required parameters
if (!userId || !token) { if (!userId || !token) {
isLoading.value = false; isLoading.value = false;
errorMessage.value = t('error.missingParams'); errorMessage.value = t('error.missingParams');
return; return;
} }
try { try {
// Call the verification endpoint // Call the verification endpoint
await clientApi.get(`/api/users/verify-email?userId=${userId}&token=${token}`); await clientApi.get(`/api/users/verify-email?userId=${userId}&token=${token}`);
verificationSuccess.value = true; verificationSuccess.value = true;
} catch (error) { } catch (error) {
console.error('Email verification failed:', error); console.error('Email verification failed:', error);
errorMessage.value = error.response?.data?.message || t('error.defaultMessage'); errorMessage.value = error.response?.data?.message || t('error.defaultMessage');
} finally { } finally {
isLoading.value = false; isLoading.value = false;
} }
});
async function handleResendVerification() {
// Reset states
resendEmailError.value = '';
resendSuccess.value = false;
resendError.value = '';
// Simple email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(resendEmail.value)) {
resendEmailError.value = t('resend.invalidEmail');
return;
}
resendLoading.value = true;
try {
await clientApi.post('/api/users/resend-verification', {
email: resendEmail.value.trim()
}); });
resendSuccess.value = true;
} catch (error) {
console.error('Resend verification failed:', error);
resendError.value = error.response?.data?.message || t('resend.error');
} finally {
resendLoading.value = false;
}
}
function goToLogin() { async function handleResendVerification() {
router.push('/login'); // Reset states
} resendEmailError.value = '';
resendSuccess.value = false;
resendError.value = '';
// Simple email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(resendEmail.value)) {
resendEmailError.value = t('resend.invalidEmail');
return;
}
resendLoading.value = true;
try {
await clientApi.post('/api/users/resend-verification', {
email: resendEmail.value.trim(),
});
resendSuccess.value = true;
} catch (error) {
console.error('Resend verification failed:', error);
resendError.value = error.response?.data?.message || t('resend.error');
} finally {
resendLoading.value = false;
}
}
function goToLogin() {
router.push('/login');
}
</script> </script>
<i18n> <i18n>
{ {
"en": { "en": {
"verifying": "Verifying your email...", "verifying": "Verifying your email...",
"success": { "success": {
"title": "Email Verified Successfully!", "title": "Email Verified Successfully!",
"message": "Your email has been verified. You can now log in to your account.", "message": "Your email has been verified. You can now log in to your account.",
"goToLogin": "Go to Login" "goToLogin": "Go to Login"
},
"error": {
"title": "Verification Failed",
"defaultMessage": "We couldn't verify your email. The link may be invalid or expired.",
"missingParams": "Missing required verification parameters.",
"goToLogin": "Go to Login"
},
"resend": {
"title": "Resend Verification Email",
"emailLabel": "Email",
"button": "Resend Verification Email",
"success": "Verification email sent successfully. Please check your inbox.",
"error": "Failed to send verification email. Please try again.",
"invalidEmail": "Please enter a valid email address."
}
}, },
"error": { "fr": {
"title": "Verification Failed", "verifying": "Vérification de votre email...",
"defaultMessage": "We couldn't verify your email. The link may be invalid or expired.", "success": {
"missingParams": "Missing required verification parameters.", "title": "Email vérifié avec succès !",
"goToLogin": "Go to Login" "message": "Votre email a été vérifié. Vous pouvez maintenant vous connecter à votre compte.",
}, "goToLogin": "Aller à la connexion"
"resend": { },
"title": "Resend Verification Email", "error": {
"emailLabel": "Email", "title": "Échec de la vérification",
"button": "Resend Verification Email", "defaultMessage": "Nous n'avons pas pu vérifier votre email. Le lien peut être invalide ou expiré.",
"success": "Verification email sent successfully. Please check your inbox.", "missingParams": "Paramètres de vérification requis manquants.",
"error": "Failed to send verification email. Please try again.", "goToLogin": "Aller à la connexion"
"invalidEmail": "Please enter a valid email address." },
"resend": {
"title": "Renvoyer l'email de vérification",
"emailLabel": "Email",
"button": "Renvoyer l'email de vérification",
"success": "Email de vérification envoyé avec succès. Veuillez vérifier votre boîte de réception.",
"error": "Échec de l'envoi de l'email de vérification. Veuillez réessayer.",
"invalidEmail": "Veuillez entrer une adresse email valide."
}
} }
},
"fr": {
"verifying": "Vérification de votre email...",
"success": {
"title": "Email vérifié avec succès !",
"message": "Votre email a été vérifié. Vous pouvez maintenant vous connecter à votre compte.",
"goToLogin": "Aller à la connexion"
},
"error": {
"title": "Échec de la vérification",
"defaultMessage": "Nous n'avons pas pu vérifier votre email. Le lien peut être invalide ou expiré.",
"missingParams": "Paramètres de vérification requis manquants.",
"goToLogin": "Aller à la connexion"
},
"resend": {
"title": "Renvoyer l'email de vérification",
"emailLabel": "Email",
"button": "Renvoyer l'email de vérification",
"success": "Email de vérification envoyé avec succès. Veuillez vérifier votre boîte de réception.",
"error": "Échec de l'envoi de l'email de vérification. Veuillez réessayer.",
"invalidEmail": "Veuillez entrer une adresse email valide."
}
},
"es": {
"verifying": "Verificando tu correo electrónico...",
"success": {
"title": "¡Correo electrónico verificado con éxito!",
"message": "Tu correo electrónico ha sido verificado. Ahora puedes iniciar sesión en tu cuenta.",
"goToLogin": "Ir al inicio de sesión"
},
"error": {
"title": "Falló la verificación",
"defaultMessage": "No pudimos verificar tu correo electrónico. El enlace puede ser inválido o estar caducado.",
"missingParams": "Faltan parámetros de verificación requeridos.",
"goToLogin": "Ir al inicio de sesión"
},
"resend": {
"title": "Reenviar correo de verificación",
"emailLabel": "Correo electrónico",
"button": "Reenviar correo de verificación",
"success": "Correo de verificación enviado con éxito. Por favor revisa tu bandeja de entrada.",
"error": "Error al enviar el correo de verificación. Por favor, inténtelo de nuevo.",
"invalidEmail": "Por favor, introduce una dirección de correo electrónico válida."
}
}
} }
</i18n> </i18n>

30
frontend/src/views/creators/AboutCreator.vue
View File

@@ -681,36 +681,6 @@
"descriptionRequired": "La description est obligatoire" "descriptionRequired": "La description est obligatoire"
} }
} }
},
"es": {
"edit": "Editar",
"save": "Guardar",
"cancel": "Cancelar",
"creator": {
"sections": {
"about": {
"title": "Acerca de",
"description": "Descripción",
"contactInfo": "Información de contacto",
"characters": "caracteres",
"formattingHint": "Consejo: ¡Usa saltos de línea y emojis para hacer tu descripción más atractiva!"
},
"photos": {
"title": "Fotos",
"image": "Imagen"
}
},
"fields": {
"videoUrl": "URL del video",
"phoneNumber": "Número de teléfono",
"email": "Correo electrónico"
},
"validation": {
"invalidYoutubeUrl": "Por favor, introduce una URL de YouTube o un ID de video válido",
"descriptionTooLong": "La descripción no puede exceder los 2000 caracteres",
"descriptionRequired": "La descripción es obligatoria"
}
}
} }
} }
</i18n> </i18n>

105
frontend/src/views/creators/ActualBanner.vue
View File

@@ -1,64 +1,81 @@
<template> <template>
<div class="relative"> <div class="relative">
<!-- Banner Container with mouse events --> <!-- Banner Container with mouse events -->
<div class="relative overflow-y-auto rounded-b-2xl" @mouseenter="showTint = isCurrentCreator"
@mouseleave="showTint = false" @click="isCurrentCreator && openBannerEditor()">
<img class="banner aspect-[4/1] w-full object-cover"
:src="brandingStore.value?.bannerUrl ?? '/images/placeholders/banner.png'" :alt="t('alt')">
<!-- Tint Effect -->
<div v-if="showTint" class="absolute inset-0 cursor-pointer bg-black/25">
<!-- Top-right Icon -->
<div <div
class="absolute right-4 top-4 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"> class="relative overflow-y-auto rounded-b-2xl"
<v-icon large :icon="mdiPencil" /> @click="isCurrentCreator && openBannerEditor()"
@mouseenter="showTint = isCurrentCreator"
@mouseleave="showTint = false"
>
<img
:alt="t('alt')"
:src="brandingStore.value?.bannerUrl ?? '/images/placeholders/banner.png'"
class="banner aspect-[4/1] w-full object-cover"
/>
<!-- Tint Effect -->
<div
v-if="showTint"
class="absolute inset-0 cursor-pointer bg-black/25"
>
<!-- Top-right Icon -->
<div
class="absolute right-4 top-4 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"
>
<v-icon
:icon="mdiPencil"
large
/>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
<v-dialog v-model="isDialogOpen" max-width="800px"> <v-dialog
<BannerEditor :creator="brandingStore.value" @closeRequested="() => isDialogOpen = false" /> v-model="isDialogOpen"
</v-dialog> max-width="800px"
>
<BannerEditor
:creator="brandingStore.value"
@closeRequested="() => (isDialogOpen = false)"
/>
</v-dialog>
</template> </template>
<script setup> <script setup>
import BannerEditor from "@/views/creators/BannerEditor.vue"; import BannerEditor from '@/views/creators/BannerEditor.vue';
import { computed, ref } from "vue"; import { computed, ref } from 'vue';
import { useBrandingStore } from "@/stores/brandingStore.js"; import { useBrandingStore } from '@/stores/brandingStore.js';
import { useAuthStore } from "@/stores/authStore.js"; import { useAuthStore } from '@/stores/authStore.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { mdiPencil } from '@mdi/js'; import { mdiPencil } from '@mdi/js';
const authStore = useAuthStore(); const authStore = useAuthStore();
const brandingStore = useBrandingStore(); const brandingStore = useBrandingStore();
const { t } = useI18n(); const { t } = useI18n();
// State // State
const showTint = ref(false); const showTint = ref(false);
const isDialogOpen = ref(false); const isDialogOpen = ref(false);
// Methods // Methods
const openBannerEditor = () => { const openBannerEditor = () => {
isDialogOpen.value = true; isDialogOpen.value = true;
}; };
const isCurrentCreator = computed(() => { const isCurrentCreator = computed(() => {
return authStore.userId === brandingStore.value.id; return authStore.userId === brandingStore.value.id;
}); });
</script> </script>
<style scoped></style> <style scoped></style>
<i18n> <i18n>
{ {
"en": { "en": {
"alt": "Creator banner" "alt": "Creator banner"
}, },
"fr": { "fr": {
"alt": "Bannière du créateur" "alt": "Bannière du créateur"
}, }
"es": {
"alt": "Banner del creador"
}
} }
</i18n> </i18n>

609
frontend/src/views/creators/AlbumEditor.vue
View File

@@ -1,330 +1,367 @@
<template> <template>
<div class="album-editor"> <div class="album-editor">
<h2 class="mb-4 text-xl font-semibold">
{{ t('title') }}
</h2>
<h2 class="mb-4 text-xl font-semibold"> <!-- Drop zone with photos -->
{{ t('title') }} <div
</h2> class="drop-zone"
@click="triggerFileInput"
<!-- Drop zone with photos --> @dragover.prevent
<div class="drop-zone" @dragover.prevent @drop.prevent="handleDrop" @click="triggerFileInput"> @drop.prevent="handleDrop"
>
<!-- Upload prompt --> <!-- Upload prompt -->
<div class="drop-zone-content"> <div class="drop-zone-content">
<v-icon size="large" :icon="mdiPlus" /> <v-icon
<span class="mt-2 text-sm">{{ t('dropzoneText') }}</span> :icon="mdiPlus"
</div> size="large"
/>
<!-- Hidden file input --> <span class="mt-2 text-sm">{{ t('dropzoneText') }}</span>
<input type="file" ref="fileInput" @change="handleFileUpload" accept="image/*" multiple class="hidden" />
<!-- Photos grid -->
<draggable v-model="localImages" class="photos-grid" item-key="id" @end="handleReorder" :filter="'.action-btn'"
:prevent-on-filter="false">
<template #item="{ element, index }">
<div class="photo-wrapper">
<div class="index-bubble">{{ index + 1 }}</div>
<img :src="element.image.originalUrl" :alt="'Image ' + (index + 1)" />
<!-- Processing spinner overlay -->
<div v-if="element.isProcessing" class="loading-overlay">
<v-progress-circular indeterminate color="primary"></v-progress-circular>
<span class="mt-2 text-sm text-white">{{ t('processing') }}</span>
</div> </div>
<!-- Upload spinner overlay -->
<div v-if="element.isUploading" class="loading-overlay uploading"> <!-- Hidden file input -->
<v-progress-circular indeterminate color="secondary"></v-progress-circular> <input
<span class="mt-2 text-sm text-white">{{ t('uploading') }}</span> ref="fileInput"
</div> accept="image/*"
<!-- Left arrow --> class="hidden"
<button @click.stop="moveImage(index, 'up')" @touchstart.stop="moveImage(index, 'up')" multiple
class="action-btn left-btn" :disabled="index === 0" :title="t('moveLeft')"> type="file"
<v-icon :icon="mdiArrowLeft" /> @change="handleFileUpload"
</button> />
<!-- Right arrow -->
<button @click.stop="moveImage(index, 'down')" @touchstart.stop="moveImage(index, 'down')" <!-- Photos grid -->
class="action-btn right-btn" :disabled="index === localImages.length - 1" :title="t('moveRight')"> <draggable
<v-icon :icon="mdiArrowRight" /> v-model="localImages"
</button> :filter="'.action-btn'"
<!-- Delete button --> :prevent-on-filter="false"
<button @click.stop="deleteImage(index)" touchstart.stop="deleteImage(index)" class="action-btn delete-btn" class="photos-grid"
:title="t('delete')"> item-key="id"
<v-icon :icon="mdiDelete" /> @end="handleReorder"
</button> >
</div> <template #item="{ element, index }">
</template> <div class="photo-wrapper">
</draggable> <div class="index-bubble">{{ index + 1 }}</div>
<img
:alt="'Image ' + (index + 1)"
:src="element.image.originalUrl"
/>
<!-- Processing spinner overlay -->
<div
v-if="element.isProcessing"
class="loading-overlay"
>
<v-progress-circular
color="primary"
indeterminate
></v-progress-circular>
<span class="mt-2 text-sm text-white">{{ t('processing') }}</span>
</div>
<!-- Upload spinner overlay -->
<div
v-if="element.isUploading"
class="loading-overlay uploading"
>
<v-progress-circular
color="secondary"
indeterminate
></v-progress-circular>
<span class="mt-2 text-sm text-white">{{ t('uploading') }}</span>
</div>
<!-- Left arrow -->
<button
:disabled="index === 0"
:title="t('moveLeft')"
class="action-btn left-btn"
@click.stop="moveImage(index, 'up')"
@touchstart.stop="moveImage(index, 'up')"
>
<v-icon :icon="mdiArrowLeft" />
</button>
<!-- Right arrow -->
<button
:disabled="index === localImages.length - 1"
:title="t('moveRight')"
class="action-btn right-btn"
@click.stop="moveImage(index, 'down')"
@touchstart.stop="moveImage(index, 'down')"
>
<v-icon :icon="mdiArrowRight" />
</button>
<!-- Delete button -->
<button
:title="t('delete')"
class="action-btn delete-btn"
touchstart.stop="deleteImage(index)"
@click.stop="deleteImage(index)"
>
<v-icon :icon="mdiDelete" />
</button>
</div>
</template>
</draggable>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { v7 } from 'uuid'; import { v7 } from 'uuid';
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import { mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus } from '@mdi/js'; import { mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus } from '@mdi/js';
const props = defineProps({ const props = defineProps({
images: { images: {
type: Array, type: Array,
required: true required: true,
} },
}); });
const emit = defineEmits(['update:images']); const emit = defineEmits(['update:images']);
const { t } = useI18n(); const { t } = useI18n();
const fileInput = ref(null); const fileInput = ref(null);
const localImages = ref([]); const localImages = ref([]);
onMounted(() => { onMounted(() => {
// Initialize local images with IDs and states // Initialize local images with IDs and states
localImages.value = props.images; localImages.value = props.images;
}); });
function handleFiles(files) { function handleFiles(files) {
console.log('handleFiles:', files) console.log('handleFiles:', files);
for (const file of files) { for (const file of files) {
if (file.type.startsWith('image/')) { if (file.type.startsWith('image/')) {
try { try {
const reader = new FileReader(); const reader = new FileReader();
// Create a temporary image object with processing state // Create a temporary image object with processing state
const tempImage = { const tempImage = {
image: { image: {
id: v7(), id: v7(),
originalUrl: '', originalUrl: '',
}, },
file: file, file: file,
isProcessing: true, isProcessing: true,
isUploading: false, isUploading: false,
}; };
localImages.value.push(tempImage); localImages.value.push(tempImage);
console.log('Processing image:', tempImage); console.log('Processing image:', tempImage);
reader.onload = (e) => { reader.onload = e => {
console.log('Image loaded:', e); console.log('Image loaded:', e);
const index = localImages.value.findIndex(local => local.image.id === tempImage.image.id); const index = localImages.value.findIndex(local => local.image.id === tempImage.image.id);
if (index !== -1) { if (index !== -1) {
localImages.value[index].image.originalUrl = e.target.result; localImages.value[index].image.originalUrl = e.target.result;
localImages.value[index].isProcessing = false; localImages.value[index].isProcessing = false;
emit('update:images', localImages.value); emit('update:images', localImages.value);
} }
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} catch (error) { } catch (error) {
console.error('Error processing image:', error); console.error('Error processing image:', error);
} }
}
}
} }
}
}
function handleDrop(event) {
console.log('Drop triggered');
const files = Array.from(event.dataTransfer.files);
handleFiles(files);
}
function triggerFileInput() { function handleDrop(event) {
console.log('Input triggered'); console.log('Drop triggered');
fileInput.value.click(); const files = Array.from(event.dataTransfer.files);
} handleFiles(files);
}
function handleFileUpload(event) { function triggerFileInput() {
console.log('File input triggered'); console.log('Input triggered');
const files = Array.from(event.target.files); fileInput.value.click();
handleFiles(files); }
event.target.value = '';
}
function handleReorder() { function handleFileUpload(event) {
emit('update:images', localImages.value); console.log('File input triggered');
} const files = Array.from(event.target.files);
handleFiles(files);
event.target.value = '';
}
function handleReorder() {
emit('update:images', localImages.value);
}
function moveImage(index, direction) { function moveImage(index, direction) {
const newIndex = direction === 'up' ? index - 1 : index + 1; const newIndex = direction === 'up' ? index - 1 : index + 1;
if (newIndex >= 0 && newIndex < localImages.value.length) { if (newIndex >= 0 && newIndex < localImages.value.length) {
const temp = localImages.value[index]; const temp = localImages.value[index];
localImages.value[index] = localImages.value[newIndex]; localImages.value[index] = localImages.value[newIndex];
localImages.value[newIndex] = temp; localImages.value[newIndex] = temp;
emit('update:images', localImages.value); emit('update:images', localImages.value);
} }
} }
function deleteImage(index) {
localImages.value.splice(index, 1);
emit('update:images', localImages.value);
}
function deleteImage(index) {
localImages.value.splice(index, 1);
emit('update:images', localImages.value);
}
</script> </script>
<style scoped> <style scoped>
.album-editor { .album-editor {
@apply w-full; @apply w-full;
} }
.drop-zone { .drop-zone {
@apply w-full; @apply w-full;
@apply min-h-[200px]; @apply min-h-[200px];
@apply border-2; @apply border-2;
@apply border-dashed; @apply border-dashed;
@apply border-gray-300 hover:border-gray-500; @apply border-gray-300 hover:border-gray-500;
@apply rounded-lg; @apply rounded-lg;
@apply p-4; @apply p-4;
@apply relative; @apply relative;
@apply transition-colors; @apply transition-colors;
@apply duration-200; @apply duration-200;
@apply overflow-visible; @apply overflow-visible;
@apply bg-hSurface; @apply bg-hSurface;
} }
.drop-zone-content { .drop-zone-content {
@apply flex; @apply flex;
@apply flex-col; @apply flex-col;
@apply items-center; @apply items-center;
@apply text-gray-500; @apply text-gray-500;
@apply mb-8; @apply mb-8;
@apply relative; @apply relative;
@apply z-10; @apply z-10;
} }
.photos-grid { .photos-grid {
@apply grid; @apply grid;
@apply grid-cols-2; @apply grid-cols-2;
@apply sm:grid-cols-3; @apply sm:grid-cols-3;
@apply md:grid-cols-4; @apply md:grid-cols-4;
@apply lg:grid-cols-5; @apply lg:grid-cols-5;
@apply gap-4; @apply gap-4;
@apply w-full; @apply w-full;
@apply pb-1; @apply pb-1;
} }
.photo-wrapper { .photo-wrapper {
@apply relative; @apply relative;
@apply aspect-square; @apply aspect-square;
@apply rounded-lg; @apply rounded-lg;
@apply overflow-hidden; @apply overflow-hidden;
@apply bg-gray-100; @apply bg-gray-100;
@apply cursor-pointer; @apply cursor-pointer;
} }
.photo-wrapper img { .photo-wrapper img {
@apply w-full; @apply w-full;
@apply h-full; @apply h-full;
@apply object-cover; @apply object-cover;
@apply pointer-events-none; @apply pointer-events-none;
} }
.action-btn { .action-btn {
@apply absolute; @apply absolute;
@apply bg-black; @apply bg-black;
@apply bg-opacity-50; @apply bg-opacity-50;
@apply text-white; @apply text-white;
@apply rounded-full; @apply rounded-full;
@apply p-1; @apply p-1;
@apply flex; @apply flex;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply transition-all; @apply transition-all;
@apply duration-200; @apply duration-200;
@apply opacity-0; @apply opacity-0;
@apply z-10; @apply z-10;
} }
/* Show buttons on hover for desktop */ /* Show buttons on hover for desktop */
.action-btn { .action-btn {
@apply opacity-100; @apply opacity-100;
} }
.action-btn:disabled { .action-btn:disabled {
@apply opacity-30; @apply opacity-30;
@apply cursor-not-allowed; @apply cursor-not-allowed;
@apply bg-gray-500; @apply bg-gray-500;
@apply scale-90; @apply scale-90;
} }
.left-btn { .left-btn {
@apply top-1/2; @apply top-1/2;
@apply -translate-y-1/2; @apply -translate-y-1/2;
@apply left-2; @apply left-2;
} }
.right-btn { .right-btn {
@apply top-1/2; @apply top-1/2;
@apply -translate-y-1/2; @apply -translate-y-1/2;
@apply right-2; @apply right-2;
} }
.delete-btn { .delete-btn {
@apply top-2; @apply top-2;
@apply right-2; @apply right-2;
@apply bg-red-500; @apply bg-red-500;
@apply bg-opacity-50; @apply bg-opacity-50;
} }
.index-bubble { .index-bubble {
@apply absolute; @apply absolute;
@apply top-2; @apply top-2;
@apply left-2; @apply left-2;
@apply bg-black; @apply bg-black;
@apply bg-opacity-50; @apply bg-opacity-50;
@apply text-white; @apply text-white;
@apply text-xs; @apply text-xs;
@apply font-medium; @apply font-medium;
@apply rounded-full; @apply rounded-full;
@apply w-6; @apply w-6;
@apply h-6; @apply h-6;
@apply flex; @apply flex;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply z-10; @apply z-10;
} }
.loading-overlay { .loading-overlay {
@apply absolute; @apply absolute;
@apply inset-0; @apply inset-0;
@apply flex; @apply flex;
@apply flex-col; @apply flex-col;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply bg-black; @apply bg-black;
@apply bg-opacity-50; @apply bg-opacity-50;
@apply z-20; @apply z-20;
} }
.loading-overlay.uploading { .loading-overlay.uploading {
@apply bg-opacity-75; @apply bg-opacity-75;
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Album", "title": "Album",
"dropzoneText": "Drop a photo here to add it to your album", "dropzoneText": "Drop a photo here to add it to your album",
"processing": "Processing...", "processing": "Processing...",
"uploading": "Uploading...", "uploading": "Uploading...",
"moveLeft": "Move Left", "moveLeft": "Move Left",
"moveRight": "Move Right", "moveRight": "Move Right",
"delete": "Delete" "delete": "Delete"
}, },
"fr": { "fr": {
"title": "Album", "title": "Album",
"dropzoneText": "Déposez une photo ici pour l'ajouter à l'album", "dropzoneText": "Déposez une photo ici pour l'ajouter à l'album",
"processing": "Traitement en cours...", "processing": "Traitement en cours...",
"uploading": "Téléchargement...", "uploading": "Téléchargement...",
"moveLeft": "Déplacer à gauche", "moveLeft": "Déplacer à gauche",
"moveRight": "Déplacer à droite", "moveRight": "Déplacer à droite",
"delete": "Supprimer" "delete": "Supprimer"
}, }
"es": {
"title": "Album",
"dropzoneText": "Suelta una foto aquí para añadirla al álbum",
"processing": "Procesando...",
"uploading": "Subiendo...",
"moveLeft": "Mover a la izquierda",
"moveRight": "Mover a la derecha",
"delete": "Eliminar"
}
} }
</i18n> </i18n>

208
frontend/src/views/creators/AlbumView.vue
View File

@@ -1,138 +1,134 @@
<template> <template>
<div v-if="hasImages" class="album-view"> <div
<!-- Album Display --> v-if="hasImages"
<div class="image-grid"> class="album-view"
<div v-for="(url, index) in displayedImages" >
:key="index" <!-- Album Display -->
class="image-wrapper" <div class="image-grid">
@click="$emit('photo-click', index)"> <div
<img :src="url" v-for="(url, index) in displayedImages"
:alt="t('creator.sections.album.image')" :key="index"
class="image"/> class="image-wrapper"
</div> @click="$emit('photo-click', index)"
>
<img
:alt="t('creator.sections.album.image')"
:src="url"
class="image"
/>
</div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
// Add 'photo-click' to emits // Add 'photo-click' to emits
const emit = defineEmits(['photo-click']); const emit = defineEmits(['photo-click']);
import { computed, ref, onMounted, onUnmounted } from "vue"; import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const props = defineProps({ const props = defineProps({
images: { images: {
type: Array, type: Array,
required: true, required: true,
default: () => [] default: () => [],
} },
}); });
const { t } = useI18n(); const { t } = useI18n();
// Add a reactive window width // Add a reactive window width
const windowWidth = ref(window.innerWidth); const windowWidth = ref(window.innerWidth);
// Update window width on resize // Update window width on resize
const handleResize = () => { const handleResize = () => {
windowWidth.value = window.innerWidth; windowWidth.value = window.innerWidth;
}; };
// Add and remove event listener // Add and remove event listener
onMounted(() => { onMounted(() => {
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}); });
const hasImages = computed(() => { const hasImages = computed(() => {
return props.images.some(url => url); return props.images.some(url => url);
}); });
const nonEmptyImages = computed(() => { const nonEmptyImages = computed(() => {
return props.images.filter(url => url); return props.images.filter(url => url);
}); });
// Show different number of images based on reactive window width // Show different number of images based on reactive window width
const displayedImages = computed(() => { const displayedImages = computed(() => {
const images = nonEmptyImages.value; const images = nonEmptyImages.value;
if (windowWidth.value >= 1024) { if (windowWidth.value >= 1024) {
return images.slice(0, 5); // 5 images on large screens return images.slice(0, 5); // 5 images on large screens
} else if (windowWidth.value >= 768) { } else if (windowWidth.value >= 768) {
return images.slice(0, 4); // 4 images on medium screens return images.slice(0, 4); // 4 images on medium screens
} }
return images.slice(0, 3); // 3 images on smaller screens return images.slice(0, 3); // 3 images on smaller screens
}); });
// Add computed property for grid columns based on number of images // Add computed property for grid columns based on number of images
const gridColumns = computed(() => { const gridColumns = computed(() => {
const count = displayedImages.value.length; const count = displayedImages.value.length;
if (count === 1) return '1fr'; if (count === 1) return '1fr';
if (count === 2) return 'repeat(2, 1fr)'; if (count === 2) return 'repeat(2, 1fr)';
if (count === 3) return 'repeat(3, 1fr)'; if (count === 3) return 'repeat(3, 1fr)';
if (count === 4) return 'repeat(4, 1fr)'; if (count === 4) return 'repeat(4, 1fr)';
return 'repeat(5, 1fr)'; return 'repeat(5, 1fr)';
}); });
</script> </script>
<style scoped> <style scoped>
.album-view { .album-view {
@apply w-full; @apply w-full;
} }
.image-grid { .image-grid {
@apply w-full grid; @apply w-full grid;
grid-template-columns: v-bind(gridColumns); grid-template-columns: v-bind(gridColumns);
} }
.image-wrapper { .image-wrapper {
@apply relative w-full aspect-square; @apply relative w-full aspect-square;
} }
.image { .image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
/* Responsive adjustments */
/* Responsive adjustments */
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"creator": { "creator": {
"sections": { "sections": {
"album": { "album": {
"title": "Photo Album", "title": "Photo Album",
"image": "Album image" "image": "Album image"
}
}
} }
} },
} "fr": {
}, "creator": {
"fr": { "sections": {
"creator": { "album": {
"sections": { "title": "Album photo",
"album": { "image": "Image de l'album"
"title": "Album photo", }
"image": "Image de l'album" }
} }
}
} }
},
"es": {
"creator": {
"sections": {
"album": {
"title": "Álbum de fotos",
"image": "Imagen del álbum"
}
}
}
}
} }
</i18n> </i18n>

310
frontend/src/views/creators/AlbumViewer.vue
View File

@@ -1,175 +1,207 @@
<template> <template>
<v-dialog v-model="dialog" fullscreen :scrim="true" transition="dialog-bottom-transition" <v-dialog
@click:outside="closeViewer"> v-model="dialog"
<div class="album-viewer" @click.self="closeViewer"> :scrim="true"
<!-- Main image container --> fullscreen
<div class="image-container"> transition="dialog-bottom-transition"
<img :src="currentImage" :alt="t('viewer.imageAlt', { index: currentIndex + 1 })" class="main-image" /> @click:outside="closeViewer"
>
<div
class="album-viewer"
@click.self="closeViewer"
>
<!-- Main image container -->
<div class="image-container">
<img
:alt="t('viewer.imageAlt', { index: currentIndex + 1 })"
:src="currentImage"
class="main-image"
/>
<!-- Navigation buttons --> <!-- Navigation buttons -->
<button class="nav-btn left-btn" @click.stop="previousImage" :disabled="currentIndex === 0" <button
:title="t('viewer.previous')"> :disabled="currentIndex === 0"
<v-icon size="large" color="white" :icon="mdiChevronLeft" /> :title="t('viewer.previous')"
</button> class="nav-btn left-btn"
@click.stop="previousImage"
>
<v-icon
:icon="mdiChevronLeft"
color="white"
size="large"
/>
</button>
<button class="nav-btn right-btn" @click.stop="nextImage" :disabled="currentIndex === images.length - 1" <button
:title="t('viewer.next')"> :disabled="currentIndex === images.length - 1"
<v-icon size="large" color="white" :icon="mdiChevronRight" /> :title="t('viewer.next')"
</button> class="nav-btn right-btn"
@click.stop="nextImage"
>
<v-icon
:icon="mdiChevronRight"
color="white"
size="large"
/>
</button>
<!-- Close button --> <!-- Close button -->
<button class="close-btn" @click.stop="closeViewer" :title="t('viewer.close')"> <button
<v-icon size="large" color="white" :icon="mdiClose" /> :title="t('viewer.close')"
</button> class="close-btn"
@click.stop="closeViewer"
>
<v-icon
:icon="mdiClose"
color="white"
size="large"
/>
</button>
<!-- Image counter --> <!-- Image counter -->
<div class="image-counter"> <div class="image-counter">{{ currentIndex + 1 }} / {{ images.length }}</div>
{{ currentIndex + 1 }} / {{ images.length }} </div>
</div> </div>
</div> </v-dialog>
</div>
</v-dialog>
</template> </template>
<script setup> <script setup>
import { ref, watch, computed } from 'vue'; import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js'; import { mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Boolean, type: Boolean,
required: true required: true,
}, },
images: { images: {
type: Array, type: Array,
required: true required: true,
}, },
startIndex: { startIndex: {
type: Number, type: Number,
default: 0 default: 0,
} },
}); });
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const dialog = ref(false); const dialog = ref(false);
const currentIndex = ref(0); const currentIndex = ref(0);
const currentImage = computed(() => props.images[currentIndex.value]); const currentImage = computed(() => props.images[currentIndex.value]);
watch(() => props.modelValue, (newVal) => { watch(
dialog.value = newVal; () => props.modelValue,
if (newVal) { newVal => {
currentIndex.value = props.startIndex; dialog.value = newVal;
} if (newVal) {
}); currentIndex.value = props.startIndex;
}
}
);
watch(() => dialog.value, (newVal) => { watch(
emit('update:modelValue', newVal); () => dialog.value,
}); newVal => {
emit('update:modelValue', newVal);
}
);
function nextImage() { function nextImage() {
if (currentIndex.value < props.images.length - 1) { if (currentIndex.value < props.images.length - 1) {
currentIndex.value++; currentIndex.value++;
} }
} }
function previousImage() { function previousImage() {
if (currentIndex.value > 0) { if (currentIndex.value > 0) {
currentIndex.value--; currentIndex.value--;
} }
} }
function closeViewer() { function closeViewer() {
dialog.value = false; dialog.value = false;
} }
</script> </script>
<style scoped> <style scoped>
.album-viewer { .album-viewer {
@apply fixed inset-0; @apply fixed inset-0;
@apply flex items-center justify-center; @apply flex items-center justify-center;
@apply bg-black bg-opacity-90; @apply bg-black bg-opacity-90;
@apply z-50; @apply z-50;
} }
.image-container { .image-container {
@apply relative; @apply relative;
@apply max-w-[90vw]; @apply max-w-[90vw];
@apply max-h-[90vh]; @apply max-h-[90vh];
} }
.main-image { .main-image {
@apply max-w-full; @apply max-w-full;
@apply max-h-[90vh]; @apply max-h-[90vh];
@apply object-contain; @apply object-contain;
} }
.nav-btn { .nav-btn {
@apply absolute top-1/2 -translate-y-1/2; @apply absolute top-1/2 -translate-y-1/2;
@apply p-4; @apply p-4;
@apply rounded-full; @apply rounded-full;
@apply bg-black bg-opacity-50; @apply bg-black bg-opacity-50;
@apply transition-all duration-200; @apply transition-all duration-200;
@apply hover:bg-opacity-75; @apply hover:bg-opacity-75;
@apply disabled:opacity-30 disabled:cursor-not-allowed; @apply disabled:opacity-30 disabled:cursor-not-allowed;
} }
.left-btn { .left-btn {
@apply left-4; @apply left-4;
} }
.right-btn { .right-btn {
@apply right-4; @apply right-4;
} }
.close-btn { .close-btn {
@apply absolute top-4 right-4; @apply absolute top-4 right-4;
@apply p-2; @apply p-2;
@apply rounded-full; @apply rounded-full;
@apply bg-black bg-opacity-50; @apply bg-black bg-opacity-50;
@apply transition-all duration-200; @apply transition-all duration-200;
@apply hover:bg-opacity-75; @apply hover:bg-opacity-75;
} }
.image-counter { .image-counter {
@apply absolute bottom-4 left-1/2 -translate-x-1/2; @apply absolute bottom-4 left-1/2 -translate-x-1/2;
@apply px-4 py-2; @apply px-4 py-2;
@apply bg-black bg-opacity-50; @apply bg-black bg-opacity-50;
@apply text-white; @apply text-white;
@apply rounded-full; @apply rounded-full;
@apply text-sm; @apply text-sm;
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"viewer": { "viewer": {
"previous": "Previous image", "previous": "Previous image",
"next": "Next image", "next": "Next image",
"close": "Close viewer", "close": "Close viewer",
"imageAlt": "Image {index}" "imageAlt": "Image {index}"
}
},
"fr": {
"viewer": {
"previous": "Image précédente",
"next": "Image suivante",
"close": "Fermer",
"imageAlt": "Image {index}"
}
} }
},
"fr": {
"viewer": {
"previous": "Image précédente",
"next": "Image suivante",
"close": "Fermer",
"imageAlt": "Image {index}"
}
},
"es": {
"viewer": {
"previous": "Imagen anterior",
"next": "Imagen siguiente",
"close": "Cerrar",
"imageAlt": "Imagen {index}"
}
}
} }
</i18n> </i18n>

300
frontend/src/views/creators/BannerActions.vue
View File

@@ -1,172 +1,170 @@
<script setup> <script setup>
import {useBrandingStore} from '@/stores/brandingStore.js'; import { useBrandingStore } from '@/stores/brandingStore.js';
import DonationButton from '@/views/creators/DonationButton.vue'; import DonationButton from '@/views/creators/DonationButton.vue';
import CreatorLogo from "@/views/creators/CreatorLogo.vue"; import CreatorLogo from '@/views/creators/CreatorLogo.vue';
import NameTitle from "@/views/creators/NameTitle.vue"; import NameTitle from '@/views/creators/NameTitle.vue';
import Linkedin from "@/views/svg/Linkedin.vue"; import Linkedin from '@/views/svg/Linkedin.vue';
import X from "@/views/svg/X.vue"; import X from '@/views/svg/X.vue';
import Facebook from "@/views/svg/Facebook.vue"; import Facebook from '@/views/svg/Facebook.vue';
import Instagram from "@/views/svg/Instagram.vue"; import Instagram from '@/views/svg/Instagram.vue';
import Tiktok from "@/views/svg/Tiktok.vue"; import Tiktok from '@/views/svg/Tiktok.vue';
import Reddit from "@/views/svg/Reddit.vue"; import Reddit from '@/views/svg/Reddit.vue';
import Youtube from "@/views/svg/Youtube.vue"; import Youtube from '@/views/svg/Youtube.vue';
import Web from "@/views/svg/Web.vue"; import Web from '@/views/svg/Web.vue';
import {useI18n} from 'vue-i18n' import { useI18n } from 'vue-i18n';
const brandingStore = useBrandingStore(); const brandingStore = useBrandingStore();
const baseURL = window.location.origin; const baseURL = window.location.origin;
const {t} = useI18n(); const { t } = useI18n();
</script> </script>
<template> <template>
<div class="flex flex-column w-full"> <div class="flex flex-column w-full">
<!-- Container principal avec le profil --> <!-- Container principal avec le profil -->
<div class="relative w-full"> <div class="relative w-full">
<div class="bg-hPrimary text-hOnPrimary relative"> <div class="bg-hPrimary text-hOnPrimary relative">
<!-- Portrait that overlaps both sections -->
<div class="absolute left-4 -bottom-2 z-10">
<creator-logo />
</div>
<!-- Portrait that overlaps both sections --> <!-- Desktop version (visible only on écrans moyens et grands) -->
<div class="absolute left-4 -bottom-2 z-10"> <div class="social-info">
<creator-logo/> <div class="w-36"></div>
<div class="flex-grow flex flex-row">
<div class="flex-grow">
<name-title></name-title>
</div>
<div class="hidden sm:flex pr-6">
<DonationButton
v-if="brandingStore.value?.acceptDonation"
:creator-id="brandingStore.value?.id"
:creator-name="brandingStore.value?.name"
:on-cancelled-url="baseURL + '/@' + brandingStore.value.slug + '/tip-cancelled'"
:on-success-url="baseURL + '/@' + brandingStore.value.slug + '/tip-completed'"
/>
</div>
</div>
</div>
</div>
</div> </div>
<!-- Desktop version (visible only on écrans moyens et grands) --> <!-- Section pour les icônes de réseaux sociaux -->
<div class="social-info"> <div class="h-12 flex w-full items-center justify-center bg-hSecondary text-hOnSecondary relative">
<div class="w-36"> <div class="flex flex-row gap-10">
</div> <a
<div class="flex-grow flex flex-row"> v-if="brandingStore.value?.socials?.facebookUrl"
<div class="flex-grow"> :href="brandingStore.value?.socials?.facebookUrl"
<name-title></name-title> :title="t('facebook')"
target="_blank"
>
<facebook class="social-icon"></facebook>
</a>
<a
v-if="brandingStore.value?.socials?.instagramUrl"
:href="brandingStore.value?.socials?.instagramUrl"
:title="t('instagram')"
target="_blank"
>
<instagram class="social-icon"></instagram>
</a>
<a
v-if="brandingStore.value?.socials?.linkedInUrl"
:href="brandingStore.value?.socials?.linkedInUrl"
:title="t('linkedin')"
target="_blank"
>
<linkedin class="social-icon"></linkedin>
</a>
<a
v-if="brandingStore.value?.socials?.redditUrl"
:href="brandingStore.value?.socials?.redditUrl"
:title="t('reddit')"
target="_blank"
>
<reddit class="social-icon"></reddit>
</a>
<a
v-if="brandingStore.value?.socials?.tikTokUrl"
:href="brandingStore.value?.socials?.tikTokUrl"
:title="t('tiktok')"
target="_blank"
>
<tiktok class="social-icon"></tiktok>
</a>
<a
v-if="brandingStore.value?.socials?.xUrl"
:href="brandingStore.value?.socials?.xUrl"
:title="t('x')"
target="_blank"
>
<x class="social-icon"></x>
</a>
<a
v-if="brandingStore.value?.socials?.youtubeUrl"
:href="brandingStore.value?.socials?.youtubeUrl"
:title="t('youtube')"
target="_blank"
>
<youtube class="social-icon"></youtube>
</a>
<a
v-if="brandingStore.value?.socials?.websiteUrl"
:href="brandingStore.value?.socials?.websiteUrl"
:title="t('website')"
target="_blank"
>
<web class="social-icon"></web>
</a>
</div> </div>
<div class="hidden sm:flex pr-6">
<DonationButton
v-if="brandingStore.value?.acceptDonation"
:creator-id="brandingStore.value?.id"
:creator-name="brandingStore.value?.name"
:on-cancelled-url="baseURL + '/@' + brandingStore.value.slug + '/tip-cancelled'"
:on-success-url="baseURL + '/@' + brandingStore.value.slug + '/tip-completed'"
/>
</div>
</div>
</div> </div>
</div>
</div> </div>
<!-- Section pour les icônes de réseaux sociaux -->
<div
class="h-12 flex w-full items-center justify-center bg-hSecondary text-hOnSecondary relative"
>
<div class="flex flex-row gap-10">
<a v-if="brandingStore.value?.socials?.facebookUrl"
:href="brandingStore.value?.socials?.facebookUrl"
target="_blank"
:title="t('facebook')">
<facebook class="social-icon"></facebook>
</a>
<a v-if="brandingStore.value?.socials?.instagramUrl"
:href="brandingStore.value?.socials?.instagramUrl"
target="_blank"
:title="t('instagram')">
<instagram class="social-icon"></instagram>
</a>
<a v-if="brandingStore.value?.socials?.linkedInUrl"
:href="brandingStore.value?.socials?.linkedInUrl"
target="_blank"
:title="t('linkedin')">
<linkedin class="social-icon"></linkedin>
</a>
<a v-if="brandingStore.value?.socials?.redditUrl"
:href="brandingStore.value?.socials?.redditUrl"
target="_blank"
:title="t('reddit')">
<reddit class="social-icon"></reddit>
</a>
<a v-if="brandingStore.value?.socials?.tikTokUrl"
:href="brandingStore.value?.socials?.tikTokUrl"
target="_blank"
:title="t('tiktok')">
<tiktok class="social-icon"></tiktok>
</a>
<a v-if="brandingStore.value?.socials?.xUrl"
:href="brandingStore.value?.socials?.xUrl"
target="_blank"
:title="t('x')">
<x class="social-icon"></x>
</a>
<a v-if="brandingStore.value?.socials?.youtubeUrl"
:href="brandingStore.value?.socials?.youtubeUrl"
target="_blank"
:title="t('youtube')">
<youtube class="social-icon"></youtube>
</a>
<a v-if="brandingStore.value?.socials?.websiteUrl"
:href="brandingStore.value?.socials?.websiteUrl"
target="_blank"
:title="t('website')">
<web class="social-icon"></web>
</a>
</div>
</div>
</div>
</template> </template>
<style scoped> <style scoped>
.social-icon { .social-icon {
@apply w-5 h-5; @apply w-5 h-5;
@apply text-base; @apply text-base;
@apply transform transition-transform duration-200; @apply transform transition-transform duration-200;
@apply hover:scale-125 hover:text-fuchsia-900; @apply hover:scale-125 hover:text-fuchsia-900;
} }
.social-info { .social-info {
@apply flex flex-row; @apply flex flex-row;
@apply py-4 w-full; @apply py-4 w-full;
@apply justify-center ; @apply justify-center;
@apply max-h-52; @apply max-h-52;
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"facebook": "Facebook", "facebook": "Facebook",
"instagram": "Instagram", "instagram": "Instagram",
"linkedin": "LinkedIn", "linkedin": "LinkedIn",
"reddit": "Reddit", "reddit": "Reddit",
"tiktok": "TikTok", "tiktok": "TikTok",
"x": "X (Twitter)", "x": "X (Twitter)",
"youtube": "YouTube", "youtube": "YouTube",
"website": "Website" "website": "Website"
}, },
"fr": { "fr": {
"facebook": "Facebook", "facebook": "Facebook",
"instagram": "Instagram", "instagram": "Instagram",
"linkedin": "LinkedIn", "linkedin": "LinkedIn",
"reddit": "Reddit", "reddit": "Reddit",
"tiktok": "TikTok", "tiktok": "TikTok",
"x": "X (Twitter)", "x": "X (Twitter)",
"youtube": "YouTube", "youtube": "YouTube",
"website": "Site web" "website": "Site web"
}, }
"es": {
"facebook": "Facebook",
"instagram": "Instagram",
"linkedin": "LinkedIn",
"reddit": "Reddit",
"tiktok": "TikTok",
"x": "X (Twitter)",
"youtube": "YouTube",
"website": "Sitio web"
}
} }
</i18n> </i18n>

674
frontend/src/views/creators/BannerEditor.vue
View File

@@ -1,375 +1,377 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-title"> <div class="card-title">
{{ t('title') }} {{ t('title') }}
</div>
<div class="card-content">
<p class="card-text">
{{ t('description') }}
</p>
<div class="file-input-container">
<input
type="file"
ref="fileInput"
accept="image/*"
class="hidden"
@change="onFileSelected"
/>
<button
class="choose-file-button"
@click="triggerFileInput"
>
{{ t('chooseImage') }}
</button>
</div>
<div v-if="errorMessage" class="error-message">
{{ errorMessage }}
</div>
<div v-if="showCropper" class="cropper-wrapper">
<Cropper
ref="cropper"
:src="fileUrl"
:aspect-ratio="4"
:stencil-props="{
aspectRatio: 4,
class: 'banner-stencil'
}"
/>
</div>
<div v-else class="image-preview-container"
@click="startEditing"
@dragover.prevent
@drop.prevent="handleDrop">
<img
:src="fileUrl || fallbackUrl"
:alt="t('preview')"
class="preview-image"
/>
<div class="edit-overlay">
<span class="edit-text">{{ t('clickToEdit') }}</span>
</div> </div>
</div>
</div>
<div class="card-actions"> <div class="card-content">
<button class="secondary" <p class="card-text">
@click="cancel" {{ t('description') }}
:disabled="isUploading"> </p>
{{ t('cancel') }}
</button> <div class="file-input-container">
<button class="primary" <input
@click="showCropper ? applyCrop() : publish()" ref="fileInput"
:disabled="!selectedFile || isUploading"> accept="image/*"
<template v-if="isUploading"> class="hidden"
<span class="loading-spinner"></span> type="file"
{{ t('uploading') }} ({{ uploadProgress }}%) @change="onFileSelected"
</template> />
<template v-else> <button
{{ showCropper ? t('apply') : t('save') }} class="choose-file-button"
</template> @click="triggerFileInput"
</button> >
{{ t('chooseImage') }}
</button>
</div>
<div
v-if="errorMessage"
class="error-message"
>
{{ errorMessage }}
</div>
<div
v-if="showCropper"
class="cropper-wrapper"
>
<Cropper
ref="cropper"
:aspect-ratio="4"
:src="fileUrl"
:stencil-props="{
aspectRatio: 4,
class: 'banner-stencil',
}"
/>
</div>
<div
v-else
class="image-preview-container"
@click="startEditing"
@dragover.prevent
@drop.prevent="handleDrop"
>
<img
:alt="t('preview')"
:src="fileUrl || fallbackUrl"
class="preview-image"
/>
<div class="edit-overlay">
<span class="edit-text">{{ t('clickToEdit') }}</span>
</div>
</div>
</div>
<div class="card-actions">
<button
:disabled="isUploading"
class="secondary"
@click="cancel"
>
{{ t('cancel') }}
</button>
<button
:disabled="!selectedFile || isUploading"
class="primary"
@click="showCropper ? applyCrop() : publish()"
>
<template v-if="isUploading">
<span class="loading-spinner"></span>
{{ t('uploading') }} ({{ uploadProgress }}%)
</template>
<template v-else>
{{ showCropper ? t('apply') : t('save') }}
</template>
</button>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue' import { ref } from 'vue';
import {useClient} from '@/plugins/api.js' import { useClient } from '@/plugins/api.js';
import { Cropper } from 'vue-advanced-cropper' import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css' import 'vue-advanced-cropper/dist/style.css';
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n';
const props = defineProps({ const props = defineProps({
creator: { creator: {
required: true required: true,
} },
}) });
const emits = defineEmits(['closeRequested']) const emits = defineEmits(['closeRequested']);
const fileInput = ref(null) const fileInput = ref(null);
const selectedFile = ref(null) const selectedFile = ref(null);
const fileUrl = ref(props.creator?.bannerUrl) const fileUrl = ref(props.creator?.bannerUrl);
const fallbackUrl = '/images/hutopymedia/banners/hutopyul.png' const fallbackUrl = '/images/hutopymedia/banners/hutopyul.png';
const errorMessage = ref('') const errorMessage = ref('');
const showCropper = ref(false) const showCropper = ref(false);
const cropper = ref(null) const cropper = ref(null);
const isUploading = ref(false) const isUploading = ref(false);
const uploadProgress = ref(0) const uploadProgress = ref(0);
// Get translations for this component // Get translations for this component
const { t } = useI18n() const { t } = useI18n();
const triggerFileInput = () => { const triggerFileInput = () => {
if (fileInput.value) { if (fileInput.value) {
fileInput.value.value = '' // Reset the input value to ensure the change event fires fileInput.value.value = ''; // Reset the input value to ensure the change event fires
fileInput.value.click() fileInput.value.click();
}
}
const onFileSelected = (event) => {
const file = event.target.files[0]
if (file) {
selectedFile.value = file
const reader = new FileReader()
reader.onload = (e) => {
fileUrl.value = e.target.result
showCropper.value = true
}
reader.readAsDataURL(file)
} else {
selectedFile.value = null
fileUrl.value = null
showCropper.value = false
}
}
const startEditing = () => {
if (fileUrl.value && fileUrl.value.startsWith('data:')) {
// Only try to load the image if it's a data URL (newly selected image)
const blob = dataURLtoBlob(fileUrl.value)
selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' })
showCropper.value = true
} else {
// If no image is selected, using fallback, or have an existing uploaded image, trigger the file input
triggerFileInput()
}
}
// Helper function to convert data URL to blob
const dataURLtoBlob = (dataURL) => {
const arr = dataURL.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
const applyCrop = () => {
if (!cropper.value) return
const canvas = cropper.value.getResult().canvas
canvas.toBlob((blob) => {
const croppedFile = new File([blob], selectedFile.value.name, {
type: selectedFile.value.type
})
selectedFile.value = croppedFile
fileUrl.value = canvas.toDataURL()
showCropper.value = false
}, selectedFile.value.type)
}
const client = useClient()
const publish = async () => {
if (!selectedFile.value || isUploading.value) return
try {
isUploading.value = true
uploadProgress.value = 0
const formData = new FormData()
formData.append('file', selectedFile.value)
const response = await client.post(
`/api/creators/${props.creator.id}/banner`,
formData,
{
onUploadProgress: (progressEvent) => {
uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
}
} }
) };
props.creator.bannerUrl = `${response.data.blobUrl}?t=${Date.now()}` const onFileSelected = event => {
fileUrl.value = props.creator.bannerUrl const file = event.target.files[0];
emits('closeRequested') if (file) {
} catch (error) { selectedFile.value = file;
console.error(error) const reader = new FileReader();
errorMessage.value = t('errors.imageUpload') reader.onload = e => {
} finally { fileUrl.value = e.target.result;
isUploading.value = false showCropper.value = true;
uploadProgress.value = 0 };
} reader.readAsDataURL(file);
} } else {
selectedFile.value = null;
fileUrl.value = null;
showCropper.value = false;
}
};
const cancel = () => { const startEditing = () => {
showCropper.value = false if (fileUrl.value && fileUrl.value.startsWith('data:')) {
// Reset to original state if we were editing // Only try to load the image if it's a data URL (newly selected image)
if (props.creator?.bannerUrl) { const blob = dataURLtoBlob(fileUrl.value);
fileUrl.value = props.creator.bannerUrl selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' });
selectedFile.value = null showCropper.value = true;
} else { } else {
fileUrl.value = fallbackUrl // If no image is selected, using fallback, or have an existing uploaded image, trigger the file input
selectedFile.value = null triggerFileInput();
} }
emits('closeRequested') };
}
// Add drop handler // Helper function to convert data URL to blob
const handleDrop = (event) => { const dataURLtoBlob = dataURL => {
const file = event.dataTransfer.files[0] const arr = dataURL.split(',');
if (file && file.type.startsWith('image/')) { const mime = arr[0].match(/:(.*?);/)[1];
selectedFile.value = file const bstr = atob(arr[1]);
const reader = new FileReader() let n = bstr.length;
reader.onload = (e) => { const u8arr = new Uint8Array(n);
fileUrl.value = e.target.result while (n--) {
showCropper.value = true u8arr[n] = bstr.charCodeAt(n);
} }
reader.readAsDataURL(file) return new Blob([u8arr], { type: mime });
} };
}
const applyCrop = () => {
if (!cropper.value) return;
const canvas = cropper.value.getResult().canvas;
canvas.toBlob(blob => {
const croppedFile = new File([blob], selectedFile.value.name, {
type: selectedFile.value.type,
});
selectedFile.value = croppedFile;
fileUrl.value = canvas.toDataURL();
showCropper.value = false;
}, selectedFile.value.type);
};
const client = useClient();
const publish = async () => {
if (!selectedFile.value || isUploading.value) return;
try {
isUploading.value = true;
uploadProgress.value = 0;
const formData = new FormData();
formData.append('file', selectedFile.value);
const response = await client.post(`/api/creators/${props.creator.id}/banner`, formData, {
onUploadProgress: progressEvent => {
uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total);
},
});
props.creator.bannerUrl = `${response.data.blobUrl}?t=${Date.now()}`;
fileUrl.value = props.creator.bannerUrl;
emits('closeRequested');
} catch (error) {
console.error(error);
errorMessage.value = t('errors.imageUpload');
} finally {
isUploading.value = false;
uploadProgress.value = 0;
}
};
const cancel = () => {
showCropper.value = false;
// Reset to original state if we were editing
if (props.creator?.bannerUrl) {
fileUrl.value = props.creator.bannerUrl;
selectedFile.value = null;
} else {
fileUrl.value = fallbackUrl;
selectedFile.value = null;
}
emits('closeRequested');
};
// Add drop handler
const handleDrop = event => {
const file = event.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) {
selectedFile.value = file;
const reader = new FileReader();
reader.onload = e => {
fileUrl.value = e.target.result;
showCropper.value = true;
};
reader.readAsDataURL(file);
}
};
</script> </script>
<style scoped> <style scoped>
.card-text { .card-text {
@apply font-sans text-lg; @apply font-sans text-lg;
} }
.image-preview-container { .image-preview-container {
@apply mb-5; @apply mb-5;
@apply w-full; @apply w-full;
@apply flex; @apply flex;
@apply justify-center; @apply justify-center;
@apply items-center; @apply items-center;
@apply overflow-hidden; @apply overflow-hidden;
@apply rounded-lg; @apply rounded-lg;
@apply relative; @apply relative;
@apply cursor-pointer; @apply cursor-pointer;
@apply border-2; @apply border-2;
@apply border-dashed; @apply border-dashed;
@apply border-gray-300; @apply border-gray-300;
@apply hover:border-gray-500; @apply hover:border-gray-500;
@apply transition-colors; @apply transition-colors;
@apply duration-200; @apply duration-200;
} }
.preview-image { .preview-image {
@apply w-full; @apply w-full;
@apply aspect-[4/1]; @apply aspect-[4/1];
@apply object-cover; @apply object-cover;
} }
.edit-overlay { .edit-overlay {
@apply absolute; @apply absolute;
@apply inset-0; @apply inset-0;
@apply flex; @apply flex;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply bg-black; @apply bg-black;
@apply bg-opacity-0; @apply bg-opacity-0;
@apply transition-opacity; @apply transition-opacity;
@apply duration-200; @apply duration-200;
} }
.image-preview-container:hover .edit-overlay { .image-preview-container:hover .edit-overlay {
@apply bg-opacity-30; @apply bg-opacity-30;
} }
.edit-text { .edit-text {
@apply text-white; @apply text-white;
@apply font-medium; @apply font-medium;
@apply opacity-0; @apply opacity-0;
@apply transition-opacity; @apply transition-opacity;
@apply duration-200; @apply duration-200;
} }
.image-preview-container:hover .edit-text { .image-preview-container:hover .edit-text {
@apply opacity-100; @apply opacity-100;
} }
.cropper-wrapper { .cropper-wrapper {
@apply mb-5; @apply mb-5;
@apply w-full; @apply w-full;
@apply h-[400px]; @apply h-[400px];
@apply flex; @apply flex;
@apply justify-center; @apply justify-center;
@apply items-center; @apply items-center;
@apply overflow-hidden; @apply overflow-hidden;
} }
.file-input-container { .file-input-container {
@apply flex; @apply flex;
@apply justify-center; @apply justify-center;
@apply items-center; @apply items-center;
@apply w-full; @apply w-full;
} }
.choose-file-button { .choose-file-button {
@apply px-4; @apply px-4;
@apply py-2; @apply py-2;
@apply primary; @apply primary;
@apply rounded-lg; @apply rounded-lg;
@apply cursor-pointer; @apply cursor-pointer;
} }
.error-message { .error-message {
@apply text-red-500; @apply text-red-500;
@apply mt-2; @apply mt-2;
@apply text-center; @apply text-center;
@apply font-medium; @apply font-medium;
} }
:deep(.banner-stencil) { :deep(.banner-stencil) {
@apply border-2; @apply border-2;
@apply border-white; @apply border-white;
} }
:deep(.cropper) { :deep(.cropper) {
@apply max-h-full; @apply max-h-full;
} }
.loading-spinner { .loading-spinner {
@apply inline-block; @apply inline-block;
@apply w-4; @apply w-4;
@apply h-4; @apply h-4;
@apply mr-2; @apply mr-2;
@apply border-2; @apply border-2;
@apply border-white; @apply border-white;
@apply border-t-transparent; @apply border-t-transparent;
@apply rounded-full; @apply rounded-full;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@keyframes spin { @keyframes spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Banner Editor", "title": "Banner Editor",
"description": "Upload or edit your profile banner image. The recommended size is 1024x256 pixels (4:1 ratio).", "description": "Upload or edit your profile banner image. The recommended size is 1024x256 pixels (4:1 ratio).",
"chooseImage": "Choose an image", "chooseImage": "Choose an image",
"clickToEdit": "Click to edit", "clickToEdit": "Click to edit",
"uploading": "Uploading" "uploading": "Uploading"
}, },
"fr": { "fr": {
"title": "Éditeur de bannière", "title": "Éditeur de bannière",
"description": "Téléchargez ou modifiez votre image de bannière de profil. La taille recommandée est de 1024x256 pixels (ratio 4:1).", "description": "Téléchargez ou modifiez votre image de bannière de profil. La taille recommandée est de 1024x256 pixels (ratio 4:1).",
"chooseImage": "Choisir une image", "chooseImage": "Choisir une image",
"clickToEdit": "Cliquez pour modifier", "clickToEdit": "Cliquez pour modifier",
"uploading": "Téléchargement" "uploading": "Téléchargement"
}, }
"es": {
"title": "Editor de banner",
"description": "Sube o edita tu imagen de banner de perfil. El tamaño recomendado es de 1024x256 píxeles (ratio 4:1).",
"chooseImage": "Elegir una imagen",
"clickToEdit": "Haga clic para editar",
"uploading": "Subiendo"
}
} }
</i18n> </i18n>

227
frontend/src/views/creators/CreateCreator.vue
View File

@@ -1,144 +1,131 @@
<script setup> <script setup>
import {computed, ref} from 'vue' import { computed, ref } from 'vue';
import {useUserProfileStore} from "@/stores/userProfileStore.js"; import { useUserProfileStore } from '@/stores/userProfileStore.js';
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js"; import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
import {useClient} from "@/plugins/api.js"; import { useClient } from '@/plugins/api.js';
import {useRouter, useRoute} from "vue-router"; import { useRoute, useRouter } from 'vue-router';
import NameEditor from "@/views/creators/NameEditor.vue"; import NameEditor from '@/views/creators/NameEditor.vue';
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n';
const creatorName = ref(''); const creatorName = ref('');
const creatorNameReservationId = ref(undefined); const creatorNameReservationId = ref(undefined);
const canSave = computed(() => creatorNameReservationId.value !== undefined) const canSave = computed(() => creatorNameReservationId.value !== undefined);
const isOperationPending = ref(false); const isOperationPending = ref(false);
const errorMessage = ref(''); const errorMessage = ref('');
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const creatorProfileStore = useCreatorProfileStore(); const creatorProfileStore = useCreatorProfileStore();
const userProfileStore = useUserProfileStore(); const userProfileStore = useUserProfileStore();
const { t } = useI18n(); const { t } = useI18n();
function handleCreatorNameReservationIdChanged($event) { function handleCreatorNameReservationIdChanged($event) {
creatorNameReservationId.value = $event creatorNameReservationId.value = $event;
}
function cancel () {
// if a returnUrl query‑string was supplied, prefer it
const returnUrl = route.query.returnUrl
if (typeof returnUrl === 'string' && returnUrl.length) {
router.push(returnUrl)
return
}
// otherwise just go back one step in history
router.back()
}
// TODO: The `fetchCreatorProfile` function should be private (push-up to the store)!
async function createAccount() {
try {
isOperationPending.value = true;
const client = useClient();
errorMessage.value = '';
await client.post('/api/creators', {
creatorId: userProfileStore.user.id,
slugReservationId: creatorNameReservationId.value,
});
await creatorProfileStore.fetchCreatorProfile();
await router.push(`/@${creatorProfileStore.creator.slug}`);
} catch (error) {
if (error?.response?.data?.errors) {
errorMessage.value = error.response.data.errors[0]?.['reason'] || t('errors.unexpected');
} else {
errorMessage.value = error?.response?.data?.message || error.message || t('errors.unexpected');
} }
} finally {
isOperationPending.value = false;
}
}
function cancel() {
// if a returnUrl query‑string was supplied, prefer it
const returnUrl = route.query.returnUrl;
if (typeof returnUrl === 'string' && returnUrl.length) {
router.push(returnUrl);
return;
}
// otherwise just go back one step in history
router.back();
}
// TODO: The `fetchCreatorProfile` function should be private (push-up to the store)!
async function createAccount() {
try {
isOperationPending.value = true;
const client = useClient();
errorMessage.value = '';
await client.post('/api/creators', {
creatorId: userProfileStore.user.id,
slugReservationId: creatorNameReservationId.value,
});
await creatorProfileStore.fetchCreatorProfile();
await router.push(`/@${creatorProfileStore.creator.slug}`);
} catch (error) {
if (error?.response?.data?.errors) {
errorMessage.value = error.response.data.errors[0]?.['reason'] || t('errors.unexpected');
} else {
errorMessage.value = error?.response?.data?.message || error.message || t('errors.unexpected');
}
} finally {
isOperationPending.value = false;
}
}
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<div class="card"> <div class="card">
<div class="card-title">
{{ t('title') }}
</div>
<div class="card-title"> <div class="card-content">
{{ t('title') }} <name-editor
</div> v-model:name="creatorName"
:creator-name-reservation-id="creatorNameReservationId"
<div class="card-content"> @update:creator-name-reservation-id="handleCreatorNameReservationIdChanged"
<name-editor ></name-editor>
v-model:name="creatorName" </div>
:creator-name-reservation-id="creatorNameReservationId"
@update:creator-name-reservation-id="handleCreatorNameReservationIdChanged"
></name-editor>
</div>
<div class="card-actions">
<button
class="secondary"
@click="cancel">
{{ t('cancel') }}
</button>
<button
class="primary"
:disabled="!canSave || isOperationPending"
@click="createAccount">
{{ t('create') }}
</button>
</div>
<div class="card-actions">
<button
class="secondary"
@click="cancel"
>
{{ t('cancel') }}
</button>
<button
:disabled="!canSave || isOperationPending"
class="primary"
@click="createAccount"
>
{{ t('create') }}
</button>
</div>
</div>
</div> </div>
</div>
<v-alert
v-if="!!errorMessage"
outlined
type="error"
>
{{ errorMessage }}
</v-alert>
<v-alert
v-if="!!errorMessage"
outlined
type="error"
>
{{ errorMessage }}
</v-alert>
</template> </template>
<style scoped> <style scoped>
.container {
.container { @apply min-h-screen w-full;
@apply min-h-screen w-full; @apply flex items-center justify-center;
@apply flex items-center justify-center; }
}
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Create your Hutopy", "title": "Create your Hutopy",
"cancel": "Cancel", "cancel": "Cancel",
"create": "Create my page", "create": "Create my page",
"errors": { "errors": {
"unexpected": "An unexpected error occurred" "unexpected": "An unexpected error occurred"
}
},
"fr": {
"title": "Créez votre Hutopy",
"cancel": "Annuler",
"create": "Créer ma page",
"errors": {
"unexpected": "Une erreur inattendue s'est produite"
}
} }
},
"fr": {
"title": "Créez votre Hutopy",
"cancel": "Annuler",
"create": "Créer ma page",
"errors": {
"unexpected": "Une erreur inattendue s'est produite"
}
},
"es": {
"title": "Crea tu Hutopy",
"cancel": "Cancelar",
"create": "Crear mi página",
"errors": {
"unexpected": "Se produjo un error inesperado"
}
}
} }
</i18n> </i18n>

105
frontend/src/views/creators/CreatorHome.vue
View File

@@ -1,64 +1,69 @@
<template> <template>
<div class="creator-home"> <div class="creator-home">
<!-- Content sections container -->
<!-- Content sections container --> <div class="content-sections">
<div class="content-sections"> <!-- Donation Section -->
<div
<!-- Donation Section --> v-if="brandingStore.value?.acceptDonation"
<div v-if="brandingStore.value?.acceptDonation" class="section sm:hidden"> class="section sm:hidden"
<DonationButton :creator-id="brandingStore.value?.id" :creator-name="brandingStore.value?.name" >
:on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id" <DonationButton
:on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id" /> :creator-id="brandingStore.value?.id"
</div> :creator-name="brandingStore.value?.name"
:on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
<!-- About Creator Section --> :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
<div class="section"> />
<AboutCreator /> </div>
</div>
<!-- About Creator Section -->
<div class="section">
<AboutCreator />
</div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import AboutCreator from './AboutCreator.vue'; import AboutCreator from './AboutCreator.vue';
import DonationButton from "@/views/creators/DonationButton.vue"; import DonationButton from '@/views/creators/DonationButton.vue';
import { useBrandingStore } from "@/stores/brandingStore.js"; import { useBrandingStore } from '@/stores/brandingStore.js';
const brandingStore = useBrandingStore();
const baseURL = window.location.origin;
const brandingStore = useBrandingStore();
const baseURL = window.location.origin;
</script> </script>
<style scoped> <style scoped>
.creator-home { .creator-home {
@apply w-full; @apply w-full;
@apply p-5; @apply p-5;
} }
.content-sections { .content-sections {
@apply flex flex-col; @apply flex flex-col;
@apply gap-5; @apply gap-5;
} }
.section { .section {
@apply rounded-2xl; @apply rounded-2xl;
@apply shadow-2xl; @apply shadow-2xl;
@apply relative; @apply relative;
} }
.section::before { .section::before {
content: ''; content: '';
@apply absolute inset-0; @apply absolute inset-0;
@apply rounded-2xl; @apply rounded-2xl;
@apply p-[1px]; @apply p-[1px];
background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%); background: linear-gradient(
mask: linear-gradient(#fff 0 0) content-box, 135deg,
linear-gradient(#fff 0 0); rgba(64, 64, 64, 1) 0%,
mask-composite: exclude; rgba(64, 64, 64, 0) 20%,
pointer-events: none; rgba(64, 64, 64, 0.5) 100%
} );
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
</style> </style>
<i18n>
</i18n>

20
frontend/src/views/creators/CreatorLayout.vue
View File

@@ -141,26 +141,6 @@
"goHome": "Aller à l'accueil" "goHome": "Aller à l'accueil"
} }
} }
},
"es": {
"creator": {
"layout": {
"deletion": {
"pending": "Esta página de creador está pendiente de eliminación"
}
},
"notFound": {
"title": "Creador No Encontrado",
"message": "El creador '{creator}' no existe o puede haber sido eliminado.",
"goHome": "Ir al Inicio",
"goBack": "Volver"
},
"error": {
"title": "Algo Salió Mal",
"message": "Tenemos problemas para cargar esta página de creador. Por favor, inténtalo de nuevo más tarde.",
"goHome": "Ir al Inicio"
}
}
} }
} }
</i18n> </i18n>

130
frontend/src/views/creators/CreatorLogo.vue
View File

@@ -1,78 +1,92 @@
<template> <template>
<div class="relative" @mouseenter="showTint = isCurrentCreator" @mouseleave="showTint = false" <div
@click="isCurrentCreator && openBannerEditor()"> class="relative"
@click="isCurrentCreator && openBannerEditor()"
@mouseenter="showTint = isCurrentCreator"
@mouseleave="showTint = false"
>
<div class="size-[110px] rounded-full border-4 border-hPrimary">
<img
:alt="t('logoAlt')"
:src="brandingStore.value?.portraitUrl ?? '/images/placeholders/profile.png'"
class="rounded-full"
height="110px"
width="110px"
/>
</div>
<div class="size-[110px] rounded-full border-4 border-hPrimary"> <!-- Tint Effect -->
<img :src="brandingStore.value?.portraitUrl ?? '/images/placeholders/profile.png'" :alt="t('logoAlt')" <div
width="110px" height="110px" class="rounded-full" /> v-if="showTint"
:title="t('editLogo')"
class="absolute inset-0 cursor-pointer rounded-full bg-black/25"
>
<!-- Top-right Icon -->
<div
class="absolute right-0 top-0 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"
>
<v-icon
:icon="mdiPencil"
large
/>
</div>
</div>
</div> </div>
<!-- Tint Effect --> <v-dialog
<div v-if="showTint" class="absolute inset-0 cursor-pointer rounded-full bg-black/25" :title="t('editLogo')"> v-model="isDialogOpen"
<!-- Top-right Icon --> max-width="800px"
<div >
class="absolute right-0 top-0 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"> <template #default="{ close }">
<v-icon large :icon="mdiPencil" /> <creator-logo-editor
</div> :creator="brandingStore?.value"
</div> @closeRequested="() => (isDialogOpen = false)"
></creator-logo-editor>
</div> </template>
</v-dialog>
<v-dialog v-model="isDialogOpen" max-width="800px">
<template #default="{ close }">
<creator-logo-editor :creator="brandingStore?.value"
@closeRequested="() => isDialogOpen = false"></creator-logo-editor>
</template>
</v-dialog>
</template> </template>
<script setup> <script setup>
import { useAuthStore } from "@/stores/authStore.js"; import { useAuthStore } from '@/stores/authStore.js';
import { useBrandingStore } from "@/stores/brandingStore.js"; import { useBrandingStore } from '@/stores/brandingStore.js';
import CreatorLogoEditor from "@/views/creators/CreatorLogoEditor.vue"; import CreatorLogoEditor from '@/views/creators/CreatorLogoEditor.vue';
import { computed, ref } from "vue"; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n';
import { mdiPencil } from '@mdi/js'; import { mdiPencil } from '@mdi/js';
const authStore = useAuthStore(); const authStore = useAuthStore();
const brandingStore = useBrandingStore(); const brandingStore = useBrandingStore();
const { t } = useI18n(); const { t } = useI18n();
// State // State
const showTint = ref(false); const showTint = ref(false);
const isDialogOpen = ref(false); const isDialogOpen = ref(false);
// Methods // Methods
const openBannerEditor = () => { const openBannerEditor = () => {
isDialogOpen.value = true; isDialogOpen.value = true;
}; };
const isCurrentCreator = computed(() => {
return authStore.userId === brandingStore.value.id;
});
const isCurrentCreator = computed(() => {
return authStore.userId === brandingStore.value.id;
});
</script> </script>
<style scoped> <style scoped>
.logo-image { .logo-image {
@apply border-4 border-solid border-hTertiary; @apply border-4 border-solid border-hTertiary;
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"logoAlt": "Creator logo", "logoAlt": "Creator logo",
"editLogo": "Edit logo" "editLogo": "Edit logo"
}, },
"fr": { "fr": {
"logoAlt": "Logo du créateur", "logoAlt": "Logo du créateur",
"editLogo": "Modifier le logo" "editLogo": "Modifier le logo"
}, }
"es": {
"logoAlt": "Logo del creador",
"editLogo": "Editar logo"
}
} }
</i18n> </i18n>

711
frontend/src/views/creators/CreatorLogoEditor.vue
View File

@@ -1,397 +1,398 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-title"> <div class="card-title">
{{ t('logoTitle') }} {{ t('logoTitle') }}
</div>
<div class="card-content">
<p class="card-text">
{{ t('logoDescription') }}
</p>
<div class="file-input-container">
<input
type="file"
ref="fileInput"
accept="image/*"
class="hidden"
@change="onFileSelected"
/>
<button
class="choose-file-button"
@click="triggerFileInput"
>
{{ t('chooseImage') }}
</button>
</div>
<div v-if="errorMessage" class="error-message">
{{ errorMessage }}
</div>
<div v-if="showCropper" class="cropper-wrapper">
<Cropper
ref="cropper"
:src="fileUrl"
:aspect-ratio="1"
:stencil-component="CircleStencil"
:stencil-props="{
aspectRatio: 1,
class: 'circle-stencil'
}"
/>
</div>
<div v-else class="image-preview-container"
@click="startEditing"
@dragover.prevent
@drop.prevent="handleDrop">
<div class="circular-preview">
<img
:src="fileUrl || fallbackUrl"
:alt="t('preview')"
class="preview-image"
/>
<div class="edit-overlay">
<span class="edit-text">{{ t('clickToEdit') }}</span>
</div>
</div> </div>
</div>
</div>
<div class="card-actions"> <div class="card-content">
<button class="secondary" <p class="card-text">
@click="cancel" {{ t('logoDescription') }}
:disabled="isUploading"> </p>
{{ t('cancel') }}
</button> <div class="file-input-container">
<button class="primary" <input
@click="showCropper ? applyCrop() : publish()" ref="fileInput"
:disabled="!selectedFile || isUploading"> accept="image/*"
<template v-if="isUploading"> class="hidden"
<span class="loading-spinner"></span> type="file"
{{ t('uploading') }} ({{ uploadProgress }}%) @change="onFileSelected"
</template> />
<template v-else> <button
{{ showCropper ? t('apply') : t('save') }} class="choose-file-button"
</template> @click="triggerFileInput"
</button> >
{{ t('chooseImage') }}
</button>
</div>
<div
v-if="errorMessage"
class="error-message"
>
{{ errorMessage }}
</div>
<div
v-if="showCropper"
class="cropper-wrapper"
>
<Cropper
ref="cropper"
:aspect-ratio="1"
:src="fileUrl"
:stencil-component="CircleStencil"
:stencil-props="{
aspectRatio: 1,
class: 'circle-stencil',
}"
/>
</div>
<div
v-else
class="image-preview-container"
@click="startEditing"
@dragover.prevent
@drop.prevent="handleDrop"
>
<div class="circular-preview">
<img
:alt="t('preview')"
:src="fileUrl || fallbackUrl"
class="preview-image"
/>
<div class="edit-overlay">
<span class="edit-text">{{ t('clickToEdit') }}</span>
</div>
</div>
</div>
</div>
<div class="card-actions">
<button
:disabled="isUploading"
class="secondary"
@click="cancel"
>
{{ t('cancel') }}
</button>
<button
:disabled="!selectedFile || isUploading"
class="primary"
@click="showCropper ? applyCrop() : publish()"
>
<template v-if="isUploading">
<span class="loading-spinner"></span>
{{ t('uploading') }} ({{ uploadProgress }}%)
</template>
<template v-else>
{{ showCropper ? t('apply') : t('save') }}
</template>
</button>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue' import { ref } from 'vue';
import {useClient} from '@/plugins/api.js' import { useClient } from '@/plugins/api.js';
import { Cropper, CircleStencil } from 'vue-advanced-cropper' import { CircleStencil, Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css' import 'vue-advanced-cropper/dist/style.css';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const props = defineProps({ const props = defineProps({
creator: { creator: {
required: true required: true,
} },
}) });
const emits = defineEmits(['closeRequested']) const emits = defineEmits(['closeRequested']);
const fileInput = ref(null) const fileInput = ref(null);
const selectedFile = ref(null) const selectedFile = ref(null);
const fileUrl = ref(props.creator.portraitUrl) const fileUrl = ref(props.creator.portraitUrl);
const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
const errorMessage = ref('') const errorMessage = ref('');
const showCropper = ref(false) const showCropper = ref(false);
const cropper = ref(null) const cropper = ref(null);
const isUploading = ref(false) const isUploading = ref(false);
const uploadProgress = ref(0) const uploadProgress = ref(0);
const TARGET_WIDTH = 200 const TARGET_WIDTH = 200;
const TARGET_HEIGHT = 200 const TARGET_HEIGHT = 200;
const { t } = useI18n(); const { t } = useI18n();
const triggerFileInput = () => { const triggerFileInput = () => {
if (fileInput.value) { if (fileInput.value) {
fileInput.value.value = '' // Reset the input value to ensure the change event fires fileInput.value.value = ''; // Reset the input value to ensure the change event fires
fileInput.value.click() fileInput.value.click();
}
}
const onFileSelected = (event) => {
const file = event.target.files[0]
if (file) {
selectedFile.value = file
const reader = new FileReader()
reader.onload = (e) => {
fileUrl.value = e.target.result
showCropper.value = true
}
reader.readAsDataURL(file)
} else {
selectedFile.value = null
fileUrl.value = null
showCropper.value = false
}
}
const startEditing = () => {
if (fileUrl.value && fileUrl.value.startsWith('data:')) {
// Only try to load the image if it's a data URL (newly selected image)
const blob = dataURLtoBlob(fileUrl.value)
selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' })
showCropper.value = true
} else {
// If no image is selected, using fallback, or have an existing uploaded image, trigger the file input
triggerFileInput()
}
}
// Helper function to convert data URL to blob
const dataURLtoBlob = (dataURL) => {
const arr = dataURL.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
const applyCrop = () => {
if (!cropper.value) return
const canvas = cropper.value.getResult().canvas
canvas.toBlob((blob) => {
const croppedFile = new File([blob], selectedFile.value.name, {
type: selectedFile.value.type
})
selectedFile.value = croppedFile
fileUrl.value = canvas.toDataURL()
showCropper.value = false
}, selectedFile.value.type)
}
const client = useClient()
const publish = async () => {
if (!selectedFile.value || isUploading.value) return
try {
isUploading.value = true
uploadProgress.value = 0
const formData = new FormData()
formData.append('file', selectedFile.value)
const response = await client.post(
`/api/creators/${props.creator.id}/logo`,
formData,
{
onUploadProgress: (progressEvent) => {
uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
}
} }
) };
props.creator.portraitUrl = `${response.data.blobUrl}?t=${Date.now()}` const onFileSelected = event => {
if (props.creator.portraitUrl) { const file = event.target.files[0];
fileUrl.value = props.creator.portraitUrl if (file) {
} selectedFile.value = file;
emits('closeRequested') const reader = new FileReader();
} catch (error) { reader.onload = e => {
console.error(error) fileUrl.value = e.target.result;
errorMessage.value = t('errors.imageUpload') showCropper.value = true;
} finally { };
isUploading.value = false reader.readAsDataURL(file);
uploadProgress.value = 0 } else {
} selectedFile.value = null;
} fileUrl.value = null;
showCropper.value = false;
}
};
const cancel = () => { const startEditing = () => {
showCropper.value = false if (fileUrl.value && fileUrl.value.startsWith('data:')) {
// Reset to original state if we were editing // Only try to load the image if it's a data URL (newly selected image)
if (props.creator.portraitUrl) { const blob = dataURLtoBlob(fileUrl.value);
fileUrl.value = props.creator.portraitUrl selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' });
selectedFile.value = null showCropper.value = true;
} else { } else {
fileUrl.value = fallbackUrl // If no image is selected, using fallback, or have an existing uploaded image, trigger the file input
selectedFile.value = null triggerFileInput();
} }
emits('closeRequested') };
}
// Add drop handler // Helper function to convert data URL to blob
const handleDrop = (event) => { const dataURLtoBlob = dataURL => {
const file = event.dataTransfer.files[0] const arr = dataURL.split(',');
if (file && file.type.startsWith('image/')) { const mime = arr[0].match(/:(.*?);/)[1];
selectedFile.value = file const bstr = atob(arr[1]);
const reader = new FileReader() let n = bstr.length;
reader.onload = (e) => { const u8arr = new Uint8Array(n);
fileUrl.value = e.target.result while (n--) {
showCropper.value = true u8arr[n] = bstr.charCodeAt(n);
} }
reader.readAsDataURL(file) return new Blob([u8arr], { type: mime });
} };
}
const applyCrop = () => {
if (!cropper.value) return;
const canvas = cropper.value.getResult().canvas;
canvas.toBlob(blob => {
const croppedFile = new File([blob], selectedFile.value.name, {
type: selectedFile.value.type,
});
selectedFile.value = croppedFile;
fileUrl.value = canvas.toDataURL();
showCropper.value = false;
}, selectedFile.value.type);
};
const client = useClient();
const publish = async () => {
if (!selectedFile.value || isUploading.value) return;
try {
isUploading.value = true;
uploadProgress.value = 0;
const formData = new FormData();
formData.append('file', selectedFile.value);
const response = await client.post(`/api/creators/${props.creator.id}/logo`, formData, {
onUploadProgress: progressEvent => {
uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total);
},
});
props.creator.portraitUrl = `${response.data.blobUrl}?t=${Date.now()}`;
if (props.creator.portraitUrl) {
fileUrl.value = props.creator.portraitUrl;
}
emits('closeRequested');
} catch (error) {
console.error(error);
errorMessage.value = t('errors.imageUpload');
} finally {
isUploading.value = false;
uploadProgress.value = 0;
}
};
const cancel = () => {
showCropper.value = false;
// Reset to original state if we were editing
if (props.creator.portraitUrl) {
fileUrl.value = props.creator.portraitUrl;
selectedFile.value = null;
} else {
fileUrl.value = fallbackUrl;
selectedFile.value = null;
}
emits('closeRequested');
};
// Add drop handler
const handleDrop = event => {
const file = event.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) {
selectedFile.value = file;
const reader = new FileReader();
reader.onload = e => {
fileUrl.value = e.target.result;
showCropper.value = true;
};
reader.readAsDataURL(file);
}
};
</script> </script>
<style scoped> <style scoped>
.card-text { .card-text {
@apply font-sans text-lg; @apply font-sans text-lg;
} }
.image-preview-container { .image-preview-container {
@apply mb-5; @apply mb-5;
@apply w-full; @apply w-full;
@apply flex; @apply flex;
@apply justify-center; @apply justify-center;
@apply items-center; @apply items-center;
@apply border-2; @apply border-2;
@apply border-dashed; @apply border-dashed;
@apply border-gray-300; @apply border-gray-300;
@apply hover:border-gray-500; @apply hover:border-gray-500;
@apply transition-colors; @apply transition-colors;
@apply duration-200; @apply duration-200;
@apply rounded-lg; @apply rounded-lg;
@apply p-4; @apply p-4;
} }
.circular-preview { .circular-preview {
@apply w-[200px]; @apply w-[200px];
@apply h-[200px]; @apply h-[200px];
@apply rounded-full; @apply rounded-full;
@apply overflow-hidden; @apply overflow-hidden;
@apply border-2; @apply border-2;
@apply border-gray-200; @apply border-gray-200;
@apply relative; @apply relative;
@apply cursor-pointer; @apply cursor-pointer;
} }
.preview-image { .preview-image {
@apply w-full; @apply w-full;
@apply h-full; @apply h-full;
@apply object-cover; @apply object-cover;
} }
.edit-overlay { .edit-overlay {
@apply absolute; @apply absolute;
@apply inset-0; @apply inset-0;
@apply flex; @apply flex;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply bg-black; @apply bg-black;
@apply bg-opacity-0; @apply bg-opacity-0;
@apply transition-opacity; @apply transition-opacity;
@apply duration-200; @apply duration-200;
} }
.circular-preview:hover .edit-overlay { .circular-preview:hover .edit-overlay {
@apply bg-opacity-30; @apply bg-opacity-30;
} }
.edit-text { .edit-text {
@apply text-white; @apply text-white;
@apply font-medium; @apply font-medium;
@apply opacity-0; @apply opacity-0;
@apply transition-opacity; @apply transition-opacity;
@apply duration-200; @apply duration-200;
} }
.circular-preview:hover .edit-text { .circular-preview:hover .edit-text {
@apply opacity-100; @apply opacity-100;
} }
.cropper-wrapper { .cropper-wrapper {
@apply mb-5; @apply mb-5;
@apply w-full; @apply w-full;
@apply h-[400px]; @apply h-[400px];
@apply flex; @apply flex;
@apply justify-center; @apply justify-center;
@apply items-center; @apply items-center;
@apply overflow-hidden; @apply overflow-hidden;
} }
.file-input-container { .file-input-container {
@apply flex; @apply flex;
@apply justify-center; @apply justify-center;
@apply items-center; @apply items-center;
@apply w-full; @apply w-full;
} }
.choose-file-button { .choose-file-button {
@apply px-4; @apply px-4;
@apply py-2; @apply py-2;
@apply primary; @apply primary;
@apply rounded-lg; @apply rounded-lg;
@apply cursor-pointer; @apply cursor-pointer;
} }
.error-message { .error-message {
@apply text-red-500; @apply text-red-500;
@apply mt-2; @apply mt-2;
@apply text-center; @apply text-center;
@apply font-medium; @apply font-medium;
} }
:deep(.circle-stencil) { :deep(.circle-stencil) {
@apply border-2; @apply border-2;
@apply border-white; @apply border-white;
@apply rounded-full; @apply rounded-full;
} }
:deep(.cropper) { :deep(.cropper) {
@apply max-h-full; @apply max-h-full;
} }
:deep(.cropper__stencil) { :deep(.cropper__stencil) {
@apply rounded-full; @apply rounded-full;
} }
.loading-spinner { .loading-spinner {
@apply inline-block; @apply inline-block;
@apply w-4; @apply w-4;
@apply h-4; @apply h-4;
@apply mr-2; @apply mr-2;
@apply border-2; @apply border-2;
@apply border-white; @apply border-white;
@apply border-t-transparent; @apply border-t-transparent;
@apply rounded-full; @apply rounded-full;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@keyframes spin { @keyframes spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"logoTitle": "Edit Logo", "logoTitle": "Edit Logo",
"logoDescription": "Choose a logo image for your creator page. The image will be cropped to a circle.", "logoDescription": "Choose a logo image for your creator page. The image will be cropped to a circle.",
"chooseImage": "Choose Image", "chooseImage": "Choose Image",
"clickToEdit": "Click to edit", "clickToEdit": "Click to edit",
"uploading": "Uploading" "uploading": "Uploading"
}, },
"fr": { "fr": {
"logoTitle": "Modifier le logo", "logoTitle": "Modifier le logo",
"logoDescription": "Choisissez une image de logo pour votre page de créateur. L'image sera recadrée en cercle.", "logoDescription": "Choisissez une image de logo pour votre page de créateur. L'image sera recadrée en cercle.",
"chooseImage": "Choisir une image", "chooseImage": "Choisir une image",
"clickToEdit": "Cliquez pour modifier", "clickToEdit": "Cliquez pour modifier",
"uploading": "Téléchargement" "uploading": "Téléchargement"
}, }
"es": {
"logoTitle": "Editar logo",
"logoDescription": "Elige una imagen de logo para tu página de creador. La imagen se recortará en círculo.",
"chooseImage": "Elegir imagen",
"clickToEdit": "Haz clic para editar",
"uploading": "Subiendo"
}
} }
</i18n> </i18n>

117
frontend/src/views/creators/DonationButton.vue
View File

@@ -1,83 +1,74 @@
<template> <template>
<button
class="secondary donation-action"
@click="openDonationDialog()"
>
{{ t('creator.donation.isupport') }}
</button>
<button <DonationDialog
class="secondary donation-action" ref="donationDialogRef"
@click="openDonationDialog()" :creator-id="creatorId"
> :creator-name="creatorName"
{{ t('creator.donation.isupport') }} :icon-color-class="iconColorClass"
</button> :on-cancelled-url="onCancelledUrl"
:on-success-url="onSuccessUrl"
<DonationDialog @close="handleDialogClose"
ref="donationDialogRef" />
:creator-id="creatorId"
:creator-name="creatorName"
:on-success-url="onSuccessUrl"
:on-cancelled-url="onCancelledUrl"
:icon-color-class="iconColorClass"
@close="handleDialogClose"
/>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue'; import { ref } from 'vue';
import {useI18n} from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import DonationDialog from './DonationDialog.vue'; import DonationDialog from './DonationDialog.vue';
const {t} = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
creatorId: {default: 'missing-creator-id', required: true}, creatorId: { default: 'missing-creator-id', required: true },
creatorName: {default: 'missing-creator-name', required: true}, creatorName: { default: 'missing-creator-name', required: true },
onSuccessUrl: {default: 'missing-on-success-u', required: true}, onSuccessUrl: { default: 'missing-on-success-u', required: true },
onCancelledUrl: {default: 'missing-on-cancelled-url', required: true}, onCancelledUrl: { default: 'missing-on-cancelled-url', required: true },
iconColorClass: {default: 'text-black'}, iconColorClass: { default: 'text-black' },
}); });
const donationDialogRef = ref(null); const donationDialogRef = ref(null);
function openDonationDialog() { function openDonationDialog() {
donationDialogRef.value.openDonationDialog(); donationDialogRef.value.openDonationDialog();
} }
function handleDialogClose() { function handleDialogClose() {
// Handle any cleanup or additional logic when dialog closes // Handle any cleanup or additional logic when dialog closes
} }
</script> </script>
<style scoped> <style scoped>
.donation-action { .donation-action {
@apply bg-hutopyPrimary text-hOnPrimary; @apply bg-hutopyPrimary text-hOnPrimary;
@apply hover:bg-hutopySecondary; @apply hover:bg-hutopySecondary;
@apply w-fit place-self-center; @apply w-fit place-self-center;
@apply h-12; @apply h-12;
@apply rounded-2xl w-full; @apply rounded-2xl w-full;
@apply font-sans font-semibold text-lg; @apply font-sans font-semibold text-lg;
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"creator": { "creator": {
"donation": { "donation": {
"isupport": "I Support" "isupport": "I Support"
} }
}
},
"fr": {
"creator": {
"donation": {
"isupport": "Je Soutiens"
}
}
} }
},
"fr": {
"creator": {
"donation": {
"isupport": "Je Soutiens"
}
}
},
"es": {
"creator": {
"donation": {
"isupport": "Apoyo"
}
}
}
} }
</i18n> </i18n>

20
frontend/src/views/creators/DonationForm.vue
View File

@@ -183,24 +183,6 @@
} }
} }
} }
},
"es": {
"common": {
"cancel": "Cancelar"
},
"creator": {
"donation": {
"isupport": "Apoyo",
"amount": "Cantidad ($)",
"message": "Mensaje (opcional)",
"send": "Enviar",
"processing": "Procesando...",
"errors": {
"payment": "Ocurrió un error durante el procesamiento del pago",
"invalidAmount": "Por favor ingrese un monto válido"
}
}
}
} }
} }
</i18n> </i18n>

359
frontend/src/views/creators/NameEditor.vue
View File

@@ -1,220 +1,223 @@
<script setup> <script setup>
import { ref, onMounted, onUnmounted, computed } from "vue"; import { computed, onMounted, onUnmounted, ref } from 'vue';
import { v7 } from "uuid"; import { v7 } from 'uuid';
import { useClient } from "@/plugins/api.js"; import { useClient } from '@/plugins/api.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import config from '@/config'; import config from '@/config';
import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js'; import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
const props = defineProps({ const props = defineProps({
name: { name: {
required: true required: true,
}, },
creatorNameReservationId: { creatorNameReservationId: {
required: true required: true,
}, },
originalSlug: { originalSlug: {
type: String, type: String,
default: null default: null,
} },
}); });
const emits = defineEmits([ const emits = defineEmits(['update:name', 'update:creatorNameReservationId']);
'update:name',
'update:creatorNameReservationId'
]);
const name = ref(props.name); const name = ref(props.name);
const { t } = useI18n(); const { t } = useI18n();
const isOperationPending = ref(false); const isOperationPending = ref(false);
const reservationState = ref(null); const reservationState = ref(null);
const validationError = ref(''); const validationError = ref('');
// Use the reservationId from props if provided, otherwise generate a new one // Use the reservationId from props if provided, otherwise generate a new one
const reservationId = ref(props.creatorNameReservationId || v7()); const reservationId = ref(props.creatorNameReservationId || v7());
// Check if the current name is the same as the original slug // Check if the current name is the same as the original slug
const isCurrentSlug = computed(() => { const isCurrentSlug = computed(() => {
return props.originalSlug && name.value === props.originalSlug; return props.originalSlug && name.value === props.originalSlug;
}); });
// Base URL for display // Base URL for display
const baseUrl = computed(() => `${config.baseUrl}/@`); const baseUrl = computed(() => `${config.baseUrl}/@`);
// Validation function for the slug // Validation function for the slug
const validateSlug = (slug) => { const validateSlug = slug => {
if (!slug) { if (!slug) {
validationError.value = t('creator.name.errors.required'); validationError.value = t('creator.name.errors.required');
return false; return false;
} }
// Only allow letters, numbers, and hyphens // Only allow letters, numbers, and hyphens
const validSlugRegex = /^[a-zA-Z0-9-]+$/; const validSlugRegex = /^[a-zA-Z0-9-]+$/;
if (!validSlugRegex.test(slug)) { if (!validSlugRegex.test(slug)) {
validationError.value = t('creator.name.errors.invalid'); validationError.value = t('creator.name.errors.invalid');
return false; return false;
} }
validationError.value = ''; validationError.value = '';
return true; return true;
}; };
// Ensure we emit the reservationId on mount if we generated a new one // Ensure we emit the reservationId on mount if we generated a new one
onMounted(() => { onMounted(() => {
if (!props.creatorNameReservationId) { if (!props.creatorNameReservationId) {
emits('update:creatorNameReservationId', reservationId.value); emits('update:creatorNameReservationId', reservationId.value);
} }
// If the name is the same as the original slug, set the reservation state to "reserved" // If the name is the same as the original slug, set the reservation state to "reserved"
if (isCurrentSlug.value) { if (isCurrentSlug.value) {
reservationState.value = "reserved"; reservationState.value = 'reserved';
} }
}); });
// Request handling // Request handling
let currentController = null; let currentController = null;
let timeout = null; let timeout = null;
let lastProcessedName = ''; let lastProcessedName = '';
const cancelCurrentRequest = () => { const cancelCurrentRequest = () => {
if (currentController) { if (currentController) {
currentController.abort(); currentController.abort();
currentController = null; currentController = null;
} }
}; };
const handleInput = () => { const handleInput = () => {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(() => { timeout = setTimeout(() => {
const currentName = name.value; const currentName = name.value;
if (currentName === lastProcessedName) { if (currentName === lastProcessedName) {
return; // Skip if we've already processed this exact name return; // Skip if we've already processed this exact name
} }
// Validate the slug // Validate the slug
if (!validateSlug(currentName)) { if (!validateSlug(currentName)) {
reservationState.value = "unavailable"; reservationState.value = 'unavailable';
return; return;
} }
// If the name is the same as the original slug, set reservation state to "reserved" // If the name is the same as the original slug, set reservation state to "reserved"
if (props.originalSlug && currentName === props.originalSlug) { if (props.originalSlug && currentName === props.originalSlug) {
reservationState.value = "reserved"; reservationState.value = 'reserved';
lastProcessedName = currentName; lastProcessedName = currentName;
emits('update:name', currentName); emits('update:name', currentName);
return; return;
} }
checkNameAvailability(currentName); checkNameAvailability(currentName);
}, 200); }, 200);
}; };
const client = useClient(); const client = useClient();
const checkNameAvailability = async (nameToCheck) => { const checkNameAvailability = async nameToCheck => {
if (!nameToCheck || nameToCheck.trim() === "") { if (!nameToCheck || nameToCheck.trim() === '') {
reservationState.value = null; reservationState.value = null;
lastProcessedName = nameToCheck; lastProcessedName = nameToCheck;
return; return;
} }
// Cancel any ongoing request // Cancel any ongoing request
cancelCurrentRequest(); cancelCurrentRequest();
try { try {
isOperationPending.value = true; isOperationPending.value = true;
reservationState.value = "loading"; reservationState.value = 'loading';
// Create a new request with cancellation token // Create a new request with cancellation token
const controller = new AbortController(); const controller = new AbortController();
currentController = controller; currentController = controller;
await client.post( await client.post(
`/api/creators/@${encodeURIComponent(nameToCheck)}/reserve`, `/api/creators/@${encodeURIComponent(nameToCheck)}/reserve`,
{ reservationId: reservationId.value }, { reservationId: reservationId.value },
{ signal: controller.signal } { signal: controller.signal }
); );
// Only process the response if this is still the current request // Only process the response if this is still the current request
if (currentController === controller) { if (currentController === controller) {
reservationState.value = "reserved"; reservationState.value = 'reserved';
lastProcessedName = nameToCheck; lastProcessedName = nameToCheck;
emits('update:name', nameToCheck); emits('update:name', nameToCheck);
} }
} catch (error) { } catch (error) {
// Only process the error if this is still the current request and it's not an abort error // Only process the error if this is still the current request and it's not an abort error
if (currentController && error.name !== 'AbortError') { if (currentController && error.name !== 'AbortError') {
reservationState.value = "unavailable"; reservationState.value = 'unavailable';
lastProcessedName = nameToCheck; lastProcessedName = nameToCheck;
} }
} finally { } finally {
if (currentController) { if (currentController) {
isOperationPending.value = false; isOperationPending.value = false;
} }
} }
}; };
// Cleanup on component unmount
onUnmounted(() => {
cancelCurrentRequest();
clearTimeout(timeout);
});
// Cleanup on component unmount
onUnmounted(() => {
cancelCurrentRequest();
clearTimeout(timeout);
});
</script> </script>
<template> <template>
<v-text-field variant="outlined" :label="t('creator.name.label')" v-model="name" @input="handleInput" <v-text-field
:error-messages="validationError"> v-model="name"
<template #prepend-inner> :error-messages="validationError"
<span class="text-nowrap font-sans text-gray-400">{{ baseUrl }}</span> :label="t('creator.name.label')"
</template> variant="outlined"
@input="handleInput"
>
<template #prepend-inner>
<span class="text-nowrap font-sans text-gray-400">{{ baseUrl }}</span>
</template>
<template #append-inner> <template #append-inner>
<v-progress-circular v-if="reservationState === 'loading'" indeterminate size="24" width="3" <v-progress-circular
color="grey"></v-progress-circular> v-if="reservationState === 'loading'"
color="grey"
indeterminate
size="24"
width="3"
></v-progress-circular>
<v-icon v-else-if="reservationState === 'reserved'" color="green" :icon="mdiCheckCircle" /> <v-icon
<v-icon v-else-if="reservationState === 'unavailable'" color="red" :icon="mdiCloseCircle" /> v-else-if="reservationState === 'reserved'"
</template> :icon="mdiCheckCircle"
</v-text-field> color="green"
/>
<v-icon
v-else-if="reservationState === 'unavailable'"
:icon="mdiCloseCircle"
color="red"
/>
</template>
</v-text-field>
</template> </template>
<style scoped></style> <style scoped></style>
<i18n> <i18n>
{ {
"en": { "en": {
"creator": { "creator": {
"name": { "name": {
"label": "Your creator handle", "label": "Your creator handle",
"errors": { "errors": {
"required": "Creator handle is required", "required": "Creator handle is required",
"invalid": "Only letters, numbers, and hyphens are allowed" "invalid": "Only letters, numbers, and hyphens are allowed"
}
}
} }
} },
} "fr": {
}, "creator": {
"fr": { "name": {
"creator": { "label": "Votre identifiant de créateur",
"name": { "errors": {
"label": "Votre identifiant de créateur", "required": "L'identifiant est requis",
"errors": { "invalid": "Seules les lettres, chiffres et tirets sont autorisés"
"required": "L'identifiant est requis", }
"invalid": "Seules les lettres, chiffres et tirets sont autorisés" }
} }
}
} }
},
"es": {
"creator": {
"name": {
"label": "Tu identificador de creador",
"errors": {
"required": "El identificador es obligatorio",
"invalid": "Solo se permiten letras, números y guiones"
}
}
}
}
} }
</i18n> </i18n>

37
frontend/src/views/creators/NameTitle.vue
View File

@@ -4,37 +4,36 @@
<span class="capitalize text-3xl"> <span class="capitalize text-3xl">
{{ brandingStore.value.name }} {{ brandingStore.value.name }}
</span> </span>
<div v-show="brandingStore.value.verified" <div
class="text-blue mt-1" v-show="brandingStore.value.verified"
:title="t('verified')"> :title="t('verified')"
class="text-blue mt-1"
>
<icon-account-verified></icon-account-verified> <icon-account-verified></icon-account-verified>
</div> </div>
</div> </div>
<span class="capitalize text-lg"> <span class="capitalize text-lg">
{{ brandingStore.value.title }} {{ brandingStore.value.title }}
</span> </span>
</div> </div>
</template> </template>
<script setup> <script setup>
import IconAccountVerified from "@/components/icons/IconAccountVerified.vue"; import IconAccountVerified from '@/components/icons/IconAccountVerified.vue';
import {useBrandingStore} from "@/stores/brandingStore.js"; import { useBrandingStore } from '@/stores/brandingStore.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const brandingStore = useBrandingStore(); const brandingStore = useBrandingStore();
const { t } = useI18n(); const { t } = useI18n();
</script> </script>
<i18n> <i18n>
{ {
"en": { "en": {
"verified": "Verified Account" "verified": "Verified Account"
}, },
"fr": { "fr": {
"verified": "Compte vérifié" "verified": "Compte vérifié"
}, }
"es": {
"verified": "Cuenta verificada"
}
} }
</i18n> </i18n>

7
frontend/src/views/creators/PaymentCompleted.vue
View File

@@ -75,13 +75,6 @@
"usernameDefault": "Le créateur", "usernameDefault": "Le créateur",
"receipt": "Un reçu a été envoyé à votre email.", "receipt": "Un reçu a été envoyé à votre email.",
"returnToCreator": "Retourner à la page du créateur" "returnToCreator": "Retourner à la page du créateur"
},
"es": {
"title": "¡{creatorName} te agradece!",
"message": "Su pago ha sido procesado con éxito.",
"usernameDefault": "El creador",
"receipt": "Se ha enviado un recibo a su correo electrónico.",
"returnToCreator": "Volver a la página del creador"
} }
} }
</i18n> </i18n>

6
frontend/src/views/creators/PaymentFailed.vue
View File

@@ -46,12 +46,6 @@
"message": "Nous n'avons pas pu traiter votre paiement.", "message": "Nous n'avons pas pu traiter votre paiement.",
"retry": "Réessayer", "retry": "Réessayer",
"returnToCreator": "Retourner à la page du créateur" "returnToCreator": "Retourner à la page du créateur"
},
"es": {
"title": "Pago fallido",
"message": "No pudimos procesar su pago.",
"retry": "Intentar de nuevo",
"returnToCreator": "Volver a la página del creador"
} }
} }
</i18n> </i18n>

233
frontend/src/views/main/Footer.vue
View File

@@ -1,134 +1,139 @@
<script setup> <script setup>
import Instagram from "@/views/svg/Instagram.vue"; import Instagram from '@/views/svg/Instagram.vue';
import Facebook from "@/views/svg/Facebook.vue"; import Facebook from '@/views/svg/Facebook.vue';
import X from "@/views/svg/X.vue"; import X from '@/views/svg/X.vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
</script> </script>
<template> <template>
<footer class="flex flex-col gap-10 pt-7 pb-10">
<div class="footer-socials">
<a
href="https://www.facebook.com/profile.php?id=61556819217561"
target="_blank"
>
<facebook class="social-icon"></facebook>
</a>
<a
href="https://www.instagram.com/hutopy.inc/"
target="_blank"
>
<instagram class="social-icon"></instagram>
</a>
<a
href="https://x.com/Hutopyinc/"
target="_blank"
>
<x class="social-icon"></x>
</a>
</div>
<footer class="flex flex-col gap-10 pt-7 pb-10"> <div class="footer-links">
<router-link
<div class="footer-socials"> class="link"
<a href="https://www.facebook.com/profile.php?id=61556819217561" target="_blank"> to="/documents/helpandcontact"
<facebook class="social-icon"></facebook> >
</a> {{ t('footer.helpandcontact') }}
<a href="https://www.instagram.com/hutopy.inc/" target="_blank"> </router-link>
<instagram class="social-icon"></instagram> <router-link
</a> class="link"
<a href="https://x.com/Hutopyinc/" target="_blank"> to="/documents/faq"
<x class="social-icon"></x> >
</a> {{ t('footer.faq') }}
</div> </router-link>
<router-link
<div class="footer-links"> class="link"
<router-link to="/documents/helpandcontact" to="/documents/guideforcreators"
class="link"> >
{{ t('footer.helpandcontact') }} {{ t('footer.creatorguide') }}
</router-link> </router-link>
<router-link to="/documents/faq" <router-link
class="link"> class="link"
{{ t('footer.faq') }} to="/documents/termsandconditions"
</router-link> >
<router-link to="/documents/guideforcreators" {{ t('footer.termsandconditions') }}
class="link"> </router-link>
{{ t('footer.creatorguide') }} <router-link
</router-link> class="link"
<router-link to="/documents/termsandconditions" to="/documents/contentpolicy"
class="link"> >
{{ t('footer.termsandconditions') }} {{ t('footer.contentpolicy') }}
</router-link> </router-link>
<router-link to="/documents/contentpolicy" <router-link
class="link"> class="link"
{{ t('footer.contentpolicy') }} to="/documents/about"
</router-link> >
<router-link to="/documents/about" {{ t('footer.about') }}
class="link"> </router-link>
{{ t('footer.about') }} <router-link
</router-link> class="link"
<router-link to="/documents/pricing" to="/documents/pricing"
class="link"> >
{{ t('footer.pricing') }} {{ t('footer.pricing') }}
</router-link> </router-link>
</div> </div>
<div class="footer-copyright">
Hutopy &copy;{{ new Date().getFullYear() }} - {{ t('footer.allRightsReserved') }}
</div>
</footer>
<div class="footer-copyright">
Hutopy &copy;{{ new Date().getFullYear() }} - {{ t('footer.allRightsReserved') }}
</div>
</footer>
</template> </template>
<style scoped> <style scoped>
.footer-socials {
@apply flex flex-row justify-center;
@apply gap-10;
}
.footer-socials { .footer-links {
@apply flex flex-row justify-center; @apply flex flex-row flex-wrap justify-center;
@apply gap-10; @apply gap-4 px-4;
} }
.footer-links { .footer-copyright {
@apply flex flex-row flex-wrap justify-center; @apply flex justify-center;
@apply gap-4 px-4; @apply text-hOnBackground tracking-widest font-sans text-sm;
} }
.footer-copyright { .social-icon {
@apply flex justify-center; @apply fill-current w-6 h-6;
@apply text-hOnBackground tracking-widest font-sans text-sm; @apply text-hOnBackground;
} }
.social-icon {
@apply fill-current w-6 h-6;
@apply text-hOnBackground;
}
.link {
@apply text-hOnBackground;
@apply tracking-widest font-sans text-sm;
@apply hover:text-gray-400;
}
.link {
@apply text-hOnBackground;
@apply tracking-widest font-sans text-sm;
@apply hover:text-gray-400;
}
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"footer": { "footer": {
"helpandcontact": "Help & Contact", "helpandcontact": "Help & Contact",
"faq": "FAQ", "faq": "FAQ",
"creatorguide": "Creator Guide", "creatorguide": "Creator Guide",
"termsandconditions": "Terms & Conditions", "termsandconditions": "Terms & Conditions",
"contentpolicy": "Content Policy", "contentpolicy": "Content Policy",
"about": "About", "about": "About",
"pricing": "Pricing", "pricing": "Pricing",
"allRightsReserved": "All Rights Reserved" "allRightsReserved": "All Rights Reserved"
}
},
"fr": {
"footer": {
"helpandcontact": "Aide & Contact",
"faq": "FAQ",
"creatorguide": "Guide du Créateur",
"termsandconditions": "Conditions Générales",
"contentpolicy": "Politique de Contenu",
"about": "À Propos",
"pricing": "Tarifs",
"allRightsReserved": "Tous Droits Réservés"
}
} }
},
"fr": {
"footer": {
"helpandcontact": "Aide & Contact",
"faq": "FAQ",
"creatorguide": "Guide du Créateur",
"termsandconditions": "Conditions Générales",
"contentpolicy": "Politique de Contenu",
"about": "À Propos",
"pricing": "Tarifs",
"allRightsReserved": "Tous Droits Réservés"
}
},
"es": {
"footer": {
"helpandcontact": "Ayuda y Contacto",
"faq": "Preguntas Frecuentes",
"creatorguide": "Guía del Creador",
"termsandconditions": "Términos y Condiciones",
"contentpolicy": "Política de Contenido",
"about": "Acerca de",
"pricing": "Precios",
"allRightsReserved": "Todos los Derechos Reservados"
}
}
} }
</i18n> </i18n>

536
frontend/src/views/main/Landing.vue
View File

@@ -1,297 +1,309 @@
<script setup> <script setup>
import Footer from "@/views/main/Footer.vue"; import Footer from '@/views/main/Footer.vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
</script> </script>
<template> <template>
<div>
<div> <div>
<div class="pa-4 flex flex-col justify-center md:flex-row"> <div>
<div class="py-6"> <div class="pa-4 flex flex-col justify-center md:flex-row">
<div> <div class="py-6">
<img alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto" <div>
src="/images/hutopymedia/banners/hutopy.png"> <img
</div> alt="Hutopy Logo"
</div> class="md:h-44 logo-image sm:h-28 sm:mx-auto"
<div class="flex flex-col space-y-3 header-btn"> src="/images/hutopymedia/banners/hutopy.png"
<v-btn />
class="text-white w-full sm:w-auto inscription-btn-header" </div>
to="/login"> </div>
{{ t('inscription') }} <div class="flex flex-col space-y-3 header-btn">
</v-btn> <v-btn
<v-btn class="text-white w-full sm:w-auto inscription-btn-header"
class="w-full sm:w-auto inscription-btn-header-outlined" to="/login"
to="/create-creator" >
variant="outlined"> {{ t('inscription') }}
{{ t('createPage') }} </v-btn>
</v-btn> <v-btn
</div> class="w-full sm:w-auto inscription-btn-header-outlined"
to="/create-creator"
</div> variant="outlined"
</div> >
{{ t('createPage') }}
<div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6"> </v-btn>
<div class="support-text text-justify md:text-left"> </div>
<span class="text-white"> {{ t('support') }} </span><br>
<span class="text-white"> {{ t('creators') }} </span><br>
<span class="text-white"> {{ t('projects') }} </span><br>
<span class="text-white"> {{ t('love') }} </span>
</div>
<img alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain"
src="/images/hutopymedia/banners/heart.png">
</div>
<div class="relative mt-10">
<div class="flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
<div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">{{ t('supportText') }}</div>
<img
alt="YourHutopy"
class="max-h-56 mx-auto"
src="/images/hutopymedia/homepage/hands.png"
>
<div class="text-md text-justify px-6 ">
{{ t('supportDescription') }}
</div>
<!-- <v-btn>Soutenir</v-btn> -->
</div>
<div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">{{ t('create') }}</div>
<img
alt="YourHutopy"
class="max-h-56 mx-auto"
src="/images/hutopymedia/homepage/brain.png"
>
<div class="text-md text-justify px-6">
{{ t('creatorDescription') }}
</div>
<v-btn
class="inscription-btn"
to="/login"
>
{{ t('signup') }}
</v-btn>
</div>
</div>
</div>
<div class="max-w-5xl mx-auto px-6 py-8">
<div class="gap-8 items-start flex flex-col md:flex-row">
<!-- Section de texte -->
<div class="space-y-6">
<img alt="YourHutopy" class="w-full mb-6" src="/images/hutopymedia/homepage/votrehutopy.png">
<div class="space-y-4">
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">{{ t('whatIsHutopy') }}</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
{{ t('hutopyDescription') }}
</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
{{ t('hutopyValues') }}
</p>
<div class="flex justify-center">
<v-btn
class="text-white mt-12 flex items-center justify-center round create-btn"
to="/create-creator"
>
{{ t('createPage') }}
</v-btn>
</div> </div>
</div>
</div> </div>
<!-- Section droite : 4 images --> <div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6">
<div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15"> <div class="support-text text-justify md:text-left">
<div><img alt="Grinding" class="w-full h-auto object-cover rounded-2xl" <span class="text-white">{{ t('support') }}</span>
src="/images/hutopymedia/homepage/grinding.png"></div> <br />
<div><img alt="Microphone" class="w-full h-auto object-cover rounded-2xl" <span class="text-white">{{ t('creators') }}</span>
src="/images/hutopymedia/homepage/sign.png"></div> <br />
<div><img alt="Girl VR" class="w-full h-auto object-cover rounded-2xl" <span class="text-white">{{ t('projects') }}</span>
src="/images/hutopymedia/homepage/girlvr.png"></div> <br />
<div><img alt="Girl Army" class="w-full h-auto object-cover rounded-2xl" <span class="text-white">{{ t('love') }}</span>
src="/images/hutopymedia/homepage/girlarmy.png"></div> </div>
<img
alt="YourHutopy"
class="w-48 h-48 md:w-48 md:h-48 object-contain"
src="/images/hutopymedia/banners/heart.png"
/>
</div> </div>
</div>
<div class="relative mt-10">
<div
class="flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1"
>
<div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">{{ t('supportText') }}</div>
<img
alt="YourHutopy"
class="max-h-56 mx-auto"
src="/images/hutopymedia/homepage/hands.png"
/>
<div class="text-md text-justify px-6">
{{ t('supportDescription') }}
</div>
<!-- <v-btn>Soutenir</v-btn> -->
</div>
<div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">{{ t('create') }}</div>
<img
alt="YourHutopy"
class="max-h-56 mx-auto"
src="/images/hutopymedia/homepage/brain.png"
/>
<div class="text-md text-justify px-6">
{{ t('creatorDescription') }}
</div>
<v-btn
class="inscription-btn"
to="/login"
>
{{ t('signup') }}
</v-btn>
</div>
</div>
</div>
<div class="max-w-5xl mx-auto px-6 py-8">
<div class="gap-8 items-start flex flex-col md:flex-row">
<!-- Section de texte -->
<div class="space-y-6">
<img
alt="YourHutopy"
class="w-full mb-6"
src="/images/hutopymedia/homepage/votrehutopy.png"
/>
<div class="space-y-4">
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
{{ t('whatIsHutopy') }}
</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
{{ t('hutopyDescription') }}
</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
{{ t('hutopyValues') }}
</p>
<div class="flex justify-center">
<v-btn
class="text-white mt-12 flex items-center justify-center round create-btn"
to="/create-creator"
>
{{ t('createPage') }}
</v-btn>
</div>
</div>
</div>
<!-- Section droite : 4 images -->
<div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15">
<div>
<img
alt="Grinding"
class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/grinding.png"
/>
</div>
<div>
<img
alt="Microphone"
class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/sign.png"
/>
</div>
<div>
<img
alt="Girl VR"
class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/girlvr.png"
/>
</div>
<div>
<img
alt="Girl Army"
class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/girlarmy.png"
/>
</div>
</div>
</div>
</div>
<Footer class="mt-10"></Footer>
</div> </div>
<Footer class="mt-10"></Footer>
</div>
</template> </template>
<style scoped> <style scoped>
.box-text { .box-text {
color: #6A0164; color: #6a0164;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
} }
.inscription-btn-header { .inscription-btn-header {
color: white; color: white;
background-color: #6A0164; background-color: #6a0164;
font-size: 18px; font-size: 18px;
height: 40px; height: 40px;
width: auto; width: auto;
padding: 0 32px; padding: 0 32px;
font-weight: bold; font-weight: bold;
}
} .inscription-btn-header-outlined {
color: #6a0164;
font-size: 18px;
height: 40px;
width: auto;
padding: 0 32px;
font-weight: bold;
}
.inscription-btn-header-outlined { .inscription-btn {
color: #6A0164; color: white;
font-size: 18px; background-color: #6a0164;
height: 40px; font-size: 18px;
width: auto; height: 40px;
padding: 0 32px; width: auto;
font-weight: bold; padding: 0 32px;
font-weight: bold;
border-radius: 10px;
}
} .create-btn {
background-color: #6a0164;
font-size: 18px;
height: 48px;
width: auto;
padding: 0 32px;
font-weight: bold;
border-radius: 10px;
}
.inscription-btn { .overlay p {
color: white; color: white;
background-color: #6A0164; font-size: 1.5rem;
font-size: 18px; text-align: center;
height: 40px; }
width: auto;
padding: 0 32px;
font-weight: bold;
border-radius: 10px;
}
.create-btn { body {
background-color: #6A0164; background-color: #f4f4f4;
font-size: 18px; }
height: 48px;
width: auto;
padding: 0 32px;
font-weight: bold;
border-radius: 10px
}
.overlay p { .support-container {
color: white; display: flex;
font-size: 1.5rem; justify-content: center; /* Centre le bloc horizontalement */
text-align: center; align-items: center; /* Centre le bloc verticalement (optionnel) */
} }
body { .support-text {
background-color: #F4F4F4; font-size: 2.2rem; /* Ajustez la taille du texte */
} line-height: 1.1; /* Ajustez l'espacement entre les lignes */
text-align: left; /* Alignement du texte à gauche */
font-weight: bold; /* Rend le texte gras */
}
.support-container { .support-text .highlight {
display: flex; color: #6a0164; /* Remplacez par la couleur souhaitée */
justify-content: center; /* Centre le bloc horizontalement */ font-weight: bold; /* Mettre en gras */
align-items: center; /* Centre le bloc verticalement (optionnel) */ }
} .highlight2 {
color: #b81286; /* Remplacez par la couleur souhaitée */
}
.support-text { .logo-image {
font-size: 2.2rem; /* Ajustez la taille du texte */ margin-left: auto;
line-height: 1.1; /* Ajustez l'espacement entre les lignes */ }
text-align: left; /* Alignement du texte à gauche */
font-weight: bold; /* Rend le texte gras */
}
.support-text .highlight { @media (min-width: 640px) {
color: #6A0164; /* Remplacez par la couleur souhaitée */ .header-btn {
font-weight: bold; /* Mettre en gras */ margin-top: 25px;
} margin-bottom: 25px;
}
.highlight2 { .support-text {
color: #B81286; /* Remplacez par la couleur souhaitée */ font-size: 3rem; /* Ajustez la taille du texte */
line-height: 1.1; /* Ajustez l'espacement entre les lignes */
text-align: left; /* Alignement du texte à gauche */
font-weight: bold; /* Rend le texte gras */
}
}
} @media (min-width: 768px) {
.header-btn {
margin-top: 60px;
}
.logo-image { .logo-image {
margin-left: auto; margin-right: 20px;
} margin-left: 0;
}
@media (min-width: 640px) { }
.header-btn {
margin-top: 25px;
margin-bottom: 25px;
}
.support-text {
font-size: 3.0rem; /* Ajustez la taille du texte */
line-height: 1.1; /* Ajustez l'espacement entre les lignes */
text-align: left; /* Alignement du texte à gauche */
font-weight: bold; /* Rend le texte gras */
}
}
@media (min-width: 768px) {
.header-btn {
margin-top: 60px;
}
.logo-image {
margin-right: 20px;
margin-left: 0;
}
}
.homepagetext {
color: white;
font-family: "Roboto", sans-serif;
}
.homepagetext {
color: white;
font-family: 'Roboto', sans-serif;
}
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"inscription": "Sign Up", "inscription": "Sign Up",
"createPage": "Create Page", "createPage": "Create Page",
"support": "Support", "support": "Support",
"creators": "Creators", "creators": "Creators",
"projects": "Projects", "projects": "Projects",
"love": "Love", "love": "Love",
"supportText": "Support", "supportText": "Support",
"supportDescription": "Support your favorite creators and help them grow. Your contributions make a real difference in their creative journey.", "supportDescription": "Support your favorite creators and help them grow. Your contributions make a real difference in their creative journey.",
"create": "Create", "create": "Create",
"creatorDescription": "Create your own page and start your creative journey. Share your passion with the world and build your community.", "creatorDescription": "Create your own page and start your creative journey. Share your passion with the world and build your community.",
"signup": "Sign Up", "signup": "Sign Up",
"whatIsHutopy": "What is Hutopy?", "whatIsHutopy": "What is Hutopy?",
"hutopyDescription": "Hutopy is a platform that connects creators with their audience. We provide tools and features to help creators monetize their content and build their community.", "hutopyDescription": "Hutopy is a platform that connects creators with their audience. We provide tools and features to help creators monetize their content and build their community.",
"hutopyValues": "Our values are centered around creativity, community, and support. We believe in empowering creators to pursue their passions and build sustainable careers." "hutopyValues": "Our values are centered around creativity, community, and support. We believe in empowering creators to pursue their passions and build sustainable careers."
}, },
"fr": { "fr": {
"inscription": "S'inscrire", "inscription": "S'inscrire",
"createPage": "Créer une Page", "createPage": "Créer une Page",
"support": "Soutenir", "support": "Soutenir",
"creators": "Créateurs", "creators": "Créateurs",
"projects": "Projets", "projects": "Projets",
"love": "Passion", "love": "Passion",
"supportText": "Soutenir", "supportText": "Soutenir",
"supportDescription": "Soutenez vos créateurs préférés et aidez-les à grandir. Vos contributions font une réelle différence dans leur parcours créatif.", "supportDescription": "Soutenez vos créateurs préférés et aidez-les à grandir. Vos contributions font une réelle différence dans leur parcours créatif.",
"create": "Créer", "create": "Créer",
"creatorDescription": "Créez votre propre page et commencez votre parcours créatif. Partagez votre passion avec le monde et construisez votre communauté.", "creatorDescription": "Créez votre propre page et commencez votre parcours créatif. Partagez votre passion avec le monde et construisez votre communauté.",
"signup": "S'inscrire", "signup": "S'inscrire",
"whatIsHutopy": "Qu'est-ce que Hutopy ?", "whatIsHutopy": "Qu'est-ce que Hutopy ?",
"hutopyDescription": "Hutopy est une plateforme qui connecte les créateurs avec leur audience. Nous fournissons des outils et des fonctionnalités pour aider les créateurs à monétiser leur contenu et à construire leur communauté.", "hutopyDescription": "Hutopy est une plateforme qui connecte les créateurs avec leur audience. Nous fournissons des outils et des fonctionnalités pour aider les créateurs à monétiser leur contenu et à construire leur communauté.",
"hutopyValues": "Nos valeurs sont centrées sur la créativité, la communauté et le soutien. Nous croyons en l'autonomisation des créateurs pour poursuivre leurs passions et construire des carrières durables." "hutopyValues": "Nos valeurs sont centrées sur la créativité, la communauté et le soutien. Nous croyons en l'autonomisation des créateurs pour poursuivre leurs passions et construire des carrières durables."
}, }
"es": {
"inscription": "Registrarse",
"createPage": "Crear Página",
"support": "Apoyar",
"creators": "Creadores",
"projects": "Proyectos",
"love": "Pasión",
"supportText": "Apoyar",
"supportDescription": "Apoya a tus creadores favoritos y ayúdales a crecer. Tus contribuciones hacen una diferencia real en su viaje creativo.",
"create": "Crear",
"creatorDescription": "Crea tu propia página y comienza tu viaje creativo. Comparte tu pasión con el mundo y construye tu comunidad.",
"signup": "Registrarse",
"whatIsHutopy": "¿Qué es Hutopy?",
"hutopyDescription": "Hutopy es una plataforma que conecta a los creadores con su audiencia. Proporcionamos herramientas y funciones para ayudar a los creadores a monetizar su contenido y construir su comunidad.",
"hutopyValues": "Nuestros valores se centran en la creatividad, la comunidad y el apoyo. Creemos en empoderar a los creadores para perseguir sus pasiones y construir carreras sostenibles."
}
} }
</i18n> </i18n>

10
frontend/src/views/main/SideBar.vue
View File

@@ -16,7 +16,7 @@
const authStore = useAuthStore(); const authStore = useAuthStore();
function toggleLanguage() { function toggleLanguage() {
const languages = ['fr', 'en', 'es']; const languages = ['fr', 'en'];
const currentIndex = languages.indexOf(locale.value); const currentIndex = languages.indexOf(locale.value);
const nextIndex = (currentIndex + 1) % languages.length; const nextIndex = (currentIndex + 1) % languages.length;
languageStore.setLocale(languages[nextIndex]); languageStore.setLocale(languages[nextIndex]);
@@ -193,14 +193,6 @@
"signIn": "Se Connecter", "signIn": "Se Connecter",
"signOut": "Se Déconnecter" "signOut": "Se Déconnecter"
} }
},
"es": {
"sidebar": {
"myPage": "Mi Página",
"myProfile": "Mi Perfil",
"signIn": "Iniciar Sesión",
"signOut": "Cerrar Sesión"
}
} }
} }
</i18n> </i18n>

33
frontend/src/views/profile/ProfilePage.vue
View File

@@ -948,39 +948,6 @@
"phoneNumber": "Numéro de téléphone", "phoneNumber": "Numéro de téléphone",
"title": "Titre", "title": "Titre",
"removeStripe": "Retirer Stripe" "removeStripe": "Retirer Stripe"
},
"es": {
"personalInfo": "Información Personal",
"fullName": "Nombre Completo",
"alias": "Alias",
"email": "Correo Electrónico",
"changePassword": "Actualizar contraseña",
"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",
"stripeAccountId": "ID de Cuenta Stripe",
"socialNetworks": "Redes Sociales",
"handle": "Identificador del creador",
"qrCode": "Código QR",
"qrCodeDescription": "¡Imprime este código QR para compartir tu Hutopy con el mundo! Perfecto para tarjetas de presentación, redes sociales y materiales promocionales.",
"downloadQRCode": "Descargar Código QR",
"payment-information": "Información de Pago",
"stripeStatus": "Estado de Stripe",
"configured": "Configurado",
"notConfigured": "No Configurado",
"needsMoreInfo": "Requiere Más Información",
"pendingVerification": "Verificación Pendiente",
"continueStripeSetup": "Continuar Configuración de Stripe",
"reviewStripe": "Revisar Stripe",
"notSet": "No Establecido",
"configureStripe": "Connectar Stripe",
"phoneNumber": "Número de teléfono",
"title": "Título",
"removeStripe": "Eliminar Stripe"
} }
} }
</i18n> </i18n>

92
frontend/src/views/profile/account/AliasDialog.vue
View File

@@ -1,66 +1,58 @@
<template> <template>
<div class="card dialog">
<div class="card-title">
{{ t('title') }}
</div>
<div class="card dialog"> <div class="card-content">
<v-text-field
v-model="alias"
:label="t('label')"
variant="outlined"
></v-text-field>
</div>
<div class="card-title"> <div class="card-actions">
{{ t('title') }} <button
class="secondary"
@click="requestClose"
>
{{ t('cancel') }}
</button>
<button
class="primary"
@click="requestSave"
>
{{ t('save') }}
</button>
</div>
</div> </div>
<div class="card-content">
<v-text-field
variant="outlined"
v-model="alias"
:label="t('label')"
></v-text-field>
</div>
<div class="card-actions">
<button class="secondary"
@click="requestClose">
{{ t('cancel') }}
</button>
<button class="primary"
@click="requestSave">
{{ t('save') }}
</button>
</div>
</div>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps(['alias']) const props = defineProps(['alias']);
const emit = defineEmits(['close', 'save']) const emit = defineEmits(['close', 'save']);
const alias = ref(props.alias) const alias = ref(props.alias);
const requestClose = () => emit('close') const requestClose = () => emit('close');
const requestSave = () => emit('save', alias.value) const requestSave = () => emit('save', alias.value);
</script> </script>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Alias", "title": "Alias",
"label": "Your alias" "label": "Your alias"
}, },
"fr": { "fr": {
"title": "Alias", "title": "Alias",
"label": "Votre alias" "label": "Votre alias"
}, }
"es": {
"title": "Alias",
"label": "Tu alias"
}
} }
</i18n> </i18n>

283
frontend/src/views/profile/account/ChangePasswordDialog.vue
View File

@@ -1,162 +1,177 @@
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title">
{{ t('changePassword') }}
</div>
<div class="card-title"> <div class="card-content">
{{ t('changePassword') }} <p class="description mb-4">{{ t('passwordDescription') }}</p>
<v-text-field
v-model="newPassword"
:hint="t('passwordRequirements')"
:label="t('newPassword')"
:type="showNewPassword ? 'text' : 'password'"
required
variant="outlined"
>
<template v-slot:append-inner>
<v-icon
:icon="showNewPassword ? mdiEyeOff : mdiEye"
class="visibility-toggle"
size="small"
@click="showNewPassword = !showNewPassword"
/>
</template>
</v-text-field>
<v-text-field
v-model="confirmPassword"
:label="t('confirmPassword')"
:type="showConfirmPassword ? 'text' : 'password'"
required
variant="outlined"
>
<template v-slot:append-inner>
<v-icon
:icon="showNewPassword ? mdiEyeOff : mdiEye"
class="visibility-toggle"
size="small"
@click="showConfirmPassword = !showConfirmPassword"
/>
</template>
</v-text-field>
<div
v-if="errorMessage"
class="error-message mb-4"
>
{{ errorMessage }}
</div>
<div class="card-actions">
<button
class="secondary"
@click="$emit('closeRequested')"
>
{{ t('cancel') }}
</button>
<button
:disabled="isLoading"
class="primary"
@click="handleChangePassword"
>
{{ t('save') }}
</button>
</div>
</div>
</div> </div>
<div class="card-content">
<p class="description mb-4">{{ t('passwordDescription') }}</p>
<v-text-field v-model="newPassword" :label="t('newPassword')" :type="showNewPassword ? 'text' : 'password'"
variant="outlined" required :hint="t('passwordRequirements')">
<template v-slot:append-inner>
<v-icon @click="showNewPassword = !showNewPassword" class="visibility-toggle" size="small"
:icon="showNewPassword ? mdiEyeOff : mdiEye" />
</template>
</v-text-field>
<v-text-field v-model="confirmPassword" :label="t('confirmPassword')"
:type="showConfirmPassword ? 'text' : 'password'" variant="outlined" required>
<template v-slot:append-inner>
<v-icon @click="showConfirmPassword = !showConfirmPassword" class="visibility-toggle" size="small"
:icon="showNewPassword ? mdiEyeOff : mdiEye" />
</template>
</v-text-field>
<div v-if="errorMessage" class="error-message mb-4">
{{ errorMessage }}
</div>
<div class="card-actions">
<button class="secondary" @click="$emit('closeRequested')">
{{ t('cancel') }}
</button>
<button class="primary" @click="handleChangePassword" :disabled="isLoading">
{{ t('save') }}
</button>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useAuthStore } from '@/stores/authStore.js'; import { useAuthStore } from '@/stores/authStore.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { mdiEye, mdiEyeOff } from '@mdi/js'; import { mdiEye, mdiEyeOff } from '@mdi/js';
const { t } = useI18n(); const { t } = useI18n();
const authStore = useAuthStore(); const authStore = useAuthStore();
const emit = defineEmits(['closeRequested']); const emit = defineEmits(['closeRequested']);
const newPassword = ref(''); const newPassword = ref('');
const confirmPassword = ref(''); const confirmPassword = ref('');
const isLoading = ref(false); const isLoading = ref(false);
const errorMessage = ref(''); const errorMessage = ref('');
const showNewPassword = ref(false); const showNewPassword = ref(false);
const showConfirmPassword = ref(false); const showConfirmPassword = ref(false);
async function handleChangePassword() { async function handleChangePassword() {
// Clear previous error // Clear previous error
errorMessage.value = ''; errorMessage.value = '';
// Validate passwords match // Validate passwords match
if (newPassword.value !== confirmPassword.value) { if (newPassword.value !== confirmPassword.value) {
errorMessage.value = t('passwordsDoNotMatch'); errorMessage.value = t('passwordsDoNotMatch');
return; return;
} }
// Validate password length // Validate password length
if (newPassword.value.length < 8) { if (newPassword.value.length < 8) {
errorMessage.value = t('passwordTooShort'); errorMessage.value = t('passwordTooShort');
return; return;
} }
isLoading.value = true; isLoading.value = true;
try { try {
// Pass empty string for current password since we're already authenticated // Pass empty string for current password since we're already authenticated
// This will use the set-password endpoint for OAuth users // This will use the set-password endpoint for OAuth users
await authStore.changePassword(newPassword.value); await authStore.changePassword(newPassword.value);
// Success - close dialog // Success - close dialog
emit('closeRequested'); emit('closeRequested');
// You could also emit a success event if needed // You could also emit a success event if needed
// emit('success'); // emit('success');
} catch (error) { } catch (error) {
console.error('Failed to change password:', error); console.error('Failed to change password:', error);
// Use error message from response if available, or the error message itself, or fallback // Use error message from response if available, or the error message itself, or fallback
errorMessage.value = error.response?.data || error.message || t('passwordUpdateFailed'); errorMessage.value = error.response?.data || error.message || t('passwordUpdateFailed');
} finally { } finally {
isLoading.value = false; isLoading.value = false;
} }
} }
</script> </script>
<style scoped> <style scoped>
.dialog { .dialog {
@apply max-w-md mx-auto; @apply max-w-md mx-auto;
} }
.error-message { .error-message {
@apply text-red-500 text-sm mt-2; @apply text-red-500 text-sm mt-2;
} }
.visibility-toggle { .visibility-toggle {
@apply cursor-pointer; @apply cursor-pointer;
@apply transition-opacity duration-300; @apply transition-opacity duration-300;
@apply opacity-60 hover:opacity-100; @apply opacity-60 hover:opacity-100;
@apply absolute right-2 top-1/2 transform -translate-y-1/2; @apply absolute right-2 top-1/2 transform -translate-y-1/2;
@apply z-10; @apply z-10;
} }
/* Override Vuetify's default padding to accommodate our icon */ /* Override Vuetify's default padding to accommodate our icon */
:deep(.v-field__append-inner) { :deep(.v-field__append-inner) {
padding-inline-start: 0; padding-inline-start: 0;
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"changePassword": "Update Password", "changePassword": "Update Password",
"newPassword": "New Password", "newPassword": "New Password",
"confirmPassword": "Confirm New Password", "confirmPassword": "Confirm New Password",
"passwordRequirements": "Password must be at least 8 characters", "passwordRequirements": "Password must be at least 8 characters",
"passwordDescription": "Updating your password allows you to log in directly with your email and password.", "passwordDescription": "Updating your password allows you to log in directly with your email and password.",
"save": "Save", "save": "Save",
"cancel": "Cancel", "cancel": "Cancel",
"passwordsDoNotMatch": "New passwords do not match", "passwordsDoNotMatch": "New passwords do not match",
"passwordTooShort": "Password must be at least 8 characters long", "passwordTooShort": "Password must be at least 8 characters long",
"passwordUpdateFailed": "Failed to update password. Please try again." "passwordUpdateFailed": "Failed to update password. Please try again."
}, },
"fr": { "fr": {
"changePassword": "Modifier le mot de passe", "changePassword": "Modifier le mot de passe",
"newPassword": "Nouveau mot de passe", "newPassword": "Nouveau mot de passe",
"confirmPassword": "Confirmer le nouveau mot de passe", "confirmPassword": "Confirmer le nouveau mot de passe",
"passwordRequirements": "Le mot de passe doit comporter au moins 8 caractères", "passwordRequirements": "Le mot de passe doit comporter au moins 8 caractères",
"passwordDescription": "La modification de votre mot de passe vous permet de vous connecter directement avec votre email et mot de passe.", "passwordDescription": "La modification de votre mot de passe vous permet de vous connecter directement avec votre email et mot de passe.",
"save": "Enregistrer", "save": "Enregistrer",
"cancel": "Annuler", "cancel": "Annuler",
"passwordsDoNotMatch": "Les nouveaux mots de passe ne correspondent pas", "passwordsDoNotMatch": "Les nouveaux mots de passe ne correspondent pas",
"passwordTooShort": "Le mot de passe doit comporter au moins 8 caractères", "passwordTooShort": "Le mot de passe doit comporter au moins 8 caractères",
"passwordUpdateFailed": "Échec de la mise à jour du mot de passe. Veuillez réessayer." "passwordUpdateFailed": "Échec de la mise à jour du mot de passe. Veuillez réessayer."
}, }
"es": {
"changePassword": "Actualizar contraseña",
"newPassword": "Nueva contraseña",
"confirmPassword": "Confirmar nueva contraseña",
"passwordRequirements": "La contraseña debe tener al menos 8 caracteres",
"passwordDescription": "La actualización de su contraseña le permite iniciar sesión directamente con su correo electrónico y contraseña.",
"save": "Guardar",
"cancel": "Cancelar",
"passwordsDoNotMatch": "Las nuevas contraseñas no coinciden",
"passwordTooShort": "La contraseña debe tener al menos 8 caracteres",
"passwordUpdateFailed": "Error al actualizar la contraseña. Por favor, inténtelo de nuevo."
}
} }
</i18n> </i18n>

122
frontend/src/views/profile/account/EmailDialog.vue
View File

@@ -1,82 +1,78 @@
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title"> <div class="card-title">
{{ t('title') }} {{ t('title') }}
</div> </div>
<div class="card-content"> <div class="card-content">
<v-text-field <v-text-field
v-model="email" v-model="email"
:label="t('label')" :label="t('label')"
variant="outlined" variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<button class="secondary" <button
@click="cancel"> class="secondary"
{{ t('cancel') }} @click="cancel"
</button> >
<button class="primary" {{ t('cancel') }}
@click="save"> </button>
{{ t('save') }} <button
</button> class="primary"
@click="save"
>
{{ t('save') }}
</button>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue'; import { ref } from 'vue';
import {useClient} from "@/plugins/api.js"; import { useClient } from '@/plugins/api.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
email: { email: {
required: true, required: true,
type: String type: String,
} },
}); });
const emits = defineEmits(['closeRequested']); const emits = defineEmits(['closeRequested']);
const email = ref(props.email); const email = ref(props.email);
const client = useClient(); const client = useClient();
const save = async () => { const save = async () => {
try { try {
await client.post( await client.post(`/api/users/email`, {
`/api/users/email`, email: email.value,
{ });
email: email.value
});
emits('closeRequested'); emits('closeRequested');
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
const cancel = () => { const cancel = () => {
emits('closeRequested'); emits('closeRequested');
}; };
</script> </script>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Change your Email", "title": "Change your Email",
"label": "Your email" "label": "Your email"
}, },
"fr": { "fr": {
"title": "Changez votre Courriel", "title": "Changez votre Courriel",
"label": "Votre email" "label": "Votre email"
}, }
"es": {
"title": "Cambia tu correo electrónico",
"label": "Tu correo electrónico"
}
} }
</i18n> </i18n>

103
frontend/src/views/profile/account/FullnameDialog.vue
View File

@@ -1,70 +1,69 @@
<script setup> <script setup>
import {ref} from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps(['firstname', 'lastname']) const props = defineProps(['firstname', 'lastname']);
const emit = defineEmits(['close', 'save']) const emit = defineEmits(['close', 'save']);
const firstname = ref(props.firstname) const firstname = ref(props.firstname);
const lastname = ref(props.lastname) const lastname = ref(props.lastname);
const requestClose = () => emit('close') const requestClose = () => emit('close');
const requestSave = () => emit('save', firstname.value, lastname.value) const requestSave = () => emit('save', firstname.value, lastname.value);
</script> </script>
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title"> <div class="card-title">
{{ t('title') }} {{ t('title') }}
</div> </div>
<div class="card-content"> <div class="card-content">
<v-text-field <v-text-field
variant="outlined" v-model="firstname"
v-model="firstname" :label="t('firstname')"
:label="t('firstname')" variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
<div class="card-content"> <div class="card-content">
<v-text-field <v-text-field
variant="outlined" v-model="lastname"
v-model="lastname" :label="t('lastname')"
:label="t('lastname')" variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<button class="secondary" <button
@click="requestClose"> class="secondary"
{{ t('cancel') }} @click="requestClose"
</button> >
{{ t('cancel') }}
</button>
<button class="primary" <button
@click="requestSave"> class="primary"
{{ t('save') }} @click="requestSave"
</button> >
{{ t('save') }}
</button>
</div>
</div> </div>
</div>
</template> </template>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Full Name", "title": "Full Name",
"firstname": "First Name", "firstname": "First Name",
"lastname": "Last Name" "lastname": "Last Name"
}, },
"fr": { "fr": {
"title": "Nom complet", "title": "Nom complet",
"firstname": "Prénom", "firstname": "Prénom",
"lastname": "Nom" "lastname": "Nom"
}, }
"es": {
"title": "Nombre completo",
"firstname": "Nombre",
"lastname": "Apellido"
}
} }
</i18n> </i18n>

274
frontend/src/views/profile/creators/ChangeEmailDialog.vue
View File

@@ -1,174 +1,164 @@
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title">{{ t('changeEmail') }}</div> <div class="card-title">{{ t('changeEmail') }}</div>
<div class="card-content"> <div class="card-content">
<v-text-field <v-text-field
v-model="email" v-model="email"
class="w-full p-2" :error-messages="emailErrors"
:label="t('email')" :label="t('email')"
type="email" :rules="emailRules"
variant="outlined" class="w-full p-2"
:error-messages="emailErrors" type="email"
:rules="emailRules" validate-on="blur"
validate-on="blur" variant="outlined"
/> />
<v-alert
v-if="!!errorMessage"
outlined
type="error"
class="mt-4">
{{ errorMessage }}
</v-alert>
<div class="card-actions"> <v-alert
<button class="secondary" @click="$emit('closeRequested')"> v-if="!!errorMessage"
{{ t('cancel') }} class="mt-4"
</button> outlined
<button class="primary" @click="saveEmail" :disabled="!canSave || isLoading"> type="error"
{{ t('save') }} >
</button> {{ errorMessage }}
</div> </v-alert>
<div class="card-actions">
<button
class="secondary"
@click="$emit('closeRequested')"
>
{{ t('cancel') }}
</button>
<button
:disabled="!canSave || isLoading"
class="primary"
@click="saveEmail"
>
{{ t('save') }}
</button>
</div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useClient } from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js'; import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
const { t } = useI18n(); const { t } = useI18n();
const client = useClient(); const client = useClient();
const creatorProfileStore = useCreatorProfileStore(); const creatorProfileStore = useCreatorProfileStore();
const props = defineProps({ const props = defineProps({
creator: { creator: {
type: Object, type: Object,
required: true required: true,
} },
}); });
const email = ref(props.creator.presentation?.email || ''); const email = ref(props.creator.presentation?.email || '');
const isLoading = ref(false); const isLoading = ref(false);
const errorMessage = ref(''); const errorMessage = ref('');
// Email validation // Email validation
const isValidEmail = (email) => { const isValidEmail = email => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email); return emailRegex.test(email);
}; };
const emailRules = [ const emailRules = [
v => !!v || t('validation.emailRequired'), v => !!v || t('validation.emailRequired'),
v => isValidEmail(v) || t('validation.emailInvalid'), v => isValidEmail(v) || t('validation.emailInvalid'),
]; ];
const emailErrors = computed(() => { const emailErrors = computed(() => {
if (!email.value) { if (!email.value) {
return [t('validation.emailRequired')]; return [t('validation.emailRequired')];
} }
if (!isValidEmail(email.value)) { if (!isValidEmail(email.value)) {
return [t('validation.emailInvalid')]; return [t('validation.emailInvalid')];
} }
return []; return [];
}); });
const canSave = computed(() => { const canSave = computed(() => {
return email.value && return email.value && isValidEmail(email.value) && email.value !== (props.creator.presentation?.email || '');
isValidEmail(email.value) && });
email.value !== (props.creator.presentation?.email || '');
});
async function saveEmail() { async function saveEmail() {
if (!props.creator.id) { if (!props.creator.id) {
console.error("Creator ID is missing!"); console.error('Creator ID is missing!');
return; return;
} }
if (!canSave.value) { if (!canSave.value) {
return; return;
} }
try { try {
isLoading.value = true; isLoading.value = true;
errorMessage.value = ''; errorMessage.value = '';
// Save email // Save email
await client.post( await client.post(`/api/creators/${props.creator.id}/email`, {
`/api/creators/${props.creator.id}/email`, email: email.value.trim(),
{ });
email: email.value.trim()
}
);
// Refresh creator profile // Refresh creator profile
await creatorProfileStore.fetchCreatorProfile(); await creatorProfileStore.fetchCreatorProfile();
// Close dialog // Close dialog
emit('closeRequested'); emit('closeRequested');
} catch (error) { } catch (error) {
console.error("Error saving email:", error); console.error('Error saving email:', error);
if (error?.response?.data?.errors) { if (error?.response?.data?.errors) {
errorMessage.value = error.response.data.errors[0]?.['reason'] || t('errors.unexpected'); errorMessage.value = error.response.data.errors[0]?.['reason'] || t('errors.unexpected');
} else { } else {
errorMessage.value = error?.response?.data?.message || error.message || t('errors.unexpected'); errorMessage.value = error?.response?.data?.message || error.message || t('errors.unexpected');
}
} finally {
isLoading.value = false;
}
} }
} finally {
isLoading.value = false;
}
}
const emit = defineEmits(['closeRequested']); const emit = defineEmits(['closeRequested']);
</script> </script>
<style scoped> <style scoped>
.dialog { .dialog {
@apply max-w-md mx-auto; @apply max-w-md mx-auto;
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"changeEmail": "Change Email", "changeEmail": "Change Email",
"email": "Email", "email": "Email",
"save": "Save", "save": "Save",
"cancel": "Cancel", "cancel": "Cancel",
"validation": { "validation": {
"emailRequired": "Email is required", "emailRequired": "Email is required",
"emailInvalid": "Please enter a valid email address" "emailInvalid": "Please enter a valid email address"
},
"errors": {
"unexpected": "An unexpected error occurred"
}
}, },
"errors": { "fr": {
"unexpected": "An unexpected error occurred" "changeEmail": "Modifier l'email",
"email": "Email",
"save": "Enregistrer",
"cancel": "Annuler",
"validation": {
"emailRequired": "L'email est requis",
"emailInvalid": "Veuillez entrer une adresse email valide"
},
"errors": {
"unexpected": "Une erreur inattendue s'est produite"
}
} }
},
"fr": {
"changeEmail": "Modifier l'email",
"email": "Email",
"save": "Enregistrer",
"cancel": "Annuler",
"validation": {
"emailRequired": "L'email est requis",
"emailInvalid": "Veuillez entrer une adresse email valide"
},
"errors": {
"unexpected": "Une erreur inattendue s'est produite"
}
},
"es": {
"changeEmail": "Cambiar correo electrónico",
"email": "Correo electrónico",
"save": "Guardar",
"cancel": "Cancelar",
"validation": {
"emailRequired": "El correo electrónico es obligatorio",
"emailInvalid": "Por favor ingrese una dirección de correo electrónico válida"
},
"errors": {
"unexpected": "Se produjo un error inesperado"
}
}
} }
</i18n> </i18n>

127
frontend/src/views/profile/creators/ChangeNameDialog.vue
View File

@@ -1,87 +1,82 @@
<script setup> <script setup>
import {ref} from 'vue'; import { ref } from 'vue';
import {useClient} from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
creator: { creator: {
required: true required: true,
} },
}); });
const emits = defineEmits(['closeRequested']); const emits = defineEmits(['closeRequested']);
const name = ref(props.creator.name); const name = ref(props.creator.name);
const client = useClient(); const client = useClient();
async function save() { async function save() {
try { try {
await client.post( await client.post(`/api/creators/${props.creator.id}/name`, {
`/api/creators/${props.creator.id}/name`, name: name.value,
{ });
name: name.value
props.creator.name = name.value;
emits('closeRequested');
} catch (error) {
console.error('Error saving title:', error);
} }
); }
props.creator.name = name.value; const cancel = () => {
emits('closeRequested'); emits('closeRequested');
} catch (error) { };
console.error('Error saving title:', error);
}
}
const cancel = () => {
emits('closeRequested');
};
</script> </script>
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title"> <div class="card-title">
{{ t('title') }} {{ t('title') }}
</div> </div>
<div class="card-content"> <div class="card-content">
<v-text-field <v-text-field
v-model="name" v-model="name"
:label="t('label')" :label="t('label')"
outlined outlined
variant="outlined" variant="outlined"
></v-text-field> ></v-text-field>
<div class="card-actions"> <div class="card-actions">
<button class="secondary" <button
@click="cancel"> class="secondary"
{{ t('cancel') }} @click="cancel"
</button> >
<button class="primary" {{ t('cancel') }}
@click="save"> </button>
{{ t('save') }} <button
</button> class="primary"
</div> @click="save"
>
{{ t('save') }}
</button>
</div>
</div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped></style>
</style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Change Name", "title": "Change Name",
"label": "Your name" "label": "Your name"
}, },
"fr": { "fr": {
"title": "Modifier le nom", "title": "Modifier le nom",
"label": "Votre nom" "label": "Votre nom"
}, }
"es": {
"title": "Cambiar nombre",
"label": "Tu nombre"
}
} }
</i18n> </i18n>

411
frontend/src/views/profile/creators/ChangePhoneDialog.vue
View File

@@ -1,246 +1,239 @@
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title">{{ t('changePhoneNumber') }}</div> <div class="card-title">{{ t('changePhoneNumber') }}</div>
<div class="card-content"> <div class="card-content">
<v-text-field <v-text-field
v-model="displayPhoneNumber" v-model="displayPhoneNumber"
class="w-full p-2" :error-messages="phoneErrors"
:label="t('phoneNumber')" :label="t('phoneNumber')"
type="tel" :placeholder="t('phonePlaceholder')"
variant="outlined" :rules="phoneRules"
:error-messages="phoneErrors" class="w-full p-2"
:rules="phoneRules" maxlength="14"
validate-on="blur" type="tel"
:placeholder="t('phonePlaceholder')" validate-on="blur"
@input="handlePhoneInput" variant="outlined"
@keydown="handleKeydown" @input="handlePhoneInput"
maxlength="14" @keydown="handleKeydown"
/> />
<v-alert
v-if="!!errorMessage"
outlined
type="error"
class="mt-4">
{{ errorMessage }}
</v-alert>
<div class="card-actions"> <v-alert
<button class="secondary" @click="$emit('closeRequested')"> v-if="!!errorMessage"
{{ t('cancel') }} class="mt-4"
</button> outlined
<button class="primary" @click="savePhoneNumber" :disabled="!canSave || isLoading"> type="error"
{{ t('save') }} >
</button> {{ errorMessage }}
</div> </v-alert>
<div class="card-actions">
<button
class="secondary"
@click="$emit('closeRequested')"
>
{{ t('cancel') }}
</button>
<button
:disabled="!canSave || isLoading"
class="primary"
@click="savePhoneNumber"
>
{{ t('save') }}
</button>
</div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useClient } from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js'; import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
const { t } = useI18n(); const { t } = useI18n();
const client = useClient(); const client = useClient();
const creatorProfileStore = useCreatorProfileStore(); const creatorProfileStore = useCreatorProfileStore();
const props = defineProps({ const props = defineProps({
creator: { creator: {
type: Object, type: Object,
required: true required: true,
} },
}); });
// Format existing phone number to display format // Format existing phone number to display format
const formatPhoneForDisplay = (phone) => { const formatPhoneForDisplay = phone => {
if (!phone) return ''; if (!phone) return '';
const digits = phone.replace(/\D/g, ''); const digits = phone.replace(/\D/g, '');
if (digits.length === 10) { if (digits.length === 10) {
return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`; return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
} }
return phone; return phone;
}; };
// Extract just the digits from formatted phone // Extract just the digits from formatted phone
const extractDigits = (formattedPhone) => { const extractDigits = formattedPhone => {
return formattedPhone.replace(/\D/g, ''); return formattedPhone.replace(/\D/g, '');
}; };
const displayPhoneNumber = ref(formatPhoneForDisplay(props.creator.presentation?.phoneNumber || '')); const displayPhoneNumber = ref(formatPhoneForDisplay(props.creator.presentation?.phoneNumber || ''));
const phoneDigits = ref(extractDigits(displayPhoneNumber.value)); const phoneDigits = ref(extractDigits(displayPhoneNumber.value));
const isLoading = ref(false); const isLoading = ref(false);
const errorMessage = ref(''); const errorMessage = ref('');
// Phone number formatting and validation // Phone number formatting and validation
const formatPhoneNumber = (digits) => { const formatPhoneNumber = digits => {
// Remove all non-digits // Remove all non-digits
const cleaned = digits.replace(/\D/g, ''); const cleaned = digits.replace(/\D/g, '');
// Apply formatting based on length
if (cleaned.length === 0) return '';
if (cleaned.length <= 3) return `(${cleaned}`;
if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
};
const handlePhoneInput = (event) => { // Apply formatting based on length
const input = event.target.value; if (cleaned.length === 0) return '';
const digits = extractDigits(input); if (cleaned.length <= 3) return `(${cleaned}`;
if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
// Limit to 10 digits return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
if (digits.length > 10) return; };
phoneDigits.value = digits;
displayPhoneNumber.value = formatPhoneNumber(digits);
};
const handleKeydown = (event) => { const handlePhoneInput = event => {
// Allow backspace, delete, tab, escape, enter const input = event.target.value;
if ([8, 9, 27, 13, 46].includes(event.keyCode)) return; const digits = extractDigits(input);
// Allow Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
if ((event.ctrlKey || event.metaKey) && [65, 67, 86, 88].includes(event.keyCode)) return;
// Allow arrow keys
if (event.keyCode >= 35 && event.keyCode <= 40) return;
// Only allow numbers (0-9)
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
};
// Watch for changes to phoneDigits to update display // Limit to 10 digits
watch(phoneDigits, (newDigits) => { if (digits.length > 10) return;
displayPhoneNumber.value = formatPhoneNumber(newDigits);
});
const isValidPhoneNumber = (digits) => { phoneDigits.value = digits;
return digits.length === 10; displayPhoneNumber.value = formatPhoneNumber(digits);
}; };
const phoneRules = [ const handleKeydown = event => {
v => { // Allow backspace, delete, tab, escape, enter
const digits = extractDigits(v); if ([8, 9, 27, 13, 46].includes(event.keyCode)) return;
return digits.length > 0 || t('validation.phoneRequired');
},
v => {
const digits = extractDigits(v);
return isValidPhoneNumber(digits) || t('validation.phoneInvalid');
},
];
const phoneErrors = computed(() => { // Allow Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
if (phoneDigits.value.length === 0) { if ((event.ctrlKey || event.metaKey) && [65, 67, 86, 88].includes(event.keyCode)) return;
return [t('validation.phoneRequired')];
}
if (!isValidPhoneNumber(phoneDigits.value)) {
return [t('validation.phoneInvalid')];
}
return [];
});
const canSave = computed(() => { // Allow arrow keys
return phoneDigits.value.length === 10 && if (event.keyCode >= 35 && event.keyCode <= 40) return;
phoneDigits.value !== extractDigits(props.creator.presentation?.phoneNumber || '');
});
async function savePhoneNumber() { // Only allow numbers (0-9)
if (!props.creator.id) { if (event.keyCode < 48 || event.keyCode > 57) {
console.error("Creator ID is missing!"); event.preventDefault();
return; }
} };
if (!canSave.value) { // Watch for changes to phoneDigits to update display
return; watch(phoneDigits, newDigits => {
} displayPhoneNumber.value = formatPhoneNumber(newDigits);
});
try { const isValidPhoneNumber = digits => {
isLoading.value = true; return digits.length === 10;
errorMessage.value = ''; };
// Save the formatted phone number const phoneRules = [
const formattedPhone = formatPhoneNumber(phoneDigits.value); v => {
const digits = extractDigits(v);
await client.post( return digits.length > 0 || t('validation.phoneRequired');
`/api/creators/${props.creator.id}/phone`, },
{ v => {
phoneNumber: formattedPhone const digits = extractDigits(v);
} return isValidPhoneNumber(digits) || t('validation.phoneInvalid');
); },
];
// Refresh creator profile const phoneErrors = computed(() => {
await creatorProfileStore.fetchCreatorProfile(); if (phoneDigits.value.length === 0) {
return [t('validation.phoneRequired')];
// Close dialog }
emit('closeRequested'); if (!isValidPhoneNumber(phoneDigits.value)) {
} catch (error) { return [t('validation.phoneInvalid')];
console.error("Error saving phone number:", error); }
if (error?.response?.data?.errors) { return [];
errorMessage.value = error.response.data.errors[0]?.['reason'] || t('errors.unexpected'); });
} else {
errorMessage.value = error?.response?.data?.message || error.message || t('errors.unexpected'); const canSave = computed(() => {
return (
phoneDigits.value.length === 10 &&
phoneDigits.value !== extractDigits(props.creator.presentation?.phoneNumber || '')
);
});
async function savePhoneNumber() {
if (!props.creator.id) {
console.error('Creator ID is missing!');
return;
}
if (!canSave.value) {
return;
}
try {
isLoading.value = true;
errorMessage.value = '';
// Save the formatted phone number
const formattedPhone = formatPhoneNumber(phoneDigits.value);
await client.post(`/api/creators/${props.creator.id}/phone`, {
phoneNumber: formattedPhone,
});
// Refresh creator profile
await creatorProfileStore.fetchCreatorProfile();
// Close dialog
emit('closeRequested');
} catch (error) {
console.error('Error saving phone number:', error);
if (error?.response?.data?.errors) {
errorMessage.value = error.response.data.errors[0]?.['reason'] || t('errors.unexpected');
} else {
errorMessage.value = error?.response?.data?.message || error.message || t('errors.unexpected');
}
} finally {
isLoading.value = false;
}
} }
} finally {
isLoading.value = false;
}
}
const emit = defineEmits(['closeRequested']); const emit = defineEmits(['closeRequested']);
</script> </script>
<style scoped> <style scoped>
.dialog { .dialog {
@apply max-w-md mx-auto; @apply max-w-md mx-auto;
} }
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"changePhoneNumber": "Change Phone Number", "changePhoneNumber": "Change Phone Number",
"phoneNumber": "Phone Number", "phoneNumber": "Phone Number",
"phonePlaceholder": "(555) 123-4567", "phonePlaceholder": "(555) 123-4567",
"save": "Save", "save": "Save",
"cancel": "Cancel", "cancel": "Cancel",
"validation": { "validation": {
"phoneRequired": "Phone number is required", "phoneRequired": "Phone number is required",
"phoneInvalid": "Please enter a complete 10-digit phone number" "phoneInvalid": "Please enter a complete 10-digit phone number"
},
"errors": {
"unexpected": "An unexpected error occurred"
}
}, },
"errors": { "fr": {
"unexpected": "An unexpected error occurred" "changePhoneNumber": "Modifier le numéro de téléphone",
"phoneNumber": "Numéro de téléphone",
"phonePlaceholder": "(555) 123-4567",
"save": "Enregistrer",
"cancel": "Annuler",
"validation": {
"phoneRequired": "Le numéro de téléphone est requis",
"phoneInvalid": "Veuillez entrer un numéro de téléphone complet à 10 chiffres"
},
"errors": {
"unexpected": "Une erreur inattendue s'est produite"
}
} }
},
"fr": {
"changePhoneNumber": "Modifier le numéro de téléphone",
"phoneNumber": "Numéro de téléphone",
"phonePlaceholder": "(555) 123-4567",
"save": "Enregistrer",
"cancel": "Annuler",
"validation": {
"phoneRequired": "Le numéro de téléphone est requis",
"phoneInvalid": "Veuillez entrer un numéro de téléphone complet à 10 chiffres"
},
"errors": {
"unexpected": "Une erreur inattendue s'est produite"
}
},
"es": {
"changePhoneNumber": "Cambiar número de teléfono",
"phoneNumber": "Número de teléfono",
"phonePlaceholder": "(555) 123-4567",
"save": "Guardar",
"cancel": "Cancelar",
"validation": {
"phoneRequired": "El número de teléfono es obligatorio",
"phoneInvalid": "Por favor ingrese un número de teléfono completo de 10 dígitos"
},
"errors": {
"unexpected": "Se produjo un error inesperado"
}
}
} }
</i18n> </i18n>

209
frontend/src/views/profile/creators/ChangeSlugDialog.vue
View File

@@ -1,119 +1,120 @@
<script setup> <script setup>
import {computed, ref, watch} from 'vue'; import { computed, ref, watch } from 'vue';
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js'; import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
import {useClient} from "@/plugins/api.js"; import { useClient } from '@/plugins/api.js';
import NameEditor from "@/views/creators/NameEditor.vue"; import NameEditor from '@/views/creators/NameEditor.vue';
import {useI18n} from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const props = defineProps({ const props = defineProps({
creator: { creator: {
required: true required: true,
} },
});
const emit = defineEmits(['closeRequested']);
const creatorProfileStore = useCreatorProfileStore();
const client = useClient();
const {t} = useI18n();
const newSlug = ref(props.creator.slug);
const slugReservationId = ref(undefined);
const isOperationPending = ref(false);
const errorMessage = ref('');
const isCurrentHandle = ref(false);
// Watch for changes to the new slug to check if it's the same as the current one
watch(newSlug, (newValue) => {
isCurrentHandle.value = newValue === props.creator.slug;
if (isCurrentHandle.value) {
slugReservationId.value = undefined;
}
});
const canSave = computed(() => slugReservationId.value !== undefined && !isCurrentHandle.value);
function handleSlugReservationIdChanged($event) {
slugReservationId.value = $event;
}
async function save() {
try {
isOperationPending.value = true;
errorMessage.value = '';
await client.put(`/api/creators/${props.creator.id}/slug`, {
slugReservationId: slugReservationId.value
}); });
await creatorProfileStore.fetchCreatorProfile(); const emit = defineEmits(['closeRequested']);
emit('closeRequested');
} catch (error) {
if (error?.response?.data?.errors) {
errorMessage.value = error.response.data.errors[0]?.['reason'] || 'An unexpected error occurred.';
} else {
errorMessage.value = error?.response?.data?.message || error.message || 'An unexpected error occurred.';
}
} finally {
isOperationPending.value = false;
}
}
const cancel = () => { const creatorProfileStore = useCreatorProfileStore();
emit('closeRequested'); const client = useClient();
}; const { t } = useI18n();
const newSlug = ref(props.creator.slug);
const slugReservationId = ref(undefined);
const isOperationPending = ref(false);
const errorMessage = ref('');
const isCurrentHandle = ref(false);
// Watch for changes to the new slug to check if it's the same as the current one
watch(newSlug, newValue => {
isCurrentHandle.value = newValue === props.creator.slug;
if (isCurrentHandle.value) {
slugReservationId.value = undefined;
}
});
const canSave = computed(() => slugReservationId.value !== undefined && !isCurrentHandle.value);
function handleSlugReservationIdChanged($event) {
slugReservationId.value = $event;
}
async function save() {
try {
isOperationPending.value = true;
errorMessage.value = '';
await client.put(`/api/creators/${props.creator.id}/slug`, {
slugReservationId: slugReservationId.value,
});
await creatorProfileStore.fetchCreatorProfile();
emit('closeRequested');
} catch (error) {
if (error?.response?.data?.errors) {
errorMessage.value = error.response.data.errors[0]?.['reason'] || 'An unexpected error occurred.';
} else {
errorMessage.value = error?.response?.data?.message || error.message || 'An unexpected error occurred.';
}
} finally {
isOperationPending.value = false;
}
}
const cancel = () => {
emit('closeRequested');
};
</script> </script>
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title"> <div class="card-title">
{{ t('title') }} {{ t('title') }}
</div>
<div class="card-content">
<name-editor
v-model:name="newSlug"
:creator-name-reservation-id="slugReservationId"
:original-slug="creator.slug"
@update:creator-name-reservation-id="handleSlugReservationIdChanged"
></name-editor>
<v-alert
v-if="!!errorMessage"
class="mt-4"
outlined
type="error"
>
{{ errorMessage }}
</v-alert>
<div class="card-actions">
<button
class="secondary"
@click="cancel"
>
{{ t('cancel') }}
</button>
<button
:disabled="!canSave || isOperationPending"
class="primary"
@click="save"
>
{{ t('save') }}
</button>
</div>
</div>
</div> </div>
<div class="card-content">
<name-editor
v-model:name="newSlug"
:creator-name-reservation-id="slugReservationId"
@update:creator-name-reservation-id="handleSlugReservationIdChanged"
:original-slug="creator.slug"
></name-editor>
<v-alert
v-if="!!errorMessage"
outlined
type="error"
class="mt-4">
{{ errorMessage }}
</v-alert>
<div class="card-actions">
<button class="secondary"
@click="cancel">
{{ t('cancel') }}
</button>
<button class="primary"
@click="save"
:disabled="!canSave || isOperationPending">
{{ t('save') }}
</button>
</div>
</div>
</div>
</template> </template>
<style scoped> <style scoped></style>
</style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Change Creator Handle" "title": "Change Creator Handle"
}, },
"fr": { "fr": {
"title": "Modifier l'identifiant du créateur" "title": "Modifier l'identifiant du créateur"
}, }
"es": {
"title": "Cambiar identificador del creador"
}
} }
</i18n> </i18n>

134
frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
View File

@@ -1,86 +1,84 @@
<script setup> <script setup>
import {useClient} from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
import {ref} from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js'; import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
const props = defineProps({ const props = defineProps({
creator: { creator: {
required: true, required: true,
}, },
});
const emits = defineEmits(['closeRequested']);
const stripeId = ref('');
const { t } = useI18n();
const creatorProfileStore = useCreatorProfileStore();
const client = useClient();
const save = async () => {
try {
await client.post(`/api/membership/stripe-account`, {
stripeAccountId: stripeId.value,
}); });
await creatorProfileStore.fetchCreatorProfile(); const emits = defineEmits(['closeRequested']);
emits('closeRequested');
} catch (error) {
console.error('Error saving stripe id:', error);
}
};
const cancel = () => { const stripeId = ref('');
emits('closeRequested'); const { t } = useI18n();
}; const creatorProfileStore = useCreatorProfileStore();
const client = useClient();
const save = async () => {
try {
await client.post(`/api/membership/stripe-account`, {
stripeAccountId: stripeId.value,
});
await creatorProfileStore.fetchCreatorProfile();
emits('closeRequested');
} catch (error) {
console.error('Error saving stripe id:', error);
}
};
const cancel = () => {
emits('closeRequested');
};
</script> </script>
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title"> <div class="card-title">
{{ t('title') }} {{ t('title') }}
</div> </div>
<div class="card-content"> <div class="card-content">
<v-text-field <v-text-field
v-model="stripeId" v-model="stripeId"
:label="t('label')" :label="t('label')"
outlined outlined
variant="outlined" variant="outlined"
></v-text-field> ></v-text-field>
<div class="card-actions"> <div class="card-actions">
<button class="secondary" <button
@click="cancel"> class="secondary"
{{ t('cancel') }} @click="cancel"
</button> >
<button class="primary" {{ t('cancel') }}
@click="save"> </button>
{{ t('save') }} <button
</button> class="primary"
</div> @click="save"
>
{{ t('save') }}
</button>
</div>
</div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped></style>
</style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Change Stripe ID", "title": "Change Stripe ID",
"label": "Your Stripe ID" "label": "Your Stripe ID"
}, },
"fr": { "fr": {
"title": "Modifier l'ID Stripe", "title": "Modifier l'ID Stripe",
"label": "Votre ID Stripe" "label": "Votre ID Stripe"
}, }
"es": {
"title": "Cambiar ID de Stripe",
"label": "Tu ID de Stripe"
}
} }
</i18n> </i18n>

130
frontend/src/views/profile/creators/ChangeTitleDialog.vue
View File

@@ -1,88 +1,82 @@
<script setup> <script setup>
import {ref} from 'vue'; import { ref } from 'vue';
import {useClient} from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const props = defineProps({ const props = defineProps({
creator: { creator: {
required: true required: true,
} },
}); });
const emits = defineEmits(['closeRequested']); const emits = defineEmits(['closeRequested']);
const title = ref(props.creator.title); const title = ref(props.creator.title);
const { t } = useI18n(); const { t } = useI18n();
const client = useClient(); const client = useClient();
async function save() { async function save() {
try { try {
await client.post( await client.post(`/api/creators/${props.creator.id}/title`, {
`/api/creators/${props.creator.id}/title`, title: title.value,
{ });
title: title.value
props.creator.title = title.value;
emits('closeRequested');
} catch (error) {
console.error('Error saving title:', error);
} }
); }
props.creator.title = title.value; const cancel = () => {
emits('closeRequested'); emits('closeRequested');
} catch (error) { };
console.error('Error saving title:', error);
}
}
const cancel = () => {
emits('closeRequested');
};
</script> </script>
<template> <template>
<div class="card dialog"> <div class="card dialog">
<div class="card-title">
{{ t('title') }}
</div>
<div class="card-title"> <div class="card-content">
{{ t('title') }} <v-text-field
v-model="title"
:label="t('label')"
outlined
variant="outlined"
></v-text-field>
<div class="card-actions">
<button
class="secondary"
@click="cancel"
>
{{ t('cancel') }}
</button>
<button
class="primary"
@click="save"
>
{{ t('save') }}
</button>
</div>
</div>
</div> </div>
<div class="card-content">
<v-text-field
v-model="title"
:label="t('label')"
outlined
variant="outlined"
></v-text-field>
<div class="card-actions">
<button class="secondary"
@click="cancel">
{{ t('cancel') }}
</button>
<button class="primary"
@click="save">
{{ t('save') }}
</button>
</div>
</div>
</div>
</template> </template>
<style scoped> <style scoped></style>
</style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Change Title", "title": "Change Title",
"label": "Your title" "label": "Your title"
}, },
"fr": { "fr": {
"title": "Modifier le titre", "title": "Modifier le titre",
"label": "Votre titre" "label": "Votre titre"
}, }
"es": {
"title": "Cambiar título",
"label": "Tu título"
}
} }
</i18n> </i18n>

360
frontend/src/views/profile/creators/SocialsDialog.vue
View File

@@ -1,210 +1,200 @@
<script setup> <script setup>
import {ref} from 'vue' import { ref } from 'vue';
import {useClient} from "@/plugins/api.js"; import { useClient } from '@/plugins/api.js';
import X from "@/views/svg/X.vue"; import X from '@/views/svg/X.vue';
import Tiktok from "@/views/svg/Tiktok.vue"; import Tiktok from '@/views/svg/Tiktok.vue';
import Reddit from "@/views/svg/Reddit.vue"; import Reddit from '@/views/svg/Reddit.vue';
import Web from "@/views/svg/Web.vue"; import Web from '@/views/svg/Web.vue';
import Youtube from "@/views/svg/Youtube.vue"; import Youtube from '@/views/svg/Youtube.vue';
import Linkedin from "@/views/svg/Linkedin.vue"; import Linkedin from '@/views/svg/Linkedin.vue';
import Instagram from "@/views/svg/Instagram.vue"; import Instagram from '@/views/svg/Instagram.vue';
import Facebook from "@/views/svg/Facebook.vue"; import Facebook from '@/views/svg/Facebook.vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
creator: { creator: {
required: true required: true,
} },
}) });
const emits = defineEmits(['closeRequested']) const emits = defineEmits(['closeRequested']);
const facebookUrl = ref(props.creator.socials.facebookUrl) const facebookUrl = ref(props.creator.socials.facebookUrl);
const instagramUrl = ref(props.creator.socials.instagramUrl) const instagramUrl = ref(props.creator.socials.instagramUrl);
const linkedInUrl = ref(props.creator.socials.linkedInUrl) const linkedInUrl = ref(props.creator.socials.linkedInUrl);
const redditUrl = ref(props.creator.socials.redditUrl) const redditUrl = ref(props.creator.socials.redditUrl);
const tikTokUrl = ref(props.creator.socials.tikTokUrl) const tikTokUrl = ref(props.creator.socials.tikTokUrl);
const websiteUrl = ref(props.creator.socials.websiteUrl) const websiteUrl = ref(props.creator.socials.websiteUrl);
const xUrl = ref(props.creator.socials.xUrl) const xUrl = ref(props.creator.socials.xUrl);
const youtubeUrl = ref(props.creator.socials.youtubeUrl) const youtubeUrl = ref(props.creator.socials.youtubeUrl);
const client = useClient() const client = useClient();
const save = async () => { const save = async () => {
try { try {
await client.post( await client.post(`/api/creators/${props.creator.id}/socials`, {
`/api/creators/${props.creator.id}/socials`, facebookUrl: facebookUrl.value || null,
{ instagramUrl: instagramUrl.value || null,
"facebookUrl": facebookUrl.value || null, linkedInUrl: linkedInUrl.value || null,
"instagramUrl": instagramUrl.value || null, redditUrl: redditUrl.value || null,
"linkedInUrl": linkedInUrl.value || null, tikTokUrl: tikTokUrl.value || null,
"redditUrl": redditUrl.value || null, websiteUrl: websiteUrl.value || null,
"tikTokUrl": tikTokUrl.value || null, xUrl: xUrl.value || null,
"websiteUrl": websiteUrl.value || null, youtubeUrl: youtubeUrl.value || null,
"xUrl": xUrl.value || null, });
"youtubeUrl": youtubeUrl.value || null,
})
props.creator.socials.facebookUrl = facebookUrl props.creator.socials.facebookUrl = facebookUrl;
props.creator.socials.instagramUrl = instagramUrl props.creator.socials.instagramUrl = instagramUrl;
props.creator.socials.linkedInUrl = linkedInUrl props.creator.socials.linkedInUrl = linkedInUrl;
props.creator.socials.redditUrl = redditUrl props.creator.socials.redditUrl = redditUrl;
props.creator.socials.tikTokUrl = tikTokUrl props.creator.socials.tikTokUrl = tikTokUrl;
props.creator.socials.websiteUrl = websiteUrl props.creator.socials.websiteUrl = websiteUrl;
props.creator.socials.xUrl = xUrl props.creator.socials.xUrl = xUrl;
props.creator.socials.youtubeUrl = youtubeUrl props.creator.socials.youtubeUrl = youtubeUrl;
emits('closeRequested') emits('closeRequested');
} catch (error) { } catch (error) {
console.error(error) console.error(error);
} }
} };
const cancel = () => {
emits('closeRequested')
}
const cancel = () => {
emits('closeRequested');
};
</script> </script>
<template> <template>
<div class="card dialog">
<div class="card-title">
{{ t('title') }}
</div>
<div class="card dialog"> <div class="card-content">
<div class="editor-line">
<facebook class="social-icon"></facebook>
<input
v-model="facebookUrl"
:placeholder="t('facebook')"
class="input-field"
type="text"
/>
</div>
<div class="card-title"> <div class="editor-line">
{{ t('title') }} <instagram class="social-icon"></instagram>
<input
v-model="instagramUrl"
:placeholder="t('instagram')"
class="input-field"
type="text"
/>
</div>
<div class="editor-line">
<linkedin class="social-icon"></linkedin>
<input
v-model="linkedInUrl"
:placeholder="t('linkedin')"
class="input-field"
type="text"
/>
</div>
<div class="editor-line">
<reddit class="social-icon"></reddit>
<input
v-model="redditUrl"
:placeholder="t('reddit')"
class="input-field"
type="text"
/>
</div>
<div class="editor-line">
<tiktok class="social-icon"></tiktok>
<input
v-model="tikTokUrl"
:placeholder="t('tiktok')"
class="input-field"
type="text"
/>
</div>
<div class="editor-line">
<web class="social-icon"></web>
<input
v-model="websiteUrl"
:placeholder="t('website')"
class="input-field"
type="text"
/>
</div>
<div class="editor-line">
<x class="social-icon"></x>
<input
v-model="xUrl"
:placeholder="t('x')"
class="input-field"
type="text"
/>
</div>
<div class="editor-line">
<youtube class="social-icon"></youtube>
<input
v-model="youtubeUrl"
:placeholder="t('youtube')"
class="input-field"
type="text"
/>
</div>
</div>
<div class="card-actions">
<button
class="secondary"
@click="cancel"
>
{{ t('cancel') }}
</button>
<button
class="primary"
@click="save"
>
{{ t('save') }}
</button>
</div>
</div> </div>
<div class="card-content">
<div class="editor-line">
<facebook class="social-icon"></facebook>
<input
v-model="facebookUrl"
class="input-field"
:placeholder="t('facebook')"
type="text"
/>
</div>
<div class="editor-line">
<instagram class="social-icon"></instagram>
<input
v-model="instagramUrl"
class="input-field"
:placeholder="t('instagram')"
type="text"
/>
</div>
<div class="editor-line">
<linkedin class="social-icon"></linkedin>
<input
v-model="linkedInUrl"
class="input-field"
:placeholder="t('linkedin')"
type="text"
/>
</div>
<div class="editor-line">
<reddit class="social-icon"></reddit>
<input
v-model="redditUrl"
class="input-field"
:placeholder="t('reddit')"
type="text"
/>
</div>
<div class="editor-line">
<tiktok class="social-icon"></tiktok>
<input
v-model="tikTokUrl"
class="input-field"
:placeholder="t('tiktok')"
type="text"
/>
</div>
<div class="editor-line">
<web class="social-icon"></web>
<input
v-model="websiteUrl"
class="input-field"
:placeholder="t('website')"
type="text"
/>
</div>
<div class="editor-line">
<x class="social-icon"></x>
<input
v-model="xUrl"
class="input-field"
:placeholder="t('x')"
type="text"
/>
</div>
<div class="editor-line">
<youtube class="social-icon"></youtube>
<input
v-model="youtubeUrl"
class="input-field"
:placeholder="t('youtube')"
type="text"
/>
</div>
</div>
<div class="card-actions">
<button class="secondary"
@click="cancel">
{{ t('cancel') }}
</button>
<button class="primary"
@click="save">
{{ t('save') }}
</button>
</div>
</div>
</template> </template>
<style scoped> <style scoped>
.editor-line {
@apply flex flex-row gap-4;
@apply items-center;
}
.editor-line { .social-icon {
@apply flex flex-row gap-4; @apply w-8 h-8;
@apply items-center; }
}
.social-icon {
@apply w-8 h-8;
}
.input-field {
@apply w-full p-[10px];
@apply rounded-sm;
@apply transition duration-200;
@apply ring-1 ring-[#6D6C70] focus:outline-none focus:ring-hutopySecondary;
@apply hover:ring-hutopyPrimary;
@apply placeholder:text-[#6D6C70]
}
.input-field {
@apply w-full p-[10px];
@apply rounded-sm;
@apply transition duration-200;
@apply ring-1 ring-[#6D6C70] focus:outline-none focus:ring-hutopySecondary;
@apply hover:ring-hutopyPrimary;
@apply placeholder:text-[#6D6C70];
}
</style> </style>
<i18n> <i18n>
{ {
"en": { "en": {
"title": "Social Media Links" "title": "Social Media Links"
}, },
"fr": { "fr": {
"title": "Liens des réseaux sociaux" "title": "Liens des réseaux sociaux"
}, }
"es": {
"title": "Enlaces de redes sociales"
}
} }
</i18n> </i18n>