Skip to content

Commit 8d1177d

Browse files
collinprestoncollinpreston
authored
4244: no error message is shown when education level is not specified in additional details modal (#2233)
* hold * hold * change password form updates * More updates to password change form * Change email form corrected * Lots of profile form updates * formatting * Flow and format * Remove unused import * Format * Update default values * fmt * flow * flow * flow * Update var name * Repair tests * Add field titles * Update title * Remove istouched * Reduce yup logic * old -> current password label * Lots of small updates * Repair test * Flow * test pass
1 parent f527688 commit 8d1177d

21 files changed

+499
-431
lines changed

‎frontend/public/src/components/forms/AddlProfileFieldsForm.js

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// @flow
22
import React from "react"
33
import { Formik, Form } from "formik"
4+
import { ConnectedFocusError } from "focus-formik-error"
45
import * as yup from "yup"
56

67
import {
7-
ProfileFields,
8+
GenderAndDOBProfileFields,
89
AddlProfileFields,
910
profileValidation,
10-
addlProfileFieldsValidation,
11-
requireLearnerTypeFields
11+
addlProfileFieldsValidation
1212
} from "./ProfileFormFields"
1313

1414
import type { User } from "../../flow/authTypes"
@@ -23,7 +23,31 @@ const getInitialValues = (user: User) => ({
2323
name: user.name,
2424
email: user.email,
2525
legal_address: user.legal_address,
26-
user_profile: user.user_profile
26+
user_profile: {
27+
gender: (user.user_profile && user.user_profile.gender) || "",
28+
addl_field_flag: user.user_profile && user.user_profile.addl_field_flag,
29+
company: (user.user_profile && user.user_profile.company) || "",
30+
company_size:
31+
(user.user_profile && user.user_profile.company_size) || undefined,
32+
highest_education:
33+
(user.user_profile && user.user_profile.highest_education) || "",
34+
industry: (user.user_profile && user.user_profile.industry) || "",
35+
job_function: (user.user_profile && user.user_profile.job_function) || "",
36+
job_title: (user.user_profile && user.user_profile.job_title) || "",
37+
leadership_level:
38+
(user.user_profile && user.user_profile.leadership_level) || "",
39+
year_of_birth: (user.user_profile && user.user_profile.year_of_birth) || "",
40+
years_experience:
41+
(user.user_profile && user.user_profile.years_experience) || undefined,
42+
type_is_professional:
43+
(user.user_profile && user.user_profile.type_is_professional) || false,
44+
type_is_student:
45+
(user.user_profile && user.user_profile.type_is_student) || false,
46+
type_is_educator:
47+
(user.user_profile && user.user_profile.type_is_educator) || false,
48+
type_is_other:
49+
(user.user_profile && user.user_profile.type_is_other) || false
50+
}
2751
})
2852

2953
const AddlProfileFieldsForm = ({
@@ -34,14 +58,33 @@ const AddlProfileFieldsForm = ({
3458
let validation = profileValidation.concat(addlProfileFieldsValidation)
3559

3660
if (requireTypeFields) {
61+
const occupationField = yup
62+
.boolean()
63+
.test(
64+
"one occupation must be selected",
65+
"At least one occupation must be selected",
66+
function() {
67+
return (
68+
this.parent.type_is_student ||
69+
this.parent.type_is_professional ||
70+
this.parent.type_is_educator ||
71+
this.parent.type_is_other
72+
)
73+
}
74+
)
75+
3776
validation = validation.concat(
3877
yup.object().shape({
3978
user_profile: yup.object().shape({
4079
highest_education: yup
4180
.string()
42-
.required("Highest Level of Education is a required field")
81+
.label("Highest Level of Education")
82+
.required()
4383
.typeError("Highest Level of Education is a required field"),
44-
type_is_student: yup.boolean().test(requireLearnerTypeFields)
84+
type_is_student: occupationField,
85+
type_is_professional: occupationField,
86+
type_is_educator: occupationField,
87+
type_is_other: occupationField
4588
})
4689
})
4790
)
@@ -55,14 +98,15 @@ const AddlProfileFieldsForm = ({
5598
validateOnChange={false}
5699
validateOnBlur={false}
57100
>
58-
{({ isSubmitting, values }) => {
101+
{({ isSubmitting, values, errors }) => {
59102
return (
60-
<Form>
61-
<ProfileFields values={values} isNewAccount={false} />
103+
<Form noValidate>
104+
<ConnectedFocusError />
105+
<GenderAndDOBProfileFields errors={errors} />
62106
<AddlProfileFields
63107
values={values}
64-
isNewAccount={false}
65108
requireAddlFields={requireTypeFields}
109+
errors={errors}
66110
/>
67111
<div className="row submit-row no-gutters">
68112
<div className="col d-flex justify-content-end">

‎frontend/public/src/components/forms/ChangeEmailForm.js

Lines changed: 80 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@ import CardLabel from "../input/CardLabel"
88

99
import type { User } from "../../flow/authTypes"
1010

11-
import {
12-
changeEmailFormValidation,
13-
changeEmailValidationRegex
14-
} from "../../lib/validation"
11+
import { changeEmailFormValidation } from "../../lib/validation"
1512
import FormError from "./elements/FormError"
1613
import { ConnectedFocusError } from "focus-formik-error"
1714

@@ -22,88 +19,88 @@ type Props = {
2219

2320
export type ChangeEmailFormValues = {
2421
email: string,
25-
confirmPassword: string
22+
confirmPasswordEmailChange: string
2623
}
2724

28-
const ChangeEmailForm = ({ onSubmit, user }: Props) => {
29-
return (
30-
<Formik
31-
onSubmit={onSubmit}
32-
validationSchema={changeEmailFormValidation}
33-
initialValues={{
34-
email: user.email,
35-
confirmPassword: ""
36-
}}
37-
>
38-
{({ isSubmitting, errors }) => {
39-
return (
40-
<Form>
41-
<ConnectedFocusError />
42-
<section className="email-section">
43-
<h2 aria-label="Change Email Form">Change Email</h2>
44-
<div className="form-group">
45-
<CardLabel htmlFor="email" isRequired={true} label="Email" />
46-
<Field
47-
name="email"
48-
id="email"
49-
className="form-control"
50-
component={EmailInput}
51-
autoComplete="email"
52-
pattern={changeEmailValidationRegex(user.email)}
53-
title="Email must be different than your current one."
54-
aria-invalid={errors.email ? "true" : null}
55-
aria-describedby={errors.email ? "emailError" : null}
56-
/>
57-
<ErrorMessage
58-
name="email"
59-
id="emailError"
60-
component={FormError}
61-
/>
62-
</div>
63-
<div className="form-group">
64-
<CardLabel
65-
htmlFor="confirmPassword"
66-
isRequired={true}
67-
label="Confirm Password"
68-
subLabel="Password required to change email address"
69-
/>
70-
<Field
71-
id="confirmPassword"
72-
name="confirmPassword"
73-
className="form-control"
74-
component={PasswordInput}
75-
autoComplete="current-password"
76-
aria-invalid={errors.confirmPassword ? "true" : null}
77-
aria-describedby={
78-
errors.confirmPassword ? "confirmPasswordError" : null
79-
}
80-
aria-label="Confirm Password"
81-
/>
82-
<ErrorMessage
83-
name="confirmPassword"
84-
id="confirmPasswordError"
85-
component={FormError}
86-
/>
87-
</div>
88-
</section>
25+
const ChangeEmailForm = ({ onSubmit, user }: Props) => (
26+
<Formik
27+
onSubmit={onSubmit}
28+
validationSchema={changeEmailFormValidation(user.email)}
29+
initialValues={{
30+
email: user.email,
31+
confirmPasswordEmailChange: ""
32+
}}
33+
validateOnChange={false}
34+
validateOnBlur={false}
35+
>
36+
{({ isSubmitting, errors }) => {
37+
return (
38+
<Form noValidate>
39+
<ConnectedFocusError />
40+
<section className="email-section">
41+
<h2 aria-label="Change Email Form">Change Email</h2>
42+
<div className="form-group">
43+
<CardLabel htmlFor="email" isRequired={true} label="Email" />
44+
<Field
45+
name="email"
46+
id="email"
47+
className="form-control"
48+
component={EmailInput}
49+
aria-invalid={errors.email ? "true" : null}
50+
aria-describedby={errors.email ? "emailError" : null}
51+
required
52+
/>
53+
<ErrorMessage
54+
name="email"
55+
id="emailError"
56+
component={FormError}
57+
/>
58+
</div>
59+
<div className="form-group">
60+
<CardLabel
61+
htmlFor="confirmPasswordEmailChange"
62+
isRequired={true}
63+
label="Current Password"
64+
subLabel="Current password required to change email address"
65+
/>
66+
<Field
67+
id="confirmPasswordEmailChange"
68+
name="confirmPasswordEmailChange"
69+
className="form-control"
70+
component={PasswordInput}
71+
autoComplete="current-password"
72+
aria-invalid={errors.confirmPasswordEmailChange ? "true" : null}
73+
aria-describedby={
74+
errors.confirmPasswordEmailChange
75+
? "confirmPasswordEmailChangeError"
76+
: null
77+
}
78+
required
79+
/>
80+
<ErrorMessage
81+
name="confirmPasswordEmailChange"
82+
id="confirmPasswordEmailChangeError"
83+
component={FormError}
84+
/>
85+
</div>
86+
</section>
8987

90-
<div className="row submit-row no-gutters">
91-
<div className="col d-flex justify-content-end">
92-
<button
93-
type="submit"
94-
aria-label="sumbit form change email"
95-
className="btn btn-primary btn-gradient-red-to-blue"
96-
disabled={isSubmitting}
97-
>
98-
Submit
99-
</button>
100-
</div>
88+
<div className="row submit-row no-gutters">
89+
<div className="col d-flex justify-content-end">
90+
<button
91+
type="submit"
92+
aria-label="sumbit form change email"
93+
className="btn btn-primary btn-gradient-red-to-blue"
94+
disabled={isSubmitting}
95+
>
96+
Submit
97+
</button>
10198
</div>
102-
</Form>
103-
)
104-
}}
105-
</Formik>
106-
)
107-
}
99+
</div>
100+
</Form>
101+
)
102+
}}
103+
</Formik>
104+
)
108105

109106
export default ChangeEmailForm

‎frontend/public/src/components/forms/ChangeEmailForm_test.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ describe("ChangeEmailForm", () => {
3434

3535
const form = wrapper.find("Formik").dive()
3636
assert.ok(findFormikFieldByName(form, "email").exists())
37-
assert.ok(findFormikFieldByName(form, "confirmPassword").exists())
37+
assert.ok(
38+
findFormikFieldByName(form, "confirmPasswordEmailChange").exists()
39+
)
3840
assert.ok(form.find("button[type='submit']").exists())
3941
})
4042
})

0 commit comments

Comments
 (0)