cozy-sharing 19.0.0 → 20.0.0

package/dist/components/ShareRestrictionModal/helpers.js

@@ -166,70 +166,105 @@ export var forwardFile = /*#__PURE__*/function () {
   };
 }();
 /**
- * updatePermissions - Updates the permissions of a file
+ * createPermissions - Create the permissions of a file
  * @param {object} options
  * @param {import('cozy-client/types/types').IOCozyFile} options.file File to update permissions
  * @param {Function} options.t i18n function
- * @param {string} options.documentType - Type of the document
+ * @param {Date|string} options.ttl - Time to live of the sharing link
+ * @param {string} options.password - Password
  * @param {'readOnly'|'write'} options.editingRights - Editing rights
- * @param {Function} options.updateDocumentPermissions - Function to update permissions
+ * @param {string} options.documentType - Type of the document
+ * @param {Function} options.shareByLink - Function to create permissions
  * @param {Function} options.showAlert - Function to display an alert
  */
 
-export var updatePermissions = /*#__PURE__*/function () {
+export var createPermissions = /*#__PURE__*/function () {
   var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref5) {
-    var file, t, editingRights, documentType, updateDocumentPermissions, showAlert;
+    var file, t, ttl, password, editingRights, documentType, shareByLink, showAlert, verbs;
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          file = _ref5.file, t = _ref5.t, editingRights = _ref5.editingRights, documentType = _ref5.documentType, updateDocumentPermissions = _ref5.updateDocumentPermissions, showAlert = _ref5.showAlert;
-          _context3.t0 = editingRights;
-          _context3.next = _context3.t0 === 'readOnly' ? 4 : _context3.t0 === 'write' ? 13 : 22;
-          break;
-
-        case 4:
-          _context3.prev = 4;
-          return _context3.abrupt("return", updateDocumentPermissions(file, READ_ONLY_PERMS));
+          file = _ref5.file, t = _ref5.t, ttl = _ref5.ttl, password = _ref5.password, editingRights = _ref5.editingRights, documentType = _ref5.documentType, shareByLink = _ref5.shareByLink, showAlert = _ref5.showAlert;
+          _context3.prev = 1;
+          verbs = editingRights === 'readOnly' ? READ_ONLY_PERMS : WRITE_PERMS;
+          return _context3.abrupt("return", shareByLink(file, {
+            verbs: verbs,
+            ttl: ttl,
+            password: password
+          }));
 
-        case 8:
-          _context3.prev = 8;
-          _context3.t1 = _context3["catch"](4);
+        case 6:
+          _context3.prev = 6;
+          _context3.t0 = _context3["catch"](1);
           showAlert({
             message: t("".concat(documentType, ".share.shareByLink.permserror")),
             severity: 'error',
             variant: 'filled'
           });
-          log.error("Error in 'readOnlyPermissionLink' function when trying to change permission", _context3.t1);
+          log.error("Error in 'readOnlyPermissionLink' function when trying to change permission", _context3.t0);
 
-        case 12:
-          return _context3.abrupt("break", 22);
+        case 10:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3, null, [[1, 6]]);
+  }));
 
-        case 13:
-          _context3.prev = 13;
-          return _context3.abrupt("return", updateDocumentPermissions(file, WRITE_PERMS));
+  return function createPermissions(_x3) {
+    return _ref6.apply(this, arguments);
+  };
+}();
+/**
+ * updatePermissions - Updates the permissions of a file
+ * @param {object} options
+ * @param {import('cozy-client/types/types').IOCozyFile} options.file File to update permissions
+ * @param {Function} options.t i18n function
+ * @param {boolean} options.dateToggle - Expiration date toggle
+ * @param {Date|null} options.selectedDate - Expiration date
+ * @param {boolean} options.passwordToggle - Password toggle
+ * @param {string} options.password - Password
+ * @param {string} options.documentType - Type of the document
+ * @param {'readOnly'|'write'} options.editingRights - Editing rights
+ * @param {Function} options.updateDocumentPermissions - Function to update permissions
+ * @param {Function} options.showAlert - Function to display an alert
+ */
+
+export var updatePermissions = /*#__PURE__*/function () {
+  var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref7) {
+    var file, t, dateToggle, selectedDate, passwordToggle, password, editingRights, documentType, updateDocumentPermissions, showAlert, expiresAt, ensurePassword, verbs;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          file = _ref7.file, t = _ref7.t, dateToggle = _ref7.dateToggle, selectedDate = _ref7.selectedDate, passwordToggle = _ref7.passwordToggle, password = _ref7.password, editingRights = _ref7.editingRights, documentType = _ref7.documentType, updateDocumentPermissions = _ref7.updateDocumentPermissions, showAlert = _ref7.showAlert;
+          _context4.prev = 1;
+          expiresAt = dateToggle ? (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString()) || undefined : '';
+          ensurePassword = passwordToggle ? password || undefined : '';
+          verbs = editingRights === 'readOnly' ? READ_ONLY_PERMS : WRITE_PERMS;
+          return _context4.abrupt("return", updateDocumentPermissions(file, {
+            verbs: verbs,
+            expiresAt: expiresAt,
+            password: ensurePassword
+          }));
 
-        case 17:
-          _context3.prev = 17;
-          _context3.t2 = _context3["catch"](13);
+        case 8:
+          _context4.prev = 8;
+          _context4.t0 = _context4["catch"](1);
           showAlert({
             message: t("".concat(documentType, ".share.shareByLink.permserror")),
             severity: 'error',
             variant: 'filled'
           });
-          log.error("Error in 'editPermissionLink' function when trying to change permission", _context3.t2);
+          log.error("Error in 'updateDocumentPermissions' function when trying to change permission", _context4.t0);
 
-        case 21:
-          return _context3.abrupt("break", 22);
-
-        case 22:
+        case 12:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
-    }, _callee3, null, [[4, 8], [13, 17]]);
+    }, _callee4, null, [[1, 8]]);
   }));
 
