Skip to content

Commit

Permalink
Unboxing the embedded cluster (#4951)
Browse files Browse the repository at this point in the history 
Co-authored-by: Salah Al Saleh <[email protected]>
  • Loading branch information
@miaawong @sgalsaleh
miaawong and sgalsaleh authored Oct 23, 2024
1 parent 566ebfc commit a57ff2d
Show file tree
Hide file tree
Showing 38 changed files with 2,760 additions and 911 deletions.
496 changes: 315 additions & 181 deletions e2e/playwright/tests/@smoke-test/test.spec.ts
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions kurl_proxy/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/bin/
tailwindcss
4 changes: 4 additions & 0 deletions kurl_proxy/assets/images/check.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions kurl_proxy/assets/images/down_arrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions kurl_proxy/assets/images/up_arrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions kurl_proxy/assets/input.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
274 changes: 220 additions & 54 deletions kurl_proxy/assets/insecure.html
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,261 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Replicated App Manager">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Replicated App Manager" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TLS Warning | Admin Console</title>
<link rel="stylesheet" href="/assets/output.css" />
<link rel="stylesheet" href="/assets/tls-custom.css" />
{{if .AppIcon }}
<link rel="icon" type="image/png" href="{{ .AppIcon }}" />
<link rel="icon" type="image/png" href="{{ .AppIcon }}" />
{{end}}
<script>
//defaults to chrome example
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.";
var ieText = "On the next screen, click \"Continue to this website\" to proceed to the Admin Console.";
var safariText = "On the next screen, click \"Continue\" when prompted to proceed to the Admin Console.";
var chromeText = "On the next screen, click \"Advanced\", then click \"Proceed\" to continue to the Admin Console.";
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.';
var ieText =
'On the next screen, click "Continue to this website" to proceed to the Admin Console.';
var safariText =
'On the next screen, click "Continue" when prompted to proceed to the Admin Console.';
var chromeText =
'On the next screen, click "Advanced", then click "Proceed" to continue to the Admin Console.';

var browserPlainText = "Chrome";
var browserBodyText = chromeText;
if (typeof InstallTrigger !== 'undefined'){
if (typeof InstallTrigger !== "undefined") {
browserPlainText = "Firefox";
browserBodyText = chromeText;
} else if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0) {
} else if (
Object.prototype.toString
.call(window.HTMLElement)
.indexOf("Constructor") > 0
) {
browserPlainText = "Safari";
browserBodyText = safariText;
} else if (/*@cc_on!@*/false || !!document.documentMode || !!window.StyleMedia) {
} else if (
/*@cc_on!@*/ false ||
!!document.documentMode ||
!!window.StyleMedia
) {
//grouping Edge + IE 6 - 11 in this one
browserPlainText = "Internet Explorer";
browserBodyText = ieText;
}

var rawLink = window.location.href.substring(window.location.protocol.length).replace(/\/$/,'');
var rawLink = window.location.href
.substring(window.location.protocol.length)
.replace(/\/$/, "");
var httpsLink = "https:" + rawLink;
var opensslLink = rawLink.substring(2).replace("/", "");
var tlsManagementLink = httpsLink + "/tls";
var opensslLink = rawLink.substring(2).replace("/insecure", "");
var tlsManagementLink = "/tls";
</script>
</head>
<body>
<div class="flex !flex-col flex-1">
<div class="NavBarWrapper">
<div class="flex flex-auto h-[50px]">
<div class="flex items-center flex-1 relative">
<div class="HeaderLogo">
{{if .AppIcon }}<span
class="appIcon flex"
style="background-image: url('{{ .AppIcon }}')"
></span
>{{end}}
</div>
</div>
</div>
</div>

<div class="flex-column flex1">
<div class="tlsContent--wrapper">
<div>
<p class="tls-header">Bypass browser TLS warning</p>
<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>
<div class="min-h-full w-full flex flex-1">
{{if .IsEmbeddedCluster }}
<div class="bg-[#F9FBFC] min-400">
<div class="py-8 pl-8 shadow-[0_1px_0_#c4c8ca]">
<span class="text-lg font-semibold text-gray-[#323232]">
Let's get you started!
</span>
</div>
<div class="flex1 flex">
<div class="flex-column flex1 left-block">
<div>
<p class="tls-section-header"><script>document.write(browserPlainText)</script></p>
<p class="tls-section-sub"><script>document.write(browserBodyText)</script></p>
</div>
<div class="CodeSnippet">
<div class="CodeSnippet-content">
<p>Verifying the certificate's authenticity</p>
<pre>
<code id="verify-snippet">
</code>
</pre>
<div
class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#323232]"
>
<img src="/assets/images/check.svg" alt="check" />
<span class="font-bold ml-2"> Secure the Admin Console </span>
</div>
<div
class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
>
<img src="/assets/images/check.svg" alt="check" />
<span class="font-normal ml-2">
Configure the cluster (optional)
</span>
</div>
<div
class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
>
<img src="/assets/images/check.svg" alt="check" />
<span class="font-normal ml-2"> Configure {{.AppTitle}} </span>
</div>
<div
class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c]"
>
<img src="/assets/images/check.svg" alt="check" />
<span class="font-normal ml-2">
Validate the environment & deploy {{.AppTitle}}
</span>
</div>
</div>
{{end}}
<div class="tlsContent--wrapper px-8">
<p class="tls-header my-8">Secure the Admin Console</p>
<hr />
<div class="mt-8 p-8 bg-[#F9FBFC]">
<div>
<p class="tls-header-sub">
We use a self-signed 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>
</div>
<div class="flex1 flex">
<div class="flex-column flex1 left-block">
<div>
<p class="tls-section-header">
<script>
document.write(browserPlainText);
</script>
</p>
<p class="tls-header-sub">
<script>
document.write(browserBodyText);
</script>
</p>
</div>
</div>
<div class="CodeSnippet">
<div class="CodeSnippet-content">
<p>SHA Fingerprint</p>
<pre>
<code>{{ .fingerprintSHA1 }}</code>
</pre>

