dyzulk/trustlab
1
0
Fork 0
mirror of https://github.com/dyzulk/trustlab.git synced 2026-01-26 05:25:36 +07:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Simplify CaCard UI and move Smart CLI to Install Guide

Browse Source
This commit is contained in:
dyzulk
2026-01-08 13:27:06 +07:00
parent 1bdd8f51fb
commit a42b544798
1 changed files with 45 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/app/(public)/HomeClient.tsx
View File

@@ -237,26 +237,49 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t, linuxDistro
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('guide_linux_shortcut_desc')}</p> <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('guide_linux_shortcut_desc')}</p>
</div> </div>
{/* Distro Selection for Individual Certs */}
<div className="flex flex-wrap gap-2 mb-2">
<button onClick={() => setLinuxDistro?.('debian')} className={`px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wider font-bold border transition-colors ${linuxDistro === 'debian' ? 'bg-brand-50 border-brand-200 text-brand-700 dark:bg-brand-500/10 dark:border-brand-500/20 dark:text-brand-400' : 'bg-transparent border-transparent text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Debian</button>
<button onClick={() => setLinuxDistro?.('rhel')} className={`px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wider font-bold border transition-colors ${linuxDistro === 'rhel' ? 'bg-brand-50 border-brand-200 text-brand-700 dark:bg-brand-500/10 dark:border-brand-500/20 dark:text-brand-400' : 'bg-transparent border-transparent text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>RHEL</button>
<button onClick={() => setLinuxDistro?.('arch')} className={`px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wider font-bold border transition-colors ${linuxDistro === 'arch' ? 'bg-brand-50 border-brand-200 text-brand-700 dark:bg-brand-500/10 dark:border-brand-500/20 dark:text-brand-400' : 'bg-transparent border-transparent text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Arch</button>
<button onClick={() => setLinuxDistro?.('other')} className={`px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wider font-bold border transition-colors ${linuxDistro === 'other' ? 'bg-brand-50 border-brand-200 text-brand-700 dark:bg-brand-500/10 dark:border-brand-500/20 dark:text-brand-400' : 'bg-transparent border-transparent text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Universal</button>
</div>
<div className="grid grid-cols-1 gap-6"> <div className="grid grid-cols-1 gap-6">
{/* Root CAs */} {/* Function to generate smart command */}
{certificates.filter(c => c.type === 'root').map(c => ( {(() => {
<CliSnippet const getSmartCommand = (url: string | null) => {
key={c.serial} if (!url) return '';
label={`${t('root_ca')}: ${c.name}`} if (linuxDistro === 'debian') return `sudo apt install -y curl && curl -sL ${url} | sudo bash`;
command={c.linux_cdn_url ? `curl -sL ${c.linux_cdn_url} | sudo bash` : ''} if (linuxDistro === 'rhel') return `(sudo yum install -y curl || sudo dnf install -y curl) && curl -sL ${url} | sudo bash`;
t={t} if (linuxDistro === 'arch') return `sudo pacman -Sy curl && curl -sL ${url} | sudo bash`;
/> return `curl -sL ${url} | sudo bash`;
))} };
{/* Intermediate CAs */} return (
{certificates.filter(c => c.type !== 'root').map(c => ( <>
<CliSnippet {/* Root CAs */}
key={c.serial} {certificates.filter(c => c.type === 'root').map(c => (
label={`${t('intermediate_ca')}: ${c.name}`} <CliSnippet
command={c.linux_cdn_url ? `curl -sL ${c.linux_cdn_url} | sudo bash` : ''} key={c.serial}
t={t} label={`${t('root_ca')}: ${c.name} [${linuxDistro?.toUpperCase()}]`}
/> command={getSmartCommand(c.linux_cdn_url || null)}
))} t={t}
/>
))}
{/* Intermediate CAs */}
{certificates.filter(c => c.type !== 'root').map(c => (
<CliSnippet
key={c.serial}
label={`${t('intermediate_ca')}: ${c.name} [${linuxDistro?.toUpperCase()}]`}
command={getSmartCommand(c.linux_cdn_url || null)}
t={t}
/>
))}
</>
);
})()}
</div> </div>
</div> </div>
)} )}
@@ -264,7 +287,7 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t, linuxDistro
); );
} }
function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs, linuxDistro, setLinuxDistro }: { cert: CaCertificate, isRoot: boolean, t: any, selectedOs: string, setSelectedOs: (os: any) => void, linuxDistro?: string, setLinuxDistro?: (distro: any) => void }) { function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertificate, isRoot: boolean, t: any, selectedOs: string, setSelectedOs: (os: any) => void }) {
return ( return (
<div className="group relative bg-white/40 dark:bg-gray-900/40 backdrop-blur-xl rounded-[2.5rem] p-8 border border-white/50 dark:border-gray-800/50 shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-1"> <div className="group relative bg-white/40 dark:bg-gray-900/40 backdrop-blur-xl rounded-[2.5rem] p-8 border border-white/50 dark:border-gray-800/50 shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
{/* Sync Status Badge */} {/* Sync Status Badge */}
@@ -342,30 +365,6 @@ function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs, linuxDistro, setLi
variant="gray" variant="gray"
isFullWidth isFullWidth
/> />
{selectedOs === 'linux' && setLinuxDistro && (
<div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
<div className="flex flex-wrap gap-2 mb-3 justify-center">
<button onClick={() => setLinuxDistro('debian')} className={`px-2 py-1 rounded text-[10px] font-bold border ${linuxDistro === 'debian' ? 'bg-brand-50 border-brand-200 text-brand-600' : 'bg-transparent border-transparent text-gray-400'}`}>Debian</button>
<button onClick={() => setLinuxDistro('rhel')} className={`px-2 py-1 rounded text-[10px] font-bold border ${linuxDistro === 'rhel' ? 'bg-brand-50 border-brand-200 text-brand-600' : 'bg-transparent border-transparent text-gray-400'}`}>RHEL</button>
<button onClick={() => setLinuxDistro('arch')} className={`px-2 py-1 rounded text-[10px] font-bold border ${linuxDistro === 'arch' ? 'bg-brand-50 border-brand-200 text-brand-600' : 'bg-transparent border-transparent text-gray-400'}`}>Arch</button>
<button onClick={() => setLinuxDistro('other')} className={`px-2 py-1 rounded text-[10px] font-bold border ${linuxDistro === 'other' ? 'bg-brand-50 border-brand-200 text-brand-600' : 'bg-transparent border-transparent text-gray-400'}`}>Other</button>
</div>
{linuxDistro === 'debian' && (
<CliSnippet label="Debian/Ubuntu" command={`sudo apt install -y curl && curl -sL ${cert.linux_cdn_url} | sudo bash`} t={t} />
)}
{linuxDistro === 'rhel' && (
<CliSnippet label="CentOS/RHEL" command={`(sudo yum install -y curl || sudo dnf install -y curl) && curl -sL ${cert.linux_cdn_url} | sudo bash`} t={t} />
)}
{linuxDistro === 'arch' && (
<CliSnippet label="Arch Linux" command={`sudo pacman -Sy curl && curl -sL ${cert.linux_cdn_url} | sudo bash`} t={t} />
)}
{linuxDistro === 'other' && (
<CliSnippet label="Universal" command={`curl -sL ${cert.linux_cdn_url} | sudo bash`} t={t} />
)}
</div>
)}
</div> </div>
)} )}
</div> </div>
@@ -634,7 +633,7 @@ export default function HomeClient() {
</h3> </h3>
<div className="grid grid-cols-1 gap-8 w-full max-w-3xl px-4"> <div className="grid grid-cols-1 gap-8 w-full max-w-3xl px-4">
{familyCerts.filter(c => c.type === 'root').map((cert) => ( {familyCerts.filter(c => c.type === 'root').map((cert) => (
<CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} /> <CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
))} ))}
</div> </div>
</div> </div>
@@ -649,7 +648,7 @@ export default function HomeClient() {
</h3> </h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-6xl px-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-6xl px-4">
{familyCerts.filter(c => c.type !== 'root').map((cert) => ( {familyCerts.filter(c => c.type !== 'root').map((cert) => (
<CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} /> <CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
))} ))}
</div> </div>
</div> </div>