Add event application form

Implemented a new event application form with validations and necessary fields such as username, email, and event experience. Incorporated the form into the home page with a navigation link and updated form interfaces and data configurations.

src/components/form/data/event_apply.tsx

@@ -0,0 +1,140 @@
+import {FormData} from "../formInterfaces";
+import * as Yup from "yup";
+
+export const event_apply: FormData = {
+    steps: [
+        {
+            label: "What is your Minecraft username?",
+            name: "username",
+            type: "text",
+            min_length: 3,
+            max_length: 16,
+            required: true,
+        },
+        {
+            label: "What is your email?",
+            name: "email",
+            type: "email",
+            min_length: 3,
+            max_length: 254,
+            required: true,
+        },
+        {
+            label: "What is your Discord username?",
+            name: "discord",
+            type: "text",
+            min_length: 2,
+            max_length: 32,
+            required: true,
+        },
+        {
+            label: "What is your age?",
+            name: "age",
+            type: "text",
+            min_length: 1,
+            max_length: 3,
+            required: true,
+        },
+        {
+            label: "What is your preferred pronoun?",
+            name: "pronoun",
+            type: "dropdown",
+            min_length: 0,
+            max_length: 16,
+            required: true,
+            drop_down: ["They/them", "She/her", "He/him", ""],
+        },
+        {
+            label: "On average, how many hours per week are you available to help with events?",
+            name: "avg_time",
+            type: "text",
+            min_length: 1,
+            max_length: 2,
+            required: true,
+        },
+        {
+            label: "Do you have any previous experience running events of any kind?",
+            name: "event_experience",
+            type: "textarea",
+            min_length: 2,
+            max_length: 2000,
+            required: true,
+        },
+        {
+            label: "Are you able to use voice chat on Discord",
+            name: "discord_vc",
+            type: "dropdown",
+            min_length: 2,
+            max_length: 3,
+            required: true,
+            additional_info: "Use voice chat in Discord with reasonable audio quality\n" +
+                "Take screenshots through your pc (normally f2 in minecraft)\n" +
+                "Record your screen through your pc at 20fps+ and 720p+ at normal Minecraft settings (with free programs like OBS)\n",
+            drop_down: ["Yes", "No", ""],
+        },
+        {
+            label: "You may share anything else you wish here.",
+            name: "other",
+            type: "textarea",
+            min_length: 2,
+            max_length: 2000,
+            required: false,
+        },
+    ],
+    backend: `${process.env.REACT_APP_BACKEND_BASE_URL}/api/apply/staffApplication`,
+    userInput: {
+        username: '', email: '', discord: ''
+        , age: '', pronoun: '', avg_time: '', event_experience: ''
+        , discord_vc: '', other: ''
+    },
+    spec: Yup.object().shape({
+        username: Yup.string()
+            .min(3, 'Username should be at least 3 characters')
+            .max(16, 'Username should not exceed 16 characters')
+            .matches(/^[a-zA-Z0-9_]*$/, 'Username should only include alphanumeric characters and underscore')
+            .required('Please enter your username'),
+
+        email: Yup.string()
+            .email('Invalid email')
+            .min(3, 'Email should be at least 3 characters')
+            .max(254, 'Email should not exceed 254 characters')
+            .required('Please enter your email'),
+
+        discord: Yup.string()
+            .min(2, 'Discord name should be at least 2 characters')
+            .max(32, 'Discord name should be at most 32 characters')
+            .matches(/^(?!.*\.\.)([a-z0-9._]{2,32})$/, 'Please enter a valid Discord name')
+            .required('Please enter your Discord name'),
+
+        age: Yup.number()
+            .typeError('Input must be a number')
+            .integer('Please enter a whole number')
+            .min(0, 'Please enter a valid age')
+            .max(999, 'We do not accept players older than 999 years old sorry!')
+            .required('You are required to fill out your age'),
+
+        pronoun: Yup.string()
+            .max(16, 'Pronouns can\'t be longer than 16 characters'),
+
+        avg_time: Yup.number()
+            .typeError('Please enter a number')
+            .integer('Please enter a whole number')
+            .min(0, 'Please enter a positive number')
+            .max(168, 'There are only 168 hours in a week')
+            .required('Please enter the average time you will be available each week'),
+
+        event_experience: Yup.string()
+            .min(2, 'Please provide your experience with running/working on events, if you don\'t have any you can say that instead')
+            .max(2000, 'Please provide at most 2000 characters')
+            .required('Please enter your event experience or simply say you don\'t have any'),
+
+        discord_vc: Yup.string()
+            .matches(/(yes|no)$/i, 'Yes or no')
+            .required('An answer is required'),
+
+        other: Yup.string()
+            .max(2000, 'Please provide at most 2000 characters')
+    }),
+    title: "Event Application",
+    backendFormName: "EventApplication",
+};

src/components/form/formData.tsx

@@ -1,6 +1,7 @@
 import {FormProperties} from "./formInterfaces";
 import {contact} from "./data/contact";
 import {apply} from "./data/apply";
+import {event_apply} from "./data/event_apply";
 
 const formProperties: FormProperties[] = [
     {
@@ -11,6 +12,10 @@ const formProperties: FormProperties[] = [
         path: 'apply',
         formData: apply
     },
+    {
+        path: 'event-apply',
+        formData: event_apply
+    },
 ]
 
 export function getFormProperties(): FormProperties[] {

src/components/form/formInterfaces.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 type InputNames = "username" | "email" | "question" | "discord" | "pc_requirements" | "age" | "pronoun" | "join_date" |
     "avg_time" | "available_days" | "available_time" | "staff_experience" | "plugin_experience" | "why_staff" |
-    "expectations_mod" | "other";
+    "expectations_mod" | "event_experience" | "discord_vc" | "other";
 
 export interface Step {
     label: string;

src/components/home/home.tsx

@@ -12,6 +12,7 @@ const Home: FunctionComponent = () => {
                 <h1>Welcome to the Altitude forms page</h1>
                 <h2><a href="/contact">Contact us.</a></h2>
                 <h2><a href="/apply">Apply for staff.</a></h2>
+                <h2><a href="/event-apply">Apply for events.</a></h2>
             </header>
         </div>
     );