Single Auth Source

SketchSystems.spec

Single Auth Source
  Credentials Form*
    # This is an Input Field, described in submachine below
    Email Field Active
      enter email -> Password Field Active
    # This is an Input Field, described in submachine below
    Password Field Active
      enter password -> Credentials Filled
    Credentials Filled
      submit -> Valid?
    Valid?
      yes -> Credentials Success?
      no -> Credentials Field Error
    Credentials Field Error
      enter email -> Credentials Filled
      enter password -> Credentials Filled
    Credentials Success?
      true -> MFA Form
      credentials error -> Credentials Error
      server error -> Credentials Server Error  
    Credentials Server Error
      enter text -> Credentials Filled
      clear text -> Credentials Form
    Credentials Error
      enter text -> Credentials Filled
      clear text -> Credentials Form
  MFA Form
    Code Field Active
      enter text -> MFA Filled
      clear text -> MFA Form
    MFA Filled
      submit -> MFA Valid?
    MFA Valid?
      yes -> MFA Success?
      code error -> MFA Code Error
      server error -> MFA Server Error
    MFA Success?
      true -> Logged In
      code error -> MFA Code Error
      server error -> MFA Server Error
    MFA Code Error
      enter text -> MFA Filled
      clear text -> MFA Form
    MFA Server Error
      enter text -> MFA Filled
      clear text -> MFA Form
  Logged In
  ## The below represents a submachine for individual input fields
  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}`);
}