Spotfire® Cobranding

The custom-login-app-example.js template

You can copy and edit this custom-login-app-example.js template to create a custom login page for the Spotfire Server web UI.

See Replacing the default Login page in the Spotfire Server web UI for more information.

import TSSCustomLoginApi from "/spotfire/js-api/custom-login-api.js";
const customLoginApi = new TSSCustomLoginApi();

customLoginApi.getServerManifest().then((serverInfo) => {
  // Do not show login page if user is already logged in.
  if (!serverInfo.showLoginPage) {
    // You can redirect to the URL set in the 'targetUrl' query parameter
  }

  // Remember
  const rememberGroup = document.getElementById("remember-group");
  if (rememberGroup && serverInfo && serverInfo.allowSaveInformation) {
    rememberGroup.classList.remove("hidden");
  }

  // Web Authentication Providers
  addWebAuthProviders(serverInfo.webAuthProviders);
});

function doLogin() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  const remember = document.getElementById("remember").checked;
  const eula = document.getElementById("eula").checked;

  // Optional payload that can be passed to the server. Key prefix must start
  // with sf_custom_login_, otherwise they will not be sent in the request.
  const optionalPayload = {
    sf_custom_login_extra_string: "My own custom login value",
    sf_custom_login_extra_boolean: true,
    invalid_key: "keys need to start with sf_custom_login_",
  };

  if (!username || !password) {
    showErrorMessage("Please specify both username and password!");
    return;
  }

  if (!eula) {
    showErrorMessage("You must accept the terms of service!");
    return;
  }

  removeErrorMessage();

  customLoginApi.login(
    username,
    password,
    remember,
    null,
    loginError,
    optionalPayload
  );
}

function loginError(response) {
  if (response.status === 401) {
    showErrorMessage("Wrong username or password.");
  } else if (response.status === 0) {
    // Getting a status of 0 when server could not be contacted.
    showErrorMessage("Server could not be contacted");
  } else {
    // If anything else then unauthorizd, display error message.
    showErrorMessage("Internal Server Error");
  }
}

function showErrorMessage(message) {
  if (!message) {
    return;
  }

  const errorElement = document.getElementById("error");
  if (!errorElement) {
    return;
  }

  errorElement.innerText = message;
  errorElement.classList.remove("hidden");
}

function removeErrorMessage() {
  const errorElement = document.getElementById("error");
  if (!errorElement) {
    return;
  }
  errorElement.classList.add("hidden");
}

function addWebAuthProviders(webAuthProviders) {
  if (!webAuthProviders || webAuthProviders.length === 0) {
    return;
  }

  const ul = document.getElementById("wap-list");
  webAuthProviders.forEach((wap) => {
    const li = document.createElement("li");
    const button = document.createElement("button");
    button.textContent = "Login with " + wap.label;
    button.setAttribute("data-provider", wap.providerName);
    button.onclick = function (event) {
      const provider = event.target.dataset.provider;
      if (provider) {
        customLoginApi.redirectToWebAuthProvider(provider);
      }
    };

    li.appendChild(button);
    ul.appendChild(li);
  });

  // Show
  document.getElementById("wap-container").classList.remove("hidden");
}

document.getElementById("login-button").addEventListener("click", doLogin);

window.doLogin = doLogin;