Skip to content

Commit a57ff2d

Browse files
miaawongsgalsaleh
miaawong
and
sgalsaleh
authored
Unboxing the embedded cluster (#4951)
 Co-authored-by: Salah Al Saleh <[email protected]>
1 parent 566ebfc commit a57ff2d

38 files changed

+2760
-911
lines changed

‎e2e/playwright/tests/@smoke-test/test.spec.ts

Lines changed: 315 additions & 181 deletions
Large diffs are not rendered by default.

‎kurl_proxy/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
/bin/
2+
tailwindcss

‎kurl_proxy/assets/images/check.svg

Lines changed: 4 additions & 0 deletions
Loading

‎kurl_proxy/assets/images/down_arrow.svg

Lines changed: 3 additions & 0 deletions
Loading

‎kurl_proxy/assets/images/up_arrow.svg

Lines changed: 3 additions & 0 deletions
Loading

‎kurl_proxy/assets/input.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎kurl_proxy/assets/insecure.html

Lines changed: 220 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,261 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="description" content="Replicated App Manager">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="description" content="Replicated App Manager" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<title>TLS Warning | Admin Console</title>
9+
<link rel="stylesheet" href="/assets/output.css" />
910
<link rel="stylesheet" href="/assets/tls-custom.css" />
1011
{{if .AppIcon }}
11-
<link rel="icon" type="image/png" href="{{ .AppIcon }}" />
12+
<link rel="icon" type="image/png" href="{{ .AppIcon }}" />
1213
{{end}}
1314
<script>
1415
//defaults to chrome example
15-
var firefoxText = "On the next screen, click \"I Understand the Risks\", then click \"Add Exception\". Finally, click \"Confirm Security Exception\" to proceed to the Admin Console.";
16-
var ieText = "On the next screen, click \"Continue to this website\" to proceed to the Admin Console.";
17-
var safariText = "On the next screen, click \"Continue\" when prompted to proceed to the Admin Console.";
18-
var chromeText = "On the next screen, click \"Advanced\", then click \"Proceed\" to continue to the Admin Console.";
16+
var firefoxText =
17+
'On the next screen, click "I Understand the Risks", then click "Add Exception". Finally, click "Confirm Security Exception" to proceed to the Admin Console.';
18+
var ieText =
19+
'On the next screen, click "Continue to this website" to proceed to the Admin Console.';
20+
var safariText =
21+
'On the next screen, click "Continue" when prompted to proceed to the Admin Console.';
22+
var chromeText =
23+
'On the next screen, click "Advanced", then click "Proceed" to continue to the Admin Console.';
1924

2025
var browserPlainText = "Chrome";
2126
var browserBodyText = chromeText;
22-
if (typeof InstallTrigger !== 'undefined'){
27+
if (typeof InstallTrigger !== "undefined") {
2328
browserPlainText = "Firefox";
2429
browserBodyText = chromeText;
25-
} else if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0) {
30+
} else if (
31+
Object.prototype.toString
32+
.call(window.HTMLElement)
33+
.indexOf("Constructor") > 0
34+
) {
2635
browserPlainText = "Safari";
2736
browserBodyText = safariText;
28-
} else if (/*@cc_on!@*/false || !!document.documentMode || !!window.StyleMedia) {
37+
} else if (
38+
/*@cc_on!@*/ false ||
39+
!!document.documentMode ||
40+
!!window.StyleMedia
41+
) {
2942
//grouping Edge + IE 6 - 11 in this one
3043
browserPlainText = "Internet Explorer";
3144
browserBodyText = ieText;
3245
}
3346

34-
var rawLink = window.location.href.substring(window.location.protocol.length).replace(/\/$/,'');
47+
var rawLink = window.location.href
48+
.substring(window.location.protocol.length)
49+
.replace(/\/$/, "");
3550
var httpsLink = "https:" + rawLink;
36-
var opensslLink = rawLink.substring(2).replace("/", "");
37-
var tlsManagementLink = httpsLink + "/tls";
51+
var opensslLink = rawLink.substring(2).replace("/insecure", "");
52+
var tlsManagementLink = "/tls";
3853
</script>
3954
</head>
4055
<body>
56+
<div class="flex !flex-col flex-1">
57+
<div class="NavBarWrapper">
58+
<div class="flex flex-auto h-[50px]">
59+
<div class="flex items-center flex-1 relative">
60+
<div class="HeaderLogo">
61+
{{if .AppIcon }}<span
62+
class="appIcon flex"
63+
style="background-image: url('{{ .AppIcon }}')"
64+
></span
65+
>{{end}}
66+
</div>
67+
</div>
68+
</div>
69+
</div>
4170

42-
<div class="flex-column flex1">
43-
<div class="tlsContent--wrapper">
44-
<div>
45-
<p class="tls-header">Bypass browser TLS warning</p>
46-
<p class="tls-header-sub">We use a self-signed SSL/TLS Certificate to secure the communication between your local machine and the Admin Console during setup. You'll see a warning about this in your browser, but you can be confident that this is secure.</p>
71+
<div class="min-h-full w-full flex flex-1">
72+
{{if .IsEmbeddedCluster }}
73+
<div class="bg-[#F9FBFC] min-400">
74+
<div class="py-8 pl-8 shadow-[0_1px_0_#c4c8ca]">
75+
<span class="text-lg font-semibold text-gray-[#323232]">
76+
Let's get you started!
77+
</span>
4778
</div>
48-
<div class="flex1 flex">
49-
<div class="flex-column flex1 left-block">
50-
<div>
51-
<p class="tls-section-header"><script>document.write(browserPlainText)</script></p>
52-
<p class="tls-section-sub"><script>document.write(browserBodyText)</script></p>
53-
</div>
54-
<div class="CodeSnippet">
55-
<div class="CodeSnippet-content">
56-
<p>Verifying the certificate's authenticity</p>
57-
<pre>
58-
<code id="verify-snippet">
59-
</code>
60-
</pre>
79+
<div
80+
class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#323232]"
81+
>
82+
<img src="/assets/images/check.svg" alt="check" />
83+
<span class="font-bold ml-2"> Secure the Admin Console </span>
84+
</div>
85+
<div
86+
class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
87+
>
88+
<img src="/assets/images/check.svg" alt="check" />
89+
<span class="font-normal ml-2">
90+
Configure the cluster (optional)
91+
</span>
92+
</div>
93+
<div
94+
class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
95+
>
96+
<img src="/assets/images/check.svg" alt="check" />
97+
<span class="font-normal ml-2"> Configure {{.AppTitle}} </span>
98+
</div>
99+
<div
100+
class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
101+
>
102+
<img src="/assets/images/check.svg" alt="check" />
103+
<span class="font-normal ml-2">
104+
Validate the environment & deploy {{.AppTitle}}
105+
</span>
106+
</div>
107+
</div>
108+
{{end}}
109+
<div class="tlsContent--wrapper px-8">
110+
<p class="tls-header my-8">Secure the Admin Console</p>
111+
<hr />
112+
<div class="mt-8 p-8 bg-[#F9FBFC]">
113+
<div>
114+
<p class="tls-header-sub">
115+
We use a self-signed TLS Certificate to secure the communication
116+
between your local machine and the Admin Console during setup.
117+
You'll see a warning about this in your browser, but you can be
118+
confident that this is secure.
119+
</p>
120+
</div>
121+
<div class="flex1 flex">
122+
<div class="flex-column flex1 left-block">
123+
<div>
124+
<p class="tls-section-header">
125+
<script>
126+
document.write(browserPlainText);
127+
</script>
128+
</p>
129+
<p class="tls-header-sub">
130+
<script>
131+
document.write(browserBodyText);
132+
</script>
133+
</p>
61134
</div>
62-
</div>
63-
<div class="CodeSnippet">
64-
<div class="CodeSnippet-content">
65-
<p>SHA Fingerprint</p>
66-
<pre>
67-
<code>{{ .fingerprintSHA1 }}</code>
68-
</pre>
135+
136+
<div
137+
class="flex-column right-block alignItems--center justifyContent--center"
138+
>
139+
<script>
140+
document.write(
141+
'<img class="insecure-image m-auto" src="/assets/images/' +
142+
browserPlainText.toLowerCase().replace(" ", "") +
143+
'-insecure.png" />',
144+
);
145+
</script>
69146
</div>
70-
</div>
71-
<div class="button-wrapper flex alignItems--center">
72-
<button type="submit" class="btn primary" onclick="location.href=tlsManagementLink;">Continue to Setup</button>
73-
<div class="flex-column justifyContent--center">
147+
<div class="flex gap-2 cursor mb-4" id="verify-link">
74148
<p class="text-muted">
75-
<script>document.write(
76-
'or visit <a class="replicated-link" href="' + tlsManagementLink + '">' + tlsManagementLink + '</a> to proceed'
77-
)</script>
149+
Verify the certificate's authenticity (optional)
78150
</p>
151+
<img
152+
src="/assets/images/down_arrow.svg"
153+
alt="check"
154+
width="10"
155+
id="down-arrow"
156+
/>
157+
<img
158+
src="/assets/images/up_arrow.svg"
159+
alt="check"
160+
width="10"
161+
id="up-arrow"
162+
style="display: none"
163+
/>
164+
</div>
165+
<div
166+
id="verification-container"
167+
className="cursor "
168+
style="display: none"
169+
>
170+
<div class="flex flex-column">
171+
<div class="CodeSnippet">
172+
<div class="CodeSnippet-content">
173+
<p>
174+
Run this command on the host to calculate the
175+
certificate's fingerprint.
176+
</p>
177+
<pre>
178+
<code id="verify-snippet">
179+
</code>
180+
</pre>
181+
<div class="copy-command">
182+
<a id="copy-command" class="replicated-link"
183+
>Copy command</a
184+
>
185+
</div>
186+
</div>
187+
</div>
188+
<div class="CodeSnippet">
189+
<div class="CodeSnippet-content">
190+
<p>Expected fingerprint</p>
191+
<pre>
192+
<code>{{ .fingerprintSHA1 }}</code>
193+
</pre>
194+
</div>
195+
</div>
196+
</div>
197+
</div>
198+
<div class="button-wrapper flex justifyContent--end">
199+
<button
200+
type="submit"
201+
class="btn primary"
202+
onclick="location.href=tlsManagementLink;"
203+
>
204+
Continue
205+
</button>
79206
</div>
80207
</div>
81208
</div>
82-
<div class="flex-column flex1 right-block alignItems--center justifyContent--center">
83-
<script>document.write(
84-
'<img class="insecure-image" src="/assets/images/' + browserPlainText.toLowerCase().replace(" ", "") + '-insecure.png" />'
85-
)</script>
86-
</div>
87209
</div>
88210
</div>
89211
</div>
212+
</div>
90213
</body>
91214
<script>
92-
document.getElementById('verify-snippet').innerHTML =
93-
'$ echo | openssl s_client -servername local -connect ' + opensslLink + ' 2>/dev/null | openssl x509 -noout -fingerprint';
215+
document.getElementById("verify-snippet").innerHTML =
216+
"echo | openssl s_client -servername local -connect " +
217+
opensslLink +
218+
" 2>/dev/null | openssl x509 -noout -fingerprint";
219+
</script>
220+
<script>
221+
const replicatedLink = document.getElementById("verify-link");
222+
223+
const verificationContainer = document.getElementById(
224+
"verification-container",
225+
);
226+
227+
replicatedLink.addEventListener("click", () => {
228+
if (verificationContainer.style.display === "block") {
229+
verificationContainer.style.display = "none";
230+
document.getElementById("down-arrow").style.display = "none";
231+
document.getElementById("up-arrow").style.display = "block";
232+
} else {
233+
verificationContainer.style.display = "block";
234+
document.getElementById("down-arrow").style.display = "block";
235+
document.getElementById("up-arrow").style.display = "none";
236+
}
237+
});
238+
239+
document
240+
.getElementById("copy-command")
241+
.addEventListener("click", function () {
242+
const codeSnippet =
243+
document.getElementById("verify-snippet").textContent;
244+
245+
navigator.clipboard
246+
.writeText(codeSnippet)
247+
.then(() => {
248+
const copyCommandElement = document.getElementById("copy-command");
249+
const originalText = copyCommandElement.textContent;
250+
copyCommandElement.textContent = "Copied!";
251+
252+
setTimeout(() => {
253+
copyCommandElement.textContent = originalText;
254+
}, 3000);
255+
})
256+
.catch((err) => {
257+
console.error("Failed to copy text: ", err);
258+
});
259+
});
94260
</script>
95261
</html>

0 commit comments

Comments
 (0)