+
Active Inactive
++ Syncing... +
@@ -17,72 +20,184 @@ {{ activeUntilDate() }}
Error: {{ error }}
+{{ success }}
- Your
Required
Error: {{ apiError }}
+Error: {{ rotateSessionError }}
Required
@@ -60,17 +63,19 @@ id="password" type="password" class="password" + :disabled="!!rotateSessionError" @keypress.enter.prevent >Required
Must be 12+ characters and contain uppercase, lowercase, number, and special character (e.g. -_+=~!@#$%^&*(),;.?":{}|<>)
Error: {{ apiError }}
+Error: {{ rotateSessionError }}
@@ -104,6 +109,7 @@ import { ref, onMounted, onUpdated } from 'vue' import { useRoute } from 'vue-router' import axios from 'axios' import { userApi } from '../api/user.ts' +import { subscriptionApi } from '../api/subscription.ts' import { startRegistration, browserSupportsWebAuthn } from '@simplewebauthn/browser' import tabs from '@preline/tabs' import Footer from './Footer.vue' @@ -116,9 +122,12 @@ const emailAuthnError = ref(false) const passwordError = ref(false) const apiSuccess = ref('') const apiError = ref('') +const rotateSessionError = ref('') const isLoading = ref(false) const passkeySupported = ref(false) const subid = ref('') +const sessionid = ref('') +const syncing = ref(false) const validateEmail = () => { emailError.value = !email.value @@ -127,7 +136,7 @@ const validateEmail = () => { const validateEmailAuthn = () => { emailAuthnError.value = !emailAuthn.value - return !emailAuthnError.value + return !emailAuthnError.value && syncing.value === false } const validatePassword = () => { @@ -138,7 +147,7 @@ const validatePassword = () => { const validate = () => { const validEmail = validateEmail() const validPass = validatePassword() - return validEmail && validPass + return validEmail && validPass && syncing.value === false } const register = async () => { @@ -148,7 +157,7 @@ const register = async () => { const data = { email: email.value, password: password.value, - subid: subid.value + subid: subid.value, } try { @@ -176,7 +185,7 @@ const registerWithPasskey = async () => { const data = { email: emailAuthn.value, - subid: subid.value + subid: subid.value, } try { @@ -199,12 +208,48 @@ const registerWithPasskey = async () => { } } -const parseSubid = () => { +const rotateSessionId = async () => { + if (!sessionid.value) { + return + } + + syncing.value = true + try { + await subscriptionApi.rotateSessionId({ + sessionid: sessionid.value, + }) + rotateSessionError.value = '' + } catch (err) { + if (axios.isAxiosError(err)) { + rotateSessionError.value = err.response?.data.error || err.message + + if (err.response?.status === 429) { + rotateSessionError.value = 'Too many requests, please try again later.' + } + } + } finally { + syncing.value = false + } +} + +const parseParams = () => { const route = useRoute() - subid.value = route.params.subid as string + const q = route.query + const first = (v: unknown) => typeof v === 'string' ? v : Array.isArray(v) ? v[0] : '' + subid.value = first(q.subid) || (route.params.subid as string) || '' + sessionid.value = first(q.sessionid) || (route.params.sessionid as string) || '' + if (!subid.value || !subid.value.match(/^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/)) { - window.location.href = '/login' + console.error('Invalid or missing subid') + return + } + + if (!sessionid.value || !sessionid.value.match(/^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/)) { + console.error('Invalid or missing sessionid') + return } + + rotateSessionId() } const isLoggedIn = (): boolean => { @@ -217,7 +262,7 @@ onMounted(() => { window.location.href = '/' } - parseSubid() + parseParams() passkeySupported.value = browserSupportsWebAuthn() tabs.autoInit() }) diff --git a/app/src/router.ts b/app/src/router.ts index 2c59d869..316c0257 100644 --- a/app/src/router.ts +++ b/app/src/router.ts @@ -76,7 +76,7 @@ const routes: RouteRecordRaw[] = [ children: dashboardChildren }, { - path: '/signup/:subid', + path: '/signup', name: `${AppName} - Sign Up`, component: Signup }, diff --git a/app/src/style/components/badge.css b/app/src/style/components/badge.css index 391506a1..952d3611 100644 --- a/app/src/style/components/badge.css +++ b/app/src/style/components/badge.css @@ -6,6 +6,10 @@ @apply bg-success text-white font-semibold; } + &.progress { + @apply bg-accent text-white font-semibold; + } + &.bounce { @apply bg-amber-500 dark:bg-amber-700 text-white font-semibold; } @@ -18,6 +22,10 @@ @apply bg-violet-500 dark:bg-violet-700 text-white font-semibold; } + &.inactive_subscription { + @apply bg-gray-500 text-white font-semibold; + } + &.small { @apply py-0.5 px-1.5 text-xs; }