Single Auth Source

SketchSystems.spec

Single Auth Source
  Credentials Form*
    # This is an Input Field, described in submachine below
    Email Field Active*
      enter text -> Password Field Active
    # This is an Input Field, described in submachine below
    Password Field Active
      enter text -> Credentials Filled
    Credentials Filled
      submit -> Valid?
    # This represents front-end validation before submitting to server
    Valid?
      yes -> Credentials Success?
      no -> Credentials Field Error
    Credentials Field Error
      enter text -> Credentials Filled
    # This represents the form being submitted to the server
    Credentials Success?
      true -> MFA Form
      4xx -> Credentials Error
      5xx -> Credentials Error  
    Credentials Error
      enter text -> Credentials Filled
      clear text -> Credentials Form
  
  MFA Form
    # This is an Input Field, described in submachine below
    Code Field Active*
      enter text -> MFA Filled
    MFA Filled
      submit -> MFA Valid?
    MFA Valid?
      yes -> MFA Success?
      no -> Code Field Active
    # This represents the form being submitted to the server
    MFA Success?
      true -> Logged In
      4xx -> MFA Error
      5xx -> MFA Error
    MFA Error
      enter text -> MFA Filled
  Logged In

  # This is a submachine that represents an individual input
  Input Field
    Empty*
      enter incorrect text -> Filled
      enter correct text -> Filled
    Filled
      clear text -> Empty
      blur -> Validated
    Validated
      Valid*
        enter incorrect text -> Invalid
      Invalid
        enter correct text -> Valid


      

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}