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