Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)

// Email: [email protected]
// Code: 12345

const loginMachine = Machine({
  id: 'login',
  initial: 'email',
  context: {
    email: '[email protected]',
    code: '12345',
  },
  states: {
    email: {
      on: {
        INPUT: {
          actions: 'cacheEmail',
          target: 'email.noError'
        },
        SUBMIT: [
          {
            cond: 'isEmailEmpty',
            target: 'email.error.empty'
          },
          {
            cond: 'isEmailBadFormat',
            target: 'email.error.badFormat'
          },
          { target: 'emailService' }
        ]
      },
      initial: 'noError',
      states: {
        noError: {},
        error: {
          initial: 'empty',
          states: {
            empty: {},
            badFormat: {},
          },
        },
      }
    },
    emailService: {
      on: {
        SUCCESS: 'code',
        ERROR: [
          {
            cond: 'isEmailEmpty',
            target: 'email.error.empty'
          },
          {
            cond: 'isEmailBadFormat',
            target: 'email.error.badFormat'
          },
        ],
      }
    },
    code: {
      on: {
        INPUT: {
          actions: 'cacheCode',
          target: 'code.noError'
        },
        SUBMIT: [
          {
            cond: 'isCodeEmpty',
            target: 'code.error.empty'
          },
          { target: 'codeService' }
        ],
        RESEND: 'emailService',
      },
      initial: 'noError',
      states: {
        noError: {},
        error: {
          initial: 'empty',
          states: {
            empty: {},
            invalid: {},
            expired: {},
          },
        },
      }
    },
    codeService: {
      on: {
        SUCCESS: 'dashboard',
        ERROR: [
          {
            cond: 'isCodeInvalid',
            target: 'code.error.invalid'
          },
          {
            cond: 'isCodeExpired',
            target: 'code.error.expired'
          }
        ]
      }
    },
    dashboard: { type: 'final' }
  },
}, {
  guards: {
    isEmailEmpty: (ctx, evt) => ctx.email === '',
    isEmailBadFormat: (ctx, evt) => ctx.email === 'fakeemail',
    isCodeEmpty: (ctx, evt) => ctx.code === '',
    isCodeInvalid: (ctx, evt) => ctx.code !== '12345',
    isCodeExpired: (ctx, evt) => ctx.code === 'expired',
  },
  actions: {
    cacheEmail: (ctx, evt) => assign({
        email: evt.email
    }),
    cacheCode: (ctx, evt) => assign({
      code: evt.code
    }),
  },
});