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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
const rxEnableStates = {
  initial: "false",
  states: {
    true: {},
    false: {},
  },
};

const txEnableStates = {
  initial: "false",
  states: {
    true: {},
    false: {},
  },
};
  
const verifyModeStates = {
  initial: "disabled",
  states: {
    disabled: {},
    enabled: {
      initial: "disable",
      states: {
        disable: {},
        withBitErrorCheck: {},
        noBitErrorCheck: {},
      },
    },
  },
};
  
const simTypeStates = {
  initial: 'disabled',
  states: {
    disabled: {},
    enabled: {
      initial: 'generated',
      states: {
        generated: {},
        fromFile: {},
        satellite: {},
      }
    }
  },
};
  
const writeStreamStates = {
  initial: "valid",
  states: {
    valid: {},
    invalid: {
      initial: "empty",
      states: {
        empty: {},
        badFormat: {},
        noAccount: {}
      },
      // onEntry: "focusEmailInput"
    }
  }
};

// const passwordStates = {
//   initial: "noError",
//   states: {
//     noError: {},
//     error: {
//       initial: "empty",
//       states: {
//         empty: {},
//         tooShort: {},
//         incorrect: {}
//       },
//       onEntry: "focusPasswordInput"
//     }
//   }
// };

// const authServiceStates = {
//   initial: "noError",
//   states: {
//     noError: {},
//     error: {
//       initial: "communication",
//       states: {
//         communication: {
//           on: {
//             SUBMIT: "#signInForm.waitingResponse"
//           }
//         },
//         internal: {}
//       }
//     }
//   }
// };

