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

feat: show issuer_name in CA tables and support outline variant in Badge

Browse Source
This commit is contained in:
dyzulk
2026-01-07 09:37:02 +07:00
parent cde7e66b73
commit 2690eef65b
5 changed files with 50 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/admin/ArchiveManagementTable.tsx
View File

@@ -22,6 +22,7 @@ interface CaCertificate {
valid_to: string;
status: string;
is_latest: boolean;
issuer_name?: string;
}
interface ArchiveManagementTableProps {
@@ -80,6 +81,9 @@ export default function ArchiveManagementTable({
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
{t("common_name_th")}
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
{t("issuer_th")}
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
{t("validity_th")}
</TableCell>
@@ -104,6 +108,17 @@ export default function ArchiveManagementTable({
<span className="text-[10px] text-gray-400">{formatType(cert.ca_type)}</span>
</div>
</TableCell>
<TableCell className="px-5 py-4 text-start">
{cert.issuer_name === "Self-Signed" ? (
<Badge size="sm" color="info" variant="outline" className="text-[10px]">
{t("self_signed")}
</Badge>
) : (
<span className="text-[10px] text-gray-600 dark:text-gray-400 italic">
{cert.issuer_name || "-"}
</span>
)}
</TableCell>
<TableCell className="px-5 py-4 text-start text-theme-xs text-gray-500 dark:text-gray-400">
<div className="flex flex-col">
<span>{new Date(cert.valid_from).toLocaleDateString()}</span>
@@ -140,7 +155,7 @@ export default function ArchiveManagementTable({
))}
{filteredCertificates.length === 0 && (
<TableRow>
<TableCell colSpan={5} className="px-5 py-10 text-center text-gray-500 dark:text-gray-400">
<TableCell colSpan={6} className="px-5 py-10 text-center text-gray-500 dark:text-gray-400">
No versions found.
</TableCell>
</TableRow>

17
src/components/admin/RootCaTable.tsx
View File

@@ -21,6 +21,7 @@ interface CaCertificate {
valid_from: string;
valid_to: string;
status: string;
issuer_name?: string;
}
interface RootCaTableProps {
@@ -79,6 +80,9 @@ export default function RootCaTable({
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
{t("common_name_th")}
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
{t("issuer_th")}
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
{t("serial_th")}
</TableCell>
@@ -103,6 +107,17 @@ export default function RootCaTable({
<TableCell className="px-5 py-4 text-start text-theme-sm text-gray-600 dark:text-gray-400">
{cert.common_name}
</TableCell>
<TableCell className="px-5 py-4 text-start">
{cert.issuer_name === "Self-Signed" ? (
<Badge size="sm" color="info" variant="outline">
{t("self_signed")}
</Badge>
) : (
<span className="text-theme-sm text-gray-600 dark:text-gray-400 italic">
{cert.issuer_name || "-"}
</span>
)}
</TableCell>
<TableCell className="px-5 py-4 text-start font-mono text-theme-xs text-gray-500 dark:text-gray-400">
{cert.serial_number}
</TableCell>
@@ -127,7 +142,7 @@ export default function RootCaTable({
))}
{filteredCertificates.length === 0 && (
<TableRow>
<TableCell colSpan={6} className="px-5 py-10 text-center text-gray-500 dark:text-gray-400">
<TableCell colSpan={7} className="px-5 py-10 text-center text-gray-500 dark:text-gray-400">
{searchTerm ? t("no_ca_search", { term: searchTerm }) : t("no_ca_found")}
</TableCell>
</TableRow>

16
src/components/ui/badge/Badge.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
type BadgeVariant = "light" | "solid";
type BadgeVariant = "light" | "solid" | "outline";
type BadgeSize = "sm" | "md";
type BadgeColor =
| "primary"
@@ -18,6 +18,7 @@ interface BadgeProps {
startIcon?: React.ReactNode; // Icon at the start
endIcon?: React.ReactNode; // Icon at the end
children: React.ReactNode; // Badge content
className?: string; // Additional classes
}
const Badge: React.FC<BadgeProps> = ({
@@ -27,6 +28,7 @@ const Badge: React.FC<BadgeProps> = ({
startIcon,
endIcon,
children,
className = "",
}) => {
const baseStyles =
"inline-flex items-center px-2.5 py-0.5 justify-center gap-1 rounded-full font-medium";
@@ -61,6 +63,16 @@ const Badge: React.FC<BadgeProps> = ({
light: "bg-gray-400 dark:bg-white/5 text-white dark:text-white/80",
dark: "bg-gray-700 text-white dark:text-white",
},
outline: {
primary: "border border-brand-500 text-brand-500 dark:text-brand-400",
success:
"border border-success-500 text-success-600 dark:text-success-500",
error: "border border-error-500 text-error-600 dark:text-error-500",
warning: "border border-warning-500 text-warning-600 dark:text-orange-400",
info: "border border-blue-light-500 text-blue-light-500 dark:text-blue-light-500",
light: "border border-gray-200 text-gray-700 dark:border-white/10 dark:text-white/80",
dark: "border border-gray-700 text-white dark:border-white/20 dark:text-white",
},
};
// Get styles based on size and color variant
@@ -68,7 +80,7 @@ const Badge: React.FC<BadgeProps> = ({
const colorStyles = variants[variant][color];
return (
<span className={`${baseStyles} ${sizeClass} ${colorStyles}`}>
<span className={`${baseStyles} ${sizeClass} ${colorStyles} ${className}`}>
{startIcon && <span className="mr-1">{startIcon}</span>}
{children}
{endIcon && <span className="ml-1">{endIcon}</span>}

2
src/messages/en.json
View File

@@ -664,6 +664,7 @@
"search_placeholder": "Search CAs...",
"type_th": "Type",
"common_name_th": "Common Name",
"issuer_th": "Issued By",
"serial_th": "Serial Number",
"validity_th": "Validity Period",
"status_th": "Status",
@@ -671,6 +672,7 @@
"validity_to_label": "to",
"status_valid": "Valid",
"status_expired": "Expired",
"self_signed": "Self-Signed",
"renew_button": "Renew Now",
"no_ca_search": "No CAs matched \"{term}\"",
"no_ca_found": "No Root CA certificates found. Run CA Setup from Certificates page."

2
src/messages/id.json
View File

@@ -664,6 +664,7 @@
"search_placeholder": "Cari CA...",
"type_th": "Tipe",
"common_name_th": "Common Name",
"issuer_th": "Diterbitkan Oleh",
"serial_th": "Nomor Seri",
"validity_th": "Masa Berlaku",
"status_th": "Status",
@@ -671,6 +672,7 @@
"validity_to_label": "ke",
"status_valid": "Valid",
"status_expired": "Kedaluwarsa",
"self_signed": "Self-Signed",
"renew_button": "Perbarui",
"no_ca_search": "Tidak ada CA yang cocok dengan \"{term}\"",
"no_ca_found": "Sertifikat Root CA tidak ditemukan. Jalankan Pengaturan CA dari halaman Sertifikat."