calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-07 12:57:07 +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";
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 { 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) => {
return (
status === "failed" ||
@@ -78,9 +93,9 @@ export default function CertificateStatus({
{t("certificateStatus")}:
</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
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
/>
{t("loading")}
@@ -97,7 +112,10 @@ export default function CertificateStatus({
{t("certificateStatus")}:
</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>
);
}
@@ -110,7 +128,8 @@ export default function CertificateStatus({
{t("certificateStatus")}:
</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" })}
</span>
</div>
@@ -119,6 +138,7 @@ export default function CertificateStatus({
const isPending = cert.status === "pending";
const disableRestartButton = cert.domainType === "wildcard";
const StatusIcon = getStatusIcon(cert.status);
return (
<div className={`flex items-center gap-2 ${className}`}>
@@ -127,17 +147,20 @@ export default function CertificateStatus({
{t("certificateStatus")}:
</span>
)}
{isPending ? (
{isPending && !disableRestartButton ? (
<Button
variant="ghost"
className={`h-auto p-0 text-sm ${getStatusColor(cert.status)}`}
className="h-auto p-0 text-sm font-normal"
onClick={handleRefresh}
disabled={refreshing || disableRestartButton}
disabled={refreshing}
title={t("restartCertificate", {
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.slice(1)}
<RotateCw
@@ -146,20 +169,21 @@ export default function CertificateStatus({
</span>
</Button>
) : (
<span className={`text-sm ${getStatusColor(cert.status)}`}>
<span className="inline-flex items-center gap-1">
<span className="text-sm">
<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.slice(1)}
{shouldShowRefreshButton(
cert.status,
cert.updatedAt
) && (
{shouldShowRefreshButton(cert.status, cert.updatedAt) &&
!disableRestartButton ? (
<Button
size="icon"
variant="ghost"
className="p-0 w-3 h-auto align-middle"
onClick={handleRefresh}
disabled={refreshing || disableRestartButton}
disabled={refreshing}
title={t("restartCertificate", {
defaultValue: "Restart Certificate"
})}
@@ -168,7 +192,7 @@ export default function CertificateStatus({
className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`}
/>
</Button>
)}
) : null}
</span>
</span>
)}

4
src/components/InternalResourceForm.tsx
View File

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

6
src/components/ResourceInfoBox.tsx
View File

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