feat(sharing): Improve BoxPassword

As we can't display the previously saved password, we'd like to display a specific placeholder that improves the UX. We'll also make sure that the password value is `“”` and not `undefined` when we deactivate it. This makes it clear to the stack that we want to delete the password and not keep it unchanged.
cozy · Jan 17, 2025 · c0ec80f · c0ec80f
1 parent 3a3740c
commit c0ec80f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/cozy-sharing/src/components/ShareRestrictionModal/BoxPassword.jsx b/packages/cozy-sharing/src/components/ShareRestrictionModal/BoxPassword.jsx
@@ -15,8 +15,11 @@ import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { copyToClipboard } from './helpers'
+import { checkIsPermissionHasPassword } from '../../helpers/permissions'
+import { useSharingContext } from '../../hooks/useSharingContext'
 
 export const BoxPassword = ({
+  file,
   onChange,
   password,
   onToggle,
@@ -28,6 +31,10 @@ 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
@@ -78,6 +85,12 @@ export const BoxPassword = ({
           <TextField
             inputRef={inputRef}
             label={t('BoxPassword.label')}
+            {...(hasPassword && {
+              placeholder: '****',
+              InputLabelProps: {
+                shrink: true
+              }
+            })}
             value={password}
             error={displayHelper && !!helperText}
             helperText={displayHelper && helperText}

diff --git a/packages/cozy-sharing/src/components/ShareRestrictionModal/ShareRestrictionContentModal.jsx b/packages/cozy-sharing/src/components/ShareRestrictionModal/ShareRestrictionContentModal.jsx
@@ -33,16 +33,18 @@ export const ShareRestrictionContentModal = ({
 }) => {
   const { t } = useI18n()
 
-  const handlePasswordToggle = val => {
-    setPasswordToggle(val)
-  }
   const handlePassword = value => {
     setPassword(value)
     setIsValidPassword(
       value.trim().length === 0 || value.trim().length >= PASSWORD_MIN_LENGTH
     )
   }
 
+  const handlePasswordToggle = val => {
+    setPasswordToggle(val)
+    handlePassword('')
+  }
+
   const handleDateToggle = val => {
     if (!val) {
       setIsValidDate(true)
@@ -70,6 +72,7 @@ export const ShareRestrictionContentModal = ({
         toggle={dateToggle}
       />
       <BoxPassword
+        file={file}
         onChange={handlePassword}
         password={password}
         onToggle={handlePasswordToggle}