mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-11-11 00:47:29 -06:00
[feature] Add first iteration of a user panel at /user (#736)
* start work on user panel * parse source first before checking if empty form * newline * set avi + header nicely * add posts settings * render signin a bit nicer on mobile * return OK json on successful change * return unauthorized on bad password * clarify message on insecure password * make login a bit prettier * add alt text + border round image previews * add logout button * add password change * styling updates * redirect /auth/edit to /user * update tests * fix validation tests * better labels, link to more info * make submit button generic component * move submit button inside forms * add autocomplete labels to password fields * fix indentation (thx eslint) * update eslintrc * eslint: no-unescaped-entities * initial deduplication between user and admin panel * add default status/post format setting * user panel styling for inputs * update user panel styling, include normalize css * add placeholder text * input padding Co-authored-by: f0x <f0x@cthu.lu>
This commit is contained in:
tobi
GitHub
parent
4722970a5b
commit
117888cf59
29 changed files with 931 additions and 202 deletions
221
web/source/panels/lib/oauth.js
Normal file
221
web/source/panels/lib/oauth.js
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
/*
|
||||
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");
|
||||
|
||||
function getCurrentUrl() {
|
||||
return window.location.origin + window.location.pathname; // strips ?query=string and #hash
|
||||
}
|
||||
|
||||
module.exports = function oauthClient(config, initState) {
|
||||
/* config:
|
||||
instance: instance domain (https://testingtesting123.xyz)
|
||||
client_name: "GoToSocial Admin Panel"
|
||||
scope: []
|
||||
website:
|
||||
*/
|
||||
|
||||
let state = initState;
|
||||
if (initState == undefined) {
|
||||
state = localStorage.getItem("oauth");
|
||||
if (state == undefined) {
|
||||
state = {
|
||||
config
|
||||
};
|
||||
storeState();
|
||||
} else {
|
||||
state = JSON.parse(state);
|
||||
}
|
||||
}
|
||||
|
||||
function storeState() {
|
||||
localStorage.setItem("oauth", JSON.stringify(state));
|
||||
}
|
||||
|
||||
/* register app
|
||||
/api/v1/apps
|
||||
*/
|
||||
function register() {
|
||||
if (state.client_id != undefined) {
|
||||
return true; // we already have a registration
|
||||
}
|
||||
let url = new URL(config.instance);
|
||||
url.pathname = "/api/v1/apps";
|
||||
|
||||
return fetch(url.href, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
client_name: config.client_name,
|
||||
redirect_uris: getCurrentUrl(),
|
||||
scopes: config.scope.join(" "),
|
||||
website: getCurrentUrl()
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.status != 200) {
|
||||
throw res;
|
||||
}
|
||||
return res.json();
|
||||
}).then((json) => {
|
||||
state.client_id = json.client_id;
|
||||
state.client_secret = json.client_secret;
|
||||
storeState();
|
||||
});
|
||||
}
|
||||
|
||||
/* authorize:
|
||||
/oauth/authorize
|
||||
?client_id=CLIENT_ID
|
||||
&redirect_uri=window.location.href
|
||||
&response_type=code
|
||||
&scope=admin
|
||||
*/
|
||||
function authorize() {
|
||||
let url = new URL(config.instance);
|
||||
url.pathname = "/oauth/authorize";
|
||||
url.searchParams.set("client_id", state.client_id);
|
||||
url.searchParams.set("redirect_uri", getCurrentUrl());
|
||||
url.searchParams.set("response_type", "code");
|
||||
url.searchParams.set("scope", config.scope.join(" "));
|
||||
|
||||
window.location.assign(url.href);
|
||||
}
|
||||
|
||||
function callback() {
|
||||
if (state.access_token != undefined) {
|
||||
return; // we're already done :)
|
||||
}
|
||||
let params = (new URL(window.location)).searchParams;
|
||||
|
||||
let token = params.get("code");
|
||||
if (token != null) {
|
||||
console.log("got token callback:", token);
|
||||
}
|
||||
|
||||
return authorizeToken(token)
|
||||
.catch((e) => {
|
||||
console.log("Error processing oauth callback:", e);
|
||||
logout(); // just to be sure
|
||||
});
|
||||
}
|
||||
|
||||
function authorizeToken(token) {
|
||||
let url = new URL(config.instance);
|
||||
url.pathname = "/oauth/token";
|
||||
return fetch(url.href, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
client_id: state.client_id,
|
||||
client_secret: state.client_secret,
|
||||
redirect_uri: getCurrentUrl(),
|
||||
grant_type: "authorization_code",
|
||||
code: token
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.status != 200) {
|
||||
throw res;
|
||||
}
|
||||
return res.json();
|
||||
}).then((json) => {
|
||||
state.access_token = json.access_token;
|
||||
storeState();
|
||||
window.location = getCurrentUrl(); // clear ?token=
|
||||
});
|
||||
}
|
||||
|
||||
function isAuthorized() {
|
||||
return (state.access_token != undefined);
|
||||
}
|
||||
|
||||
function apiRequest(path, method, data, type="json", accept="json") {
|
||||
if (!isAuthorized()) {
|
||||
throw new Error("Not Authenticated");
|
||||
}
|
||||
let url = new URL(config.instance);
|
||||
let [p, s] = path.split("?");
|
||||
url.pathname = p;
|
||||
if (s != undefined) {
|
||||
url.search = s;
|
||||
}
|
||||
let headers = {
|
||||
"Authorization": `Bearer ${state.access_token}`,
|
||||
"Accept": accept == "json" ? "application/json" : "*/*"
|
||||
};
|
||||
let body = data;
|
||||
if (type == "json" && body != undefined) {
|
||||
headers["Content-Type"] = "application/json";
|
||||
body = JSON.stringify(data);
|
||||
}
|
||||
return fetch(url.href, {
|
||||
method,
|
||||
headers,
|
||||
body
|
||||
}).then((res) => {
|
||||
return Promise.all([res.json(), res]);
|
||||
}).then(([json, res]) => {
|
||||
if (res.status != 200) {
|
||||
if (json.error) {
|
||||
throw new Error(json.error);
|
||||
} else {
|
||||
throw new Error(`${res.status}: ${res.statusText}`);
|
||||
}
|
||||
} else {
|
||||
return json;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function logout() {
|
||||
let url = new URL(config.instance);
|
||||
url.pathname = "/oauth/revoke";
|
||||
return fetch(url.href, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
client_id: state.client_id,
|
||||
client_secret: state.client_secret,
|
||||
token: state.access_token,
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.status != 200) {
|
||||
// GoToSocial doesn't actually implement this route yet,
|
||||
// so error is to be expected
|
||||
return;
|
||||
}
|
||||
return res.json();
|
||||
}).catch(() => {
|
||||
// see above
|
||||
}).then(() => {
|
||||
localStorage.removeItem("oauth");
|
||||
window.location = getCurrentUrl();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
register, authorize, callback, isAuthorized, apiRequest, logout
|
||||
};
|
||||
};
|
||||
134
web/source/panels/lib/panel.js
Normal file
134
web/source/panels/lib/panel.js
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
/*
|
||||
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");
|
||||
|
||||
const oauthLib = require("./oauth");
|
||||
|
||||
module.exports = function createPanel(clientName, scope, Component) {
|
||||
ReactDom.render(<Panel/>, document.getElementById("root"));
|
||||
|
||||
function Panel() {
|
||||
const [oauth, setOauth] = React.useState();
|
||||
const [hasAuth, setAuth] = React.useState(false);
|
||||
const [oauthState, setOauthState] = React.useState(localStorage.getItem("oauth"));
|
||||
|
||||
React.useEffect(() => {
|
||||
let state = localStorage.getItem("oauth");
|
||||
if (state != undefined) {
|
||||
state = JSON.parse(state);
|
||||
let restoredOauth = oauthLib(state.config, state);
|
||||
Promise.try(() => {
|
||||
return restoredOauth.callback();
|
||||
}).then(() => {
|
||||
setAuth(true);
|
||||
});
|
||||
setOauth(restoredOauth);
|
||||
}
|
||||
}, [setAuth, setOauth]);
|
||||
|
||||
if (!hasAuth && oauth && oauth.isAuthorized()) {
|
||||
setAuth(true);
|
||||
}
|
||||
|
||||
if (oauth && oauth.isAuthorized()) {
|
||||
return <Component oauth={oauth} />;
|
||||
} else if (oauthState != undefined) {
|
||||
return "processing oauth...";
|
||||
} else {
|
||||
return <Auth setOauth={setOauth} />;
|
||||
}
|
||||
}
|
||||
|
||||
function Auth({setOauth}) {
|
||||
const [ instance, setInstance ] = React.useState("");
|
||||
|
||||
React.useEffect(() => {
|
||||
let isStillMounted = true;
|
||||
// check if current domain runs an instance
|
||||
let thisUrl = new URL(window.location.origin);
|
||||
thisUrl.pathname = "/api/v1/instance";
|
||||
Promise.try(() => {
|
||||
return fetch(thisUrl.href);
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
return res.json();
|
||||
}
|
||||
}).then((json) => {
|
||||
if (json && json.uri && isStillMounted) {
|
||||
setInstance(json.uri);
|
||||
}
|
||||
}).catch((e) => {
|
||||
console.log("error checking instance response:", e);
|
||||
});
|
||||
|
||||
return () => {
|
||||
// cleanup function
|
||||
isStillMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
function doAuth() {
|
||||
return Promise.try(() => {
|
||||
return new URL(instance);
|
||||
}).catch(TypeError, () => {
|
||||
return new URL(`https://${instance}`);
|
||||
}).then((parsedURL) => {
|
||||
let url = parsedURL.toString();
|
||||
let oauth = oauthLib({
|
||||
instance: url,
|
||||
client_name: clientName,
|
||||
scope: scope,
|
||||
website: window.location.href
|
||||
});
|
||||
setOauth(oauth);
|
||||
setInstance(url);
|
||||
return oauth.register().then(() => {
|
||||
return oauth;
|
||||
});
|
||||
}).then((oauth) => {
|
||||
return oauth.authorize();
|
||||
}).catch((e) => {
|
||||
console.log("error authenticating:", e);
|
||||
});
|
||||
}
|
||||
|
||||
function updateInstance(e) {
|
||||
if (e.key == "Enter") {
|
||||
doAuth();
|
||||
} else {
|
||||
setInstance(e.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="login">
|
||||
<h1>OAUTH Login:</h1>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<label htmlFor="instance">Instance: </label>
|
||||
<input value={instance} onChange={updateInstance} id="instance"/>
|
||||
<button onClick={doAuth}>Authenticate</button>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue