mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-11-22 21:07:30 -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
|
|
@ -1,96 +0,0 @@
|
|||
/*
|
||||
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 oauthLib = require("../../lib/oauth");
|
||||
|
||||
module.exports = 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: "GoToSocial Admin Panel",
|
||||
scope: ["admin"],
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
@ -22,45 +22,14 @@ const Promise = require("bluebird");
|
|||
const React = require("react");
|
||||
const ReactDom = require("react-dom");
|
||||
|
||||
const oauthLib = require("../../lib/oauth.js");
|
||||
const Auth = require("./auth");
|
||||
const createPanel = require("../lib/panel");
|
||||
|
||||
const Settings = require("./settings");
|
||||
const Blocks = require("./blocks");
|
||||
|
||||
require("../base.css");
|
||||
require("./style.css");
|
||||
|
||||
function App() {
|
||||
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);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (!hasAuth && oauth && oauth.isAuthorized()) {
|
||||
setAuth(true);
|
||||
}
|
||||
|
||||
if (oauth && oauth.isAuthorized()) {
|
||||
return <AdminPanel oauth={oauth} />;
|
||||
} else if (oauthState != undefined) {
|
||||
return "processing oauth...";
|
||||
} else {
|
||||
return <Auth setOauth={setOauth} />;
|
||||
}
|
||||
}
|
||||
|
||||
function AdminPanel({oauth}) {
|
||||
/*
|
||||
Features: (issue #78)
|
||||
|
|
@ -92,4 +61,4 @@ function Logout({oauth}) {
|
|||
);
|
||||
}
|
||||
|
||||
ReactDom.render(<App/>, document.getElementById("root"));
|
||||
createPanel("GoToSocial Admin Panel", ["admin"], AdminPanel);
|
||||
|
|
@ -16,22 +16,6 @@
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
body {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
section.info {
|
||||
form {
|
||||
grid-template-columns: auto 1fr;
|
||||
|
|
@ -120,22 +104,3 @@ section.blocks {
|
|||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notImplemented {
|
||||
border: 2px solid rgb(70, 79, 88);
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#525c66,
|
||||
#525c66 10px,
|
||||
rgb(70, 79, 88) 10px,
|
||||
rgb(70, 79, 88) 20px
|
||||
) !important;
|
||||
}
|
||||
63
web/source/panels/base.css
Normal file
63
web/source/panels/base.css
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
/*
|
||||
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/>.
|
||||
*/
|
||||
|
||||
body {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.messagebutton {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.notImplemented {
|
||||
border: 2px solid rgb(70, 79, 88);
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#525c66,
|
||||
#525c66 10px,
|
||||
rgb(70, 79, 88) 10px,
|
||||
rgb(70, 79, 88) 20px
|
||||
) !important;
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
};
|
||||
137
web/source/panels/user/basic.js
Normal file
137
web/source/panels/user/basic.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
/*
|
||||
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 React = require("react");
|
||||
const Promise = require("bluebird");
|
||||
|
||||
const Submit = require("../../lib/submit");
|
||||
|
||||
module.exports = function Basic({oauth, account}) {
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [statusMsg, setStatus] = React.useState("");
|
||||
|
||||
const [headerFile, setHeaderFile] = React.useState(undefined);
|
||||
const [headerSrc, setHeaderSrc] = React.useState("");
|
||||
|
||||
const [avatarFile, setAvatarFile] = React.useState(undefined);
|
||||
const [avatarSrc, setAvatarSrc] = React.useState("");
|
||||
|
||||
const [displayName, setDisplayName] = React.useState("");
|
||||
const [bio, setBio] = React.useState("");
|
||||
const [locked, setLocked] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setHeaderSrc(account.header);
|
||||
setAvatarSrc(account.avatar);
|
||||
|
||||
setDisplayName(account.display_name);
|
||||
setBio(account.source ? account.source.note : "");
|
||||
setLocked(account.locked);
|
||||
}, [account, setHeaderSrc, setAvatarSrc, setDisplayName, setBio, setLocked]);
|
||||
|
||||
const headerOnChange = (e) => {
|
||||
setHeaderFile(e.target.files[0]);
|
||||
setHeaderSrc(URL.createObjectURL(e.target.files[0]));
|
||||
};
|
||||
|
||||
const avatarOnChange = (e) => {
|
||||
setAvatarFile(e.target.files[0]);
|
||||
setAvatarSrc(URL.createObjectURL(e.target.files[0]));
|
||||
};
|
||||
|
||||
const submit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
setStatus("PATCHing");
|
||||
setError("");
|
||||
return Promise.try(() => {
|
||||
let formDataInfo = new FormData();
|
||||
|
||||
if (headerFile) {
|
||||
formDataInfo.set("header", headerFile);
|
||||
}
|
||||
|
||||
if (avatarFile) {
|
||||
formDataInfo.set("avatar", avatarFile);
|
||||
}
|
||||
|
||||
formDataInfo.set("display_name", displayName);
|
||||
formDataInfo.set("note", bio);
|
||||
formDataInfo.set("locked", locked);
|
||||
|
||||
return oauth.apiRequest("/api/v1/accounts/update_credentials", "PATCH", formDataInfo, "form");
|
||||
}).then((json) => {
|
||||
setStatus("Saved!");
|
||||
|
||||
setHeaderSrc(json.header);
|
||||
setAvatarSrc(json.avatar);
|
||||
|
||||
setDisplayName(json.display_name);
|
||||
setBio(json.source.note);
|
||||
setLocked(json.locked);
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setStatus("");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="basic">
|
||||
<h1>@{account.username}'s Profile Info</h1>
|
||||
<form>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="header">Header</label>
|
||||
<div className="border">
|
||||
<img className="headerpreview" src={headerSrc} alt={headerSrc ? `header image for ${account.username}` : "None set"}/>
|
||||
<div>
|
||||
<label htmlFor="header" className="file-input button">Browse…</label>
|
||||
<span>{headerFile ? headerFile.name : ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
<input className="hidden" id="header" type="file" accept="image/*" onChange={headerOnChange}/>
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="avatar">Avatar</label>
|
||||
<div className="border">
|
||||
<img className="avatarpreview" src={avatarSrc} alt={headerSrc ? `avatar image for ${account.username}` : "None set"}/>
|
||||
<div>
|
||||
<label htmlFor="avatar" className="file-input button">Browse…</label>
|
||||
<span>{avatarFile ? avatarFile.name : ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
<input className="hidden" id="avatar" type="file" accept="image/*" onChange={avatarOnChange}/>
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="displayname">Display Name</label>
|
||||
<input id="displayname" type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeHolder="A GoToSocial user"/>
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="bio">Bio</label>
|
||||
<textarea id="bio" value={bio} onChange={(e) => setBio(e.target.value)} placeHolder="Just trying out GoToSocial, my pronouns are they/them and I like sloths."/>
|
||||
</div>
|
||||
<div className="labelcheckbox">
|
||||
<label htmlFor="locked">Manually approve follow requests</label>
|
||||
<input id="locked" type="checkbox" checked={locked} onChange={(e) => setLocked(e.target.checked)}/>
|
||||
</div>
|
||||
<Submit onClick={submit} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg}/>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
@ -22,10 +22,41 @@ const Promise = require("bluebird");
|
|||
const React = require("react");
|
||||
const ReactDom = require("react-dom");
|
||||
|
||||
// require("./style.css");
|
||||
const createPanel = require("../lib/panel");
|
||||
|
||||
function App() {
|
||||
return "hello world - user panel";
|
||||
const Basic = require("./basic");
|
||||
const Posts = require("./posts");
|
||||
const Security = require("./security");
|
||||
|
||||
require("../base.css");
|
||||
require("./style.css");
|
||||
|
||||
function UserPanel({oauth}) {
|
||||
const [account, setAccount] = React.useState({});
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [statusMsg, setStatus] = React.useState("Fetching user info");
|
||||
|
||||
React.useEffect(() => {
|
||||
Promise.try(() => {
|
||||
return oauth.apiRequest("/api/v1/accounts/verify_credentials", "GET");
|
||||
}).then((json) => {
|
||||
setAccount(json);
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setStatus("");
|
||||
});
|
||||
}, [oauth, setAccount, setError, setStatus]);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<button className="logout" onClick={oauth.logout}>Log out of settings panel</button>
|
||||
</div>
|
||||
<Basic oauth={oauth} account={account}/>
|
||||
<Posts oauth={oauth} account={account}/>
|
||||
<Security oauth={oauth}/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDom.render(<App/>, document.getElementById("root"));
|
||||
createPanel("GoToSocial User Panel", ["read write"], UserPanel);
|
||||
98
web/source/panels/user/languages.js
Normal file
98
web/source/panels/user/languages.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
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 React = require("react");
|
||||
|
||||
module.exports = function Languages() {
|
||||
return <React.Fragment>
|
||||
<option value="AF">Afrikaans</option>
|
||||
<option value="SQ">Albanian</option>
|
||||
<option value="AR">Arabic</option>
|
||||
<option value="HY">Armenian</option>
|
||||
<option value="EU">Basque</option>
|
||||
<option value="BN">Bengali</option>
|
||||
<option value="BG">Bulgarian</option>
|
||||
<option value="CA">Catalan</option>
|
||||
<option value="KM">Cambodian</option>
|
||||
<option value="ZH">Chinese (Mandarin)</option>
|
||||
<option value="HR">Croatian</option>
|
||||
<option value="CS">Czech</option>
|
||||
<option value="DA">Danish</option>
|
||||
<option value="NL">Dutch</option>
|
||||
<option value="EN">English</option>
|
||||
<option value="ET">Estonian</option>
|
||||
<option value="FJ">Fiji</option>
|
||||
<option value="FI">Finnish</option>
|
||||
<option value="FR">French</option>
|
||||
<option value="KA">Georgian</option>
|
||||
<option value="DE">German</option>
|
||||
<option value="EL">Greek</option>
|
||||
<option value="GU">Gujarati</option>
|
||||
<option value="HE">Hebrew</option>
|
||||
<option value="HI">Hindi</option>
|
||||
<option value="HU">Hungarian</option>
|
||||
<option value="IS">Icelandic</option>
|
||||
<option value="ID">Indonesian</option>
|
||||
<option value="GA">Irish</option>
|
||||
<option value="IT">Italian</option>
|
||||
<option value="JA">Japanese</option>
|
||||
<option value="JW">Javanese</option>
|
||||
<option value="KO">Korean</option>
|
||||
<option value="LA">Latin</option>
|
||||
<option value="LV">Latvian</option>
|
||||
<option value="LT">Lithuanian</option>
|
||||
<option value="MK">Macedonian</option>
|
||||
<option value="MS">Malay</option>
|
||||
<option value="ML">Malayalam</option>
|
||||
<option value="MT">Maltese</option>
|
||||
<option value="MI">Maori</option>
|
||||
<option value="MR">Marathi</option>
|
||||
<option value="MN">Mongolian</option>
|
||||
<option value="NE">Nepali</option>
|
||||
<option value="NO">Norwegian</option>
|
||||
<option value="FA">Persian</option>
|
||||
<option value="PL">Polish</option>
|
||||
<option value="PT">Portuguese</option>
|
||||
<option value="PA">Punjabi</option>
|
||||
<option value="QU">Quechua</option>
|
||||
<option value="RO">Romanian</option>
|
||||
<option value="RU">Russian</option>
|
||||
<option value="SM">Samoan</option>
|
||||
<option value="SR">Serbian</option>
|
||||
<option value="SK">Slovak</option>
|
||||
<option value="SL">Slovenian</option>
|
||||
<option value="ES">Spanish</option>
|
||||
<option value="SW">Swahili</option>
|
||||
<option value="SV">Swedish </option>
|
||||
<option value="TA">Tamil</option>
|
||||
<option value="TT">Tatar</option>
|
||||
<option value="TE">Telugu</option>
|
||||
<option value="TH">Thai</option>
|
||||
<option value="BO">Tibetan</option>
|
||||
<option value="TO">Tonga</option>
|
||||
<option value="TR">Turkish</option>
|
||||
<option value="UK">Ukrainian</option>
|
||||
<option value="UR">Urdu</option>
|
||||
<option value="UZ">Uzbek</option>
|
||||
<option value="VI">Vietnamese</option>
|
||||
<option value="CY">Welsh</option>
|
||||
<option value="XH">Xhosa</option>
|
||||
</React.Fragment>;
|
||||
};
|
||||
107
web/source/panels/user/posts.js
Normal file
107
web/source/panels/user/posts.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
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 React = require("react");
|
||||
const Promise = require("bluebird");
|
||||
|
||||
const Languages = require("./languages");
|
||||
const Submit = require("../../lib/submit");
|
||||
|
||||
module.exports = function Posts({oauth, account}) {
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [statusMsg, setStatus] = React.useState("");
|
||||
|
||||
const [language, setLanguage] = React.useState("");
|
||||
const [privacy, setPrivacy] = React.useState("");
|
||||
const [format, setFormat] = React.useState("");
|
||||
const [sensitive, setSensitive] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (account.source) {
|
||||
setLanguage(account.source.language.toUpperCase());
|
||||
setPrivacy(account.source.privacy);
|
||||
setSensitive(account.source.sensitive ? account.source.sensitive : false);
|
||||
setFormat(account.source.status_format ? account.source.status_format : "plain");
|
||||
}
|
||||
|
||||
}, [account, setSensitive, setPrivacy]);
|
||||
|
||||
const submit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
setStatus("PATCHing");
|
||||
setError("");
|
||||
return Promise.try(() => {
|
||||
let formDataInfo = new FormData();
|
||||
|
||||
formDataInfo.set("source[language]", language);
|
||||
formDataInfo.set("source[privacy]", privacy);
|
||||
formDataInfo.set("source[sensitive]", sensitive);
|
||||
formDataInfo.set("source[status_format]", format);
|
||||
|
||||
return oauth.apiRequest("/api/v1/accounts/update_credentials", "PATCH", formDataInfo, "form");
|
||||
}).then((json) => {
|
||||
setStatus("Saved!");
|
||||
setLanguage(json.source.language.toUpperCase());
|
||||
setPrivacy(json.source.privacy);
|
||||
setSensitive(json.source.sensitive ? json.source.sensitive : false);
|
||||
setFormat(json.source.status_format ? json.source.status_format : "plain");
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setStatus("");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="posts">
|
||||
<h1>Post Settings</h1>
|
||||
<form>
|
||||
<div className="labelselect">
|
||||
<label htmlFor="language">Default post language</label>
|
||||
<select id="language" autoComplete="language" value={language} onChange={(e) => setLanguage(e.target.value)}>
|
||||
<Languages />
|
||||
</select>
|
||||
</div>
|
||||
<div className="labelselect">
|
||||
<label htmlFor="privacy">Default post privacy</label>
|
||||
<select id="privacy" value={privacy} onChange={(e) => setPrivacy(e.target.value)}>
|
||||
<option value="private">Private / followers-only)</option>
|
||||
<option value="unlisted">Unlisted</option>
|
||||
<option value="public">Public</option>
|
||||
</select>
|
||||
<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#privacy-settings" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post privacy settings (opens in a new tab)</a>
|
||||
</div>
|
||||
<div className="labelselect">
|
||||
<label htmlFor="format">Default post format</label>
|
||||
<select id="format" value={format} onChange={(e) => setFormat(e.target.value)}>
|
||||
<option value="plain">Plain (default)</option>
|
||||
<option value="markdown">Markdown</option>
|
||||
</select>
|
||||
<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#input-types" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post format settings (opens in a new tab)</a>
|
||||
</div>
|
||||
<div className="labelcheckbox">
|
||||
<label htmlFor="sensitive">Mark my posts as sensitive by default</label>
|
||||
<input id="sensitive" type="checkbox" checked={sensitive} onChange={(e) => setSensitive(e.target.checked)}/>
|
||||
</div>
|
||||
<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
80
web/source/panels/user/security.js
Normal file
80
web/source/panels/user/security.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/*
|
||||
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 React = require("react");
|
||||
const Promise = require("bluebird");
|
||||
|
||||
const Submit = require("../../lib/submit");
|
||||
|
||||
module.exports = function Security({oauth}) {
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [statusMsg, setStatus] = React.useState("");
|
||||
|
||||
const [oldPassword, setOldPassword] = React.useState("");
|
||||
const [newPassword, setNewPassword] = React.useState("");
|
||||
const [newPasswordConfirm, setNewPasswordConfirm] = React.useState("");
|
||||
|
||||
const submit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (newPassword !== newPasswordConfirm) {
|
||||
setError("New password and confirm new password did not match!");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("PATCHing");
|
||||
setError("");
|
||||
return Promise.try(() => {
|
||||
let formDataInfo = new FormData();
|
||||
formDataInfo.set("old_password", oldPassword);
|
||||
formDataInfo.set("new_password", newPassword);
|
||||
return oauth.apiRequest("/api/v1/user/password_change", "POST", formDataInfo, "form");
|
||||
}).then((json) => {
|
||||
setStatus("Saved!");
|
||||
setOldPassword("");
|
||||
setNewPassword("");
|
||||
setNewPasswordConfirm("");
|
||||
}).catch((e) => {
|
||||
setError(e.message);
|
||||
setStatus("");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="security">
|
||||
<h1>Password Change</h1>
|
||||
<form>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="password">Current password</label>
|
||||
<input name="password" id="password" type="password" autoComplete="current-password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} />
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="new-password">New password</label>
|
||||
<input name="new-password" id="new-password" type="password" autoComplete="new-password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
|
||||
</div>
|
||||
<div className="labelinput">
|
||||
<label htmlFor="confirm-new-password">Confirm new password</label>
|
||||
<input name="confirm-new-password" id="confirm-new-password" type="password" autoComplete="new-password" value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)} />
|
||||
</div>
|
||||
<Submit onClick={submit} label="Save new password" errorMsg={errorMsg} statusMsg={statusMsg}/>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
118
web/source/panels/user/style.css
Normal file
118
web/source/panels/user/style.css
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
/*
|
||||
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/>.
|
||||
*/
|
||||
|
||||
section.basic, section.posts, section.security {
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
justify-self: start;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
input:read-only {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: $boxshadow_border;
|
||||
box-shadow: $box-shadow;
|
||||
object-fit: cover;
|
||||
border-radius: 0.2rem;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.avatarpreview {
|
||||
height: 8.5rem;
|
||||
width: 8.5rem;
|
||||
}
|
||||
|
||||
.headerpreview {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.moreinfolink {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.labelinput .border {
|
||||
border-radius: 0.2rem;
|
||||
border: 0.15rem solid $border_accent;
|
||||
padding: 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-input.button {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
padding: 0.3rem 0.3rem;
|
||||
align-self: flex-start;
|
||||
/* background: $border_accent; */
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.labelinput, .labelselect {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.labelcheckbox {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.titlesave {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.logout {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue