@codesandbox/api
Version:
The CodeSandbox API
96 lines • 3.5 kB
JavaScript
import { jsx as _jsx } from "preact/jsx-runtime";
/**
* The approach to build UI introduced in this fail blew up in complexity with the dynamic nature of
*/
import { render } from "preact";
import { css } from "./loginModalUICss";
import { CliModal } from "./modals/CliModal";
import { LoginModal } from "./modals/LoginModal";
const createLoginModal = () => {
const styleElement = document.createElement("style");
styleElement.innerHTML = css;
const head = document.getElementsByTagName("head")[0];
head.appendChild(styleElement);
const wrapper = document.createElement("div");
wrapper.style.lineHeight = "1.15";
wrapper.style.fontFamily = "'Roboto', sans-serif";
wrapper.style.textRendering = "optimizeLegibility";
// eslint-disable-next-line
// @ts-ignore
wrapper.style.webkitTapHighlightColor = "transparent";
// eslint-disable-next-line
// @ts-ignore
wrapper.style.webkitTextSizeAdjust = "100%";
wrapper.style.fontSize = "16px !important";
wrapper.style.color = "#e6e6e6";
// eslint-disable-next-line
// @ts-ignore
wrapper.style.webkitFontSmoothing = "antialiased";
wrapper.style.boxSizing = "border-box";
wrapper.style.display = "flex";
wrapper.style.flexFlow = "row nowrap";
wrapper.style.webkitBoxPack = "center";
wrapper.style.justifyContent = "center";
wrapper.style.webkitBoxAlign = "center";
wrapper.style.alignItems = "center";
wrapper.style.position = "fixed";
wrapper.style.inset = "0px";
wrapper.style.zIndex = "9999";
wrapper.style.background = "rgba(0, 0, 0, 0.75)";
wrapper.className = "csb-api-body csb-api-lbA-dBW";
document.body.appendChild(wrapper);
const dispose = () => {
if (wrapper.parentNode) {
document.body.removeChild(wrapper);
}
};
return {
wrapper,
dispose,
onClose: (cb) => {
const overlay = wrapper.querySelector("#csb-api-overlay");
const listener = () => {
overlay.removeEventListener("click", listener);
dispose();
cb();
};
overlay.addEventListener("click", listener);
},
};
};
// eslint-disable-next-line
export const showCliLoginModal = () => {
// eslint-disable-next-line
return new Promise((resolve) => {
const { wrapper, dispose, onClose } = createLoginModal();
render(_jsx(CliModal, {}), wrapper);
const tokenListener = (event) => {
if (event.data && event.data.type === "CLI_TOKEN") {
window.removeEventListener("message", tokenListener);
resolve({
token: event.data.token,
dispose,
});
}
};
window.addEventListener("message", tokenListener);
onClose(() => resolve({ token: undefined, dispose }));
});
};
export const showLoginModal = (metaFeatures, getSSORedirectUrl) => {
return new Promise((resolve) => {
const { wrapper, dispose, onClose } = createLoginModal();
render(_jsx(LoginModal, { getSSORedirectUrl: getSSORedirectUrl, metaFeatures: metaFeatures, onLogin: (provider) => {
resolve({
dispose,
provider,
});
} }), wrapper);
onClose(() => {
resolve({
dispose,
});
});
});
};
//# sourceMappingURL=loginModalUI.js.map