feat(sharing): Improve ShareDialogOnlyByLink UX

The user can find out as soon as he opens the sharing modal whether his link sharing is secure, and see its expiry date.
cozy · Jan 17, 2025 · b83e5f0 · b83e5f0
1 parent c0ec80f
commit b83e5f0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/packages/cozy-sharing/locales/en.json b/packages/cozy-sharing/locales/en.json
@@ -26,6 +26,8 @@
     "recipients": {
       "you": "You",
       "anyoneWithTheLink": "Anyone with the link",
+      "linkWithPassword": "Anyone with a password",
+      "expires": "Until %{date}",
       "accessCount": "%{count} people have access"
     },
     "create-cozy": "Create |||| Create my cozy",

diff --git a/packages/cozy-sharing/locales/fr.json b/packages/cozy-sharing/locales/fr.json
@@ -26,6 +26,8 @@
     "recipients": {
       "you": "Vous",
       "anyoneWithTheLink": "N'importe qui avec le lien",
+      "linkWithPassword": "N'importe qui avec un mot de passe",
+      "expires": "Jusqu'au %{date}",
       "accessCount": "%{count} personnes y ont accès"
     },
     "create-cozy": "Créer |||| Créer mon Cozy",

diff --git a/packages/cozy-sharing/src/components/Recipient/LinkRecipient.jsx b/packages/cozy-sharing/src/components/Recipient/LinkRecipient.jsx
@@ -14,14 +14,38 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import LinkRecipientPermissions from './LinkRecipientPermissions'
 import RecipientConfirm from './RecipientConfirm'
+import {
+  checkIsPermissionHasPassword,
+  getPermissionExpiresDate
+} from '../../helpers/permissions'
 import { FADE_IN_DURATION } from '../../helpers/recipients'
+import { useSharingContext } from '../../hooks/useSharingContext'
 import styles from '../../styles/recipient.styl'
 
 const LinkRecipient = props => {
-  const { t } = useI18n()
+  const { t, f, lang } = useI18n()
   const { isMobile } = useBreakpoints()
+  const { getDocumentPermissions } = useSharingContext()
 
-  const { recipientConfirmationData, verifyRecipient, link, fadeIn } = props
+  const { recipientConfirmationData, verifyRecipient, link, fadeIn, document } =
+    props
+
+  const permissions = getDocumentPermissions(document._id)
+  const hasPassword = checkIsPermissionHasPassword(permissions)
+  const expiresDate = getPermissionExpiresDate(permissions)
+  const dateFormatted = expiresDate
+    ? f(expiresDate, lang === 'fr' ? 'dd/LL/yyyy' : 'LL/dd/yyyy')
+    : null
+
+  const textPrimary = hasPassword
+    ? t('Share.recipients.linkWithPassword')
+    : t('Share.recipients.anyoneWithTheLink')
+
+  const textSecondary = expiresDate
+    ? t('Share.recipients.expires', {
+        date: dateFormatted
+      })
+    : link
 
   const RightPart = recipientConfirmationData ? (
     <RecipientConfirm
@@ -43,10 +67,10 @@ const LinkRecipient = props => {
         <ListItemText
           primary={
             <Typography className="u-ellipsis" variant="body1">
-              {t('Share.recipients.anyoneWithTheLink')}
+              {textPrimary}
             </Typography>
           }
-          secondary={link}
+          secondary={textSecondary}
         />
         {RightPart}
       </ListItem>