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

machine.js

// login machine actions --------------------------------------------------- //

const submit_login = async (context) => {
  if (!context.email) {
    show_message('LOGIN_NO_EMAIL_ERROR', 'error');
  }

  if (!context.password) {
    show_message('LOGIN_NO_PASSWORD_ERROR', 'error');
  }

  let data = { email: context.email.value, password: context.password.value };
  return await APIClient.submit_login(data);
};

const open_forgotten_password_dialog = () => {};
const close_forgotten_password_dialog = () => {};
const submit_forgotten_password = async data => data;

const open_resend_confirmation_dialog = () => {};
const close_resend_confirmation_dialog = () => {};
const submit_resend_confirmation = async data => data;

const show_error = (context, event) => {
  show_message(event.data, 'error');
};

const show_info = (context, event) => {
  show_message(event.data, 'info');
};

const show_forgotten_password_success_message = () => {
  show_message('Success', 'success')
};

const show_resend_confirmation_success_message = () => {
  show_message('Success', 'success')
};


const not_empty = () => true;

const update_email = assign((context, event) => {
  return { email: event.data };
});

const update_password = assign((context, event) => {
  return { password: event.data };
});

const update_user = assign((context, event) => {
  return { user: event.data };
});

const update_error = assign((context, event) => {
  return { error: event.data };
});

const update_valid = assign((context, event) => {
  return { valid: event.data };
});


// login machine parts ----------------------------------------------------- //

const resend_confirmation_machine = {
  id: 'resendconfirmation',
  initial: 'inactive',
  states: {
    inactive: {
      always: '#loginform.active',
    },
    active: {
      entry: ['open_resend_confirmation_dialog',],
      on: {
        'email.change': {
          actions: ['update_email',]
        },
        'resendconfirmation.submit': {
          target: 'submit',
          cond: 'valid',
        },
        'resendconfirmation.close': {
          target: 'inactive',
          actions: ['close_resend_confirmation_dialog',],
        },
      },
    },
    submit: {
      invoke: {
        src: 'submit_resend_confirmation',
        onDone: {
          target: 'success',
          actions: [
            'show_resend_confirmation_success_message',
            'close_forgotten_password_dialog'
          ],
        },
        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: {
      entry: ['open_forgotten_password_dialog',],
      on: {
        'email.change': {
          actions: ['update_email',]
        },
        'forgottenpassword.submit': {
          target: 'submit',
          cond: 'valid',
        },
        'forgottenpassword.close': {
          target: 'inactive',
          actions: ['close_forgotten_password_dialog'],
        },
      },
    },
    submit: {
      invoke: {
        src: 'submit_forgotten_password',
        onDone: {
          target: 'success',
          actions: [
            'show_forgotten_password_success_message',
            'close_forgotten_password_dialog'
          ],
        },
        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.submit': {
          target: 'submit',
          cond: 'valid',
        },
        'loginform.deactivate': 'inactive',
        'email.change': {
          actions: ['update_email',]
        },
        'password.change': {
          actions: ['update_password',]
        },
        'submit_login': {
          target: 'submit',
          cond: 'valid',
        }
      },
    },
    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: {
      always: {
        target: 'active',
        actions: ['show_error'],
      },
    },
  },
};

const login_machine = {
  id: 'login',
  initial: 'active',
  context: {
    email: null,
    password: null,
    error: null,
  },
  states: {
    inactive: {
      on: {
        'login.activate': 'active',
      },
    },
    active: {
      always: 'loginform',
      on: {
        'login.loginform': 'loginform.active',
        'login.resendconfirmation': 'resendconfirmation.active',
        'login.forgottenpassword': 'forgottenpassword.active',
        'login.deactivate': 'inactive',
      },
    },
    loginform: {
      on: {
        'login.resendconfirmation': 'resendconfirmation.active',
        'login.forgottenpassword': 'forgottenpassword.active',
        'login.deactivate': 'inactive',
      },
      ...login_form_machine,
    },
    forgottenpassword: {
      on: {
        'login.deactivate': 'inactive',
      },
      ...forgotten_password_machine,
    },
    resendconfirmation: {
      'login.deactivate': 'inactive',
      ...resend_confirmation_machine,
    }
  },
};

const login_context = {
  email: null,
  password: null,
  error: null,
};

const login_config = {
  actions: {
    update_email,
    update_password,
    update_user,
    update_error,
    show_error,
    show_info,
    open_forgotten_password_dialog,
    close_forgotten_password_dialog,
    show_forgotten_password_success_message,
    open_resend_confirmation_dialog,
    close_resend_confirmation_dialog,
    show_resend_confirmation_success_message,
  },
  guards: {
    valid: not_empty,
  },
  services: {
    submit_login,
    submit_forgotten_password,
    submit_resend_confirmation,
  },
};

login_machine.context = login_context;

machine = Machine(login_machine, login_config)