cozy-sharing 37.2.1 → 37.2.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [37.2.2](https://github.com/cozy/cozy-libs/compare/cozy-sharing@37.2.1...cozy-sharing@37.2.2) (2026-07-22)
+
+**Note:** Version bump only for package cozy-sharing
+
 ## [37.2.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@37.2.0...cozy-sharing@37.2.1) (2026-07-22)
 
 **Note:** Version bump only for package cozy-sharing

package/dist/components/ShareLinkAccessModal/ShareLinkAccessModal.js

@@ -1,7 +1,6 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { addDays } from 'date-fns';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { Icon, Link as LinkIcon, Settings } from '@linagora/twake-icons';
@@ -10,24 +9,20 @@ import Box from 'cozy-ui/transpiled/react/Box';
 import Button from 'cozy-ui/transpiled/react/Buttons';
 import Chip from 'cozy-ui/transpiled/react/Chips';
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs';
-import DatePicker from 'cozy-ui/transpiled/react/DatePicker';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
-import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel';
 import Grid from 'cozy-ui/transpiled/react/Grid';
 import IconButton from 'cozy-ui/transpiled/react/IconButton';
 import Menu from 'cozy-ui/transpiled/react/Menu';
 import MenuItem from 'cozy-ui/transpiled/react/MenuItem';
-import Switch from 'cozy-ui/transpiled/react/Switch';
-import TextField from 'cozy-ui/transpiled/react/TextField';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 import { useI18n } from 'twake-i18n';
 import withLocales from '../../hoc/withLocales';
 import { useSharingContext } from '../../hooks/useSharingContext';
+import { ShareLinkSettings } from '../ShareRestrictionModal/ShareLinkSettings';
 var DIALOG_CLASSES = {
   paper: 'u-h-auto'
 };
 var DOCUMENT_ICON_SIZE = 18;
-var PASSWORD_MIN_LENGTH = 4;
 export var ShareLinkAccessModal = function ShareLinkAccessModal(_ref) {
   var documents = _ref.documents,
       onCancel = _ref.onCancel,
@@ -75,35 +70,30 @@ export var ShareLinkAccessModal = function ShareLinkAccessModal(_ref) {
       password = _useState14[0],
       setPassword = _useState14[1];
 
-  var _useState15 = useState(false),
+  var _useState15 = useState(true),
       _useState16 = _slicedToArray(_useState15, 2),
-      busy = _useState16[0],
-      setBusy = _useState16[1];
+      isDateValid = _useState16[0],
+      setIsDateValid = _useState16[1];
 
-  var _useState17 = useState(null),
+  var _useState17 = useState(true),
       _useState18 = _slicedToArray(_useState17, 2),
-      error = _useState18[0],
-      setError = _useState18[1];
+      isPasswordValid = _useState18[0],
+      setIsPasswordValid = _useState18[1];
 
-  var isPasswordValid = !passwordEnabled || password.trim().length >= PASSWORD_MIN_LENGTH;
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      busy = _useState20[0],
+      setBusy = _useState20[1];
+
+  var _useState21 = useState(null),
+      _useState22 = _slicedToArray(_useState21, 2),
+      error = _useState22[0],
+      setError = _useState22[1];
 
   var handleAccessMenuClose = function handleAccessMenuClose() {
     setAccessAnchorEl(null);
   };
 
-  var handleDateEnabledChange = function handleDateEnabledChange(event) {
-    setDateEnabled(event.target.checked);
-    setSelectedDate(event.target.checked ? addDays(new Date(), 30) : null);
-  };
-
-  var handlePasswordEnabledChange = function handlePasswordEnabledChange(event) {
-    setPasswordEnabled(event.target.checked);
-  };
-
-  var handlePasswordChange = function handlePasswordChange(event) {
-    setPassword(event.target.value);
-  };
-
   var handleSettingsOpen = function handleSettingsOpen() {
     setIsSettingsOpen(true);
   };
@@ -168,44 +158,24 @@ export var ShareLinkAccessModal = function ShareLinkAccessModal(_ref) {
         display: "flex",
         flexDirection: "column",
         gridGap: "1rem"
-      }, /*#__PURE__*/React.createElement(FormControlLabel, {
-        control: /*#__PURE__*/React.createElement(Switch, {
-          checked: dateEnabled,
-          onChange: handleDateEnabledChange,
-          disabled: busy,
-          color: "primary"
-        }),
-        label: t('ShareLinkAccessModal.expiry')
-      }), dateEnabled && /*#__PURE__*/React.createElement(DatePicker, {
-        label: t('ShareLinkAccessModal.expiryDate'),
-        value: selectedDate,
-        minDate: new Date(),
-        onChange: setSelectedDate,
-        disabled: busy,
-        className: "u-w-100"
-      }), /*#__PURE__*/React.createElement(FormControlLabel, {
-        control: /*#__PURE__*/React.createElement(Switch, {
-          checked: passwordEnabled,
-          onChange: handlePasswordEnabledChange,
-          disabled: busy,
-          color: "primary"
-        }),
-        label: t('ShareLinkAccessModal.password')
-      }), passwordEnabled && /*#__PURE__*/React.createElement(TextField, {
-        label: t('ShareLinkAccessModal.passwordLabel'),
-        value: password,
-        onChange: handlePasswordChange,
-        disabled: busy,
-        type: "password",
-        error: !isPasswordValid,
-        helperText: isPasswordValid ? null : t('ShareLinkAccessModal.passwordTooShort', {
-          count: PASSWORD_MIN_LENGTH
-        }),
-        fullWidth: true,
-        inputProps: {
-          minLength: PASSWORD_MIN_LENGTH
-        }
-      }))
+      }, /*#__PURE__*/React.createElement(ShareLinkSettings, {
+        dateEnabled: dateEnabled,
+        isPasswordValid: isPasswordValid,
+        password: password,
+        passwordEnabled: passwordEnabled,
+        selectedDate: selectedDate,
+        setDateEnabled: setDateEnabled,
+        setIsDateValid: setIsDateValid,
+        setIsPasswordValid: setIsPasswordValid,
+        setPassword: setPassword,
+        setPasswordEnabled: setPasswordEnabled,
+        setSelectedDate: setSelectedDate
+      })),
+      actions: /*#__PURE__*/React.createElement(Button, {
+        label: t('ShareRestrictionModal.action.confirm'),
+        onClick: handleSettingsBack,
+        disabled: !isDateValid || !isPasswordValid
+      })
     });
   }
 
