dev(frontend): added pronouns and gender field on signup

frontend/src/api/index.ts

@@ -22,6 +22,7 @@ import type {
   Role,
   RoleApplications,
   RoleInput,
+  UserGender,
   UserResponse,
 } from "../types/api";
 
@@ -39,11 +40,13 @@ export const doSignup = async ({
   degree_name,
   zid,
   starting_year,
+  gender,
 }: {
   name: string;
   degree_name: string;
   zid: string;
   starting_year: number;
+  gender: UserGender;
 }) =>
   API.request<{ token: string }>({
     method: "POST",
@@ -54,6 +57,7 @@ export const doSignup = async ({
       display_name: name,
       degree_starting_year: starting_year,
       degree_name,
+      gender,
     },
   });
 

frontend/src/pages/signup/SignupGenderSelection.tsx

@@ -0,0 +1,17 @@
+import tw from "twin.macro";
+
+import type { ReactNode } from "react";
+import type React from "react";
+
+const Select = tw.select`
+  form-select w-96 rounded-md
+  border-gray-300 shadow-sm
+  transition hocus:border-blue-300 focus:(ring ring-blue-200/50)
+`;
+
+const Label = tw.label`flex flex-col`;
+const LabelText: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <span tw="text-gray-700">{children}</span>
+);
+
+export default Object.assign(Select, { Label, LabelText });

frontend/src/pages/signup/index.tsx

@@ -11,12 +11,28 @@ import Input from "components/Input";
 import { doSignup } from "../../api";
 import { getStore, setStore } from "../../utils";
 
+import Select from "./SignupGenderSelection";
+
+import type { UserGender } from "types/api";
+
+// I had to do it
+/* eslint-disable @typescript-eslint/naming-convention */
+type TFormData = {
+  zid: string;
+  name: string;
+  degree_name: string;
+  starting_year: number;
+  gender: UserGender;
+};
+/* eslint-enable @typescript-eslint/naming-convention */
+
 const Signup = () => {
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<TFormData>({
     zid: "",
     name: getStore("name") || "",
     degree_name: "",
     starting_year: new Date().getFullYear(),
+    gender: "Unspecified",
   });
 
   const navigate = useNavigate();
@@ -99,6 +115,23 @@ const Signup = () => {
               max={new Date().getFullYear() + 10}
             />
           </Input.Label>
+
+          <Select.Label>
+            <Select.LabelText>Gender</Select.LabelText>
+            <Select
+              defaultValue={formData.gender}
+              onChange={(e) => {
+                setFormData({
+                  ...formData,
+                  gender: e.target.value as UserGender, // small hack
+                });
+              }}
+            >
+              <option value="Unspecified">Other / Prefer not to say</option>
+              <option value="Male">Male</option>
+              <option value="Female">Female</option>
+            </Select>
+          </Select.Label>
         </div>
 
         <Button tw="justify-center font-medium" type="submit">

frontend/src/types/api.ts

@@ -185,6 +185,10 @@ export type OrganisationInfo = {
   campaigns: CampaignInfo[];
 };
 
+// Based
+export type UserGender = "Male" | "Female" | "Unspecified";
+
+// Will add ticket to reflect new response
 export type UserResponse = {
   email: string;
   zid: string;