feat(docs): upgrade installation, dashboard, and certificate request guides with premium UI and assets

This commit is contained in:
dyzulk
2026-01-08 17:29:59 +07:00
parent 696a4c53d1
commit 03355781be
25 changed files with 1600 additions and 201 deletions

5
pages/_app.tsx Normal file
View File

@@ -0,0 +1,5 @@
import '../styles/globals.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}

View File

@@ -1,31 +1,52 @@
import { Steps, Callout, Cards, Card } from 'nextra/components'
import { FileBadge, ShieldCheck, Globe, Code } from 'lucide-react'
# Requesting a New Certificate
TrustLab allows you to request private SSL/TLS certificates for various internal uses.
TrustLab provides a streamlined wizard to generate private SSL/TLS certificates for your internal infrastructure.
## Prerequisites
- You must have an active TrustLab account.
- You must have the **Root CA** installed on your machine.
Before starting, ensure you have:
* Active TrustLab account access.
* **Root CA** installed on your machine (to trust the generated certs).
## Step-by-Step Guide
---
1. **Log in to Dashboard**
Navigate to the TrustLab Dashboard and login with your credentials.
<Steps>
### 1. Open Certificates Menu
Navigate to the **Certificates** page. This view lists all your active and expired certificates. Click the **"Generate New"** (or "+") button to start.
2. **Navigate to "New Certificate"**
Click on the **"New Request"** button in the top navigation bar or the main dashboard card.
![Certificates List](/images/guide/certificates-screen.png)
3. **Select Certificate Profile**
Choose the profile that matches your need:
- **Internal Web Server**: For HTTPS on internal tools (e.g., specific IP or `.local` domains).
- **User / S/MIME**: For email signing and encryption.
- **Code Signing**: For signing scripts and executables.
### 2. Enter Domain Details (Default Mode)
By default, you only need to provide the Identity. The system will auto-fill the Organization & Location metadata.
4. **Fill in Details**
- **Common Name (CN)**: The primary domain name or IP address (e.g., `internal.app` or `192.168.1.50`).
- **Subject Alternative Names (SANs)**: Additional domains or IPs (optional).
- **Validity Period**: Choose between 90 days, 1 year, or custom (if allowed).
![Default Generation Modal](/images/guide/certificates-generate-modal-default-metadata-screen.png)
* **Common Name (CN)**: The primary domain (e.g., `app.internal`).
* **SANs**: Additional domains or IP addresses.
* **Key Strength**: Choose the encryption level.
![Key Strength Selector](/images/guide/certificates-generate-modal-key-strength-focused-screen.png)
* **2048-bit**: Industry standard, compatible with all devices.
* **4096-bit**: Higher security, slightly more CPU intensive.
### 3. Customize CSR (Manual Control)
Toggle **"Manual Control"** if you need to override the default Identity fields (e.g., for a specific branch office or legal entity).
![Manual Control Modal](/images/guide/certificates-generate-modal-manual-control-screen.png)
* **Organization (O)**: Override the default company name.
* **Locality (L) / State (ST)**: Set specific location data.
* **Country (C)**: ISO Code.
### 4. Submit & Download
Click **Generate**.
* **Private Key**: The system will prompt you to download the `.key` file. **This is the only time it is available.**
* **Certificate**: The `.pem` / `.crt` file will be available for download immediately.
</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>
5. **Submit Request**
Click **"Submit"**. The system will process your request.
- If **Auto-Approval** is enabled for your role, the certificate is issued immediately.
- If **Manual Approval** is required, the status will be `PENDING` until a Manager approves it.

View File

