PWA Login Screen SERP

SketchSystems.spec

PWA Login Screen SERP
  Main Page*
    click login -> Login Modal
    
  Login Modal 
    click continue with facebook -> Facebook OAuth Flow
    focus input email textbox -> Active TextBox
    focus input password -> Active TextBox
    click login button -> Try Login Flow
    
        
  Facebook OAuth Flow
    successful login -> Main Page
    unsuccessful login -> FailureNotify
  
  Active TextBox
    canceled -> Login Modal
    typed -> Form Input
    
  Form Input
    typing? -> Text Entry
    
  Text Entry
    done? -> Validate

  Validate
    error? -> ValidationErrorNotify
    no error? -> Login Modal
    
   ValidationErrorNotify
    
  Loading
    server accepts data -> Main Page
    server rejects data -> FailureNotify
      
    
  Try Login Flow
    form validation successful -> Loading
    form validation failure -> FailureNotify

  FailureNotify
    

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}`);
}