@venly/connect
Version:
Venly Connect SDK
251 lines • 12.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogWindow = void 0;
var tslib_1 = require("tslib");
var Security_1 = require("../connect/Security");
var WindowMode_1 = require("../models/WindowMode");
var Utils_1 = tslib_1.__importDefault(require("../utils/Utils"));
var DialogWindow = /** @class */ (function () {
function DialogWindow() {
}
DialogWindow.openLoginDialog = function (clientId, options) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var templateUrl;
var _this = this;
return tslib_1.__generator(this, function (_a) {
switch (options.idpHint) {
case 'google':
templateUrl = Utils_1.default.urls.connect + "/modal/login/google";
break;
case 'apple':
templateUrl = Utils_1.default.urls.connect + "/modal/login/apple";
break;
case 'twitter':
case 'arkane-twitter':
templateUrl = Utils_1.default.urls.connect + "/modal/login/twitter";
break;
case 'facebook':
case 'arkane-facebook':
templateUrl = Utils_1.default.urls.connect + "/modal/login/facebook";
break;
case 'password':
templateUrl = Utils_1.default.urls.connect + "/modal/login/password";
break;
default:
templateUrl = Utils_1.default.urls.connect + "/modal/login/none";
break;
}
return [2 /*return*/, new Promise(function (resolve, reject) {
fetch(templateUrl)
.then(function (response) { return response.text(); })
.then(function (template) {
var _a = _this.createTemplate(template, clientId), overlayContainer = _a.overlayContainer, container = _a.container, shadowRoot = _a.shadowRoot;
var idpHint = options.idpHint;
if (idpHint === 'register') {
_this.showRefocusLayout();
Security_1.Security.login(clientId, tslib_1.__assign(tslib_1.__assign({}, options), { idpHint: idpHint, windowMode: WindowMode_1.WindowMode.POPUP })).then(function (authResult) {
_this.removeBackdrop();
_this.closeRefocusLayout();
resolve(authResult);
});
}
else {
overlayContainer.appendChild(container);
_this.addAuthEventListeners(clientId, options, resolve, shadowRoot);
document.body.appendChild(overlayContainer);
_this.addCloseListeners(shadowRoot, reject);
}
});
})];
});
});
};
DialogWindow.openActionDialog = function (clientId, action) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var templateUrl;
var _this = this;
return tslib_1.__generator(this, function (_a) {
templateUrl = Utils_1.default.urls.connect + "/modal/action/" + action;
return [2 /*return*/, new Promise(function (resolve, reject) {
fetch(templateUrl)
.then(function (response) { return response.text(); })
.then(function (template) {
var _a = _this.createTemplate(template, clientId), overlayContainer = _a.overlayContainer, container = _a.container, shadowRoot = _a.shadowRoot;
shadowRoot.querySelector('.action-btn').addEventListener('click', function () {
_this.closeLoginDialog();
resolve(true);
});
overlayContainer.appendChild(container);
document.body.appendChild(overlayContainer);
_this.addCloseListeners(shadowRoot, reject);
});
})];
});
});
};
DialogWindow.addFonts = function () {
if (typeof window === 'undefined') {
return;
}
var href = Utils_1.default.urls.connect + "/static/css/connect/fonts.css";
if (!document.querySelector("link[href=\"" + href + "\"]")) {
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('href', href);
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('crossorigin', 'anonymous');
document.querySelector('head').appendChild(stylesheet);
}
};
DialogWindow.addAnimationScript = function (shadowRoot) {
var src = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js';
if (!document.querySelector("script[src=\"" + src + "\"]")) {
var lootieScript = document.createElement('script');
lootieScript.setAttribute('src', src);
lootieScript.setAttribute('integrity', 'sha512-fTTVSuY9tLP+l/6c6vWz7uAQqd1rq3Q/GyKBN2jOZvJSLC5RjggSdboIFL1ox09/Ezx/AKwcv/xnDeYN9+iDDA==');
lootieScript.setAttribute('crossorigin', 'anonymous');
lootieScript.setAttribute('referrerpolicy', 'no-referrer');
document.querySelector('head').appendChild(lootieScript);
}
var interval = setInterval(function () {
var lt = lottie; // TS compiler trick
if (lt) {
lt.loadAnimation({
container: shadowRoot.querySelector('.animation'),
renderer: 'svg',
loop: true,
autoplay: true,
path: Utils_1.default.urls.connect + "/static/animations/login-animation.json"
});
clearInterval(interval);
}
}, 100);
};
DialogWindow.addAuthEventListeners = function (clientId, options, authResolver, root) {
var _this = this;
var authActions = root.querySelectorAll('.auth-action');
Array.from(authActions).forEach(function (authAction) {
authAction.addEventListener('click', function (event) {
var idpHint = event.target.dataset.idpHint || event.target.parentElement.dataset.idpHint;
Security_1.Security.login(clientId, tslib_1.__assign(tslib_1.__assign({}, options), { idpHint: idpHint, windowMode: WindowMode_1.WindowMode.POPUP })).then(function (authResult) {
_this.removeBackdrop();
_this.closeRefocusLayout(options.closePopup);
authResolver(authResult);
});
_this.closeLoginDialog();
_this.showRefocusLayout();
});
});
var selectAnotherOption = root.querySelector('.select-another-option');
if (selectAnotherOption) {
selectAnotherOption.addEventListener('click', function () {
_this.closeLoginDialog();
_this.removeBackdrop();
delete options.idpHint;
authResolver(_this.openLoginDialog(clientId, options));
});
}
};
DialogWindow.addCloseListeners = function (root, reject) {
var _this = this;
var close = root.querySelector('.venly-connect-close-dialog');
if (close) {
close.addEventListener('click', function () {
_this.closeLoginDialog();
_this.removeBackdrop();
reject({ status: 'ABORTED', errors: [] });
});
}
};
DialogWindow.closeLoginDialog = function () {
document.querySelectorAll('.venly-connect-dialog-container').forEach(function (e) { return e.remove(); });
};
DialogWindow.removeBackdrop = function () {
document.querySelectorAll('.overlay-container').forEach(function (e) { return e.remove(); });
};
DialogWindow.showRefocusLayout = function (id, focus) {
var _this = this;
fetch(Utils_1.default.urls.connect + "/modal/re-focus-layout")
.then(function (response) { return response.text(); })
.then(function (template) {
var overlayContainer = _this.createOverlayContainer(id);
var container = document.createElement('div');
var shadowRoot = container.attachShadow({ mode: 'open' });
container.classList.add('venly-connect-refocus-container');
shadowRoot.innerHTML = template;
container.style.position = 'absolute';
container.style.top = 'calc(50% - 218px)';
container.style.left = 'calc(50% - 147.5px)';
container.style.zIndex = '2147483647';
var existingContainer = document.querySelector('.overlay-container');
if (existingContainer)
existingContainer.appendChild(container);
else {
overlayContainer.appendChild(_this.createBackdrop());
overlayContainer.appendChild(container);
document.body.appendChild(overlayContainer);
}
_this.addRefocusListeners(shadowRoot, focus);
});
};
DialogWindow.closeRefocusLayout = function (closePopup) {
if (closePopup === void 0) { closePopup = true; }
document.querySelectorAll('.overlay-container').forEach(function (e) { return e.remove(); });
document.querySelectorAll('.venly-connect-refocus-container').forEach(function (e) { return e.remove(); });
if (closePopup)
Security_1.Security.closePopupWindow();
};
DialogWindow.addRefocusListeners = function (root, focus) {
if (focus === void 0) { focus = Security_1.Security.focusPopupWindow; }
var reopenAction = root.querySelector('.venly-connect-re-focus-wrapper .reopen-action');
if (reopenAction)
reopenAction.addEventListener('click', function () { return focus(); });
};
DialogWindow.createOverlayContainer = function (id) {
if (id === void 0) { id = 'venly-overlay-container'; }
var overlayContainer = document.createElement('div');
overlayContainer.id = id;
overlayContainer.classList.add('overlay-container');
overlayContainer.style.position = 'fixed';
overlayContainer.style.zIndex = '2147483647';
overlayContainer.style.top = '0';
overlayContainer.style.left = '0';
overlayContainer.style.height = '100%';
overlayContainer.style.background = 'rgba(33, 37, 41, 0.70)';
overlayContainer.style.width = '100%';
return overlayContainer;
};
DialogWindow.createBackdrop = function () {
var backdrop = document.createElement('div');
backdrop.classList.add('venly-connect-dialog-backdrop');
backdrop.style.position = 'fixed';
backdrop.style.width = '100%';
backdrop.style.height = '100%';
backdrop.style.zIndex = '2147483647';
backdrop.style.backdropFilter = 'blur(5px)';
return backdrop;
};
DialogWindow.createTemplate = function (template, clientId) {
var container = document.createElement('div');
var shadowRoot = container.attachShadow({ mode: 'open' });
container.classList.add('venly-connect-dialog-container');
shadowRoot.innerHTML = template;
container.style.position = 'absolute';
container.style.zIndex = '2147483647';
container.style.display = 'flex';
container.style.justifyContent = 'center';
container.style.width = '100%';
container.style.height = '100%';
var companyLogo = shadowRoot.querySelector('.connect-company-logo');
companyLogo.src = Utils_1.default.urls.storage + "/clients/logos/" + clientId + ".png";
var overlayContainer = this.createOverlayContainer();
overlayContainer.appendChild(this.createBackdrop());
this.addFonts();
this.addAnimationScript(shadowRoot);
overlayContainer.appendChild(container);
return { overlayContainer: overlayContainer, container: container, shadowRoot: shadowRoot };
};
return DialogWindow;
}());
exports.DialogWindow = DialogWindow;
//# sourceMappingURL=DialogWindow.js.map