@lumiapassport/ui-kit 1.9.3 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/iframe/_headers +4 -1
- package/dist/iframe/index.html +2 -2
- package/dist/iframe/main.js +1 -1
- package/dist/iframe/oauth/telegram.html +128 -0
- package/dist/iframe/oauth/telegram.js +112 -0
- package/dist/index.cjs +4034 -3597
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +227 -4
- package/dist/index.d.ts +227 -4
- package/dist/index.js +3943 -3470
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/iframe/_headers
CHANGED
|
@@ -6,8 +6,11 @@
|
|
|
6
6
|
# IMPORTANT: frame-ancestors 'https:' allows embedding on any HTTPS site
|
|
7
7
|
# Domain validation is performed via projectId check in JavaScript
|
|
8
8
|
# connect-src whitelist: only allowed TSS servers (where the second key share is stored) and lumiapassport.com subdomains
|
|
9
|
+
# script-src: Added https://telegram.org for Telegram Login Widget
|
|
10
|
+
# script-src: Added 'unsafe-eval' required by Telegram Widget (uses eval for callbacks)
|
|
11
|
+
# frame-src: Added https://oauth.telegram.org for Telegram OAuth iframe
|
|
9
12
|
# NOTE: http://localhost:* in frame-ancestors is for development testing only
|
|
10
|
-
Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self'; connect-src 'self' https://*.lumiapassport.com; frame-ancestors https: http://localhost:*; base-uri 'self'; form-action 'self';
|
|
13
|
+
Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval' 'unsafe-eval' https://telegram.org; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self'; connect-src 'self' https://*.lumiapassport.com; frame-src https://oauth.telegram.org; frame-ancestors https: http://localhost:*; base-uri 'self'; form-action 'self';
|
|
11
14
|
|
|
12
15
|
# Allow iframe embedding from HTTPS sites (domain validation in JS)
|
|
13
16
|
# X-Frame-Options is NOT set (CSP frame-ancestors takes precedence)
|
package/dist/iframe/index.html
CHANGED
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
<!-- WARNING: localhost is allowed ONLY for local development, production CSP in _headers is stricter -->
|
|
11
11
|
<meta
|
|
12
12
|
http-equiv="Content-Security-Policy"
|
|
13
|
-
content="default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self'; connect-src 'self' http://localhost:* https://*.lumiapassport.com; base-uri 'self'; form-action 'self';"
|
|
13
|
+
content="default-src 'self'; script-src 'self' 'wasm-unsafe-eval' 'unsafe-eval' https://telegram.org; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self'; connect-src 'self' http://localhost:* https://*.lumiapassport.com; frame-src https://oauth.telegram.org; base-uri 'self'; form-action 'self';"
|
|
14
14
|
/>
|
|
15
15
|
<meta http-equiv="X-Content-Type-Options" content="nosniff" />
|
|
16
16
|
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
|
|
17
17
|
|
|
18
|
-
<title>Lumia Passport Secure Wallet - iframe version 1.
|
|
18
|
+
<title>Lumia Passport Secure Wallet - iframe version 1.10.1</title>
|
|
19
19
|
|
|
20
20
|
<!-- Styles will be injected by build process -->
|
|
21
21
|
<style>
|
package/dist/iframe/main.js
CHANGED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Telegram Login - Lumia Passport</title>
|
|
7
|
+
|
|
8
|
+
<style>
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
17
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
18
|
+
color: #333;
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
padding: 2rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.container {
|
|
27
|
+
background: white;
|
|
28
|
+
border-radius: 16px;
|
|
29
|
+
padding: 3rem 2rem;
|
|
30
|
+
max-width: 450px;
|
|
31
|
+
width: 100%;
|
|
32
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
33
|
+
text-align: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.logo {
|
|
37
|
+
width: 80px;
|
|
38
|
+
height: 80px;
|
|
39
|
+
margin: 0 auto 1.5rem;
|
|
40
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
font-size: 2.5rem;
|
|
46
|
+
color: white;
|
|
47
|
+
font-weight: bold;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
h1 {
|
|
51
|
+
font-size: 1.75rem;
|
|
52
|
+
margin-bottom: 0.5rem;
|
|
53
|
+
color: #333;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
p {
|
|
57
|
+
color: #666;
|
|
58
|
+
margin-bottom: 2rem;
|
|
59
|
+
line-height: 1.5;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
#telegram-widget-container {
|
|
63
|
+
display: flex;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
align-items: center;
|
|
66
|
+
min-height: 80px;
|
|
67
|
+
margin: 2rem 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.loading {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 1rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.spinner {
|
|
78
|
+
width: 40px;
|
|
79
|
+
height: 40px;
|
|
80
|
+
border: 4px solid rgba(102, 126, 234, 0.3);
|
|
81
|
+
border-top-color: #667eea;
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
animation: spin 1s linear infinite;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes spin {
|
|
87
|
+
to { transform: rotate(360deg); }
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.error {
|
|
91
|
+
background: #fee;
|
|
92
|
+
border: 1px solid #fcc;
|
|
93
|
+
border-radius: 8px;
|
|
94
|
+
padding: 1rem;
|
|
95
|
+
color: #c33;
|
|
96
|
+
margin-top: 1rem;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.footer {
|
|
100
|
+
margin-top: 2rem;
|
|
101
|
+
padding-top: 1.5rem;
|
|
102
|
+
border-top: 1px solid #e0e0e0;
|
|
103
|
+
font-size: 0.875rem;
|
|
104
|
+
color: #999;
|
|
105
|
+
}
|
|
106
|
+
</style>
|
|
107
|
+
</head>
|
|
108
|
+
<body>
|
|
109
|
+
<div class="container">
|
|
110
|
+
<div class="logo">L</div>
|
|
111
|
+
<h1>Sign in with Telegram</h1>
|
|
112
|
+
<p>Click the button below to authenticate with your Telegram account</p>
|
|
113
|
+
|
|
114
|
+
<div id="telegram-widget-container">
|
|
115
|
+
<div class="loading">
|
|
116
|
+
<div class="spinner"></div>
|
|
117
|
+
<p>Loading Telegram widget...</p>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="footer">
|
|
122
|
+
<p>You can close this window after authentication</p>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<script src="./telegram.js"></script>
|
|
127
|
+
</body>
|
|
128
|
+
</html>
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Telegram OAuth Popup Script
|
|
3
|
+
* Handles Telegram Login Widget integration in popup window
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// Get bot username from URL parameter
|
|
7
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
8
|
+
const BOT_USERNAME = urlParams.get('bot');
|
|
9
|
+
|
|
10
|
+
console.log('[Telegram OAuth] Initializing with bot:', BOT_USERNAME);
|
|
11
|
+
|
|
12
|
+
// Setup callback for Telegram widget
|
|
13
|
+
window.onTelegramAuth = function(user) {
|
|
14
|
+
console.log('[Telegram OAuth] Authentication successful:', user);
|
|
15
|
+
|
|
16
|
+
try {
|
|
17
|
+
// Send data to opener window
|
|
18
|
+
if (window.opener) {
|
|
19
|
+
window.opener.postMessage({
|
|
20
|
+
type: 'TELEGRAM_AUTH_SUCCESS',
|
|
21
|
+
provider: 'telegram',
|
|
22
|
+
user: user
|
|
23
|
+
}, '*');
|
|
24
|
+
|
|
25
|
+
// Show success message
|
|
26
|
+
const container = document.getElementById('telegram-widget-container');
|
|
27
|
+
if (container) {
|
|
28
|
+
container.innerHTML = `
|
|
29
|
+
<div style="color: #10b981; font-weight: 500;">
|
|
30
|
+
✓ Authentication successful!<br>
|
|
31
|
+
<small style="color: #666;">Closing window...</small>
|
|
32
|
+
</div>
|
|
33
|
+
`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Close popup after short delay
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
window.close();
|
|
39
|
+
}, 1500);
|
|
40
|
+
} else {
|
|
41
|
+
throw new Error('No opener window found');
|
|
42
|
+
}
|
|
43
|
+
} catch (error) {
|
|
44
|
+
console.error('[Telegram OAuth] Error:', error);
|
|
45
|
+
showError('Failed to communicate with parent window');
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
function showError(message) {
|
|
50
|
+
const container = document.getElementById('telegram-widget-container');
|
|
51
|
+
if (container) {
|
|
52
|
+
container.innerHTML = `
|
|
53
|
+
<div class="error">
|
|
54
|
+
<strong>Error:</strong> ${message}
|
|
55
|
+
</div>
|
|
56
|
+
`;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Load Telegram Login Widget
|
|
61
|
+
function loadTelegramWidget() {
|
|
62
|
+
if (!BOT_USERNAME) {
|
|
63
|
+
showError('Bot username not configured. Pass ?bot=username in URL parameter.');
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const container = document.getElementById('telegram-widget-container');
|
|
68
|
+
if (!container) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Clear loading indicator
|
|
73
|
+
container.innerHTML = '';
|
|
74
|
+
|
|
75
|
+
// Create script element for Telegram widget
|
|
76
|
+
const script = document.createElement('script');
|
|
77
|
+
script.async = true;
|
|
78
|
+
script.src = 'https://telegram.org/js/telegram-widget.js?22';
|
|
79
|
+
script.setAttribute('data-telegram-login', BOT_USERNAME);
|
|
80
|
+
script.setAttribute('data-size', 'large');
|
|
81
|
+
script.setAttribute('data-userpic', 'true');
|
|
82
|
+
script.setAttribute('data-onauth', 'onTelegramAuth(user)');
|
|
83
|
+
script.setAttribute('data-request-access', 'write');
|
|
84
|
+
|
|
85
|
+
script.onload = () => {
|
|
86
|
+
console.log('[Telegram OAuth] Widget loaded successfully');
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
script.onerror = (error) => {
|
|
90
|
+
console.error('[Telegram OAuth] Failed to load widget:', error);
|
|
91
|
+
showError('Failed to load Telegram widget');
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
container.appendChild(script);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Load widget when DOM is ready
|
|
98
|
+
if (document.readyState === 'loading') {
|
|
99
|
+
document.addEventListener('DOMContentLoaded', loadTelegramWidget);
|
|
100
|
+
} else {
|
|
101
|
+
loadTelegramWidget();
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Handle popup closing without authentication
|
|
105
|
+
window.addEventListener('beforeunload', () => {
|
|
106
|
+
if (window.opener) {
|
|
107
|
+
window.opener.postMessage({
|
|
108
|
+
type: 'TELEGRAM_AUTH_CANCELLED',
|
|
109
|
+
provider: 'telegram'
|
|
110
|
+
}, '*');
|
|
111
|
+
}
|
|
112
|
+
});
|