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/panels/user/basic.js | 137 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 web/source/panels/user/basic.js (limited to 'web/source/panels/user/basic.js') 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"/> +
+
+ +