[feature] Add image descriptions for default avatar + header; don't allow editing default desc (#3473)v0.17.1

2 files changed, 27 insertions, 11 deletions

diff --git a/web/source/settings/views/user/posts/index.tsx b/web/source/settings/views/user/posts/index.tsx
index 4d7669391..085fd7708 100644
--- a/web/source/settings/views/user/posts/index.tsx
+++ b/web/source/settings/views/user/posts/index.tsx
@@ -20,7 +20,7 @@
 import React from "react";
 import { useVerifyCredentialsQuery } from "../../../lib/query/oauth";
 import Loading from "../../../components/loading";
-import { Error } from "../../../components/error";
+import { Error as ErrorC } from "../../../components/error";
 import BasicSettings from "./basic-settings";
 import InteractionPolicySettings from "./interaction-policy-settings";
 
@@ -38,7 +38,11 @@ export default function PostSettings() {
 	}
 
 	if (isError) {
-		return <Error error={error} />;
+		return <ErrorC error={error} />;
+	}
+
+	if (!account) {
+		return <ErrorC error={new Error("account was undefined")} />;
 	}
 
 	return (
diff --git a/web/source/settings/views/user/profile.tsx b/web/source/settings/views/user/profile.tsx
index 4e5fb627f..ed33fe3ee 100644
--- a/web/source/settings/views/user/profile.tsx
+++ b/web/source/settings/views/user/profile.tsx
@@ -45,6 +45,7 @@ import { useAccountThemesQuery } from "../../lib/query/user";
 import { useUpdateCredentialsMutation } from "../../lib/query/user";
 import { useVerifyCredentialsQuery } from "../../lib/query/oauth";
 import { useInstanceV1Query } from "../../lib/query/gts-api";
+import { Account } from "../../lib/types/account";
 
 export default function UserProfile() {
 	return (
@@ -55,7 +56,11 @@ export default function UserProfile() {
 	);
 }
 
-function UserProfileForm({ data: profile }) {
+interface UserProfileFormProps {
+	data: Account;
+}
+
+function UserProfileForm({ data: profile }: UserProfileFormProps) {
 	/*
 		User profile update form keys
 		- bool bot
@@ -132,6 +137,9 @@ function UserProfileForm({ data: profile }) {
 		}
 	});
 
+	const noAvatarSet = !profile.avatar_media_id;
+	const noHeaderSet = !profile.header_media_id;
+
 	return (
 		<form className="user-profile" onSubmit={submitForm}>
 			<h1>Profile</h1>
@@ -145,33 +153,37 @@ function UserProfileForm({ data: profile }) {
 					role={profile.role}
 				/>
 
-				<div className="file-input-with-image-description">
+				<fieldset className="file-input-with-image-description">
+					<legend>Header</legend>
 					<FileInput
-						label="Header"
+						label="Upload file"
 						field={form.header}
 						accept="image/png, image/jpeg, image/webp, image/gif"
 					/>
 					<TextInput
 						field={form.headerDescription}
-						label="Header image description"
+						label="Image description; only settable if not using default header"
 						placeholder="A green field with pink flowers."
 						autoCapitalize="sentences"
+						disabled={noHeaderSet && !form.header.value}
 					/>
-				</div>
+				</fieldset>
 				
-				<div className="file-input-with-image-description">
+				<fieldset className="file-input-with-image-description">
+					<legend>Avatar</legend>
 					<FileInput
-						label="Avatar (1:1 images look best)"
+						label="Upload file (1:1 images look best)"
 						field={form.avatar}
 						accept="image/png, image/jpeg, image/webp, image/gif"
 					/>
 					<TextInput
 						field={form.avatarDescription}
-						label="Avatar image description"
+						label="Image description; only settable if not using default avatar"
 						placeholder="A cute drawing of a smiling sloth."
 						autoCapitalize="sentences"
+						disabled={noAvatarSet && !form.avatar.value}
 					/>
-				</div>
+				</fieldset>
 
 				<div className="theme">
 					<div>