const machineConfig = Machine({
  id: "signInForm",
  context: {
    writeStream: '',
    // password: "",
    rxEnable: false,
    txEnable: false,
    verifyMode: undefined,
    simType: undefined,
  },
  initial: "ready",
  states: {
    ready: {
      type: "parallel",
      on: {
        ENABLE_RECEPTION: {
          target: 'ready.rxEnable.true',
          actions: 'enableReception',
        },
        DISABLE_RECEPTION: {
          target: 'ready.rxEnable.false',
          actions: 'disableReception',
        },
        ENABLE_TRANSMISSION: {
          target: [
            'ready.txEnable.true',
            'ready.simType.enabled.generated',
          ],
          actions: [
            'enableTransmission',
            'setSimTypeGenerated',
          ],
        },
        DISABLE_TRANSMISSION: {
          target: 'ready.txEnable.false',
          actions: [
            'disableTransmission',
            'setSimTypeUndefined',
          ],
        },
        SIM_TYPE_GENERATED: {
          target: 'ready.simType.enabled.generated',
          cond: 'isTxEnabled',
          actions: 'setSimTypeGenerated',
        },
        SIM_TYPE_FROM_FILE: {
          target: 'ready.simType.enabled.fromFile',
          cond: 'isTxEnabled',
          actions: 'setSimTypeFromFile',
        },
        SIM_TYPE_SATELLITE: {
          target: 'ready.simType.enabled.satellite',
          cond: 'isTxEnabled',
          actions: 'setSimTypeSatellite',
        },
        DISABLE_VERIFY_MODE: {
          target: 'ready.verifyMode.enabled.disable',
          cond: 'isRxEnabledAndSimTypeGenerated',
          actions: 'disableVerifyMode',
        },
        ENABLE_VERIFY_MODE_WITH_CHECK: {
          target: 'ready.verifyMode.enabled.withBitErrorCheck',
          cond: 'isRxEnabledAndSimTypeGenerated',
          actions: 'enableVerifyModeWithCheck',
        },
        ENABLE_VERIFY_MODE_WITHOUT_CHECK: {
          target: 'ready.verifyMode.enabled.noBitErrorCheck',
          cond: 'isRxEnabledAndSimTypeGenerated',
          actions: 'enableVerifyModeWithoutCheck',
        },
        // INPUT_EMAIL: {
        //   actions: "cacheEmail",
        //   target: "ready.email.valid"
        // },
        // INPUT_PASSWORD: {
        //   actions: "cachePassword",
        //   target: "ready.password.noError"
        // },
        SUBMIT: [
          // {
          //   cond: "isNoEmail",
          //   target: "ready.email.invalid.empty"
          // },
          // {
          //   cond: "isEmailBadFormat",
          //   target: "ready.email.invalid.badFormat"
          // },
          // {
          //   cond: "isNoPassword",
          //   target: "ready.password.error.empty"
          // },
          // {
          //   cond: "isPasswordShort",
          //   target: "ready.password.error.tooShort"
          // },
          {
            target: "waitingResponse"
          }
        ]
      },
      states: {
        writeStream: {...writeStreamStates},
        // password: {...passwordStates},
        // authService: {...authServiceStates},
        rxEnable: {...rxEnableStates},
        txEnable: {...txEnableStates},
        simType: {...simTypeStates},
        verifyMode: {...verifyModeStates},
      }
    },
    waitingResponse: {
      on: {
        CANCEL: "ready"
      },
      invoke: {
        src: "requestSignIn",
        onDone: {
          actions: "onSuccess"
        },
        onError: [
          // {
          //   cond: "isNoAccount",
          //   target: "ready.email.invalid.noAccount"
          // },
          // {
          //   cond: "isIncorrectPassword",
          //   target: "ready.password.error.incorrect"
          // },
          // {
          //   cond: "isNoResponse",
          //   target: "ready.authService.error.communication"
          // },
          // {
          //   cond: "isInternalServerErr",
          //   target: "ready.authService.error.internal"
          // }
        ]
      }
    }
  }
}, {
  guards: {
    isRxEnabled: (context, event) => context.rxEnable,
    isTxEnabled: (context, event) => context.txEnable,
    isSimTypeGenerated: (context, event) => context.simType === 0,
    isRxEnabledAndSimTypeGenerated: (context, event) => context.rxEnable && context.simType === 0,
    isNoEmail: (context, event) => context.email.length === 0,
    isEmailBadFormat: (context, event) =>
      context.email.length > 0 && !isEmail(context.email),
    isNoPassword: (context, event) => context.password.length === 0,
    isPasswordShort: (context, event) => context.password.length < 5,
    // isNoAccount: (context, evt) => evt.data.code === 1,
    // isIncorrectPassword: (context, evt) => evt.data.code === 2,
    // isNoResponse: (context, evt) => evt.data.code === 3,
    // isInternalServerErr: (context, evt) => evt.data.code === 4
  },
  // services: {
  //   requestSignIn: (context, event) => signIn(context.email, context.password)
  // },
  actions: {
  //   focusEmailInput: handleEmailInputFocus,
  //   focusPasswordInput: handlePasswordInputFocus,
  //   focusSubmitBtn: handleSubmitButtonFocus,
    enableVerifyModeWithCheck: assign((context, event) => ({ verifyMode: 1 })),
    enableVerifyModeWithoutCheck: assign((context, event) => ({ verifyMode: 2 })),
    disableVerifyMode: assign((context, event) => ({
      verifyMode: 0,
    })),
    enableReception: assign((context, event) => ({
      rxEnable: true,
    })),
    disableReception: assign((context, event) => ({
      rxEnable: false,
    })),
    enableTransmission: assign((context, event) => ({
      txEnable: true,
    })),
    disableTransmission: assign((context, event) => ({
      txEnable: false,
    })),
    cacheEmail: assign((context, event) => ({
      email: event.email
    })),
    cachePassword: assign((context, event) => ({
      password: event.password
    })),
    setSimTypeUndefined: assign((context, event) => ({
      simType: undefined,
    })),
    setSimTypeGenerated: assign((context, event) => ({
      simType: 0,
    })),
    setSimTypeFromFile: assign((context, event) => ({
      simType: 1,
    })),
    setSimTypeSatellite: assign((context, event) => ({
      simType: 2,
    })),
    onSuccess: () => {
      alert("signed in");
    }
  }
});