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

Fix: TS error and Feat: Add multi-distro support

Browse Source
This commit is contained in:
dyzulk
2026-01-08 13:02:20 +07:00
parent 6e5eed5706
commit 1bdd8f51fb
1 changed files with 67 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -128,7 +128,7 @@ function CliSnippet({ label, command, t }: { label: string, command: string, t:
); );
} }
function OsGuideContent({ title, steps, selectedOs, certificates, t }: { title: string, steps: string[], selectedOs: string, certificates: CaCertificate[], t: any }) { function OsGuideContent({ title, steps, selectedOs, certificates, t, linuxDistro, setLinuxDistro }: { title: string, steps: string[], selectedOs: string, certificates: CaCertificate[], t: any, linuxDistro?: string, setLinuxDistro?: (distro: any) => void }) {
return ( return (
<div className="p-8 bg-white dark:bg-gray-800 rounded-[2rem] border border-gray-100 dark:border-gray-700 shadow-sm space-y-10 animate-in fade-in slide-in-from-bottom-2 duration-500"> <div className="p-8 bg-white dark:bg-gray-800 rounded-[2rem] border border-gray-100 dark:border-gray-700 shadow-sm space-y-10 animate-in fade-in slide-in-from-bottom-2 duration-500">
<div> <div>
@@ -171,11 +171,43 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t }: { title:
{(selectedOs === 'linux' || selectedOs === 'windows' || selectedOs === 'macos') && ( {(selectedOs === 'linux' || selectedOs === 'windows' || selectedOs === 'macos') && (
<div className="space-y-4"> <div className="space-y-4">
{(selectedOs === 'linux') && ( {(selectedOs === 'linux') && (
<CliSnippet <div className="space-y-4">
label={t('bundle_cli_label')} <div className="flex flex-wrap gap-2 mb-4">
command={`sudo apt update && sudo apt install -y curl && curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`} <button onClick={() => setLinuxDistro?.('debian')} className={`px-3 py-1.5 rounded-lg text-xs 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-500 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Debian/Ubuntu</button>
t={t} <button onClick={() => setLinuxDistro?.('rhel')} className={`px-3 py-1.5 rounded-lg text-xs 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-500 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>CentOS/RHEL</button>
/> <button onClick={() => setLinuxDistro?.('arch')} className={`px-3 py-1.5 rounded-lg text-xs 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-500 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Arch Linux</button>
<button onClick={() => setLinuxDistro?.('other')} className={`px-3 py-1.5 rounded-lg text-xs 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-500 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Other</button>
</div>
{linuxDistro === 'debian' && (
<CliSnippet
label={`${t('bundle_cli_label')} (Debian/Ubuntu)`}
command={`sudo apt update && sudo apt install -y curl && curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`}
t={t}
/>
)}
{linuxDistro === 'rhel' && (
<CliSnippet
label={`${t('bundle_cli_label')} (RHEL/CentOS)`}
command={`(sudo yum install -y curl || sudo dnf install -y curl) && curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`}
t={t}
/>
)}
{linuxDistro === 'arch' && (
<CliSnippet
label={`${t('bundle_cli_label')} (Arch Linux)`}
command={`sudo pacman -Sy --noconfirm curl && curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`}
t={t}
/>
)}
{linuxDistro === 'other' && (
<CliSnippet
label={`${t('bundle_cli_label')} (Universal)`}
command={`curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`}
t={t}
/>
)}
</div>
)} )}
{(selectedOs === 'windows' || selectedOs === 'macos') && ( {(selectedOs === 'windows' || selectedOs === 'macos') && (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@@ -232,7 +264,7 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t }: { title:
); );
} }
function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertificate, isRoot: boolean, t: any, selectedOs: string, setSelectedOs: (os: any) => void }) { 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 }) {
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 */}
@@ -310,6 +342,30 @@ function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertif
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>
@@ -392,6 +448,7 @@ export default function HomeClient() {
const [certificates, setCertificates] = useState<CaCertificate[]>([]); const [certificates, setCertificates] = useState<CaCertificate[]>([]);
const [loadingCerts, setLoadingCerts] = useState(true); const [loadingCerts, setLoadingCerts] = useState(true);
const [selectedOs, setSelectedOs] = useState<'windows' | 'macos' | 'linux' | 'mobile'>('windows'); const [selectedOs, setSelectedOs] = useState<'windows' | 'macos' | 'linux' | 'mobile'>('windows');
const [linuxDistro, setLinuxDistro] = useState<'debian' | 'rhel' | 'arch' | 'other'>('debian');
useEffect(() => { useEffect(() => {
const fetchCertificates = async () => { const fetchCertificates = async () => {
@@ -577,7 +634,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} /> <CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} />
))} ))}
</div> </div>
</div> </div>
@@ -592,7 +649,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} /> <CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} />
))} ))}
</div> </div>
</div> </div>
@@ -616,7 +673,7 @@ export default function HomeClient() {
<div className="space-y-4"> <div className="space-y-4">
{selectedOs === 'windows' && <OsGuideContent title="Windows Installation" steps={t.raw('guide_steps_windows')} selectedOs={selectedOs} certificates={certificates} t={t} />} {selectedOs === 'windows' && <OsGuideContent title="Windows Installation" steps={t.raw('guide_steps_windows')} selectedOs={selectedOs} certificates={certificates} t={t} />}
{selectedOs === 'macos' && <OsGuideContent title="macOS Installation" steps={t.raw('guide_steps_macos')} selectedOs={selectedOs} certificates={certificates} t={t} />} {selectedOs === 'macos' && <OsGuideContent title="macOS Installation" steps={t.raw('guide_steps_macos')} selectedOs={selectedOs} certificates={certificates} t={t} />}
{selectedOs === 'linux' && <OsGuideContent title="Linux Installation" steps={t.raw('guide_steps_linux')} selectedOs={selectedOs} certificates={certificates} t={t} />} {selectedOs === 'linux' && <OsGuideContent title="Linux Installation" steps={t.raw('guide_steps_linux')} selectedOs={selectedOs} certificates={certificates} t={t} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} />}
{selectedOs === 'mobile' && <OsGuideContent title="Mobile Installation" steps={t.raw('guide_steps_mobile')} selectedOs={selectedOs} certificates={certificates} t={t} />} {selectedOs === 'mobile' && <OsGuideContent title="Mobile Installation" steps={t.raw('guide_steps_mobile')} selectedOs={selectedOs} certificates={certificates} t={t} />}
</div> </div>
</div> </div>