@openpass/openpass-js-sdk
Version:
OpenPass SSO JavaScript SDK
135 lines • 7.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SIGN_IN_BUTTON_STYLESHEET_ID = void 0;
const html_1 = require("./embedded-assets/html");
const styles_1 = require("./embedded-assets/styles");
const errors_1 = require("./error/errors");
const stylesheets_1 = require("./utils/stylesheets");
exports.SIGN_IN_BUTTON_STYLESHEET_ID = "openpass-sign-in-button-stylesheet";
/**
* Handles rendering and functionality of the automatically rendered sign in button.
*/
class SignInButton {
/**
* Initializes a new instance of the SignInButton class.
* @param redirectAuth - The redirect authentication object.
* @param popupAuth - The popup authentication object.
* @param apiClient - The OpenPass API Client client object.
*/
constructor(redirectAuth, popupAuth, apiClient) {
this.popupAuth = popupAuth;
this.redirectAuth = redirectAuth;
this.apiClient = apiClient;
}
/**
* Renders the sign in button.
*/
renderSignInButton(options) {
if (!options.parentContainerElementId) {
throw new errors_1.SdkError("No parent container element id provided for OpenPass sign-in button");
}
if (options.authenticationMode && !(options.authenticationMode === "redirect" || options.authenticationMode === "popup")) {
throw new errors_1.SdkError("Invalid authentication mode provided for OpenPass sign-in button, please choose either 'redirect' or 'popup'");
}
if (options.authenticationMode == "redirect" && !options.redirectUrl) {
throw new errors_1.SdkError("No redirect url provided for OpenPass sign-in button");
}
if (options.authenticationMode == "popup" && !options.popupSuccessCallback) {
throw new errors_1.SdkError("No popup success callback provided for OpenPass sign-in button");
}
if (options.shape && !(options.shape === "standard" || options.shape === "icon")) {
throw new errors_1.SdkError("Invalid shape provided for OpenPass sign-in button, please choose either 'standard' or 'icon'");
}
if (options.shapeVariant &&
!(options.shapeVariant === "pill" ||
options.shapeVariant === "rectangle" ||
options.shapeVariant === "circle" ||
options.shapeVariant === "square")) {
throw new errors_1.SdkError("Invalid shape variant provided for OpenPass sign-in button, please choose either 'pill', 'rectangle', 'circle' or 'square'");
}
if (options.shape == "standard" &&
!(options.shapeVariant === undefined || options.shapeVariant === "pill" || options.shapeVariant === "rectangle")) {
throw new errors_1.SdkError("Invalid shape variant provided for OpenPass sign-in button, please choose either 'pill' or 'rectangle'");
}
if (options.shape == "icon" &&
!(options.shapeVariant === undefined || options.shapeVariant === "circle" || options.shapeVariant === "square")) {
throw new errors_1.SdkError("Invalid shape variant provided for OpenPass sign-in button, please choose either 'circle' or 'square'");
}
if (options.additionalWidth && options.additionalWidth < 0) {
throw new errors_1.SdkError("Invalid width override provided for OpenPass sign-in button, please provide a positive number");
}
if (options.size &&
!(options.size === "x-large" || options.size === "large" || options.size === "medium" || options.size === "small")) {
throw new errors_1.SdkError("Invalid size provided for OpenPass sign-in button, please choose either 'x-large', 'large', 'medium' or 'small'");
}
if (options.theme && !(options.theme === "openpass" || options.theme === "light" || options.theme === "dark")) {
throw new errors_1.SdkError("Invalid theme provided for OpenPass sign-in button, please choose either 'openpass', 'light' or 'dark'");
}
if (options.text && !(options.text === "signin" || options.text === "signin_with" || options.text === "continue_with")) {
throw new errors_1.SdkError("Invalid text type provided for OpenPass sign-in button, please choose either 'signin', 'signin_with' or 'continue_with'");
}
const buttonContainer = document.getElementById(options.parentContainerElementId);
if (!buttonContainer) {
throw new errors_1.SdkError(`No button container found with id '${options.parentContainerElementId}' for OpenPass sign-in button`);
}
// Inject stylesheet and fonts if not already present
if (!(0, stylesheets_1.hasStyleTagWithId)(exports.SIGN_IN_BUTTON_STYLESHEET_ID)) {
(0, stylesheets_1.injectStylesheetContent)((0, styles_1.createSignInButtonStylesheet)(), exports.SIGN_IN_BUTTON_STYLESHEET_ID);
}
if (!(0, stylesheets_1.hasLinkRefContainingHrefText)("Poppins")) {
(0, stylesheets_1.injectStylesheetLinkRef)("https://fonts.googleapis.com/css?family=Poppins");
}
// Render Button
const buttonElement = (0, html_1.createSignInButton)(options);
// Attach click handler
const signInButtonClickHandler = async (event) => {
var _a;
event.preventDefault();
if (options.authenticationMode == "redirect") {
await this.redirectAuth.signIn({
redirectUrl: options.redirectUrl,
source: "SignInWithOpenPassButton",
clientState: options.clientState,
loginHint: options.loginHint,
customQueryParameters: options.customQueryParameters,
allowUnverifiedEmail: options.allowUnverifiedEmail,
});
}
else if (options.authenticationMode == "popup") {
try {
const signInResponse = await this.popupAuth.signInWithPopup({
redirectUrl: options.redirectUrl,
source: "SignInWithOpenPassButton",
clientState: options.clientState,
loginHint: options.loginHint,
customQueryParameters: options.customQueryParameters,
allowUnverifiedEmail: options.allowUnverifiedEmail,
});
try {
(_a = options.popupSuccessCallback) === null || _a === void 0 ? void 0 : _a.call(options, signInResponse);
}
catch (executeError) {
console.error(`Error executing popup success callback, error: ${executeError}`);
}
}
catch (error) {
if (options.popupFailedCallback) {
try {
options.popupFailedCallback(error);
}
catch (executeError) {
console.error(`Error executing popup failed callback, error: ${executeError}`);
}
}
}
}
};
buttonElement.addEventListener("click", signInButtonClickHandler);
buttonContainer.appendChild(buttonElement);
// Send telemetry event
// Do not await the result, this is a fire and forget operation
this.apiClient.sendClientTelemetryEvent("SignInWithOpenPassButtonShown");
}
}
exports.default = SignInButton;
//# sourceMappingURL=signInButton.js.map