basic profile change submission

web/source/settings-panel/lib/api/index.js

@@ -24,7 +24,7 @@ const { APIError } = require("../errors");
 const { setInstanceInfo } = require("../../redux/reducers/instances").actions;
 const oauth = require("../../redux/reducers/oauth").actions;
 
-function apiCall(method, route, payload) {
+function apiCall(method, route, payload, type="json") {
 	return function (dispatch, getState) {
 		const state = getState();
 		let base = state.oauth.instance;
@@ -36,14 +36,22 @@ function apiCall(method, route, payload) {
 			url.pathname = route;
 			let body;
 	
-			if (payload != undefined) {
-				body = JSON.stringify(payload);
-			}
-	
 			let headers = {
 				"Accept": "application/json",
-				"Content-Type": "application/json"
 			};
+
+			if (payload != undefined) {
+				if (type == "json") {
+					headers["Content-Type"] = "application/json";
+					body = JSON.stringify(payload);
+				} else if (type == "form") {
+					const formData = new FormData();
+					Object.entries(payload).forEach(([key, val]) => {
+						formData.set(key, val);
+					});
+					body = formData;
+				}
+			}
 	
 			if (auth != undefined) {
 				headers["Authorization"] = auth;

web/source/settings-panel/lib/api/user.js

@@ -32,6 +32,16 @@ module.exports = function({apiCall}) {
 					return dispatch(user.setAccount(account));
 				});
 			};
-		}	
+		},
+		updateAccount: function updateAccount(newAccount) {
+			return function (dispatch, _getSate) {
+				return Promise.try(() => {
+					return dispatch(apiCall("PATCH", "/api/v1/accounts/update_credentials", newAccount, "form"));
+				}).then((account) => {
+					console.log(account);
+					return dispatch(user.setAccount(account));
+				});
+			};
+		}
 	};
 };

web/source/settings-panel/style.css

@@ -176,3 +176,97 @@ input, select, textarea {
 		rgb(70, 79, 88) 20px
 	) !important;
 }
+
+.user-profile {
+	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;
+	}
+}

web/source/settings-panel/user/profile.js

@@ -25,39 +25,37 @@ const { useErrorHandler } = require("react-error-boundary");
 
 const Submit = require("../components/submit");
 
+const api = require("../lib/api");
+
 module.exports = function UserProfile() {
+	const dispatch = Redux.useDispatch();
 	const account = Redux.useSelector(state => state.user.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]));
+		// setHeaderSrc(URL.createObjectURL(e.target.files[0]));
 	};
 
 	const avatarOnChange = (e) => {
 		setAvatarFile(e.target.files[0]);
-		setAvatarSrc(URL.createObjectURL(e.target.files[0]));
+		// setAvatarSrc(URL.createObjectURL(e.target.files[0]));
 	};
 
 	const submit = (e) => {
@@ -66,30 +64,23 @@ module.exports = function UserProfile() {
 		setStatus("PATCHing");
 		setError("");
 		return Promise.try(() => {
-			let formDataInfo = new FormData();
+			let payload = {
+				display_name: displayName,
+				note: bio,
+				locked: locked
+			};
 
 			if (headerFile) {
-				formDataInfo.set("header", headerFile);
+				payload.header = headerFile;
 			}
 
 			if (avatarFile) {
-				formDataInfo.set("avatar", avatarFile);
+				payload.avatar = avatarFile;
 			}
 
-			formDataInfo.set("display_name", displayName);
+			return dispatch(api.user.updateAccount(payload));
-			formDataInfo.set("note", bio);
+		}).then(() => {
-			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("");
@@ -97,45 +88,43 @@ module.exports = function UserProfile() {
 	};
 
 	return (
-		<section className="basic">
+		<div className="user-profile">
 			<h1>@{account.username}&apos;s Profile Info</h1>
-			<form>
+			<div className="labelinput">
-				<div className="labelinput">
+				<label htmlFor="header">Header</label>
-					<label htmlFor="header">Header</label>
+				<div className="border">
-					<div className="border">
+					<img className="headerpreview" src={account.header} alt={account.header ? `header image for ${account.username}` : "None set"}/>
-						<img className="headerpreview" src={headerSrc} alt={headerSrc ? `header image for ${account.username}` : "None set"}/>
+					<div>
-						<div>
+						<label htmlFor="header" className="file-input button">Browse…</label>
-							<label htmlFor="header" className="file-input button">Browse…</label>
+						<span>{headerFile ? headerFile.name : ""}</span>
-							<span>{headerFile ? headerFile.name : ""}</span>
-						</div>
 					</div>
-					<input className="hidden" id="header" type="file" accept="image/*" onChange={headerOnChange}/>
 				</div>
-				<div className="labelinput">
+				<input className="hidden" id="header" type="file" accept="image/*" onChange={headerOnChange}/>
-					<label htmlFor="avatar">Avatar</label>
+			</div>
-					<div className="border">
+			<div className="labelinput">
-						<img className="avatarpreview" src={avatarSrc} alt={headerSrc ? `avatar image for ${account.username}` : "None set"}/>
+				<label htmlFor="avatar">Avatar</label>
-						<div>
+				<div className="border">
-							<label htmlFor="avatar" className="file-input button">Browse…</label>
+					<img className="avatarpreview" src={account.avatar} alt={account.avatar ? `avatar image for ${account.username}` : "None set"}/>
-							<span>{avatarFile ? avatarFile.name : ""}</span>
+					<div>
-						</div>
+						<label htmlFor="avatar" className="file-input button">Browse…</label>
+						<span>{avatarFile ? avatarFile.name : ""}</span>
 					</div>
-					<input className="hidden" id="avatar" type="file" accept="image/*" onChange={avatarOnChange}/>
 				</div>
-				<div className="labelinput">
+				<input className="hidden" id="avatar" type="file" accept="image/*" onChange={avatarOnChange}/>
-					<label htmlFor="displayname">Display Name</label>
+			</div>
-					<input id="displayname" type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="A GoToSocial user"/>
+			<div className="labelinput">
-				</div>
+				<label htmlFor="displayname">Display Name</label>
-				<div className="labelinput">
+				<input id="displayname" type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="A GoToSocial user"/>
-					<label htmlFor="bio">Bio</label>
+			</div>
-					<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 className="labelinput">
-				</div>
+				<label htmlFor="bio">Bio</label>
-				<div className="labelcheckbox">
+				<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."/>
-					<label htmlFor="locked">Manually approve follow requests</label>
+			</div>
-					<input id="locked" type="checkbox" checked={locked} onChange={(e) => setLocked(e.target.checked)}/>
+			<div className="labelcheckbox">
-				</div>
+				<label htmlFor="locked">Manually approve follow requests</label>
-				<Submit onClick={submit} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg}/>
+				<input id="locked" type="checkbox" checked={locked} onChange={(e) => setLocked(e.target.checked)}/>
-			</form>
+			</div>
-		</section>
+			<Submit onClick={submit} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg}/>
+		</div>
 	);
 };