@@ -297,7 +267,7 @@ export var ShareLinkAccessModal = function ShareLinkAccessModal(_ref) {
     }), /*#__PURE__*/React.createElement(Button, {
       label: t('ShareLinkAccessModal.addLinks'),
       onClick: handleSubmit,
-      disabled: busy || !isPasswordValid,
+      disabled: busy || !isDateValid || !isPasswordValid,
       busy: busy
     }))
   });

package/dist/components/ShareLinkAccessModal/ShareLinkAccessModal.spec.js

@@ -17,6 +17,15 @@ jest.mock('../../hoc/withLocales', function () {
     };
   };
 });
+jest.mock('cozy-ui/transpiled/react/providers/Alert', function () {
+  return {
+    useAlert: function useAlert() {
+      return {
+        showAlert: jest.fn()
+      };
+    }
+  };
+});
 jest.mock('cozy-ui/transpiled/react/CozyDialogs', function () {
   return {
     ConfirmDialog: function ConfirmDialog(_ref) {
@@ -133,11 +142,12 @@ jest.mock('twake-i18n', function () {
             'ShareLinkAccessModal.cancel': 'Cancel',
             'ShareLinkAccessModal.addLinks': 'Add links',
             'ShareLinkAccessModal.settingsTitle': 'Sharing settings',
-            'ShareLinkAccessModal.expiry': 'Set an expiration date',
-            'ShareLinkAccessModal.expiryDate': 'Expiration date',
-            'ShareLinkAccessModal.password': 'Require a password',
-            'ShareLinkAccessModal.passwordLabel': 'Password',
-            'ShareLinkAccessModal.passwordTooShort': 'Password must contain at least 4 characters.',
+            'ShareRestrictionModal.action.confirm': 'Confirm',
+            'ShareRestrictionModal.invalidPasswordMessage': 'Password must contain at least 4 characters.',
+            'BoxDate.text': 'Set an expiration date',
+            'BoxDate.label': 'Expiration date',
+            'BoxPassword.text': 'Require a password',
+            'BoxPassword.label': 'Password',
             'ShareLinkAccessModal.error.persistence': 'Could not save link permissions. Please try again.'
           }[key] || key;
         }
@@ -200,7 +210,7 @@ describe('ShareLinkAccessModal', function () {
     }));
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
-  it('preserves the access settings after returning from the settings screen', function () {
+  it('validates the settings by returning to the access screen', function () {
     renderModal();
     fireEvent.click(screen.getByLabelText('Access level'));
     fireEvent.click(screen.getByRole('button', {
@@ -217,7 +227,7 @@ describe('ShareLinkAccessModal', function () {
       }
     });
     fireEvent.click(screen.getByRole('button', {
-      name: 'Back'
+      name: 'Confirm'
     }));
     expect(screen.getByLabelText('Access level')).toHaveTextContent('Editor');
     fireEvent.click(screen.getByRole('button', {
@@ -238,6 +248,9 @@ describe('ShareLinkAccessModal', function () {
         value: 'abc'
       }
     });
+    expect(screen.getByRole('button', {
+      name: 'Confirm'
+    })).toBeDisabled();
     fireEvent.click(screen.getByRole('button', {
       name: 'Back'
     }));

package/dist/components/ShareRestrictionModal/BoxDate.js

@@ -50,6 +50,9 @@ export var BoxDate = function BoxDate(_ref) {
     edge: "start",
     color: "primary",
     checked: toggle,
+    inputProps: {
+      'aria-label': t('BoxDate.text')
+    },
     onChange: handleDateToggle
   })))), toggle && /*#__PURE__*/React.createElement("div", {
     className: "u-pt-half u-ph-1 u-pb-1"

package/dist/components/ShareRestrictionModal/BoxPassword.js

@@ -17,10 +17,9 @@ import TextField from 'cozy-ui/transpiled/react/TextField';
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert';
 import { useI18n } from 'twake-i18n';
 import { copyToClipboard } from './helpers';
-import { checkIsPermissionHasPassword } from '../../helpers/permissions';
-import { useSharingContext } from '../../hooks/useSharingContext';
 export var BoxPassword = function BoxPassword(_ref) {
-  var file = _ref.file,
+  var _ref$hasPassword = _ref.hasPassword,
+      hasPassword = _ref$hasPassword === void 0 ? false : _ref$hasPassword,
       onChange = _ref.onChange,
       password = _ref.password,
       onToggle = _ref.onToggle,
@@ -41,12 +40,6 @@ export var BoxPassword = function BoxPassword(_ref) {
 
   var inputRef = React.useRef();
 
-  var _useSharingContext = useSharingContext(),
-      getDocumentPermissions = _useSharingContext.getDocumentPermissions;
-
-  var permissions = getDocumentPermissions(file._id);
-  var hasPassword = checkIsPermissionHasPassword(permissions);
-
   var handlePasswordToggle = function handlePasswordToggle(val) {
     var _val$target$checked, _val$target;
 
@@ -113,6 +106,9 @@ export var BoxPassword = function BoxPassword(_ref) {
     edge: "start",
     color: "primary",
     checked: toggle,
+    inputProps: {
+      'aria-label': t('BoxPassword.text')
+    },
     onChange: handlePasswordToggle
   })))), toggle && /*#__PURE__*/React.createElement("div", {
     className: "u-pt-half u-ph-1 u-pb-1"
@@ -146,6 +142,7 @@ export var BoxPassword = function BoxPassword(_ref) {
   }))));
 };
 BoxPassword.propTypes = {
+  hasPassword: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   password: PropTypes.string,
   onToggle: PropTypes.func.isRequired,

package/dist/components/ShareRestrictionModal/ShareLinkSettings.js

@@ -0,0 +1,80 @@
+import { addDays, isValid } from 'date-fns';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useI18n } from 'twake-i18n';
+import { BoxDate } from './BoxDate';
+import { BoxPassword } from './BoxPassword';
+export var PASSWORD_MIN_LENGTH = 4;
+export var ShareLinkSettings = function ShareLinkSettings(_ref) {
+  var dateEnabled = _ref.dateEnabled,
+      _ref$hasPassword = _ref.hasPassword,
+      hasPassword = _ref$hasPassword === void 0 ? false : _ref$hasPassword,
+      isPasswordValid = _ref.isPasswordValid,
+      password = _ref.password,
+      passwordEnabled = _ref.passwordEnabled,
+      selectedDate = _ref.selectedDate,
+      setDateEnabled = _ref.setDateEnabled,
+      setIsDateValid = _ref.setIsDateValid,
+      setIsPasswordValid = _ref.setIsPasswordValid,
+      setPassword = _ref.setPassword,
+      setPasswordEnabled = _ref.setPasswordEnabled,
+      setSelectedDate = _ref.setSelectedDate;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var handlePasswordChange = function handlePasswordChange(value) {
+    setPassword(value);
+    setIsPasswordValid(hasPassword && value.trim().length === 0 || value.trim().length >= PASSWORD_MIN_LENGTH);
+  };
+
+  var handlePasswordToggle = function handlePasswordToggle(enabled) {
+    setPasswordEnabled(enabled);
+    setPassword('');
+    setIsPasswordValid(!enabled || hasPassword);
+  };
+
+  var handleDateChange = function handleDateChange(date) {
+    setSelectedDate(date);
+    setIsDateValid(isValid(date));
+  };
+
+  var handleDateToggle = function handleDateToggle(enabled) {
+    setDateEnabled(enabled);
+    setSelectedDate(enabled ? addDays(new Date(), 30) : null);
+    setIsDateValid(true);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BoxDate, {
+    onChange: handleDateChange,
+    date: selectedDate,
+    onToggle: handleDateToggle,
+    toggle: dateEnabled
+  }), /*#__PURE__*/React.createElement(BoxPassword, {
+    hasPassword: hasPassword,
+    helperText: isPasswordValid ? null : t('ShareRestrictionModal.invalidPasswordMessage', {
+      smart_count: PASSWORD_MIN_LENGTH - password.length
+    }),
+    onChange: handlePasswordChange,
+    password: password,
+    onToggle: handlePasswordToggle,
+    toggle: passwordEnabled,
+    inputProps: {
+      minLength: PASSWORD_MIN_LENGTH
+    }
+  }));
+};
+ShareLinkSettings.propTypes = {
+  dateEnabled: PropTypes.bool.isRequired,
+  hasPassword: PropTypes.bool,
+  isPasswordValid: PropTypes.bool.isRequired,
+  password: PropTypes.string,
+  passwordEnabled: PropTypes.bool.isRequired,
+  selectedDate: PropTypes.instanceOf(Date),
+  setDateEnabled: PropTypes.func.isRequired,
+  setIsDateValid: PropTypes.func.isRequired,
+  setIsPasswordValid: PropTypes.func.isRequired,
+  setPassword: PropTypes.func.isRequired,
+  setPasswordEnabled: PropTypes.func.isRequired,
+  setSelectedDate: PropTypes.func.isRequired
+};

package/dist/components/ShareRestrictionModal/ShareRestrictionContentModal.js

@@ -1,15 +1,12 @@
-import { addDays, isValid } from 'date-fns';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Box from 'cozy-ui/transpiled/react/Box';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 import { useI18n } from 'twake-i18n';
-import { BoxDate } from './BoxDate';
 import { BoxEditingRights } from './BoxEditingRights';
-import { BoxPassword } from './BoxPassword';
+import { ShareLinkSettings } from './ShareLinkSettings';
 import { checkIsPermissionHasPassword } from '../../helpers/permissions';
 import { useSharingContext } from '../../hooks/useSharingContext';
-var PASSWORD_MIN_LENGTH = 4;
 export var ShareRestrictionContentModal = function ShareRestrictionContentModal(_ref) {
   var file = _ref.file,
       selectedDate = _ref.selectedDate,
@@ -17,7 +14,7 @@ export var ShareRestrictionContentModal = function ShareRestrictionContentModal(
       dateToggle = _ref.dateToggle,
       setDateToggle = _ref.setDateToggle,
       setIsValidDate = _ref.setIsValidDate,
-      helperTextPassword = _ref.helperTextPassword,
+      isPasswordValid = _ref.isPasswordValid,
       password = _ref.password,
       setPassword = _ref.setPassword,
       passwordToggle = _ref.passwordToggle,
@@ -34,41 +31,6 @@ export var ShareRestrictionContentModal = function ShareRestrictionContentModal(
 
   var permissions = getDocumentPermissions(file._id);
   var hasPassword = checkIsPermissionHasPassword(permissions);
-
-  var handlePassword = function handlePassword(value) {
-    setPassword(value);
-    setIsValidPassword(hasPassword && value.trim().length === 0 || value.trim().length >= PASSWORD_MIN_LENGTH);
-  };
-
-  var handlePasswordToggle = function handlePasswordToggle(val) {
-    setPasswordToggle(val);
-    setPassword('');
-
-    if (val && !password) {
-      setIsValidPassword(hasPassword);
-    } else {
-      setIsValidPassword(true);
-    }
-  };
-
-  var handleDate = function handleDate(date) {
-    setSelectedDate(date);
-    setIsValidDate(isValid(date));
-  };
-
-  var handleDateToggle = function handleDateToggle(val) {
-    setDateToggle(val);
-
-    if (!val) {
-      setSelectedDate(null);
-      setIsValidDate(true);
-    } else {
-      var defaultValue = val ? addDays(new Date(), 30) : null;
-      setSelectedDate(defaultValue);
-      setIsValidDate(true);
-    }
-  };
-
   return /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     flexDirection: "column",
@@ -80,21 +42,19 @@ export var ShareRestrictionContentModal = function ShareRestrictionContentModal(
     file: file,
     editingRights: editingRights,
     setEditingRights: setEditingRights
-  }), /*#__PURE__*/React.createElement(BoxDate, {
-    onChange: handleDate,
-    date: selectedDate,
-    onToggle: handleDateToggle,
-    toggle: dateToggle
-  }), /*#__PURE__*/React.createElement(BoxPassword, {
-    file: file,
-    onChange: handlePassword,
+  }), /*#__PURE__*/React.createElement(ShareLinkSettings, {
+    dateEnabled: dateToggle,
+    hasPassword: hasPassword,
+    isPasswordValid: isPasswordValid,
     password: password,
-    onToggle: handlePasswordToggle,
-    toggle: passwordToggle,
-    helperText: helperTextPassword,
-    inputProps: {
-      minLength: PASSWORD_MIN_LENGTH
-    }
+    passwordEnabled: passwordToggle,
+    selectedDate: selectedDate,
+    setDateEnabled: setDateToggle,
+    setIsDateValid: setIsValidDate,
+    setIsPasswordValid: setIsValidPassword,
+    setPassword: setPassword,
+    setPasswordEnabled: setPasswordToggle,
+    setSelectedDate: setSelectedDate
   }));
 };
 ShareRestrictionContentModal.propTypes = {
@@ -106,7 +66,7 @@ ShareRestrictionContentModal.propTypes = {
   setDateToggle: PropTypes.func.isRequired,
   setIsValidDate: PropTypes.func.isRequired,
   // Password
-  helperTextPassword: PropTypes.string,
+  isPasswordValid: PropTypes.bool.isRequired,
   password: PropTypes.string,
   setPassword: PropTypes.func.isRequired,
   passwordToggle: PropTypes.bool.isRequired,

package/dist/components/ShareRestrictionModal/ShareRestrictionModal.js

@@ -16,7 +16,6 @@ import { copyToClipboard, updatePermissions, makeTTL, revokePermissions, createP
 import { getAppSlugFromDocumentType } from '../../helpers/link';
 import { checkIsPermissionHasExpiresDate, checkIsPermissionHasPassword, checkIsReadOnlyPermissions, getPermissionExpiresDate } from '../../helpers/permissions';
 import { useSharingContext } from '../../hooks/useSharingContext';
-var PASSWORD_MIN_LENGTH = 4;
 export var ShareRestrictionModal = function ShareRestrictionModal(_ref) {
   var file = _ref.file,
       onClose = _ref.onClose;
@@ -84,10 +83,6 @@ export var ShareRestrictionModal = function ShareRestrictionModal(_ref) {
       editingRights = _useState16[0],
       setEditingRights = _useState16[1];
 
-  var helperTextPassword = !isValidPassword ? t('ShareRestrictionModal.invalidPasswordMessage', {
-    smart_count: PASSWORD_MIN_LENGTH - password.length
-  }) : null;
-
   var handleClick = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var permsPromise, urlPromise;
@@ -216,7 +211,7 @@ export var ShareRestrictionModal = function ShareRestrictionModal(_ref) {
       selectedDate: selectedDate,
       setIsValidDate: setIsValidDate // Password
       ,
-      helperTextPassword: helperTextPassword,
+      isPasswordValid: isValidPassword,
       passwordToggle: passwordToggle,
       setPasswordToggle: setPasswordToggle,
       password: password,

package/locales/en.json

@@ -470,11 +470,6 @@
     "viewer": "Viewer",
     "editor": "Editor",
     "settingsTitle": "Sharing settings",
-    "expiry": "Set an expiration date",
-    "expiryDate": "Expiration date",
-    "password": "Require a password",
-    "passwordLabel": "Password",
-    "passwordTooShort": "Password must contain at least %{count} characters.",
     "cancel": "Cancel",
     "addLinks": "Add links",
     "error": {

package/locales/fr.json

@@ -468,11 +468,6 @@
     "viewer": "Lecteur",
     "editor": "Éditeur",
     "settingsTitle": "Paramètres de partage",
-    "expiry": "Définir une date d'expiration",
-    "expiryDate": "Date d'expiration",
-    "password": "Exiger un mot de passe",
-    "passwordLabel": "Mot de passe",
-    "passwordTooShort": "Le mot de passe doit contenir au moins %{count} caractères.",
     "cancel": "Annuler",
     "addLinks": "Ajouter les liens",
     "error": {

package/locales/ru.json

@@ -470,11 +470,6 @@
     "viewer": "Просмотр",
     "editor": "Редактирование",
     "settingsTitle": "Настройки доступа",
-    "expiry": "Установить срок действия",
-    "expiryDate": "Дата истечения",
-    "password": "Требовать пароль",
-    "passwordLabel": "Пароль",
-    "passwordTooShort": "Пароль должен содержать не менее %{count} символов.",
     "cancel": "Отмена",
     "addLinks": "Добавить ссылки",
     "error": {

package/locales/vi.json

@@ -470,11 +470,6 @@
     "viewer": "Người xem",
     "editor": "Người chỉnh sửa",
     "settingsTitle": "Cài đặt chia sẻ",
-    "expiry": "Đặt ngày hết hạn",
-    "expiryDate": "Ngày hết hạn",
-    "password": "Yêu cầu mật khẩu",
-    "passwordLabel": "Mật khẩu",
-    "passwordTooShort": "Mật khẩu phải có ít nhất %{count} ký tự.",
     "cancel": "Hủy",
     "addLinks": "Thêm liên kết",
     "error": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "37.2.1",
+  "version": "37.2.2",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -59,7 +59,7 @@
     "cozy-intent": "^2.31.1",
     "cozy-minilog": "^3.10.1",
     "cozy-ui": "^140.5.0",
-    "cozy-ui-plus": "^12.1.3",
+    "cozy-ui-plus": "^12.1.4",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
     "react": "16.12.0",
@@ -85,5 +85,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "76ef5e1d8385f885cd5469e3b1b7f36b5620d381"
+  "gitHead": "ba501af781312be5d4f530b8dac3c6b9604da60e"
 }

package/src/components/ShareLinkAccessModal/ShareLinkAccessModal.jsx

@@ -1,4 +1,3 @@
-import { addDays } from 'date-fns'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
@@ -8,25 +7,20 @@ import Box from 'cozy-ui/transpiled/react/Box'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Chip from 'cozy-ui/transpiled/react/Chips'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import DatePicker from 'cozy-ui/transpiled/react/DatePicker'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
-import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
 import Grid from 'cozy-ui/transpiled/react/Grid'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Menu from 'cozy-ui/transpiled/react/Menu'
 import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
-import Switch from 'cozy-ui/transpiled/react/Switch'
-import TextField from 'cozy-ui/transpiled/react/TextField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
 
 import withLocales from '../../hoc/withLocales'
 import { useSharingContext } from '../../hooks/useSharingContext'
+import { ShareLinkSettings } from '../ShareRestrictionModal/ShareLinkSettings'
 
 const DIALOG_CLASSES = { paper: 'u-h-auto' }
 const DOCUMENT_ICON_SIZE = 18
-const PASSWORD_MIN_LENGTH = 4
-
 export const ShareLinkAccessModal = ({
   documents,
   onCancel,
@@ -42,28 +36,15 @@ export const ShareLinkAccessModal = ({
   const [selectedDate, setSelectedDate] = useState(null)
   const [passwordEnabled, setPasswordEnabled] = useState(false)
   const [password, setPassword] = useState('')
+  const [isDateValid, setIsDateValid] = useState(true)
+  const [isPasswordValid, setIsPasswordValid] = useState(true)
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState(null)
 
-  const isPasswordValid =
-    !passwordEnabled || password.trim().length >= PASSWORD_MIN_LENGTH
   const handleAccessMenuClose = () => {
     setAccessAnchorEl(null)
   }
 
-  const handleDateEnabledChange = event => {
-    setDateEnabled(event.target.checked)
-    setSelectedDate(event.target.checked ? addDays(new Date(), 30) : null)
-  }
-
-  const handlePasswordEnabledChange = event => {
-    setPasswordEnabled(event.target.checked)
-  }
-
-  const handlePasswordChange = event => {
-    setPassword(event.target.value)
-  }
-
   const handleSettingsOpen = () => {
     setIsSettingsOpen(true)
   }
@@ -106,59 +87,28 @@ export const ShareLinkAccessModal = ({
         title={t('ShareLinkAccessModal.settingsTitle')}
         content={
           <Box display="flex" flexDirection="column" gridGap="1rem">
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={dateEnabled}
-                  onChange={handleDateEnabledChange}
-                  disabled={busy}
-                  color="primary"
-                />
-              }
-              label={t('ShareLinkAccessModal.expiry')}
+            <ShareLinkSettings
+              dateEnabled={dateEnabled}
+              isPasswordValid={isPasswordValid}
+              password={password}
+              passwordEnabled={passwordEnabled}
+              selectedDate={selectedDate}
+              setDateEnabled={setDateEnabled}
+              setIsDateValid={setIsDateValid}
+              setIsPasswordValid={setIsPasswordValid}
+              setPassword={setPassword}
+              setPasswordEnabled={setPasswordEnabled}
+              setSelectedDate={setSelectedDate}
             />
-            {dateEnabled && (
-              <DatePicker
-                label={t('ShareLinkAccessModal.expiryDate')}
-                value={selectedDate}
-                minDate={new Date()}
-                onChange={setSelectedDate}
-                disabled={busy}
-                className="u-w-100"
-              />
-            )}
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={passwordEnabled}
-                  onChange={handlePasswordEnabledChange}
-                  disabled={busy}
-                  color="primary"
-                />
-              }
-              label={t('ShareLinkAccessModal.password')}
-            />
-            {passwordEnabled && (
-              <TextField
-                label={t('ShareLinkAccessModal.passwordLabel')}
-                value={password}
-                onChange={handlePasswordChange}
-                disabled={busy}
-                type="password"
-                error={!isPasswordValid}
-                helperText={
-                  isPasswordValid
-                    ? null
-                    : t('ShareLinkAccessModal.passwordTooShort', {
-                        count: PASSWORD_MIN_LENGTH
-                      })
-                }
-                fullWidth
-                inputProps={{ minLength: PASSWORD_MIN_LENGTH }}
-              />
-            )}
           </Box>
         }
+        actions={
+          <Button
+            label={t('ShareRestrictionModal.action.confirm')}
+            onClick={handleSettingsBack}
+            disabled={!isDateValid || !isPasswordValid}
+          />
+        }
       />
     )
   }
@@ -270,7 +220,7 @@ export const ShareLinkAccessModal = ({
           <Button
             label={t('ShareLinkAccessModal.addLinks')}
             onClick={handleSubmit}
-            disabled={busy || !isPasswordValid}
+            disabled={busy || !isDateValid || !isPasswordValid}
             busy={busy}
           />
         </>

package/src/components/ShareLinkAccessModal/ShareLinkAccessModal.spec.jsx

@@ -12,6 +12,10 @@ jest.mock('../../hoc/withLocales', () => Component => props => (
   <Component {...props} />
 ))
 
+jest.mock('cozy-ui/transpiled/react/providers/Alert', () => ({
+  useAlert: () => ({ showAlert: jest.fn() })
+}))
+
 jest.mock('cozy-ui/transpiled/react/CozyDialogs', () => ({
   ConfirmDialog: ({ title, content, actions, onBack, onClose, size }) => (
     <div role="dialog" data-size={size}>
@@ -98,12 +102,13 @@ jest.mock('twake-i18n', () => ({
         'ShareLinkAccessModal.cancel': 'Cancel',
         'ShareLinkAccessModal.addLinks': 'Add links',
         'ShareLinkAccessModal.settingsTitle': 'Sharing settings',
-        'ShareLinkAccessModal.expiry': 'Set an expiration date',
-        'ShareLinkAccessModal.expiryDate': 'Expiration date',
-        'ShareLinkAccessModal.password': 'Require a password',
-        'ShareLinkAccessModal.passwordLabel': 'Password',
-        'ShareLinkAccessModal.passwordTooShort':
+        'ShareRestrictionModal.action.confirm': 'Confirm',
+        'ShareRestrictionModal.invalidPasswordMessage':
           'Password must contain at least 4 characters.',
+        'BoxDate.text': 'Set an expiration date',
+        'BoxDate.label': 'Expiration date',
+        'BoxPassword.text': 'Require a password',
+        'BoxPassword.label': 'Password',
         'ShareLinkAccessModal.error.persistence':
           'Could not save link permissions. Please try again.'
       })[key] || key
@@ -169,7 +174,7 @@ describe('ShareLinkAccessModal', () => {
     expect(onCancel).toHaveBeenCalledTimes(1)
   })
 
-  it('preserves the access settings after returning from the settings screen', () => {
+  it('validates the settings by returning to the access screen', () => {
     renderModal()
 
     fireEvent.click(screen.getByLabelText('Access level'))
@@ -180,7 +185,7 @@ describe('ShareLinkAccessModal', () => {
     fireEvent.change(screen.getByLabelText('Password'), {
       target: { value: 'secret' }
     })
-    fireEvent.click(screen.getByRole('button', { name: 'Back' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
 
     expect(screen.getByLabelText('Access level')).toHaveTextContent('Editor')
 
@@ -199,6 +204,9 @@ describe('ShareLinkAccessModal', () => {
     fireEvent.change(screen.getByLabelText('Password'), {
       target: { value: 'abc' }
     })
+
+    expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled()
+
     fireEvent.click(screen.getByRole('button', { name: 'Back' }))
 
     expect(screen.getByRole('button', { name: 'Add links' })).toBeDisabled()

package/src/components/ShareRestrictionModal/BoxDate.jsx

@@ -40,6 +40,7 @@ export const BoxDate = ({ onChange, date, toggle, onToggle }) => {
               edge="start"
               color="primary"
               checked={toggle}
+              inputProps={{ 'aria-label': t('BoxDate.text') }}
               onChange={handleDateToggle}
             />
           </ListItemSecondaryAction>

package/src/components/ShareRestrictionModal/BoxPassword.jsx

@@ -15,11 +15,9 @@ import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'twake-i18n'
 
 import { copyToClipboard } from './helpers'
-import { checkIsPermissionHasPassword } from '../../helpers/permissions'
-import { useSharingContext } from '../../hooks/useSharingContext'
 
 export const BoxPassword = ({
-  file,
+  hasPassword = false,
   onChange,
   password,
   onToggle,
@@ -31,10 +29,6 @@ export const BoxPassword = ({
   const { showAlert } = useAlert()
   const [displayHelper, setDisplayHelper] = useState(false)
   const inputRef = React.useRef()
-  const { getDocumentPermissions } = useSharingContext()
-
-  const permissions = getDocumentPermissions(file._id)
-  const hasPassword = checkIsPermissionHasPassword(permissions)
 
   const handlePasswordToggle = val => {
     const value = val?.target?.checked ?? val
@@ -75,6 +69,7 @@ export const BoxPassword = ({
               edge="start"
               color="primary"
               checked={toggle}
+              inputProps={{ 'aria-label': t('BoxPassword.text') }}
               onChange={handlePasswordToggle}
             />
           </ListItemSecondaryAction>
@@ -117,6 +112,7 @@ export const BoxPassword = ({
 }
 
 BoxPassword.propTypes = {
+  hasPassword: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   password: PropTypes.string,
   onToggle: PropTypes.func.isRequired,

package/src/components/ShareRestrictionModal/ShareLinkSettings.jsx

@@ -0,0 +1,93 @@
+import { addDays, isValid } from 'date-fns'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useI18n } from 'twake-i18n'
+
+import { BoxDate } from './BoxDate'
+import { BoxPassword } from './BoxPassword'
+
+export const PASSWORD_MIN_LENGTH = 4
+
+export const ShareLinkSettings = ({
+  dateEnabled,
+  hasPassword = false,
+  isPasswordValid,
+  password,
+  passwordEnabled,
+  selectedDate,
+  setDateEnabled,
+  setIsDateValid,
+  setIsPasswordValid,
+  setPassword,
+  setPasswordEnabled,
+  setSelectedDate
+}) => {
+  const { t } = useI18n()
+
+  const handlePasswordChange = value => {
+    setPassword(value)
+    setIsPasswordValid(
+      (hasPassword && value.trim().length === 0) ||
+        value.trim().length >= PASSWORD_MIN_LENGTH
+    )
+  }
+
+  const handlePasswordToggle = enabled => {
+    setPasswordEnabled(enabled)
+    setPassword('')
+    setIsPasswordValid(!enabled || hasPassword)
+  }
+
+  const handleDateChange = date => {
+    setSelectedDate(date)
+    setIsDateValid(isValid(date))
+  }
+
+  const handleDateToggle = enabled => {
+    setDateEnabled(enabled)
+    setSelectedDate(enabled ? addDays(new Date(), 30) : null)
+    setIsDateValid(true)
+  }
+
+  return (
+    <>
+      <BoxDate
+        onChange={handleDateChange}
+        date={selectedDate}
+        onToggle={handleDateToggle}
+        toggle={dateEnabled}
+      />
+      <BoxPassword
+        hasPassword={hasPassword}
+        helperText={
+          isPasswordValid
+            ? null
+            : t('ShareRestrictionModal.invalidPasswordMessage', {
+                smart_count: PASSWORD_MIN_LENGTH - password.length
+              })
+        }
+        onChange={handlePasswordChange}
+        password={password}
+        onToggle={handlePasswordToggle}
+        toggle={passwordEnabled}
+        inputProps={{ minLength: PASSWORD_MIN_LENGTH }}
+      />
+    </>
+  )
+}
+
+ShareLinkSettings.propTypes = {
+  dateEnabled: PropTypes.bool.isRequired,
+  hasPassword: PropTypes.bool,
+  isPasswordValid: PropTypes.bool.isRequired,
+  password: PropTypes.string,
+  passwordEnabled: PropTypes.bool.isRequired,
+  selectedDate: PropTypes.instanceOf(Date),
+  setDateEnabled: PropTypes.func.isRequired,
+  setIsDateValid: PropTypes.func.isRequired,
+  setIsPasswordValid: PropTypes.func.isRequired,
+  setPassword: PropTypes.func.isRequired,
+  setPasswordEnabled: PropTypes.func.isRequired,
+  setSelectedDate: PropTypes.func.isRequired
+}

package/src/components/ShareRestrictionModal/ShareRestrictionContentModal.jsx

@@ -1,4 +1,3 @@
-import { addDays, isValid } from 'date-fns'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -6,14 +5,11 @@ import Box from 'cozy-ui/transpiled/react/Box'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
 
-import { BoxDate } from './BoxDate'
 import { BoxEditingRights } from './BoxEditingRights'
-import { BoxPassword } from './BoxPassword'
+import { ShareLinkSettings } from './ShareLinkSettings'
 import { checkIsPermissionHasPassword } from '../../helpers/permissions'
 import { useSharingContext } from '../../hooks/useSharingContext'
 
-const PASSWORD_MIN_LENGTH = 4
-
 export const ShareRestrictionContentModal = ({
   file,
   // Date
@@ -23,7 +19,7 @@ export const ShareRestrictionContentModal = ({
   setDateToggle,
   setIsValidDate,
   // Password
-  helperTextPassword,
+  isPasswordValid,
   password,
   setPassword,
   passwordToggle,
@@ -38,41 +34,6 @@ export const ShareRestrictionContentModal = ({
   const permissions = getDocumentPermissions(file._id)
   const hasPassword = checkIsPermissionHasPassword(permissions)
 
-  const handlePassword = value => {
-    setPassword(value)
-    setIsValidPassword(
-      (hasPassword && value.trim().length === 0) ||
-        value.trim().length >= PASSWORD_MIN_LENGTH
-    )
-  }
-
-  const handlePasswordToggle = val => {
-    setPasswordToggle(val)
-    setPassword('')
-    if (val && !password) {
-      setIsValidPassword(hasPassword)
-    } else {
-      setIsValidPassword(true)
-    }
-  }
-
-  const handleDate = date => {
-    setSelectedDate(date)
-    setIsValidDate(isValid(date))
-  }
-
-  const handleDateToggle = val => {
-    setDateToggle(val)
-    if (!val) {
-      setSelectedDate(null)
-      setIsValidDate(true)
-    } else {
-      const defaultValue = val ? addDays(new Date(), 30) : null
-      setSelectedDate(defaultValue)
-      setIsValidDate(true)
-    }
-  }
-
   return (
     <Box display="flex" flexDirection="column" gridGap="1rem">
       <Typography variant="h4" className="u-mb-half u-ml-half">
@@ -84,20 +45,19 @@ export const ShareRestrictionContentModal = ({
         editingRights={editingRights}
         setEditingRights={setEditingRights}
       />
-      <BoxDate
-        onChange={handleDate}
-        date={selectedDate}
-        onToggle={handleDateToggle}
-        toggle={dateToggle}
-      />
-      <BoxPassword
-        file={file}
-        onChange={handlePassword}
+      <ShareLinkSettings
+        dateEnabled={dateToggle}
+        hasPassword={hasPassword}
+        isPasswordValid={isPasswordValid}
         password={password}
-        onToggle={handlePasswordToggle}
-        toggle={passwordToggle}
-        helperText={helperTextPassword}
-        inputProps={{ minLength: PASSWORD_MIN_LENGTH }}
+        passwordEnabled={passwordToggle}
+        selectedDate={selectedDate}
+        setDateEnabled={setDateToggle}
+        setIsDateValid={setIsValidDate}
+        setIsPasswordValid={setIsValidPassword}
+        setPassword={setPassword}
+        setPasswordEnabled={setPasswordToggle}
+        setSelectedDate={setSelectedDate}
       />
     </Box>
   )
@@ -112,7 +72,7 @@ ShareRestrictionContentModal.propTypes = {
   setDateToggle: PropTypes.func.isRequired,
   setIsValidDate: PropTypes.func.isRequired,
   // Password
-  helperTextPassword: PropTypes.string,
+  isPasswordValid: PropTypes.bool.isRequired,
   password: PropTypes.string,
   setPassword: PropTypes.func.isRequired,
   passwordToggle: PropTypes.bool.isRequired,

package/src/components/ShareRestrictionModal/ShareRestrictionModal.jsx

@@ -27,8 +27,6 @@ import {
 } from '../../helpers/permissions'
 import { useSharingContext } from '../../hooks/useSharingContext'
 
-const PASSWORD_MIN_LENGTH = 4
-
 export const ShareRestrictionModal = ({ file, onClose }) => {
   const client = useClient()
   const { t } = useI18n()
@@ -68,12 +66,6 @@ export const ShareRestrictionModal = ({ file, onClose }) => {
     isReadOnlyPermissions || permissions.length === 0 ? 'readOnly' : 'write'
   )
 
-  const helperTextPassword = !isValidPassword
-    ? t('ShareRestrictionModal.invalidPasswordMessage', {
-        smart_count: PASSWORD_MIN_LENGTH - password.length
-      })
-    : null
-
   const handleClick = async () => {
     setLoading(true)
     // The clipboard write must be initiated synchronously within the click
@@ -153,7 +145,7 @@ export const ShareRestrictionModal = ({ file, onClose }) => {
           selectedDate={selectedDate}
           setIsValidDate={setIsValidDate}
           // Password
-          helperTextPassword={helperTextPassword}
+          isPasswordValid={isValidPassword}
           passwordToggle={passwordToggle}
           setPasswordToggle={setPasswordToggle}
           password={password}