Sign In Screen

SketchSystems.spec

Sign In Screen

  Registration Form*
    Submit valid user info -> Dashboard
    Submit invalid user info -> Registration Error Dialog 
    Click Sign In -> Sign In Form   

  Sign In Form
    Submit valid user & pass -> Dashboard
    Submit invalid user & pass -> Sign In Error Dialog    
    Click Registration -> Registration Form
    Click Forgot Password -> Forgot Password Form

  Forgot Password Form
    Submit valid email -> Forgot Password Success Dialog
    Submit invalid email -> Forgot Password Error Dialog

  Success    
    Forgot Password Success Dialog
      Click OK -> Sign In Form
    
  Error
    Registration Error Dialog 
      Click OK -> Registration Form     

    Sign In Error Dialog 
      Click OK -> Sign In Form

    Forgot Password Error Dialog 
      Click OK -> Forgot Password Form
      
      
Dashboard
  Click Logout -> Sign In Screen
  Grocery Lists
    Click Create List -> Empty List
    Click Remove List -> Removed List
    Click Edit List -> Filled List    
  
  List
    Empty List
      Click on Back -> Grocery Lists          
      Add Item -> Added to Aisle group

    Removed List
      Alert Dialog
        Click Cancel -> Grocery Lists
        Click Confirm -> Grocery Lists        

    Filled List
      Click on Back -> Grocery Lists        
      Add Item -> Added to Aisle group
      Check Item -> Moved to Done group
      Uncheck Item -> Moved to Aisle group
      Remove Item -> Removed from List
      
      Item
        Idle
        Added to Aisle group
        Moved to Aisle group
        Moved to Done group
        Removed from List
          Remove Banner
            Click Dismiss -> Idle
            Click Undo for Non-Checked Item -> Moved to Aisle group          
            Click Undo for Checked Item -> Moved to Done group

SketchSystems_prototype.js

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