cozy-sharing 18.0.0 → 19.0.0

package/src/components/ShareModal.jsx

@@ -15,11 +15,8 @@ export const ShareModal = ({
   needsContactsPermission,
   onClose,
   onRevoke,
-  onRevokeLink,
   onRevokeSelf,
   onShare,
-  onShareByLink,
-  onUpdateShareLinkPermissions,
   permissions,
   recipients,
   sharing,
@@ -43,9 +40,6 @@ export const ShareModal = ({
       documentType={documentType}
       link={link}
       onClose={onClose}
-      onRevokeLink={onRevokeLink}
-      onShareByLink={onShareByLink}
-      onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
       permissions={permissions}
     />
   ) : (
@@ -59,11 +53,8 @@ export const ShareModal = ({
       needsContactsPermission={needsContactsPermission}
       onClose={onClose}
       onRevoke={onRevoke}
-      onRevokeLink={onRevokeLink}
       onRevokeSelf={onRevokeSelf}
       onShare={onShare}
-      onShareByLink={onShareByLink}
-      onUpdateShareLinkPermissions={onUpdateShareLinkPermissions}
       permissions={permissions}
       recipients={recipients}
       sharing={sharing}
@@ -90,10 +81,7 @@ ShareModal.propTypes = {
   needsContactsPermission: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
   onRevoke: PropTypes.func.isRequired,
-  onRevokeLink: PropTypes.func.isRequired,
   onShare: PropTypes.func.isRequired,
-  onShareByLink: PropTypes.func.isRequired,
-  onUpdateShareLinkPermissions: PropTypes.func.isRequired,
   permissions: PropTypes.array.isRequired,
   recipients: PropTypes.array.isRequired,
   sharingDesc: PropTypes.string,

package/src/components/ShareRestrictionModal/BoxDate.jsx

@@ -0,0 +1,76 @@
+import { format } from 'date-fns'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Box from 'cozy-ui/transpiled/react/Box'
+import DatePicker from 'cozy-ui/transpiled/react/DatePicker'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Switch from 'cozy-ui/transpiled/react/Switch'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+export const BoxDate = ({ onChange, date, toggle, onToggle }) => {
+  const { t, lang } = useI18n()
+  const formatDate = lang === 'fr' ? 'dd/MM/yyyy' : 'MM/dd/yyyy'
+
+  const handleDateToggle = val => {
+    const value = val?.target?.checked ?? val
+    onToggle(value)
+  }
+
+  return (
+    <Box borderRadius="0.5rem" border="1px solid var(--borderMainColor)">
+      <List className="u-p-0">
+        <ListItem
+          button
+          size="large"
+          ellipsis={false}
+          onClick={() => handleDateToggle(!toggle)}
+        >
+          <ListItemIcon>
+            <Icon icon="calendar" />
+          </ListItemIcon>
+          <ListItemText primary={t('BoxDate.text')} />
+          <ListItemSecondaryAction>
+            <Switch
+              edge="end"
+              color="primary"
+              checked={toggle}
+              onChange={handleDateToggle}
+            />
+          </ListItemSecondaryAction>
+        </ListItem>
+      </List>
+      {toggle && (
+        <div className="u-pt-half u-ph-1 u-pb-1">
+          <DatePicker
+            className="u-w-100"
+            enableKeyboard
+            label={t('BoxDate.label')}
+            placeholder={format(new Date(), formatDate)}
+            value={date}
+            minDate={new Date()}
+            onChange={onChange}
+            inputProps={{
+              inputMode: 'numeric'
+            }}
+            KeyboardButtonProps={{
+              'aria-label': t('BoxDate.label')
+            }}
+          />
+        </div>
+      )}
+    </Box>
+  )
+}
+
+BoxDate.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  date: PropTypes.instanceOf(Date),
+  toggle: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired
+}

package/src/components/ShareRestrictionModal/BoxEditingRights.jsx

@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types'
+import React, { useReducer, useRef } from 'react'
+
+import { isDirectory as isDir } from 'cozy-client/dist/models/file'
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import Box from 'cozy-ui/transpiled/react/Box'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { useSharingContext } from '../../hooks/useSharingContext'
+import { editPermissionLink } from '../Recipient/actions/editPermissionLink'
+import { readOnlyPermissionLink } from '../Recipient/actions/readOnlyPermissionLink'
+
+export const BoxEditingRights = ({ file, editingRights, setEditingRights }) => {
+  const [isMenuDisplayed, toggleMenuDisplayed] = useReducer(
+    state => !state,
+    false
+  )
+  const buttonRef = useRef()
+  const { t } = useI18n()
+  const { documentType } = useSharingContext()
+
+  const isDirectory = isDir(file)
+
+  const actions = makeActions([readOnlyPermissionLink, editPermissionLink], {
+    t,
+    editingRights,
+    setEditingRights,
+    documentType,
+    isDirectory
+  })
+
+  const textSecondary =
+    editingRights === 'readOnly'
+      ? t('Share.permissionLink.readDescription')
+      : t('Share.permissionLink.writeDescription')
+
+  return (
+    <>
+      <Box
+        borderRadius="0.5rem"
+        border="1px solid var(--borderMainColor)"
+        ref={buttonRef}
+      >
+        <List className="u-p-0">
+          <ListItem
+            button
+            size="large"
+            ellipsis={false}
+            onClick={toggleMenuDisplayed}
+          >
+            <ListItemIcon>
+              <Icon icon="people" />
+            </ListItemIcon>
+            <ListItemText
+              primary={t('BoxEditingRights.text')}
+              secondary={textSecondary}
+            />
+            <ListItemIcon className="u-mr-half">
+              <Icon icon="bottom" />
+            </ListItemIcon>
+          </ListItem>
+        </List>
+      </Box>
+
+      <ActionsMenu
+        ref={buttonRef}
+        open={isMenuDisplayed}
+        docs={[file]}
+        actions={actions}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right'
+        }}
+        autoClose
+        onClose={toggleMenuDisplayed}
+      />
+    </>
+  )
+}
+
+BoxEditingRights.propTypes = {
+  file: PropTypes.object.isRequired,
+  editingRights: PropTypes.oneOf(['readOnly', 'write']).isRequired,
+  setEditingRights: PropTypes.func.isRequired
+}

package/src/components/ShareRestrictionModal/BoxPassword.jsx

@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import Box from 'cozy-ui/transpiled/react/Box'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Switch from 'cozy-ui/transpiled/react/Switch'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { copyToClipboard } from './helpers'
+
+export const BoxPassword = ({
+  onChange,
+  password,
+  onToggle,
+  toggle,
+  helperText,
+  inputProps
+}) => {
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+  const [displayHelper, setDisplayHelper] = useState(false)
+  const inputRef = React.useRef()
+
+  const handlePasswordToggle = val => {
+    const value = val?.target?.checked ?? val
+    onToggle(value)
+  }
+
+  const handleChange = val => {
+    const value = val?.target?.value ?? val
+    onChange(value)
+  }
+  const handleOnFocus = () => {
+    setDisplayHelper(false)
+  }
+  const handleOnBlur = () => {
+    handleChange(inputRef.current.value.trim())
+    setDisplayHelper(true)
+  }
+
+  const handleCopy = async () => {
+    await copyToClipboard(password, { t, showAlert })
+  }
+
+  return (
+    <Box borderRadius="0.5rem" border="1px solid var(--borderMainColor)">
+      <List className="u-p-0">
+        <ListItem
+          button
+          size="large"
+          ellipsis={false}
+          onClick={() => handlePasswordToggle(!toggle)}
+        >
+          <ListItemIcon>
+            <Icon icon="password" />
+          </ListItemIcon>
+          <ListItemText primary={t('BoxPassword.text')} />
+          <ListItemSecondaryAction>
+            <Switch
+              edge="end"
+              color="primary"
+              checked={toggle}
+              onChange={handlePasswordToggle}
+            />
+          </ListItemSecondaryAction>
+        </ListItem>
+      </List>
+      {toggle && (
+        <div className="u-pt-half u-ph-1 u-pb-1">
+          <TextField
+            inputRef={inputRef}
+            label={t('BoxPassword.label')}
+            value={password}
+            error={displayHelper && !!helperText}
+            helperText={displayHelper && helperText}
+            onChange={handleChange}
+            onFocus={handleOnFocus}
+            onBlur={handleOnBlur}
+            fullWidth
+            type="text"
+            variant="outlined"
+            InputProps={{
+              endAdornment: (
+                <IconButton onClick={handleCopy}>
+                  <Icon icon="copy" />
+                </IconButton>
+              )
+            }}
+            inputProps={inputProps}
+          />
+        </div>
+      )}
+    </Box>
+  )
+}
+
+BoxPassword.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  password: PropTypes.string,
+  onToggle: PropTypes.func.isRequired,
+  toggle: PropTypes.bool.isRequired,
+  helperText: PropTypes.string,
+  inputProps: PropTypes.object
+}

package/src/components/ShareRestrictionModal/ShareRestrictionContentModal.jsx

@@ -0,0 +1,102 @@
+import { addDays } from 'date-fns'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Box from 'cozy-ui/transpiled/react/Box'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { BoxDate } from './BoxDate'
+import { BoxEditingRights } from './BoxEditingRights'
+import { BoxPassword } from './BoxPassword'
+
+const PASSWORD_MIN_LENGTH = 4
+
+export const ShareRestrictionContentModal = ({
+  file,
+  // Date
+  selectedDate,
+  setSelectedDate,
+  dateToggle,
+  setDateToggle,
+  setIsValidDate,
+  // Password
+  helperTextPassword,
+  password,
+  setPassword,
+  passwordToggle,
+  setPasswordToggle,
+  setIsValidPassword,
+  // Editing rights
+  editingRights,
+  setEditingRights
+}) => {
+  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 handleDateToggle = val => {
+    if (!val) {
+      setIsValidDate(true)
+    }
+    const defaultValue = val ? addDays(new Date(), 30) : null
+    setSelectedDate(defaultValue, true)
+    setDateToggle(val)
+  }
+
+  return (
+    <Box display="flex" flexDirection="column" gridGap="1rem">
+      <Typography variant="h4" className="u-mb-half u-ml-half">
+        {t('ShareRestrictionModal.title')}
+      </Typography>
+
+      <BoxEditingRights
+        file={file}
+        editingRights={editingRights}
+        setEditingRights={setEditingRights}
+      />
+      <BoxDate
+        onChange={setSelectedDate}
+        date={selectedDate}
+        onToggle={handleDateToggle}
+        toggle={dateToggle}
+      />
+      <BoxPassword
+        onChange={handlePassword}
+        password={password}
+        onToggle={handlePasswordToggle}
+        toggle={passwordToggle}
+        helperText={helperTextPassword}
+        inputProps={{ minLength: PASSWORD_MIN_LENGTH }}
+      />
+    </Box>
+  )
+}
+
+ShareRestrictionContentModal.propTypes = {
+  file: PropTypes.object.isRequired,
+  // Date
+  selectedDate: PropTypes.object,
+  setSelectedDate: PropTypes.func.isRequired,
+  dateToggle: PropTypes.bool,
+  setDateToggle: PropTypes.func.isRequired,
+  setIsValidDate: PropTypes.func.isRequired,
+  // Password
+  helperTextPassword: PropTypes.string,
+  password: PropTypes.string,
+  setPassword: PropTypes.func.isRequired,
+  passwordToggle: PropTypes.bool.isRequired,
+  setPasswordToggle: PropTypes.func.isRequired,
+  setIsValidPassword: PropTypes.func.isRequired,
+  // Editing rights
+  editingRights: PropTypes.oneOf(['readOnly', 'write']),
+  setEditingRights: PropTypes.func.isRequired
+}

package/src/components/ShareRestrictionModal/ShareRestrictionModal.jsx

@@ -0,0 +1,177 @@
+import { addDays } from 'date-fns'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import { getSharingLink as makeSharingLink } from 'cozy-client/dist/models/sharing'
+import { isMobile } from 'cozy-device-helper'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { ShareRestrictionContentModal } from './ShareRestrictionContentModal'
+import {
+  copyToClipboard,
+  forwardFile,
+  updatePermissions,
+  makeTTL,
+  READ_ONLY_PERMS,
+  WRITE_PERMS,
+  revokePermissions
+} from './helpers'
+import { checkIsReadOnlyPermissions } from '../../helpers/permissions'
+import { useSharingContext } from '../../hooks/useSharingContext'
+
+const PASSWORD_MIN_LENGTH = 4
+
+export const ShareRestrictionModal = ({ file, onClose }) => {
+  const client = useClient()
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+  const [password, setPassword] = useState('')
+  const [selectedDate, setSelectedDate] = useState(addDays(new Date(), 30))
+  const [isValidDate, setIsValidDate] = useState(true)
+  const [isValidPassword, setIsValidPassword] = useState(true)
+  const [dateToggle, setDateToggle] = useState(true)
+  const [passwordToggle, setPasswordToggle] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const {
+    documentType,
+    getDocumentPermissions,
+    updateDocumentPermissions,
+    shareByLink,
+    getSharingLink,
+    revokeSharingLink
+  } = useSharingContext()
+
+  const hasSharingLink = getSharingLink(file._id) !== null
+  const permissions = getDocumentPermissions(file._id)
+  const isReadOnlyPermissions = checkIsReadOnlyPermissions(permissions)
+
+  const [editingRights, setEditingRights] = useState(
+    isReadOnlyPermissions || permissions.length === 0 ? 'readOnly' : 'write'
+  )
+
+  const isDesktopOrMobileWithoutShareAPI =
+    (isMobile() && !navigator.share) || !isMobile()
+
+  const helperTextPassword = !isValidPassword
+    ? t('ShareRestrictionModal.invalidPasswordMessage', {
+        smart_count: PASSWORD_MIN_LENGTH - password.length
+      })
+    : null
+
+  const handleDateChange = (date, isValid) => {
+    setSelectedDate(date)
+    setIsValidDate(isValid)
+  }
+
+  const handleClick = async () => {
+    setLoading(true)
+    // If the file is not shared, we create a new sharing link
+    if (!hasSharingLink) {
+      const verbs = editingRights === 'readOnly' ? READ_ONLY_PERMS : WRITE_PERMS
+      await shareByLink(file, { verbs })
+      const url = getSharingLink(file._id)
+      await copyToClipboard(url, { t, showAlert })
+      onClose()
+      return
+    }
+
+    await updatePermissions({
+      file,
+      t,
+      editingRights,
+      documentType,
+      updateDocumentPermissions,
+      showAlert
+    })
+
+    const ttl = makeTTL(dateToggle && selectedDate)
+    if (isDesktopOrMobileWithoutShareAPI) {
+      const url = await makeSharingLink(client, [file._id], {
+        ttl,
+        password
+      })
+      await copyToClipboard(url, { t, showAlert })
+    } else {
+      await forwardFile({
+        client,
+        file,
+        t,
+        ttl,
+        password,
+        showAlert
+      })
+    }
+    onClose()
+  }
+
+  const handleRevokeLink = async () => {
+    setLoading(true)
+    await revokePermissions({
+      file,
+      t,
+      documentType,
+      revokeSharingLink,
+      showAlert
+    })
+    onClose()
+  }
+
+  return (
+    <ConfirmDialog
+      open
+      onClose={onClose}
+      content={
+        <ShareRestrictionContentModal
+          file={file}
+          // Date
+          dateToggle={dateToggle}
+          setDateToggle={setDateToggle}
+          setSelectedDate={handleDateChange}
+          selectedDate={selectedDate}
+          setIsValidDate={setIsValidDate}
+          // Password
+          helperTextPassword={helperTextPassword}
+          passwordToggle={passwordToggle}
+          setPasswordToggle={setPasswordToggle}
+          password={password}
+          setPassword={setPassword}
+          setIsValidPassword={setIsValidPassword}
+          // Editing rights
+          editingRights={editingRights}
+          setEditingRights={setEditingRights}
+        />
+      }
+      actions={
+        <>
+          {hasSharingLink && (
+            <Button
+              label={t('Share.permissionLink.deactivate')}
+              variant="secondary"
+              color="error"
+              startIcon={<Icon icon="trash" />}
+              onClick={handleRevokeLink}
+              busy={loading}
+            />
+          )}
+          <Button
+            label={t('ShareRestrictionModal.action.confirm')}
+            onClick={handleClick}
+            disabled={!isValidDate || !isValidPassword}
+            busy={loading}
+          />
+        </>
+      }
+    />
+  )
+}
+
+ShareRestrictionModal.propTypes = {
+  file: PropTypes.object.isRequired,
+  onClose: PropTypes.func
+}