feat(docs): add view details guide, fix dashboard workflows, restore styling, and standardize icons

This commit is contained in:
dyzulk
2026-01-08 18:39:38 +07:00
parent 03355781be
commit 72b321fc3b
11 changed files with 84 additions and 36 deletions

View File

@@ -1,5 +1,6 @@
{ {
"request-new": "Requesting a Certificate", "request-new": "Requesting a Certificate",
"view-details": "View Details",
"download-install": "Download & Formats", "download-install": "Download & Formats",
"renewal": "Renewal Process", "renewal": "Renewal Process",
"revocation": "Revocation" "revocation": "Revocation"

View File

@@ -10,12 +10,16 @@ Once your certificate is issued, you can download it in various formats suitable
| **PFX / PKCS#12** | `.pfx`, `.p12` | IIS (Windows), Microsoft Exchange, Client Certificates (S/MIME). Contains both key and cert. | | **PFX / PKCS#12** | `.pfx`, `.p12` | IIS (Windows), Microsoft Exchange, Client Certificates (S/MIME). Contains both key and cert. |
| **JKS (Java)** | `.jks` | Java applications (Tomcat, Spring Boot). | | **JKS (Java)** | `.jks` | Java applications (Tomcat, Spring Boot). |
## How to Download ## How to Download (Copy & Save)
1. Go to **"My Certificates"** in the dashboard. The dashboard allows you to copy the raw certificate data directly.
2. Click on the certificate ID or the **"View"** button.
3. Scroll to the **"Downloads"** section. 1. Navigate to **"My Certificates"** and click the **View (Eye Icon)** button on your certificate.
4. Select the format you need and click **Download**. 2. **Certificate:** Scroll to the "Certificate (CRT)" section and click the **Copy Icon** in the top right. Paste this into a file named `domain.crt` or `domain.pem`.
3. **Private Key:** Scroll to the "Private Key (KEY)" section, click **Show**, then click the **Copy Icon**. Paste this into a file named `domain.key`.
> [!TIP]
> Use a plain text editor (Notepad, VS Code, Nano) to save these files. Do not use Word or Rich Text editors.
> [!WARNING] > [!WARNING]
> The **Private Key** is generated securely. If you lose it, you cannot recover it. You must revoke and re-issue the certificate. > The **Private Key** is generated securely. If you lose it, you cannot recover it. You must revoke and re-issue the certificate.

View File

@@ -8,14 +8,17 @@ You will receive an email notification:
- **7 days** before expiration. - **7 days** before expiration.
- **1 day** before expiration. - **1 day** before expiration.
## How to Renew ## How to Renew (Manual Re-issue)
1. Log in to TrustLab. To renew a certificate, you simply generate a fresh one with the same domain name.
2. Navigate to **"My Certificates"**.
3. Identify certificates marked with the **"Expiring Soon"** badge. 1. Go to **Certificates** and click **"Generate New"**.
4. Click the **"Renew"** button next to the certificate. 2. **Identity**: Enter the **same Common Name (CN)** as your expiring certificate.
5. Review the details (CN, SANs). You can add or remove SANs at this stage. 3. **Generate**: The system will issue a new certificate with a fresh validity period.
6. Click **Confirm Renewal**. 4. **Replace**: Download the new `.crt` (and `.key` if you didn't reuse the CSI) and replace the files on your server.
> [!NOTE]
> The old certificate will remain valid until it expires naturally. You can safely delete it after verifying the new one works.
## What Happens Next? ## What Happens Next?
- A **new certificate** is generated with a new validity period. - A **new certificate** is generated with a new validity period.

View File

@@ -1,5 +1,5 @@
import { Steps, Callout, Cards, Card } from 'nextra/components' import { Steps, Callout, Cards, Card } from 'nextra/components'
import { FileBadge, ShieldCheck, Globe, Code } from 'lucide-react' import { FileBadge, ShieldCheck, Globe, Code, Save, AlertTriangle } from 'lucide-react'
# Requesting a New Certificate # Requesting a New Certificate
@@ -40,13 +40,14 @@ Toggle **"Manual Control"** if you need to override the default Identity fields
* **Country (C)**: ISO Code. * **Country (C)**: ISO Code.
### 4. Submit & Download ### 4. Generate & Save
Click **Generate**. Click **Generate**.
* **Private Key**: The system will prompt you to download the `.key` file. **This is the only time it is available.** * The **Certificate (.pem)** and **Private Key (.key)** will be generated.
* **Certificate**: The `.pem` / `.crt` file will be available for download immediately. * You can copy them immediately or access them later from the **Certificate Details** page.
<Callout type="info" emoji={<Save className="w-5 h-5" />}>
**Storage:** Your Private Key is securely stored. You can view it anytime by clicking **"View Details"** on the certificate list.
</Callout>
</Steps> </Steps>
<Callout type="warning" emoji="⚠️">
**Security:** Your **Private Key** is shown/downloaded **ONLY ONCE**. Store it securely immediately. If lost, you must revoke and reissue the certificate.
</Callout>

View File

@@ -7,17 +7,16 @@ Revocation invalidates a certificate before its expiration date. This is critica
- **Service Change**: The domain name effectively no longer belongs to the service. - **Service Change**: The domain name effectively no longer belongs to the service.
- **Mistake**: The certificate was issued with incorrect details. - **Mistake**: The certificate was issued with incorrect details.
## How to Revoke ## How to Remove / Revoke
1. Open the Certificate Detail page. If a certificate is compromised or no longer needed, you can remove it from the system.
2. Click the **"Revoke"** button (Danger Zone).
3. Select a **Reason Code**: 1. Go to the **Certificates** list.
- `unspecified` (0) 2. Identify the certificate to remove.
- `keyCompromise` (1) 3. Click the **Trash Icon** (Delete) on the right side of the row.
- `cACompromise` (2) 4. **Confirm**: Type `DELETE` in the confirmation modal to permanently remove the certificate and its private key from TrustLab.
- `superseded` (4)
- `cessationOfOperation` (5) ![Delete Certificate Action](/images/guide/certificates_list_view_1767869137654.png)
4. Confirm the action.
## CRL (Certificate Revocation List) ## CRL (Certificate Revocation List)
Once revoked, the certificate serial number is added to the TrustLab CRL. All clients checking the CRL will immediately reject the certificate. Once revoked, the certificate serial number is added to the TrustLab CRL. All clients checking the CRL will immediately reject the certificate.

View File

@@ -0,0 +1,40 @@
import { Callout } from 'nextra/components'
import { ShieldAlert } from 'lucide-react'
# Viewing Certificate Details
After generating a certificate, you can view its full metadata, download the files, or retrieve the Private Key at any time.
## Certificate List
The main **Certificates** page lists all issuing certificates.
* **Status Indicators**: Quickly see if a cert is `Valid`, `Expired`, or `Revoked`.
* **Search**: Filter by Common Name or Serial Number.
![Certificate List](/images/guide/certificates_list_view_1767869137654.png)
## Details View
Clicking the **View Icon** (Eye) or the row opens the detailed management view.
![Certificate Management View](/images/guide/certificate_management_view_1767869044987.png)
### 1. Metadata
The top section displays critical information:
* **Validity Period**: Start and End dates.
* **Issuer**: The CA that signed this certificate.
* **Subject Info**: Organization, Location, and Country.
* **Key Strength**: 2048-bit or 4096-bit.
### 2. Certificate (CRT)
This text box contains the public certificate in **PEM format** (`-----BEGIN CERTIFICATE-----`).
* **Copy**: Click the **Copy Icon** to copy the full block.
* This is safe to share publicly.
### 3. Private Key (KEY)
This section contains your secret Private Key.
* **Hidden by Default**: The specific key content is blurred/hidden for security.
* **Show**: Click the **"Show"** button to reveal the key.
* **Copy**: Click the **Copy Icon** to retrieve it.
<Callout type="error" emoji={<ShieldAlert className="w-5 h-5" />}>
**Security Warning:** Never share your Private Key. Anyone with this key can impersonate your server.
</Callout>

View File

@@ -1,5 +1,5 @@
import { Callout, Steps, Cards, Card } from 'nextra/components' import { Callout, Steps, Cards, Card } from 'nextra/components'
import { Monitor, Smartphone, LayoutDashboard, Key, Shield } from 'lucide-react' import { Monitor, Smartphone, LayoutDashboard, Key, Shield, Info, Clock, AlertTriangle } from 'lucide-react'
# Accessing Dashboard # Accessing Dashboard
@@ -19,7 +19,7 @@ We prioritize security by offering modern, passwordless authentication options.
### 1. Single Sign-On (SSO) ### 1. Single Sign-On (SSO)
The fastest way to log in. Click **Continue with Google** or **Continue with GitHub**. The fastest way to log in. Click **Continue with Google** or **Continue with GitHub**.
<Callout type="info" emoji=""> <Callout type="info" emoji={<Info className="w-5 h-5" />}>
**SSO Behavior:** **SSO Behavior:**
* **Existing Users:** You can only Log In via SSO if your social email address is already registered/linked to your account. * **Existing Users:** You can only Log In via SSO if your social email address is already registered/linked to your account.
* **New Users:** You can **Register** a new account instantly by clicking the Social Login buttons on the *Sign In* or *Register* page. * **New Users:** You can **Register** a new account instantly by clicking the Social Login buttons on the *Sign In* or *Register* page.
@@ -39,7 +39,7 @@ You will receive an email with a unique, time-sensitive login link.
Click the **"Sign in to TrustLab"** button in the email. You will be instantly logged in to the dashboard. Click the **"Sign in to TrustLab"** button in the email. You will be instantly logged in to the dashboard.
</Steps> </Steps>
<Callout type="warning" emoji="⏳"> <Callout type="warning" emoji={<Clock className="w-5 h-5" />}>
**Expiration:** Magic links are valid for **15 minutes** only. If it expires, simply request a new one by entering your email again. **Expiration:** Magic links are valid for **15 minutes** only. If it expires, simply request a new one by entering your email again.
</Callout> </Callout>

View File

@@ -1,5 +1,5 @@
import { Tabs, Steps, Cards, Card, Callout } from 'nextra/components' import { Tabs, Steps, Cards, Card, Callout } from 'nextra/components'
import { Monitor, Smartphone } from 'lucide-react' import { Monitor, Smartphone, AlertTriangle, Info } from 'lucide-react'
# Installing Root CA # Installing Root CA
@@ -43,11 +43,11 @@ Select your distribution to get the optimized installation command:
<Card icon={<Smartphone className="w-6 h-6" />} title="macOS / iOS Profile (.mobileconfig)" href="https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.mobileconfig" arrow /> <Card icon={<Smartphone className="w-6 h-6" />} title="macOS / iOS Profile (.mobileconfig)" href="https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.mobileconfig" arrow />
</Cards> </Cards>
<Callout type="warning" emoji="⚠️"> <Callout type="warning" emoji={<AlertTriangle className="w-5 h-5" />}>
**Windows Users:** You **MUST** right-click the `.bat` file and select **"Run as Administrator"**. Double-clicking directly will likely fail due to permission restrictions. **Windows Users:** You **MUST** right-click the `.bat` file and select **"Run as Administrator"**. Double-clicking directly will likely fail due to permission restrictions.
</Callout> </Callout>
<Callout type="info" emoji=""> <Callout type="info" emoji={<Info className="w-5 h-5" />}>
**Apple Users:** After downloading the profile, go to **System Settings > Privacy & Security > Profiles** to install it. For iOS, see the *Individual Installation* section below for detailed trust steps. **Apple Users:** After downloading the profile, go to **System Settings > Privacy & Security > Profiles** to install it. For iOS, see the *Individual Installation* section below for detailed trust steps.
</Callout> </Callout>

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB