Skip to content

Commit dfedc62

Browse files
kantordkantord
committed
add breadcrumbs to certificate security
1 parent c4feb61 commit dfedc62

File tree

2 files changed

+154
-127
lines changed

2 files changed

+154
-127
lines changed

‎src/routes/__tests__/route-certificate-security.test.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { render } from "@/lib/test-utils";
2+
import { screen, within } from "@testing-library/react";
3+
import { describe, expect, it } from "vitest";
4+
import { RouteCertificateSecurity } from "../route-certificate-security";
5+
6+
describe("Certificate security", () => {
7+
it("has breadcrumbs", () => {
8+
render(<RouteCertificateSecurity />);
9+
10+
const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
11+
expect(breadcrumbs).toBeVisible();
12+
expect(
13+
within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
14+
).toHaveAttribute("href", "/");
15+
expect(
16+
within(breadcrumbs).getByText(/certificate security/i),
17+
).toBeVisible();
18+
});
19+
});

‎src/routes/route-certificate-security.tsx

Lines changed: 135 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Card, CardBody } from "@stacklok/ui-kit";
1+
import { BreadcrumbHome } from "@/components/BreadcrumbHome";
2+
import { Breadcrumb, Breadcrumbs, Card, CardBody } from "@stacklok/ui-kit";
23

