From bc51f1b761763ca585f225190e7d859e0cd03209 Mon Sep 17 00:00:00 2001
From: Baoyuan <baoyuan.top@gmail.com>
Date: Fri, 16 Jul 2021 23:02:03 +0800
Subject: [Issue #49] feat: add i18n (#58)

* feat: add i18n

* fix: code clean
---
 src/App.js             | 23 +++++++++++-------
 src/components/Card.js | 31 +++++++++++++-----------
 src/i18n.js            | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.js           |  1 +
 4 files changed, 97 insertions(+), 22 deletions(-)
 create mode 100644 src/i18n.js

(limited to 'src')

diff --git a/src/App.js b/src/App.js
index 3832de1..1b97aec 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,32 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Card } from './components/Card';
 import './style.css';
 import logo from '../src/images/wifi.png';
 
 function App() {
+  const { t, i18n } = useTranslation();
+
   return (
     <div className="App">
       <h1>
         <img alt="icon" src={logo} width="32" height="32" />
-        &nbsp; WiFi Card
+        &nbsp; {t('title')}
       </h1>
 
-      <p className="tag">
-        Print a simple card with your WiFi login details. Tape it to the fridge,
-        keep it in your wallet, etc.
-      </p>
+      <div>
+        <label>{t('select')}</label>
+        <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
+          <option value="en-US">en-US</option>
+          <option value="简体中文">简体中文</option>
+        </select>
+      </div>
+
+      <p className="tag">{t('desc.use')}</p>
 
       <p className="tag">
-        Your WiFi information is never sent to the server. No tracking,
-        analytics, or fingerprinting are used on this website. View the{' '}
-        <a href="https://github.com/bndw/wifi-card">source code</a>.
+        {t('desc.privacy')}{' '}
+        <a href="https://github.com/bndw/wifi-card">{t('desc.source')}</a>.
       </p>
 
       <Card />
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>
diff --git a/src/i18n.js b/src/i18n.js
new file mode 100644
index 0000000..2990dcb
--- /dev/null
+++ b/src/i18n.js
@@ -0,0 +1,64 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+const resources = {
+  'en-US': {
+    translation: {
+      title: 'WiFi Card',
+      'desc.use':
+        'Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc.',
+      'desc.privacy':
+        'Your WiFi information is never sent to the server. No tracking, analytics, or fingerprinting are used on this website. View the',
+      'desc.source': 'source code',
+      'wifi.login': 'WiFi Login',
+      'wifi.name': 'Network name',
+      'wifi.name.placeholder': 'WiFi Network name',
+      'wifi.password': 'Password',
+      'wifi.password.placeholder': 'Password',
+      'wifi.password.hide': 'Hide password field before printing',
+      'wifi.password.encryption': 'Encryption',
+      'wifi.tip':
+        "Point your phone's camera at the QR Code to connect automatically",
+      'wifi.alert.name': 'Network name cannot be empty',
+      'wifi.alert.password.length.5': 'Password must be at least 5 characters',
+      'wifi.alert.password.8': 'Password must be at least 8 characters',
+      'button.rotate': 'Rotate',
+      'button.print': 'Print',
+      select: 'Select Language',
+    },
+  },
+  简体中文: {
+    translation: {
+      title: 'WiFi 连接卡',
+      'desc.use':
+        '打印一张带有 WiFi 详细信息的登录卡片，把它贴到冰箱上、放到你的钱包里...',
+      'desc.privacy':
+        '您的 WiFi 信息永远不会发送到服务端。本网站不使用追踪、分析或指纹识别。查看',
+      'desc.source': '源码',
+      'wifi.login': '连接 WiFi',
+      'wifi.name': '网络名称',
+      'wifi.name.placeholder': 'WiFi 网络名称',
+      'wifi.password': '密码',
+      'wifi.password.placeholder': '密码',
+      'wifi.password.hide': '打印前隐藏密码字段',
+      'wifi.password.encryption': '加密',
+      'wifi.tip': '将手机摄像头对准二维码即可自动连接',
+      'wifi.alert.name': '网络名称不能为空',
+      'wifi.alert.password.length.5': '密码至少 5 个字符',
+      'wifi.alert.password.8': '密码至少 8 个字符',
+      'button.rotate': '翻转',
+      'button.print': '打印',
+      select: '选择语言',
+    },
+  },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: 'en-US',
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;
diff --git a/src/index.js b/src/index.js
index c1f31c5..30091ec 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import './i18n';
 
 ReactDOM.render(
   <React.StrictMode>
-- 
cgit v1.2.3