fix and update
This commit is contained in:
lendry
@@ -169,6 +169,61 @@
|
||||
});
|
||||
}
|
||||
|
||||
var SIZE_PRESETS = {
|
||||
s: { height: 32, font: 13, padX: 12, gap: 8, badge: 20, radius: 16 },
|
||||
m: { height: 40, font: 14, padX: 16, gap: 10, badge: 24, radius: 20 },
|
||||
l: { height: 44, font: 15, padX: 18, gap: 10, badge: 28, radius: 22 },
|
||||
xl: { height: 52, font: 16, padX: 22, gap: 12, badge: 32, radius: 26 }
|
||||
};
|
||||
|
||||
function themePalette(theme) {
|
||||
if (theme === 'dark') {
|
||||
return {
|
||||
bg: '#1f2430',
|
||||
bgHover: '#2a3040',
|
||||
border: 'transparent',
|
||||
borderHover: 'transparent',
|
||||
text: '#ffffff',
|
||||
badgeBg: '#ffffff',
|
||||
badgeColor: '#1f2430'
|
||||
};
|
||||
}
|
||||
return {
|
||||
bg: '#ffffff',
|
||||
bgHover: '#f6f8fb',
|
||||
border: '#e4e8ef',
|
||||
borderHover: '#d4dae6',
|
||||
text: '#1f2430',
|
||||
badgeBg: '#111111',
|
||||
badgeColor: '#ffffff'
|
||||
};
|
||||
}
|
||||
|
||||
function readButtonOptions(script, options) {
|
||||
function attr(name) {
|
||||
return script ? script.getAttribute(name) : null;
|
||||
}
|
||||
var o = options || {};
|
||||
var size = String(o.buttonSize || attr('data-button-size') || 'xl').toLowerCase();
|
||||
if (!SIZE_PRESETS[size]) size = 'xl';
|
||||
var radiusRaw = o.buttonRadius != null ? o.buttonRadius : attr('data-button-radius');
|
||||
return {
|
||||
size: size,
|
||||
theme: String(o.buttonTheme || attr('data-button-theme') || 'light').toLowerCase(),
|
||||
view: String(o.buttonView || attr('data-button-view') || 'main').toLowerCase(),
|
||||
icon: String(o.buttonIcon || attr('data-button-icon') || 'id').toLowerCase(),
|
||||
radius: radiusRaw != null && radiusRaw !== '' ? parseInt(radiusRaw, 10) : null,
|
||||
container: o.buttonContainer || attr('data-button-container') || null,
|
||||
colors: {
|
||||
bg: o.buttonBg || attr('data-button-bg') || null,
|
||||
bgHover: o.buttonBgHover || attr('data-button-bg-hover') || null,
|
||||
border: o.buttonBorder || attr('data-button-border') || null,
|
||||
borderHover: o.buttonBorderHover || attr('data-button-border-hover') || null,
|
||||
text: o.buttonText || attr('data-button-text') || null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function injectWidgetStyles() {
|
||||
if (global.document.getElementById('lendry-sso-onetap-style')) return;
|
||||
var style = global.document.createElement('style');
|
||||
@@ -176,39 +231,95 @@
|
||||
style.textContent =
|
||||
'#' +
|
||||
widgetRootId +
|
||||
'{position:fixed;top:16px;right:16px;z-index:2147483000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}' +
|
||||
'.lendry-sso-onetap-btn{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid #e4e8ef;background:#fff;color:#1f2430;font-size:14px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(31,36,48,.12);transition:transform .18s ease,box-shadow .18s ease}' +
|
||||
'{position:fixed;top:16px;right:16px;z-index:2147483000}' +
|
||||
'.lendry-sso-onetap-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;box-shadow:0 8px 24px rgba(31,36,48,.12)}' +
|
||||
'.lendry-sso-onetap-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(31,36,48,.16)}' +
|
||||
'.lendry-sso-onetap-btn:active{transform:translateY(0)}' +
|
||||
'.lendry-sso-onetap-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:#111;color:#fff;font-size:12px;font-weight:700}';
|
||||
'.lendry-sso-onetap-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:700}';
|
||||
global.document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function createWidget(providerName, onClick) {
|
||||
injectWidgetStyles();
|
||||
if (global.document.getElementById(widgetRootId)) return;
|
||||
function applyButtonStyles(button, badge, providerName, btn) {
|
||||
var preset = SIZE_PRESETS[btn.size] || SIZE_PRESETS.xl;
|
||||
var palette = themePalette(btn.theme === 'dark' ? 'dark' : 'light');
|
||||
var bg = btn.colors.bg || palette.bg;
|
||||
var bgHover = btn.colors.bgHover || palette.bgHover;
|
||||
var border = btn.colors.border || palette.border;
|
||||
var borderHover = btn.colors.borderHover || palette.borderHover;
|
||||
var textColor = btn.colors.text || palette.text;
|
||||
var radius = btn.radius != null && !isNaN(btn.radius) ? btn.radius : preset.radius;
|
||||
var iconOnly = btn.view === 'icon';
|
||||
|
||||
var root = global.document.createElement('div');
|
||||
root.id = widgetRootId;
|
||||
button.style.height = preset.height + 'px';
|
||||
button.style.fontSize = preset.font + 'px';
|
||||
button.style.gap = preset.gap + 'px';
|
||||
button.style.padding = iconOnly ? '0' : '0 ' + preset.padX + 'px';
|
||||
button.style.width = iconOnly ? preset.height + 'px' : 'auto';
|
||||
button.style.borderRadius = radius + 'px';
|
||||
button.style.background = bg;
|
||||
button.style.color = textColor;
|
||||
button.style.border = '1px solid ' + border;
|
||||
|
||||
button.addEventListener('mouseenter', function () {
|
||||
button.style.background = bgHover;
|
||||
button.style.borderColor = borderHover;
|
||||
});
|
||||
button.addEventListener('mouseleave', function () {
|
||||
button.style.background = bg;
|
||||
button.style.borderColor = border;
|
||||
});
|
||||
|
||||
if (badge) {
|
||||
badge.style.minWidth = preset.badge + 'px';
|
||||
badge.style.height = preset.badge + 'px';
|
||||
badge.style.padding = '0 ' + Math.round(preset.badge / 4) + 'px';
|
||||
badge.style.fontSize = Math.round(preset.font * 0.85) + 'px';
|
||||
badge.style.background = palette.badgeBg;
|
||||
badge.style.color = palette.badgeColor;
|
||||
}
|
||||
}
|
||||
|
||||
function createWidget(providerName, onClick, options) {
|
||||
injectWidgetStyles();
|
||||
var btn = options || readButtonOptions(null, null);
|
||||
var iconOnly = btn.view === 'icon';
|
||||
|
||||
var mount = null;
|
||||
if (btn.container) {
|
||||
mount = global.document.getElementById(btn.container);
|
||||
if (mount) {
|
||||
mount.innerHTML = '';
|
||||
}
|
||||
}
|
||||
if (!mount) {
|
||||
if (global.document.getElementById(widgetRootId)) return;
|
||||
mount = global.document.createElement('div');
|
||||
mount.id = widgetRootId;
|
||||
global.document.body.appendChild(mount);
|
||||
}
|
||||
|
||||
var button = global.document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'lendry-sso-onetap-btn';
|
||||
button.setAttribute('aria-label', 'Войти через ' + providerName);
|
||||
|
||||
var badge = global.document.createElement('span');
|
||||
badge.className = 'lendry-sso-onetap-badge';
|
||||
badge.textContent = 'ID';
|
||||
var badge = null;
|
||||
if (btn.icon !== 'none') {
|
||||
badge = global.document.createElement('span');
|
||||
badge.className = 'lendry-sso-onetap-badge';
|
||||
badge.textContent = 'ID';
|
||||
button.appendChild(badge);
|
||||
}
|
||||
|
||||
var label = global.document.createElement('span');
|
||||
label.textContent = 'Войти через ' + providerName;
|
||||
if (!iconOnly) {
|
||||
var label = global.document.createElement('span');
|
||||
label.textContent = 'Войти через ' + providerName;
|
||||
button.appendChild(label);
|
||||
}
|
||||
|
||||
button.appendChild(badge);
|
||||
button.appendChild(label);
|
||||
applyButtonStyles(button, badge, providerName, btn);
|
||||
button.addEventListener('click', onClick);
|
||||
|
||||
root.appendChild(button);
|
||||
global.document.body.appendChild(root);
|
||||
mount.appendChild(button);
|
||||
}
|
||||
|
||||
function buildPopupUrl(frontendBase, clientId, origin, redirectUri, scope) {
|
||||
@@ -288,6 +399,7 @@
|
||||
(options && options.redirectUri) ||
|
||||
(script && script.getAttribute('data-redirect-uri')) ||
|
||||
global.location.origin + '/auth/callback';
|
||||
var buttonOptions = readButtonOptions(script, options);
|
||||
|
||||
loginWithFedCM(idpApiBase, clientId).then(function (result) {
|
||||
if (result && result.token) {
|
||||
@@ -301,22 +413,26 @@
|
||||
return;
|
||||
}
|
||||
|
||||
createWidget(providerName, function () {
|
||||
var popupUrl = buildPopupUrl(frontendBase, clientId, global.location.origin, redirectUri, scope);
|
||||
openPopup(popupUrl, frontendBase, function (payload) {
|
||||
dispatchSuccess(
|
||||
{
|
||||
token: payload.token,
|
||||
accessToken: payload.accessToken,
|
||||
idToken: payload.idToken,
|
||||
refreshToken: payload.refreshToken,
|
||||
code: payload.code,
|
||||
method: 'popup'
|
||||
},
|
||||
script
|
||||
);
|
||||
});
|
||||
});
|
||||
createWidget(
|
||||
providerName,
|
||||
function () {
|
||||
var popupUrl = buildPopupUrl(frontendBase, clientId, global.location.origin, redirectUri, scope);
|
||||
openPopup(popupUrl, frontendBase, function (payload) {
|
||||
dispatchSuccess(
|
||||
{
|
||||
token: payload.token,
|
||||
accessToken: payload.accessToken,
|
||||
idToken: payload.idToken,
|
||||
refreshToken: payload.refreshToken,
|
||||
code: payload.code,
|
||||
method: 'popup'
|
||||
},
|
||||
script
|
||||
);
|
||||
});
|
||||
},
|
||||
buttonOptions
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user