34
const SecurityShieldIcon = () => (
45
<svg viewBox="0 0 24 24" className="size-16 text-brand-700">
@@ -59,139 +60,146 @@ const OpenSourceIcon = () => (
5960

6061
export function RouteCertificateSecurity() {
6162
return (
62-
<div className="flex flex-col h-full">
63-
<div className="max-w-4xl mx-auto mb-4">
64-
<h1 className="text-3xl font-bold mb-8">Certificate Security</h1>
63+
<>
64+
<Breadcrumbs>
65+
<BreadcrumbHome />
66+
<Breadcrumb>Certificate Security</Breadcrumb>
67+
</Breadcrumbs>
6568

66-
<Card className="mb-8">
67-
<CardBody>
68-
<div className="flex justify-center mb-4">
69-
<SecurityShieldIcon />
70-
</div>
71-
<h2 className="text-xl font-semibold mb-4">
72-
Robust Certificate Security
73-
</h2>
74-
<p className="text-secondary mb-4">
75-
Security is a top priority for us. We have designed CodeGate's
76-
local certificate management with security in mind, balanced
77-
against ease of use.
78-
</p>
79-
<p className="text-secondary">
80-
We always seek to improve and balance security, privacy, and
81-
usability.
82-
</p>
83-
</CardBody>
84-
</Card>
69+
<div className="flex flex-col h-full">
70+
<div className="max-w-4xl mx-auto mb-4">
71+
<h1 className="text-3xl font-bold mb-8">Certificate Security</h1>
8572

86-
<Card className="mb-8">
87-
<CardBody>
88-
<div className="flex justify-center mb-4">
89-
<KeySecurityIcon />
90-
</div>
91-
<h2 className="text-xl font-semibold mb-4">
92-
Key security features
93-
</h2>
94-
<div className="space-y-6">
95-
<div>
96-
<h3 className="font-semibold text-lg mb-2">
97-
Per-domain certificate generation
98-
</h3>
99-
<p className="text-secondary mb-2">
100-
Instead of using wildcard certificates, CodeGate generates a
101-
unique certificate for each domain. This approach minimizes
102-
security risks by limiting the impact of any single
103-
certificate compromise.
104-
</p>
73+
<Card className="mb-8">
74+
<CardBody>
75+
<div className="flex justify-center mb-4">
76+
<SecurityShieldIcon />
10577
</div>
106-
<div>
107-
<h3 className="font-semibold text-lg mb-2">
108-
High-strength encryption with 4096-bit RSA keys
109-
</h3>
110-
<p className="text-secondary mb-2">
111-
CodeGate utilizes 4096-bit RSA keys for certificate authority
112-
operations, providing enhanced security compared to standard
113-
2048-bit keys. The increased key length significantly reduces
114-
the risk of brute-force attacks, ensuring long-term protection
115-
for your data. To balance performance, 2048-bit keys are used
116-
for server certificates.
117-
</p>
78+
<h2 className="text-xl font-semibold mb-4">
79+
Robust Certificate Security
80+
</h2>
81+
<p className="text-secondary mb-4">
82+
Security is a top priority for us. We have designed CodeGate's
83+
local certificate management with security in mind, balanced
84+
against ease of use.
85+
</p>
86+
<p className="text-secondary">
87+
We always seek to improve and balance security, privacy, and
88+
usability.
89+
</p>
90+
</CardBody>
91+
</Card>
92+
93+
<Card className="mb-8">
94+
<CardBody>
95+
<div className="flex justify-center mb-4">
96+
<KeySecurityIcon />
11897
</div>
119-
<div>
120-
<h3 className="font-semibold text-lg mb-2">
121-
Secure SSL/TLS configuration
122-
</h3>
123-
<p className="text-secondary mb-2">
124-
CodeGate's SSL context is configured to enforce the latest
125-
security standards, including strong cipher suites and
126-
disabling outdated protocols. This ensures secure and
127-
efficient encrypted communications.
128-
</p>
98+
<h2 className="text-xl font-semibold mb-4">
99+
Key security features
100+
</h2>
101+
<div className="space-y-6">
102+
<div>
103+
<h3 className="font-semibold text-lg mb-2">
104+
Per-domain certificate generation
105+
</h3>
106+
<p className="text-secondary mb-2">
107+
Instead of using wildcard certificates, CodeGate generates a
108+
unique certificate for each domain. This approach minimizes
109+
security risks by limiting the impact of any single
110+
certificate compromise.
111+
</p>
112+
</div>
113+
<div>
114+
<h3 className="font-semibold text-lg mb-2">
115+
High-strength encryption with 4096-bit RSA keys
116+
</h3>
117+
<p className="text-secondary mb-2">
118+
CodeGate utilizes 4096-bit RSA keys for certificate
119+
authority operations, providing enhanced security compared
120+
to standard 2048-bit keys. The increased key length
121+
significantly reduces the risk of brute-force attacks,
122+
ensuring long-term protection for your data. To balance
123+
performance, 2048-bit keys are used for server certificates.
124+
</p>
125+
</div>
126+
<div>
127+
<h3 className="font-semibold text-lg mb-2">
128+
Secure SSL/TLS configuration
129+
</h3>
130+
<p className="text-secondary mb-2">
131+
CodeGate's SSL context is configured to enforce the latest
132+
security standards, including strong cipher suites and
133+
disabling outdated protocols. This ensures secure and
134+
efficient encrypted communications.
135+
</p>
136+
</div>
137+
<div>
138+
<h3 className="font-semibold text-lg mb-2">
139+
Certificate caching and management
140+
</h3>
141+
<p className="text-secondary mb-2">
142+
Certificates are cached efficiently to optimize performance
143+
without compromising security. Additionally, mechanisms are
144+
in place to manage certificate lifecycle and prevent
145+
resource exhaustion.
146+
</p>
147+
</div>
148+
</div>
149+
</CardBody>
150+
</Card>
151+
152+
<Card className="mb-8">
153+
<CardBody>
154+
<div className="flex justify-center mb-4">
155+
<OpenSourceIcon />
129156
</div>
130-
<div>
131-
<h3 className="font-semibold text-lg mb-2">
132-
Certificate caching and management
133-
</h3>
134-
<p className="text-secondary mb-2">
135-
Certificates are cached efficiently to optimize performance
136-
without compromising security. Additionally, mechanisms are in
137-
place to manage certificate lifecycle and prevent resource
138-
exhaustion.
157+
<h2 className="text-xl font-semibold mb-4">
158+
Open source and community engagement
159+
</h2>
160+
<div className="space-y-4">
161+
<p className="text-secondary">
162+
Security has been a fundamental consideration throughout the
163+
development of CodeGate. Our comprehensive approach ensures
164+
that your development environment remains secure without
165+
sacrificing functionality or performance.
166+
</p>
167+
<p className="text-secondary">
168+
We believe in transparency and continuous improvement. By
169+
making our code open source, we invite the global security
170+
community to review, audit, and contribute to enhancing our
171+
security measures.
172+
</p>
173+
<p className="text-secondary">
174+
If you discover a security vulnerability or have suggestions
175+
for improvement, please reach out to us at{" "}
176+
<a
177+
href="mailto:[email protected]"
178+
className="text-brand-600 hover:text-brand-800 underline"
179+
>
180+
[email protected]
181+
</a>
182+
. Your contributions help us maintain the highest security
183+
standards.
184+
</p>
185+
<p className="text-secondary">
186+
Explore our codebase on{" "}
187+
<a
188+
href="https://github.com/stacklok/codegate"
189+
target="_blank"
190+
rel="noopener noreferrer"
191+
className="text-brand-600 hover:text-brand-800 underline"
192+
>
193+
GitHub
194+
</a>{" "}
195+
and join our community to help ensure CodeGate is secure and
196+
reliable for everyone.
139197
</p>
140198
</div>
141-
</div>
142-
</CardBody>
143-
</Card>
144-
145-
<Card className="mb-8">
146-
<CardBody>
147-
<div className="flex justify-center mb-4">
148-
<OpenSourceIcon />
149-
</div>
150-
<h2 className="text-xl font-semibold mb-4">
151-
Open source and community engagement
152-
</h2>
153-
<div className="space-y-4">
154-
<p className="text-secondary">
155-
Security has been a fundamental consideration throughout the
156-
development of CodeGate. Our comprehensive approach ensures that
157-
your development environment remains secure without sacrificing
158-
functionality or performance.
159-
</p>
160-
<p className="text-secondary">
161-
We believe in transparency and continuous improvement. By making
162-
our code open source, we invite the global security community to
163-
review, audit, and contribute to enhancing our security
164-
measures.
165-
</p>
166-
<p className="text-secondary">
167-
If you discover a security vulnerability or have suggestions for
168-
improvement, please reach out to us at{" "}
169-
<a
170-
href="mailto:[email protected]"
171-
className="text-brand-600 hover:text-brand-800 underline"
172-
>
173-
[email protected]
174-
</a>
175-
. Your contributions help us maintain the highest security
176-
standards.
177-
</p>
178-
<p className="text-secondary">
179-
Explore our codebase on{" "}
180-
<a
181-
href="https://github.com/stacklok/codegate"
182-
target="_blank"
183-
rel="noopener noreferrer"
184-
className="text-brand-600 hover:text-brand-800 underline"
185-
>
186-
GitHub
187-
</a>{" "}
188-
and join our community to help ensure CodeGate is secure and
189-
reliable for everyone.
190-
</p>
191-
</div>
192-
</CardBody>
193-
</Card>
199+
</CardBody>
200+
</Card>
201+
</div>
194202
</div>
195-
</div>
203+
</>
196204
);
197205
}

0 commit comments

Comments
 (0)