/
index.jsx
53 lines (47 loc) · 1.31 KB
/
index.jsx
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
import React, { useState } from 'react'
import TextField from '../TextField'
import IconButton from '../IconButton'
import Icon from '../Icon'
import InputAdornment from '../InputAdornment'
import EyeIcon from '../Icons/Eye'
import EyeClosedIcon from '../Icons/EyeClosed'
import { useI18n } from '../I18n'
import withOnlyLocales from '../I18n/withOnlyLocales'
import en from './locales/en.json'
import fr from './locales/fr.json'
export const locales = {
en,
fr
}
/**
* Password field with the option of hiding or displaying it
*/
const PasswordField = props => {
const { t } = useI18n()
const [hidden, setHidden] = useState(true)
return (
<TextField
variant="outlined"
type={hidden ? 'password' : 'text'}
{...props}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
label={
hidden ? t('password-field.show') : t('password-field.hide')
}
disabled={props.disabled}
onClick={() => setHidden(!hidden)}
edge="end"
>
<Icon icon={hidden ? EyeIcon : EyeClosedIcon} />
</IconButton>
</InputAdornment>
),
...props.InputProps
}}
/>
)
}
export default withOnlyLocales(locales)(PasswordField)