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

machine.js

const resend_confirmation_machine = {
  id: 'resendconfirmation',
  initial: 'inactive',
  states: {
    inactive: {
      always: '#loginform.active',
    },
    active: {
      on: {
        'resendconfirmation.email.focus': 'email',
        'resendconfirmation.submit': {
          target: 'submit',
          cond: 'valid',
        },
        'resendconfirmation.close': 'inactive',
      },
    },
    email: {
      // ...email_service,
    },
    submit: {
      invoke: {
        src: 'submit_email_confirmation',
        onDone: {
          target: 'success',
          actions: ['show_info'],
        },
        onError: {
          target: 'error',
          actions: ['update_error'],
        },
      },
    },
    success: {
      type: 'final',
      always: 'inactive',
    },
    error: {
      always: {
        target: 'active',
        actions: ['show_error'],
      },
    },
  },
};

const forgotten_password_machine = {
  id: 'forgottenpassword',
  initial: 'inactive',
  states: {
    inactive: {
      always: '#loginform.active',
    },
    active: {
      on: {
        'forgottenpassword.email.focus': 'email',
        'forgottenpassword.submit': {
          target: 'submit',
          cond: 'valid',
        },
        'forgottenpassword.close': 'inactive',
      },
    },
    email: {
      // ...email_service,
    },
    submit: {
      invoke: {
        src: 'submit_forgotten_password',
        onDone: {
          target: 'success',
          actions: ['show_info'],
        },
        onError: {
          target: 'error',
          actions: ['update_error'],
        },
      },
    },
    success: {
      type: 'final',
      always: 'inactive',
    },
    error: {
      always: {
        target: 'active',
        actions: ['show_error'],
      },
    },
  },
};

const login_form_machine = {
  id: 'loginform',
  initial: 'active',
  states: {
    inactive: {
      'loginform.activate': 'active',
    },
    active: {
      on: {
        'loginform.email.focus': 'email',
        'loginform.password.focus': 'password',
        'loginform.submit': {
          target: 'submit',
          cond: 'valid',
        },
        'loginform.deactivate': 'inactive',
        'update_password': {
          target: '',
          actions: ['update_password'],
        },
        'update_email': {
          target: '',
          actions: ['update_email'],
        },
      },
    },
    email: {
      // ...email_service,
    },
    password: {
      // ...password_service,
    },
    submit: {
      invoke: {
        src: 'submit_login',
        onDone: {
          target: 'success',
          actions: ['update_user'],
        },
        onError: {
          target: 'error',
          actions: ['update_error'],
        },
      },
    },
    success: {
      type: 'final',
      data: (context) => context.user,
    },
    error: {
      on: {
        '': {
          target: 'active',
          actions: ['show_error'],
        },
      },
    },
  },
};

const login_machine = Machine({
  id: 'loginmachine',
  initial: 'active',
  context: {
    email: null,
    password: null,
    error: null,
  },
  states: {
    inactive: {
      on: {
        'login.activate': 'active',
      },
    },
    active: {
      on: {
        'login.loginform': 'loginform.active',
        'login.resendconfirmation': 'resendconfirmation.active',
        'login.forgottenpassword': 'forgottenpassword.active',
        'login.deactivate': 'inactive',
      },
    },
    loginform: {
      on: {
        'login.deactivate': 'inactive',
        'update_password': {
          target: '',
          actions: ['update_password'],
        },
        'update_email': {
          target: '',
          actions: ['update_email'],
        },
      },
      ...login_form_machine,
    },
    forgottenpassword: {
      on: {
        'login.deactivate': 'inactive',
        'update_email': {
          target: '',
          actions: ['update_email'],
        },
      },
      ...forgotten_password_machine,
    },
    resendconfirmation: {
      'login.deactivate': 'inactive',
        'update_email': {
          target: '',
          actions: ['update_email'],
        },
      ...resend_confirmation_machine,
    }
  },
}, {
  guards: {
    valid: (context, event) => true,
  },
});