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

machine.js

const context = {
  // TODO: separate machines for logged in/logged out
  // logged out
  email: '',
  password: '',
  passwordA: '',
  passwordB: '',
  username: '',
  loginError: '',
  recoveryEmailError: '',
};

const audacyLoginState = {
  id: 'Audacy login',
  onDone: 'done login',
  on: {
    BACK: '#splash screen.choosing login method',
  },
  // TODO: parallel states for email and password fields
  initial: 'email',
  states: {
    email: {
      onDone: 'password',
      // on: {
      //   BACK: '#choosing login method',
      // },
      initial: 'entering email',
      states: {
        'entering email': {
          on: {
            'EDIT EMAIL': {
              actions: 'assign email',
            },
            'SUBMIT EMAIL': {
              target: 'checking email',
              cond: 'email is valid',
            },
          },
        },
        'checking email': {
          entry: 'clear login error',
          invoke: {
            src: 'check email',
            onDone: [
              {
                target: '#creating account',
                actions: 'clear login error',
                cond: (_, { data }) => data === 'CREATE ACCOUNT',
              },
              {
                target: 'done email',
                actions: 'clear login error',
              },
            ],
            onError: {
              target: 'entering email',
              actions: 'assign login error',
            },
          },
        },
        'done email': { type: 'final' },
      },
    },
    password: {
      onDone: 'done Audacy login',
      on: {
        BACK: 'email',
      },
      initial: 'entering password',
      states: {
        'entering password': {
          on: {
            'EDIT PASSWORD': {
              actions: 'assign password',
            },
            'FORGOT PASSWORD': '#resetting Audacy password',
            'SUBMIT PASSWORD': {
              target: 'checking password',
              cond: 'password is valid',
            },
          },
        },
        'checking password': {
          invoke: {
            src: 'check password',
            onDone: {
              target: 'done password',
              actions: 'clear login error',
            },
            onError: {
              target: 'entering password',
              actions: 'assign login error',
            },
          },
        },
        'done password': { type: 'final' },
      },
    },
    'done Audacy login': { type: 'final' },
    history: { type: 'history', history: 'deep' },
  },
};

const loggedOutState = {
  // onDone: {
  //   target: 'logged in',
  // },
  initial: 'splash screen',
  states: {
    'splash screen': {
      id: 'splash screen',
      initial: 'Audacy logo',
      states: {
        'Audacy logo': {
          after: {
            1000: 'choosing login method',
          },
        },
        'choosing login method': {
          id: 'choosing login method',
          on: {
            'CONTINUE WITH AUDACY': '#Audacy login',
          },
        },        
      },
    },
    'Audacy login': audacyLoginState,
    'resetting Audacy password': {
      id: 'resetting Audacy password',
      onDone: 'Audacy login',
      on: {
        BACK: 'Audacy login.history',
      },
      initial: 'entering email',
      states: {
        'entering email': {
          onDone: 'email sent',
          initial: 'editing email',
          states: {
            'editing email': {
              on: {
                'SUBMIT EMAIL': 'sending recovery email',
              },
            },
            'sending recovery email': {
              invoke: {
                src: 'send recovery email',
                onDone: {
                  target: 'done entering email',
                  actions: 'clear recovery email error',
                },
                onError: {
                  target: 'editing email',
                  actions: 'assign recovery email error',
                },
              },
            },
            'done entering email': { type: 'final' },
          },
        },
        'email sent': {
          on: {
            'RESEND EMAIL': 'entering email.sending recovery email',
            'BACK TO LOGIN': 'done resetting Audacy password',
          },
        },
        'done resetting Audacy password': { type: 'final' },
      },
    },
    'creating account': {
      id: 'creating account',
      onDone: 'done login',
      initial: 'choosing username',
      states: {
        'choosing username': {
          on: {
            BACK: '#Audacy login',
            'EDIT USERNAME': {
              actions: 'assign username',
            },
            'SUBMIT USERNAME': 'choosing password',
          },
        },
        'choosing password': {
          id: 'choosing password',
          on: {
            BACK: 'choosing username',
            'EDIT PASSWORD A': {
              actions: ['assign password A'],
            },
            'EDIT PASSWORD B': {
              actions: ['assign password B'],
            },
            'SUBMIT NEW PASSWORD': {
              target: 'submitting new password',
              cond: 'passwords match',
            },
          },
        },
        'submitting new password': {
          invoke: {
            src: 'submit new password',
            onDone: 'done creating account',
            // TODO: assign error
            onError: 'choosing password',
          },
        },
        'done creating account': { type: 'final' },
      },
    },
    'done login': { type: 'final' },
  },
};

const machine = Machine({
    id: 'logged out',
    context,
    ...loggedOutState,
    // ...loggedInState,
    // initial: 'logged out',
    // states: {
      // 'logged out': loggedOutState,
      // 'logged in': loggedInState,
    // },
  });