i18n(monitor): extract English dashboard messages

Move Monitor dashboard UI copy into translation keys and expand the English source catalog across the main pages, modals, and shared AppImage components.

AppImage/components/two-factor-setup.tsx

@@ -6,6 +6,7 @@ import { Input } from "./ui/input"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
 import { AlertCircle, CheckCircle, Copy, Shield, Check } from "lucide-react"
 import { getApiUrl } from "../lib/api-config"
+import { useT } from "../lib/i18n/provider"
 
 interface TwoFactorSetupProps {
   open: boolean
@@ -14,6 +15,8 @@ interface TwoFactorSetupProps {
 }
 
 export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps) {
+  const t = useT()
+  const tf = (key: string) => t(`securityPage.twoFactorSetup.${key}`)
   const [step, setStep] = useState(1)
   const [qrCode, setQrCode] = useState("")
   const [secret, setSecret] = useState("")
@@ -41,7 +44,7 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
       const data = await response.json()
 
       if (!response.ok) {
-        throw new Error(data.message || "Failed to setup 2FA")
+        throw new Error(data.message || tf("setupFailed"))
       }
 
       setQrCode(data.qr_code)
@@ -49,7 +52,7 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
       setBackupCodes(data.backup_codes)
       setStep(2)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to setup 2FA")
+      setError(err instanceof Error ? err.message : tf("setupFailed"))
     } finally {
       setLoading(false)
     }
@@ -57,7 +60,7 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
 
   const handleVerify = async () => {
     if (!verificationCode || verificationCode.length !== 6) {
-      setError("Please enter a 6-digit code")
+      setError(tf("enterSixDigitCode"))
       return
     }
 
@@ -78,12 +81,12 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
       const data = await response.json()
 
       if (!response.ok) {
-        throw new Error(data.message || "Invalid verification code")
+        throw new Error(data.message || tf("invalidCode"))
       }
 
       setStep(3)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Verification failed")
+      setError(err instanceof Error ? err.message : tf("verificationFailed"))
     } finally {
       setLoading(false)
     }
