Pre Authenticate

SketchSystems.spec

Pre Authenticate
  oxygen logged in? -> Propose Access
  acad-web logged in? -> Logged In
  not logged in? -> Authenticate
Propose Access
  continue -> Logged In
  switch account -> Logging Out
Logging Out
  logged out -> Authenticate
    
Authenticate    
  Enter Credentials
    enter credentials -> Authenticating 
Authenticating
  error -> Authentication Error
  success -> Authorizing
Error
  restart -> Enter Credentials
  Authentication Error
  Authorization Error
Authorizing
  error -> Authorization Error
  success -> Logged In
Logged In
  logout -> Logging Out

SketchSystems_prototype.js

function renderForm(emit) {
  return $("div", { style: { border: "solid 1px red" } },
    $("p", "(In Popup)"),
    $("form", {
      onSubmit: (e) => {
        e.preventDefault();
        emit("enter credentials");
      }
    },
      $("p", $("input", { type: "text", placeholder: "username" })),
      $("p", $("input", { type: "password", placeholder: "password" })),
      $("p", $("input", { type: "submit", value: "Login" }))
    )
  );
}

function renderState(name, emit) {
  switch (name) {
    case "Pre Authenticate":
      return $("div", "Checking login...");
    case "Propose Access":
      return $("div",
        $("button", { onClick: () => emit("continue") }, "Continue as camwest@gmail.com"),
        $("button", { onClick: () => emit("switch account") }, "Switch account"));
    case "Logging Out":
      return $("div", "Logging out...");
    case "Enter Credentials":
      return renderForm(emit);
    case "Authenticating":
    case "Authorizing":
      return $("div", "Logging in...")
    case "Authorization Error":
    case "Authentication Error":
      return $("div",
        $("p", "Login Error: some error"),
        $("button", { onClick: () => emit("restart")}, "Try Again"))
  }
}

function render(model) {
  return $(
    "div",
    {
      style: {
        display: "flex",
        justifyContent: "center",
        height: "100%",
        widht: "100%"
      }
    },
    renderState(model.active_states[0].name, model.emit)
  );
}