# product: docs thing

SketchSystems.spec

# product: docs thing
App
  # as a user I want to know when I'm waiting for shit to happen
  Loading

  # as a visitor I want to login
  # capability: user handling
  Logged Out*
    # as a visitor I want to see some public content
    # capability: ???
    Public Content
      
    login -> Log In
    
    Log In
      Log In Type Email
        type email -> Log In Type Password
      Log In Type Password
        type password -> Log In Try
      
      # ???
      # enabled when: Email and Password are typed
      submitLogin -> Log In Try

      Log In Try
        login loading -> Loading
        login validation issue with email -> Log In Type Email
        login validation issue with password -> Log In Type Password
        login success -> Logged In

  # !!! is this defined in the right way?
  # as a user I want to logout
  # capability: user handling
  Logged In
    logout -> Logged Out
    view profile -> Profile
    
    # as a user I want to manage my profile
    # capability: user handling
    Profile
      # !!! maybe we can define data like this?
      # data: name, surname, email
      edit -> Edit Profile
      Edit Profile
        # ...
    
    # as a user I want to manage my docs
    # capability: docs
    Docs
      # filter: mine
      add -> Add Doc
      edit -> Edit Doc
      remove -> Remove Doc
      view -> View Doc
      all -> List Docs
      # as a user I want to see my docs
      # capability: docs
      List Docs

      # as a user I want to add a doc
      Add Doc
        # as a user I want to add a doc
        Fields
          fill -> Validate
        Validate
          valid -> Can Save
          invalid -> Fields
        Can Save
          save -> List Docs
          cancel -> List Docs
      # as a user I want to edit a doc
      Edit Doc
      Remove Doc
      View Doc

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