86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
// Auth flow states
|
||
|
|
export type AuthState = 'onboarding' | 'login' | 'create' | 'recovery' | 'confirm' | 'complete'
|
||
|
|
|
||
|
|
// Auth store to manage the flow
|
||
|
|
const currentState = ref<AuthState>('onboarding')
|
||
|
|
|
||
|
|
export const useAuthStore = () => {
|
||
|
|
const getCurrentState = () => currentState.value
|
||
|
|
|
||
|
|
const setState = (state: AuthState) => {
|
||
|
|
currentState.value = state
|
||
|
|
}
|
||
|
|
|
||
|
|
const nextStep = () => {
|
||
|
|
switch (currentState.value) {
|
||
|
|
case 'onboarding':
|
||
|
|
setState('login')
|
||
|
|
break
|
||
|
|
case 'login':
|
||
|
|
// Stay in login, user chooses create or open
|
||
|
|
break
|
||
|
|
case 'create':
|
||
|
|
setState('recovery')
|
||
|
|
break
|
||
|
|
case 'recovery':
|
||
|
|
setState('confirm')
|
||
|
|
break
|
||
|
|
case 'confirm':
|
||
|
|
setState('complete')
|
||
|
|
break
|
||
|
|
case 'complete':
|
||
|
|
// Flow complete
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const previousStep = () => {
|
||
|
|
switch (currentState.value) {
|
||
|
|
case 'onboarding':
|
||
|
|
// Can't go back from onboarding
|
||
|
|
break
|
||
|
|
case 'login':
|
||
|
|
setState('onboarding')
|
||
|
|
break
|
||
|
|
case 'create':
|
||
|
|
setState('login')
|
||
|
|
break
|
||
|
|
case 'recovery':
|
||
|
|
setState('create')
|
||
|
|
break
|
||
|
|
case 'confirm':
|
||
|
|
setState('recovery')
|
||
|
|
break
|
||
|
|
case 'complete':
|
||
|
|
setState('confirm')
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const goToCreate = () => {
|
||
|
|
setState('create')
|
||
|
|
}
|
||
|
|
|
||
|
|
const goToLogin = () => {
|
||
|
|
setState('login')
|
||
|
|
}
|
||
|
|
|
||
|
|
const resetFlow = () => {
|
||
|
|
setState('onboarding')
|
||
|
|
localStorage.removeItem('onboarding-completed')
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
currentState: currentState.value,
|
||
|
|
getCurrentState,
|
||
|
|
setState,
|
||
|
|
nextStep,
|
||
|
|
previousStep,
|
||
|
|
goToCreate,
|
||
|
|
goToLogin,
|
||
|
|
resetFlow,
|
||
|
|
}
|
||
|
|
}
|