From 117888cf59c10330671f43bbce949a3984761c91 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Mon, 8 Aug 2022 10:40:51 +0200 Subject: [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 --- web/source/.eslintrc.js | 9 +- web/source/css/_colors.css | 5 +- web/source/css/base.css | 49 ++++++-- web/source/lib/oauth.js | 221 ------------------------------------ web/source/lib/submit.js | 30 +++++ web/source/package.json | 1 + web/source/panels/admin/auth.js | 96 ---------------- web/source/panels/admin/index.js | 39 +------ web/source/panels/admin/style.css | 35 ------ web/source/panels/base.css | 63 ++++++++++ web/source/panels/lib/oauth.js | 221 ++++++++++++++++++++++++++++++++++++ web/source/panels/lib/panel.js | 134 ++++++++++++++++++++++ web/source/panels/user/basic.js | 137 ++++++++++++++++++++++ web/source/panels/user/index.js | 41 ++++++- web/source/panels/user/languages.js | 98 ++++++++++++++++ web/source/panels/user/posts.js | 107 +++++++++++++++++ web/source/panels/user/security.js | 80 +++++++++++++ web/source/panels/user/style.css | 118 +++++++++++++++++++ web/source/yarn.lock | 5 + 19 files changed, 1086 insertions(+), 403 deletions(-) delete mode 100644 web/source/lib/oauth.js create mode 100644 web/source/lib/submit.js delete mode 100644 web/source/panels/admin/auth.js create mode 100644 web/source/panels/base.css create mode 100644 web/source/panels/lib/oauth.js create mode 100644 web/source/panels/lib/panel.js create mode 100644 web/source/panels/user/basic.js create mode 100644 web/source/panels/user/languages.js create mode 100644 web/source/panels/user/posts.js create mode 100644 web/source/panels/user/security.js create mode 100644 web/source/panels/user/style.css (limited to 'web/source') diff --git a/web/source/.eslintrc.js b/web/source/.eslintrc.js index 36fbbacd6..cb94b8e88 100644 --- a/web/source/.eslintrc.js +++ b/web/source/.eslintrc.js @@ -1,3 +1,8 @@ +"use strict"; + module.exports = { - "extends": ["@f0x52/eslint-config-react"] -}; + "extends": ["@f0x52/eslint-config-react"], + "rules": { + "react/prop-types": "off" + } +}; \ No newline at end of file diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css index 25bfae26e..5390f13d2 100644 --- a/web/source/css/_colors.css +++ b/web/source/css/_colors.css @@ -51,6 +51,7 @@ $bg_trans: color-mod($sloth_gray2 alpha(62%)); $bg_accent: $sloth_gray2_lighter3; $fg_accent: $lightblue; +$border_accent: $sloth_orange2; /* Color variables as used in a specific location */ @@ -70,4 +71,6 @@ $status_info_fg: #CBCBD7; $boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); $boxshadow_border: 0.08rem solid $sloth_gray2_darker5; -$profile_avatar_border: 0.2rem solid $sloth_orange2; \ No newline at end of file +$profile_avatar_border: 0.2rem solid $border_accent; + +$input_bg: $sloth_gray2_darker3; \ No newline at end of file diff --git a/web/source/css/base.css b/web/source/css/base.css index 11d6dc407..5f07fb847 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -16,6 +16,8 @@ along with this program. If not, see . */ +@import "modern-normalize/modern-normalize.css"; + @font-face { font-family: "Noto Sans"; font-weight: 400; @@ -48,6 +50,10 @@ body { position: relative; } +.hidden { + display: none; +} + .page { position: absolute; display: grid; @@ -215,13 +221,26 @@ section.apps { section.login { form { - display: inline-grid; - grid-template-columns: auto 100%; - grid-gap: 0.7rem; + display: flex; + flex-direction: column; + gap: 1rem; + + + padding-bottom: 1rem; + padding-top: 1rem; + + label, input { + padding-left: 0.2rem; + } - button { - place-self: center; - grid-column: 2; + .labelinput { + display: flex; + flex-direction: column; + gap: 0.4rem; + } + + .btn { + margin-top: 1rem; } } } @@ -245,11 +264,25 @@ section.error { } input, select, textarea { - border: 1px solid $fg; + box-sizing: border-box; + border: 0.15rem solid $border_accent; + border-radius: 0.1rem; color: $fg; - background: $bg; + /* background: $input_bg; */ + background: $bg_accent; width: 100%; font-family: 'Noto Sans', sans-serif; + font-size: 1rem; + padding: 0.3rem; + + &:focus { + border-color: $fg_accent; + } +} + +input, textarea { + padding-top: 0.1rem; + padding-bottom: 0.1rem; } footer { diff --git a/web/source/lib/oauth.js b/web/source/lib/oauth.js deleted file mode 100644 index 9cbf3d484..000000000 --- a/web/source/lib/oauth.js +++ /dev/null @@ -1,221 +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 . -*/ - -"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 - }; -}; diff --git a/web/source/lib/submit.js b/web/source/lib/submit.js new file mode 100644 index 000000000..ae4108a01 --- /dev/null +++ b/web/source/lib/submit.js @@ -0,0 +1,30 @@ +/* + 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 . +*/ + +"use strict"; + +const React = require("react"); + +module.exports = function Submit({onClick, label, errorMsg, statusMsg}) { + return ( +
+ +
{errorMsg ? errorMsg : statusMsg}
+
+ ); +}; diff --git a/web/source/package.json b/web/source/package.json index 4ff538769..691b68183 100644 --- a/web/source/package.json +++ b/web/source/package.json @@ -22,6 +22,7 @@ "from2-string": "^1.1.0", "icssify": "^2.0.0", "js-file-download": "^0.4.12", + "modern-normalize": "^1.1.0", "photoswipe": "^5.3.0", "photoswipe-dynamic-caption-plugin": "^1.2.4", "postcss-color-mod-function": "^3.0.3", diff --git a/web/source/panels/admin/auth.js b/web/source/panels/admin/auth.js deleted file mode 100644 index e26ff06b9..000000000 --- a/web/source/panels/admin/auth.js +++ /dev/null @@ -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 . -*/ - -"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 ( -
-

