Feature/localisation

package.json

@@ -11,8 +11,10 @@
         "antd": "^4.14.0",
         "axios": "^0.21.1",
         "husky": "^5.2.0",
+        "i18next": "^20.1.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
+        "react-i18next": "^11.8.12",
         "react-redux": "^7.1.3",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",

src/App.js

@@ -1,22 +1,24 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import './App.css';
+import React from 'react'
+import { Provider } from 'react-redux'
+import './App.css'
 import 'antd/dist/antd.css'
 import './css/style.css'
 import Routes from './routes/index'
 import store from './store/store'
-import { setLocale } from './modules/Authentication/store/actions';
+import { setLocale } from './modules/Authentication/store/actions'
 
+/**import i18next configs when app starts */
+import './i18n'
 store.dispatch(setLocale('en'))
 
 function App() {
-  return (
-    <div className="App">
-      <Provider store={store}>
-        <Routes/>
-      </Provider>
-    </div>
-  );
+    return (
+        <div className="App">
+            <Provider store={store}>
+                <Routes />
+            </Provider>
+        </div>
+    )
 }
 
-export default App;
+export default App

src/i18n.js

@@ -0,0 +1,23 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+/*Supported Langs */
+const resources = {
+    en: {
+        translation: require('./localisations/en.json'),
+    },
+    ar: {
+        translation: require('./localisations/ar.json'),
+    },
+}
+/**Config i18next */
+i18n.use(initReactI18next) // passes i18n down to react-i18next
+    .init({
+        resources,
+        lng: localStorage.getItem('appLang'),
+        fallbackLng: 'en',
+        //keySeparator: false, // we do not use keys in form messages.welcome
+        interpolation: {
+            escapeValue: false, // react already safes from xss
+        },
+    })

src/localisations/ar.json

@@ -0,0 +1,11 @@
+{
+    "ChangeLang": "تغير اللغة",
+    "register": {
+        "Email": "البريد الاليكترونى",
+        "Password": "كلمة السر",
+        "rePassword": "اعد كتابة كلمة السر",
+        "wrongPass": "كلمة السر غير مطابقة",
+        "Register": "تسجيل",
+        "Login": "مستخدم سابق؟ قم بتسدخيل دخول"
+    }
+}

src/localisations/en.json

@@ -0,0 +1,11 @@
+{
+    "ChangeLang": "Change Language",
+    "register": {
+        "Email": "Email",
+        "Password": "Password",
+        "rePassword": "Rewrite Your Password",
+        "wrongPass": "Password Mismatch",
+        "Register": "Register",
+        "Login": "Already have An Account ? Login"
+    }
+}

src/localisations/index.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Button, Form, Input, Alert, Dropdown, Menu } from 'antd'
+import { useTranslation } from 'react-i18next'
+/**Component Wrapper for locals */
+const Create = (props) => {
+    const { t, i18n } = useTranslation()
+    /**array of Locals */
+    const getSupportedLocals = () => ['ar', 'en']
+    /**current Active Lang */
+    const getCurrentLang = () => i18n.language
+    /**localise by key */
+    const trans = (key) => t(key)
+    /**change lang by key */
+    const changeLang = (key) => {
+        i18n.changeLanguage(key).then(() => {
+            localStorage.setItem('appLang', getCurrentLang())
+        })
+    }
+    /**returns dropdown of supported languages for change */
+    const getChangeLangDropDown = () => {
+        const locals = getSupportedLocals()
+        const localsItems = () => (
+            <Menu>
+                {locals.map((v, k) => (
+                    <Menu.Item key={k}>
+                        <Button type="link" onClick={() => changeLang(v)}>
+                            {trans(v)}
+                        </Button>
+                    </Menu.Item>
+                ))}
+            </Menu>
+        )
+        return (
+            <Dropdown overlay={localsItems()} trigger={['hover']}>
+                <a className="ant-dropdown-link" href="#">
+                    {trans('ChangeLang')}
+                </a>
+            </Dropdown>
+        )
+    }
+
+    return {
+        trans,
+        changeLang,
+        getSupportedLocals,
+        getChangeLangDropDown,
+    }
+}
+
+export default { Create }

src/modules/Authentication/components/Register/Register.js

@@ -3,8 +3,11 @@ import { Button, Form, Input, Alert } from 'antd'
 import logo from '../../../../assets/images/logo.png'
 import { LockOutlined, UserOutlined } from '@ant-design/icons'
 import { rules } from '../Login/_rules'
+import localisation from '../../../../localisations'
 
 const Register = (props) => {
+    const local = localisation.Create()
+    const { trans, getChangeLangDropDown } = local
     const [formData, setFormData] = useState({
         password: '',
         repassword: '',
@@ -27,6 +30,7 @@ const Register = (props) => {
         setFormData(formData)
     }
     const { switchToLogin } = props
+
     return (
         <div className="auth-holder">
             <Form name="registerForm">
@@ -37,7 +41,7 @@ const Register = (props) => {
                     <Input
                         prefix={<UserOutlined />}
                         size="large"
-                        placeholder="Email"
+                        placeholder={trans('register.Email')}
                         className="email-input"
                         onChange={onFormFieldChange}
                         name="email"
@@ -48,7 +52,7 @@ const Register = (props) => {
                         name="password"
                         onChange={onFormFieldChange}
                         prefix={<LockOutlined />}
-                        placeholder="Password"
+                        placeholder={trans('register.Password')}
                         size="large"
                     />
                 </Form.Item>
@@ -57,13 +61,16 @@ const Register = (props) => {
                         name="repassword"
                         onChange={onFormFieldChange}
                         prefix={<LockOutlined />}
-                        placeholder="Re-Enter Password"
+                        placeholder={trans('register.rePassword')}
                         size="large"
                     />
                 </Form.Item>
                 {!isMatched && (
                     <Form.Item>
-                        <Alert message="Passwords Mismatch" type="error" />
+                        <Alert
+                            message={trans('register.wrongPass')}
+                            type="error"
+                        />
                     </Form.Item>
                 )}
                 <Form.Item>
@@ -73,12 +80,13 @@ const Register = (props) => {
                         type="primary"
                         htmlType="submit"
                     >
-                        Register
+                        {trans('register.Register')}
                     </Button>
                     <Button type="link" onClick={() => switchToLogin()}>
-                        Already have An Account ? Login
+                        {trans('register.Login')}
                     </Button>
                 </Form.Item>
+                {getChangeLangDropDown()}
             </Form>
         </div>
     )