From 938328cd077d40b75e0834d56ff8d43ad035fd2b Mon Sep 17 00:00:00 2001 From: f0x52 Date: Thu, 29 Sep 2022 12:02:41 +0200 Subject: [frontend] Unified panels (#812) * settings panel restructuring * clean up old Gin handlers * colorscheme redesign, some other small css tweaks * basic router layout, error boundary * colorscheme redesign, some other small css tweaks * kebab-case consistency * superfluous padding on applist * remove unused consts * redux, whitespace changes.. * use .jsx extensions for components * login flow up till app registration * full redux oauth implementation, with basic error handling * split oauth api functions * oauth api revocation handling * basic profile change submission * move old dir * profile overview * fix keeping track of the wrong instance url (for different instance/api domains) * use redux state for profile form * delete old/index.js, old/basic.js, fully implemented * implement old/user/profile.js * implement password change * remove debug logging * support future api for removing files * customize profile css * remove unneeded wrapper components * restructure form fields * start on admin pages * admin panel settings * admin settings panel * remove old/admin files * add top-level redirect * refactor/cleanup forms * only do API checks on logged-in state * admin-status based routing * federation block routing * federation blocks * upgrade dependencies * react 18 changes * media cleanup * fix useEffect hooks * remove unused require * custom emoji base * emoji uploader * delete last old panel files * sidebar styling, remove unused page * refactor submit functions * fix sidebar boxshadow-border * fix old css variables * fix fake-toot avatar * fix non-square emoji * fix user settings redux keys * properly get admin account contact from instance response * Account.source default values * source.status_format key * mobile responsiveness * mobile element tweaks * proper redirect after removing block * add redirects for old setting panel urls * deletes * fix mobile overflow * clean up debug logging calls --- web/source/settings-panel/index.js | 178 +++++++++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 web/source/settings-panel/index.js (limited to 'web/source/settings-panel/index.js') diff --git a/web/source/settings-panel/index.js b/web/source/settings-panel/index.js new file mode 100644 index 000000000..34720e818 --- /dev/null +++ b/web/source/settings-panel/index.js @@ -0,0 +1,178 @@ +/* + GoToSocial + Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +"use strict"; + +const Promise = require("bluebird"); +const React = require("react"); +const ReactDom = require("react-dom/client"); +const Redux = require("react-redux"); +const { Switch, Route, Redirect } = require("wouter"); +const { Provider } = require("react-redux"); +const { PersistGate } = require("redux-persist/integration/react"); + +const { store, persistor } = require("./redux"); +const api = require("./lib/api"); +const oauth = require("./redux/reducers/oauth").actions; +const { AuthenticationError } = require("./lib/errors"); + +const Login = require("./components/login"); + +require("./style.css"); + +// TODO: nested categories? +const nav = { + "User": { + "Profile": require("./user/profile.js"), + "Settings": require("./user/settings.js"), + }, + "Admin": { + adminOnly: true, + "Instance Settings": require("./admin/settings.js"), + "Actions": require("./admin/actions"), + "Federation": require("./admin/federation.js"), + "Custom Emoji": require("./admin/emoji.js"), + } +}; + +const { sidebar, panelRouter } = require("./lib/get-views")(nav); + +function App() { + const dispatch = Redux.useDispatch(); + + const { loginState, isAdmin } = Redux.useSelector((state) => state.oauth); + const reduxTempStatus = Redux.useSelector((state) => state.temporary.status); + + const [errorMsg, setErrorMsg] = React.useState(); + const [tokenChecked, setTokenChecked] = React.useState(false); + + React.useEffect(() => { + if (loginState == "login" || loginState == "callback") { + Promise.try(() => { + // Process OAUTH authorization token from URL if available + if (loginState == "callback") { + let urlParams = new URLSearchParams(window.location.search); + let code = urlParams.get("code"); + + if (code == undefined) { + setErrorMsg(new Error("Waiting for OAUTH callback but no ?code= provided. You can try logging in again:")); + } else { + return dispatch(api.oauth.tokenize(code)); + } + } + }).then(() => { + // Fetch current instance info + return dispatch(api.instance.fetch()); + }).then(() => { + // Check currently stored auth token for validity if available + return dispatch(api.user.fetchAccount()); + }).then(() => { + setTokenChecked(true); + + return dispatch(api.oauth.checkIfAdmin()); + }).catch((e) => { + if (e instanceof AuthenticationError) { + dispatch(oauth.remove()); + e.message = "Stored OAUTH token no longer valid, please log in again."; + } + setErrorMsg(e); + console.error(e); + }); + } + }, []); + + let ErrorElement = null; + if (errorMsg != undefined) { + ErrorElement = ( +
+ {errorMsg.type} + {errorMsg.message} +
+ ); + } + + const LogoutElement = ( + + ); + + if (reduxTempStatus != undefined) { + return ( +
+ {reduxTempStatus} +
+ ); + } else if (tokenChecked && loginState == "login") { + return ( + <> +
+ {sidebar.all} + {isAdmin && sidebar.admin} + {LogoutElement} +
+
+ {ErrorElement} + + {panelRouter.all} + {isAdmin && panelRouter.admin} + {/* default route */} + + + +
+ + ); + } else if (loginState == "none") { + return ( + + ); + } else { + let status; + + if (loginState == "login") { + status = "Verifying stored login..."; + } else if (loginState == "callback") { + status = "Processing OAUTH callback..."; + } + + return ( +
+
+ {status} +
+ {ErrorElement} + {LogoutElement} +
+ ); + } + +} + +function Main() { + return ( + + + + + + ); +} + +const root = ReactDom.createRoot(document.getElementById("root")); +root.render(
); \ No newline at end of file -- cgit v1.2.3