diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js index fea4a4fd83..1efed06d68 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js @@ -5,6 +5,7 @@ import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/ import { Box } from '@strapi/design-system/Box'; import { Divider } from '@strapi/design-system/Divider'; import FromComputerForm from './FromComputerForm'; +import FromUrlForm from './FromUrlForm'; const AddLogoDialog = ({ setLocalImage, goTo, next, onClose }) => { const { formatMessage } = useIntl(); @@ -44,7 +45,9 @@ const AddLogoDialog = ({ setLocalImage, goTo, next, onClose }) => { next={next} /> - TO DO + + + ); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js new file mode 100644 index 0000000000..809630fd50 --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js @@ -0,0 +1,84 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import { Box } from '@strapi/design-system/Box'; +import { Button } from '@strapi/design-system/Button'; +import { TextInput } from '@strapi/design-system/TextInput'; +import { ModalFooter } from '@strapi/design-system/ModalLayout'; +import { urlToFile } from '../../utils/urlToFile'; +import { parseFileMetadatas } from '../../utils/parseFileMetadatas'; +import { SIZE, DIMENSION } from '../../utils/constants'; + +const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => { + const { formatMessage } = useIntl(); + const [logoUrl, setLogoUrl] = useState(''); + const [error, setError] = useState(undefined); + + const handleChange = e => { + setLogoUrl(e.target.value); + }; + + const handleSubmit = async e => { + e.preventDefault(); + try { + const file = await urlToFile(logoUrl); + const asset = await parseFileMetadatas(file); + + setLocalImage(asset); + goTo(next); + } catch (err) { + if (err.displayMessage) { + setError(formatMessage(err.displayMessage, { size: SIZE, dimension: DIMENSION })); + } else { + throw err; + } + } + }; + + return ( + <> +
+ + + + + {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })} + + } + endActions={ + + } + /> + + + ); +}; + +FromUrlForm.defaultProps = { + next: null, +}; + +FromUrlForm.propTypes = { + goTo: PropTypes.func.isRequired, + next: PropTypes.string, + onClose: PropTypes.func.isRequired, + setLocalImage: PropTypes.func.isRequired, +}; + +export default FromUrlForm; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js new file mode 100644 index 0000000000..21df1e7851 --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js @@ -0,0 +1,19 @@ +import axios from 'axios'; + +export const urlToFile = async url => { + try { + const res = await axios.get(url, { responseType: 'blob', timeout: 60000 }); + const loadedFile = new File([res.data], res.config.url, { + type: res.headers['content-type'], + }); + + return loadedFile; + } catch (err) { + err.displayMessage = { + id: 'Settings.application.customization.modal.upload.error-network', + defaultMessage: 'Network error', + }; + + throw err; + } +}; diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 74986fe0bf..3a097f0b27 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -111,9 +111,12 @@ "Settings.application.customization.modal.upload.file-validation": "Max dimension: {dimension}*{dimension}, Max size: {size}KB", "Settings.application.customization.modal.upload.error-format": "Wrong format uploaded (accepted formats only: jpeg, jpg, png, svg).", "Settings.application.customization.modal.upload.error-size": "The file uploaded is too large (max dimension: {dimension}*{dimension}, max file size: {size}KB)", + "Settings.application.customization.modal.upload.error-network": "Network error", "Settings.application.customization.modal.upload.cta.browse": "Browse files", "Settings.application.customization.modal.upload.drag-drop": "Drag and Drop here or", "Settings.application.customization.modal.upload.from-url": "From url", + "Settings.application.customization.modal.upload.from-url.input-label": "URL", + "Settings.application.customization.modal.upload.next": "Next", "Settings.application.customization.modal.pending": "Pending logo", "Settings.application.customization.modal.pending.choose-another": "Choose another logo", "Settings.application.customization.modal.pending.title": "Logo ready to upload",