-  return function updatePermissions(_x3) {
-    return _ref6.apply(this, arguments);
+  return function updatePermissions(_x4) {
+    return _ref8.apply(this, arguments);
   };
 }();
 /**
@@ -243,33 +278,33 @@ export var updatePermissions = /*#__PURE__*/function () {
  */
 
 export var revokePermissions = /*#__PURE__*/function () {
-  var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref7) {
+  var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(_ref9) {
     var file, t, documentType, revokeSharingLink, showAlert;
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          file = _ref7.file, t = _ref7.t, documentType = _ref7.documentType, revokeSharingLink = _ref7.revokeSharingLink, showAlert = _ref7.showAlert;
-          _context4.prev = 1;
-          return _context4.abrupt("return", revokeSharingLink(file));
+          file = _ref9.file, t = _ref9.t, documentType = _ref9.documentType, revokeSharingLink = _ref9.revokeSharingLink, showAlert = _ref9.showAlert;
+          _context5.prev = 1;
+          return _context5.abrupt("return", revokeSharingLink(file));
 
         case 5:
-          _context4.prev = 5;
-          _context4.t0 = _context4["catch"](1);
+          _context5.prev = 5;
+          _context5.t0 = _context5["catch"](1);
           showAlert({
             message: t("".concat(documentType, ".share.error.revoke")),
             severity: 'error',
             variant: 'filled'
           });
-          log.error("Error in 'revokePermissions' function when trying to revoke sharing link", _context4.t0);
+          log.error("Error in 'revokePermissions' function when trying to revoke sharing link", _context5.t0);
 
         case 9:
         case "end":
-          return _context4.stop();
+          return _context5.stop();
       }
-    }, _callee4, null, [[1, 5]]);
+    }, _callee5, null, [[1, 5]]);
   }));
 
-  return function revokePermissions(_x4) {
-    return _ref8.apply(this, arguments);
+  return function revokePermissions(_x5) {
+    return _ref10.apply(this, arguments);
   };
 }();

package/dist/components/ShareRestrictionModal/helpers.spec.js