@@ -1,5 +1,96 @@
import { Callout, Steps, Cards, Card } from 'nextra/components'
import { Monitor, Smartphone, LayoutDashboard, Key, Shield } from 'lucide-react'
# Accessing Dashboard
1. Navigate to [https://trustlab.dyzulk.com](https://trustlab.dyzulk.com).
2. Click "Login".
3. Use your SSO credentials or Magic Link.
The **TrustLab Dashboard** is your central command center for managing certificates. Here you can request new certificates, download keys, and manage existing ones.
![TrustLab Login Interface](/images/guide/login-screen.png)
## Authentication Methods
We prioritize security by offering modern, passwordless authentication options.
<Cards>
<Card icon={<Shield className="w-6 h-6" />} title="SSO (Google / GitHub)" href="#1-single-sign-on-sso" arrow />
<Card icon={<Key className="w-6 h-6" />} title="Magic Link (Email)" href="#2-magic-link" arrow />
</Cards>
### 1. Single Sign-On (SSO)
The fastest way to log in. Click **Continue with Google** or **Continue with GitHub**.
<Callout type="info" emoji="">
**SSO Behavior:**
* **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.
</Callout>
### 2. Magic Link
Secure, passwordless login via email.
<Steps>
### Enter Email
Input your registered email address in the login form and click **"Continue with Email"**.
### Check Inbox
You will receive an email with a unique, time-sensitive login link.
### Click to Verify
Click the **"Sign in to TrustLab"** button in the email. You will be instantly logged in to the dashboard.
</Steps>
<Callout type="warning" emoji="⏳">
**Expiration:** Magic links are valid for **15 minutes** only. If it expires, simply request a new one by entering your email again.
</Callout>
## Dashboard Overview
Upon successful login, you will land on the main dashboard.
![TrustLab Dashboard Overview](/images/guide/dashboard-screen.png)
This central hub allows you to access:
* **Active Certificates**: View all valid certificates issued to you.
* **Request Certificate**: The wizard to generate a new Private Key and CSR.
* **Revocation**: Interface to mark lost or compromised certificates as invalid.
## Registration
New users can create an account to start managing certificates.
![TrustLab Registration Interface](/images/guide/register-screen.png)
<Steps>
### Option A: Social Registration (Instant)
1. Click **Continue with Google** or **Continue with GitHub**.
2. **Set Password:** For security, you will be asked to create a password for your account.
![Set Password Screen](/images/guide/set-password-after-social-screen.png)
### Option B: Email Registration
1. Click **"Sign up"** or fill the form.
2. Provide your details and password.
3. **Verify Email:** Click the link sent to your inbox to activate.
</Steps>
## Password Recovery
If you lose access to your account, you can reset your password securely.
![TrustLab Forgot Password Interface](/images/guide/forgot-password-screen.png)
1. Click **"Forgot password?"** on the login screen.
2. Enter your registered email address.
3. Check your inbox for a password reset link.
4. Create a new password and log in.
## Troubleshooting
### I didn't receive the Magic Link
* **Check Spam/Junk**: It often lands there for corporate domains.
* **Wait 1-2 Minutes**: Email delivery can sometimes be delayed.
* **Whitelist Sender**: Add `@trustlab.dyzulk.com` to your email provider's **Safe Senders** list to prevent it from being blocked.
### Access Denied / User Not Found
* **Typos**: Double-check your email address.
* **Not Registered**: If you haven't created an account yet, please **Sign Up** first. You cannot log in via SSO if your email is not in our system (unless you use the Register flow).

View File

@@ -1,5 +1,5 @@
import { Tabs } from 'nextra/components'
import { Steps } from 'nextra/components'
import { Tabs, Steps, Cards, Card, Callout } from 'nextra/components'
import { Monitor, Smartphone } from 'lucide-react'
# Installing Root CA
@@ -36,9 +36,20 @@ Select your distribution to get the optimized installation command:
</Tabs.Tab>
</Tabs>
### Windows / macOS
* **Windows**: [Download Bundle Installer (.bat)](https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.bat) (Right-click > Run as Admin)
* **macOS/iOS**: [Download Configuration Profile (.mobileconfig)](https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.mobileconfig)
### Windows & Apple Ecosystem
<Cards>
<Card icon={<Monitor className="w-6 h-6" />} title="Windows Bundle Installer (.bat)" href="https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.bat" 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>
<Callout type="warning" emoji="⚠️">
**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 type="info" emoji="">
**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>
---