url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(km): Translate SSL & Domain section

Browse Source 
Translates the SSL & Domain section, including components and pages, into Khmer. This involves updating the `km.ts` translation file with relevant Khmer translations for all UI elements and strings within the SSL & Domain management feature.
This commit is contained in:
Tola Leng
2025-05-17 21:08:44 +08:00
parent 389eb22737
commit a1c6c7053e
6 changed files with 146 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/ssl-domain/AddSSLCertificateForm.tsx
+17 -15
View File
@@ -12,6 +12,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { DialogFooter } from "@/components/ui/dialog";
import { AddSSLCertificateDto } from "@/types/ssl.types";
import { alertConfigService, AlertConfiguration } from "@/services/alertConfigService";
import { useLanguage } from "@/contexts/LanguageContext";
const formSchema = z.object({
domain: z.string().min(1, "Domain is required"),
@@ -31,6 +32,7 @@ export const AddSSLCertificateForm = ({
onCancel,
isPending = false
}: AddSSLCertificateFormProps) => {
const { t } = useLanguage();
const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
const [isLoading, setIsLoading] = useState(false);
@@ -71,14 +73,14 @@ export const AddSSLCertificateForm = ({
}
} catch (error) {
console.error("Error fetching notification channels:", error);
toast.error("Failed to load notification channels");
toast.error(t('failedToLoadCertificates'));
} finally {
setIsLoading(false);
}
};
fetchNotificationChannels();
}, [form]);
}, [form, t]);
const handleSubmit = async (values: z.infer<typeof formSchema>) => {
try {
@@ -94,7 +96,7 @@ export const AddSSLCertificateForm = ({
form.reset();
} catch (error) {
console.error("Error adding SSL certificate:", error);
toast.error("Failed to add SSL certificate");
toast.error(t('failedToAddCertificate'));
}
};
@@ -106,7 +108,7 @@ export const AddSSLCertificateForm = ({
name="domain"
render={({ field }) => (
<FormItem>
<FormLabel>Domain</FormLabel>
<FormLabel>{t('domain')}</FormLabel>
<FormControl>
<Input placeholder="example.com" {...field} />
</FormControl>
@@ -120,12 +122,12 @@ export const AddSSLCertificateForm = ({
name="warning_threshold"
render={({ field }) => (
<FormItem>
<FormLabel>Warning Threshold (days)</FormLabel>
<FormLabel>{t('warningThreshold')}</FormLabel>
<FormControl>
<Input type="number" {...field} />
</FormControl>
<FormDescription>
Get notified when certificates are about to expire
{t('getNotifiedExpiration')}
</FormDescription>
<FormMessage />
</FormItem>
@@ -137,12 +139,12 @@ export const AddSSLCertificateForm = ({
name="expiry_threshold"
render={({ field }) => (
<FormItem>
<FormLabel>Expiry Threshold (days)</FormLabel>
<FormLabel>{t('expiryThreshold')}</FormLabel>
<FormControl>
<Input type="number" {...field} />
</FormControl>
<FormDescription>
Get notified when certificates are critically close to expiring
{t('getNotifiedCritical')}
</FormDescription>
<FormMessage />
</FormItem>
@@ -154,11 +156,11 @@ export const AddSSLCertificateForm = ({
name="notification_channel"
render={({ field }) => (
<FormItem>
<FormLabel>Notification Channel</FormLabel>
<FormLabel>{t('notificationChannel')}</FormLabel>
<Select onValueChange={field.onChange} value={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select notification channel" />
<SelectValue placeholder={t('chooseChannel')} />
</SelectTrigger>
</FormControl>
<SelectContent>
@@ -169,15 +171,15 @@ export const AddSSLCertificateForm = ({
</SelectItem>
))
) : isLoading ? (
<SelectItem value="loading" disabled>Loading channels...</SelectItem>
<SelectItem value="loading" disabled>{t('loadingChannels')}</SelectItem>
) : (
<SelectItem value="none" disabled>No notification channels found</SelectItem>
<SelectItem value="none" disabled>{t('noChannelsFound')}</SelectItem>
)}
</SelectContent>
</Select>
<FormDescription className="flex items-center gap-1">
<Bell className="h-4 w-4" />
Choose where to receive SSL certificate alerts
{t('chooseChannel')}
</FormDescription>
<FormMessage />
</FormItem>
@@ -185,9 +187,9 @@ export const AddSSLCertificateForm = ({
/>
<DialogFooter>
<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
<Button type="button" variant="outline" onClick={onCancel}>{t('cancel')}</Button>
<Button type="submit" disabled={isPending || isLoading}>
Add Certificate
{t('addCertificate')}
</Button>
</DialogFooter>
</form>
application/src/components/ssl-domain/EditSSLCertificateForm.tsx
+18 -17
View File
@@ -1,4 +1,3 @@
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
@@ -11,6 +10,7 @@ import { SSLCertificate } from "@/types/ssl.types";
import { Loader2, Bell } from "lucide-react";
import { toast } from "sonner";
import { alertConfigService, AlertConfiguration } from "@/services/alertConfigService";
import { useLanguage } from "@/contexts/LanguageContext";
const formSchema = z.object({
domain: z.string().min(1, "Domain is required"),
@@ -29,6 +29,7 @@ interface EditSSLCertificateFormProps {
}
export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPending }: EditSSLCertificateFormProps) => {
const { t } = useLanguage();
const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
const [isLoading, setIsLoading] = useState(false);
@@ -61,14 +62,14 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
setAlertConfigs(enabledConfigs);
} catch (error) {
console.error("Error fetching notification channels:", error);
toast.error("Failed to load notification channels");
toast.error(t('failedToLoadCertificates'));
} finally {
setIsLoading(false);
}
};
fetchNotificationChannels();
}, []);
}, [t]);
const handleSubmit = (data: FormValues) => {
// Merge the updated values with the original certificate
@@ -96,7 +97,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
name="domain"
render={({ field }) => (
<FormItem>
<FormLabel>Domain</FormLabel>
<FormLabel>{t('domainName')}</FormLabel>
<FormControl>
<Input
{...field}
@@ -105,7 +106,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
/>
</FormControl>
<FormDescription>
Domain name cannot be changed. To monitor a different domain, add a new certificate.
{t('domainCannotChange')}
</FormDescription>
<FormMessage />
</FormItem>
@@ -118,7 +119,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
name="warning_threshold"
render={({ field }) => (
<FormItem>
<FormLabel>Warning Threshold (Days)</FormLabel>
<FormLabel>{t('warningThresholdDays')}</FormLabel>
<FormControl>
<Input
{...field}
@@ -128,7 +129,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
/>
</FormControl>
<FormDescription>
Days before expiration to send warning
{t('daysBeforeExpiration')}
</FormDescription>
<FormMessage />
</FormItem>
@@ -140,7 +141,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
name="expiry_threshold"
render={({ field }) => (
<FormItem>
<FormLabel>Expiry Threshold (Days)</FormLabel>
<FormLabel>{t('expiryThresholdDays')}</FormLabel>
<FormControl>
<Input
{...field}
@@ -150,7 +151,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
/>
</FormControl>
<FormDescription>
Days before expiration to send critical alert
{t('daysBeforeCritical')}
</FormDescription>
<FormMessage />
</FormItem>
@@ -163,7 +164,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
name="notification_channel"
render={({ field }) => (
<FormItem>
<FormLabel>Notification Channel</FormLabel>
<FormLabel>{t('notificationChannel')}</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
@@ -172,7 +173,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select notification channel" />
<SelectValue placeholder={t('chooseChannel')} />
</SelectTrigger>
</FormControl>
<SelectContent>
@@ -183,7 +184,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
</SelectItem>
))
) : isLoading ? (
<SelectItem value="loading" disabled>Loading channels...</SelectItem>
<SelectItem value="loading" disabled>{t('loadingChannels')}</SelectItem>
) : (
<>
<SelectItem value="email">Email</SelectItem>
@@ -197,7 +198,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
</Select>
<FormDescription className="flex items-center gap-1">
<Bell className="h-4 w-4" />
Where to send notifications about this certificate
{t('whereToSend')}
</FormDescription>
<FormMessage />
</FormItem>
@@ -211,7 +212,7 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
onClick={onCancel}
disabled={isPending}
>
Cancel
{t('cancel')}
</Button>
<Button
type="submit"
@@ -219,14 +220,14 @@ export const EditSSLCertificateForm = ({ certificate, onSubmit, onCancel, isPend
>
{isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> Updating...
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> {t('updating')}
</>
) : (
'Save Changes'
t('saveChanges')
)}
</Button>
</div>
</form>
</Form>
);
};
};
application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
+6 -4
View File
@@ -1,13 +1,15 @@
import React from "react";
import { Card } from "@/components/ui/card";
import { SSLCertificate } from "@/types/ssl.types";
import { useLanguage } from "@/contexts/LanguageContext";
interface SSLCertificateStatusCardsProps {
certificates: SSLCertificate[];
}
export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatusCardsProps) => {
const { t } = useLanguage();
// Count certificates by status
const validCount = certificates.filter(cert => cert.status === 'valid').length;
const expiringCount = certificates.filter(cert => cert.status === 'expiring_soon').length;
@@ -24,7 +26,7 @@ export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatus
</div>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Valid Certificates</p>
<p className="text-sm font-medium text-muted-foreground">{t('validCertificates')}</p>
<p className="text-3xl font-bold">{validCount}</p>
</div>
</Card>
@@ -38,7 +40,7 @@ export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatus
</div>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Expiring Soon</p>
<p className="text-sm font-medium text-muted-foreground">{t('expiringSoon')}</p>
<p className="text-3xl font-bold">{expiringCount}</p>
</div>
</Card>
@@ -52,7 +54,7 @@ export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatus
</div>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Expired</p>
<p className="text-sm font-medium text-muted-foreground">{t('expired')}</p>
<p className="text-3xl font-bold">{expiredCount}</p>
</div>
</Card>
application/src/components/ssl-domain/SSLCertificatesTable.tsx
+70 -69
View File
@@ -1,4 +1,3 @@
import React, { useState } from "react";
import { format } from "date-fns";
import {
@@ -21,6 +20,7 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { toast } from "sonner";
import { useLanguage } from "@/contexts/LanguageContext";
interface SSLCertificatesTableProps {
certificates: SSLCertificate[];
@@ -37,23 +37,24 @@ export const SSLCertificatesTable = ({
onEdit,
onDelete
}: SSLCertificatesTableProps) => {
const { t } = useLanguage();
const [selectedCert, setSelectedCert] = useState<SSLCertificate | null>(null);
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
const [certToDelete, setCertToDelete] = useState<SSLCertificate | null>(null);
const formatDate = (dateString: string | undefined) => {
if (!dateString) return 'Unknown';
if (!dateString) return t('unknown');
try {
const date = new Date(dateString);
if (isNaN(date.getTime())) {
console.warn("Invalid date for formatting:", dateString);
return 'Unknown';
return t('unknown');
}
return format(date, "MMM dd, yyyy");
} catch (error) {
console.error("Error formatting date:", error);
return 'Unknown';
return t('unknown');
}
};
@@ -89,39 +90,39 @@ export const SSLCertificatesTable = ({
<div className="absolute inset-0 bg-background/50 flex items-center justify-center z-10">
<div className="bg-background p-4 rounded-md shadow flex items-center gap-2">
<RefreshCw className="h-5 w-5 animate-spin text-primary" />
<span>Checking SSL certificate...</span>
<span>{t('checkingSSLCertificate')}</span>
</div>
</div>
)}
<Table>
<TableHeader>
<TableRow>
<TableHead>Domain</TableHead>
<TableHead>Issuer</TableHead>
<TableHead>Expiration Date</TableHead>
<TableHead>Days Left</TableHead>
<TableHead>Status</TableHead>
<TableHead>Last Notified</TableHead>
<TableHead className="text-right">Actions</TableHead>
<TableHead>{t('domain')}</TableHead>
<TableHead>{t('issuer')}</TableHead>
<TableHead>{t('expirationDate')}</TableHead>
<TableHead>{t('daysLeft')}</TableHead>
<TableHead>{t('status')}</TableHead>
<TableHead>{t('lastNotified')}</TableHead>
<TableHead className="text-right">{t('actions')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{certificates.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="text-center py-8">
No SSL certificates found
{t('noSSLCertificates')}
</TableCell>
</TableRow>
) : (
certificates.map((certificate) => (
<TableRow key={certificate.id}>
<TableCell className="font-medium">{certificate.domain}</TableCell>
<TableCell>{certificate.issuer_o || 'Unknown'}</TableCell>
<TableCell>{certificate.issuer_o || t('unknown')}</TableCell>
<TableCell>
{formatDate(certificate.valid_till)}
</TableCell>
<TableCell>
{typeof certificate.days_left === 'number' ? certificate.days_left : 'Unknown'}
{typeof certificate.days_left === 'number' ? certificate.days_left : t('unknown')}
</TableCell>
<TableCell>
<SSLStatusBadge status={certificate.status} />
@@ -129,7 +130,7 @@ export const SSLCertificatesTable = ({
<TableCell>
{certificate.last_notified
? formatDate(certificate.last_notified)
: "Never"}
: t('never')}
</TableCell>
<TableCell className="text-right">
<DropdownMenu>
@@ -144,7 +145,7 @@ export const SSLCertificatesTable = ({
onClick={() => handleViewCertificate(certificate)}
className="cursor-pointer"
>
<Eye className="mr-2 h-4 w-4" /> View
<Eye className="mr-2 h-4 w-4" /> {t('view')}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
@@ -156,19 +157,19 @@ export const SSLCertificatesTable = ({
className="cursor-pointer"
>
<RefreshCw className={`mr-2 h-4 w-4 ${refreshingId === certificate.id ? 'animate-spin text-primary' : ''}`} />
Check
{t('check')}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleEditCertificate(certificate)}
className="cursor-pointer"
>
<Edit className="mr-2 h-4 w-4" /> Edit
<Edit className="mr-2 h-4 w-4" /> {t('edit')}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDeleteCertificate(certificate)}
className="cursor-pointer text-destructive focus:text-destructive"
>
<Trash2 className="mr-2 h-4 w-4" /> Delete
<Trash2 className="mr-2 h-4 w-4" /> {t('delete')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -185,10 +186,10 @@ export const SSLCertificatesTable = ({
<DialogContent className="max-w-3xl p-0 gap-0 overflow-hidden">
<DialogHeader className="p-6 pb-2">
<DialogTitle className="text-xl">
SSL Certificate Details
{t('sslCertificateDetails')}
</DialogTitle>
<p className="text-sm text-muted-foreground mt-1">
Detailed information about the SSL certificate for {selectedCert?.domain}
{t('detailedInfo')} {selectedCert?.domain}
</p>
</DialogHeader>
@@ -197,76 +198,76 @@ export const SSLCertificatesTable = ({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Basic Information */}
<div className="border rounded-md p-4">
<h3 className="font-semibold mb-3">Basic Information</h3>
<h3 className="font-semibold mb-3">{t('basicInformation')}</h3>
<div className="space-y-2">
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Domain:</span>
<span className="text-muted-foreground">{t('domain')}:</span>
<span>{selectedCert.domain}</span>
</div>
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Status:</span>
<span className="text-muted-foreground">{t('status')}:</span>
<span><SSLStatusBadge status={selectedCert.status} /></span>
</div>
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Issued To:</span>
<span>{selectedCert.issued_to || 'Unknown'}</span>
<span className="text-muted-foreground">{t('issuer')}:</span>
<span>{selectedCert.issued_to || t('unknown')}</span>
</div>
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Resolved IP:</span>
<span>{selectedCert.resolved_ip || 'Unknown'}</span>
<span className="text-muted-foreground">IP:</span>
<span>{selectedCert.resolved_ip || t('unknown')}</span>
</div>
</div>
</div>
{/* Validity */}
<div className="border rounded-md p-4">
<h3 className="font-semibold mb-3">Validity</h3>
<h3 className="font-semibold mb-3">{t('validity')}</h3>
<div className="space-y-2">
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Valid From:</span>
<span>{selectedCert.valid_from ? formatDate(selectedCert.valid_from) : 'Unknown'}</span>
<span className="text-muted-foreground">{t('validFrom')}:</span>
<span>{selectedCert.valid_from ? formatDate(selectedCert.valid_from) : t('unknown')}</span>
</div>
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Valid Until:</span>
<span className="text-muted-foreground">{t('validUntil')}:</span>
<span>{formatDate(selectedCert.valid_till)}</span>
</div>
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Days Left:</span>
<span className="text-muted-foreground">{t('daysLeft')}:</span>
<span>{selectedCert.days_left}</span>
</div>
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Validity Days:</span>
<span>{selectedCert.validity_days || 'Unknown'}</span>
<span className="text-muted-foreground">{t('validityDays')}:</span>
<span>{selectedCert.validity_days || t('unknown')}</span>
</div>
</div>
</div>
{/* Issuer */}
<div className="border rounded-md p-4">
<h3 className="font-semibold mb-3">Issuer</h3>
<h3 className="font-semibold mb-3">{t('issuerInfo')}</h3>
<div className="space-y-2">
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Organization:</span>
<span>{selectedCert.issuer_o || 'Unknown'}</span>
<span className="text-muted-foreground">{t('organization')}:</span>
<span>{selectedCert.issuer_o || t('unknown')}</span>
</div>
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Common Name:</span>
<span>{selectedCert.issuer_cn || 'Unknown'}</span>
<span className="text-muted-foreground">{t('commonName')}:</span>
<span>{selectedCert.issuer_cn || t('unknown')}</span>
</div>
</div>
</div>
{/* Technical Details */}
<div className="border rounded-md p-4">
<h3 className="font-semibold mb-3">Technical Details</h3>
<h3 className="font-semibold mb-3">{t('technicalDetails')}</h3>
<div className="space-y-2">
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Serial Number:</span>
<span>{selectedCert.serial_number || 'Unknown'}</span>
<span className="text-muted-foreground">{t('serialNumber')}:</span>
<span>{selectedCert.serial_number || t('unknown')}</span>
</div>
<div className="grid grid-cols-2 gap-2">
<span className="text-muted-foreground">Algorithm:</span>
<span>{selectedCert.cert_alg || 'Unknown'}</span>
<span className="text-muted-foreground">{t('algorithm')}:</span>
<span>{selectedCert.cert_alg || t('unknown')}</span>
</div>
</div>
</div>
@@ -274,30 +275,30 @@ export const SSLCertificatesTable = ({
{/* Subject Alternative Names */}
<div className="border rounded-md p-4">
<h3 className="font-semibold mb-3">Subject Alternative Names (SANs)</h3>
<h3 className="font-semibold mb-3">{t('subjectAltNames')}</h3>
<div>
{selectedCert.cert_sans ? (
<p className="break-words">{selectedCert.cert_sans}</p>
) : (
<p>None</p>
<p>{t('none')}</p>
)}
</div>
</div>
{/* Monitoring Configuration */}
<div className="border rounded-md p-4">
<h3 className="font-semibold mb-3">Monitoring Configuration</h3>
<h3 className="font-semibold mb-3">{t('monitoringConfig')}</h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
<div className="space-y-1">
<div className="text-muted-foreground">Warning Threshold:</div>
<div>{selectedCert.warning_threshold} days</div>
<div className="text-muted-foreground">{t('warningThreshold')}:</div>
<div>{selectedCert.warning_threshold} {t('daysLeft').toLowerCase()}</div>
</div>
<div className="space-y-1">
<div className="text-muted-foreground">Expiry Threshold:</div>
<div>{selectedCert.expiry_threshold} days</div>
<div className="text-muted-foreground">{t('expiryThreshold')}:</div>
<div>{selectedCert.expiry_threshold} {t('daysLeft').toLowerCase()}</div>
</div>
<div className="space-y-1">
<div className="text-muted-foreground">Notification Channel:</div>
<div className="text-muted-foreground">{t('notificationChannel')}:</div>
<div>{selectedCert.notification_channel}</div>
</div>
</div>
@@ -305,23 +306,23 @@ export const SSLCertificatesTable = ({
{/* Timestamps */}
<div className="border rounded-md p-4">
<h3 className="font-semibold mb-3">Record Information</h3>
<h3 className="font-semibold mb-3">{t('recordInfo')}</h3>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1">
<div className="text-muted-foreground">Created:</div>
<div>{selectedCert.created ? formatDate(selectedCert.created) : 'Unknown'}</div>
<div className="text-muted-foreground">{t('created')}:</div>
<div>{selectedCert.created ? formatDate(selectedCert.created) : t('unknown')}</div>
</div>
<div className="space-y-1">
<div className="text-muted-foreground">Last Updated:</div>
<div>{selectedCert.updated ? formatDate(selectedCert.updated) : 'Unknown'}</div>
<div className="text-muted-foreground">{t('lastUpdated')}:</div>
<div>{selectedCert.updated ? formatDate(selectedCert.updated) : t('unknown')}</div>
</div>
<div className="space-y-1">
<div className="text-muted-foreground">Last Notification:</div>
<div>{selectedCert.last_notified ? formatDate(selectedCert.last_notified) : 'Never'}</div>
<div className="text-muted-foreground">{t('lastNotification')}:</div>
<div>{selectedCert.last_notified ? formatDate(selectedCert.last_notified) : t('never')}</div>
</div>
<div className="space-y-1">
<div className="text-muted-foreground">Collection ID:</div>
<div>{selectedCert.collectionId || 'Unknown'}</div>
<div className="text-muted-foreground">{t('collectionId')}:</div>
<div>{selectedCert.collectionId || t('unknown')}</div>
</div>
</div>
</div>
@@ -334,7 +335,7 @@ export const SSLCertificatesTable = ({
onClick={() => setSelectedCert(null)}
className="w-full sm:w-auto"
>
Close
{t('close')}
</Button>
</DialogFooter>
</DialogContent>
@@ -344,15 +345,15 @@ export const SSLCertificatesTable = ({
<Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete SSL Certificate</DialogTitle>
<DialogTitle>{t('deleteSSLCertificate')}</DialogTitle>
</DialogHeader>
<div className="py-4">
<p>Are you sure you want to delete the SSL certificate for <strong>{certToDelete?.domain}</strong>?</p>
<p className="text-sm text-muted-foreground mt-2">This action cannot be undone.</p>
<p>{t('deleteConfirmation')} <strong>{certToDelete?.domain}</strong>?</p>
<p className="text-sm text-muted-foreground mt-2">{t('deleteWarning')}</p>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteConfirmOpen(false)}>Cancel</Button>
<Button variant="destructive" onClick={confirmDelete}>Delete</Button>
<Button variant="outline" onClick={() => setDeleteConfirmOpen(false)}>{t('cancel')}</Button>
<Button variant="destructive" onClick={confirmDelete}>{t('delete')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
application/src/components/ssl-domain/SSLDomainContent.tsx
+28 -22
View File
@@ -13,8 +13,10 @@ import { AddSSLCertificateForm } from "./AddSSLCertificateForm";
import { EditSSLCertificateForm } from "./EditSSLCertificateForm";
import type { AddSSLCertificateDto, SSLCertificate } from "@/types/ssl.types";
import { pb } from "@/lib/pocketbase";
import { useLanguage } from "@/contexts/LanguageContext";
export const SSLDomainContent = () => {
const { t } = useLanguage();
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
const [refreshingId, setRefreshingId] = useState<string | null>(null);
@@ -33,7 +35,7 @@ export const SSLDomainContent = () => {
return result;
} catch (error) {
console.error("Error fetching certificates:", error);
toast.error("Failed to load SSL certificates");
toast.error(t('failedToLoadCertificates'));
throw error;
}
},
@@ -47,11 +49,11 @@ export const SSLDomainContent = () => {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
setIsAddDialogOpen(false);
toast.success("SSL certificate added successfully");
toast.success(t('sslCertificateAdded'));
},
onError: (error) => {
console.error("Error adding SSL certificate:", error);
toast.error(error instanceof Error ? error.message : "Failed to add SSL certificate. Make sure the domain is valid and accessible.");
toast.error(error instanceof Error ? error.message : t('failedToAddCertificate'));
}
});
@@ -84,11 +86,11 @@ export const SSLDomainContent = () => {
queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
setIsEditDialogOpen(false);
setSelectedCertificate(null);
toast.success("SSL certificate updated successfully");
toast.success(t('sslCertificateUpdated'));
},
onError: (error) => {
console.error("Error updating SSL certificate:", error);
toast.error(error instanceof Error ? error.message : "Failed to update SSL certificate");
toast.error(error instanceof Error ? error.message : t('failedToUpdateCertificate'));
}
});
@@ -97,11 +99,11 @@ export const SSLDomainContent = () => {
mutationFn: deleteSSLCertificate,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
toast.success("SSL certificate deleted successfully");
toast.success(t('sslCertificateDeleted'));
},
onError: (error) => {
console.error("Error deleting SSL certificate:", error);
toast.error(error instanceof Error ? error.message : "Failed to delete SSL certificate");
toast.error(error instanceof Error ? error.message : t('failedToDeleteCertificate'));
}
});
@@ -111,12 +113,12 @@ export const SSLDomainContent = () => {
onSuccess: (data) => {
queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] });
setRefreshingId(null);
toast.success(`SSL certificate for ${data.domain} updated successfully`);
toast.success(t('sslCertificateRefreshed').replace('{domain}', data.domain));
},
onError: (error) => {
console.error("Error refreshing SSL certificate:", error);
let errorMessage = "Failed to check SSL certificate.";
let errorMessage = t('failedToCheckCertificate');
if (error instanceof Error) {
errorMessage = error.message;
@@ -138,14 +140,16 @@ export const SSLDomainContent = () => {
setIsRefreshingAll(false);
if (result.failed === 0) {
toast.success(`Successfully refreshed all ${result.success} certificates`);
toast.success(t('allCertificatesRefreshed').replace('{count}', result.success.toString()));
} else {
toast.info(`Refreshed ${result.success} certificates, ${result.failed} failed`);
toast.info(t('someCertificatesFailed')
.replace('{success}', result.success.toString())
.replace('{failed}', result.failed.toString()));
}
},
onError: (error) => {
console.error("Error refreshing all certificates:", error);
toast.error("Failed to refresh all certificates");
toast.error(t('failedToCheckCertificate'));
setIsRefreshingAll(false);
// Still refresh the data to show any partial information
@@ -179,12 +183,12 @@ export const SSLDomainContent = () => {
const handleRefreshAll = async () => {
if (certificates.length === 0) {
toast.info("No certificates to refresh");
toast.info(t('noCertificatesToRefresh'));
return;
}
setIsRefreshingAll(true);
toast.info(`Starting refresh of all ${certificates.length} certificates...`);
toast.info(t('startingRefreshAll').replace('{count}', certificates.length.toString()));
refreshAllMutation.mutate();
};
@@ -195,8 +199,10 @@ export const SSLDomainContent = () => {
if (error) {
return (
<div className="flex flex-col items-center justify-center h-full gap-4 text-foreground">
<p>Error loading SSL certificate data.</p>
<Button onClick={() => queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] })}>Retry</Button>
<p>{t('failedToLoadCertificates')}</p>
<Button onClick={() => queryClient.invalidateQueries({ queryKey: ['ssl-certificates'] })}>
{t('check')}
</Button>
</div>
);
}
@@ -206,8 +212,8 @@ export const SSLDomainContent = () => {
<div className="flex flex-col flex-1">
<div className="flex justify-between items-center mb-6">
<div>
<h2 className="text-2xl font-bold text-foreground">SSL & Domain Management</h2>
<p className="text-sm text-muted-foreground mt-1">Monitor SSL certificates and their expiration dates</p>
<h2 className="text-2xl font-bold text-foreground">{t('sslDomainManagement')}</h2>
<p className="text-sm text-muted-foreground mt-1">{t('monitorSSLCertificates')}</p>
</div>
<div className="flex gap-2">
<Button
@@ -217,7 +223,7 @@ export const SSLDomainContent = () => {
className="relative"
>
<RefreshCw className={`w-4 h-4 mr-2 ${isRefreshingAll ? 'animate-spin' : ''}`} />
Refresh All
{t('refreshAll')}
{isRefreshingAll && (
<span className="absolute top-0 right-0 -mt-2 -mr-2 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
...
@@ -228,7 +234,7 @@ export const SSLDomainContent = () => {
className="text-primary-foreground"
onClick={() => setIsAddDialogOpen(true)}
>
<Plus className="w-4 h-4 mr-2" /> Add Domain
<Plus className="w-4 h-4 mr-2" /> {t('addDomain')}
</Button>
</div>
</div>
@@ -249,7 +255,7 @@ export const SSLDomainContent = () => {
<Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Add SSL Certificate</DialogTitle>
<DialogTitle>{t('addSSLCertificate')}</DialogTitle>
</DialogHeader>
<AddSSLCertificateForm
onSubmit={handleAddCertificate}
@@ -266,7 +272,7 @@ export const SSLDomainContent = () => {
}}>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit SSL Certificate</DialogTitle>
<DialogTitle>{t('editSSLCertificate')}</DialogTitle>
</DialogHeader>
<EditSSLCertificateForm
certificate={selectedCertificate}
application/src/pages/SslDomain.tsx
+7 -4
View File
@@ -1,4 +1,3 @@
import React, { useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { authService } from "@/services/authService";
@@ -8,8 +7,12 @@ import { Sidebar } from "@/components/dashboard/Sidebar";
import { SSLDomainContent } from "@/components/ssl-domain/SSLDomainContent";
import { LoadingState } from "@/components/services/LoadingState";
import { fetchSSLCertificates, shouldRunDailyCheck, checkAllCertificatesAndNotify } from "@/services/sslCertificateService";
import { useLanguage } from "@/contexts/LanguageContext";
const SslDomain = () => {
// Get language context for translations
const { t } = useLanguage();
// State for sidebar collapse functionality
const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
@@ -90,15 +93,15 @@ const SslDomain = () => {
toggleSidebar={toggleSidebar}
/>
<div className="flex flex-col items-center justify-center h-full p-6">
<h2 className="text-xl font-bold mb-2">Error Loading SSL Certificates</h2>
<h2 className="text-xl font-bold mb-2">{t('failedToLoadCertificates')}</h2>
<p className="text-muted-foreground mb-4">
{error instanceof Error ? error.message : "Unknown error occurred"}
{error instanceof Error ? error.message : t('unknown')}
</p>
<button
className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
onClick={() => refetch()}
>
Retry
{t('check')}
</button>
</div>
</div>