feat: Add AuthentificationDialog

docs/styleguide.config.js

@@ -140,6 +140,7 @@ module.exports = {
         '../react/ContactsListModal',
         '../react/ContactPicker',
         '../react/CozyDialogs',
+        '../react/CozyDialogs/SpecificDialogs',
         '../react/CozyTheme',
         '../react/FileImageLoader',
         '../react/FilePicker',

react/CozyDialogs/SpecificDialogs/AuthentificationDialog.jsx

@@ -0,0 +1,109 @@
+import React, { useMemo, useState, forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import PermissionDialog from '../PermissionDialog'
+import Buttons from '../../Buttons'
+import { useI18n } from '../../I18n'
+import Typography from '../../Typography'
+import { useClient } from 'cozy-client'
+import CozyAuthentificationIcon from '../../Icons/CozyAuthentification'
+import PasswordField from '../../PasswordField'
+
+import withSpecificDialogsLocales from './withSpecificDialogsLocales'
+
+/**
+ * Dialog used to authenticate a user in the cozy system.
+ * The authentication logic is implemented in the applications.
+ */
+const AuthentificationDialog = forwardRef(
+  ({ onClose, onSubmit, isLoading, isOIDC, error, ...props }) => {
+    const { t } = useI18n()
+    const client = useClient()
+    const [password, setPassword] = useState('')
+
+    const handleAuthentification = e => {
+      e.preventDefault()
+      onSubmit(password)
+    }
+
+    const onPasswordChange = e => {
+      setPassword(e.currentTarget.value)
+    }
+
+    const passphraseResetUrl = useMemo(() => {
+      const url = new URL('/auth/passphrase_reset', client.getStackClient().uri)
+      return url.href
+    }, [client])
+
+    return (
+      <PermissionDialog
+        size="small"
+        open
+        onClose={onClose}
+        title={t(`authentification-dialog.${isOIDC ? 'title-oidc' : 'title'}`)}
+        icon={CozyAuthentificationIcon}
+        content={
+          <form onSubmit={handleAuthentification}>
+            <Typography variant="body1" className="u-ta-center">
+              {t('authentification-dialog.subtitle')}
+            </Typography>
+            <PasswordField
+              id="authentification-password-field"
+              disabled={isLoading}
+              value={password}
+              onChange={onPasswordChange}
+              className="u-mv-1"
+              label={t(
+                `authentification-dialog.${isOIDC ? 'label-oidc' : 'label'}`
+              )}
+              fullWidth
+              error={Boolean(error)}
+              helperText={error && t(`authentification-dialog.errors.${error}`)}
+              inputProps={{
+                autoFocus: true
+              }}
+            />
+            <Typography
+              variant="body1"
+              component="a"
+              color="primary"
+              href={passphraseResetUrl}
+              className="u-link"
+            >
+              {t('authentification-dialog.forgotten-password')}
+            </Typography>
+          </form>
+        }
+        actions={
+          <Buttons
+            busy={isLoading}
+            disabled={isLoading}
+            onClick={handleAuthentification}
+            label={t('authentification-dialog.unlock')}
+            fullWidth
+          />
+        }
+        {...props}
+      />
+    )
+  }
+)
+
+AuthentificationDialog.defaultProps = {
+  isOIDC: false
+}
+
+AuthentificationDialog.propTypes = {
+  /** A function call on clicking the close button */
+  onClose: PropTypes.func,
+  /** A function call on submitting the form with the password entered */
+  onSubmit: PropTypes.func,
+  /** Waiting status, e.g. processing of form submission */
+  isLoading: PropTypes.bool,
+  /** Show specific wording for OIDC */
+  isOIDC: PropTypes.bool,
+  /** Error key to display a message */
+  error: PropTypes.string
+}
+
+export default withSpecificDialogsLocales(AuthentificationDialog)

react/CozyDialogs/SpecificDialogs/Readme.md

@@ -0,0 +1,57 @@
+### Authentification dialog
+
+Dialog used to authenticate a user in the cozy system. The authentication logic is implemented in the applications.
+
+```jsx
+import { AuthentificationDialog } from  'cozy-ui/transpiled/react/CozyDialogs'
+import Button from  'cozy-ui/transpiled/react/Buttons'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import Variants from 'cozy-ui/docs/components/Variants'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import FormControl from 'cozy-ui/transpiled/react/FormControl'
+import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
+
+initialState = { showModal: false };
+
+const initialVariants = [{
+  closable: true,
+  loading: false,
+  oidc: false
+}]
+
+const initialErrors = [{
+  default: true,
+  invalid_password: false,
+  server: false
+}]
+
+const onClose = () => setState({ showModal: false })
+
+const onAuthentification = () => {
+  alert('authentification')
+  setState({ showModal: false })
+};
+
+<Variants initialVariants={initialVariants}>
+  {variant => (
+    <Variants initialVariants={initialErrors} radio>
+      {error => (
+        <DemoProvider>
+          <Button label="Open modal" onClick={() => setState({ showModal: true })}/>
+          {state.showModal && (
+            <AuthentificationDialog
+              onSubmit={onAuthentification}
+              onClose={variant.closable && onClose}
+              error={error.invalid_password ? 'invalid_password' : error.server ? 'server' : undefined }
+              isLoading={variant.loading}
+              isOIDC={variant.oidc}
+            />
+          )}
+        </DemoProvider>
+      )}
+    </Variants>
+  )}
+</Variants>
+```

react/CozyDialogs/SpecificDialogs/index.jsx

@@ -0,0 +1 @@
+export { default as AuthentificationDialog } from './AuthentificationDialog'

react/CozyDialogs/SpecificDialogs/locales/en.json

@@ -0,0 +1,16 @@
+{
+  "authentification-dialog": {
+    "title": "Login",
+    "title-oidc": "Cozy Pass",
+    "subtitle": "For security, please confirm your identity",
+    "label": "Cozy password",
+    "label-oidc": "Cozy Pass password",
+    "abort": "Leave",
+    "unlock": "Unlock",
+    "forgotten-password": "I forgot my password",
+    "errors": {
+      "invalid_password": "Incorrect password, try again.",
+      "server": "Something went wrong with the server. Please, reload the page."
+    }
+  }
+}

react/CozyDialogs/SpecificDialogs/locales/fr.json

@@ -0,0 +1,16 @@
+{
+  "authentification-dialog": {
+    "title": "Authentification",
+    "title-oidc": "Cozy Pass",
+    "subtitle": "Par sécurité, merci de confirmer votre identité",
+    "label": "Mot de passe Cozy",
+    "label-oidc": "Mot de passe Cozy Pass",
+    "abort": "Quitter",
+    "unlock": "Déverrouiller",
+    "forgotten-password": "J'ai oublié mon mot de passe",
+    "errors": {
+      "invalid_password": "Mot de passe incorrect, essayer à nouveau.",
+      "server": "Une erreur s'est produite. Merci de recharger la page."
+    }
+  }
+}

react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx

@@ -0,0 +1,11 @@
+import withOnlyLocales from '../../I18n/withOnlyLocales'
+
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+
+export const locales = {
+  en,
+  fr
+}
+
+export default withOnlyLocales(locales)

react/CozyDialogs/index.jsx

@@ -9,3 +9,4 @@ export { default as IllustrationDialog } from './IllustrationDialog'
 export { default as PermissionDialog } from './PermissionDialog'
 export { default as useCozyDialog } from './useCozyDialog'
 export { default as TopAnchoredDialog } from './TopAnchoredDialog'
+export { AuthentificationDialog } from './SpecificDialogs'