From c0ec80ff97add99fbc052bb9af8ed69279b47e36 Mon Sep 17 00:00:00 2001
From: AlexisG <merkkur39@gmail.com>
Date: Fri, 17 Jan 2025 15:52:49 +0100
Subject: [PATCH] feat(sharing): Improve BoxPassword
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../ShareRestrictionModal/BoxPassword.jsx           | 13 +++++++++++++
 .../ShareRestrictionContentModal.jsx                |  9 ++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/cozy-sharing/src/components/ShareRestrictionModal/BoxPassword.jsx b/packages/cozy-sharing/src/components/ShareRestrictionModal/BoxPassword.jsx
index 4835c2b4a2..ba1b90c787 100644
--- 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
index 124263b573..9c4eac8d25 100644
--- a/packages/cozy-sharing/src/components/ShareRestrictionModal/ShareRestrictionContentModal.jsx
+++ b/packages/cozy-sharing/src/components/ShareRestrictionModal/ShareRestrictionContentModal.jsx
@@ -33,9 +33,6 @@ export const ShareRestrictionContentModal = ({
 }) => {
   const { t } = useI18n()
 
-  const handlePasswordToggle = val => {
-    setPasswordToggle(val)
-  }
   const handlePassword = value => {
     setPassword(value)
     setIsValidPassword(
@@ -43,6 +40,11 @@ export const ShareRestrictionContentModal = ({
     )
   }
 
+  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}