From 325b4a2b4a1dc2fba6a72f0a10dc88b98f57f05c Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 24 Jul 2024 10:40:56 +0200
Subject: [feature] Allow user to set "bot" flag; show bot icon on profile
 (#3135)

* [feature] Allow user to set "bot" flag; show bot icon on profile

* tweak

* update customs
---
 web/source/settings/components/profile.tsx | 22 +++++++++++++++++++---
 web/source/settings/style.css              | 30 +++++++++++++++++++++---------
 web/source/settings/views/user/profile.tsx | 15 +++++++++++----
 3 files changed, 51 insertions(+), 16 deletions(-)

(limited to 'web/source/settings')

diff --git a/web/source/settings/components/profile.tsx b/web/source/settings/components/profile.tsx
index 24cb3c4c2..ee50a6d33 100644
--- a/web/source/settings/components/profile.tsx
+++ b/web/source/settings/components/profile.tsx
@@ -19,7 +19,7 @@
 
 import React from "react";
 
-export default function FakeProfile({ avatar, header, display_name, username, role }) {
+export default function FakeProfile({ avatar, header, display_name, bot, username, role }) {
 	return ( // Keep in sync with web/template/profile.tmpl
 		<div className="profile">
 			<div className="profile-header">
@@ -35,8 +35,24 @@ export default function FakeProfile({ avatar, header, display_name, username, ro
 					<dl className="namerole">
 						<dt className="sr-only">Display name</dt>
 						<dd className="displayname text-cutoff">{display_name.trim().length > 0 ? display_name : username}</dd>
-						<dt className="sr-only">Username</dt>
-						<dd className="username text-cutoff">@{username}</dd>
+						<div className="bot-username-wrapper">
+							{ bot && <>
+								<dt className="sr-only">Bot account</dt>
+								<dd>
+									<span className="sr-only">true</span>
+									<div
+										className="bot-legend-wrapper"
+										aria-hidden="true"
+										title="This is a bot account."
+									>
+										<i className="bot-icon fa fa-microchip"></i>
+										<span className="bot-legend">bot</span>
+									</div>
+								</dd>
+							</>}
+							<dt className="sr-only">Username</dt>
+							<dd className="username text-cutoff">@{username}</dd>
+						</div>
 						<dt className="sr-only">Role</dt>
 						{
 							(role && role.name != "user") ?
diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 1cf723754..9650f7466 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -445,22 +445,34 @@ section.with-sidebar > form {
 		}
 	}
 
-	.fields {
+	.theme, .form-field.radio {
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
-		
-		.entry {
+	}
+
+	fieldset {
+		margin: 0;
+		padding: 0.5rem 1rem 1rem 1rem;
+		max-width: fit-content;
+		border: 0.1rem solid var(--gray1);
+		border-radius: 0.1rem;
+
+		>legend {
+			font-weight: bold;
+		}
+
+		.fields {
 			display: flex;
+			flex-direction: column;
 			gap: 0.5rem;
+			
+			.entry {
+				display: flex;
+				gap: 0.5rem;
+			}
 		}
 	}
-
-	.theme, .form-field.radio {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
 }
 
 .migration-details {
diff --git a/web/source/settings/views/user/profile.tsx b/web/source/settings/views/user/profile.tsx
index f4088b353..6d476f80f 100644
--- a/web/source/settings/views/user/profile.tsx
+++ b/web/source/settings/views/user/profile.tsx
@@ -130,6 +130,7 @@ function UserProfileForm({ data: profile }) {
 					avatar={form.avatar.previewValue ?? profile.avatar}
 					header={form.header.previewValue ?? profile.header}
 					display_name={form.displayName.value ?? profile.username}
+					bot={profile.bot}
 					username={profile.username}
 					role={profile.role}
 				/>
@@ -186,6 +187,10 @@ function UserProfileForm({ data: profile }) {
 					Learn more about these settings (opens in a new tab)
 				</a>
 			</div>
+			<Checkbox
+				field={form.bot}
+				label="Mark as bot account; this indicates to other users that this is an automated account"
+			/>
 			<TextInput
 				field={form.displayName}
 				label="Display name"
@@ -200,10 +205,12 @@ function UserProfileForm({ data: profile }) {
 				autoCapitalize="sentences"
 				rows={8}
 			/>
-			<b>Profile fields</b>
-			<ProfileFields
-				field={form.fields}
-			/>
+			<fieldset>
+				<legend>Profile fields</legend>
+				<ProfileFields
+					field={form.fields}
+				/>
+			</fieldset>
 
 			<div className="form-section-docs">
 				<h3>Visibility and privacy</h3>
-- 
cgit v1.2.3