i18n: complete DeviceVerification + PasswordStage dialog translation

Review flagged that wrapping only the buttons left the dialog body copy
hardcoded (mixed-language dialogs once a non-en locale ships). Wrap the
remaining body/waiting strings ("Please accept…", "Confirm the emoji…",
"Do not Match", "Your device is verified.", etc.) and the PasswordStage
prompt, adding hooks to the sub-components that lacked one. Keys added to
en.json; all t() keys verified to resolve.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/locales/en.json

@@ -25,7 +25,17 @@
       "close": "Close",
       "accept": "Accept",
       "they_match": "They Match",
-      "okay": "Okay"
+      "okay": "Okay",
+      "do_not_match": "Do not Match",
+      "please_accept": "Please accept the request from other device.",
+      "waiting_accept": "Waiting for request to be accepted...",
+      "click_accept": "Click accept to start the verification process.",
+      "request_accepted": "Verification request has been accepted.",
+      "waiting_response": "Waiting for the response from other device...",
+      "starting_emoji": "Starting verification using emoji comparison...",
+      "confirm_emoji": "Confirm the emoji below are displayed on both devices, in the same order:",
+      "device_verified": "Your device is verified.",
+      "verification_canceled": "Verification has been canceled."
     },
     "UrlPreview": {
       "join_server": "Join Server"
@@ -41,7 +51,8 @@
     "PasswordStage": {
       "account_password": "Account Password",
       "password": "Password",
-      "invalid_password": "Invalid Password!"
+      "invalid_password": "Invalid Password!",
+      "authenticate_prompt": "To perform this action you need to authenticate yourself by entering you account password."
     }
   }
 }

src/app/components/DeviceVerification.tsx

@@ -64,10 +64,11 @@ function VerificationUnexpected({ message, onClose }: VerificationUnexpectedProp
 }
 
 function VerificationWaitAccept() {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Please accept the request from other device.</Text>
-      <WaitingMessage message="Waiting for request to be accepted..." />
+      <Text>{t('Organisms.DeviceVerification.please_accept')}</Text>
+      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_accept')} />
     </Box>
   );
 }
@@ -82,7 +83,7 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
   const accepting = acceptState.status === AsyncStatus.Loading;
   return (
     <Box direction="Column" gap="400">
-      <Text>Click accept to start the verification process.</Text>
+      <Text>{t('Organisms.DeviceVerification.click_accept')}</Text>
       <Button
         variant="Primary"
         fill="Solid"
@@ -97,10 +98,11 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
 }
 
 function VerificationWaitStart() {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification request has been accepted.</Text>
-      <WaitingMessage message="Waiting for the response from other device..." />
+      <Text>{t('Organisms.DeviceVerification.request_accepted')}</Text>
+      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_response')} />
     </Box>
   );
 }
@@ -109,13 +111,14 @@ type VerificationStartProps = {
   onStart: () => Promise<void>;
 };
 function AutoVerificationStart({ onStart }: VerificationStartProps) {
+  const { t } = useTranslation();
   useEffect(() => {
     onStart();
   }, [onStart]);
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
+      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
     </Box>
   );
 }
@@ -129,7 +132,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
 
   return (
     <Box direction="Column" gap="400">
-      <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
+      <Text>{t('Organisms.DeviceVerification.confirm_emoji')}</Text>
       <Box
         className={ContainerColor({ variant: 'SurfaceVariant' })}
         style={{
@@ -169,7 +172,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
           onClick={() => sasData.mismatch()}
           disabled={confirming}
         >
-          <Text size="B400">Do not Match</Text>
+          <Text size="B400">{t('Organisms.DeviceVerification.do_not_match')}</Text>
         </Button>
       </Box>
     </Box>
@@ -181,6 +184,7 @@ type SasVerificationProps = {
   onCancel: () => void;
 };
 function SasVerification({ verifier, onCancel }: SasVerificationProps) {
+  const { t } = useTranslation();
   const [sasData, setSasData] = useState<ShowSasCallbacks>();
 
   useVerifierShowSas(verifier, setSasData);
@@ -196,7 +200,7 @@ function SasVerification({ verifier, onCancel }: SasVerificationProps) {
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
+      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
     </Box>
   );
 }
@@ -209,7 +213,7 @@ function VerificationDone({ onExit }: VerificationDoneProps) {
   return (
     <Box direction="Column" gap="400">
       <div>
-        <Text>Your device is verified.</Text>
+        <Text>{t('Organisms.DeviceVerification.device_verified')}</Text>
       </div>
       <Button variant="Primary" fill="Solid" onClick={onExit}>
         <Text size="B400">{t('Organisms.DeviceVerification.okay')}</Text>
@@ -225,7 +229,7 @@ function VerificationCanceled({ onClose }: VerificationCanceledProps) {
   const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification has been canceled.</Text>
+      <Text>{t('Organisms.DeviceVerification.verification_canceled')}</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
         <Text size="B400">{t('Organisms.DeviceVerification.close')}</Text>
       </Button>

src/app/components/uia-stages/PasswordStage.tsx

@@ -61,10 +61,7 @@ export function PasswordStage({
         gap="400"
       >
         <Box direction="Column" gap="400">
-          <Text size="T200">
-            To perform this action you need to authenticate yourself by entering you account
-            password.
-          </Text>
+          <Text size="T200">{t('Organisms.PasswordStage.authenticate_prompt')}</Text>
           <Box direction="Column" gap="100">
             <Text size="L400">{t('Organisms.PasswordStage.password')}</Text>
             <PasswordInput size="400" name="passwordInput" outlined autoFocus required />