@@ -141,7 +144,7 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
     // both the Clipboard API and execCommand may be locked down.
     if (!ok) {
       try {
-        window.prompt("Copy this value:", text)
+        window.prompt(tf("copyPrompt"), text)
         ok = true
       } catch {
         // ignore
@@ -183,9 +186,9 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Shield className="h-5 w-5 text-blue-500" />
-            Setup Two-Factor Authentication
+            {tf("title")}
           </DialogTitle>
-          <DialogDescription>Add an extra layer of security to your account</DialogDescription>
+          <DialogDescription>{tf("description")}</DialogDescription>
         </DialogHeader>
 
         {error && (
@@ -199,22 +202,21 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
           <div className="space-y-4">
             <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
               <p className="text-sm text-blue-500">
-                Two-factor authentication (2FA) adds an extra layer of security by requiring a code from your
-                authentication app in addition to your password.
+                {tf("intro")}
               </p>
             </div>
 
             <div className="space-y-2">
-              <h4 className="font-medium">You will need:</h4>
+              <h4 className="font-medium">{tf("youWillNeed")}</h4>
               <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
-                <li>An authentication app (Google Authenticator, Authy, etc.)</li>
-                <li>Scan a QR code or enter a key manually</li>
-                <li>Store backup codes securely</li>
+                <li>{tf("needApp")}</li>
+                <li>{tf("needQrOrKey")}</li>
+                <li>{tf("needBackupCodes")}</li>
               </ul>
             </div>
 
             <Button onClick={handleSetupStart} className="w-full bg-blue-500 hover:bg-blue-600" disabled={loading}>
-              {loading ? "Starting..." : "Start Setup"}
+              {loading ? tf("starting") : tf("startSetup")}
             </Button>
           </div>
         )}
@@ -222,24 +224,24 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
         {step === 2 && (
           <div className="space-y-4">
             <div className="space-y-2">
-              <h4 className="font-medium">1. Scan the QR code</h4>
-              <p className="text-sm text-muted-foreground">Open your authentication app and scan this QR code</p>
+              <h4 className="font-medium">{tf("scanTitle")}</h4>
+              <p className="text-sm text-muted-foreground">{tf("scanDescription")}</p>
               {qrCode && (
                 <div className="flex justify-center p-4 bg-white rounded-lg">
-                  <img src={qrCode || "/placeholder.svg"} alt="QR Code" width={200} height={200} className="rounded" />
+                  <img src={qrCode || "/placeholder.svg"} alt={tf("qrCodeAlt")} width={200} height={200} className="rounded" />
                 </div>
               )}
             </div>
 
             <div className="space-y-2">
-              <h4 className="font-medium">Or enter the key manually:</h4>
+              <h4 className="font-medium">{tf("manualKey")}</h4>
               <div className="flex gap-2">
                 <Input value={secret} readOnly className="font-mono text-sm" />
                 <Button
                   variant="outline"
                   size="icon"
                   onClick={() => copyToClipboard(secret, "secret")}
-                  title="Copy key"
+                  title={tf("copyKey")}
                 >
                   {copiedSecret ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
                 </Button>
@@ -247,8 +249,8 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
             </div>
 
             <div className="space-y-2">
-              <h4 className="font-medium">2. Enter the verification code</h4>
-              <p className="text-sm text-muted-foreground">Enter the 6-digit code that appears in your app</p>
+              <h4 className="font-medium">{tf("verifyTitle")}</h4>
+              <p className="text-sm text-muted-foreground">{tf("verifyDescription")}</p>
               <Input
                 type="text"
                 placeholder="000000"
@@ -262,10 +264,10 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
 
             <div className="flex gap-2">
               <Button onClick={handleVerify} className="flex-1 bg-blue-500 hover:bg-blue-600" disabled={loading}>
-                {loading ? "Verifying..." : "Verify and Enable"}
+                {loading ? tf("verifying") : tf("verifyAndEnable")}
               </Button>
               <Button onClick={handleClose} variant="outline" className="flex-1 bg-transparent" disabled={loading}>
-                Cancel
+                {t("actions.cancel")}
               </Button>
             </div>
           </div>
@@ -276,30 +278,29 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
             <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-4 flex items-start gap-2">
               <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
               <div>
-                <p className="font-medium text-green-500">2FA Enabled Successfully</p>
+                <p className="font-medium text-green-500">{tf("enabledTitle")}</p>
                 <p className="text-sm text-green-500 mt-1">
-                  Your account is now protected with two-factor authentication
+                  {tf("enabledDescription")}
                 </p>
               </div>
             </div>
 
             <div className="space-y-2">
-              <h4 className="font-medium text-orange-500">Important: Save your backup codes</h4>
+              <h4 className="font-medium text-orange-500">{tf("saveCodesTitle")}</h4>
               <p className="text-sm text-muted-foreground">
-                These codes will allow you to access your account if you lose access to your authentication app. Store
-                them in a safe place.
+                {tf("saveCodesDescription")}
               </p>
 
               <div className="bg-muted/50 rounded-lg p-4 space-y-2">
                 <div className="flex justify-between items-center mb-2">
-                  <span className="text-sm font-medium">Backup Codes</span>
+                  <span className="text-sm font-medium">{tf("backupCodes")}</span>
                   <Button variant="outline" size="sm" onClick={() => copyToClipboard(backupCodes.join("\n"), "codes")}>
                     {copiedCodes ? (
                       <Check className="h-4 w-4 text-green-500 mr-2" />
                     ) : (
                       <Copy className="h-4 w-4 mr-2" />
                     )}
-                    Copy All
+                    {tf("copyAll")}
                   </Button>
                 </div>
                 <div className="grid grid-cols-2 gap-2">
@@ -313,7 +314,7 @@ export function TwoFactorSetup({ open, onClose, onSuccess }: TwoFactorSetupProps
             </div>
 
             <Button onClick={handleFinish} className="w-full bg-blue-500 hover:bg-blue-600">
-              Finish
+              {tf("finish")}
             </Button>
           </div>
         )}