Skip to content

Instantly share code, notes, and snippets.

@kaze
Last active September 14, 2020 04:51
Show Gist options
  • Save kaze/aac65917a29ad703ddc2731e9181ff1f to your computer and use it in GitHub Desktop.
Save kaze/aac65917a29ad703ddc2731e9181ff1f to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
// login machine actions --------------------------------------------------- //
const submit_login = async (context) => {
if (!context.email) {
show_message('LOGIN_NO_EMAIL_ERROR', 'error');
}
if (!context.password) {
show_message('LOGIN_NO_PASSWORD_ERROR', 'error');
}
let data = { email: context.email.value, password: context.password.value };
return await APIClient.submit_login(data);
};
const open_forgotten_password_dialog = () => {};
const close_forgotten_password_dialog = () => {};
const submit_forgotten_password = async data => data;
const open_resend_confirmation_dialog = () => {};
const close_resend_confirmation_dialog = () => {};
const submit_resend_confirmation = async data => data;
const show_error = (context, event) => {
show_message(event.data, 'error');
};
const show_info = (context, event) => {
show_message(event.data, 'info');
};
const show_forgotten_password_success_message = () => {
show_message('Success', 'success')
};
const show_resend_confirmation_success_message = () => {
show_message('Success', 'success')
};
const not_empty = () => true;
const update_email = assign((context, event) => {
return { email: event.data };
});
const update_password = assign((context, event) => {
return { password: event.data };
});
const update_user = assign((context, event) => {
return { user: event.data };
});
const update_error = assign((context, event) => {
return { error: event.data };
});
const update_valid = assign((context, event) => {
return { valid: event.data };
});
// login machine parts ----------------------------------------------------- //
const resend_confirmation_machine = {
id: 'resendconfirmation',
initial: 'inactive',
states: {
inactive: {
always: '#loginform.active',
},
active: {
entry: ['open_resend_confirmation_dialog',],
on: {
'email.change': {
actions: ['update_email',]
},
'resendconfirmation.submit': {
target: 'submit',
cond: 'valid',
},
'resendconfirmation.close': {
target: 'inactive',
actions: ['close_resend_confirmation_dialog',],
},
},
},
submit: {
invoke: {
src: 'submit_resend_confirmation',
onDone: {
target: 'success',
actions: [
'show_resend_confirmation_success_message',
'close_forgotten_password_dialog'
],
},
onError: {
target: 'error',
actions: ['update_error'],
},
},
},
success: {
type: 'final',
always: 'inactive',
},
error: {
always: {
target: 'active',
actions: ['show_error'],
},
},
},
};
const forgotten_password_machine = {
id: 'forgottenpassword',
initial: 'inactive',
states: {
inactive: {
always: '#loginform.active',
},
active: {
entry: ['open_forgotten_password_dialog',],
on: {
'email.change': {
actions: ['update_email',]
},
'forgottenpassword.submit': {
target: 'submit',
cond: 'valid',
},
'forgottenpassword.close': {
target: 'inactive',
actions: ['close_forgotten_password_dialog'],
},
},
},
submit: {
invoke: {
src: 'submit_forgotten_password',
onDone: {
target: 'success',
actions: [
'show_forgotten_password_success_message',
'close_forgotten_password_dialog'
],
},
onError: {
target: 'error',
actions: ['update_error'],
},
},
},
success: {
type: 'final',
always: 'inactive',
},
error: {
always: {
target: 'active',
actions: ['show_error'],
},
},
},
};
const login_form_machine = {
id: 'loginform',
initial: 'active',
states: {
inactive: {
'loginform.activate': 'active',
},
active: {
on: {
'loginform.submit': {
target: 'submit',
cond: 'valid',
},
'loginform.deactivate': 'inactive',
'email.change': {
actions: ['update_email',]
},
'password.change': {
actions: ['update_password',]
},
'submit_login': {
target: 'submit',
cond: 'valid',
}
},
},
submit: {
invoke: {
src: 'submit_login',
onDone: {
target: 'success',
actions: ['update_user'],
},
onError: {
target: 'error',
actions: ['update_error'],
},
},
},
success: {
type: 'final',
data: (context) => context.user,
},
error: {
always: {
target: 'active',
actions: ['show_error'],
},
},
},
};
const login_machine = {
id: 'login',
initial: 'active',
context: {
email: null,
password: null,
error: null,
},
states: {
inactive: {
on: {
'login.activate': 'active',
},
},
active: {
always: 'loginform',
on: {
'login.loginform': 'loginform.active',
'login.resendconfirmation': 'resendconfirmation.active',
'login.forgottenpassword': 'forgottenpassword.active',
'login.deactivate': 'inactive',
},
},
loginform: {
on: {
'login.resendconfirmation': 'resendconfirmation.active',
'login.forgottenpassword': 'forgottenpassword.active',
'login.deactivate': 'inactive',
},
...login_form_machine,
},
forgottenpassword: {
on: {
'login.deactivate': 'inactive',
},
...forgotten_password_machine,
},
resendconfirmation: {
'login.deactivate': 'inactive',
...resend_confirmation_machine,
}
},
};
const login_context = {
email: null,
password: null,
error: null,
};
const login_config = {
actions: {
update_email,
update_password,
update_user,
update_error,
show_error,
show_info,
open_forgotten_password_dialog,
close_forgotten_password_dialog,
show_forgotten_password_success_message,
open_resend_confirmation_dialog,
close_resend_confirmation_dialog,
show_resend_confirmation_success_message,
},
guards: {
valid: not_empty,
},
services: {
submit_login,
submit_forgotten_password,
submit_resend_confirmation,
},
};
login_machine.context = login_context;
machine = Machine(login_machine, login_config)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment