Skip to content

Commit 313b399

Browse files
author
Luke Hinds
committed
Certs page
Make it easier for users to get the certficate, works in conjunction with stacklok/codegate#341
1 parent a5635bd commit 313b399

File tree

4 files changed

+135
-19
lines changed

4 files changed

+135
-19
lines changed

‎public/certificates/.gitkeep

Whitespace-only changes.

‎src/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { usePromptsStore } from "./hooks/usePromptsStore";
88
import { Sidebar } from "./components/Sidebar";
99
import { useSse } from "./hooks/useSse";
1010
import { Help } from "./components/Help";
11+
import { Certificates } from "./components/Certificates";
1112

1213
function App() {
1314
const { prompts, loading, fetchPrompts } = usePromptsStore();
@@ -31,6 +32,7 @@ function App() {
3132
<Route path="/" element={<Dashboard />} />
3233
<Route path="/prompt/:id" element={<Chat />} />
3334
<Route path="/help/:section" element={<Help />} />
35+
<Route path="/certificates" element={<Certificates />} />
3436
</Routes>
3537
</div>
3638
</div>

‎src/components/Certificates.tsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { Button } from "./ui/button";
2+
import { Card } from "./ui/card";
3+
4+
export function Certificates() {
5+
const handleDownload = () => {
6+
const link = document.createElement('a');
7+
link.href = '/certificates/codegate_ca.crt';
8+
link.download = 'codegate.crt';
9+
document.body.appendChild(link);
10+
link.click();
11+
document.body.removeChild(link);
12+
};
13+
14+
return (
15+
<div className="max-w-4xl mx-auto h-[calc(100vh-4rem)] overflow-y-auto px-4 pr-6">
16+
<h1 className="text-3xl font-bold mb-8">Certificate Download</h1>
17+
18+
<Card className="p-6 mb-8 bg-white shadow-lg border-2 border-teal-100">
19+
<div className="flex items-start gap-6">
20+
<div className="w-16 h-16 bg-teal-50 rounded-full flex items-center justify-center flex-shrink-0">
21+
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
22+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
23+
</svg>
24+
</div>
25+
<div className="flex-grow">
26+
<h2 className="text-xl font-semibold mb-2">CodeGate SSL Certificate</h2>
27+
<p className="text-gray-600 mb-4">
28+
This certificate allows CodeGate to act as a proxy for certain software such as CoPilot.
29+
</p>
30+
<Button
31+
onClick={handleDownload}
32+
className="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-md transition-colors"
33+
>
34+
Download Certificate
35+
</Button>
36+
</div>
37+
</div>
38+
</Card>
39+
40+
<Card className="p-6 mb-8 bg-white shadow-lg border-2 border-teal-100">
41+
<h2 className="text-xl font-semibold mb-4">Is this certificate safe to install on my machine?</h2>
42+
<div className="space-y-4">
43+
<div className="flex gap-3">
44+
<svg className="w-5 h-5 text-teal-600 flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
45+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
46+
</svg>
47+
<p className="text-gray-700"><strong>Local Only:</strong> CodeGate runs entirely on your machine within an isolated container, ensuring all data processing stays local without any external transmissions.</p>
48+
</div>
49+
50+
<div className="flex gap-3">
51+
<svg className="w-5 h-5 text-teal-600 flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
52+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
53+
</svg>
54+
<p className="text-gray-700"><strong>Secure Certificate Handling:</strong> This custom CA is locally generated and managed, the developers of CodeGate have no access to it.</p>
55+
</div>
56+
57+
<div className="flex gap-3">
58+
<svg className="w-5 h-5 text-teal-600 flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
59+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
60+
</svg>
61+
<p className="text-gray-700"><strong>No External Communications:</strong> CodeGate is designed with no capability to call home or communicate with external servers, outside of those requested by the IDE or Agent.</p>
62+
</div>
63+
</div>
64+
</Card>
65+
66+
<Card className="p-6 mb-8 bg-white shadow-lg border-2 border-teal-100">
67+
<h2 className="text-xl font-semibold mb-4">Installation Instructions</h2>
68+
<div className="space-y-6">
69+
<div>
70+
<h3 className="font-semibold text-lg mb-2">macOS Instructions:</h3>
71+
<ol className="list-decimal ml-6 space-y-2 text-gray-700">
72+
<li>Double-click the downloaded certificate file</li>
73+
<li>Keychain Access will open automatically</li>
74+
<li>Add the certificate to the System keychain</li>
75+
<li>Double-click the imported certificate</li>
76+
<li>Expand the "Trust" section</li>
77+
<li>Set "When using this certificate" to "Always Trust"</li>
78+
</ol>
79+
</div>
80+
81+
<div>
82+
<h3 className="font-semibold text-lg mb-2">Windows Instructions:</h3>
83+
<ol className="list-decimal ml-6 space-y-2 text-gray-700">
84+
<li>Double-click the downloaded certificate file</li>
85+
<li>Click "Install Certificate"</li>
86+
<li>Select "Local Machine" and click Next</li>
87+
<li>Choose "Place all certificates in the following store"</li>
88+
<li>Click "Browse" and select "Trusted Root Certification Authorities"</li>
89+
<li>Click "Next" and then "Finish"</li>
90+
</ol>
91+
</div>
92+
93+
<div>
94+
<h3 className="font-semibold text-lg mb-2">Linux Instructions:</h3>
95+
<ol className="list-decimal ml-6 space-y-2 text-gray-700">
96+
<li>Copy the certificate to /usr/local/share/ca-certificates/</li>
97+
<li>Rename it to have a .crt extension</li>
98+
<li>Run: sudo update-ca-certificates</li>
99+
<li>Restart your browser</li>
100+
</ol>
101+
</div>
102+
</div>
103+
</Card>
104+
</div>
105+
);
106+
}

‎src/components/Header.tsx

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,33 @@ export function Header() {
1616
</Link>
1717
</nav>
1818
</div>
19-
<div className="flex items-center relative group mr-16">
20-
<div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-gray-100 transition-colors">
21-
Help
22-
</div>
23-
{/* Dropdown menu */}
24-
<div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
25-
<div className="py-1">
26-
<Link
27-
to="/help/continue-setup"
28-
className="block px-5 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors"
29-
>
30-
Continue Setup
31-
</Link>
32-
<Link
33-
to="/help/copilot-setup"
34-
className="block px-5 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors"
35-
>
36-
CoPilot Setup
37-
</Link>
19+
<div className="flex items-center gap-4 mr-16">
20+
<Link
21+
to="/certificates"
22+
className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-gray-100 transition-colors"
23+
>
24+
Certificate Download
25+
</Link>
26+
<div className="flex items-center relative group">
27+
<div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-gray-100 transition-colors">
28+
Help
29+
</div>
30+
{/* Dropdown menu */}
31+
<div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
32+
<div className="py-1">
33+
<Link
34+
to="/help/continue-setup"
35+
className="block px-5 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors"
36+
>
37+
Continue Setup
38+
</Link>
39+
<Link
40+
to="/help/copilot-setup"
41+
className="block px-5 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors"
42+
>
43+
CoPilot Setup
44+
</Link>
45+
</div>
3846
</div>
3947
</div>
4048
</div>

0 commit comments

Comments
 (0)