96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
// src/lib/components/Recipies/machines/authMachine.ts
|
|
import { createMachine } from 'xstate';
|
|
|
|
export const recipeMachine = createMachine(
|
|
{
|
|
id: 'auth',
|
|
initial: 'notAuthenticated',
|
|
states: {
|
|
notAuthenticated: {
|
|
meta: {
|
|
title: 'Welcome!',
|
|
buttons: [
|
|
{
|
|
type: 'START',
|
|
label: 'Login',
|
|
disabled: false
|
|
}
|
|
]
|
|
},
|
|
on: {
|
|
START: {
|
|
target: 'signIn',
|
|
actions: 'startSignIn'
|
|
}
|
|
}
|
|
},
|
|
signIn: {
|
|
meta: {
|
|
title: 'Sign In',
|
|
composite: {
|
|
id: 'signInForm',
|
|
component: 'oForm'
|
|
},
|
|
buttons: [
|
|
{
|
|
type: 'BACK',
|
|
label: 'Back',
|
|
disabled: true
|
|
},
|
|
{
|
|
type: 'NEXT',
|
|
label: 'Authenticate',
|
|
disabled: false
|
|
}
|
|
]
|
|
},
|
|
on: {
|
|
BACK: 'notAuthenticated',
|
|
NEXT: {
|
|
target: 'authenticated',
|
|
actions: 'authenticate'
|
|
}
|
|
}
|
|
},
|
|
authenticated: {
|
|
meta: {
|
|
title: 'Authenticated',
|
|
buttons: [
|
|
{
|
|
type: 'LOGOUT',
|
|
label: 'Logout',
|
|
disabled: false
|
|
}
|
|
]
|
|
},
|
|
on: {
|
|
LOGOUT: {
|
|
target: 'notAuthenticated',
|
|
actions: 'logout'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
actions: {
|
|
startSignIn: (context, event) => {
|
|
console.log('Starting sign in process...');
|
|
},
|
|
authenticate: (context, event) => {
|
|
console.log('Authenticating...');
|
|
},
|
|
logout: (context, event) => {
|
|
console.log('Logging out...');
|
|
},
|
|
setValidated: (context, event) => {
|
|
console.log('Form is validated');
|
|
// Add your logic here to update the visual representation
|
|
},
|
|
setNotValidated: (context, event) => {
|
|
console.log('Form is not validated');
|
|
// Add your logic here to update the visual representation
|
|
}
|
|
}
|
|
}
|
|
) |