mirror of
https://github.com/dyzulk/trustlab.git
synced 2026-01-26 13:32:06 +07:00
Fix: TS error and Feat: Add multi-distro support
This commit is contained in:
dyzulk
@@ -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 (
|
||||
<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>
|
||||
@@ -171,12 +171,44 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t }: { title:
|
||||
{(selectedOs === 'linux' || selectedOs === 'windows' || selectedOs === 'macos') && (
|
||||
<div className="space-y-4">
|
||||
{(selectedOs === 'linux') && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<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>
|
||||
<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')}
|
||||
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') && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<DownloadBtn
|
||||
@@ -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 (
|
||||
<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 */}
|
||||
@@ -310,6 +342,30 @@ function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertif
|
||||
variant="gray"
|
||||
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>
|
||||
@@ -392,6 +448,7 @@ export default function HomeClient() {
|
||||
const [certificates, setCertificates] = useState<CaCertificate[]>([]);
|
||||
const [loadingCerts, setLoadingCerts] = useState(true);
|
||||
const [selectedOs, setSelectedOs] = useState<'windows' | 'macos' | 'linux' | 'mobile'>('windows');
|
||||
const [linuxDistro, setLinuxDistro] = useState<'debian' | 'rhel' | 'arch' | 'other'>('debian');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCertificates = async () => {
|
||||
@@ -577,7 +634,7 @@ export default function HomeClient() {
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-8 w-full max-w-3xl px-4">
|
||||
{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>
|
||||
@@ -592,7 +649,7 @@ export default function HomeClient() {
|
||||
</h3>
|
||||
<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) => (
|
||||
<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>
|
||||
@@ -616,7 +673,7 @@ export default function HomeClient() {
|
||||
<div className="space-y-4">
|
||||
{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 === '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} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user