diff --git a/src/assets/forgotPassword.css b/src/assets/forgotPassword.css index 516c8ed..626d244 100644 --- a/src/assets/forgotPassword.css +++ b/src/assets/forgotPassword.css @@ -53,6 +53,12 @@ a { color: #D46136; } +.resetPassword { + color: #D46136; + position: absolute; + +} + #forgotPw { background-color: #D46136; color: #FFFFFF; diff --git a/src/assets/forgotPassword.html b/src/assets/forgotPassword.html new file mode 100644 index 0000000..4e4ae53 --- /dev/null +++ b/src/assets/forgotPassword.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + +
+ +
+
+ +
+

+ Hello! We received a request to change your password for the J-PAL recommendation letter program. +

+ +

+ If you did not make this request, you can ignore this email. +

+ + + +

+ Thank you, +
[asdf] +

+
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/form/CheckboxField.tsx b/src/components/form/CheckboxField.tsx new file mode 100644 index 0000000..11db954 --- /dev/null +++ b/src/components/form/CheckboxField.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Field, FieldProps } from 'formik'; +import { Checkbox, FormControl, FormErrorMessage, FormLabel, Text, Stack } from '@chakra-ui/react'; + +interface CheckboxOption { + label: string; + value: string; +} + +interface CheckboxFieldProps { + fieldName: string; + displayName: string; + isRequired: boolean; + options: CheckboxOption[]; + defaultValue?: string; +} + +const CheckboxField: React.FC = ({ + fieldName, + displayName, + isRequired, + options, +}) => ( + (value ? undefined : 'Required'))} + > + {({ field, form }: FieldProps) => ( + 0), + )} + > + + {displayName || fieldName} + + + + {options.map(({ label, value }) => ( + { + form.setFieldValue(fieldName, field.value === value ? '' : value); + }} + data-testid={`${fieldName}-${value}`} + > + {label} + + ))} + + + {form.errors[fieldName]} + + )} + +); + +export default CheckboxField; diff --git a/src/components/survey/SurveyForm.tsx b/src/components/survey/SurveyForm.tsx index 4b0d8b8..6f07df1 100644 --- a/src/components/survey/SurveyForm.tsx +++ b/src/components/survey/SurveyForm.tsx @@ -5,6 +5,7 @@ import React from 'react'; import { Question, Response } from '../../api/dtos/survey-assignment.dto'; import Form, { FormValues } from '../form/Form'; import MultipleChoiceField from '../form/MultipleChoiceField'; +import CheckboxField from '../form/CheckboxField'; /** * Makes a string safe for use with Formik by removing all periods. @@ -39,7 +40,38 @@ function invalidResponses( return invalid; } +/* Converting yes/no questions to checkboxes */ +function createCheckboxQuestion(questions: Question[]): Question { + const checkboxQuestion: Question = { + question: 'Check off the box if you agree with the question', + options: [], + }; + + questions.forEach((question) => { + if ( + question.options.length === 2 && + question.options.includes('Yes') && + question.options.includes('No') + ) { + // delete the yes/no question + questions.splice(questions.indexOf(question), 1); + + // add title of deleted question to option in checkboxQuestion + checkboxQuestion.options.push(question.question); + } + }); + + return checkboxQuestion; +} + +/* Checks if a question is a checkbox question */ +function isCheckboxQuestion(question: Question): boolean { + return question.question === 'Check off the box if you agree with the question'; +} + function formValuesToResponses(questions: Question[], values: FormValues): Response[] { + const checkboxQuestion = createCheckboxQuestion(questions); + questions.push(checkboxQuestion); const responses = Object.entries(values).map(([formikSafeQuestion, selectedOption]) => { const question = fromFormikSafeFieldName(formikSafeQuestion); if (selectedOption === undefined) { @@ -125,16 +157,29 @@ const SurveyForm: React.FC = ({ width="full" key={question.question} > - ({ label: option, value: option }))} - isRequired - defaultValue={ - savedResponses && - savedResponses.find((r) => r.question === question.question)?.selectedOption - } - /> + {isCheckboxQuestion(question) ? ( + ({ label: option, value: option }))} + isRequired + defaultValue={ + savedResponses && + savedResponses.find((r) => r.question === question.question)?.selectedOption + } + /> + ) : ( + ({ label: option, value: option }))} + isRequired + defaultValue={ + savedResponses && + savedResponses.find((r) => r.question === question.question)?.selectedOption + } + /> + )} ))}