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

This commit is contained in:
2025-06-18 16:50:11 -04:00
parent 25b94d3e02
commit cdcfe8d7e2
24 changed files with 2140 additions and 1387 deletions

View File

@@ -3,7 +3,8 @@ import { createRouter, createWebHistory } from 'vue-router';
import CreatorHome from '@/views/creators/CreatorHome.vue';
import CreatorLayout from '@/views/creators/CreatorLayout.vue';
const LoginView = () => import('@/views/LoginView.vue');
const LoginView = () => import('@/views/auth/LoginView.vue');
const About = () => import('@/views/documentation/About.vue');
const ContentPolicy = () => import('@/views/documentation/ContentPolicy.vue');
@@ -14,151 +15,158 @@ const HelpAndContact = () => import('@/views/documentation/HelpAndContact.vue');
const Pricing = () => import('@/views/documentation/Pricing.vue');
const TermsAndConditions = () => import('@/views/documentation/TermsAndConditions.vue');
const ProfilePage = () => import('@/views/profile/ProfilePage.vue');
const PaymentCompleted = () => import('@/views/PaymentCompleted.vue');
const PaymentFailed = () => import('@/views/PaymentFailed.vue');
const PaymentCompleted = () => import('@/views/creators/PaymentCompleted.vue');
const PaymentFailed = () => import('@/views/creators/PaymentFailed.vue');
const Landing = () => import('@/views/main/Landing.vue');
const CreateCreator = () => import('@/views/creators/CreateCreator.vue');
const RegisterView = () => import('@/views/RegisterView.vue');
const ForgotPasswordView = () => import('@/views/ForgotPasswordView.vue');
const ResetPasswordView = () => import('@/views/ResetPasswordView.vue');
const RegisterView = () => import('@/views/auth/RegisterView.vue');
const ForgotPasswordView = () => import('@/views/auth/ForgotPasswordView.vue');
const ResetPasswordView = () => import('@/views/auth/ResetPasswordView.vue');
const VerifyEmailView = () => import('@/views/auth/VerifyEmailView.vue');
const routes = [
{
path: '/landing',
name: 'landing',
component: Landing,
},
{
path: '/',
redirect: { name: 'landing' },
},
{
path: '/@:creator',
component: CreatorLayout,
children: [
{
path: '',
name: 'creator',
component: CreatorHome,
},
{
path: 'tip-completed',
name: 'PaymentCompleted',
component: PaymentCompleted,
},
{
path: 'tip-cancelled',
name: 'PaymentFailed',
component: PaymentFailed,
}
],
},
{
path: '/documents',
component: DocumentationLayout,
children: [
{
path: 'helpandcontact',
name: 'helpandcontact',
component: HelpAndContact,
},
{
path: 'termsandconditions',
name: 'termsandconditions',
component: TermsAndConditions,
},
{
path: 'contentpolicy',
name: 'contentpolicy',
component: ContentPolicy,
},
{
path: 'faq',
name: 'FAQ',
component: FAQ,
},
{
path: 'guideforcreators',
name: 'guideforcreators',
component: CreatorGuide,
},
{
path: 'about',
name: 'about',
component: About,
},
{
path: 'pricing',
name: 'pricing',
component: Pricing,
},
],
},
{
path: '/login',
name: 'login',
component: LoginView,
meta: { notAuthenticated: true },
props: (route) => ({ returnUrl: route.query.returnUrl || '/landing' })
},
{
path: '/profile',
name: 'profile',
component: ProfilePage,
meta: { requiresAuth: true },
},
{
path: '/create-creator',
name: 'create-creator',
component: CreateCreator,
meta: { requiresAuth: true },
},
{
path: '/register',
name: 'register',
component: RegisterView,
meta: { requiresAuth: false }
},
{
path: '/forgot-password',
name: 'forgot-password',
component: ForgotPasswordView,
meta: { notAuthenticated: true }
},
{
path: '/reset-password',
name: 'reset-password',
component: ResetPasswordView,
meta: { notAuthenticated: true },
props: (route) => ({ email: route.query.email, token: route.query.token })
}
{
path: '/landing',
name: 'landing',
component: Landing,
},
{
path: '/',
redirect: { name: 'landing' },
},
{
path: '/@:creator',
component: CreatorLayout,
children: [
{
path: '',
name: 'creator',
component: CreatorHome,
},
{
path: 'tip-completed',
name: 'PaymentCompleted',
component: PaymentCompleted,
},
{
path: 'tip-cancelled',
name: 'PaymentFailed',
component: PaymentFailed,
},
],
},
{
path: '/documents',
component: DocumentationLayout,
children: [
{
path: 'helpandcontact',
name: 'helpandcontact',
component: HelpAndContact,
},
{
path: 'termsandconditions',
name: 'termsandconditions',
component: TermsAndConditions,
},
{
path: 'contentpolicy',
name: 'contentpolicy',
component: ContentPolicy,
},
{
path: 'faq',
name: 'FAQ',
component: FAQ,
},
{
path: 'guideforcreators',
name: 'guideforcreators',
component: CreatorGuide,
},
{
path: 'about',
name: 'about',
component: About,
},
{
path: 'pricing',
name: 'pricing',
component: Pricing,
},
],
},
{
path: '/login',
name: 'login',
component: LoginView,
meta: { notAuthenticated: true },
props: route => ({ returnUrl: route.query.returnUrl || '/landing' }),
},
{
path: '/profile',
name: 'profile',
component: ProfilePage,
meta: { requiresAuth: true },
},
{
path: '/create-creator',
name: 'create-creator',
component: CreateCreator,
meta: { requiresAuth: true },
},
{
path: '/register',
name: 'register',
component: RegisterView,
meta: { requiresAuth: false },
},
{
path: '/forgot-password',
name: 'forgot-password',
component: ForgotPasswordView,
meta: { notAuthenticated: true },
},
{
path: '/reset-password',
name: 'reset-password',
component: ResetPasswordView,
meta: { notAuthenticated: true },
props: route => ({ email: route.query.email, token: route.query.token }),
},
{
path: '/verify-email',
name: 'verify-email',
component: VerifyEmailView,
meta: { notAuthenticated: true },
},
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
history: createWebHistory(import.meta.env.BASE_URL),
routes,
});
// Navigation guards
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
const authStore = useAuthStore();
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!authStore.isAuthenticated) {
next({
name: 'login',
query: { returnUrl: to.fullPath }
});
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!authStore.isAuthenticated) {
next({
name: 'login',
query: { returnUrl: to.fullPath },
});
} else {
next();
}
} else if (to.matched.some(record => record.meta.notAuthenticated)) {
if (authStore.isAuthenticated) next({ name: 'landing' });
else next();
} else {
next();
next();
}
} else if (to.matched.some((record) => record.meta.notAuthenticated)) {
if (authStore.isAuthenticated) next({ name: 'landing' });
else next();
} else {
next();
}
});
export default router;