From 94c336fb74c443f664e0923bdcca07910946b8b8 Mon Sep 17 00:00:00 2001 From: Teriuihi Date: Thu, 8 Aug 2024 20:33:15 +0200 Subject: [PATCH] Add dropdown and additional info fields to form steps Updated form interfaces to include optional dropdown and additional info properties. Adjusted form rendering logic to handle these new fields, providing clearer instructions and choices for users. Refined validation messages for consistency and clarity. --- src/components/form/data/apply.tsx | 29 +++++++----- src/components/form/formInterfaces.tsx | 4 +- src/components/form/genericForm.tsx | 65 +++++++++++++++++++------- 3 files changed, 69 insertions(+), 29 deletions(-) diff --git a/src/components/form/data/apply.tsx b/src/components/form/data/apply.tsx index e44a7ae..1572d35 100644 --- a/src/components/form/data/apply.tsx +++ b/src/components/form/data/apply.tsx @@ -34,6 +34,10 @@ export const apply: FormData = { 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: "What is your age?", @@ -134,23 +138,23 @@ export const apply: FormData = { .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'), + .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(), + .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('Discord name is required'), + .required('Please enter your Discord name'), pc_requirements: Yup.string() - .min(2, "Please answer yes or no") - .max(3, "Please answer yes or no") + // .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'), @@ -166,39 +170,40 @@ export const apply: FormData = { .required('Your join date is required, if you\'re not sure enter an estimated date'), avg_time: Yup.number() + .typeError('Please enter a number') .min(0, 'Please enter a positive number') .max(168, 'There are only 168 hours in a week') - .required(), + .required('Please enter the average time you will be available each week'), 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'), + .required('Please enter your 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'), + .required('Please enter your available time'), 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'), + .required('Please enter your staff experience or simply say you don\'t have any'), 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'), + .required('Please enter your plugin experience or simply say you don\'t have any'), 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'), + .required('Please enter your reason for wanting to be a moderator on Altitude'), 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'), + .required('Please enter your expectations of what a moderator does'), other: Yup.string() .max(2000, 'Please provide at most 2000 characters') diff --git a/src/components/form/formInterfaces.tsx b/src/components/form/formInterfaces.tsx index 45e0b7d..d5508fc 100644 --- a/src/components/form/formInterfaces.tsx +++ b/src/components/form/formInterfaces.tsx @@ -11,6 +11,8 @@ export interface Step { min_length: number; max_length: number; required: boolean; + additional_info?: string; + drop_down?: string[] } export interface UserInput { @@ -21,7 +23,7 @@ export type FormData = { steps: Step[]; backend: string; userInput: UserInput; - spec: Yup.Schema + spec: Yup.Schema; title: string; } diff --git a/src/components/form/genericForm.tsx b/src/components/form/genericForm.tsx index 8bdd067..b9d76ea 100644 --- a/src/components/form/genericForm.tsx +++ b/src/components/form/genericForm.tsx @@ -82,22 +82,55 @@ const GenericForm = (formData: FormData) => {
+