1 files changed, 63 insertions, 11 deletions
diff --git a/components/Form.js b/components/Form.js
index f41c958..59f9710 100644
--- a/components/Form.js
+++ b/components/Form.js
@@ -1,20 +1,72 @@
 import styles from 'styles/Main.module.scss'
 import React from 'react'
 import PropTypes from 'prop-types'
+import useSettings from 'hooks/useSettings'
 
-const Form = ({errorMessage, onSubmit, isLogin}) => (
-  <form className={`window window--popup ${styles.userForm}`} onSubmit={onSubmit}>
-    <div className="window__content--popup">
-      {isLogin ? 'Login to access your notes' : 'Register new user'}
-    </div>
-    <input type="email" name="email" placeholder="email" required />
-    <input type="password" name="password" minLength="6" placeholder="password" required />
+const Form = ({errorMessage, onSubmit, isLogin}) => {
+  const {settings, setSettings, t} = useSettings()
 
-    <input className='window__button' type="submit" value={isLogin ? 'Login' : 'Register'} />
+  const themeChange = c => {
+    setSettings(prev => ({...prev, theme: c}))
+  }
 
-    {errorMessage && <p className="error">{errorMessage}</p>}
-  </form>
-)
+  const languageChange = l => {
+    setSettings(prev => ({...prev, language: l}))
+  }
+
+  return (
+    <form className={`window window--popup ${styles.userForm}`} onSubmit={onSubmit}>
+      <div className="window__content--popup">
+        {isLogin ? t('log_in') : t('register_user')}
+      </div>
+      <input type="email" name="email" placeholder="email" required />
+      <input type="password" name="password" minLength="6" placeholder={t('password')} required />
+      {!isLogin && (
+        <>
+          <input type="password" name="password_confirm" placeholder={t('confirm_password')} required />
+          <fieldset>
+            <legend>{t('language')}</legend>
+            {['en', 'pl', 'es', 'de'].map(l => (
+              <>
+                <input
+                  key={`i_${l}`}
+                  id={`language_${l}`}
+                  type="radio"
+                  name="language"
+                  value={l}
+                  defaultChecked={settings.language === l}
+                  onChange={() => languageChange(l)}
+                />
+                <label key={`l_${l}`} htmlFor={`language_${l}`}>{l.toUpperCase()}</label>
+              </>
+            ))}
+          </fieldset>
+          <fieldset>
+            <legend>{t('color_theme')}</legend>
+            {['green', 'blue', 'black'].map(c => (
+              <>
+                <input
+                  key={`i_${c}`}
+                  id={`theme_${c}`}
+                  type="radio"
+                  name="theme"
+                  value={c}
+                  defaultChecked={settings.theme === c}
+                  onChange={() => themeChange(c)}
+                />
+                <label key={`l_${c}`} htmlFor={`theme_${c}`} />
+              </>
+            ))}
+          </fieldset>
+        </>
+      )}
+
+      <input className='window__button' type="submit" value={isLogin ? t('login') : t('register')} />
+
+      {errorMessage && <p className="error">{t(errorMessage)}</p>}
+    </form>
+  )
+}
 
 export default Form