diff options
Diffstat (limited to 'web/source/panels')
| -rw-r--r-- | web/source/panels/admin/auth.js | 96 | ||||
| -rw-r--r-- | web/source/panels/admin/index.js | 39 | ||||
| -rw-r--r-- | web/source/panels/admin/style.css | 35 | ||||
| -rw-r--r-- | web/source/panels/base.css | 63 | ||||
| -rw-r--r-- | web/source/panels/lib/oauth.js | 221 | ||||
| -rw-r--r-- | web/source/panels/lib/panel.js | 134 | ||||
| -rw-r--r-- | web/source/panels/user/basic.js | 137 | ||||
| -rw-r--r-- | web/source/panels/user/index.js | 41 | ||||
| -rw-r--r-- | web/source/panels/user/languages.js | 98 | ||||
| -rw-r--r-- | web/source/panels/user/posts.js | 107 | ||||
| -rw-r--r-- | web/source/panels/user/security.js | 80 | ||||
| -rw-r--r-- | web/source/panels/user/style.css | 118 |
12 files changed, 998 insertions, 171 deletions
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 <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> - ); -};
\ 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 <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"));
\ 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 <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; -}
\ 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 <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; +} 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 <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 + }; +}; 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 <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> + ); + } +};
\ 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 <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> + ); +}; diff --git a/web/source/panels/user/index.js b/web/source/panels/user/index.js index 7adc320d8..bb8b263d6 100644 --- a/web/source/panels/user/index.js +++ b/web/source/panels/user/index.js @@ -22,10 +22,41 @@ const Promise = require("bluebird"); const React = require("react"); const ReactDom = require("react-dom"); -// require("./style.css"); - -function App() { - return "hello world - user panel"; +const createPanel = require("../lib/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"));
\ No newline at end of file +createPanel("GoToSocial User Panel", ["read write"], UserPanel);
\ No newline at end of file diff --git a/web/source/panels/user/languages.js b/web/source/panels/user/languages.js new file mode 100644 index 000000000..c20e08426 --- /dev/null +++ b/web/source/panels/user/languages.js @@ -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>; +}; diff --git a/web/source/panels/user/posts.js b/web/source/panels/user/posts.js new file mode 100644 index 000000000..e4ceae617 --- /dev/null +++ b/web/source/panels/user/posts.js @@ -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> + ); +}; diff --git a/web/source/panels/user/security.js b/web/source/panels/user/security.js new file mode 100644 index 000000000..f5925083d --- /dev/null +++ b/web/source/panels/user/security.js @@ -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> + ); +}; diff --git a/web/source/panels/user/style.css b/web/source/panels/user/style.css new file mode 100644 index 000000000..021b1816e --- /dev/null +++ b/web/source/panels/user/style.css @@ -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; +} |