diff --git a/packages/app/constants/settings/apparence/components/index.js b/packages/app/constants/settings/apparence/components/index.js deleted file mode 100755 index bcd20f84..00000000 --- a/packages/app/constants/settings/apparence/components/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as UnsplashBrowser } from "./unsplashBrowser" \ No newline at end of file diff --git a/packages/app/constants/settings/apparence/components/unsplashBrowser/index.jsx b/packages/app/constants/settings/apparence/components/unsplashBrowser/index.jsx deleted file mode 100755 index 52edaaaa..00000000 --- a/packages/app/constants/settings/apparence/components/unsplashBrowser/index.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react" - -export default (props) => { - const [searchValue, setSearchValue] = React.useState("") - const [results, setResults] = React.useState([]) - - - return
-

Search in Unsplash™

-
- -
-
-} \ No newline at end of file diff --git a/packages/app/constants/settings/apparence/index.jsx b/packages/app/constants/settings/apparence/index.jsx index e0c8144d..23b0036b 100755 --- a/packages/app/constants/settings/apparence/index.jsx +++ b/packages/app/constants/settings/apparence/index.jsx @@ -1,7 +1,6 @@ import React from "react" import * as antd from "antd" - -import { UnsplashBrowser } from "./components" +import loadable from "@loadable/component" import "./index.less" @@ -82,41 +81,9 @@ export default [ "group": "aspect", "title": "Background image", "description": "Change background image of the application. You can use a local image or a remote image (URL).", - "component": (props) => { - const [validUrl, setValidUrl] = React.useState(true) - - const submitUrl = (e) => { - const url = e.target.value - - // validate if value recived is url - if (!url.match(/^(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9]+\.[a-zA-Z]+(\.[a-zA-Z]+)?(\/.*)?$/)) { - setValidUrl(false) - antd.message.error("Invalid URL") - return - } - - props.ctx.dispatchUpdate(url) - } - - const onClickSearchUnsplash = () => { - antd.message.warn("This feature is not implemented yet.") - return false - window.app.SidedrawerController.open("unsplashBrowser", UnsplashBrowser) - } - - return
- - or - - Search on Unsplash - -
+ "component": loadable(() => import("../components/ImageUploader")), + "props": { + "noPreview": true, }, "emitEvent": "modifyTheme", "emissionValueUpdate": (value) => { diff --git a/packages/app/constants/settings/components/ImageUploader/index.jsx b/packages/app/constants/settings/components/ImageUploader/index.jsx new file mode 100644 index 00000000..2698b4b0 --- /dev/null +++ b/packages/app/constants/settings/components/ImageUploader/index.jsx @@ -0,0 +1,65 @@ +import React from "react" +import { Button, Input, Upload } from "antd" +import { Icons } from "components/Icons" + +import "./index.less" + +export default (props) => { + const [value, setValue] = React.useState(props.ctx.currentValue) + + const uploadImage = async (req) => { + const formData = new FormData() + + formData.append("files", req.file) + + const request = await window.app.api.withEndpoints("main").post.upload(formData, undefined).catch((error) => { + console.error(error) + antd.message.error(error) + + return false + }) + + if (request) { + setValue(request.files[0].url) + props.ctx.dispatchUpdate(request.files[0].url) + } + } + + return
+ { + !props.noPreview && value &&
+ +
+ } + + + setValue(e.target.value)} + onPressEnter={() => props.ctx.dispatchUpdate(value)} + /> + + + +
+} \ No newline at end of file diff --git a/packages/app/constants/settings/components/ImageUploader/index.less b/packages/app/constants/settings/components/ImageUploader/index.less new file mode 100644 index 00000000..766ac207 --- /dev/null +++ b/packages/app/constants/settings/components/ImageUploader/index.less @@ -0,0 +1,32 @@ +.imageUploader { + display: flex; + flex-direction: column; + align-items: center; + + .uploadPreview { + width: 100px; + margin-bottom: 10px; + + img { + width: 100%; + height: 100%; + + border-radius: 8px; + } + } + + .ant-input-group { + display: inline-flex; + flex-direction: row; + width: 100%; + + .ant-btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + svg { + margin: 0!important; + } + } + } +} \ No newline at end of file diff --git a/packages/app/constants/settings/security/components/changePassword/index.jsx b/packages/app/constants/settings/components/changePassword/index.jsx similarity index 100% rename from packages/app/constants/settings/security/components/changePassword/index.jsx rename to packages/app/constants/settings/components/changePassword/index.jsx diff --git a/packages/app/constants/settings/security/components/changePassword/index.less b/packages/app/constants/settings/components/changePassword/index.less similarity index 100% rename from packages/app/constants/settings/security/components/changePassword/index.less rename to packages/app/constants/settings/components/changePassword/index.less diff --git a/packages/app/constants/settings/security/components/sessions/index.jsx b/packages/app/constants/settings/components/sessions/index.jsx similarity index 100% rename from packages/app/constants/settings/security/components/sessions/index.jsx rename to packages/app/constants/settings/components/sessions/index.jsx diff --git a/packages/app/constants/settings/index.js b/packages/app/constants/settings/index.js index cb765a24..cdfabf49 100755 --- a/packages/app/constants/settings/index.js +++ b/packages/app/constants/settings/index.js @@ -1,5 +1,5 @@ import AppSettings from "./app" -import AccountSettings from "./account" +import ProfileSettings from "./profile" import SecuritySettings from "./security" import NotificationsSettings from "./notifications" import ApparenceSettings from "./apparence" @@ -11,10 +11,10 @@ export default { label: "App", settings: AppSettings }, - account: { + profile: { icon: "User", label: "Profile", - settings: AccountSettings + settings: ProfileSettings }, apparence: { icon: "Eye", diff --git a/packages/app/constants/settings/account/index.jsx b/packages/app/constants/settings/profile/index.jsx similarity index 94% rename from packages/app/constants/settings/account/index.jsx rename to packages/app/constants/settings/profile/index.jsx index 087839da..6774bdcf 100755 --- a/packages/app/constants/settings/account/index.jsx +++ b/packages/app/constants/settings/profile/index.jsx @@ -1,5 +1,6 @@ import React from "react" import { User } from "models" +import loadable from "@loadable/component" export default [ { @@ -94,10 +95,10 @@ export default [ { "id": "avatar", "group": "account.profile", - "component": "Input", "icon": "Image", "title": "Avatar", "description": "Change your avatar (Upload an image or use an URL)", + "component": loadable(() => import("../components/ImageUploader")), "defaultValue": async () => { const userData = await User.data() return userData.avatar @@ -113,6 +114,7 @@ export default [ }) if (result) { + app.message.success("Avatar updated") return result } }, @@ -121,10 +123,10 @@ export default [ { "id": "cover", "group": "account.profile", - "component": "Input", "icon": "Image", "title": "Cover", "description": "Change your profile cover (Upload an image or use an URL)", + "component": loadable(() => import("../components/ImageUploader")), "defaultValue": async () => { const userData = await User.data() return userData.cover @@ -140,19 +142,12 @@ export default [ }) if (result) { + app.message.success("Cover updated") return result } }, "debounced": true, }, - { - "id": "cover", - "group": "account.profile", - "component": "ImageUpload", - "icon": "Image", - "title": "Cover", - "description": "Change your cover", - }, { "id": "description", "group": "account.profile", diff --git a/packages/app/constants/settings/security/index.jsx b/packages/app/constants/settings/security/index.jsx index c725561f..f084636a 100755 --- a/packages/app/constants/settings/security/index.jsx +++ b/packages/app/constants/settings/security/index.jsx @@ -10,7 +10,7 @@ export default [ "title": "Change Password", "description": "Change your password", "icon": "Lock", - "component": loadable(() => import("./components/changePassword")), + "component": loadable(() => import("../components/changePassword")), }, { "id": "two-factor-authentication", @@ -26,7 +26,7 @@ export default [ "title": "Sessions", "description": "Manage your active sessions", "icon": "Monitor", - "component": loadable(() => import("./components/sessions")), + "component": loadable(() => import("../components/sessions")), }, { "id": "logout", diff --git a/packages/app/src/components/Settings/index.jsx b/packages/app/src/components/Settings/index.jsx index 63ff4c49..2de24a22 100755 --- a/packages/app/src/components/Settings/index.jsx +++ b/packages/app/src/components/Settings/index.jsx @@ -298,6 +298,7 @@ const SettingItem = (props) => { {loading ?
Loading...
: React.createElement(SettingComponent, { ...item.props, ctx: { + currentValue: value, dispatchUpdate, onUpdateItem, }