diff options
Diffstat (limited to 'web/source/settings-panel/user')
| -rw-r--r-- | web/source/settings-panel/user/profile.js | 113 | ||||
| -rw-r--r-- | web/source/settings-panel/user/settings.js | 140 |
2 files changed, 253 insertions, 0 deletions
diff --git a/web/source/settings-panel/user/profile.js b/web/source/settings-panel/user/profile.js new file mode 100644 index 000000000..7cf3a7b52 --- /dev/null +++ b/web/source/settings-panel/user/profile.js @@ -0,0 +1,113 @@ +/* + 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 Redux = require("react-redux"); + +const Submit = require("../components/submit"); + +const api = require("../lib/api"); +const user = require("../redux/reducers/user").actions; +const submit = require("../lib/submit"); + +const { formFields } = require("../components/form-fields"); + +const { + TextInput, + TextArea, + Checkbox, + File +} = formFields(user.setProfileVal, (state) => state.user.profile); + +module.exports = function UserProfile() { + const dispatch = Redux.useDispatch(); + const account = Redux.useSelector(state => state.user.profile); + const instance = Redux.useSelector(state => state.instances.current); + + const allowCustomCSS = instance.configuration.accounts.allow_custom_css; + + const [errorMsg, setError] = React.useState(""); + const [statusMsg, setStatus] = React.useState(""); + + const saveProfile = submit( + () => dispatch(api.user.updateProfile()), + {setStatus, setError} + ); + + return ( + <div className="user-profile"> + <h1>Profile</h1> + <div className="overview"> + <div className="profile"> + <div className="headerimage"> + <img className="headerpreview" src={account.header} alt={account.header ? `header image for ${account.username}` : "None set"} /> + </div> + <div className="basic"> + <div id="profile-basic-filler2"></div> + <span className="avatar"><img className="avatarpreview" src={account.avatar} alt={account.avatar ? `avatar image for ${account.username}` : "None set"} /></span> + <div className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</div> + <div className="username"><span>@{account.username}</span></div> + </div> + </div> + <div className="files"> + <div> + <h3>Header</h3> + <File + id="header" + fileType="image/*" + /> + </div> + <div> + <h3>Avatar</h3> + <File + id="avatar" + fileType="image/*" + /> + </div> + </div> + </div> + <TextInput + id="display_name" + name="Name" + placeHolder="A GoToSocial user" + /> + <TextArea + id="source.note" + name="Bio" + placeHolder="Just trying out GoToSocial, my pronouns are they/them and I like sloths." + /> + <Checkbox + id="locked" + name="Manually approve follow requests? " + /> + { !allowCustomCSS ? null : + <TextArea + id="custom_css" + name="Custom CSS" + className="monospace" + > + <a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about custom profile CSS (opens in a new tab)</a> + </TextArea> + } + <Submit onClick={saveProfile} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg} /> + </div> + ); +};
\ No newline at end of file diff --git a/web/source/settings-panel/user/settings.js b/web/source/settings-panel/user/settings.js new file mode 100644 index 000000000..ccb3e911d --- /dev/null +++ b/web/source/settings-panel/user/settings.js @@ -0,0 +1,140 @@ +/* + 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 Redux = require("react-redux"); + +const api = require("../lib/api"); +const user = require("../redux/reducers/user").actions; +const submit = require("../lib/submit"); + +const Languages = require("../components/languages"); +const Submit = require("../components/submit"); + +const { + Checkbox, + Select, +} = require("../components/form-fields").formFields(user.setSettingsVal, (state) => state.user.settings); + +module.exports = function UserSettings() { + const dispatch = Redux.useDispatch(); + + const [errorMsg, setError] = React.useState(""); + const [statusMsg, setStatus] = React.useState(""); + + const updateSettings = submit( + () => dispatch(api.user.updateSettings()), + {setStatus, setError} + ); + + return ( + <> + <div className="user-settings"> + <h1>Post settings</h1> + <Select id="source.language" name="Default post language" options={ + <Languages/> + }> + </Select> + <Select id="source.privacy" name="Default post privacy" options={ + <> + <option value="private">Private / followers-only</option> + <option value="unlisted">Unlisted</option> + <option value="public">Public</option> + </> + }> + <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> + </Select> + <Select id="source.status_format" name="Default post format" options={ + <> + <option value="plain">Plain (default)</option> + <option value="markdown">Markdown</option> + </> + }> + <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> + </Select> + <Checkbox + id="source.sensitive" + name="Mark my posts as sensitive by default" + /> + + <Submit onClick={updateSettings} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/> + </div> + <div> + <PasswordChange/> + </div> + </> + ); +}; + +function PasswordChange() { + const dispatch = Redux.useDispatch(); + + 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(""); + + function changePassword() { + if (newPassword !== newPasswordConfirm) { + setError("New password and confirm new password did not match!"); + return; + } + + setStatus("PATCHing"); + setError(""); + return Promise.try(() => { + let data = { + old_password: oldPassword, + new_password: newPassword + }; + return dispatch(api.apiCall("POST", "/api/v1/user/password_change", data, "form")); + }).then(() => { + setStatus("Saved!"); + setOldPassword(""); + setNewPassword(""); + setNewPasswordConfirm(""); + }).catch((e) => { + setError(e.message); + setStatus(""); + }); + } + + return ( + <> + <h1>Change password</h1> + <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={changePassword} label="Save new password" errorMsg={errorMsg} statusMsg={statusMsg}/> + </> + ); +}
\ No newline at end of file |