[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
2025-06-05 21:59:39 +02:00 · 2022-09-29 12:02:41 +02:00
parent 2f22780800
commit 938328cd07
59 changed files with 3989 additions and 2837 deletions
--- a/web/source/settings-panel/lib/api/index.js
+++ b/web/source/settings-panel/lib/api/index.js
@ -0,0 +1,185 @@
+/*
+	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 { isPlainObject } = require("is-plain-object");
+const d = require("dotty");
+
+const { APIError, AuthenticationError } = require("../errors");
+const { setInstanceInfo, setNamedInstanceInfo } = require("../../redux/reducers/instances").actions;
+const oauth = require("../../redux/reducers/oauth").actions;
+
+function apiCall(method, route, payload, type = "json") {
+	return function (dispatch, getState) {
+		const state = getState();
+		let base = state.oauth.instance;
+		let auth = state.oauth.token;
+		console.log(method, base, route, "auth:", auth != undefined);
+
+		return Promise.try(() => {
+			let url = new URL(base);
+			let [path, query] = route.split("?");
+			url.pathname = path;
+			if (query != undefined) {
+				url.search = query;
+			}
+			let body;
+
+			let headers = {
+				"Accept": "application/json",
+			};
+
+			if (payload != undefined) {
+				if (type == "json") {
+					headers["Content-Type"] = "application/json";
+					body = JSON.stringify(payload);
+				} else if (type == "form") {
+					const formData = new FormData();
+					Object.entries(payload).forEach(([key, val]) => {
+						if (isPlainObject(val)) {
+							Object.entries(val).forEach(([key2, val2]) => {
+								if (val2 != undefined) {
+									formData.set(`${key}[${key2}]`, val2);
+								}
+							});
+						} else {
+							if (val != undefined) {
+								formData.set(key, val);
+							}
+						}
+					});
+					body = formData;
+				}
+			}
+
+			if (auth != undefined) {
+				headers["Authorization"] = auth;
+			}
+
+			return fetch(url.toString(), {
+				method,
+				headers,
+				body
+			});
+		}).then((res) => {
+			// try parse json even with error
+			let json = res.json().catch((e) => {
+				throw new APIError(`JSON parsing error: ${e.message}`);
+			});
+
+			return Promise.all([res, json]);
+		}).then(([res, json]) => {
+			if (!res.ok) {
+				if (auth != undefined && (res.status == 401 || res.status == 403)) {
+					// stored access token is invalid
+					throw new AuthenticationError("401: Authentication error", {json, status: res.status});
+				} else {
+					throw new APIError(json.error, { json });
+				}
+			} else {
+				return json;
+			}
+		});
+	};
+}
+
+function getChanges(state, keys) {
+	const { formKeys = [], fileKeys = [], renamedKeys = {} } = keys;
+	const update = {};
+
+	formKeys.forEach((key) => {
+		let value = d.get(state, key);
+		if (value == undefined) {
+			return;
+		}
+		if (renamedKeys[key]) {
+			key = renamedKeys[key];
+		}
+		d.put(update, key, value);
+	});
+
+	fileKeys.forEach((key) => {
+		let file = d.get(state, `${key}File`);
+		if (file != undefined) {
+			if (renamedKeys[key]) {
+				key = renamedKeys[key];
+			}
+			d.put(update, key, file);
+		}
+	});
+
+	return update;
+}
+
+function getCurrentUrl() {
+	return `${window.location.origin}${window.location.pathname}`;
+}
+
+function fetchInstanceWithoutStore(domain) {
+	return function (dispatch, getState) {
+		return Promise.try(() => {
+			let lookup = getState().instances.info[domain];
+			if (lookup != undefined) {
+				return lookup;
+			}
+
+			// apiCall expects to pull the domain from state,
+			// but we don't want to store it there yet
+			// so we mock the API here with our function argument
+			let fakeState = {
+				oauth: { instance: domain }
+			};
+
+			return apiCall("GET", "/api/v1/instance")(dispatch, () => fakeState);
+		}).then((json) => {
+			if (json && json.uri) { // TODO: validate instance json more?
+				dispatch(setNamedInstanceInfo([domain, json]));
+				return json;
+			}
+		});
+	};
+}
+
+function fetchInstance() {
+	return function (dispatch, _getState) {
+		return Promise.try(() => {
+			return dispatch(apiCall("GET", "/api/v1/instance"));
+		}).then((json) => {
+			if (json && json.uri) {
+				dispatch(setInstanceInfo(json));
+				return json;
+			}
+		});
+	};
+}
+
+let submoduleArgs = { apiCall, getCurrentUrl, getChanges };
+
+module.exports = {
+	instance: {
+		fetchWithoutStore: fetchInstanceWithoutStore,
+		fetch: fetchInstance
+	},
+	oauth: require("./oauth")(submoduleArgs),
+	user: require("./user")(submoduleArgs),
+	admin: require("./admin")(submoduleArgs),
+	apiCall,
+	getChanges
+};