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

machine.js

new Machine(
  {
    id: `signIn`,
    initial: `ready`,
    context: {
      email: ``,
      password: ``
    },
    states: {
      ready: {
        type: `parallel`,
        on: {
          INPUT_EMAIL: {
            target: `ready.email.noError`,
            actions: `setEmail`
          },
          INPUT_PASSWORD: {
            target: `ready.email.noError`,
            actions: `setPassword`
          },
          SUBMIT: [
            {
              cond: `isEmailEmpty`,
              target: `ready.email.error.empty`
            },
            {
              cond: `isEmailInvalid`,
              target: `ready.email.error.invalid`
            },
            {
              cond: `isPasswordEmpty`,
              target: `ready.password.error.empty`
            },
            {
              target: `loading`
            }
          ]
        },
        states: {
          email: {
            initial: `noError`,
            states: {
              noError: {},
              error: {
                entry: `focusEmailInput`,
                initial: `empty`,
                states: {
                  empty: {
                    meta: {
                      message: `Requerido`
                    }
                  },
                  invalid: {
                    meta: {
                      message: `Debe ser un correo electrónico válido`
                    }
                  },
                  noAccount: {
                    meta: {
                      message: `Estas credenciales no coinciden con nuestros registros`
                    }
                  }
                }
              }
            }
          },
          password: {
            initial: `noError`,
            states: {
              noError: {},
              error: {
                entry: `focusPasswordInput`,
                initial: `empty`,
                states: {
                  empty: {
                    meta: {
                      message: `Requerido`
                    }
                  }
                }
              }
            }
          }
        }
      },
      loading: {
        invoke: {
          src: `signIn`,
          onDone: {
            actions: `onDone`
          },
          onError: [
            {
              cond: `noAccount`,
              target: `ready.email.error.noAccount`
            }
          ]
        }
      }
    }
  },
  {
    actions: {
      setEmail: assign({
        email: (_, event) => event.email
      }),
      setPassword: assign({
        password: (_, event) => event.password
      })
    },
    guards: {
      isEmailEmpty: ({email}) =>  true,
      isEmailInvalid: ({email}) => true,
      isPasswordEmpty: ({password}) => true,

      noAccount: (_, event) => true
    }
  }
)