Created
May 8, 2020 19:49
-
-
Save mergebandit/274b5d8a181ba856f640c35b89320c6e to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Available variables: | |
| // - Machine | |
| // - interpret | |
| // - assign | |
| // - send | |
| // - sendParent | |
| // - spawn | |
| // - raise | |
| // - actions | |
| // - XState (all XState exports) | |
| const MfaType = { | |
| email: 'EMAIL', | |
| sms: 'SMS' | |
| } | |
| const service = { | |
| addMfaOption: opt => Promise.resolve(opt), | |
| sendCode: opt => Promise.resolve(opt), | |
| setAlwaysChallenge: opt => Promise.resolve(opt), | |
| verifyCode: (opt1, opt2) => Promise.resolve(opt1, opt2) | |
| } | |
| const fetchMachine = Machine({ | |
| id: 'enrollment', | |
| context: { | |
| code: '', | |
| frequency: false, | |
| retries: 0, | |
| showErrorMessage: false | |
| }, | |
| type: 'parallel', | |
| states: { | |
| ui: { | |
| initial: 'splash', | |
| states: { | |
| splash: { | |
| on: { | |
| NEXT: 'selectMfa.list' | |
| } | |
| }, | |
| selectMfa: { | |
| id: 'selectMfa', | |
| initial: 'list', | |
| on: { | |
| PREV: '#enrollment.ui.splash' | |
| }, | |
| states: { | |
| addEmail: { | |
| on: { | |
| SUBMIT: { | |
| target: '#data.addMfa.submit' | |
| }, | |
| PREV: 'list' | |
| } | |
| }, | |
| addPhone: { | |
| on: { | |
| SUBMIT: { | |
| target: '#data.addMfa.submit' | |
| }, | |
| PREV: 'list' | |
| } | |
| }, | |
| hist: { | |
| type: 'history' | |
| }, | |
| list: { | |
| on: { | |
| ADD_EMAIL: { | |
| actions: 'clearMfa', | |
| target: 'addEmail' | |
| }, | |
| ADD_PHONE: { | |
| actions: 'clearMfa', | |
| target: 'addPhone' | |
| }, | |
| NEXT: { | |
| cond: 'userSelectedMfaOption', | |
| target: '#verify.existing' | |
| }, | |
| UPDATE: { | |
| actions: 'selectMfa' | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| verify: { | |
| id: 'verify', | |
| on: { | |
| PREV: '#selectMfa.hist', | |
| RESEND: { | |
| target: '#data.sendCode.submit' | |
| }, | |
| SUBMIT: { | |
| target: '#data.verifyCode.submit' | |
| }, | |
| UPDATE: { | |
| actions: 'setCode' | |
| } | |
| }, | |
| states: { | |
| existing: {}, | |
| hist: { | |
| type: 'history', | |
| history: 'deep' | |
| }, | |
| new: { | |
| on: { | |
| '': [ | |
| { target: 'email', cond: 'isEmail' }, | |
| { target: 'phone', cond: 'isPhone' } | |
| ] | |
| } | |
| }, | |
| email: {}, | |
| phone: {} | |
| } | |
| }, | |
| frequency: { | |
| id: 'frequency', | |
| on: { | |
| SUBMIT: { | |
| target: '#data.setFrequency.submit' | |
| }, | |
| UPDATE: { | |
| actions: 'setFrequency' | |
| } | |
| } | |
| }, | |
| complete: { | |
| id: 'complete', | |
| on: { | |
| COMPLETE: 'final' | |
| } | |
| }, | |
| final: { | |
| type: 'final' | |
| } | |
| } | |
| }, | |
| data: { | |
| id: 'data', | |
| type: 'parallel', | |
| states: { | |
| addMfa: { | |
| initial: 'idle', | |
| states: { | |
| idle: {}, | |
| submit: { | |
| invoke: { | |
| id: 'addingMfa', | |
| src: 'addMfa', | |
| onError: { | |
| actions: 'setError', | |
| target: 'idle' | |
| }, | |
| onDone: { | |
| target: ['idle', '#verify.new'] | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| sendCode: { | |
| initial: 'idle', | |
| states: { | |
| idle: {}, | |
| submit: { | |
| invoke: { | |
| id: 'sendingCode', | |
| src: 'sendCode', | |
| onError: { | |
| actions: 'setError', | |
| target: ['#verify.hist', 'idle'] | |
| }, | |
| onDone: { | |
| target: ['#frequency', 'idle'] | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| setFrequency: { | |
| initial: 'idle', | |
| states: { | |
| idle: {}, | |
| submit: { | |
| invoke: { | |
| id: 'settingFrequency', | |
| src: 'setFrequency', | |
| onError: { | |
| actions: 'setError', | |
| target: 'idle' | |
| }, | |
| onDone: { | |
| target: ['#complete', 'idle'] | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| verifyCode: { | |
| initial: 'idle', | |
| states: { | |
| idle: {}, | |
| submit: { | |
| invoke: { | |
| id: 'verifyingCode', | |
| src: 'verifyCode', | |
| onError: { | |
| actions: ['setError', 'setRetries'], | |
| target: ['#verify.hist', 'idle'] | |
| }, | |
| onDone: { | |
| target: ['#frequency', 'idle'] | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }, {actions: { | |
| clearMfa: assign({ | |
| selectedMfaOption: undefined | |
| }), | |
| goBack: () => history.back(), | |
| selectMfa: assign({ | |
| selectedMfaOption: (_, { data }) => data | |
| }), | |
| setCode: assign({ | |
| code: (_, { data }) => data | |
| }), | |
| setError: assign({ | |
| showErrorMessage: true | |
| }), | |
| setFrequency: assign({ | |
| frequency: (_, { data }) => data | |
| }) | |
| }, | |
| guards: { | |
| isEmail: ({ selectedMfaOption }) => | |
| selectedMfaOption?.mfaType === MfaType.Email, | |
| isPhone: ({ selectedMfaOption }) => | |
| selectedMfaOption?.mfaType === MfaType.Sms, | |
| userSelectedMfaOption: ({ selectedMfaOption }) => | |
| Boolean(selectedMfaOption?.mfaType) | |
| }, | |
| services: { | |
| addMfa: ({ selectedMfaOption }) => service.addMfaOption(selectedMfaOption), | |
| sendCode: ({ selectedMfaOption }) => service.sendCode(selectedMfaOption), | |
| setFrequency: ({ frequency }) => service.setAlwaysChallenge(frequency), | |
| verifyCode: ({ code, selectedMfaOption }) => | |
| service.verifyCode(code, selectedMfaOption?.mfaType || '') | |
| } | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment