From 9b139b632098e6741b10fa87ff6224dcb5045947 Mon Sep 17 00:00:00 2001 From: f0x52 Date: Wed, 18 Jan 2023 14:45:14 +0100 Subject: [frogend] Settings refactor (#1318) * yakshave new form field structure * fully refactor user profile settings form * use rtk query api for profile settings * refactor user post settings * refactor password change form * refactor admin settings * FormWithData structure for user forms * admin actions refactor * whitespace * fix user settings data prop * remove superfluous logging * cleanup old code * refactor federation/suspend (overview, detail) * mostly abstracted (emoji) checkbox list * refactor parse-from-toot * refactor custom-emoji, progress on federation bulk * loading icon styling to prevent big spinny * refactor federation import-export interface * cleanup old files * [chore] Update/add license headers for 2023 * redux fixes * text-field exports * appease the linter * refactor authentication with RTK Query * fix login/logout state transition weirdness * fixes/cleanup * small linter-related fixes * add eslint license header check, fix existing files * remove old code, clarify comment * clarify suspend on subdomains * collapse if/else * fa-fw width info comment --- web/source/settings/user/profile.js | 124 +++++++++++++++++++---------- web/source/settings/user/settings.js | 147 ++++++++++++++++++----------------- 2 files changed, 155 insertions(+), 116 deletions(-) (limited to 'web/source/settings/user') diff --git a/web/source/settings/user/profile.js b/web/source/settings/user/profile.js index 8e3b0b9e8..76f416dd1 100644 --- a/web/source/settings/user/profile.js +++ b/web/source/settings/user/profile.js @@ -19,88 +19,126 @@ "use strict"; const React = require("react"); -const Redux = require("react-redux"); -const Submit = require("../components/submit"); +const query = require("../lib/query"); -const api = require("../lib/api"); -const user = require("../redux/reducers/user").actions; -const submit = require("../lib/submit"); +const { + useTextInput, + useFileInput, + useBoolInput +} = require("../lib/form"); -const FakeProfile = require("../components/fake-profile"); -const { formFields } = require("../components/form-fields"); +const useFormSubmit = require("../lib/form/submit"); const { TextInput, TextArea, - Checkbox, - File -} = formFields(user.setProfileVal, (state) => state.user.profile); + FileInput, + Checkbox +} = require("../components/form/inputs"); + +const FormWithData = require("../lib/form/form-with-data"); +const FakeProfile = require("../components/fake-profile"); +const MutationButton = require("../components/form/mutation-button"); module.exports = function UserProfile() { - const dispatch = Redux.useDispatch(); - const instance = Redux.useSelector(state => state.instances.current); + return ( + + ); +}; - const allowCustomCSS = instance.configuration.accounts.allow_custom_css; +function UserProfileForm({ data: profile }) { + /* + User profile update form keys + - bool bot + - bool locked + - string display_name + - string note + - file avatar + - file header + - bool enable_rss + - string custom_css (if enabled) + */ - const [errorMsg, setError] = React.useState(""); - const [statusMsg, setStatus] = React.useState(""); + const { data: instance } = query.useInstanceQuery(); + const allowCustomCSS = React.useMemo(() => { + return instance?.configuration?.accounts?.allow_custom_css === true; + }, [instance]); - const saveProfile = submit( - () => dispatch(api.user.updateProfile()), - {setStatus, setError} - ); + const form = { + avatar: useFileInput("avatar", { withPreview: true }), + header: useFileInput("header", { withPreview: true }), + displayName: useTextInput("display_name", { defaultValue: profile.display_name }), + note: useTextInput("note", { defaultValue: profile.source?.note }), + customCSS: useTextInput("custom_css", { defaultValue: profile.custom_css }), + bot: useBoolInput("bot", { defaultValue: profile.bot }), + locked: useBoolInput("locked", { defaultValue: profile.locked }), + enableRSS: useBoolInput("enable_rss", { defaultValue: profile.enable_rss }), + }; + + const [submitForm, result] = useFormSubmit(form, query.useUpdateCredentialsMutation()); return ( -
+

Profile

- +

Header

-

Avatar

-
} - -
+ + ); -}; \ No newline at end of file +} \ No newline at end of file diff --git a/web/source/settings/user/settings.js b/web/source/settings/user/settings.js index 59994ede3..3ba9be935 100644 --- a/web/source/settings/user/settings.js +++ b/web/source/settings/user/settings.js @@ -18,42 +18,63 @@ "use strict"; -const Promise = require("bluebird"); const React = require("react"); -const Redux = require("react-redux"); -const api = require("../lib/api"); -const user = require("../redux/reducers/user").actions; -const submit = require("../lib/submit"); +const query = require("../lib/query"); -const Languages = require("../components/languages"); -const Submit = require("../components/submit"); +const { + useTextInput, + useBoolInput +} = require("../lib/form"); + +const useFormSubmit = require("../lib/form/submit"); const { - Checkbox, Select, -} = require("../components/form-fields").formFields(user.setSettingsVal, (state) => state.user.settings); + TextInput, + Checkbox +} = require("../components/form/inputs"); + +const FormWithData = require("../lib/form/form-with-data"); +const Languages = require("../components/languages"); +const MutationButton = require("../components/form/mutation-button"); module.exports = function UserSettings() { - const dispatch = Redux.useDispatch(); + return ( + + ); +}; - const [errorMsg, setError] = React.useState(""); - const [statusMsg, setStatus] = React.useState(""); +function UserSettingsForm({ data }) { + const { source } = data; + /* form keys + - string source[privacy] + - bool source[sensitive] + - string source[language] + - string source[status_format] + */ - const updateSettings = submit( - () => dispatch(api.user.updateSettings()), - {setStatus, setError} - ); + const form = { + defaultPrivacy: useTextInput("source[privacy]", { defaultValue: source.privacy ?? "unlisted" }), + isSensitive: useBoolInput("source[sensitive]", { defaultValue: source.sensitive }), + language: useTextInput("source[language]", { defaultValue: source.language?.toUpperCase() ?? "EN" }), + format: useTextInput("source[status_format]", { defaultValue: source.status_format ?? "plain" }), + }; + + const [submitForm, result] = useFormSubmit(form, query.useUpdateCredentialsMutation()); return ( <> -
+

Post settings

- }> - - - -
+ +
- +
); -}; +} function PasswordChange() { - const dispatch = Redux.useDispatch(); - - const [errorMsg, setError] = React.useState(""); - const [statusMsg, setStatus] = React.useState(""); - - const [oldPassword, setOldPassword] = React.useState(""); - const [newPassword, setNewPassword] = React.useState(""); - const [newPasswordConfirm, setNewPasswordConfirm] = React.useState(""); - - function changePassword() { - if (newPassword !== newPasswordConfirm) { - setError("New password and confirm new password did not match!"); - return; + const form = { + oldPassword: useTextInput("old_password"), + newPassword: useTextInput("old_password", { + validator(val) { + if (val != "" && val == form.oldPassword.value) { + return "New password same as old password"; + } + return ""; + } + }) + }; + + const verifyNewPassword = useTextInput("verifyNewPassword", { + validator(val) { + if (val != "" && val != form.newPassword.value) { + return "Passwords do not match"; + } + return ""; } + }); - setStatus("PATCHing"); - setError(""); - return Promise.try(() => { - let data = { - old_password: oldPassword, - new_password: newPassword - }; - return dispatch(api.apiCall("POST", "/api/v1/user/password_change", data, "form")); - }).then(() => { - setStatus("Saved!"); - setOldPassword(""); - setNewPassword(""); - setNewPasswordConfirm(""); - }).catch((e) => { - setError(e.message); - setStatus(""); - }); - } + const [submitForm, result] = useFormSubmit(form, query.usePasswordChangeMutation()); return ( - <> +

Change password

-
- - setOldPassword(e.target.value)} /> -
-
- - setNewPassword(e.target.value)} /> -
-
- - setNewPasswordConfirm(e.target.value)} /> -
- - + + + + + ); } \ No newline at end of file -- cgit v1.2.3