<div
class="flex-column right-block alignItems--center justifyContent--center"
>
<script>
document.write(
'<img class="insecure-image m-auto" src="/assets/images/' +
browserPlainText.toLowerCase().replace(" ", "") +
'-insecure.png" />',
);
</script>
</div>
</div>
<div class="button-wrapper flex alignItems--center">
<button type="submit" class="btn primary" onclick="location.href=tlsManagementLink;">Continue to Setup</button>
<div class="flex-column justifyContent--center">
<div class="flex gap-2 cursor mb-4" id="verify-link">
<p class="text-muted">
<script>document.write(
'or visit <a class="replicated-link" href="' + tlsManagementLink + '">' + tlsManagementLink + '</a> to proceed'
)</script>
Verify the certificate's authenticity (optional)
</p>
<img
src="/assets/images/down_arrow.svg"
alt="check"
width="10"
id="down-arrow"
/>
<img
src="/assets/images/up_arrow.svg"
alt="check"
width="10"
id="up-arrow"
style="display: none"
/>
</div>
<div
id="verification-container"
className="cursor "
style="display: none"
>
<div class="flex flex-column">
<div class="CodeSnippet">
<div class="CodeSnippet-content">
<p>
Run this command on the host to calculate the
certificate's fingerprint.
</p>
<pre>
<code id="verify-snippet">
</code>
</pre>
<div class="copy-command">
<a id="copy-command" class="replicated-link"
>Copy command</a
>
</div>
</div>
</div>
<div class="CodeSnippet">
<div class="CodeSnippet-content">
<p>Expected fingerprint</p>
<pre>
<code>{{ .fingerprintSHA1 }}</code>
</pre>
</div>
</div>
</div>
</div>
<div class="button-wrapper flex justifyContent--end">
<button
type="submit"
class="btn primary"
onclick="location.href=tlsManagementLink;"
>
Continue
</button>
</div>
</div>
</div>
<div class="flex-column flex1 right-block alignItems--center justifyContent--center">
<script>document.write(
'<img class="insecure-image" src="/assets/images/' + browserPlainText.toLowerCase().replace(" ", "") + '-insecure.png" />'
)</script>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
document.getElementById('verify-snippet').innerHTML =
'$ echo | openssl s_client -servername local -connect ' + opensslLink + ' 2>/dev/null | openssl x509 -noout -fingerprint';
document.getElementById("verify-snippet").innerHTML =
"echo | openssl s_client -servername local -connect " +
opensslLink +
" 2>/dev/null | openssl x509 -noout -fingerprint";
</script>
<script>
const replicatedLink = document.getElementById("verify-link");

const verificationContainer = document.getElementById(
"verification-container",
);

replicatedLink.addEventListener("click", () => {
if (verificationContainer.style.display === "block") {
verificationContainer.style.display = "none";
document.getElementById("down-arrow").style.display = "none";
document.getElementById("up-arrow").style.display = "block";
} else {
verificationContainer.style.display = "block";
document.getElementById("down-arrow").style.display = "block";
document.getElementById("up-arrow").style.display = "none";
}
});

document
.getElementById("copy-command")
.addEventListener("click", function () {
const codeSnippet =
document.getElementById("verify-snippet").textContent;

navigator.clipboard
.writeText(codeSnippet)
.then(() => {
const copyCommandElement = document.getElementById("copy-command");
const originalText = copyCommandElement.textContent;
copyCommandElement.textContent = "Copied!";

setTimeout(() => {
copyCommandElement.textContent = originalText;
}, 3000);
})
.catch((err) => {
console.error("Failed to copy text: ", err);
});
});
</script>
</html>
Loading

0 comments on commit a57ff2d

Please sign in to comment.