feat: Add PasswordField

docs/styleguide.config.js

@@ -93,6 +93,7 @@ module.exports = {
         '../react/NoSsr',
         '../react/OutlinedInput',
         '../react/Paper',
+        '../react/PasswordField',
         '../react/PieChart',
         '../react/Progress',
         '../react/ProgressionBanner',

react/PasswordField/Readme.md

@@ -0,0 +1,8 @@
+```jsx
+import PasswordField from 'cozy-ui/transpiled/react/PasswordField'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider';
+
+<DemoProvider>
+  <PasswordField defaultValue="Cl4ude€st1Nu@ge" />
+</DemoProvider>
+```

react/PasswordField/index.jsx

@@ -0,0 +1,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)

react/PasswordField/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "password-field": {
+    "show": "Show password",
+    "hide": "Hide password"
+  }
+}

react/PasswordField/locales/fr.json

@@ -0,0 +1,6 @@
+{
+  "password-field": {
+    "show": "Afficher le mot de passe",
+    "hide": "Masquer le mot de passe"
+  }
+}