refactor(auth): cleanup auth module and streamline the registration flow
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user