Pronouns

api/migrations/1704491030749-AddPronounsToUser.ts

@@ -0,0 +1,13 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddPronounsToUser1704491030749 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "user" ADD COLUMN "pronouns" VARCHAR;`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "pronouns";`);
+  }
+}

api/src/users/user.entity.ts

@@ -5,6 +5,7 @@ import { Group } from '../groups/group.entity';
 
 export class UpdateUser {
   description?: string;
+  pronouns?: string;
 }
 
 @Entity()
@@ -23,6 +24,9 @@ export class User {
   @Column({ nullable: true })
   description?: string;
 
+  @Column({ nullable: true })
+  pronouns?: string;
+
   @Column()
   @IsNotEmpty()
   admin: boolean;

frontend/src/components/TextInputWithLabel.tsx

@@ -7,6 +7,7 @@ interface TextInputWithLabelProps {
   required?: boolean;
   disabled?: boolean;
   value?: string;
+  onChange?: (e: string) => void;
   helperText?: React.ReactNode;
 }
 
@@ -18,6 +19,7 @@ export function TextInputWithLabel({
   disabled,
   value,
   helperText,
+  onChange,
 }: TextInputWithLabelProps) {
   return (
     <div>
@@ -31,6 +33,11 @@ export function TextInputWithLabel({
         disabled={disabled}
         value={value}
         helperText={helperText}
+        onChange={(e) => {
+          if (onChange) {
+            onChange(e.target.value);
+          }
+        }}
       />
     </div>
   );

frontend/src/pages/Profile.tsx

@@ -15,8 +15,13 @@ export function ProfilePage() {
   );
 
   return (
-    <div className="container mx-auto flex flex-col gap-3">
-      <h1 className="text-6xl font-bold">{profile.displayName}</h1>
+    <div className="container mx-auto max-w-4xl flex flex-col gap-3">
+      <h1 className="text-6xl font-bold flex flex-row gap-2">
+        <span>{profile.displayName}</span>
+        <span className="italic text-xl">
+          {profile.pronouns ? `(${profile.pronouns})` : null}
+        </span>
+      </h1>
       <h2 className="text-2xl italic">user/{profile.username}</h2>
       {edit && (
         <Link

frontend/src/pages/UserUpdate.tsx

@@ -56,6 +56,7 @@ function CannotBeModifiedHelperText() {
 
 interface EventTargets {
   description: Value<string>;
+  pronouns: Value<string>;
 }
 
 export function UserUpdate() {
@@ -64,6 +65,7 @@ export function UserUpdate() {
   const navigate = useNavigate();
 
   const [description, setDescription] = useState<string | undefined>(undefined);
+  const [pronouns, setPronouns] = useState<string | undefined>(undefined);
 
   const allowUserEdit = canEdit(profile, user?.username);
 
@@ -73,15 +75,23 @@ export function UserUpdate() {
     }
   }, [description, user.description]);
 
+  useEffect(() => {
+    if (pronouns === undefined && user.pronouns) {
+      setPronouns(user.pronouns ?? '');
+    }
+  }, [pronouns, user.pronouns]);
+
   const onSubmit = useCallback(
     async (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       if (token) {
         const eventTargets = e.target as unknown as EventTargets;
         const description = eventTargets.description.value;
+        const pronouns = eventTargets.pronouns.value;
 
         const { error } = await updateUser(token, user.username, {
           description,
+          pronouns,
         });
         if (error) {
           console.error(error);
@@ -113,6 +123,13 @@ export function UserUpdate() {
             disabled={true}
             helperText={<CannotBeModifiedHelperText />}
           />
+          <TextInputWithLabel
+            id="pronouns"
+            name="Pronouns"
+            placeholder="they/them"
+            value={pronouns}
+            onChange={setPronouns}
+          />
           <div>
             <div className="mb-2 block">
               <Label htmlFor="description" value="Description" />

frontend/src/util/v1.d.ts

@@ -39,6 +39,7 @@ export interface components {
       displayName: string;
       username: string;
       description?: string;
+      pronouns?: string;
       admin: boolean;
       groups: components["schemas"]["Group"][];
     };
@@ -49,6 +50,7 @@ export interface components {
     };
     UpdateUser: {
       description?: string;
+      pronouns?: string;
     };
     NewGroup: {
       name: string;