Add staff application form

Introduced a new form for staff applications based on the old staff application form.

src/components/form/data/apply.tsx

@@ -0,0 +1,206 @@
+import {FormData} from "../formInterfaces";
+import * as Yup from "yup";
+
+export const apply: FormData = {
+    steps: [
+        {
+            label: "What is your 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?",
+            name: "discord",
+            type: "text",
+            min_length: 2,
+            max_length: 32,
+            required: true,
+        },
+        {
+            label: "Do you meet the minimum pc requirements?",
+            name: "pc_requirements",
+            type: "text",
+            min_length: 2,
+            max_length: 3,
+            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: "text",
+            min_length: 0,
+            max_length: 16,
+            required: false,
+        },
+        {
+            label: "When did you join Altitude",
+            name: "join_date",
+            type: "date",
+            min_length: 4,
+            max_length: 32,
+            required: true,
+        },
+        {
+            label: "On average, how many hours per week are you available to moderate Altitude?",
+            name: "avg_time",
+            type: "text",
+            min_length: 1,
+            max_length: 2,
+            required: true,
+        },
+        {
+            label: "Which days are you normally able to come on?",
+            name: "available_days",
+            type: "textarea",
+            min_length: 6,
+            max_length: 128,
+            required: true,
+        },
+        {
+            label: "What time of the day are you normally online?",
+            name: "available_time",
+            type: "textarea",
+            min_length: 3,
+            max_length: 256,
+            required: true,
+        },
+        {
+            label: "Do you have any previous experience being staff?",
+            name: "staff_experience",
+            type: "textarea",
+            min_length: 2,
+            max_length: 2000,
+            required: true,
+        },
+        {
+            label: "Which server plugins do you have experience with?",
+            name: "plugin_experience",
+            type: "textarea",
+            min_length: 2,
+            max_length: 2000,
+            required: true,
+        },
+        {
+            label: "Why are you interested in being a moderator on Altitude?",
+            name: "why_staff",
+            type: "textarea",
+            min_length: 2,
+            max_length: 2000,
+            required: true,
+        },
+        {
+            label: "What do you believe are the expectations of a moderator?",
+            name: "expectations_mod",
+            type: "textarea",
+            min_length: 2,
+            max_length: 2000,
+            required: true,
+        },
+        {
+            label: "You may share anything else you wish here.",
+            name: "other",
+            type: "textarea",
+            min_length: 2,
+            max_length: 2000,
+            required: false,
+        },
+    ],
+    backend: 'https://forms-backend.alttd.com/api/apply/staffApplication',
+    userInput: {username: '', email: '', discord: '', pc_requirements: ''
+    , age: '', pronoun: '', join_date: '', avg_time: '', available_days: '', available_time: '', staff_experience: ''
+    , plugin_experience: '', why_staff: '', expectations_mod: '', 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('Username is required'),
+
+        email: Yup.string()
+            .email('Invalid email')
+            .min(3, 'Email should be at least 3 characters')
+            .max(254, 'Email should not exceed 254 characters')
+            .required(),
+
+        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('Discord name is required'),
+
+        pc_requirements: Yup.string()
+            .min(2, "Please answer yes or no")
+            .max(3, "Please answer yes or no")
+            .matches(/(yes|no)$/i, 'Yes or no')
+            .required('An answer is required'),
+
+        age: Yup.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'),
+
+        join_date: Yup.date()
+            .required('Your join date is required, if you\'re not sure enter an estimated date'),
+
+        avg_time: Yup.number()
+            .min(0, 'Please enter a positive number')
+            .max(168, 'There are only 168 hours in a week')
+            .required(),
+
+        available_days: Yup.string()
+                    .min(6, 'Please provide at least 6 characters')
+                    .max(128, 'Please provide at most 128 characters')
+                    .required('Available days are required'),
+
+        available_time: Yup.string()
+            .min(3, 'Please provide at least 3 characters')
+            .max(256, 'Please provide at most 256 characters')
+            .required('Available time is required'),
+
+        staff_experience: Yup.string()
+            .min(2, 'Please provide your experience as staff, if you don\'t have any you can say that instead')
+            .max(2000, 'Please provide at most 2000 characters')
+            .required('Staff experience is required'),
+
+        plugin_experience: Yup.string()
+                    .min(2, 'Please provide your experience with moderation plugins, if you don\'t have any you can say that instead')
+                    .max(2000, 'Please provide at most 2000 characters')
+                    .required('Plugin experience is required'),
+
+        why_staff: Yup.string()
+                    .min(2, 'Please provide your reason for wanting to be a moderator')
+                    .max(2000, 'Please provide at most 2000 characters')
+                    .required('Reason for wanting to be a moderator is required'),
+
+        expectations_mod: Yup.string()
+                    .min(2, 'Please provide your expectations of a moderator')
+                    .max(2000, 'Please provide at most 2000 characters')
+                    .required('Expectations of a moderator is required'),
+
+        other: Yup.string()
+                    .max(2000, 'Please provide at most 2000 characters')
+    })
+};

src/components/form/formData.tsx

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

src/components/form/formInterfaces.tsx

@@ -1,12 +1,13 @@
 import * as Yup from "yup";
 
-type InputNames = "username" | "email" | "question" | "discord" | "age" | "pronoun" | "join-date" | "avg-time" |
+type InputNames = "username" | "email" | "question" | "discord" | "pc_requirements" | "age" | "pronoun" | "join_date" |
-    "available-days" | "available-time" | "experience" | "why-staff" | "expectations-mod" | "other";
+    "avg_time" | "available_days" | "available_time" | "staff_experience" | "plugin_experience" | "why_staff" |
+    "expectations_mod" | "other";
 
 export interface Step {
     label: string;
     name: InputNames;
-    type: "text" | "email" | "textarea";
+    type: "text" | "email" | "textarea" | "date";
     min_length: number;
     max_length: number;
     required: boolean;