cozy-sharing 17.0.0 → 19.0.0

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

package/src/components/ShareRestrictionModal/helpers.js

@@ -0,0 +1,193 @@
+import { getSharingLink } from 'cozy-client/dist/models/sharing'
+import minilog from 'cozy-minilog'
+
+const log = minilog('ShareRestrictionModal/helpers')
+
+export const WRITE_PERMS = ['GET', 'POST', 'PUT', 'PATCH']
+export const READ_ONLY_PERMS = ['GET']
+
+/**
+ * Copy a string to the clipboard
+ *
+ * @param {string} value - The string saved to the clipboard
+ * @param {object} [options]
+ * @param {number} options.t - Translation function
+ * @param {Function} options.showAlert - Function to display an alert
+ */
+export const copyToClipboard = async (value, { t, showAlert } = {}) => {
+  if (!value) return false
+  try {
+    await navigator.clipboard.writeText(value)
+    showAlert({
+      message: t('copyReminderContent.success'),
+      severity: 'success',
+      variant: 'filled'
+    })
+  } catch (error) {
+    showAlert({
+      message: t('copyReminderContent.error'),
+      severity: 'error',
+      variant: 'filled'
+    })
+    log.error(
+      "Error in 'copyToClipboard' function when trying to copy to clipboard",
+      error
+    )
+  }
+}
+
+/**
+ * Make a TTL string from a date
+ * @param {Date|string} selectedDate
+ * @returns {string} - TTL string in seconds (e.g. '1234s')
+ */
+export const makeTTL = selectedDate => {
+  if (!selectedDate) return
+  try {
+    let selectedDateConverted = selectedDate
+    if (typeof selectedDate === 'string') {
+      selectedDateConverted = new Date(selectedDate)
+      if (selectedDateConverted?.toString() === 'Invalid Date') {
+        throw new Error(`Invalid date: ${selectedDate}`)
+      }
+    }
+    if (selectedDateConverted instanceof Date) {
+      const now = new Date()
+      const ttl =
+        selectedDateConverted > now
+          ? `${Math.round((selectedDateConverted - now) / 1000)}s`
+          : undefined
+      return ttl
+    }
+    throw new Error(`Invalid date: ${selectedDate}`)
+  } catch (error) {
+    log.error(error)
+    return
+  }
+}
+
+/**
+ * forwardFile - Triggers the download of one or multiple files by the browser
+ * @param {object} options
+ * @param {import('cozy-client/types/CozyClient').default} options.client
+ * @param {import('cozy-client/types/types').IOCozyFile} options.file File to download
+ * @param {Function} options.t i18n function
+ * @param {string} options.ttl Time to live of the sharing link
+ * @param {string} options.password Password of the sharing link
+ * @param {Function} options.showAlert - Function to display an alert
+ */
+export const forwardFile = async ({
+  client,
+  file,
+  t,
+  ttl,
+  password,
+  showAlert
+}) => {
+  try {
+    // We currently support only one file at a time
+    const url = await getSharingLink(client, [file._id], { ttl, password })
+    const isZipFile = file.class === 'zip'
+    const shareData = {
+      title: t('shareFile.title', {
+        name: file.name,
+        smart_count: isZipFile ? 2 : 1
+      }),
+      text: t('shareFile.text', {
+        name: file.name,
+        smart_count: isZipFile ? 2 : 1
+      }),
+      url
+    }
+    navigator.share(shareData)
+  } catch (error) {
+    showAlert({
+      message: t('shareFile.error'),
+      severity: 'error',
+      variant: 'filled'
+    })
+  }
+}
+
+/**
+ * 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 {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 const updatePermissions = async ({
+  file,
+  t,
+  editingRights,
+  documentType,
+  updateDocumentPermissions,
+  showAlert
+}) => {
+  switch (editingRights) {
+    case 'readOnly':
+      try {
+        return updateDocumentPermissions(file, READ_ONLY_PERMS)
+      } catch (err) {
+        showAlert({
+          message: t(`${documentType}.share.shareByLink.permserror`),
+          severity: 'error',
+          variant: 'filled'
+        })
+        log.error(
+          "Error in 'readOnlyPermissionLink' function when trying to change permission",
+          err
+        )
+      }
+      break
+    case 'write':
+      try {
+        return updateDocumentPermissions(file, WRITE_PERMS)
+      } catch (err) {
+        showAlert({
+          message: t(`${documentType}.share.shareByLink.permserror`),
+          severity: 'error',
+          variant: 'filled'
+        })
+        log.error(
+          "Error in 'editPermissionLink' function when trying to change permission",
+          err
+        )
+      }
+      break
+  }
+}
+
+/**
+ * revokePermissions - Revokes the permissions of a file
+ * @param {object} options
+ * @param {import('cozy-client/types/types').IOCozyFile} options.file File to revoke permissions
+ * @param {Function} options.t i18n function
+ * @param {string} options.documentType - Type of the document
+ * @param {Function} options.revokeSharingLink - Function to revoke permissions
+ * @param {Function} options.showAlert - Function to display an alert
+ */
+export const revokePermissions = async ({
+  file,
+  t,
+  documentType,
+  revokeSharingLink,
+  showAlert
+}) => {
+  try {
+    return revokeSharingLink(file)
+  } catch (err) {
+    showAlert({
+      message: t(`${documentType}.share.error.revoke`),
+      severity: 'error',
+      variant: 'filled'
+    })
+    log.error(
+      "Error in 'revokePermissions' function when trying to revoke sharing link",
+      err
+    )
+  }
+}

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

