1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
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}) => {
const {settings, setSettings, t} = useSettings()
const themeChange = c => {
setSettings(prev => ({...prev, theme: c}))
}
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 />
<legend>{t('language')}</legend>
<fieldset>
{['en', 'pl', 'es', 'de'].map(l => (
<fieldset key={l}>
<input
id={`language_${l}`}
type="radio"
name="language"
value={l}
defaultChecked={settings.language === l}
onChange={() => languageChange(l)}
/>
<label htmlFor={`language_${l}`}>{l.toUpperCase()}</label>
</fieldset>
))}
</fieldset>
<legend>{t('color_theme')}</legend>
<fieldset>
{['green', 'blue', 'black'].map(c => (
<fieldset key={c}>
<input
id={`theme_${c}`}
type="radio"
name="theme"
value={c}
defaultChecked={settings.theme === c}
onChange={() => themeChange(c)}
/>
<label htmlFor={`theme_${c}`} />
</fieldset>
))}
</fieldset>
</>
)}
<input className='window__button' type="submit" value={isLogin ? t('login') : t('register')} />
{errorMessage && <p className="error">{t(errorMessage)}</p>}
</form>
)
}
export default Form
Form.propTypes = {
errorMessage: PropTypes.string,
onSubmit: PropTypes.func,
}
|
