cozy-sharing 19.0.0 → 21.0.0

package/dist/components/SharingBanner/components/PublicBanner.js

@@ -55,14 +55,14 @@ var openExternalLink = function openExternalLink(url) {
 var SharingBannerCozyToCozy = function SharingBannerCozyToCozy(_ref2) {
   var sharing = _ref2.sharing,
       isSharingShortcutCreated = _ref2.isSharingShortcutCreated,
-      discoveryLink = _ref2.discoveryLink,
+      addSharingLink = _ref2.addSharingLink,
       onClose = _ref2.onClose;
 
   var _useI18n2 = useI18n(),
       t = _useI18n2.t;
 
   var action = function action() {
-    return openExternalLink(discoveryLink);
+    return openExternalLink(addSharingLink);
   };
 
   var buttonOne = isSharingShortcutCreated ? {
@@ -146,7 +146,7 @@ var SharingBannerByLink = function SharingBannerByLink(_ref3) {
 SharingBannerCozyToCozy.propTypes = {
   sharing: PropTypes.object.isRequired,
   isSharingShortcutCreated: PropTypes.bool.isRequired,
-  discoveryLink: PropTypes.string.isRequired,
+  addToCozySharingLink: PropTypes.string.isRequired,
   onClose: PropTypes.func.isRequired
 };
 export { SharingBannerCozyToCozy, SharingBannerByLink };

package/dist/components/SharingBanner/components/PublicBanner.spec.js

@@ -36,7 +36,7 @@ describe('PublicBanner', function () {
     var _render = render( /*#__PURE__*/React.createElement(SharingBannerCozyToCozy, {
       sharing: sharing,
       isSharingShortcutCreated: true,
-      discoveryLink: "discoveryLink",
+      addSharingLink: "discoveryLink",
       onClose: function onClose() {}
     })),
         container = _render.container; // Then

package/dist/components/SharingBanner/components/SharingBanner.js

@@ -14,16 +14,16 @@ export var SharingBanner = function SharingBanner(_ref) {
     return setIsOpened(false);
   }, [setIsOpened]);
   var loading = sharingInfos.loading,
-      discoveryLink = sharingInfos.discoveryLink,
+      addSharingLink = sharingInfos.addSharingLink,
       sharing = sharingInfos.sharing,
       isSharingShortcutCreated = sharingInfos.isSharingShortcutCreated;
   if (loading) return null;
-  return isOpened && (!discoveryLink ? /*#__PURE__*/React.createElement(SharingBannerByLink, {
+  return isOpened && (!addSharingLink ? /*#__PURE__*/React.createElement(SharingBannerByLink, {
     onClose: onClose
   }) : /*#__PURE__*/React.createElement(SharingBannerCozyToCozy, {
     isSharingShortcutCreated: isSharingShortcutCreated,
     sharing: sharing,
-    discoveryLink: discoveryLink,
+    addSharingLink: addSharingLink,
     onClose: onClose
   }));
 };

package/dist/components/SharingBanner/hooks/useSharingInfos.js

@@ -13,34 +13,40 @@ var getSharingId = function getSharingId(permission) {
   return sharingId;
 };
 
+var CREATE_COZY_LINK = 'https://manager.cozycloud.cc/cozy/create';
 export var useSharingInfos = function useSharingInfos() {
   var previewPath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '/preview';
   var client = useClient();
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
-      discoveryLink = _useState2[0],
-      setDiscoveryLink = _useState2[1];
+      addSharingLink = _useState2[0],
+      setAddSharingLink = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      isSharingShortcutCreated = _useState4[0],
-      setIsSharingSharingcutCreated = _useState4[1];
+      syncSharingLink = _useState4[0],
+      setSyncSharingLink = _useState4[1];
 
-  var _useState5 = useState(),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      sharing = _useState6[0],
-      setSharing = _useState6[1];
+      isSharingShortcutCreated = _useState6[0],
+      setIsSharingSharingcutCreated = _useState6[1];
 
-  var _useState7 = useState(true),
+  var _useState7 = useState(),
       _useState8 = _slicedToArray(_useState7, 2),
-      loading = _useState8[0],
-      setLoading = _useState8[1];
+      sharing = _useState8[0],
+      setSharing = _useState8[1];
+
+  var _useState9 = useState(true),
+      _useState10 = _slicedToArray(_useState9, 2),
+      loading = _useState10[0],
+      setLoading = _useState10[1];
 
   useEffect(function () {
     var loadSharingDiscoveryLink = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var response, _isSharingShortcutCreated, sharingId, _getQueryParameter2, sharecode, link, sharingsByIdQuery, _yield$client$query2, _sharing;
+        var response, _isSharingShortcutCreated, sharingId, _getQueryParameter2, sharecode, link, linkSync, sharingsByIdQuery, _yield$client$query2, _sharing;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -55,35 +61,39 @@ export var useSharingInfos = function useSharingInfos() {
               _isSharingShortcutCreated = models.permission.isShortcutCreatedOnTheRecipientCozy(response);
               sharingId = getSharingId(response);
               _getQueryParameter2 = getQueryParameter(), sharecode = _getQueryParameter2.sharecode;
-              link = client.collection('io.cozy.sharings').getDiscoveryLink(sharingId, sharecode);
+              link = client.collection('io.cozy.sharings').getDiscoveryLink(sharingId, sharecode, {
+                shortcut: true
+              });
+              linkSync = client.collection('io.cozy.sharings').getDiscoveryLink(sharingId, sharecode);
               sharingsByIdQuery = buildSharingsByIdQuery(sharingId);
-              _context.next = 12;
+              _context.next = 13;
               return client.query(sharingsByIdQuery.definition);
 
-            case 12:
+            case 13:
               _yield$client$query2 = _context.sent;
               _sharing = _yield$client$query2.data;
-              setDiscoveryLink(link);
+              setAddSharingLink(link);
+              setSyncSharingLink(linkSync);
               setIsSharingSharingcutCreated(_isSharingShortcutCreated);
               setSharing(_sharing);
-              _context.next = 22;
+              _context.next = 24;
               break;
 
-            case 19:
-              _context.prev = 19;
+            case 21:
+              _context.prev = 21;
               _context.t0 = _context["catch"](1);
               logger.warn('Failed to load sharing discovery link', _context.t0);
 
-            case 22:
-              _context.prev = 22;
+            case 24:
+              _context.prev = 24;
               setLoading(false);
-              return _context.finish(22);
+              return _context.finish(24);
 
-            case 25:
+            case 27:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[1, 19, 22, 25]]);
+        }, _callee, null, [[1, 21, 24, 27]]);
       }));
 
       return function loadSharingDiscoveryLink() {
@@ -100,7 +110,9 @@ export var useSharingInfos = function useSharingInfos() {
   return {
     sharing: sharing,
     loading: loading,
-    discoveryLink: discoveryLink,
+    addSharingLink: addSharingLink,
+    syncSharingLink: syncSharingLink,
+    createCozyLink: CREATE_COZY_LINK,
     isSharingShortcutCreated: isSharingShortcutCreated
   };
 };

package/dist/components/SharingBanner/hooks/useSharingInfos.spec.js

@@ -86,13 +86,13 @@ describe('useSharingInfos', function () {
     window.location = location;
   });
   it('returns the right infos when using useSharingInfo', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var discoveryLink, _setup, result, waitForNextUpdate;
+    var addSharingLink, _setup, result, waitForNextUpdate;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          discoveryLink = '/link';
-          getDiscoveryLinkMock.mockReturnValue(discoveryLink);
+          addSharingLink = '/addSharingLink';
+          getDiscoveryLinkMock.mockReturnValue(addSharingLink);
           fetchOwnPermissionsMock.mockResolvedValue(mockedPermissionsWithInstance);
           queryMock.mockResolvedValue(mockSharing);
           _setup = setup(), result = _setup.result, waitForNextUpdate = _setup.waitForNextUpdate; // default state
@@ -107,7 +107,7 @@ describe('useSharingInfos', function () {
           expect(result.current.loading).toEqual(false);
           expect(result.current.isSharingShortcutCreated).toEqual(true);
           expect(result.current.sharing).toEqual(mockSharing.data);
-          expect(result.current.discoveryLink).toEqual(discoveryLink);
+          expect(result.current.addSharingLink).toEqual(addSharingLink);
 
         case 12:
         case "end":
@@ -115,14 +115,14 @@ describe('useSharingInfos', function () {
       }
     }, _callee);
   })));
-  it('returns the right infos when using useSharingInfo without discoveryLink', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var discoveryLink, _setup2, result, waitForNextUpdate;
+  it('returns the right infos when using useSharingInfo without addSharingLink', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var addSharingLink, _setup2, result, waitForNextUpdate;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          discoveryLink = false;
-          getDiscoveryLinkMock.mockReturnValue(discoveryLink);
+          addSharingLink = undefined;
+          getDiscoveryLinkMock.mockReturnValue(addSharingLink);
           fetchOwnPermissionsMock.mockResolvedValue(mockedPermissionsWithoutInstance);
           queryMock.mockResolvedValue(mockSharing);
           _setup2 = setup(), result = _setup2.result, waitForNextUpdate = _setup2.waitForNextUpdate; // default state
@@ -137,7 +137,7 @@ describe('useSharingInfos', function () {
           expect(result.current.loading).toEqual(false);
           expect(result.current.isSharingShortcutCreated).toEqual(false);
           expect(result.current.sharing).toEqual(mockSharing.data);
-          expect(result.current.discoveryLink).toEqual(discoveryLink);
+          expect(result.current.addSharingLink).toEqual(addSharingLink);
 
         case 12:
         case "end":

package/dist/helpers/permissions.js

@@ -5,4 +5,19 @@ export var checkIsReadOnlyPermissions = function checkIsReadOnlyPermissions(perm
   return Object.values(permissionCategories).filter(function (permissionCategory) {
     return models.permission.isReadOnly(permissionCategory);
   }).length > 0;
+};
+export var checkIsPermissionHasExpiresDate = function checkIsPermissionHasExpiresDate(permissions) {
+  var _permissions$;
+
+  return Boolean(permissions === null || permissions === void 0 || (_permissions$ = permissions[0]) === null || _permissions$ === void 0 || (_permissions$ = _permissions$.attributes) === null || _permissions$ === void 0 ? void 0 : _permissions$.expires_at);
+};
+export var getPermissionExpiresDate = function getPermissionExpiresDate(permissions) {
+  var _permissions$2;
+
+  return permissions === null || permissions === void 0 || (_permissions$2 = permissions[0]) === null || _permissions$2 === void 0 || (_permissions$2 = _permissions$2.attributes) === null || _permissions$2 === void 0 ? void 0 : _permissions$2.expires_at;
+};
+export var checkIsPermissionHasPassword = function checkIsPermissionHasPassword(permissions) {
+  var _permissions$3;
+
+  return Boolean(permissions === null || permissions === void 0 || (_permissions$3 = permissions[0]) === null || _permissions$3 === void 0 || (_permissions$3 = _permissions$3.attributes) === null || _permissions$3 === void 0 ? void 0 : _permissions$3.password);
 };

package/dist/index.js

@@ -26,5 +26,7 @@ export { DOCUMENT_TYPE } from './helpers/documentType';
 export { default as OpenSharingLinkButton } from './OpenSharingLinkButton';
 export { default as OpenSharingLinkFabButton } from './OpenSharingLinkFabButton';
 export { NativeFileSharingProvider, useNativeFileSharing } from './providers/NativeFileSharingProvider';
-export { openSharingLink } from './actions/openSharingLink';
+export { createCozySharingLink } from './actions/createCozySharingLink';
+export { addToCozySharingLink } from './actions/addToCozySharingLink';
+export { syncToCozySharingLink } from './actions/syncToCozySharingLink';
 export { shareNative } from './actions/shareNative';

package/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",

package/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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "19.0.0",
+  "version": "21.0.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -53,7 +53,7 @@
     "babel-jest": "26.6.3",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-react-svg": "1.1.2",
-    "cozy-client": "^52.1.0",
+    "cozy-client": "^53.0.0",
     "cozy-device-helper": "^3.7.1",
     "cozy-intent": "^2.29.1",
     "cozy-minilog": "^3.9.1",
@@ -66,7 +66,7 @@
     "storybook": "7.6.0"
   },
   "peerDependencies": {
-    "cozy-client": ">=52.1.0",
+    "cozy-client": ">=53.0.0",
     "cozy-device-helper": ">=3.7.1",
     "cozy-intent": ">=2.29.1",
     "cozy-minilog": ">=3.9.1",
@@ -78,5 +78,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "74889d160e15166c4aa132e4fc8c77ebe95c62ae"
+  "gitHead": "0c51f40c510be568da5c63ae617ec7493801161a"
 }

package/src/SharingProvider.jsx

@@ -331,25 +331,30 @@ export class SharingProvider extends Component {
    * updateDocumentPermissions - Description
    *
    * @param {Object} document A shared document
-   * @param {Array} newVerbs The new verbs to use for the permission, eg. ['GET']
+   * @param {object} options The new verbs to use for the permission, eg. ['GET']
+   * @param {string[]} options.verbs The new verbs to use for the permission, eg. ['GET']
+   * @param {string} [options.expiresAt] The new expiration date for the permission
+   * @param {string} [options.password] The new password for the permission
    *
    * @return {Array}
    */
-  updateDocumentPermissions = async (document, newVerbs) => {
+  updateDocumentPermissions = async (document, options) => {
+    const { verbs, expiresAt, password } = options
     const permissions = getDocumentPermissions(this.state, document.id)
 
     const responses = await Promise.all(
       permissions.map(async permissionDocument => {
         const updatedPermissions = permissionDocument.attributes.permissions
         Object.keys(updatedPermissions).map(permType => {
-          updatedPermissions[permType].verbs = newVerbs
+          updatedPermissions[permType].verbs = verbs
         })
 
         const resp = await this.permissionCol.add(
           permissionDocument,
-          updatedPermissions
+          updatedPermissions,
+          { expiresAt, password }
         )
-        this.dispatch(updateSharingLink(resp))
+        this.dispatch(updateSharingLink(resp.data))
         return resp
       })
     )

package/src/actions/addToCozySharingLink.js

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CloudPlusOutlinedIcon from 'cozy-ui/transpiled/react/Icons/CloudPlusOutlined'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+import { openExternalLink } from '../helpers/sharings'
+import { getActionsI18n } from '../hoc/withLocales'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+  Component.displayName = 'AddToCozySharingLink'
+
+  return Component
+}
+
+export const addToCozySharingLink = ({
+  isSharingShortcutCreated,
+  openSharingLinkDisplayed = true,
+  isShortLabel = false,
+  addSharingLink
+}) => {
+  const { t } = getActionsI18n()
+  const label = t('Share.banner.add_to_mine', {
+    smart_count: isShortLabel ? 1 : 2
+  })
+  const icon = CloudPlusOutlinedIcon
+
+  return {
+    name: 'addToCozySharingLink',
+    label,
+    icon,
+    displayCondition: () =>
+      openSharingLinkDisplayed && !isSharingShortcutCreated,
+    action: () => {
+      openExternalLink(addSharingLink)
+    },
+    Component: makeComponent(label, icon)
+  }
+}

package/src/actions/createCozySharingLink.js

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+import { openExternalLink } from '../helpers/sharings'
+import { getActionsI18n } from '../hoc/withLocales'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+  Component.displayName = 'CreateCozySharingLink'
+
+  return Component
+}
+
+export const createCozySharingLink = ({
+  openSharingLinkDisplayed = true,
+  isShortLabel = false,
+  createSharingLink
+}) => {
+  const { t } = getActionsI18n()
+  const label = t('Share.create-cozy', { smart_count: isShortLabel ? 1 : 2 })
+  const icon = ToTheCloudIcon
+
+  return {
+    name: 'createCozySharingLink',
+    label,
+    icon,
+    displayCondition: () => openSharingLinkDisplayed,
+    action: () => {
+      openExternalLink(createSharingLink)
+    },
+    Component: makeComponent(label, icon)
+  }
+}

package/src/actions/{openSharingLink.js → syncToCozySharingLink.js}

@@ -2,10 +2,11 @@ import React, { forwardRef } from 'react'
 
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import Icon from 'cozy-ui/transpiled/react/Icon'
+import SyncIcon from 'cozy-ui/transpiled/react/Icons/Sync'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 
-import { getIconWithlabel, openExternalLink } from '../helpers/sharings'
+import { openExternalLink } from '../helpers/sharings'
 import { getActionsI18n } from '../hoc/withLocales'
 
 const makeComponent = (label, icon) => {
@@ -19,32 +20,29 @@ const makeComponent = (label, icon) => {
       </ActionsMenuItem>
     )
   })
-  Component.displayName = 'OpenSharingLink'
+  Component.displayName = 'SyncToCozySharingLink'
 
   return Component
 }
 
-export const openSharingLink = ({
-  isSharingShortcutCreated,
+export const syncToCozySharingLink = ({
   openSharingLinkDisplayed = true,
   isShortLabel = false,
-  link
+  syncSharingLink
 }) => {
   const { t } = getActionsI18n()
-  const { icon, label } = getIconWithlabel({
-    link,
-    isSharingShortcutCreated,
-    isShortLabel,
-    t
+  const label = t('Share.banner.sync_to_mine', {
+    smart_count: isShortLabel ? 1 : 2
   })
+  const icon = SyncIcon
 
   return {
-    name: 'openSharingLink',
+    name: 'syncToCozySharingLink',
     label,
     icon,
     displayCondition: () => openSharingLinkDisplayed,
     action: () => {
-      openExternalLink(link)
+      openExternalLink(syncSharingLink)
     },
     Component: makeComponent(label, icon)
   }

package/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>

package/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
@@ -77,7 +84,14 @@ export const BoxPassword = ({
         <div className="u-pt-half u-ph-1 u-pb-1">
           <TextField
             inputRef={inputRef}
+            autoFocus
             label={t('BoxPassword.label')}
+            {...(hasPassword && {
+              placeholder: '****',
+              InputLabelProps: {
+                shrink: true
+              }
+            })}
             value={password}
             error={displayHelper && !!helperText}
             helperText={displayHelper && helperText}