add language picker for auth forms

Author: alexjs-dev

.env

@@ -1,2 +1,2 @@
-API_URL=https://forautobackend.herokuapp.com
-API_URL_b=http://localhost:3030
+API_URL_A=https://forautobackend.herokuapp.com
+API_URL=http://localhost:3030

components/AuthForm/parts/ForgotForm.js

@@ -3,7 +3,7 @@ import { reduxForm } from 'redux-form'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import styles from '../AuthForm.module.scss'
-import { Button, Spacer } from '~components'
+import { Button, Spacer, LanguageList } from '~components'
 
 const formName = 'forgotPasswordForm'
 
@@ -21,6 +21,9 @@ const Component = ({ children, onSubmit, handleSubmit, title }) => {
       <Button fluid type={Button.types.GHOST} isInternalLink href="/sign-in">
         {t('button.signIn')}
       </Button>
+      <div style={{ marginTop: '2rem' }}>
+        <LanguageList />
+      </div>
     </form>
   )
 }

components/AuthForm/parts/SignInForm.js

@@ -12,6 +12,7 @@ import {
   Spacer,
   GoogleButton,
   FacebookButton,
+  LanguageList,
 } from '~components'
 
 const formName = 'signInForm'
@@ -23,10 +24,16 @@ const Component = ({ handleSubmit, onSubmit, children, title }) => {
     <form className={styles.container}>
       {title && <h4>{title}</h4>}
       <div className={styles.social}>
-        <GoogleButton title="Sign in with Google" href="https://forautobackend.herokuapp.com/oauth/google" />
+        <GoogleButton
+          title="Sign in with Google"
+          href="https://forautobackend.herokuapp.com/oauth/google"
+        />
       </div>
       <div className={styles.social}>
-        <FacebookButton title="Sign in with Facebook" href="https://forautobackend.herokuapp.com/oauth/facebook" />
+        <FacebookButton
+          title="Sign in with Facebook"
+          href="https://forautobackend.herokuapp.com/oauth/facebook"
+        />
       </div>
       {children}
       <BaseButton
@@ -54,6 +61,9 @@ const Component = ({ handleSubmit, onSubmit, children, title }) => {
       >
         {t('button.signUp')}
       </Button>
+      <div style={{ marginTop: '2rem' }}>
+        <LanguageList />
+      </div>
     </form>
   )
 }

components/AuthForm/parts/SignUpForm.js

@@ -3,7 +3,13 @@ import { reduxForm } from 'redux-form'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import styles from '../AuthForm.module.scss'
-import { Button, Spacer, GoogleButton, FacebookButton } from '~components'
+import {
+  Button,
+  Spacer,
+  LanguageList,
+  GoogleButton,
+  FacebookButton,
+} from '~components'
 
 const formName = 'signUpForm'
 
@@ -34,6 +40,9 @@ const Component = ({ onSubmit, children, handleSubmit, title }) => {
       <Button fluid type={Button.types.GHOST} isInternalLink href="/sign-in">
         {t('button.signIn')}
       </Button>
+      <div style={{ marginTop: '2rem' }}>
+        <LanguageList />
+      </div>
     </form>
   )
 }

components/LanguageSwitch/LanguageList.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { map } from 'lodash'
+import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import styles from './LanguageList.module.scss'
+import config from '~config'
+import EnglishIcon from '~public/icons/language/us.svg'
+import EstonianIcon from '~public/icons/language/et.svg'
+import RussianIcon from '~public/icons/language/ru.svg'
+import { BaseButton } from '~components'
+
+const { langType } = config
+
+const languages = {
+  [langType.en]: {
+    locale: [langType.en],
+    icon: <EnglishIcon />,
+  },
+  [langType.et]: {
+    locale: [langType.et],
+    icon: <EstonianIcon />,
+  },
+  [langType.ru]: {
+    locale: [langType.ru],
+    icon: <RussianIcon />,
+  },
+}
+
+const LanguageList = () => {
+  const { i18n } = useTranslation()
+  const { language = 'en' } = i18n
+  return (
+    <div className={styles.languages}>
+      {map(languages, (lang, key) => {
+        const active = key === language
+        return (
+          <BaseButton
+            key={key}
+            className={classNames(
+              styles.languageOption,
+              active && styles.active
+            )}
+            onClick={() => i18n.changeLanguage(key)}
+          >
+            {lang.icon}
+          </BaseButton>
+        )
+      })}
+    </div>
+  )
+}
+
+export default LanguageList

components/LanguageSwitch/LanguageList.module.scss

@@ -0,0 +1,16 @@
+@import 'vars.scss';
+
+
+.languages {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+  
+  .languageOption {
+    padding: spacing(1);
+    border-radius: 50%;
+    &.active {
+      background: $color-primary;
+    }
+  }

components/LanguageSwitch/index.js

@@ -1 +1,2 @@
 export { default as LanguageSwitch } from './LanguageSwitch'
+export { default as LanguageList } from './LanguageList'

components/Navigation/NavigationDrawer.js

@@ -9,28 +9,9 @@ import config from '~config'
 import EnglishIcon from '~public/icons/language/us.svg'
 import EstonianIcon from '~public/icons/language/et.svg'
 import RussianIcon from '~public/icons/language/ru.svg'
-import { BaseDrawer, BaseButton } from '~components'
-
-const { langType } = config
-
-const languages = {
-  [langType.en]: {
-    locale: [langType.en],
-    icon: <EnglishIcon />,
-  },
-  [langType.et]: {
-    locale: [langType.et],
-    icon: <EstonianIcon />,
-  },
-  [langType.ru]: {
-    locale: [langType.ru],
-    icon: <RussianIcon />,
-  },
-}
+import { BaseDrawer, BaseButton, LanguageList } from '~components'
 
 const NavigationDrawer = () => {
-  const { i18n } = useTranslation()
-  const { language = 'en' } = i18n
   return (
     <BaseDrawer>
       <div className={styles.drawer}>
@@ -39,23 +20,7 @@ const NavigationDrawer = () => {
         </BaseButton>
         <NavigationContent className={styles.option} fontSize={36} />
       </div>
-      <div className={styles.languages}>
-        {map(languages, (lang, key) => {
-          const active = key === language
-          return (
-            <BaseButton
-              key={key}
-              className={classNames(
-                styles.languageOption,
-                active && styles.active
-              )}
-              onClick={() => i18n.changeLanguage(key)}
-            >
-              {lang.icon}
-            </BaseButton>
-          )
-        })}
-      </div>
+      <LanguageList />
     </BaseDrawer>
   )
 }

components/Navigation/NavigationDrawer.module.scss

@@ -51,17 +51,3 @@
     }
   }
 }
-
-.languages {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.languageOption {
-  padding: spacing(1);
-  border-radius: 50%;
-  &.active {
-    background: $color-primary;
-  }
-}

components/index.js

@@ -4,7 +4,7 @@ import { BaseDrawer } from './Drawer'
 import { VehicleCard } from './Cards'
 import { Loader } from './Loader'
 import { Spacer } from './Spacer'
-import { LanguageSwitch } from './LanguageSwitch'
+import { LanguageSwitch, LanguageList } from './LanguageSwitch'
 import { LogoAbstract } from './Logo'
 import { Layout } from './Layout'
 import { BasicHeader, Header } from './Header'
@@ -55,6 +55,7 @@ export {
   BaseDrawer,
   BaseInput,
   LanguageSwitch,
+  LanguageList,
   Loader,
   LogoAbstract,
   ArrowPagination,