[Issue #49] feat: add i18n (#58)

* feat: add i18n

* fix: code clean

1 files changed, 17 insertions, 14 deletions

diff --git a/src/components/Card.js b/src/components/Card.js
index 7409d6c..50db589 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,5 +1,6 @@
 import QRCode from 'qrcode.react';
 import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import './style.css';
 
 export const Card = () => {
@@ -12,7 +13,7 @@ export const Card = () => {
     hidePassword: false,
   });
   const [portrait, setPortrait] = useState(false);
-
+  const { t } = useTranslation();
   const escape = (v) => {
     const needsEscape = ['"', ';', ',', ':', '\\'];
 
@@ -31,17 +32,17 @@ export const Card = () => {
   const onPrint = () => {
     if (network.ssid.length > 0) {
       if (network.password.length < 8 && network.encryptionMode === 'WPA') {
-        alert('Password must be at least 8 characters');
+        alert(t('wifi.alert.password.8'));
       } else if (
         network.password.length < 5 &&
         network.encryptionMode === 'WEP'
       ) {
-        alert('Password must be at least 5 characters');
+        alert(t('wifi.alert.password.5'));
       } else {
         window.print();
       }
     } else {
-      alert('Network name cannot be empty');
+      alert(t('wifi.alert.name'));
     }
   };
 
@@ -62,7 +63,9 @@ export const Card = () => {
         id="print-area"
         style={{ maxWidth: portrait ? '350px' : '100%' }}
       >
-        <h1 style={{ textAlign: portrait ? 'center' : 'left' }}>WiFi Login</h1>
+        <h1 style={{ textAlign: portrait ? 'center' : 'left' }}>
+          {t('wifi.login')}
+        </h1>
 
         <div
           className="details"
@@ -76,12 +79,12 @@ export const Card = () => {
           />
 
           <div className="inputs">
-            <label>Network name</label>
+            <label>{t('wifi.name')}</label>
             <textarea
               id="ssid"
               type="text"
               maxLength="32"
-              placeholder="WiFi Network name"
+              placeholder={t('wifi.name.placeholder')}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="none"
@@ -95,7 +98,7 @@ export const Card = () => {
                 ${network.encryptionMode === 'nopass' && 'hidden'}
               `}
             >
-              Password
+              {t('wifi.password')}
             </label>
             <textarea
               id="password"
@@ -109,7 +112,7 @@ export const Card = () => {
                   portrait && network.password.length > 40 ? '5em' : 'auto',
               }}
               maxLength="63"
-              placeholder="Password"
+              placeholder={t('wifi.password.placeholder')}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="none"
@@ -136,12 +139,12 @@ export const Card = () => {
                 for="hide-password-checkbox"
                 className={network.encryptionMode === 'nopass' ? 'hidden' : ''}
               >
-                Hide password
+                {t('wifi.password.hide')}
               </label>
             </div>
 
             <div className="no-print">
-              <label>Encryption:</label>
+              <label>{t('wifi.password.encryption')}:</label>
               <input
                 type="radio"
                 name="encrypt-select"
@@ -181,16 +184,16 @@ export const Card = () => {
           <span role="img" aria-label="mobile-phone">
             📸📱
           </span>
-          Point your phone's camera at the QR Code to connect automatically
+          {t('wifi.tip')}
         </p>
       </fieldset>
 
       <div className="buttons">
         <button id="rotate" onClick={() => setPortrait(!portrait)}>
-          Rotate
+          {t('button.rotate')}
         </button>
         <button id="print" onClick={onPrint}>
-          Print
+          {t('button.print')}
         </button>
       </div>
     </div>