OAUTH Login:

-
e.preventDefault()}> - - - -
-
- ); -}; \ No newline at end of file diff --git a/web/source/panels/admin/index.js b/web/source/panels/admin/index.js index 05ab8e583..0fc1601eb 100644 --- a/web/source/panels/admin/index.js +++ b/web/source/panels/admin/index.js @@ -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 ; - } else if (oauthState != undefined) { - return "processing oauth..."; - } else { - return ; - } -} - function AdminPanel({oauth}) { /* Features: (issue #78) @@ -92,4 +61,4 @@ function Logout({oauth}) { ); } -ReactDom.render(, document.getElementById("root")); \ No newline at end of file +createPanel("GoToSocial Admin Panel", ["admin"], AdminPanel); \ No newline at end of file diff --git a/web/source/panels/admin/style.css b/web/source/panels/admin/style.css index c9d2f09b4..01195437f 100644 --- a/web/source/panels/admin/style.css +++ b/web/source/panels/admin/style.css @@ -16,22 +16,6 @@ along with this program. If not, see . */ -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; -} \ No newline at end of file diff --git a/web/source/panels/base.css b/web/source/panels/base.css new file mode 100644 index 000000000..d0e242505 --- /dev/null +++ b/web/source/panels/base.css @@ -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 . +*/ + +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; +} diff --git a/web/source/panels/lib/oauth.js b/web/source/panels/lib/oauth.js new file mode 100644 index 000000000..9cbf3d484 --- /dev/null +++ b/web/source/panels/lib/oauth.js @@ -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 . +*/ + +"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 + }; +}; diff --git a/web/source/panels/lib/panel.js b/web/source/panels/lib/panel.js new file mode 100644 index 000000000..168eac7a0 --- /dev/null +++ b/web/source/panels/lib/panel.js @@ -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 . +*/ + +"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(, 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 ; + } else if (oauthState != undefined) { + return "processing oauth..."; + } else { + return ; + } + } + + 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 ( +
+

OAUTH Login:

+
e.preventDefault()}> + + + +
+
+ ); + } +}; \ No newline at end of file diff --git a/web/source/panels/user/basic.js b/web/source/panels/user/basic.js new file mode 100644 index 000000000..6891706e9 --- /dev/null +++ b/web/source/panels/user/basic.js @@ -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 . +*/ + +"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 ( +
+

@{account.username}'s Profile Info

+
+
+ +
+ {headerSrc +
+ + {headerFile ? headerFile.name : ""} +
+
+ +
+
+ +
+ {headerSrc +
+ + {avatarFile ? avatarFile.name : ""} +
+
+ +
+
+ + setDisplayName(e.target.value)} placeHolder="A GoToSocial user"/> +
+
+ +