calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-18 23:05:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix cert styling

Browse Source
This commit is contained in:
miloschwartz
2026-04-29 12:14:21 -07:00
parent 78fff6bfde
commit f03389a9a0
3 changed files with 46 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/CertificateStatus.tsx
View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Loader2, RotateCw } from "lucide-react"; import { CheckCircle2, Clock, Loader2, RotateCw, XCircle } from "lucide-react";
import { useCertificate } from "@app/hooks/useCertificate"; import { useCertificate } from "@app/hooks/useCertificate";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@@ -59,6 +59,21 @@ export default function CertificateStatus({
} }
}; };
const getStatusIcon = (status: string) => {
switch (status) {
case "valid":
return CheckCircle2;
case "pending":
case "requested":
return Clock;
case "expired":
case "failed":
return XCircle;
default:
return Clock;
}
};
const shouldShowRefreshButton = (status: string, updatedAt: number) => { const shouldShowRefreshButton = (status: string, updatedAt: number) => {
return ( return (
status === "failed" || status === "failed" ||
@@ -78,9 +93,9 @@ export default function CertificateStatus({
{t("certificateStatus")}: {t("certificateStatus")}:
</span> </span>
)} )}
<span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground"> <span className="inline-flex items-center gap-1.5 text-sm">
<Loader2 <Loader2
className="h-3.5 w-3.5 shrink-0 animate-spin" className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground"
aria-hidden aria-hidden
/> />
{t("loading")} {t("loading")}
@@ -97,7 +112,10 @@ export default function CertificateStatus({
{t("certificateStatus")}: {t("certificateStatus")}:
</span> </span>
)} )}
<span className="text-sm text-red-500">{certError}</span> <span className="inline-flex items-center gap-1.5 text-sm">
<XCircle className="h-4 w-4 shrink-0 text-red-500" />
{certError}
</span>
</div> </div>
); );
} }
@@ -110,7 +128,8 @@ export default function CertificateStatus({
{t("certificateStatus")}: {t("certificateStatus")}:
</span> </span>
)} )}
<span className="text-sm text-muted-foreground"> <span className="inline-flex items-center gap-1.5 text-sm">
<Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
{t("none", { defaultValue: "None" })} {t("none", { defaultValue: "None" })}
</span> </span>
</div> </div>
@@ -119,6 +138,7 @@ export default function CertificateStatus({
const isPending = cert.status === "pending"; const isPending = cert.status === "pending";
const disableRestartButton = cert.domainType === "wildcard"; const disableRestartButton = cert.domainType === "wildcard";
const StatusIcon = getStatusIcon(cert.status);
return ( return (
<div className={`flex items-center gap-2 ${className}`}> <div className={`flex items-center gap-2 ${className}`}>
@@ -127,17 +147,20 @@ export default function CertificateStatus({
{t("certificateStatus")}: {t("certificateStatus")}:
</span> </span>
)} )}
{isPending ? ( {isPending && !disableRestartButton ? (
<Button <Button
variant="ghost" variant="ghost"
className={`h-auto p-0 text-sm ${getStatusColor(cert.status)}`} className="h-auto p-0 text-sm font-normal"
onClick={handleRefresh} onClick={handleRefresh}
disabled={refreshing || disableRestartButton} disabled={refreshing}
title={t("restartCertificate", { title={t("restartCertificate", {
defaultValue: "Restart Certificate" defaultValue: "Restart Certificate"
})} })}
> >
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-2">
<StatusIcon
className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
/>
{cert.status.charAt(0).toUpperCase() + {cert.status.charAt(0).toUpperCase() +
cert.status.slice(1)} cert.status.slice(1)}
<RotateCw <RotateCw
@@ -146,20 +169,21 @@ export default function CertificateStatus({
</span> </span>
</Button> </Button>
) : ( ) : (
<span className={`text-sm ${getStatusColor(cert.status)}`}> <span className="text-sm">
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-2">
<StatusIcon
className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
/>
{cert.status.charAt(0).toUpperCase() + {cert.status.charAt(0).toUpperCase() +
cert.status.slice(1)} cert.status.slice(1)}
{shouldShowRefreshButton( {shouldShowRefreshButton(cert.status, cert.updatedAt) &&
cert.status, !disableRestartButton ? (
cert.updatedAt
) && (
<Button <Button
size="icon" size="icon"
variant="ghost" variant="ghost"
className="p-0 w-3 h-auto align-middle" className="p-0 w-3 h-auto align-middle"
onClick={handleRefresh} onClick={handleRefresh}
disabled={refreshing || disableRestartButton} disabled={refreshing}
title={t("restartCertificate", { title={t("restartCertificate", {
defaultValue: "Restart Certificate" defaultValue: "Restart Certificate"
})} })}
@@ -168,7 +192,7 @@ export default function CertificateStatus({
className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`} className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`}
/> />
</Button> </Button>
)} ) : null}
</span> </span>
</span> </span>
)} )}

4
src/components/InternalResourceForm.tsx
View File

@@ -1154,8 +1154,8 @@ export function InternalResourceForm({
resource.fullDomain && resource.fullDomain &&
build != "oss" && build != "oss" &&
form.watch("ssl") && ( form.watch("ssl") && (
<div className="flex items-center gap-1 pt-1"> <div className="flex items-center gap-2 pt-1">
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium">
{t("certificateStatus")}: {t("certificateStatus")}:
</span> </span>
<CertificateStatus <CertificateStatus

6
src/components/ResourceInfoBox.tsx
View File

@@ -69,12 +69,12 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
authInfo.whitelist || authInfo.whitelist ||
authInfo.headerAuth ? ( authInfo.headerAuth ? (
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2">
<ShieldCheck className="w-4 h-4 mt-0.5 flex-shrink-0 text-green-500" /> <ShieldCheck className="w-4 h-4 flex-shrink-0 text-green-500" />
<span>{t("protected")}</span> <span>{t("protected")}</span>
</div> </div>
) : ( ) : (
<div className="flex items-center space-x-2 text-yellow-500"> <div className="flex items-center space-x-2">
<ShieldOff className="w-4 h-4 flex-shrink-0" /> <ShieldOff className="w-4 h-4 flex-shrink-0 text-yellow-500" />
<span>{t("notProtected")}</span> <span>{t("notProtected")}</span>
</div> </div>
)} )}