mirror of
				https://github.com/superseriousbusiness/gotosocial.git
				synced 2025-10-31 14:32:24 -05:00 
			
		
		
		
	[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
This commit is contained in:
		
					parent
					
						
							
								2f22780800
							
						
					
				
			
			
				commit
				
					
						938328cd07
					
				
			
		
					 59 changed files with 3989 additions and 2837 deletions
				
			
		
							
								
								
									
										178
									
								
								web/source/settings-panel/index.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										178
									
								
								web/source/settings-panel/index.js
									
										
									
									
									
										Normal file
									
								
							|  | @ -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 <http://www.gnu.org/licenses/>.
 | ||||
| */ | ||||
| 
 | ||||
| "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 = ( | ||||
| 			<div className="error"> | ||||
| 				<b>{errorMsg.type}</b> | ||||
| 				<span>{errorMsg.message}</span> | ||||
| 			</div> | ||||
| 		); | ||||
| 	} | ||||
| 
 | ||||
| 	const LogoutElement = ( | ||||
| 		<button className="logout" onClick={() => { dispatch(api.oauth.logout()); }}> | ||||
| 			Log out | ||||
| 		</button> | ||||
| 	); | ||||
| 
 | ||||
| 	if (reduxTempStatus != undefined) { | ||||
| 		return ( | ||||
| 			<section> | ||||
| 				{reduxTempStatus} | ||||
| 			</section> | ||||
| 		); | ||||
| 	} else if (tokenChecked && loginState == "login") { | ||||
| 		return ( | ||||
| 			<> | ||||
| 				<div className="sidebar"> | ||||
| 					{sidebar.all} | ||||
| 					{isAdmin && sidebar.admin} | ||||
| 					{LogoutElement} | ||||
| 				</div> | ||||
| 				<section className="with-sidebar"> | ||||
| 					{ErrorElement} | ||||
| 					<Switch> | ||||
| 						{panelRouter.all} | ||||
| 						{isAdmin && panelRouter.admin} | ||||
| 						<Route> {/* default route */} | ||||
| 							<Redirect to="/settings/user" /> | ||||
| 						</Route> | ||||
| 					</Switch> | ||||
| 				</section> | ||||
| 			</> | ||||
| 		); | ||||
| 	} else if (loginState == "none") { | ||||
| 		return ( | ||||
| 			<Login error={ErrorElement} /> | ||||
| 		); | ||||
| 	} else { | ||||
| 		let status; | ||||
| 
 | ||||
| 		if (loginState == "login") { | ||||
| 			status = "Verifying stored login..."; | ||||
| 		} else if (loginState == "callback") { | ||||
| 			status = "Processing OAUTH callback..."; | ||||
| 		} | ||||
| 
 | ||||
| 		return ( | ||||
| 			<section> | ||||
| 				<div> | ||||
| 					{status} | ||||
| 				</div> | ||||
| 				{ErrorElement} | ||||
| 				{LogoutElement} | ||||
| 			</section> | ||||
| 		); | ||||
| 	} | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| function Main() { | ||||
| 	return ( | ||||
| 		<Provider store={store}> | ||||
| 			<PersistGate loading={"loading..."} persistor={persistor}> | ||||
| 				<App /> | ||||
| 			</PersistGate> | ||||
| 		</Provider> | ||||
| 	); | ||||
| } | ||||
| 
 | ||||
| const root = ReactDom.createRoot(document.getElementById("root")); | ||||
| root.render(<React.StrictMode><Main /></React.StrictMode>); | ||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue