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

machine.js

const canSubmit = ctx => !!(ctx.username && ctx.password && ctx.companyId)


const commonActions = {
  CLICK_COMPANY_ID: "companyId",
  CLICK_USERNAME: "username",
  CLICK_PASSWORD: "password",
  CLICK_OUTSIDE: "nothingHasFocus",
  CLICK_LOGIN: [
    {
      target: "submitting",
      cond: canSubmit
    },
    {
      target: "nothingHasFocus"
    }
  ],
  RESET: {
    target: "#login.app.companyId",
    actions: [assign({ companyId: "", username: "", password: "" })]
  }
};

const loginMachine = Machine({
    id: "login",
    context: {
      companyId: "",
      username: "",
      password: ""
    },
    initial: 'appLoad',
    states: {
      appLoad: {
        entry: 'LOAD',
        on: {
          LOAD: 'app',
        },
      },
      app: {
        initial: "companyId",
        states: {
          nothingHasFocus: {
            on: commonActions
          },
          companyId: {
            on: {
              ...commonActions,
              TAB: "username",
              // SHIFT_TAB: "resetButton",
              ENTER: [
                {
                  target: "submitting",
                  cond: canSubmit
                },
                {
                  internal: true
                }
              ],
              TYPE_COMPANY_ID: {
                actions: [
                  assign({ companyId: "__test__value___" })
                ]
              }
            }
          },
          username: {
            on: {
              ...commonActions,
              SHIFT_TAB: "companyId",
              TAB: "password",
              ENTER: [
                {
                  target: "submitting",
                  cond: canSubmit
                },
                {
                  internal: true
                }
              ],
              TYPE_USERNAME: {
                actions: [assign({ username: "__test__value___" })]
              }
            }
          },
          password: {
            on: {
              ...commonActions,
              SHIFT_TAB: "username",
              TAB: [
                {
                  target: "loginButton",
                  cond: canSubmit
                },
                {
                  target: "resetButton"
                }
              ],
              ENTER: [
                {
                  target: "submitting",
                  cond: canSubmit
                },
                {
                  internal: true
                }
              ],
              TYPE_PASSWORD: {
                actions: [assign({ password: "__test__value___" })]
              }
            }
          },
          loginButton: {
            on: {
              ...commonActions,
              ENTER: [
                {
                  target: "submitting"
                }
              ],
              SHIFT_TAB: "password",
              TAB: "resetButton"
            }
          },
          resetButton: {
            on: {
              ...commonActions,
              // TAB: "companyId",
              ENTER: {
                actions: send("RESET")
              },
              SHIFT_TAB: [
                {
                  target: "loginButton",
                  cond: canSubmit
                },
                {
                  target: "password"
                }
              ]
            }
          },
          submitting: {
            on: {
              OK: "authenticated",
              ERROR: "criticalError",
              WRONG: "incorrectUsernameOrPassword",
              BAD: "badData",
              RESET: {
                target: "#login.appLoad",
                actions: [
                  assign({ companyId: "", username: "", password: "" })
                ]
              }
            }
          },
          authenticated: {
            on: {
              RESET: {
                target: "#login.appLoad",
                actions: [
                  assign({ companyId: "", username: "", password: "" })
                ]
              }
            }
          },
          criticalError: {
            on: {
              RESET: {
                target: "#login.appLoad",
                actions: [
                  assign({ companyId: "", username: "", password: "" })
                ]
              }
            }
          },
          incorrectUsernameOrPassword: {
            on: {
              RESET: {
                target: "#login.appLoad",
                actions: [
                  assign({ companyId: "", username: "", password: "" })
                ]
              }
            }
          },
          badData: {
            on: {
              RESET: {
                target: "#login.appLoad",
                actions: [
                  assign({ companyId: "", username: "", password: "" })
                ]
              }
            }
          }
        }
      }
    }
  });