do i18n to MtlsCreateView (fi/en)

src/assets/locale/en.json

@@ -29,14 +29,21 @@
   "ENROLLMENTVIEW": "ENROLLMENTVIEW",
   "enrollment-approved": "You have been approved for the service.",
   "continue-clicking-here": "Continue by clicking here.",
-  "awaiting-approval": "You in the Waiting Room!",
+  "awaiting-approval": "You are in the Waiting Room!",
   "copy-link-admin": "Copy the approval link to the administrator",
   "action-failed": "Action failed:",
   "approval-code": "Your approval code:",
-  "waiting-approval-instruction": "You are in the Waiting Room awaiting  your administrator user to approve you. Show them the QR code below, or press 'Copy Link' and send the approval link.",
+  "waiting-approval-instruction": "You are awaiting your administrator to approve you to the services. Show them the QR code below, or press 'Copy Link' and send them the approval link.",
   "approval-waiting-title": "Waiting for Approval (instructions).",
-  "approval-instruction-intro": "You are waiting for the administrator's approval to access the service. Approval can occur in one of these three ways:",
+  "approval-instruction-intro": "You are waiting administrator to approve you to the service. Approval can occur in one of these three ways:",
   "approval-instruction-qr": "Your administrator scans the <strong>QR code</strong> above from your screen. It contains the approval link, which the admin can access.",
   "approval-instruction-copy": "You may copy and send the <strong>approval link</strong> to your administrator, using a trusted method, such as email or an app.",
-  "approval-instruction-send": "Just send your <strong>approval code</strong> to your administrator, who will enter it into their approval view."
+  "approval-instruction-send": "Just send your <strong>approval code</strong> to your administrator, who will enter it into their approval view.",
+
+  "MTLSCREATEVIEW": "MTLSCREATEVIEW",
+  "mtls-download-install-title": "Download and install the mTLS Certificate",
+  "mtls-download-install-description": "You can use the service only, if your device has a mTLS Certificate of this server installed to your device. Download and install the key to your device.",
+  "mtls-installation-instructions": "Installation instructions",
+  "download-your-key": "Download your key",
+  "navigate-with-your-key": "Use your key to access the services"
 }

src/assets/locale/fi.json

@@ -37,5 +37,12 @@
   "approval-instruction-intro": "Odotat ylläpitäjän hyväksyntää palveluun. Hyväksyntä tapahtuu jollakin näistä kolmesta tavasta:",
   "approval-instruction-qr": "Ylläpitäjä skannaa oheisen <strong>QR-koodin</strong>, joka sisältää hyväksymislinkin.",
   "approval-instruction-copy": "Kopioi ja lähetä ylläpitäjälle <strong>hyväksymislinkki.</strong>",
-  "approval-instruction-send": "Lähetä ylläpitäjälle <strong>hyväksymiskoodisi</strong>, jonka hän syöttää hyväksyntänäkymäänsä."
+  "approval-instruction-send": "Lähetä ylläpitäjälle <strong>hyväksymiskoodisi</strong>, jonka hän syöttää hyväksyntänäkymäänsä.",
+
+  "MTLSCREATEVIEW": "MTLSCREATEVIEW",
+  "mtls-download-install-title": "Lataa ja asenna mTLS-avain",
+  "mtls-download-install-description": "Voit käyttää palvelua vain, jos laitteellasi on siihen mTLS-avain. Lataa ja asenna avain laitteellesi.",
+  "mtls-installation-instructions": "mTLS-asennusohjeet",
+  "download-your-key": "Lataa avaimesi",
+  "navigate-with-your-key": "Siirry palveluun avaimellasi"
 }

src/views/mtls/MtlsCreateView.tsx

@@ -12,6 +12,7 @@ import { IosInstructions } from "./IosMtlsInstructions";
 import { CardsContainer } from "../../components/CardsContainer";
 import { Text } from "../../components/Text";
 import { InfoModal } from "../../components/InfoModal";
+import { useTranslation } from "react-i18next";
 import key from "../../assets/icons/key.svg";
 
 export function MtlsCreateView() {
@@ -21,6 +22,7 @@ export function MtlsCreateView() {
   const { mutate: downloadCert } = useGetCertificate();
   const [callsign, setCallsign] = useState("");
   const [userOS, setUserOS] = useState("");
+  const { t } = useTranslation();
 
   useEffect(() => {
     setUserOS(getOperatingSystem());
@@ -66,8 +68,8 @@ export function MtlsCreateView() {
     <Layout showNavbar={true} showFooter={true}>
       <CardsContainer>
         <Text
-          title="Lataa ja asenna mTLS-avain"
-          description="Voit käyttää palvelua vain, jos laitteellasi on siihen mTLS-avain. Lataa ja asenna avain laitteellesi."
+          title={t("mtls-download-install-title")}
+          description={t("mtls-download-install-description")}
         />
 
         <div className="flex flex-col items-center">
@@ -81,21 +83,21 @@ export function MtlsCreateView() {
             </div>
           </div>
         </div>
-        <Text title={`mTLS-asennusohjeet: ${userOS}`} />
+        <Text title={`${t("mtls-installation-instructions")}: ${userOS}`} />
         {renderInstructions()}
         <div className="flex flex-row pt-8 items-center gap-4">
           <Button
             variant={{ color: "success" }}
             className="flex rounded-lg items-center justify-center h-20 px-4 text-center font-bold transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed text-white bg-success hover:bg-success-700 focus:ring-success-300 disabled:bg-success-200 min-w-[180px]" // Ensure you add min-w-[180px] or another specific width to control width and use h-20 for height
             onClick={() => callsign && downloadCert(callsign)}
           >
-            Lataa avaimesi
+            {t("download-your-key")}
           </Button>
           <a
             href={mtlsUrl}
             className="flex rounded-lg items-center justify-center h-20 px-4 text-center font-bold transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed text-white bg-primary hover:bg-primary-700 focus:ring-primary-300 disabled:bg-primary-200 min-w-[180px]" // Use the same classes here
           >
-            Siirry palveluun avaimellasi
+            {t("navigate-with-your-key")}
           </a>
         </div>
       </CardsContainer>