@@ -0,0 +1,78 @@
+import { makeTTL, revokePermissions, updatePermissions } from './helpers'
+
+describe('ShareRestrictionModal/helpers', () => {
+  describe('makeTTL', () => {
+    it('sould return undefined', () => {
+      expect(makeTTL()).toBeUndefined()
+      expect(makeTTL(123)).toBeUndefined()
+      expect(makeTTL('abc')).toBeUndefined()
+      expect(makeTTL(new Date('2023-01-01T00:00:00.000Z'))).toBeUndefined()
+      expect(makeTTL(new Date('abc'))).toBeUndefined()
+      expect(makeTTL('2023-01-01T00:00:00.000Z')).toBeUndefined()
+    })
+    it('sould return TTL in seconds', () => {
+      expect(makeTTL(new Date('2100-01-01T00:00:00.000Z'))).toBeDefined()
+      expect(makeTTL('2100-01-01T00:00:00.000Z')).toBeDefined()
+    })
+  })
+
+  describe('updatePermissions', () => {
+    const documentType = 'Files'
+    it('should call updateDocumentPermissions with "readOnly" permission', async () => {
+      const updateDocumentPermissions = jest.fn()
+      const file = { _id: '123' }
+      const editingRights = 'readOnly'
+
+      await updatePermissions({
+        file,
+        t: jest.fn(),
+        editingRights,
+        documentType,
+        updateDocumentPermissions,
+        showAlert: jest.fn()
+      })
+
+      expect(updateDocumentPermissions).toHaveBeenCalledWith(file, ['GET'])
+    })
+
+    it('should call updateDocumentPermissions with "write" permissions', async () => {
+      const updateDocumentPermissions = jest.fn()
+      const file = { _id: '123' }
+      const editingRights = 'write'
+
+      await updatePermissions({
+        file,
+        t: jest.fn(),
+        editingRights,
+        documentType,
+        updateDocumentPermissions,
+        showAlert: jest.fn()
+      })
+
+      expect(updateDocumentPermissions).toHaveBeenCalledWith(file, [
+        'GET',
+        'POST',
+        'PUT',
+        'PATCH'
+      ])
+    })
+  })
+
+  describe('revokePermissions', () => {
+    const documentType = 'Files'
+    it('should call revokeSharingLink', async () => {
+      const revokeSharingLink = jest.fn()
+      const file = { _id: '123' }
+
+      await revokePermissions({
+        file,
+        t: jest.fn(),
+        documentType,
+        revokeSharingLink,
+        showAlert: jest.fn()
+      })
+
+      expect(revokeSharingLink).toHaveBeenCalledWith(file)
+    })
+  })
+})