diff options
Diffstat (limited to 'web/source/panels/user')
| -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 |
6 files changed, 576 insertions, 5 deletions
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; +} |