Skip to content

Instantly share code, notes, and snippets.

@tchayen
Last active Jan 7, 2020
Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
id: "authentication",
initial: "signIn",
context: {
name: "",
email: "",
password: "",
errors: {}
},
states: {
signIn: {
initial: "editing",
states: {
editing: {
on: {
EMAIL_CHANGE: {
actions: assign({ email: (_, event) => event.value })
},
PASSWORD_CHANGE: {
actions: assign({ password: (_, event) => event.value })
},
SUBMIT: "validating",
FORGOT_PASSWORD: {
target: "#authentication.forgotPassword",
actions: assign({
password: (_, __) => "",
errors: (_, __) => ({})
})
},
SIGN_UP: {
target: "#authentication.signUp",
actions: assign({
password: (_, __) => "",
errors: (_, __) => ({})
})
}
}
},
validating: {
invoke: {
src: 'signInValidation',
onDone: "waiting",
onError: {
target: "editing",
actions: assign({
errors: (_, event) => event.data,
password: (_, __) => ""
})
}
}
},
waiting: {
invoke: {
src: 'signIn',
onDone: "#authentication.app",
onError: {
target: "editing",
actions: assign({
errors: (_, event) => event.data,
password: (_, __) => ""
})
}
}
}
}
},
forgotPassword: {
initial: "editing",
states: {
editing: {
on: {
EMAIL_CHANGE: {
actions: assign({ email: (_, event) => event.value })
},
BACK: {
target: "#authentication.signIn",
actions: assign({ errors: (_, __) => ({}) })
},
SUBMIT: "validating"
}
},
validating: {
invoke: {
src: 'forgotPasswordValidation',
onDone: "waiting",
onError: {
target: "editing",
actions: assign({ errors: (_, event) => event.data })
}
}
},
waiting: {
invoke: {
src: 'forgotPassword',
onDone: "#authentication.success",
onError: {
target: "editing",
actions: assign({ errors: (_, event) => event.data })
}
}
}
}
},
signUp: {
initial: "editing",
states: {
editing: {
on: {
EMAIL_CHANGE: {
actions: assign({ email: (_, event) => event.value })
},
PASSWORD_CHANGE: {
actions: assign({ password: (_, event) => event.value })
},
NAME_CHANGE: {
actions: assign({ name: (_, event) => event.value })
},
BACK: {
target: "#authentication.signIn",
actions: assign({
password: (_, __) => "",
errors: (_, __) => ({})
})
},
SUBMIT: "validating"
}
},
validating: {
invoke: {
src: 'signUpValidation',
onDone: "waiting",
onError: {
target: "editing",
actions: assign({ errors: (_, event) => event.data })
}
}
},
waiting: {
invoke: {
src: 'signUp',
onDone: "#authentication.success",
onError: {
target: "editing",
actions: assign({
errors: (_, event) => event.data,
password: (_, __) => ""
})
}
}
}
}
},
success: { on: { BACK: "signIn" } },
app: { type: "final" }
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment