login flow up till app registration

web/source/css/_colors.css

@@ -44,6 +44,9 @@ $blue1: #3a9fde; /* darker blue for smaller elements (borders), can only be used
 $blue2: #66befe; /* all-round accent color, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */
 $blue3: #89caff; /* hover/selected accent to $blue2, can be used with $gray1 (7.9), $gray2 (6.3), $gray3 (5.6), $gray4 (5.2), $gray5 (4.7) */
 
+$error1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */
+$error2: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */
+
 $fg: $white1;
 $bg: $gray1;
 

web/source/package.json

@@ -38,7 +38,9 @@
     "react-error-boundary": "^3.1.4",
     "react-redux": "^8.0.2",
     "reactify": "^1.1.1",
+    "redux-devtools-extension": "^2.13.9",
     "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.4.1",
     "uglifyify": "^5.0.2",
     "wouter": "^2.8.0-alpha.2"
   },

web/source/settings-panel/components/login.jsx

@@ -18,6 +18,76 @@
 	
 "use strict";
 
+const Promise = require("bluebird");
+const React = require("react");
+const Redux = require("react-redux");
+
+const { setInstance } = require("../redux/reducers/instances").actions;
+const { updateInstance, updateRegistration } = require("../lib/api");
+
 module.exports = function Login() {
-	return (null);
+	const dispatch = Redux.useDispatch();
+	const [ instanceField, setInstanceField ] = React.useState("");
+	const [ errorMsg, setErrorMsg ] = React.useState();
+	const instanceFieldRef = React.useRef("");
+
+	React.useEffect(() => {
+		// check if current domain runs an instance
+		Promise.try(() => {
+			console.log("trying", window.location.origin);
+			return dispatch(updateInstance(window.location.origin));
+		}).then((json) => {
+			if (instanceFieldRef.current.length == 0) { // user hasn't started typing yet
+				dispatch(setInstance(json.uri));
+				instanceFieldRef.current = json.uri;
+				setInstanceField(json.uri);
+			}
+		}).catch((e) => {
+			console.log("Current domain does not host a valid instance: ", e);
+		});
+	}, []);
+
+	function tryInstance() {
+		Promise.try(() => {
+			return dispatch(updateInstance(instanceFieldRef.current)).catch((e) => {
+				// TODO: clearer error messages for common errors
+				console.log(e);
+				throw e;
+			});
+		}).then((instance) => {
+			// return dispatch(updateRegistration);
+		}).catch((e) => {
+			setErrorMsg(
+				<>
+					<b>{e.type}</b>
+					<span>{e.message}</span>
+				</>
+			);
+		});
+	}
+
+	function updateInstanceField(e) {
+		if (e.key == "Enter") {
+			tryInstance(instanceField);
+		} else {
+			setInstanceField(e.target.value);
+			instanceFieldRef.current = e.target.value;
+		}
+	}
+
+	return (
+		<section className="login">
+			<h1>OAUTH Login:</h1>
+			<form onSubmit={(e) => e.preventDefault()}>
+				<label htmlFor="instance">Instance: </label>
+				<input value={instanceField} onChange={updateInstanceField} id="instance"/>
+				{errorMsg && 
+				<div className="error">
+					{errorMsg}
+				</div>
+				}
+				<button onClick={tryInstance}>Authenticate</button>
+			</form>
+		</section>
+	);
 };

web/source/settings-panel/index.js

@@ -33,7 +33,7 @@ const ErrorFallback = require("./components/error");
 
 const oauthLib = require("./lib/oauth");
 
-// require("./style.css");
+require("./style.css");
 
 // TODO: nested categories?
 const nav = {
@@ -90,7 +90,7 @@ function App() {
 					{sidebar}
 					{/* <button className="logout" onClick={oauth.logout}>Log out</button> */}
 				</div>
-				<section>
+				<section className="with-sidebar">
 					<Switch>
 						{panelRouter}
 					</Switch>
@@ -98,7 +98,9 @@ function App() {
 			</>
 		);
 	} else {
-		return <Login />;
+		return (
+			<Login />
+		);
 	}
 }
 

web/source/settings-panel/lib/api.js

@@ -0,0 +1,94 @@
+/*
+	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 { setRegistration } = require("../redux/reducers/oauth").actions;
+const { setInstanceInfo } = require("../redux/reducers/instances").actions;
+
+function apiCall(base, method, route, {payload, headers={}}) {
+	return Promise.try(() => {
+		let url = new URL(base);
+		url.pathname = route;
+		let body;
+
+		if (payload != undefined) {
+			body = JSON.stringify(payload);
+		}
+
+		let fetchHeaders = {
+			"Content-Type": "application/json",
+			...headers
+		};
+
+		return fetch(url.toString(), {
+			method: method,
+			headers: fetchHeaders,
+			body: body
+		});
+	}).then((res) => {
+		if (res.status == 200) {
+			return res.json();
+		} else {
+			throw res;
+		}
+	});
+}
+
+function getCurrentUrl() {
+	return `${window.location.origin}${window.location.pathname}`;
+}
+
+function updateInstance(domain) {
+	return function(dispatch, getState) {
+		/* check if domain is valid instance, then register client if needed  */
+
+		return Promise.try(() => {
+			return apiCall(domain, "GET", "/api/v1/instance", {
+				headers: {
+					"Content-Type": "text/plain"
+				}
+			});
+		}).then((json) => {
+			if (json && json.uri) { // TODO: validate instance json more?
+				dispatch(setInstanceInfo(json.uri, json));
+				return json;
+			}
+		});
+	};
+}
+
+function updateRegistration() {
+	return function(dispatch, getState) {
+		let base = getState().oauth.instance;
+		return Promise.try(() => {
+			return apiCall(base, "POST", "/api/v1/apps", {
+				client_name: "GoToSocial Settings",
+				scopes: "write admin",
+				redirect_uris: getCurrentUrl(),
+				website: getCurrentUrl()
+			});
+		}).then((json) => {
+			console.log(json);
+			dispatch(setRegistration(base, json));
+		});
+	};
+}
+
+module.exports = { updateInstance, updateRegistration };

web/source/settings-panel/redux/index.js

@@ -18,22 +18,27 @@
 
 "use strict";
 
-const { createStore, combineReducers } = require("redux");
+const { createStore, combineReducers, applyMiddleware } = require("redux");
 const { persistStore, persistReducer } = require("redux-persist");
+const thunk = require("redux-thunk").default;
+const { composeWithDevTools } = require("redux-devtools-extension");
 
 const persistConfig = {
 	key: "gotosocial-settings",
 	storage: require("redux-persist/lib/storage").default,
-	stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default
+	stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default,
+	whitelist: ['oauth']
 };
 
 const combinedReducers = combineReducers({
-	oauth: require("./reducers/oauth").reducer
+	oauth: require("./reducers/oauth").reducer,
+	instances: require("./reducers/instances").reducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, combinedReducers);
+const composedEnhancer = composeWithDevTools(applyMiddleware(thunk));
 
-const store = createStore(persistedReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
+const store = createStore(persistedReducer, composedEnhancer);
 const persistor = persistStore(store);
 
 module.exports = { store, persistor };

web/source/settings-panel/redux/reducers/instances.js

@@ -0,0 +1,38 @@
+/*
+	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 {createSlice} = require("@reduxjs/toolkit");
+
+module.exports = createSlice({
+	name: "instances",
+	initialState: {
+		info: {},
+		current: undefined
+	},
+	reducers: {
+		setInstance: (state, {payload}) => {
+			state.current = payload;
+		},
+		setInstanceInfo: (state, {payload}) => {
+			let [key, info] = payload;
+			state.info[key] = info;
+		},
+	}
+});

web/source/settings-panel/redux/reducers/oauth.js

@@ -23,20 +23,13 @@ const {createSlice} = require("@reduxjs/toolkit");
 module.exports = createSlice({
 	name: "oauth",
 	initialState: {
-		loggedIn: false
+		loggedIn: false,
+		registrations: {}
 	},
 	reducers: {
-		setInstance: (state, {payload}) => {
-			return {
-				...state,
-				instance: payload
-			};
-		},
 		setRegistration: (state, {payload}) => {
-			return {
+			let [key, info] = payload;
-				...state,
+			state.instanceRegistration[key] = info;
-
-			}
 		}
 	}
 });

web/source/settings-panel/style.css

@@ -32,7 +32,7 @@ section {
 	display: grid;
 	grid-template-columns: 1fr min(92%, 90ch) 1fr;
 
-	section {
+	section.with-sidebar {
 		border-left: none;
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
@@ -128,10 +128,16 @@ input, select, textarea {
 }
 
 .error {
+	background: $error2;
+	border: 1px solid $error1;
+	border-radius: $br;
+	color: $error1;
 	font-weight: bold;
+	padding: 0.5rem;
 
 	pre {
 		background: $bg;
+		color: $fg;
 		padding: 1rem;
 		overflow: auto;
 		margin: 0;

web/source/yarn.lock

@@ -4854,6 +4854,11 @@ recast@^0.11.17:
     private "~0.1.5"
     source-map "~0.5.0"
 
+redux-devtools-extension@^2.13.9:
+  version "2.13.9"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz#6b764e8028b507adcb75a1cae790f71e6be08ae7"
+  integrity sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==
+
 redux-persist@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"