From 857d61e09d4d50c73120571eb0a3a461e18a1bc1 Mon Sep 17 00:00:00 2001 From: Teriuihi Date: Tue, 6 Aug 2024 22:23:35 +0200 Subject: [PATCH] Add staff application form Introduced a new form for staff applications based on the old staff application form. --- src/components/form/data/apply.tsx | 206 +++++++++++++++++++++++++ src/components/form/formData.tsx | 5 + src/components/form/formInterfaces.tsx | 7 +- 3 files changed, 215 insertions(+), 3 deletions(-) create mode 100644 src/components/form/data/apply.tsx diff --git a/src/components/form/data/apply.tsx b/src/components/form/data/apply.tsx new file mode 100644 index 0000000..b7215c4 --- /dev/null +++ b/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') + }) +}; \ No newline at end of file diff --git a/src/components/form/formData.tsx b/src/components/form/formData.tsx index 408c043..84774c0 100644 --- a/src/components/form/formData.tsx +++ b/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[] { diff --git a/src/components/form/formInterfaces.tsx b/src/components/form/formInterfaces.tsx index 5e1f85a..08f4d10 100644 --- a/src/components/form/formInterfaces.tsx +++ b/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" | - "available-days" | "available-time" | "experience" | "why-staff" | "expectations-mod" | "other"; +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"; export interface Step { label: string; name: InputNames; - type: "text" | "email" | "textarea"; + type: "text" | "email" | "textarea" | "date"; min_length: number; max_length: number; required: boolean;