@@ -19,7 +19,7 @@ describe('ShareRestrictionModal/helpers', function () {
   describe('updatePermissions', function () {
     var documentType = 'Files';
     it('should call updateDocumentPermissions with "readOnly" permission', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var updateDocumentPermissions, file, editingRights;
+      var updateDocumentPermissions, file;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -27,28 +27,35 @@ describe('ShareRestrictionModal/helpers', function () {
             file = {
               _id: '123'
             };
-            editingRights = 'readOnly';
-            _context.next = 5;
+            _context.next = 4;
             return updatePermissions({
               file: file,
               t: jest.fn(),
-              editingRights: editingRights,
+              dateToggle: false,
+              selectedDate: null,
+              passwordToggle: false,
+              password: '',
+              editingRights: 'readOnly',
               documentType: documentType,
               updateDocumentPermissions: updateDocumentPermissions,
               showAlert: jest.fn()
             });
 
-          case 5:
-            expect(updateDocumentPermissions).toHaveBeenCalledWith(file, ['GET']);
+          case 4:
+            expect(updateDocumentPermissions).toHaveBeenCalledWith(file, {
+              expiresAt: '',
+              password: '',
+              verbs: ['GET']
+            });
 
-          case 6:
+          case 5:
           case "end":
             return _context.stop();
         }
       }, _callee);
     })));
     it('should call updateDocumentPermissions with "write" permissions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var updateDocumentPermissions, file, editingRights;
+      var updateDocumentPermissions, file;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -56,39 +63,154 @@ describe('ShareRestrictionModal/helpers', function () {
             file = {
               _id: '123'
             };
-            editingRights = 'write';
-            _context2.next = 5;
+            _context2.next = 4;
             return updatePermissions({
               file: file,
               t: jest.fn(),
-              editingRights: editingRights,
+              dateToggle: false,
+              selectedDate: null,
+              passwordToggle: false,
+              password: '',
+              editingRights: 'write',
               documentType: documentType,
               updateDocumentPermissions: updateDocumentPermissions,
               showAlert: jest.fn()
             });
 
-          case 5:
-            expect(updateDocumentPermissions).toHaveBeenCalledWith(file, ['GET', 'POST', 'PUT', 'PATCH']);
+          case 4:
+            expect(updateDocumentPermissions).toHaveBeenCalledWith(file, {
+              expiresAt: '',
+              password: '',
+              verbs: ['GET', 'POST', 'PUT', 'PATCH']
+            });
 
-          case 6:
+          case 5:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
     })));
+    it('should call updateDocumentPermissions with empty date & password if their switches are false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      var updateDocumentPermissions, file;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            updateDocumentPermissions = jest.fn();
+            file = {
+              _id: '123'
+            };
+            _context3.next = 4;
+            return updatePermissions({
+              file: file,
+              t: jest.fn(),
+              dateToggle: false,
+              selectedDate: null,
+              passwordToggle: false,
+              password: '',
+              editingRights: 'readOnly',
+              documentType: documentType,
+              updateDocumentPermissions: updateDocumentPermissions,
+              showAlert: jest.fn()
+            });
+
+          case 4:
+            expect(updateDocumentPermissions).toHaveBeenCalledWith(file, {
+              expiresAt: '',
+              password: '',
+              verbs: ['GET']
+            });
+
+          case 5:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    })));
+    it('should call updateDocumentPermissions with "undefined" date & password if their switches are true but the permission doesn\'t yet have these values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      var updateDocumentPermissions, file;
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            updateDocumentPermissions = jest.fn();
+            file = {
+              _id: '123'
+            };
+            _context4.next = 4;
+            return updatePermissions({
+              file: file,
+              t: jest.fn(),
+              dateToggle: true,
+              selectedDate: null,
+              passwordToggle: true,
+              password: '',
+              editingRights: 'readOnly',
+              documentType: documentType,
+              updateDocumentPermissions: updateDocumentPermissions,
+              showAlert: jest.fn()
+            });
+
+          case 4:
+            expect(updateDocumentPermissions).toHaveBeenCalledWith(file, {
+              expiresAt: undefined,
+              password: undefined,
+              verbs: ['GET']
+            });
+
+          case 5:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    })));
+    it('should call updateDocumentPermissions with expected date & password if their switches are true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      var updateDocumentPermissions, file;
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            updateDocumentPermissions = jest.fn();
+            file = {
+              _id: '123'
+            };
+            _context5.next = 4;
+            return updatePermissions({
+              file: file,
+              t: jest.fn(),
+              dateToggle: true,
+              selectedDate: new Date('2100-01-01T00:00:00.000Z'),
+              passwordToggle: true,
+              password: '1234',
+              editingRights: 'readOnly',
+              documentType: documentType,
+              updateDocumentPermissions: updateDocumentPermissions,
+              showAlert: jest.fn()
+            });
+
+          case 4:
+            expect(updateDocumentPermissions).toHaveBeenCalledWith(file, {
+              expiresAt: '2100-01-01T00:00:00.000Z',
+              password: '1234',
+              verbs: ['GET']
+            });
+
+          case 5:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    })));
   });
   describe('revokePermissions', function () {
     var documentType = 'Files';
-    it('should call revokeSharingLink', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    it('should call revokeSharingLink', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
       var revokeSharingLink, file;
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
             revokeSharingLink = jest.fn();
             file = {
               _id: '123'
             };
-            _context3.next = 4;
+            _context6.next = 4;
             return revokePermissions({
               file: file,
               t: jest.fn(),
@@ -102,9 +224,9 @@ describe('ShareRestrictionModal/helpers', function () {
 
           case 5:
           case "end":
-            return _context3.stop();
+            return _context6.stop();
         }
-      }, _callee3);
+      }, _callee6);
     })));
   });
 });

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/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": "20.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": "7dbd527d95ca869695120926125905fdcc2413b0"
 }

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