refactor(auth): cleanup auth module and streamline the registration flow

frontend/src/views/creators/PaymentFailed.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="container">
+        <div class="card">
+            <!-- Navigation Link at the top -->
+            <div class="navigation-link">
+                <button
+                    class="link-button"
+                    @click="goBack()"
+                >
+                    <v-icon :icon="mdiArrowLeft" />
+                    {{ t('returnToCreator') }}
+                </button>
+            </div>
+
+            <h1>{{ t('title') }}</h1>
+            <p>{{ t('message') }}</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { useRoute, useRouter } from 'vue-router';
+    import { useI18n } from 'vue-i18n';
+    import { mdiArrowLeft } from '@mdi/js';
+
+    const router = useRouter();
+    const route = useRoute();
+    const { t } = useI18n();
+
+    function goBack() {
+        const creatorName = route.params.creator?.split('/')[0] || '';
+        router.push(`/@${creatorName}`);
+    }
+</script>
+
+<i18n>
+{
+    "en": {
+        "title": "Payment Failed",
+        "message": "We couldn't process your payment.",
+        "retry": "Try Again",
+        "returnToCreator": "Return to creator page"
+    },
+    "fr": {
+        "title": "Échec du paiement",
+        "message": "Nous n'avons pas pu traiter votre paiement.",
+        "retry": "Réessayer",
+        "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>
+
+<style scoped>
+    .container {
+        @apply flex items-center justify-center;
+        @apply p-5;
+        @apply w-full;
+        @apply mx-auto;
+        @apply max-w-[1024px];
+    }
+
+    .card {
+        @apply bg-hSurface text-hOnSurface;
+        @apply p-8;
+        @apply font-sans;
+        @apply rounded-2xl;
+        @apply shadow-2xl;
+        @apply relative;
+        @apply w-full;
+        @apply max-w-2xl;
+        @apply mx-auto;
+    }
+
+    .card::before {
+        content: '';
+        @apply absolute inset-0;
+        @apply rounded-2xl;
+        @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%
+        );
+        mask:
+            linear-gradient(#fff 0 0) content-box,
+            linear-gradient(#fff 0 0);
+        mask-composite: exclude;
+        pointer-events: none;
+    }
+
+    .navigation-link {
+        @apply flex items-center;
+        @apply mb-6;
+    }
+
+    .link-button {
+        @apply flex items-center gap-2;
+        @apply text-hutopyPrimary hover:text-hutopySecondary;
+        @apply transition-colors;
+        @apply duration-300;
+        @apply text-xl;
+        @apply font-semibold;
+    }
+
+    h1 {
+        @apply text-6xl;
+        @apply font-medium;
+        @apply mb-8;
+        @apply text-center;
+    }
+
+    p {
+        @apply text-lg;
+        @apply font-medium;
+        @apply mb-8;
+        @apply text-center;
+    }
+</style>