Compare commits

...

138 Commits

Author SHA1 Message Date
Zach Hancock
0e272f39ee feat: add warning helptext to name fields after verification failure 2021-09-29 17:06:46 -04:00
alangsto
afa808ff5d Merge pull request #516 from edx/alangsto/update_dismissable_alert
fix: approved alert should appear for subsequent approved attempts
2021-09-29 14:36:02 -04:00
Alie Langston
5279f2a9c9 fix: approved alert should appear for subsequent approved attempts 2021-09-29 14:00:30 -04:00
Michael Roytman
4cc00fd7e3 Merge pull request #514 from edx/mroytman/MST-1073-pending-verified-name-display
fix: Display Last Approved Verified Name When Most Recent Verified Name is Pending
2021-09-29 13:03:08 -04:00
alangsto
8815626411 Merge pull request #515 from edx/alangsto/fix_certificate_checkbox
fix: Checkbox incorrectly tied to profile name
2021-09-29 12:57:51 -04:00
Alie Langston
db319b6cdf fix: Checkbox incorrectly tied to profile name
Fixed a bug that incorrectly rendered the certificate preference checkbox upon each page render. The bug caused the 1) the checkboxes to both be selected at the same time, 2) the checkbox to always be selected for the profile name, and 3) wouldn't allow the proper UI changes upon saving a verified name. The checkbox selection works correctly now, and the save button for the verified name field also works as expected.
2021-09-29 09:53:05 -04:00
michaelroytman
50edcb1c50 fix: Display Last Approved Verified Name When Most Recent Verified Name is Pending
When a learner's most recent Verified Name is in the pending state, we should display their most recent approved Verified Name. If such a Verified Name does not exist, do not display any Verified Name. In either case, do not disable or gray out either the Full name or Verified name fields.

This change is being made because we do not want to prevent a learner from editing the Verified name field if their most recent entry is pending. An entry remains in the pending state when a learner has created a Verified name by changing their name on the Account Settings page but has not followed through with submitting their IDV.
2021-09-28 13:07:46 -04:00
David Joy
d6519bc825 fix: update deps and modernize, fix favicon (#513) 2021-09-27 19:50:16 -04:00
Bianca Severino
b54aeb9446 Merge pull request #512 from edx/bseverino/idv-language
[MST-797] Update IDV instructions
2021-09-27 17:01:11 -04:00
Zachary Hancock
bb1bd6e648 fix: null check mostRecentVerifiedName 2021-09-27 14:33:46 -04:00
Bianca Severino
7df9f92dd8 fix: update IDV instructions
Update IDV instructions to be more explicit about
the need for a photo identification card, and provide
a few more examples.
2021-09-27 14:23:36 -04:00
Zach Hancock
3627915985 fix: null check mostRecentVerifiedName 2021-09-27 14:19:51 -04:00
Zachary Hancock
9fe1a04a0a feat: enter name change flow when submitting a new verified name 2021-09-27 11:33:30 -04:00
Zach Hancock
7455821500 fix: missing null check 2021-09-27 10:12:15 -04:00
Renovate Bot
817980be00 fix(deps): update dependency formdata-polyfill to v4.0.8 2021-09-27 08:56:10 +00:00
Michael Roytman
7d4e31f69d Merge pull request #508 from edx/mroytman/MST-1059-verified-name-not-sent-in-IDV
feat: send nameOnAccount as full_name with all IDV submissions when learner has no name change and verified name feature is enabled
2021-09-24 16:16:08 -04:00
Zach Hancock
34dde09ccc style: lint 2021-09-24 14:37:56 -04:00
Zach Hancock
aee4e44f8c feat: submit new verified name 2021-09-24 14:20:00 -04:00
michaelroytman
7381cfd3b6 feat: send nameOnAccount as full_name with all IDV submissions when learner has no name change and verified name feature is enabled
MST-1059: https://openedx.atlassian.net/browse/MST-1059

This code change changes how the full_name field is included in the form data sent during IDV submission.

Before, full_name was only included in the form data when the learner entered a different name in the GetNameIdPanel than what was displayed to them as the default (i.e. their full name on their profile). If a full_name was provided in the request, the server would use the supplied full_name when creating the IDV record and would update the learner's full name on their profile accordingly. If a full_name was not provided in the request, then the server would fall back to the current full name on their profile when creating the IDV record and no change to the full name on their profile would occur.

With the introduction of the Verified Name feature, things have changed. Assuming the feature is enabled, the name displayed to the learner is either the most recent pending or approved verified name or their full name on their profile if the former does not exist. This means that it is no longer correct for the server to create an IDV record using the current full name on the learner's profile when full_name is not provided, which, again, occurs if the learner does not change the name submitted with IDV. This is because, if the learner has a pending or approved verified name, that should be prioritzed over the full name on their profile.

This code change sends the full_name field whether or not the learner has modified it in the IDV flow, if the verified name feature is enabled. This allows the server to create a verified name with whatever value is submitted to it through IDV. The reason we only do this if the feature is enabled is that, when the feature is off, the server will change the learner's profile name to this value, as described above. If we send the idPhotoName on all requests, even ones where the learner does not change the idPhotoName, then the server will record that the full name on the learner's profile has a requested change, even if the name is the same. Their name may not change, but this will pollute the history by being logged as a requested change.
2021-09-24 12:22:19 -04:00
Michael Roytman
1d0bd3986c Merge pull request #505 from edx/mroytman/MST-1016-verified-name-in-account-name-check
feat: include pending or approved verified names in the name field if they exist
2021-09-24 12:03:07 -04:00
michaelroytman
1c0dc36907 feat: include pending or approved verified names in the name field if they exist
MST-1016: https://openedx.atlassian.net/browse/MST-1016

If a learner has a pending or approved verified name, the most recent should take precedence over the profile name on the GetNameIdPanel during the "Account Name Check". If the learner has no pending or approved verified names, then the learner's profile name should be used instead.
2021-09-23 11:44:51 -04:00
Bianca Severino
ac0ab9daea Merge pull request #504 from edx/bseverino/pending-name
[MST-1057] Display pending name when in "submitted" state
2021-09-21 11:43:08 -04:00
Bianca Severino
0d45d17cd3 fix: display pending name when in submitted state 2021-09-21 10:18:49 -04:00
Renovate Bot
a6d265b885 chore(deps): update dependency @testing-library/react to v12.1.0 2021-09-20 08:18:04 +00:00
Renovate Bot
3508bc6c34 fix(deps): update dependency @edx/frontend-platform to v1.12.7 2021-09-20 08:00:12 +00:00
edX Transifex Bot
28de621fc7 chore(i18n): update translations 2021-09-20 02:04:23 +05:00
Bianca Severino
e6df5e77ae Merge pull request #486 from edx/bseverino/change-name
[MST-803] Add name change modal
2021-09-16 10:09:47 -04:00
Bianca Severino
8bc5c1fae8 feat: add name change modal 2021-09-15 14:15:43 -04:00
Bianca Severino
6e48c9d2d1 Merge pull request #497 from edx/bseverino/certificate-name
feat: add certificate preference to name fields
2021-09-15 13:37:23 -04:00
Andrew Shultz
d3469d648f Merge pull request #500 from edx/ashultz0/idv_redo_ok
feat: if verified name is on, we can redo ID verification
2021-09-15 11:03:56 -04:00
Bianca Severino
cc65ffc96f feat: add certificate preference to name fields
Adds a checkbox under "Name" and "Verified Name" fields,
signifying which name the user prefers to display on their
certificates. When checking the checkbox, the user can save
this choice along with their name. When unchecking the check-
box, a modal appears, prompting the user to choose a name
to display on their certificate.
2021-09-15 11:01:20 -04:00
Andy Shultz
5640fb95c2 fix: use correct initial state type 2021-09-15 09:36:09 -04:00
Andy Shultz
7bbb889258 feat: if verified name is on, we can redo ID verification
The verified_name endpoint provides is_enabled only it a name exists,
so we have to request the enabled flag separately.

MST-1026
2021-09-13 13:17:14 -04:00
Renovate Bot
53b59231cb fix(deps): update dependency @edx/frontend-platform to v1.12.6 2021-09-13 10:16:42 +00:00
Renovate Bot
8fb25fd89b fix(deps): update dependency formdata-polyfill to v4.0.7 2021-09-13 09:59:52 +00:00
Bianca Severino
15d2bf60f9 Merge pull request #493 from edx/mroytman/MST-954-failure-name-change-additional-changes
fix: Fix Broken Editing of Verified Name Field
2021-09-08 10:57:46 -04:00
Renovate Bot
135826bc52 fix(deps): update react-router monorepo 2021-09-06 08:39:07 +00:00
Renovate Bot
d7251e6aec fix(deps): update dependency react-redux to v7.2.5 2021-09-06 08:18:30 +00:00
edX Transifex Bot
0b0846fb00 fix(i18n): update translations 2021-09-06 02:04:24 +05:00
michaelroytman
b1cd1b1995 fix: Fix Broken Editing of Verified Name Field
This code change fixes a bug where the verified name field was not editable. This was due to the fact that the verified name was not wired up to the Redux store, so draft verified names were not stored in the Redux store.
2021-09-03 11:44:14 -04:00
alangsto
50c468857a Merge pull request #492 from edx/alangsto/pending_alert
feat: add alert and correct messaging for submitted verified name
2021-08-31 15:47:07 -04:00
Alie Langston
c940d3463c feat: add alert and correct messaging for pending verified name
MST-954 (https://openedx.atlassian.net/browse/MST-954)
2021-08-31 15:35:31 -04:00
Michael Roytman
376deba866 Merge pull request #491 from edx/mroytman/MST-954-failure-name-change-display
feat: Change Which VerifiedName Record is Displayed When Most Recent VerifiedName is Denied
2021-08-31 13:52:43 -04:00
michaelroytman
37d0e6e0fb feat: Change Which VerifiedName Record is Displayed When Most Recent VerifiedName is Denied
If a learner requests a profile name change or verified name change that requires ID verification, their ID verification submission may be rejected. This code change changes the verified name that is displayed in this case. If a learner's most recent verified name record has been denied, and the learner has a previously approved verified name, display that. If If a learner's most recent verified name record has been denied, and the learner either has no previously verified name records or no previous verified name records at all, do not show a verified name field.

It also refactors the code to better support UI treatments for other verified name statuses, like pending and submitted.
MST-954 (https://openedx.atlassian.net/browse/MST-954)
2021-08-30 17:05:08 -04:00
Michael Roytman
9261711d4a Merge pull request #490 from edx/mroytman/MST-954-failure-name-change-alert
feat: Add Dismissible Alert Informing Learner of Failed Name Verification
2021-08-30 17:04:24 -04:00
michaelroytman
3e42d42ad7 feat: Add Dismissible Alert Informing Learner of Failed Name Verification
If a learner requests a profile name change or verified name change that requires ID verification, their ID verification submission may be rejected. This code change adds a dismissible error alert to the Account Settings page informing the learner of the failure and redirecting them to a help article about ID verification failures. The local storage key used to determine whether to show the alert or not uses the created time of the name verification object to ensure that subsequent ID verification failures still trigger this alert, even for the same name.

MST-954 (https://openedx.atlassian.net/browse/MST-954)
2021-08-30 13:18:02 -04:00
Simon Chen
7de4edc002 Merge pull request #487 from edx/schen/pending_name
feat: Make VerifiedName not editable and show proper icon when the Name is in pending status
2021-08-30 12:58:39 -04:00
Simon Chen
2936498b02 feat: Make VerifiedName not editable and show proper icon when the Name is in pending status 2021-08-30 11:50:45 -04:00
Renovate Bot
44d26c444b chore(deps): update dependency husky to v7.0.2 2021-08-30 09:28:00 +00:00
Michael Roytman
b1c1c6502d Merge pull request #485 from edx/mroytman/MST-956-pending-name-change-alert
feat: Replace use of verified_name API with verified_name_history API.
2021-08-27 13:50:04 -04:00
michaelroytman
21dda3f25b feat: Replace use of verified_name API with verified_name_history API.
This replaces the use of the verified_name API ({LMS_BASE}/api/edx_name_affirmation/v1/verified_name) with the verified_name_history API ({LMS_BASE}/api/edx_name_affirmation/v1/verified_name/history). The verified_name API returns the most recent verified name for a learner. However, we need access to the entire learner's verified name history in order to view verified name records with other statuses (i.e. pending, submitted, denied) as well as to be able to display previously verified names in the event that the most recent verified name record is denied.

MST-954 (https://openedx.atlassian.net/browse/MST-954)
2021-08-27 12:24:21 -04:00
Andrew Shultz
f87b5040a3 Merge pull request #484 from edx/ashultz0/verified-status
switch account status page to use verified name status
2021-08-26 11:38:52 -04:00
Andy Shultz
0dc1df07d4 feat: gate render verified name success message outside of function
this frees the function from doing logic we've already done elsewhere
2021-08-26 11:13:43 -04:00
Andy Shultz
efa682092f feat: specify shape of verified name object
at least the fields that we are interested in
2021-08-26 11:09:33 -04:00
Andy Shultz
0d9e6f8b87 feat: do not smear verified name fields into general fields
smooshing an unattached field name status into the general set of
fields is a recipie for future bugs
2021-08-26 10:08:28 -04:00
Andy Shultz
26d2b50859 feat: update verified name display to look at status not is_verified bool
note that there is no way to trigger pending display currently without
code manipulation because the verified name endpoint in use only
returns approved names
2021-08-26 10:07:13 -04:00
Simon Chen
3eb63cd624 Merge pull request #482 from edx/schen/fix_name_error
fix: Should not display error message when the account name matches the ID name
2021-08-23 11:06:55 -04:00
Simon Chen
ba0774c5c4 fix: Should not display error message when the account name matches the ID name
MST-990, we should fix the problem where the ID name error message still show up with Account name filled in or Verified name filled in.
2021-08-23 11:03:19 -04:00
Simon Chen
ac47d0b180 Merge pull request #481 from edx/renovate/formdata-polyfill-4.x
fix(deps): update dependency formdata-polyfill to v4
2021-08-23 09:26:25 -04:00
Simon Chen
02038b8ac9 Merge pull request #471 from edx/renovate/edx-frontend-build-8.x
chore(deps): update dependency @edx/frontend-build to v8
2021-08-23 09:16:02 -04:00
Simon Chen
458f9f7e3d Merge pull request #477 from edx/renovate/es-check-6.x
chore(deps): update dependency es-check to v6
2021-08-23 09:15:10 -04:00
Simon Chen
c7d9c270f9 Merge pull request #479 from edx/schen/idv_use_verified_name
feat: Update IDV workflow to use the VerifiedName
2021-08-23 09:13:12 -04:00
Renovate Bot
d0ecbbfb8a fix(deps): update dependency formdata-polyfill to v4 2021-08-23 08:24:31 +00:00
Renovate Bot
22db0d9202 chore(deps): update dependency es-check to v6 2021-08-23 08:19:01 +00:00
Renovate Bot
34a142f55f chore(deps): update dependency @edx/frontend-build to v8 2021-08-23 08:17:25 +00:00
Renovate Bot
6e00915f98 fix(deps): update dependency @edx/frontend-platform to v1.12.4 2021-08-23 08:09:49 +00:00
Simon Chen
4cfa1707de feat: Update IDV workflow to use the VerifiedName instead of the profile name
If the Verified Name feature is turned on, and the user do have a VerifiedName, use that name on the Account Name Check page of the IDV flow instead of account profile name
2021-08-20 11:08:43 -04:00
Renovate Bot
a721887886 fix(deps): update dependency @edx/frontend-platform to v1.12.3 2021-08-16 06:59:33 +00:00
Renovate Bot
9cdbb93bf3 fix(deps): update dependency @edx/frontend-component-footer to v10.1.6 2021-08-16 06:41:37 +00:00
stvn
f9e7519e26 merge(#454): renovate/actions-setup-node-2.x
commits
=======
- chore(deps): update actions/setup-node action to v2
2021-08-10 10:08:50 -07:00
Renovate Bot
ff8d5a4d09 chore(deps): update actions/setup-node action to v2 2021-08-10 07:29:09 +00:00
stvn
f14c71c4fb merge(#470): renovate/codecov-codecov-action-2.x
commits
=======
- chore(deps): update codecov/codecov-action action to v2
2021-08-09 21:41:29 -07:00
Renovate Bot
43caac8430 chore(deps): update codecov/codecov-action action to v2 2021-08-10 00:38:25 +00:00
stvn
ee1ecb8ab9 merge(#354): adzuci/update-owner-to-tnl
commits
=======
- docs: remove owner from openedx.yml
2021-08-09 16:40:36 -07:00
Adam Blackwell
020aa84986 docs: remove owner from openedx.yml 2021-08-09 16:27:51 -07:00
Renovate Bot
24459daf6d fix(deps): update font awesome 2021-08-09 10:31:52 +00:00
Renovate Bot
587533703e fix(deps): update dependency redux to v4.1.1 2021-08-09 10:14:52 +00:00
Renovate Bot
866746d1c6 fix(deps): update dependency @edx/frontend-platform to v1.11.3 2021-08-02 19:45:00 +00:00
Albert (AJ) St. Aubin
4c618a55c0 Merge pull request #472 from edx/aj/fix_demographics
fix: Demographics section will now show when enabled
2021-08-02 14:42:50 -04:00
Albert (AJ) St. Aubin
c9f6cf708e fix: Demographics section will now show when enabled 2021-08-02 14:29:39 -04:00
edX Transifex Bot
5f314ee65f fix(i18n): update translations 2021-08-02 02:04:23 +05:00
Michael Roytman
7e35b23b36 Merge pull request #466 from edx/mroytman/MST-800-verified-name-field
[MST-800] Add Verified Name field and success alert to the Account Settings page
2021-07-30 11:02:57 -04:00
Michael Roytman
842bd11d89 feat: Add Verified Name field and success alert to the Account Settings page
MST-800: https://openedx.atlassian.net/browse/MST-800

This code change adds a Verified Name editable field to the Account Settings page. When the verified name API in the LMS returns that a learner has a verified name, and that the name affirmation feature flag is turned on, the Account Settings page displays the Verified Name field. If the learner's name is verified (i.e. it is not pending verification), then a green checkmark is displayed to the right of the field label.

The first time the learner visits the Account Settings page after verification, a dismissible alert is displayed indicating that their vreified name was verified. Whether the alert has been dismissed is stored in localStorage, and the alert no longer reappears after it is dismissed.
2021-07-30 10:16:40 -04:00
Renovate Bot
b1e11dfb36 chore(deps): update dependency @edx/frontend-build to v7.1.0 2021-07-26 07:27:17 +00:00
Renovate Bot
aa57b69924 chore(deps): update dependency codecov to v3.8.3 2021-07-26 07:15:09 +00:00
stvn
e7769b37e9 merge(#461): renovate/husky-7.x
commits
=======
- chore(deps): update dependency husky to v7
2021-07-21 11:32:53 -07:00
Renovate Bot
fcc7b26c28 chore(deps): update dependency husky to v7 2021-07-19 07:55:01 +00:00
Renovate Bot
16d844528d fix(deps): update dependency jslib-html5-camera-photo to v3.1.8 2021-07-19 07:49:54 +00:00
Renovate Bot
223234f623 chore(deps): update dependency @edx/frontend-build to v7.0.6 2021-07-19 07:37:33 +00:00
Renovate Bot
d8a1c0ca8c fix(deps): update dependency @edx/paragon to v16.1.0 2021-07-12 07:08:14 +00:00
Renovate Bot
1da8f630eb fix(deps): update dependency @edx/frontend-platform to v1.11.1 2021-07-12 06:55:19 +00:00
Renovate Bot
228eec0afa chore(deps): update dependency @edx/frontend-build to v7.0.3 2021-07-12 06:40:54 +00:00
David Joy
cf62b4b82c fix: upgrade frontend-build to v7 and paragon to v16 (#457)
* build: bumping to Paragon 16.x

Test snapshots needed to be updated because the Hyperlink external link icon is now SVG instead of font-awesome, and because it added some new classes.

* build: bump frontend-build to v7
2021-07-07 16:10:09 -04:00
renovate[bot]
0184c1fa25 chore(deps): update dependency @edx/frontend-build to v6 (#455)
Co-authored-by: Renovate Bot <bot@renovateapp.com>
2021-07-06 14:44:31 -04:00
Renovate Bot
8ed103b2ad chore(deps): update dependency @testing-library/react to v12 2021-07-05 06:59:43 +00:00
Renovate Bot
84a9de44a5 chore(deps): update dependency es-check to v5.2.4 2021-06-28 07:27:56 +00:00
Renovate Bot
84df0a0b3e fix(deps): update dependency redux to v4.1.0 2021-06-21 07:21:17 +00:00
Renovate Bot
a3917ae550 fix(deps): update dependency qs to v6.10.1 2021-06-21 07:09:01 +00:00
Renovate Bot
bfd6a07a2c fix(deps): update dependency memoize-one to v5.2.1 2021-06-21 06:55:37 +00:00
Renovate Bot
1df570989b fix(deps): update dependency classnames to v2.3.1 2021-06-21 06:40:54 +00:00
stvn
b7e433876e merge(#396): renovate/testing-library-react-11.x
commits
=======
- chore(deps): update dependency @testing-library/react to v11
2021-06-17 02:48:11 -07:00
Renovate Bot
1669d577f6 chore(deps): update dependency @testing-library/react to v11 2021-06-15 09:09:28 +00:00
Renovate Bot
d1ca7decce fix(deps): update dependency @edx/paragon to v13.17.5 2021-06-15 09:04:04 +00:00
Renovate Bot
79a43ae713 fix(deps): update dependency @edx/frontend-component-footer to v10.1.5 2021-06-15 08:49:54 +00:00
Renovate Bot
9d0b315714 fix(deps): update dependency @edx/frontend-component-header to v2.3.0 2021-06-14 23:34:42 +00:00
Renovate Bot
4b2bc11378 fix(deps): update dependency @edx/frontend-platform to v1.11.0 2021-06-14 07:10:19 +00:00
Renovate Bot
fc7ce6b91e chore(deps): update dependency @testing-library/jest-dom to v5.14.1 2021-06-14 06:51:50 +00:00
Renovate Bot
39a25fe5bc fix(deps): update font awesome 2021-06-08 07:57:01 +00:00
Renovate Bot
307cb1541b fix(deps): update dependency redux-devtools-extension to v2.13.9 2021-06-07 07:02:48 +00:00
Renovate Bot
03e026ce4e fix(deps): update reactrouter monorepo to v5.2.0 2021-06-05 07:06:40 +00:00
Renovate Bot
a29876aff0 fix(deps): update dependency react-redux to v7.2.4 2021-06-05 06:48:36 +00:00
Renovate Bot
ab77246015 fix(deps): update dependency react-transition-group to v4.4.2 2021-06-05 06:31:19 +00:00
stvn
572b05e7f1 merge(#444): build/renovate
commits
=======
- build(renovate): fix json syntax
2021-06-04 23:05:09 -07:00
stvn
3e4de47ba6 build(renovate): fix json syntax 2021-06-04 22:09:16 -07:00
stvn
6c6cedd422 merge(#442): build/renovate
commits
=======
- build(renovate): be more selective about automerging devDependencies
2021-06-04 13:20:35 -07:00
stvn
43694921ca build(renovate): be more selective about automerging devDependencies
to avoid bumping the major version, besides linters and testers.
2021-06-04 13:15:46 -07:00
Renovate Bot
06ded1e66e fix(deps): update react monorepo to v16.14.0 2021-06-04 02:03:50 +00:00
Renovate Bot
aba1bb3382 fix(deps): update dependency @tensorflow/tfjs-core to v1.7.4 2021-06-04 00:13:07 +00:00
Renovate Bot
d67b880028 fix(deps): update dependency @tensorflow/tfjs-converter to v1.7.4 2021-06-03 21:48:51 +00:00
Renovate Bot
29692add53 chore(deps): update dependency enzyme to v3.11.0 2021-06-03 19:45:17 +00:00
Renovate Bot
7f53bf32ca chore(deps): update dependency codecov to v3.8.2 2021-06-03 19:18:50 +00:00
Renovate Bot
add22d9756 fix(deps): update dependency bowser to v2.11.0 2021-06-03 18:50:57 +00:00
Renovate Bot
bef9bf76fd chore(deps): update dependency husky to v3.1.0 2021-06-03 18:22:21 +00:00
Renovate Bot
bf6b2fb8b8 chore(deps): update dependency @edx/frontend-build to v5.6.14 2021-06-03 17:52:24 +00:00
Renovate Bot
a77cd6d91a chore(deps): update dependency es-check to v5.2.3 2021-06-03 17:21:04 +00:00
stvn
9b3f222191 merge(#441): build/renovate
commits
=======
- build(renovate): remove linters/testers automerge presets
- build(renovate): automerge lockFileMaintenence
- build(renovate): use enableVulnerabilityAlerts preset
- build(renovate): allow unscheduled updates
2021-06-03 09:40:38 -07:00
stvn
90f2ed8393 merge(#440): build/remove-travis
commits
=======
- build(ci): run ci tests via matrix
- build(ci): always run `npm ci` via Makefile
- build(ci): convert travis-ci to github actions
2021-06-03 09:38:51 -07:00
stvn
95c53ad380 build(renovate): remove linters/testers automerge presets
on the assumption that our blanket policy for `devDependencies` will overlap.
2021-06-02 13:47:16 -07:00
stvn
3023cd3d55 build(renovate): automerge lockFileMaintenence 2021-06-02 12:33:07 -07:00
stvn
50f85674b1 build(renovate): use enableVulnerabilityAlerts preset 2021-06-02 12:33:06 -07:00
stvn
9437ee36f3 build(renovate): allow unscheduled updates
so we don't need to wait until next week to see changes.
2021-06-02 12:32:57 -07:00
stvn
463944012c merge(#438): build/renovate
commits
=======
- build(renovate): automerge devDependencies
- build(renovate): use preset to schedule weekly
- build(renovate): use preset to rebaseStalePrs
2021-06-02 11:40:56 -07:00
stvn
2d297aa7be build(renovate): automerge devDependencies
tickets
=======
- Fixes CENG-109
- Fixes stvstnfrd/openedx-meta#157
2021-06-02 11:33:17 -07:00
stvn
1ab5901d24 build(ci): run ci tests via matrix 2021-06-02 11:28:11 -07:00
stvn
ba678d92f7 build(ci): always run npm ci via Makefile 2021-06-02 11:28:11 -07:00
stvn
884651a702 build(ci): convert travis-ci to github actions
tickets
=======
- Fixes CENG-108
- Fixes stvstnfrd/openedx-meta#156
2021-06-02 11:26:53 -07:00
stvn
a152c631da build(renovate): use preset to schedule weekly 2021-06-01 23:36:43 -07:00
stvn
fbe91ce7e4 build(renovate): use preset to rebaseStalePrs 2021-06-01 23:33:07 -07:00
58 changed files with 8765 additions and 8661 deletions

50
.env
View File

@@ -1,25 +1,27 @@
ACCESS_TOKEN_COOKIE_NAME=null
BASE_URL=null
CREDENTIALS_BASE_URL=null
CSRF_TOKEN_API_PATH=null
ECOMMERCE_BASE_URL=null
LANGUAGE_PREFERENCE_COOKIE_NAME=null
LMS_BASE_URL=null
DEMOGRAPHICS_BASE_URL=null
LOGIN_URL=null
LOGOUT_URL=null
MARKETING_SITE_BASE_URL=null
NODE_ENV=null
ORDER_HISTORY_URL=null
REFRESH_ACCESS_TOKEN_ENDPOINT=null
SEGMENT_KEY=null
SITE_NAME=''
SUPPORT_URL=null
USER_INFO_COOKIE_NAME=null
LOGO_URL=''
LOGO_TRADEMARK_URL=''
LOGO_WHITE_URL=''
ACCESS_TOKEN_COOKIE_NAME=''
BASE_URL=''
COACHING_ENABLED=''
CREDENTIALS_BASE_URL=''
CSRF_TOKEN_API_PATH=''
DEMOGRAPHICS_BASE_URL=''
DISCOVERY_API_BASE_URL=''
ECOMMERCE_BASE_URL=''
ENABLE_DEMOGRAPHICS_COLLECTION=''
FAVICON_URL=''
PUBLISHER_BASE_URL=
STUDIO_BASE_URL=
DISCOVERY_API_BASE_URL=
LANGUAGE_PREFERENCE_COOKIE_NAME=''
LMS_BASE_URL=''
LOGIN_URL=''
LOGO_TRADEMARK_URL=''
LOGO_URL=''
LOGO_WHITE_URL=''
LOGOUT_URL=''
MARKETING_SITE_BASE_URL=''
NODE_ENV=''
ORDER_HISTORY_URL=''
PUBLISHER_BASE_URL=''
REFRESH_ACCESS_TOKEN_ENDPOINT=''
SEGMENT_KEY=''
SITE_NAME=''
STUDIO_BASE_URL=''
SUPPORT_URL=''
USER_INFO_COOKIE_NAME=''

View File

@@ -1,28 +1,28 @@
ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
BASE_URL='localhost:1997'
COACHING_ENABLED=''
CREDENTIALS_BASE_URL='http://localhost:18150'
CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
DEMOGRAPHICS_BASE_URL='http://localhost:18360'
DISCOVERY_API_BASE_URL=''
ECOMMERCE_BASE_URL='http://localhost:18130'
ENABLE_DEMOGRAPHICS_COLLECTION=''
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
LMS_BASE_URL='http://localhost:18000'
LOGIN_URL='http://localhost:18000/login'
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
LOGOUT_URL='http://localhost:18000/logout'
MARKETING_SITE_BASE_URL='http://localhost:5335'
DEMOGRAPHICS_BASE_URL='http://localhost:18360'
NODE_ENV='development'
ORDER_HISTORY_URL='localhost:1996/orders'
ORDER_HISTORY_URL='http://localhost:1996/orders'
PORT=1997
PUBLISHER_BASE_URL=''
REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
SEGMENT_KEY=null
SEGMENT_KEY=''
SITE_NAME=localhost
STUDIO_BASE_URL=''
SUPPORT_URL='http://localhost:18000/support'
USER_INFO_COOKIE_NAME='edx-user-info'
COACHING_ENABLED=false
ENABLE_DEMOGRAPHICS_COLLECTION=false
LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
PUBLISHER_BASE_URL=
STUDIO_BASE_URL=
DISCOVERY_API_BASE_URL=

View File

@@ -1,27 +1,27 @@
ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
BASE_URL='localhost:1997'
COACHING_ENABLED=''
CREDENTIALS_BASE_URL='http://localhost:18150'
CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
DEMOGRAPHICS_BASE_URL='http://localhost:18360'
DISCOVERY_API_BASE_URL=''
ECOMMERCE_BASE_URL='http://localhost:18130'
ENABLE_DEMOGRAPHICS_COLLECTION=''
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
LMS_BASE_URL='http://localhost:18000'
LOGIN_URL='http://localhost:18000/login'
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
LOGOUT_URL='http://localhost:18000/logout'
MARKETING_SITE_BASE_URL='http://localhost:5335'
DEMOGRAPHICS_BASE_URL='http://localhost:18360'
NODE_ENV=null
ORDER_HISTORY_URL='localhost:1996/orders'
NODE_ENV=''
ORDER_HISTORY_URL='http://localhost:1996/orders'
PUBLISHER_BASE_URL=''
REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
SEGMENT_KEY=null
SEGMENT_KEY=''
SITE_NAME=localhost
STUDIO_BASE_URL=''
SUPPORT_URL='http://localhost:18000/support'
USER_INFO_COOKIE_NAME='edx-user-info'
COACHING_ENABLED=''
ENABLE_DEMOGRAPHICS_COLLECTION=''
LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
PUBLISHER_BASE_URL=
STUDIO_BASE_URL=
DISCOVERY_API_BASE_URL=

32
.github/workflows/ci.yml vendored Normal file
View File

@@ -0,0 +1,32 @@
---
name: ci
on:
push:
branches:
- master
pull_request:
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version:
- 12
npm-test:
- i18n_extract
- is-es5
- lint
- test
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- run: npm install -g npm@6
- run: make requirements
- run: make test NPM_TESTS=build
- run: make test NPM_TESTS=${{ matrix.npm-test }}
- name: upload coverage
uses: codecov/codecov-action@v2
with:
fail_ci_if_error: false

View File

@@ -1,15 +0,0 @@
language: node_js
node_js: 12
before_install:
- npm install -g npm@6
install:
- npm ci
script:
- make validate-no-uncommitted-package-lock-changes
- npm run i18n_extract
- npm run lint
- npm run test
- npm run build
- npm run is-es5
after_success:
- codecov

View File

@@ -10,8 +10,19 @@ tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transi
# This directory must match .babelrc .
transifex_temp = ./temp/babel-plugin-react-intl
requirements:
npm install
NPM_TESTS=build i18n_extract lint test is-es5
.PHONY: test
test: $(addprefix test.npm.,$(NPM_TESTS)) ## validate ci suite
.PHONY: test.npm.*
test.npm.%: validate-no-uncommitted-package-lock-changes
test -d node_modules || $(MAKE) requirements
npm run $(*)
.PHONY: requirements
requirements: ## install ci requirements
npm ci
i18n.extract:
# Pulling display strings from .jsx files into .json files...

View File

@@ -1,4 +1,4 @@
|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
|ci-badge| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
frontend-app-account
====================
@@ -102,8 +102,9 @@ In the future, it's possible that demographics could be modeled as a plugin rath
==============================
.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-account.svg?branch=master
:target: https://travis-ci.com/edx/frontend-app-account
.. |ci-badge| image:: https://github.com/edx/edx-developer-docs/actions/workflows/ci.yml/badge.svg
:target: https://github.com/edx/edx-developer-docs/actions/workflows/ci.yml
:alt: Continuous Integration
.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-account
:target: https://codecov.io/gh/edx/frontend-app-account
.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-app-account.svg

View File

@@ -3,5 +3,4 @@
nick: acct
oeps: {}
owner: edx/arch-team
openedx-release: {ref: master}

14348
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -30,26 +30,26 @@
],
"dependencies": {
"@edx/brand": "npm:@edx/brand-openedx@1.1.0",
"@edx/frontend-component-footer": "10.1.4",
"@edx/frontend-component-header": "2.2.4",
"@edx/frontend-platform": "1.9.5",
"@edx/paragon": "13.1.2",
"@fortawesome/fontawesome-svg-core": "1.2.34",
"@fortawesome/free-brands-svg-icons": "5.8.2",
"@fortawesome/free-regular-svg-icons": "5.7.2",
"@fortawesome/free-solid-svg-icons": "5.8.2",
"@fortawesome/react-fontawesome": "0.1.14",
"@edx/frontend-component-footer": "10.1.6",
"@edx/frontend-component-header": "2.3.0",
"@edx/frontend-platform": "1.12.7",
"@edx/paragon": "16.1.0",
"@fortawesome/fontawesome-svg-core": "1.2.36",
"@fortawesome/free-brands-svg-icons": "5.15.4",
"@fortawesome/free-regular-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/react-fontawesome": "0.1.15",
"@tensorflow-models/blazeface": "0.0.7",
"@tensorflow/tfjs-converter": "1.6.1",
"@tensorflow/tfjs-core": "1.6.1",
"babel-polyfill": "6.26.0",
"bowser": "2.10.0",
"classnames": "2.2.6",
"@tensorflow/tfjs-converter": "1.7.4",
"@tensorflow/tfjs-core": "1.7.4",
"bowser": "2.11.0",
"classnames": "2.3.1",
"core-js": "3.18.1",
"font-awesome": "4.7.0",
"form-urlencoded": "4.0.1",
"formdata-polyfill": "3.0.20",
"formdata-polyfill": "4.0.8",
"history": "4.10.1",
"jslib-html5-camera-photo": "3.1.6",
"jslib-html5-camera-photo": "3.1.8",
"lodash.debounce": "4.0.8",
"lodash.findindex": "4.6.0",
"lodash.get": "4.4.2",
@@ -58,36 +58,35 @@
"lodash.omit": "4.5.0",
"lodash.pick": "4.4.0",
"lodash.pickby": "4.6.0",
"memoize-one": "5.1.1",
"newrelic": "5.13.1",
"memoize-one": "5.2.1",
"prop-types": "15.7.2",
"qs": "6.9.6",
"react": "16.10.2",
"react-dom": "16.10.2",
"react-redux": "7.1.3",
"react-router": "5.1.2",
"react-router-dom": "5.1.2",
"qs": "6.10.1",
"react": "16.14.0",
"react-dom": "16.14.0",
"react-redux": "7.2.5",
"react-router": "5.2.1",
"react-router-dom": "5.3.0",
"react-router-hash-link": "1.2.2",
"react-scrollspy": "3.4.3",
"react-transition-group": "4.3.0",
"redux": "4.0.5",
"redux-devtools-extension": "2.13.8",
"react-transition-group": "4.4.2",
"redux": "4.1.1",
"redux-devtools-extension": "2.13.9",
"redux-logger": "3.0.6",
"redux-saga": "1.1.3",
"redux-thunk": "2.3.0",
"regenerator-runtime": "0.13.9",
"reselect": "4.0.0",
"universal-cookie": "4.0.4"
},
"devDependencies": {
"@edx/frontend-build": "5.6.9",
"@testing-library/jest-dom": "5.11.9",
"@testing-library/react": "10.4.9",
"codecov": "3.7.2",
"enzyme": "3.10.0",
"@edx/frontend-build": "8.0.4",
"@testing-library/jest-dom": "5.14.1",
"@testing-library/react": "12.1.0",
"codecov": "3.8.3",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"es-check": "5.0.0",
"husky": "3.0.9",
"react-test-renderer": "16.8.6",
"es-check": "6.0.0",
"react-test-renderer": "16.14.0",
"reactifex": "1.1.1",
"redux-mock-store": "1.5.4"
}

View File

@@ -4,7 +4,7 @@
<title>Account | <%= process.env.SITE_NAME %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="<%=webpackConfig.output.publicPath%>favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
<% if (process.env.OPTIMIZELY_PROJECT_ID) { %>
<script
src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"

View File

@@ -1,15 +1,28 @@
{
"extends": [
"config:base",
"schedule:weekly",
":automergeLinters",
":automergeTesters",
":automergeMinor",
":noUnscheduledUpdates",
":semanticCommits"
":automergeTesters",
":enableVulnerabilityAlerts",
":rebaseStalePrs",
":semanticCommits",
":updateNotScheduled"
],
"rebaseStalePrs": true,
"schedule": [
"every weekend"
"packageRules": [
{
"matchDepTypes": [
"devDependencies"
],
"matchUpdateTypes": [
"lockFileMaintenance",
"minor",
"patch",
"pin"
],
"automerge": true
}
],
"timezone": "America/New_York"
}

View File

@@ -13,20 +13,30 @@ import {
getCountryList,
getLanguageList,
} from '@edx/frontend-platform/i18n';
import { Hyperlink } from '@edx/paragon';
import {
Button, Hyperlink, Icon, Alert,
} from '@edx/paragon';
import { CheckCircle, Error, WarningFilled } from '@edx/paragon/icons';
import messages from './AccountSettingsPage.messages';
import { fetchSettings, saveSettings, updateDraft } from './data/actions';
import {
fetchSettings,
saveMultipleSettings,
saveSettings,
updateDraft,
beginNameChange,
} from './data/actions';
import { accountSettingsPageSelector } from './data/selectors';
import PageLoading from './PageLoading';
import Alert from './Alert';
import JumpNav from './JumpNav';
import DeleteAccount from './delete-account';
import EditableField from './EditableField';
import ResetPassword from './reset-password';
import NameChange from './name-change';
import ThirdPartyAuth from './third-party-auth';
import BetaLanguageBanner from './BetaLanguageBanner';
import EmailField from './EmailField';
import OneTimeDismissibleAlert from './OneTimeDismissibleAlert';
import {
YEAR_OF_BIRTH_OPTIONS,
EDUCATION_LEVELS,
@@ -136,14 +146,63 @@ class AccountSettingsPage extends React.Component {
})),
}));
sortDates = (a, b) => {
const aTimeSinceEpoch = new Date(a).getTime();
const bTimeSinceEpoch = new Date(b).getTime();
return bTimeSinceEpoch - aTimeSinceEpoch;
}
verificationFailureAcked = verifiedNameObj => (
localStorage.getItem(
`dismissedVerifiedNameFailureMessage-${verifiedNameObj.verified_name}-${new Date(verifiedNameObj.created).valueOf()}`,
) === 'true'
)
sortVerifiedNameRecords = verifiedNameHistory => {
if (Array.isArray(verifiedNameHistory)) {
return [...verifiedNameHistory].sort(this.sortDates);
}
return [];
}
handleEditableFieldChange = (name, value) => {
this.props.updateDraft(name, value);
};
}
handleSubmit = (formId, values) => {
this.props.saveSettings(formId, values);
}
handleSubmitProfileName = (formId, values) => {
if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {
this.props.saveMultipleSettings([
{
formId,
commitValues: values,
},
{
formId: 'useVerifiedNameForCerts',
commitValues: this.props.formValues.useVerifiedNameForCerts,
},
], formId);
} else {
this.props.saveSettings(formId, values);
}
};
handleSubmitVerifiedName = (formId, values) => {
if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {
this.props.saveSettings('useVerifiedNameForCerts', this.props.formValues.useVerifiedNameForCerts);
}
if (values !== this.props.committedValues?.verified_name) {
this.props.beginNameChange(formId);
} else {
this.props.saveSettings(formId, values);
}
}
isEditable(fieldName) {
return !this.props.staticFields.includes(fieldName);
}
@@ -161,7 +220,7 @@ class AccountSettingsPage extends React.Component {
return (
<div>
<Alert className="alert alert-danger" role="alert">
<Alert variant="danger">
<FormattedMessage
id="account.settings.message.duplicate.tpa.provider"
defaultMessage="The {provider} account you selected is already linked to another {siteName} account."
@@ -183,7 +242,7 @@ class AccountSettingsPage extends React.Component {
return (
<div>
<Alert className="alert alert-primary" role="alert">
<Alert variant="info">
<FormattedMessage
id="account.settings.message.managed.settings"
defaultMessage="Your profile settings are managed by {managerTitle}. Contact your administrator or {support} for help."
@@ -206,6 +265,155 @@ class AccountSettingsPage extends React.Component {
);
}
renderFullNameHelpText = (verifiedNameObj) => {
const { status, profile_name: profileName } = verifiedNameObj;
if (
!this.props.verifiedNameHistory
|| !this.props.verifiedNameEnabled
) {
return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text']);
}
switch (status) {
case 'submitted':
return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.submitted']);
case 'denied':
if (this.props.committedValues.name !== profileName && !this.verificationFailureAcked(verifiedNameObj)) {
return (
<span className="text-danger">
{ `${this.props.intl.formatMessage(messages['account.settings.field.full.name.failure.message'], { profileName })}` }
<a href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied">
{this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
</a>
</span>
);
}
/* falls through */
default:
if (this.props.committedValues.useVerifiedNameForCerts) {
return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.non.certificate']);
}
return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.certificate']);
}
}
renderVerifiedNameSuccessMessage = (verifiedName, created) => {
const dateValue = new Date(created).valueOf();
const id = `dismissedVerifiedNameSuccessMessage-${verifiedName}-${dateValue}`;
return (
<OneTimeDismissibleAlert
id={id}
variant="success"
icon={CheckCircle}
header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message.header'])}
body={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message'])}
/>
);
}
renderVerifiedNameFailureMessage = (verifiedName, created) => {
const dateValue = new Date(created).valueOf();
const id = `dismissedVerifiedNameFailureMessage-${verifiedName}-${dateValue}`;
return (
<OneTimeDismissibleAlert
id={id}
variant="danger"
icon={Error}
header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.header'])}
body={
(
<>
<div className="d-flex flex-row">
{this.props.intl.formatMessage(
messages['account.settings.field.name.verified.failure.message'], {
verifiedName,
},
)}
</div>
<div className="d-flex flex-row-reverse mt-3">
<Button
variant="primary"
href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied"
>
{this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
</Button>{' '}
</div>
</>
)
}
/>
);
}
renderVerifiedNameSubmittedMessage = () => (
<Alert
variant="warning"
icon={WarningFilled}
>
<Alert.Heading>
{this.props.intl.formatMessage(messages['account.settings.field.name.verified.submitted.message.header'])}
</Alert.Heading>
<p>
{this.props.intl.formatMessage(messages['account.settings.field.name.verified.submitted.message'])}
</p>
</Alert>
)
renderVerifiedNameMessage = verifiedNameRecord => {
const { created, status, verified_name: verifiedName } = verifiedNameRecord;
switch (status) {
case 'approved':
return this.renderVerifiedNameSuccessMessage(verifiedName, created);
case 'denied':
return this.renderVerifiedNameFailureMessage(verifiedName, created);
case 'submitted':
return this.renderVerifiedNameSubmittedMessage();
default:
return null;
}
}
renderVerifiedNameIcon = (status) => {
switch (status) {
case 'approved':
return (<Icon src={CheckCircle} className="ml-1" style={{ height: '18px', width: '18px', color: 'green' }} />);
case 'submitted':
return (<Icon src={WarningFilled} className="ml-1" style={{ height: '18px', width: '18px', color: 'yellow' }} />);
default:
return null;
}
}
renderVerifiedNameHelpText = (verifiedNameObj) => {
const { status, verified_name: verifiedName } = verifiedNameObj;
switch (status) {
case 'approved':
if (this.props.committedValues.useVerifiedNameForCerts) {
return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.certificate']));
}
return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.verified']));
case 'submitted':
return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.submitted']));
case 'denied':
if (!this.verificationFailureAcked(verifiedNameObj)) {
return (
<span className="text-danger">
{ `${this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message'], { verifiedName })} ` }
<a href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied">
{this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
</a>
</span>
);
}
/* falls through */
default:
return null;
}
}
renderEmptyStaticFieldMessage() {
if (this.isManagedProfile()) {
return this.props.intl.formatMessage(messages['account.settings.static.field.empty'], {
@@ -215,6 +423,13 @@ class AccountSettingsPage extends React.Component {
return this.props.intl.formatMessage(messages['account.settings.static.field.empty.no.admin']);
}
renderNameChangeModal() {
if (this.props.nameChangeModal && this.props.nameChangeModal.formId) {
return <NameChange targetFormId={this.props.nameChangeModal.formId} />;
}
return null;
}
renderSecondaryEmailField(editableFieldProps) {
if (!this.props.formValues.secondary_email_enabled) {
return null;
@@ -261,6 +476,8 @@ class AccountSettingsPage extends React.Component {
// Show State field only if the country is US (could include Canada later)
const showState = this.props.formValues.country === COUNTRY_WITH_STATES;
const { verifiedName, verifiedNameEnabled, mostRecentVerifiedName } = this.props;
const timeZoneOptions = this.getLocalizedTimeZoneOptions(
this.props.timeZoneOptions,
this.props.countryTimeZoneOptions,
@@ -268,16 +485,22 @@ class AccountSettingsPage extends React.Component {
);
const hasLinkedTPA = findIndex(this.props.tpaProviders, provider => provider.connected) >= 0;
return (
<>
<div className="account-section" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
{
verifiedNameEnabled && this.props.mostRecentVerifiedName
&& this.renderVerifiedNameMessage(this.props.mostRecentVerifiedName)
}
<h2 className="section-heading">
{this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
</h2>
<p>{this.props.intl.formatMessage(messages['account.settings.section.account.information.description'])}</p>
{this.renderManagedProfileMessage()}
{this.renderNameChangeModal()}
<EditableField
name="username"
type="text"
@@ -293,17 +516,59 @@ class AccountSettingsPage extends React.Component {
<EditableField
name="name"
type="text"
value={this.props.formValues.name}
value={
verifiedNameEnabled
&& verifiedName?.status === 'submitted'
&& this.props.formValues.pending_name_change
? this.props.formValues.pending_name_change
: this.props.formValues.name
}
label={this.props.intl.formatMessage(messages['account.settings.field.full.name'])}
emptyLabel={
this.isEditable('name')
? this.props.intl.formatMessage(messages['account.settings.field.full.name.empty'])
: this.renderEmptyStaticFieldMessage()
}
helpText={this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])}
isEditable={this.isEditable('name')}
{...editableFieldProps}
helpText={
verifiedNameEnabled && mostRecentVerifiedName
? this.renderFullNameHelpText(mostRecentVerifiedName)
: this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])
}
isEditable={
verifiedNameEnabled && verifiedName
? this.isEditable('verifiedName') && this.isEditable('name')
: this.isEditable('name')
}
isGrayedOut={
verifiedNameEnabled && verifiedName && !this.isEditable('verifiedName')
}
onChange={this.handleEditableFieldChange}
onSubmit={this.handleSubmitProfileName}
/>
{verifiedNameEnabled && verifiedName
&& (
<EditableField
name="verified_name"
type="text"
value={this.props.formValues.verified_name}
label={
(
<div className="d-flex">
{this.props.intl.formatMessage(messages['account.settings.field.name.verified'])}
{
this.renderVerifiedNameIcon(verifiedName.status)
}
</div>
)
}
helpText={this.renderVerifiedNameHelpText(mostRecentVerifiedName)}
isEditable={this.isEditable('verifiedName')}
isGrayedOut={!this.isEditable('verifiedName')}
onChange={this.handleEditableFieldChange}
onSubmit={this.handleSubmitVerifiedName}
/>
)}
<EmailField
name="email"
label={this.props.intl.formatMessage(messages['account.settings.field.email'])}
@@ -566,6 +831,7 @@ AccountSettingsPage.propTypes = {
level_of_education: PropTypes.string,
gender: PropTypes.string,
language_proficiencies: PropTypes.string,
pending_name_change: PropTypes.string,
phone_number: PropTypes.string,
social_link_linkedin: PropTypes.string,
social_link_facebook: PropTypes.string,
@@ -578,7 +844,18 @@ AccountSettingsPage.propTypes = {
}),
state: PropTypes.string,
shouldDisplayDemographicsSection: PropTypes.bool,
useVerifiedNameForCerts: PropTypes.bool.isRequired,
verified_name: PropTypes.string,
}).isRequired,
committedValues: PropTypes.shape({
useVerifiedNameForCerts: PropTypes.bool,
verified_name: PropTypes.string,
name: PropTypes.string,
}),
drafts: PropTypes.shape({}),
formErrors: PropTypes.shape({
name: PropTypes.string,
}),
siteLanguage: PropTypes.shape({
previousValue: PropTypes.string,
draft: PropTypes.string,
@@ -602,15 +879,43 @@ AccountSettingsPage.propTypes = {
})),
fetchSiteLanguages: PropTypes.func.isRequired,
updateDraft: PropTypes.func.isRequired,
saveMultipleSettings: PropTypes.func.isRequired,
saveSettings: PropTypes.func.isRequired,
fetchSettings: PropTypes.func.isRequired,
tpaProviders: PropTypes.arrayOf(PropTypes.object),
beginNameChange: PropTypes.func.isRequired,
tpaProviders: PropTypes.arrayOf(PropTypes.shape({
connected: PropTypes.bool,
})),
nameChangeModal: PropTypes.shape({
formId: PropTypes.string,
}),
verifiedNameEnabled: PropTypes.bool,
verifiedName: PropTypes.shape({
verified_name: PropTypes.string,
status: PropTypes.string,
}),
mostRecentVerifiedName: PropTypes.shape({
verified_name: PropTypes.string,
status: PropTypes.string,
}),
verifiedNameHistory: PropTypes.arrayOf(
PropTypes.shape({
verified_name: PropTypes.string,
status: PropTypes.string,
}),
),
};
AccountSettingsPage.defaultProps = {
loading: false,
loaded: false,
loadingError: null,
committedValues: {
useVerifiedNameForCerts: false,
verified_name: null,
},
drafts: {},
formErrors: {},
siteLanguage: null,
siteLanguageOptions: [],
timeZoneOptions: [],
@@ -620,11 +925,18 @@ AccountSettingsPage.defaultProps = {
tpaProviders: [],
isActive: true,
secondary_email_enabled: false,
nameChangeModal: {},
verifiedNameEnabled: false,
verifiedName: null,
mostRecentVerifiedName: {},
verifiedNameHistory: [],
};
export default connect(accountSettingsPageSelector, {
fetchSettings,
saveSettings,
saveMultipleSettings,
updateDraft,
fetchSiteLanguages,
beginNameChange,
})(injectIntl(AccountSettingsPage));

View File

@@ -91,6 +91,86 @@ const messages = defineMessages({
defaultMessage: 'The name that is used for ID verification and that appears on your certificates.',
description: 'Help text for the account settings name field.',
},
'account.settings.field.full.name.help.text.non.certificate': {
id: 'account.settings.field.full.name.help.text.non.certificate',
defaultMessage: 'The name that appears on your public profile.',
description: 'Help text for the account settings name field.',
},
'account.settings.field.full.name.help.text.certificate': {
id: 'account.settings.field.full.name.help.text.certificate',
defaultMessage: 'This name is selected to appear on your certificates and public-facing records.',
description: 'Help text for the account settings name field.',
},
'account.settings.field.name.verified': {
id: 'account.settings.field.name.verified',
defaultMessage: 'Verified name',
description: 'Label for account settings verified name field.',
},
'account.settings.field.name.verified.help.text.verified': {
id: 'account.settings.field.name.verified.help.text.verified',
defaultMessage: 'This name has been verified by government ID.',
description: 'Help text for the account settings verified name field when the name is verified.',
},
'account.settings.field.name.verified.help.text.certificate': {
id: 'account.settings.field.name.verified.help.text.certificate',
defaultMessage: 'This name has been verified by government ID and selected to appear on your certificates and public-facing records.',
description: 'Help text for the account settings verified name field when the name is selected for certificates.',
},
'account.settings.field.name.verified.help.text.submitted': {
id: 'account.settings.field.name.verified.help.text.submitted',
defaultMessage: 'Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.',
description: 'Help text for the account settings verified name field when a verified name has been submitted.',
},
'account.settings.field.name.verified.verification.alert': {
id: 'account.settings.field.name.verified.verification.help',
defaultMessage: 'Enter your name as it appears on your government-issued ID.',
description: 'Form label instructing the user to enter the name on their ID.',
},
'account.settings.field.full.name.help.text.submitted': {
id: 'account.settings.field.full.name.help.text.submitted',
defaultMessage: 'When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.',
description: 'Help text for the account settings full name field when a verified name has been submitted.',
},
'account.settings.field.full.name.failure.message': {
id: 'account.settings.field.name.verified.failure.message',
defaultMessage: 'Your Full name change attempt, “{profileName}”, did not pass ID verification. Your previous Full name settings have been restored. Try changing your Full name again. ',
description: 'The body of the failure alert indicating that a user\'s name was not able to be changed',
},
'account.settings.field.name.verified.success.message': {
id: 'account.settings.field.name.verified.success.message',
defaultMessage: 'Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.',
description: 'The body of the success alert indicating that a user\'s name has been verified',
},
'account.settings.field.name.verified.success.message.header': {
id: 'account.settings.field.name.verified.success.message.header',
defaultMessage: 'Your name change request is complete!',
description: 'The header of the success alert indicating that a user\'s name has been verified',
},
'account.settings.field.name.verified.failure.message': {
id: 'account.settings.field.name.verified.failure.message',
defaultMessage: 'Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.',
description: 'The body of the failure alert indicating that a user\'s name was not able to be verified',
},
'account.settings.field.name.verified.failure.message.header': {
id: 'account.settings.field.name.verified.failure.message.header',
defaultMessage: 'We were not able to verify your identity.',
description: 'The header of the failure alert indicating that a user\'s name was not able to be verified',
},
'account.settings.field.name.verified.failure.message.help.link': {
id: 'account.settings.field.name.verified.failure.message.help.link',
defaultMessage: 'Learn more about ID verification',
description: 'The text of the button displayed when a user\'s name was not able to be verified, intended to direct the user to a help article about ID verification.',
},
'account.settings.field.name.verified.submitted.message': {
id: 'account.settings.field.name.verified.submitted.message',
defaultMessage: 'Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.',
description: 'The body of the submitted alert indicating that a user\'s name has been submitted for verification',
},
'account.settings.field.name.verified.submitted.message.header': {
id: 'account.settings.field.name.verified.submitted.message.header',
defaultMessage: 'Your name change request is almost complete!',
description: 'The header of the submitted alert indicating that a user\'s name has been submitted for verification',
},
'account.settings.field.email': {
id: 'account.settings.field.email',
defaultMessage: 'Email address (Sign in)',

View File

@@ -16,6 +16,7 @@ import {
closeForm,
} from './data/actions';
import { editableFieldSelector } from './data/selectors';
import CertificatePreference from './certificate-preference/CertificatePreference';
function EditableField(props) {
const {
@@ -37,6 +38,7 @@ function EditableField(props) {
onChange,
isEditing,
isEditable,
isGrayedOut,
intl,
...others
} = props;
@@ -102,54 +104,57 @@ function EditableField(props) {
expression={isEditing ? 'editing' : 'default'}
cases={{
editing: (
<form onSubmit={handleSubmit}>
<ValidationFormGroup
for={id}
invalid={error != null}
invalidMessage={error}
helpText={helpText}
>
<label className="h6 d-block" htmlFor={id}>{label}</label>
<Input
data-hj-suppress
name={name}
id={id}
type={type}
value={value}
onChange={handleChange}
options={options}
{...others}
/>
<>{others.children}</>
</ValidationFormGroup>
<p>
<StatefulButton
type="submit"
className="mr-2"
state={saveState}
labels={{
default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
}}
onClick={(e) => {
// Swallow clicks if the state is pending.
// We do this instead of disabling the button to prevent
// it from losing focus (disabled elements cannot have focus).
// Disabling it would causes upstream issues in focus management.
// Swallowing the onSubmit event on the form would be better, but
// we would have to add that logic for every field given our
// current structure of the application.
if (saveState === 'pending') { e.preventDefault(); }
}}
disabledStates={[]}
/>
<Button
variant="outline-primary"
onClick={handleCancel}
<>
<form onSubmit={handleSubmit}>
<ValidationFormGroup
for={id}
invalid={error != null}
invalidMessage={error}
helpText={helpText}
>
{intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
</Button>
</p>
</form>
<label className="h6 d-block" htmlFor={id}>{label}</label>
<Input
data-hj-suppress
name={name}
id={id}
type={type}
value={value}
onChange={handleChange}
options={options}
{...others}
/>
<>{others.children}</>
</ValidationFormGroup>
<p>
<StatefulButton
type="submit"
className="mr-2"
state={saveState}
labels={{
default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
}}
onClick={(e) => {
// Swallow clicks if the state is pending.
// We do this instead of disabling the button to prevent
// it from losing focus (disabled elements cannot have focus).
// Disabling it would causes upstream issues in focus management.
// Swallowing the onSubmit event on the form would be better, but
// we would have to add that logic for every field given our
// current structure of the application.
if (saveState === 'pending') { e.preventDefault(); }
}}
disabledStates={[]}
/>
<Button
variant="outline-primary"
onClick={handleCancel}
>
{intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
</Button>
</p>
</form>
{['name', 'verified_name'].includes(name) && <CertificatePreference fieldName={name} />}
</>
),
default: (
<div className="form-group">
@@ -161,7 +166,7 @@ function EditableField(props) {
</Button>
) : null}
</div>
<p data-hj-suppress>{renderValue(value)}</p>
<p data-hj-suppress className={isGrayedOut ? 'grayed-out' : null}>{renderValue(value)}</p>
<p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
</div>
),
@@ -172,7 +177,7 @@ function EditableField(props) {
EditableField.propTypes = {
name: PropTypes.string.isRequired,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
emptyLabel: PropTypes.node,
type: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -196,6 +201,7 @@ EditableField.propTypes = {
onChange: PropTypes.func.isRequired,
isEditing: PropTypes.bool,
isEditable: PropTypes.bool,
isGrayedOut: PropTypes.bool,
intl: intlShape.isRequired,
};
@@ -211,6 +217,7 @@ EditableField.defaultProps = {
helpText: undefined,
isEditing: false,
isEditable: true,
isGrayedOut: false,
userSuppliedValue: undefined,
};

View File

@@ -0,0 +1,43 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Alert } from '@edx/paragon';
export default function OneTimeDismissibleAlert(props) {
const [dismissed, setDismissed] = useState(localStorage.getItem(props.id) !== 'true');
const onClose = () => {
localStorage.setItem(props.id, 'true');
setDismissed(false);
};
return (
<Alert
variant={props.variant}
dismissible
icon={props.icon}
onClose={onClose}
show={dismissed}
>
<Alert.Heading>{props.header}</Alert.Heading>
<p>
{props.body}
</p>
</Alert>
);
}
OneTimeDismissibleAlert.propTypes = {
id: PropTypes.string.isRequired,
variant: PropTypes.string,
icon: PropTypes.func,
header: PropTypes.string,
body: PropTypes.string,
};
OneTimeDismissibleAlert.defaultProps = {
variant: 'success',
icon: undefined,
header: undefined,
body: undefined,
};

View File

@@ -50,4 +50,8 @@
line-height: 1.6rem;
}
}
.grayed-out{
opacity: 0.6; /* Real browsers */
filter: alpha(opacity = 60); /* MSIE */
}
}

View File

@@ -0,0 +1,175 @@
import React, { useState, useEffect } from 'react';
import { connect, useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import {
ActionRow,
Form,
ModalDialog,
StatefulButton,
} from '@edx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
closeForm,
resetDrafts,
saveSettings,
updateDraft,
} from '../data/actions';
import { certPreferenceSelector } from '../data/selectors';
import commonMessages from '../AccountSettingsPage.messages';
import messages from './messages';
function CertificatePreference({
intl,
fieldName,
originalFullName,
originalVerifiedName,
saveState,
useVerifiedNameForCerts,
verifiedNameEnabled,
}) {
if (!verifiedNameEnabled || !originalVerifiedName) {
// If the user doesn't have an approved verified name, do not display this component
return null;
}
const dispatch = useDispatch();
const [checked, setChecked] = useState(false);
const [modalIsOpen, setModalIsOpen] = useState(false);
const formId = 'useVerifiedNameForCerts';
function handleCheckboxChange() {
if (!checked) {
if (fieldName === 'verified_name') {
dispatch(updateDraft(formId, true));
} else {
dispatch(updateDraft(formId, false));
}
} else {
setModalIsOpen(true);
}
}
function handleCancel() {
setModalIsOpen(false);
dispatch(resetDrafts());
}
function handleModalChange(e) {
if (e.target.value === 'fullName') {
dispatch(updateDraft(formId, false));
} else {
dispatch(updateDraft(formId, true));
}
}
function handleSubmit(e) {
e.preventDefault();
if (saveState === 'pending') {
return;
}
dispatch(saveSettings(formId, useVerifiedNameForCerts));
}
useEffect(() => {
if (fieldName === 'verified_name') {
setChecked(useVerifiedNameForCerts);
} else {
setChecked(!useVerifiedNameForCerts);
}
}, [useVerifiedNameForCerts]);
useEffect(() => {
if (modalIsOpen && saveState === 'complete') {
setModalIsOpen(false);
dispatch(closeForm(fieldName));
}
}, [modalIsOpen, saveState]);
return (
<>
<Form.Checkbox className="mt-1 mb-4" checked={checked} onChange={handleCheckboxChange}>
{intl.formatMessage(messages['account.settings.field.name.checkbox.certificate.select'])}
</Form.Checkbox>
<ModalDialog
title={intl.formatMessage(messages['account.settings.field.name.modal.certificate.title'])}
isOpen={modalIsOpen}
onClose={handleCancel}
size="lg"
hasCloseButton
isFullscreenOnMobile
>
<Form onSubmit={handleSubmit}>
<ModalDialog.Header>
<ModalDialog.Title>
{intl.formatMessage(messages['account.settings.field.name.modal.certificate.title'])}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body>
<Form.Group className="mb-4">
<Form.Label>
{intl.formatMessage(messages['account.settings.field.name.modal.certificate.select'])}
</Form.Label>
<Form.RadioSet
name={formId}
value={useVerifiedNameForCerts ? 'verifiedName' : 'fullName'}
onChange={handleModalChange}
>
<Form.Radio value="fullName">
{originalFullName}{' '}
({intl.formatMessage(messages['account.settings.field.name.modal.certificate.option.full'])})
</Form.Radio>
<Form.Radio value="verifiedName">
{originalVerifiedName}{' '}
({intl.formatMessage(messages['account.settings.field.name.modal.certificate.option.verified'])})
</Form.Radio>
</Form.RadioSet>
</Form.Group>
</ModalDialog.Body>
<ModalDialog.Footer>
<ActionRow>
<ModalDialog.CloseButton variant="outline-primary" disabled={saveState === 'pending'}>
{intl.formatMessage(commonMessages['account.settings.editable.field.action.cancel'])}
</ModalDialog.CloseButton>
<StatefulButton
type="submit"
state={saveState}
labels={{
default: intl.formatMessage(messages['account.settings.field.name.modal.certificate.button.choose']),
}}
disabledStates={[]}
/>
</ActionRow>
</ModalDialog.Footer>
</Form>
</ModalDialog>
</>
);
}
CertificatePreference.propTypes = {
intl: intlShape.isRequired,
fieldName: PropTypes.string.isRequired,
originalFullName: PropTypes.string,
originalVerifiedName: PropTypes.string,
saveState: PropTypes.string,
useVerifiedNameForCerts: PropTypes.bool,
verifiedNameEnabled: PropTypes.bool,
};
CertificatePreference.defaultProps = {
originalFullName: '',
originalVerifiedName: '',
saveState: null,
useVerifiedNameForCerts: false,
verifiedNameEnabled: false,
};
export default connect(certPreferenceSelector)(injectIntl(CertificatePreference));

View File

@@ -0,0 +1,22 @@
import { getConfig } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { handleRequestError } from '../../data/utils';
// eslint-disable-next-line import/prefer-default-export
export async function postVerifiedNameConfig(username, commitValues) {
const requestConfig = { headers: { Accept: 'application/json' } };
const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name/config`;
const { useVerifiedNameForCerts } = commitValues;
const postValues = {
username,
use_verified_name_for_certs: useVerifiedNameForCerts,
};
const { data } = await getAuthenticatedHttpClient()
.post(requestUrl, postValues, requestConfig)
.catch(error => handleRequestError(error));
return data;
}

View File

@@ -0,0 +1,36 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
'account.settings.field.name.checkbox.certificate.select': {
id: 'account.settings.field.name.certificate.select',
defaultMessage: 'If checked, this name will appear on your certificates and public-facing records.',
description: 'Label for checkbox describing that the selected name will appear on the users certificates.',
},
'account.settings.field.name.modal.certificate.title': {
id: 'account.settings.field.name.modal.certificate.title',
defaultMessage: 'Choose a preferred name for certificates and public-facing records',
description: 'Title instructing the user to choose a preferred name.',
},
'account.settings.field.name.modal.certificate.select': {
id: 'account.settings.field.name.modal.certificate.select',
defaultMessage: 'Select a name',
description: 'Label instructing the user to select a name.',
},
'account.settings.field.name.modal.certificate.option.full': {
id: 'account.settings.field.name.modal.certificate.option.full',
defaultMessage: 'Full Name',
description: 'Option representing the users full name.',
},
'account.settings.field.name.modal.certificate.option.verified': {
id: 'account.settings.field.name.modal.certificate.option.verified',
defaultMessage: 'Verified Name',
description: 'Option representing the users verified name.',
},
'account.settings.field.name.modal.certificate.button.choose': {
id: 'account.settings.field.name.modal.certificate.button.choose',
defaultMessage: 'Choose name',
description: 'Button to confirm the users name choice.',
},
});
export default messages;

View File

@@ -0,0 +1,174 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import {
fireEvent,
render,
screen,
} from '@testing-library/react';
import { createMemoryHistory } from 'history';
import * as auth from '@edx/frontend-platform/auth';
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
ReactDOM.createPortal = node => node;
import CertificatePreference from '../CertificatePreference'; // eslint-disable-line import/first
const mockDispatch = jest.fn();
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useDispatch: () => mockDispatch,
}));
jest.mock('@edx/frontend-platform/auth');
jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));
const history = createMemoryHistory();
const IntlCertificatePreference = injectIntl(CertificatePreference);
const mockStore = configureStore();
describe('NameChange', () => {
let props = {};
let store = {};
const formId = 'useVerifiedNameForCerts';
const updateDraft = 'UPDATE_DRAFT';
const labelText = 'If checked, this name will appear on your certificates and public-facing records.';
const reduxWrapper = children => (
<Router history={history}>
<IntlProvider locale="en">
<Provider store={store}>{children}</Provider>
</IntlProvider>
</Router>
);
beforeEach(() => {
store = mockStore();
props = {
fieldName: 'name',
originalFullName: 'Ed X',
originalVerifiedName: 'edX Verified',
saveState: null,
useVerifiedNameForCerts: false,
verifiedNameEnabled: true,
intl: {},
};
auth.getAuthenticatedHttpClient = jest.fn(() => ({
patch: async () => ({
data: { status: 200 },
catch: () => {},
}),
}));
auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 }));
});
afterEach(() => jest.clearAllMocks());
it('does not render if there is no verified name', () => {
props = {
...props,
originalVerifiedName: '',
};
const wrapper = render(reduxWrapper(<IntlCertificatePreference {...props} />));
expect(wrapper).toMatchSnapshot();
});
it('does not trigger modal when checking empty checkbox, and updates draft immediately', () => {
props = {
...props,
useVerifiedNameForCerts: true,
};
render(reduxWrapper(<IntlCertificatePreference {...props} />));
const checkbox = screen.getByLabelText(labelText);
expect(checkbox.checked).toEqual(false);
fireEvent.click(checkbox);
expect(screen.queryByRole('radiogroup')).toBeNull();
expect(mockDispatch).toHaveBeenCalledWith({
payload: { name: formId, value: false },
type: updateDraft,
});
});
it('triggers modal when attempting to uncheck checkbox', () => {
render(reduxWrapper(<IntlCertificatePreference {...props} />));
const checkbox = screen.getByLabelText(labelText);
expect(checkbox.checked).toEqual(true);
fireEvent.click(checkbox);
expect(mockDispatch).not.toHaveBeenCalled();
screen.getByRole('radiogroup');
});
it('updates draft when changing radio value', () => {
render(reduxWrapper(<IntlCertificatePreference {...props} />));
const checkbox = screen.getByLabelText(labelText);
fireEvent.click(checkbox);
const fullNameOption = screen.getByLabelText('Ed X (Full Name)');
const verifiedNameOption = screen.getByLabelText('edX Verified (Verified Name)');
expect(fullNameOption.checked).toEqual(true);
expect(verifiedNameOption.checked).toEqual(false);
fireEvent.click(verifiedNameOption);
expect(mockDispatch).toHaveBeenCalledWith({
payload: { name: formId, value: true },
type: updateDraft,
});
});
it('clears draft on cancel', () => {
render(reduxWrapper(<IntlCertificatePreference {...props} />));
const checkbox = screen.getByLabelText(labelText);
fireEvent.click(checkbox);
const cancelButton = screen.getByText('Cancel');
fireEvent.click(cancelButton);
expect(mockDispatch).toHaveBeenCalledWith({ type: 'RESET_DRAFTS' });
expect(screen.queryByRole('radiogroup')).toBeNull();
});
it('submits', () => {
render(reduxWrapper(<IntlCertificatePreference {...props} />));
const checkbox = screen.getByLabelText(labelText);
fireEvent.click(checkbox);
const submitButton = screen.getByText('Choose name');
fireEvent.click(submitButton);
expect(mockDispatch).toHaveBeenCalledWith({
payload: { formId, commitValues: false },
type: 'ACCOUNT_SETTINGS__SAVE_SETTINGS',
});
});
it('checks box for verified name', () => {
props = {
...props,
fieldName: 'verified_name',
useVerifiedNameForCerts: true,
};
render(reduxWrapper(<IntlCertificatePreference {...props} />));
const checkbox = screen.getByLabelText(labelText);
expect(checkbox.checked).toEqual(true);
});
});

View File

@@ -0,0 +1,62 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NameChange does not render if there is no verified name 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div />
</body>,
"container": <div />,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

View File

@@ -9,6 +9,7 @@ export const OPEN_FORM = 'OPEN_FORM';
export const CLOSE_FORM = 'CLOSE_FORM';
export const UPDATE_DRAFT = 'UPDATE_DRAFT';
export const RESET_DRAFTS = 'RESET_DRAFTS';
export const BEGIN_NAME_CHANGE = 'BEGIN_NAME_CHANGE';
// FETCH SETTINGS ACTIONS
@@ -25,6 +26,7 @@ export const fetchSettingsSuccess = ({
thirdPartyAuthProviders,
profileDataManager,
timeZones,
verifiedNameHistory,
}) => ({
type: FETCH_SETTINGS.SUCCESS,
payload: {
@@ -32,6 +34,7 @@ export const fetchSettingsSuccess = ({
thirdPartyAuthProviders,
profileDataManager,
timeZones,
verifiedNameHistory,
},
});
@@ -68,6 +71,10 @@ export const resetDrafts = () => ({
type: RESET_DRAFTS,
});
export const beginNameChange = (formId) => ({
type: BEGIN_NAME_CHANGE,
payload: { formId },
});
// SAVE SETTINGS ACTIONS
export const saveSettings = (formId, commitValues) => ({

View File

@@ -8,11 +8,13 @@ import {
UPDATE_DRAFT,
RESET_DRAFTS,
SAVE_MULTIPLE_SETTINGS,
BEGIN_NAME_CHANGE,
} from './actions';
import { reducer as deleteAccountReducer, DELETE_ACCOUNT } from '../delete-account';
import { reducer as siteLanguageReducer, FETCH_SITE_LANGUAGES } from '../site-language';
import { reducer as resetPasswordReducer, RESET_PASSWORD } from '../reset-password';
import { reducer as nameChangeReducer, REQUEST_NAME_CHANGE } from '../name-change';
import { reducer as thirdPartyAuthReducer, DISCONNECT_AUTH } from '../third-party-auth';
export const defaultState = {
@@ -31,7 +33,13 @@ export const defaultState = {
deleteAccount: deleteAccountReducer(),
siteLanguage: siteLanguageReducer(),
resetPassword: resetPasswordReducer(),
nameChange: nameChangeReducer(),
thirdPartyAuth: thirdPartyAuthReducer(),
nameChangeModal: false,
verifiedName: null,
mostRecentVerifiedName: {},
verifiedNameHistory: {},
verifiedNameEnabled: false,
};
const reducer = (state = defaultState, action) => {
@@ -56,6 +64,7 @@ const reducer = (state = defaultState, action) => {
loading: false,
loaded: true,
loadingError: null,
verifiedNameHistory: action.payload.verifiedNameHistory,
};
case FETCH_SETTINGS.FAILURE:
return {
@@ -89,6 +98,7 @@ const reducer = (state = defaultState, action) => {
saveState: null,
errors: {},
drafts: {},
nameChangeModal: false,
};
}
return state;
@@ -106,6 +116,15 @@ const reducer = (state = defaultState, action) => {
drafts: {},
};
case BEGIN_NAME_CHANGE:
return {
...state,
saveState: 'error',
nameChangeModal: {
formId: action.payload.formId,
},
};
case SAVE_SETTINGS.BEGIN:
return {
...state,
@@ -119,7 +138,6 @@ const reducer = (state = defaultState, action) => {
values: { ...state.values, ...action.payload.values },
errors: {},
confirmationValues: {
...state.confirmationValues,
...action.payload.confirmationValues,
},
@@ -198,6 +216,15 @@ const reducer = (state = defaultState, action) => {
resetPassword: resetPasswordReducer(state.resetPassword, action),
};
case REQUEST_NAME_CHANGE.BEGIN:
case REQUEST_NAME_CHANGE.SUCCESS:
case REQUEST_NAME_CHANGE.FAILURE:
case REQUEST_NAME_CHANGE.RESET:
return {
...state,
nameChange: nameChangeReducer(state.nameChange, action),
};
case DISCONNECT_AUTH.BEGIN:
case DISCONNECT_AUTH.SUCCESS:
case DISCONNECT_AUTH.FAILURE:

View File

@@ -25,11 +25,13 @@ import {
saveMultipleSettingsBegin,
saveMultipleSettingsSuccess,
saveMultipleSettingsFailure,
beginNameChange,
} from './actions';
// Sub-modules
import { saga as deleteAccountSaga } from '../delete-account';
import { saga as resetPasswordSaga } from '../reset-password';
import { saga as nameChangeSaga } from '../name-change';
import {
saga as siteLanguageSaga,
patchPreferences,
@@ -38,7 +40,12 @@ import {
import { saga as thirdPartyAuthSaga } from '../third-party-auth';
// Services
import { getSettings, patchSettings, getTimeZones } from './service';
import {
getSettings,
patchSettings,
getTimeZones,
getVerifiedNameHistory,
} from './service';
export function* handleFetchSettings() {
try {
@@ -54,6 +61,8 @@ export function* handleFetchSettings() {
userId,
);
const verifiedNameHistory = yield call(getVerifiedNameHistory);
if (values.country) { yield put(fetchTimeZones(values.country)); }
yield put(fetchSettingsSuccess({
@@ -61,6 +70,7 @@ export function* handleFetchSettings() {
thirdPartyAuthProviders,
profileDataManager,
timeZones,
verifiedNameHistory,
}));
} catch (e) {
yield put(fetchSettingsFailure(e.message));
@@ -98,6 +108,9 @@ export function* handleSaveSettings(action) {
yield put(closeForm(action.payload.formId));
} catch (e) {
if (e.fieldErrors) {
if (Object.keys(e.fieldErrors).includes('name')) {
yield put(beginNameChange('name'));
}
yield put(saveSettingsFailure({ fieldErrors: e.fieldErrors }));
} else {
yield put(saveSettingsFailure(e.message));
@@ -126,6 +139,9 @@ export function* handleSaveMultipleSettings(action) {
}
} catch (e) {
if (e.fieldErrors) {
if (Object.keys(e.fieldErrors).includes('name')) {
yield put(beginNameChange('name'));
}
yield put(saveMultipleSettingsFailure({ fieldErrors: e.fieldErrors }));
} else {
yield put(saveMultipleSettingsFailure(e.message));
@@ -148,6 +164,7 @@ export default function* saga() {
deleteAccountSaga(),
siteLanguageSaga(),
resetPasswordSaga(),
nameChangeSaga(),
thirdPartyAuthSaga(),
]);
}

View File

@@ -1,5 +1,6 @@
import { createSelector, createStructuredSelector } from 'reselect';
import { siteLanguageListSelector, siteLanguageOptionsSelector } from '../site-language';
import { compareVerifiedNamesByCreatedDate } from '../../utils';
export const storeName = 'accountSettings';
@@ -7,9 +8,75 @@ export const accountSettingsSelector = state => ({ ...state[storeName] });
const editableFieldNameSelector = (state, props) => props.name;
const verifiedNameSettingsSelector = createSelector(
accountSettingsSelector,
accountSettings => ({
history: accountSettings.verifiedNameHistory.results,
verifiedNameEnabled: accountSettings?.verifiedNameHistory.verified_name_enabled,
useVerifiedNameForCerts: accountSettings?.verifiedNameHistory.use_verified_name_for_certs,
}),
);
const sortedVerifiedNameHistorySelector = createSelector(
verifiedNameSettingsSelector,
verifiedNameSettings => {
const { history } = verifiedNameSettings;
if (Array.isArray(history)) {
return history.sort(compareVerifiedNamesByCreatedDate);
}
return [];
},
);
const mostRecentVerifiedNameSelector = createSelector(
sortedVerifiedNameHistorySelector,
sortedHistory => (sortedHistory.length > 0 ? sortedHistory[0] : null),
);
const mostRecentApprovedVerifiedNameValueSelector = createSelector(
sortedVerifiedNameHistorySelector,
mostRecentVerifiedNameSelector,
(sortedHistory, mostRecentVerifiedName) => {
const approvedVerifiedNames = sortedHistory.filter(name => name.status === 'approved');
const approvedVerifiedName = approvedVerifiedNames.length > 0 ? approvedVerifiedNames[0] : null;
let verifiedName = null;
switch (mostRecentVerifiedName && mostRecentVerifiedName.status) {
case 'approved':
case 'denied':
case 'pending':
verifiedName = approvedVerifiedName;
break;
case 'submitted':
verifiedName = mostRecentVerifiedName;
break;
default:
verifiedName = null;
}
return verifiedName;
},
);
const valuesSelector = createSelector(
accountSettingsSelector,
accountSettings => accountSettings.values,
mostRecentApprovedVerifiedNameValueSelector,
(accountSettings, mostRecentApprovedVerifiedNameValue) => {
let useVerifiedNameForCerts = (
accountSettings.verifiedNameHistory?.use_verified_name_for_certs || false
);
if (Object.keys(accountSettings.confirmationValues).includes('useVerifiedNameForCerts')) {
useVerifiedNameForCerts = accountSettings.confirmationValues.useVerifiedNameForCerts;
}
return {
...accountSettings.values,
verified_name: mostRecentApprovedVerifiedNameValue?.verified_name,
useVerifiedNameForCerts,
};
},
);
const draftsSelector = createSelector(
@@ -50,6 +117,11 @@ const errorSelector = createSelector(
accountSettings => accountSettings.errors,
);
const nameChangeModalSelector = createSelector(
accountSettingsSelector,
accountSettings => accountSettings.nameChangeModal,
);
const saveStateSelector = createSelector(
accountSettingsSelector,
accountSettings => accountSettings.saveState,
@@ -69,7 +141,18 @@ export const profileDataManagerSelector = createSelector(
export const staticFieldsSelector = createSelector(
accountSettingsSelector,
accountSettings => (accountSettings.profileDataManager ? ['name', 'email', 'country'] : []),
mostRecentVerifiedNameSelector,
(accountSettings, verifiedName) => {
const staticFields = [];
if (accountSettings.profileDataManager) {
staticFields.push('name', 'email', 'country');
}
if (verifiedName && ['submitted'].includes(verifiedName.status)) {
staticFields.push('verifiedName');
}
return staticFields;
},
);
/**
@@ -85,7 +168,11 @@ const formValuesSelector = createSelector(
(values, drafts) => {
const formValues = {};
Object.entries(values).forEach(([name, value]) => {
formValues[name] = chooseFormValue(drafts[name], value) || '';
if (typeof value === 'boolean') {
formValues[name] = chooseFormValue(drafts[name], value);
} else {
formValues[name] = chooseFormValue(drafts[name], value) || '';
}
});
return formValues;
},
@@ -130,21 +217,37 @@ export const accountSettingsPageSelector = createSelector(
siteLanguageOptionsSelector,
siteLanguageSelector,
formValuesSelector,
valuesSelector,
draftsSelector,
errorSelector,
profileDataManagerSelector,
staticFieldsSelector,
timeZonesSelector,
countryTimeZonesSelector,
activeAccountSelector,
nameChangeModalSelector,
mostRecentApprovedVerifiedNameValueSelector,
mostRecentVerifiedNameSelector,
sortedVerifiedNameHistorySelector,
verifiedNameSettingsSelector,
(
accountSettings,
siteLanguageOptions,
siteLanguage,
formValues,
committedValues,
drafts,
formErrors,
profileDataManager,
staticFields,
timeZoneOptions,
countryTimeZoneOptions,
activeAccount,
nameChangeModal,
verifiedName,
mostRecentVerifiedName,
verifiedNameHistory,
verifiedNameSettings,
) => ({
siteLanguageOptions,
siteLanguage,
@@ -155,9 +258,41 @@ export const accountSettingsPageSelector = createSelector(
countryTimeZoneOptions,
isActive: activeAccount,
formValues,
committedValues,
drafts,
formErrors,
profileDataManager,
staticFields,
tpaProviders: accountSettings.thirdPartyAuth.providers,
nameChangeModal,
verifiedName,
mostRecentVerifiedName,
verifiedNameHistory,
verifiedNameEnabled: verifiedNameSettings?.verifiedNameEnabled,
}),
);
export const certPreferenceSelector = createSelector(
verifiedNameSettingsSelector,
valuesSelector,
formValuesSelector,
mostRecentApprovedVerifiedNameValueSelector,
saveStateSelector,
errorSelector,
(
verifiedNameSettings,
committedValues,
formValues,
mostRecentApprovedVerifiedNameValue,
saveState,
errors,
) => ({
originalFullName: committedValues?.name || '',
originalVerifiedName: mostRecentApprovedVerifiedNameValue?.verified_name || '',
useVerifiedNameForCerts: formValues.useVerifiedNameForCerts || false,
saveState,
verifiedNameEnabled: verifiedNameSettings.verifiedNameEnabled || false,
formErrors: errors,
}),
);
@@ -204,3 +339,12 @@ export const demographicsSectionSelector = createSelector(
formErrors: errors,
}),
);
export const nameChangeSelector = createSelector(
accountSettingsSelector,
formValuesSelector,
(accountSettings, formValues) => ({
...accountSettings.nameChange,
formValues,
}),
);

View File

@@ -7,6 +7,7 @@ import isEmpty from 'lodash.isempty';
import { handleRequestError, unpackFieldErrors } from './utils';
import { getThirdPartyAuthProviders } from '../third-party-auth';
import { postVerifiedNameConfig } from '../certificate-preference/data/service';
import { getCoachingPreferences, patchCoachingPreferences } from '../coaching/data/service';
import { getDemographics, getDemographicsOptions, patchDemographics } from '../demographics/data/service';
import { DEMOGRAPHICS_FIELDS } from '../demographics/data/utils';
@@ -176,12 +177,70 @@ export async function shouldDisplayDemographicsQuestions() {
return false;
}
export async function getVerifiedNameEnabled() {
let data;
const client = getAuthenticatedHttpClient();
try {
const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name_enabled`;
({ data } = await client.get(requestUrl));
} catch (error) {
return {};
}
return data;
}
export async function getVerifiedName() {
let data;
const client = getAuthenticatedHttpClient();
try {
const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name`;
({ data } = await client.get(requestUrl));
} catch (error) {
return {};
}
return data;
}
export async function getVerifiedNameHistory() {
let data;
const client = getAuthenticatedHttpClient();
try {
const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name/history`;
({ data } = await client.get(requestUrl));
} catch (error) {
return {};
}
return data;
}
export async function postVerifiedName(data) {
const requestConfig = { headers: { Accept: 'application/json' } };
const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name`;
await getAuthenticatedHttpClient()
.post(requestUrl, data, requestConfig)
.catch(error => handleRequestError(error));
}
/**
* A single function to GET everything considered a setting.
* Currently encapsulates Account, Preferences, Coaching, ThirdPartyAuth, and Demographics
*/
export async function getSettings(username, userRoles, userId) {
const results = await Promise.all([
const [
account,
preferences,
thirdPartyAuthProviders,
profileDataManager,
timeZones,
coaching,
shouldDisplayDemographicsQuestionsResponse,
demographics,
demographicsOptions,
] = await Promise.all([
getAccount(username),
getPreferences(username),
getThirdPartyAuthProviders(),
@@ -194,15 +253,15 @@ export async function getSettings(username, userRoles, userId) {
]);
return {
...results[0],
...results[1],
thirdPartyAuthProviders: results[2],
profileDataManager: results[3],
timeZones: results[4],
coaching: results[5],
shouldDisplayDemographicsSection: results[6],
...results[7], // demographics
demographicsOptions: results[8],
...account,
...preferences,
thirdPartyAuthProviders,
profileDataManager,
timeZones,
coaching,
shouldDisplayDemographicsSection: shouldDisplayDemographicsQuestionsResponse,
...demographics,
demographicsOptions,
};
}
@@ -217,11 +276,19 @@ export async function patchSettings(username, commitValues, userId) {
const preferenceKeys = ['time_zone'];
const coachingKeys = ['coaching'];
const demographicsKeys = DEMOGRAPHICS_FIELDS;
const certificateKeys = ['useVerifiedNameForCerts'];
const isDemographicsKey = (value, key) => key.includes('demographics');
const accountCommitValues = omit(commitValues, preferenceKeys, coachingKeys, demographicsKeys);
const accountCommitValues = omit(
commitValues,
preferenceKeys,
coachingKeys,
demographicsKeys,
certificateKeys,
);
const preferenceCommitValues = pick(commitValues, preferenceKeys);
const coachingCommitValues = pick(commitValues, coachingKeys);
const demographicsCommitValues = pickBy(commitValues, isDemographicsKey);
const certCommitValues = pick(commitValues, certificateKeys);
const patchRequests = [];
if (!isEmpty(accountCommitValues)) {
@@ -236,6 +303,9 @@ export async function patchSettings(username, commitValues, userId) {
if (!isEmpty(demographicsCommitValues)) {
patchRequests.push(patchDemographics(userId, demographicsCommitValues));
}
if (!isEmpty(certCommitValues)) {
patchRequests.push(postVerifiedNameConfig(username, certCommitValues));
}
const results = await Promise.all(patchRequests);
// Assigns in order of requests. Preference keys

View File

@@ -28,6 +28,7 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
</p>
<p>
<a
className="default-link standalone-link"
href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
onClick={[Function]}
target="_self"
@@ -76,6 +77,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
</p>
<p>
<a
className="default-link standalone-link"
href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
onClick={[Function]}
target="_self"
@@ -119,6 +121,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
<span>
Before proceeding, please
<a
className="default-link standalone-link"
href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-activate-my-account-"
onClick={[Function]}
target="_self"
@@ -160,6 +163,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
</p>
<p>
<a
className="default-link standalone-link"
href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
onClick={[Function]}
target="_self"
@@ -203,6 +207,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
<span>
Before proceeding, please
<a
className="default-link standalone-link"
href="https://support.edx.org/hc/en-us/articles/207206067"
onClick={[Function]}
target="_self"

View File

@@ -12,20 +12,43 @@ exports[`DemographicsSection should render 1`] = `
</h2>
<p>
<a
className="default-link standalone-link"
href="http://localhost:5335/demographics"
onClick={[Function]}
rel="noopener noopener noreferrer"
target="_blank"
>
Why does localhost collect this information?
<span>
<span
className="d-inline-block align-text-top"
>
<span
aria-hidden={false}
aria-label="Opens in a new window"
className="fa fa-external-link"
title="Opens in a new window"
/>
className="pgn__icon"
style={
Object {
"height": "1em",
"width": "1em",
}
}
>
<svg
aria-hidden={true}
aria-label=""
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
fill="currentColor"
/>
</svg>
</span>
</span>
</a>
</p>
@@ -85,6 +108,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -148,6 +172,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
<button
@@ -218,6 +243,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -281,6 +307,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -344,6 +371,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -407,6 +435,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -470,6 +499,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -533,6 +563,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -596,6 +627,7 @@ exports[`DemographicsSection should render 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -622,20 +654,43 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</h2>
<p>
<a
className="default-link standalone-link"
href="http://localhost:5335/demographics"
onClick={[Function]}
rel="noopener noopener noreferrer"
target="_blank"
>
Why does localhost collect this information?
<span>
<span
className="d-inline-block align-text-top"
>
<span
aria-hidden={false}
aria-label="Opens in a new window"
className="fa fa-external-link"
title="Opens in a new window"
/>
className="pgn__icon"
style={
Object {
"height": "1em",
"width": "1em",
}
}
>
<svg
aria-hidden={true}
aria-label=""
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
fill="currentColor"
/>
</svg>
</span>
</span>
</a>
</p>
@@ -709,6 +764,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -772,6 +828,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
<button
@@ -842,6 +899,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -905,6 +963,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -968,6 +1027,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1031,6 +1091,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1094,6 +1155,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1157,6 +1219,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1220,6 +1283,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1246,20 +1310,43 @@ exports[`DemographicsSection should render an Alert when demographicsOptions pro
</h2>
<p>
<a
className="default-link standalone-link"
href="http://localhost:5335/demographics"
onClick={[Function]}
rel="noopener noopener noreferrer"
target="_blank"
>
Why does localhost collect this information?
<span>
<span
className="d-inline-block align-text-top"
>
<span
aria-hidden={false}
aria-label="Opens in a new window"
className="fa fa-external-link"
title="Opens in a new window"
/>
className="pgn__icon"
style={
Object {
"height": "1em",
"width": "1em",
}
}
>
<svg
aria-hidden={true}
aria-label=""
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
fill="currentColor"
/>
</svg>
</span>
</span>
</a>
</p>
@@ -1292,20 +1379,43 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</h2>
<p>
<a
className="default-link standalone-link"
href="http://localhost:5335/demographics"
onClick={[Function]}
rel="noopener noopener noreferrer"
target="_blank"
>
Why does localhost collect this information?
<span>
<span
className="d-inline-block align-text-top"
>
<span
aria-hidden={false}
aria-label="Opens in a new window"
className="fa fa-external-link"
title="Opens in a new window"
/>
className="pgn__icon"
style={
Object {
"height": "1em",
"width": "1em",
}
}
>
<svg
aria-hidden={true}
aria-label=""
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
fill="currentColor"
/>
</svg>
</span>
</span>
</a>
</p>
@@ -1365,6 +1475,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1428,6 +1539,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Hispanic, Latin, or Spanish origin, White
@@ -1491,6 +1603,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1554,6 +1667,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1617,6 +1731,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1680,6 +1795,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1743,6 +1859,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1806,6 +1923,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1869,6 +1987,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -1895,20 +2014,43 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</h2>
<p>
<a
className="default-link standalone-link"
href="http://localhost:5335/demographics"
onClick={[Function]}
rel="noopener noopener noreferrer"
target="_blank"
>
Why does localhost collect this information?
<span>
<span
className="d-inline-block align-text-top"
>
<span
aria-hidden={false}
aria-label="Opens in a new window"
className="fa fa-external-link"
title="Opens in a new window"
/>
className="pgn__icon"
style={
Object {
"height": "1em",
"width": "1em",
}
}
>
<svg
aria-hidden={true}
aria-label=""
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
fill="currentColor"
/>
</svg>
</span>
</span>
</a>
</p>
@@ -1968,6 +2110,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2031,6 +2174,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Asian
@@ -2094,6 +2238,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2157,6 +2302,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2220,6 +2366,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2283,6 +2430,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2346,6 +2494,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2409,6 +2558,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2472,6 +2622,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2498,20 +2649,43 @@ exports[`DemographicsSection should set user input correctly when user provides
</h2>
<p>
<a
className="default-link standalone-link"
href="http://localhost:5335/demographics"
onClick={[Function]}
rel="noopener noopener noreferrer"
target="_blank"
>
Why does localhost collect this information?
<span>
<span
className="d-inline-block align-text-top"
>
<span
aria-hidden={false}
aria-label="Opens in a new window"
className="fa fa-external-link"
title="Opens in a new window"
/>
className="pgn__icon"
style={
Object {
"height": "1em",
"width": "1em",
}
}
>
<svg
aria-hidden={true}
aria-label=""
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
fill="currentColor"
/>
</svg>
</span>
</span>
</a>
</p>
@@ -2571,6 +2745,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2634,6 +2809,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
<button
@@ -2704,6 +2880,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2767,6 +2944,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2830,6 +3008,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2893,6 +3072,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -2956,6 +3136,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Other: test
@@ -3019,6 +3200,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3082,6 +3264,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3108,20 +3291,43 @@ exports[`DemographicsSection should set user input correctly when user provides
</h2>
<p>
<a
className="default-link standalone-link"
href="http://localhost:5335/demographics"
onClick={[Function]}
rel="noopener noopener noreferrer"
target="_blank"
>
Why does localhost collect this information?
<span>
<span
className="d-inline-block align-text-top"
>
<span
aria-hidden={false}
aria-label="Opens in a new window"
className="fa fa-external-link"
title="Opens in a new window"
/>
className="pgn__icon"
style={
Object {
"height": "1em",
"width": "1em",
}
}
>
<svg
aria-hidden={true}
aria-label=""
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
fill="currentColor"
/>
</svg>
</span>
</span>
</a>
</p>
@@ -3181,6 +3387,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer to self describe: test
@@ -3244,6 +3451,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
<button
@@ -3314,6 +3522,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3377,6 +3586,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3440,6 +3650,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3503,6 +3714,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3566,6 +3778,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3629,6 +3842,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond
@@ -3692,6 +3906,7 @@ exports[`DemographicsSection should set user input correctly when user provides
</button>
</div>
<p
className={null}
data-hj-suppress={true}
>
Prefer not to respond

View File

@@ -0,0 +1,203 @@
import React, { useEffect, useState } from 'react';
import { connect, useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
ActionRow,
Alert,
Button,
Col,
Form,
ModalDialog,
StatefulButton,
} from '@edx/paragon';
import { closeForm, saveSettingsReset } from '../data/actions';
import { nameChangeSelector } from '../data/selectors';
import { requestNameChange, requestNameChangeFailure, requestNameChangeReset } from './data/actions';
import messages from './messages';
function NameChangeModal({
targetFormId,
errors,
formValues,
intl,
saveState,
}) {
const dispatch = useDispatch();
const { push } = useHistory();
const { username } = getAuthenticatedUser();
const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
const [confirmedWarning, setConfirmedWarning] = useState(false);
function resetLocalState() {
setConfirmedWarning(false);
dispatch(requestNameChangeReset());
}
function handleChange(e) {
setVerifiedNameInput(e.target.value);
}
function handleClose() {
resetLocalState();
dispatch(closeForm(targetFormId));
dispatch(saveSettingsReset());
}
function handleSubmit(e) {
e.preventDefault();
if (saveState === 'pending') {
return;
}
if (!verifiedNameInput) {
dispatch(requestNameChangeFailure({
verified_name: intl.formatMessage(messages['account.settings.name.change.error.valid.name']),
}));
} else {
const draftProfileName = targetFormId === 'name' ? formValues.name : null;
dispatch(requestNameChange(username, draftProfileName, verifiedNameInput));
}
}
useEffect(() => {
if (saveState === 'complete') {
handleClose();
push('/id-verification');
}
}, [saveState]);
function renderErrors() {
if (Object.keys(errors).length > 0) {
return (
<>
{Object.entries(errors).map(([key, value]) => (
<Form.Control.Feedback type="invalid" key={key}>
{
key === 'general_error'
? intl.formatMessage(messages['account.settings.name.change.error.general'])
: value
}
</Form.Control.Feedback>
))}
</>
);
}
return null;
}
function renderTitle() {
if (!confirmedWarning) {
return intl.formatMessage(messages['account.settings.name.change.title.id']);
}
return intl.formatMessage(messages['account.settings.name.change.title.begin']);
}
function renderBody() {
if (!confirmedWarning) {
return (
<Alert variant="warning">
<p>
{intl.formatMessage(messages['account.settings.name.change.warning.one'])}
</p>
<p>
{intl.formatMessage(messages['account.settings.name.change.warning.two'])}
</p>
</Alert>
);
}
return (
<Form.Group as={Col} isInvalid={Object.keys(errors).length > 0}>
<Form.Label>
{intl.formatMessage(messages['account.settings.name.change.id.name.label'])}
</Form.Label>
<Form.Control
type="text"
name="verifiedName"
placeholder={intl.formatMessage(messages['account.settings.name.change.id.name.placeholder'])}
value={verifiedNameInput}
onChange={handleChange}
/>
{renderErrors()}
</Form.Group>
);
}
function renderContinueButton() {
if (!confirmedWarning) {
return (
<Button variant="primary" onClick={() => setConfirmedWarning(true)}>
{intl.formatMessage(messages['account.settings.name.change.continue'])}
</Button>
);
}
return (
<StatefulButton
type="submit"
state={saveState}
labels={{
default: intl.formatMessage(messages['account.settings.name.change.continue']),
}}
disabledStates={[]}
/>
);
}
return (
<ModalDialog
title={renderTitle()}
isOpen
hasCloseButton={false}
onClose={handleClose}
>
<Form onSubmit={handleSubmit}>
<ModalDialog.Header>
<ModalDialog.Title>
{renderTitle()}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body>
{renderBody()}
</ModalDialog.Body>
<ModalDialog.Footer>
<ActionRow>
<ModalDialog.CloseButton variant="tertiary">
{intl.formatMessage(messages['account.settings.name.change.cancel'])}
</ModalDialog.CloseButton>
{renderContinueButton()}
</ActionRow>
</ModalDialog.Footer>
</Form>
</ModalDialog>
);
}
NameChangeModal.propTypes = {
targetFormId: PropTypes.string.isRequired,
errors: PropTypes.shape({}).isRequired,
formValues: PropTypes.shape({
name: PropTypes.string,
verified_name: PropTypes.string,
}).isRequired,
saveState: PropTypes.string,
intl: intlShape.isRequired,
};
NameChangeModal.defaultProps = {
saveState: null,
};
export default connect(nameChangeSelector)(injectIntl(NameChangeModal));

View File

@@ -0,0 +1,25 @@
import { AsyncActionType } from '../../data/utils';
export const REQUEST_NAME_CHANGE = new AsyncActionType('ACCOUNT_SETTINGS', 'REQUEST_NAME_CHANGE');
export const requestNameChange = (username, profileName, verifiedName) => ({
type: REQUEST_NAME_CHANGE.BASE,
payload: { username, profileName, verifiedName },
});
export const requestNameChangeBegin = () => ({
type: REQUEST_NAME_CHANGE.BEGIN,
});
export const requestNameChangeSuccess = () => ({
type: REQUEST_NAME_CHANGE.SUCCESS,
});
export const requestNameChangeFailure = errors => ({
type: REQUEST_NAME_CHANGE.FAILURE,
payload: { errors },
});
export const requestNameChangeReset = () => ({
type: REQUEST_NAME_CHANGE.RESET,
});

View File

@@ -0,0 +1,44 @@
import { REQUEST_NAME_CHANGE } from './actions';
export const defaultState = {
saveState: null,
errors: {},
};
const reducer = (state = defaultState, action = null) => {
if (action !== null) {
switch (action.type) {
case REQUEST_NAME_CHANGE.BEGIN:
return {
...state,
saveState: 'pending',
errors: {},
};
case REQUEST_NAME_CHANGE.SUCCESS:
return {
...state,
saveState: 'complete',
};
case REQUEST_NAME_CHANGE.FAILURE:
return {
...state,
saveState: 'error',
errors: action.payload.errors || { general_error: 'A technical error occurred. Please try again.' },
};
case REQUEST_NAME_CHANGE.RESET:
return {
...state,
saveState: null,
errors: {},
};
default:
}
}
return state;
};
export default reducer;

View File

@@ -0,0 +1,40 @@
import { put, call, takeEvery } from 'redux-saga/effects';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { postVerifiedName } from '../../data/service';
import {
REQUEST_NAME_CHANGE,
requestNameChangeBegin,
requestNameChangeSuccess,
requestNameChangeFailure,
} from './actions';
import { postNameChange } from './service';
export function* handleRequestNameChange(action) {
let { name: profileName } = getAuthenticatedUser();
try {
yield put(requestNameChangeBegin());
if (action.payload.profileName) {
yield call(postNameChange, action.payload.profileName);
profileName = action.payload.profileName;
}
yield call(postVerifiedName, {
username: action.payload.username,
verified_name: action.payload.verifiedName,
profile_name: profileName,
});
yield put(requestNameChangeSuccess());
} catch (err) {
if (err.customAttributes?.httpErrorResponseData) {
yield put(requestNameChangeFailure(JSON.parse(err.customAttributes.httpErrorResponseData)));
} else {
yield put(requestNameChangeFailure());
}
}
}
export default function* saga() {
yield takeEvery(REQUEST_NAME_CHANGE.BASE, handleRequestNameChange);
}

View File

@@ -0,0 +1,17 @@
import { getConfig } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { handleRequestError } from '../../data/utils';
// eslint-disable-next-line import/prefer-default-export
export async function postNameChange(name) {
// Requests a pending name change, rather than saving the account name immediately
const requestConfig = { headers: { Accept: 'application/json' } };
const requestUrl = `${getConfig().LMS_BASE_URL}/api/user/v1/accounts/name_change/`;
const { data } = await getAuthenticatedHttpClient()
.post(requestUrl, { name }, requestConfig)
.catch(error => handleRequestError(error));
return data;
}

View File

@@ -0,0 +1,4 @@
export { default } from './NameChange';
export { default as reducer } from './data/reducers';
export { default as saga } from './data/sagas';
export { REQUEST_NAME_CHANGE } from './data/actions';

View File

@@ -0,0 +1,56 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
'account.settings.name.change.title.id': {
id: 'account.settings.name.change.title.id',
defaultMessage: 'This name change requires identity verification',
description: 'Inform the user that changing their name requires identity verification',
},
'account.settings.name.change.title.begin': {
id: 'account.settings.name.change.title.begin',
defaultMessage: 'Before we begin',
description: 'Title before beginning the ID verification process',
},
'account.settings.name.change.warning.one': {
id: 'account.settings.name.change.warning.one',
defaultMessage: 'Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.',
description: 'Warning informing the user that a name change will update the name on all of their certificates.',
},
'account.settings.name.change.warning.two': {
id: 'account.settings.name.change.warning.two',
defaultMessage: 'This action cannot be undone without verifying your identity.',
description: 'Warning informing the user that a name change cannot be undone without ID verification.',
},
'account.settings.name.change.id.name.label': {
id: 'account.settings.name.change.id.name.label',
defaultMessage: 'Enter your name as it appears on your government-issued ID.',
description: 'Form label instructing the user to enter the name on their ID.',
},
'account.settings.name.change.id.name.placeholder': {
id: 'account.settings.name.change.id.name.placeholder',
defaultMessage: 'Enter the name on your government ID',
description: 'Form label instructing the user to enter the name on their ID.',
},
'account.settings.name.change.error.valid.name': {
id: 'account.settings.name.change.error.valid.name',
defaultMessage: 'Please enter a valid name.',
description: 'Error that appears when the user doesnt enter a valid name.',
},
'account.settings.name.change.error.general': {
id: 'account.settings.name.change.error.general',
defaultMessage: 'A technical error occurred. Please try again.',
description: 'Generic error message.',
},
'account.settings.name.change.continue': {
id: 'account.settings.name.change.continue',
defaultMessage: 'Continue',
description: 'Continue button.',
},
'account.settings.name.change.cancel': {
id: 'account.settings.name.change.cancel',
defaultMessage: 'Cancel',
description: 'Cancel button.',
},
});
export default messages;

View File

@@ -0,0 +1,172 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import {
fireEvent,
render,
screen,
} from '@testing-library/react';
import { createMemoryHistory } from 'history';
import * as auth from '@edx/frontend-platform/auth';
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
ReactDOM.createPortal = node => node;
import NameChange from '../NameChange'; // eslint-disable-line import/first
const mockDispatch = jest.fn();
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useDispatch: () => mockDispatch,
}));
jest.mock('@edx/frontend-platform/auth');
jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ nameChangeSelector: () => ({}) })));
const history = createMemoryHistory();
const IntlNameChange = injectIntl(NameChange);
const mockStore = configureStore();
describe('NameChange', () => {
let props = {};
let store = {};
const reduxWrapper = children => (
<Router history={history}>
<IntlProvider locale="en">
<Provider store={store}>{children}</Provider>
</IntlProvider>
</Router>
);
beforeEach(() => {
store = mockStore();
props = {
targetFormId: 'test_form',
errors: {},
formValues: {
name: 'edx edx',
verified_name: 'edX Verified',
},
saveState: null,
intl: {},
};
auth.getAuthenticatedHttpClient = jest.fn(() => ({
patch: async () => ({
data: { status: 200 },
catch: () => {},
}),
}));
auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3, username: 'edx' }));
});
afterEach(() => jest.clearAllMocks());
it('renders populated input after clicking continue if verified_name in form data', async () => {
const getInput = () => screen.queryByPlaceholderText('Enter the name on your government ID');
render(reduxWrapper(<IntlNameChange {...props} />));
expect(getInput()).toBeNull();
const continueButton = screen.getByText('Continue');
fireEvent.click(continueButton);
expect(getInput().value).toBe('edX Verified');
});
it('renders empty input after clicking continue if verified_name not in form data', async () => {
const getInput = () => screen.queryByPlaceholderText('Enter the name on your government ID');
const formProps = {
...props,
formValues: {
name: 'edx edx',
},
};
render(reduxWrapper(<IntlNameChange {...formProps} />));
const continueButton = screen.getByText('Continue');
fireEvent.click(continueButton);
expect(getInput().value).toBe('');
});
it('dispatches verifiedName on submit if targetForm is not "name"', async () => {
const dispatchData = {
payload: {
profileName: null,
username: 'edx',
verifiedName: 'Verified Name',
},
type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
};
render(reduxWrapper(<IntlNameChange {...props} />));
const continueButton = screen.getByText('Continue');
fireEvent.click(continueButton);
const input = screen.getByPlaceholderText('Enter the name on your government ID');
fireEvent.change(input, { target: { value: 'Verified Name' } });
const submitButton = screen.getByText('Continue');
fireEvent.click(submitButton);
expect(mockDispatch).toHaveBeenCalledWith(dispatchData);
});
it('dispatches both profileName and verifiedName on submit if the targetForm is "name"', async () => {
const dispatchData = {
payload: {
profileName: 'edx edx',
username: 'edx',
verifiedName: 'Verified Name',
},
type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
};
const formProps = {
...props,
targetFormId: 'name',
};
render(reduxWrapper(<IntlNameChange {...formProps} />));
const continueButton = screen.getByText('Continue');
fireEvent.click(continueButton);
const input = screen.getByPlaceholderText('Enter the name on your government ID');
fireEvent.change(input, { target: { value: 'Verified Name' } });
const submitButton = screen.getByText('Continue');
fireEvent.click(submitButton);
expect(mockDispatch).toHaveBeenCalledWith(dispatchData);
});
it('does not dispatch action while pending', async () => {
props.saveState = 'pending';
render(reduxWrapper(<IntlNameChange {...props} />));
const continueButton = screen.getByText('Continue');
fireEvent.click(continueButton);
const input = screen.getByPlaceholderText('Enter the name on your government ID');
fireEvent.change(input, { target: { value: 'Verified Name' } });
const submitButton = screen.getByText('Continue');
fireEvent.click(submitButton);
expect(mockDispatch).not.toHaveBeenCalled();
});
it('routes to IDV when name change request is successful', async () => {
props.saveState = 'complete';
render(reduxWrapper(<IntlNameChange {...props} />));
expect(history.location.pathname).toEqual('/id-verification');
});
});

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

View File

@@ -20,6 +20,20 @@
"account.settings.field.full.name": "الاسم الكامل",
"account.settings.field.full.name.empty": "إضافة اسم",
"account.settings.field.full.name.help.text": "الاسم المستخدم للتحقق من هويتك والذي سوف يظهر على الشهادات الخاصة بك.",
"account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
"account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
"account.settings.field.name.verified": "Verified name",
"account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
"account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
"account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
"account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
"account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
"account.settings.field.name.verified.success.message.header": "Your name change request is complete!",
"account.settings.field.name.verified.failure.message": "Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.",
"account.settings.field.name.verified.failure.message.header": "We were not able to verify your identity.",
"account.settings.field.name.verified.failure.message.help.link": "Learn more about ID verification",
"account.settings.field.name.verified.submitted.message": "Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.",
"account.settings.field.name.verified.submitted.message.header": "Your name change request is almost complete!",
"account.settings.field.email": "البريد الالكتروني (الدخول)",
"account.settings.field.email.empty": "إضافة عنوان البريد الإلكتروني",
"account.settings.field.email.confirmation": "لقد أرسلنا رسالة تأكيد إلى {value}. انقر فوق الرابط في الرسالة لتحديث عنوان بريدك الإلكتروني.",
@@ -80,6 +94,12 @@
"account.settings.editable.field.action.edit": "تحرير",
"account.settings.static.field.empty": "لم يتم تحديد قيمة، فضلًا اتصل بمدير {enterprise} لتعيين بعض التغييرات.",
"account.settings.static.field.empty.no.admin": "لم يتم تحديد قيمة",
"account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
"account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
"account.settings.field.name.modal.certificate.select": "Select a name",
"account.settings.field.name.modal.certificate.option.full": "Full Name",
"account.settings.field.name.modal.certificate.option.verified": "Verified Name",
"account.settings.field.name.modal.certificate.button.choose": "Choose name",
"account.settings.coaching.consent.welcome.header": "لنبدأ",
"account.settings.coaching.consent.welcome.subheader": "نحن هنا لأجلك من البداية حتى النهاية",
"account.settings.coaching.consent.description": "تتضمن برامج البكالوريوس التدريب الذي يركز على مهنتك وتعليمك وكيفية تحقيق نتائج مبهرة من خلال التواصل الشخصي مع خبراء متمرسين. إذا كنت مهتمًا، فقدّم المعلومات أدناه وانقر فوق \"إرسال\"، وسيتصل بك شريكنا في التدريب عبر البريد الإلكتروني و/أو الرسائل النصية لمساعدتك على المضي قدمًا. تنطبق الشروط والأحكام.*",
@@ -157,6 +177,16 @@
"account.settings.field.demographics.future_work_sector.empty": "إضافة مجال العمل",
"account.settings.field.demographics.work_sector.options.empty": "حدد مجال العمل",
"account.settings.section.demographics.why": "Why does {siteName} collect this information?",
"account.settings.name.change.title.id": "This name change requires identity verification",
"account.settings.name.change.title.begin": "Before we begin",
"account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
"account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
"account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
"account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
"account.settings.name.change.error.valid.name": "Please enter a valid name.",
"account.settings.name.change.error.general": "A technical error occurred. Please try again.",
"account.settings.name.change.continue": "Continue",
"account.settings.name.change.cancel": "Cancel",
"error.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في نص الرابط. الرجاء التحقق من الرابط والمحاولة مجددا.",
"account.settings.editable.field.password.reset.button.confirmation.support.link": "الدعم الفني",
"account.settings.editable.field.password.reset.button.confirmation": "لقد أرسلنا رسالة إلى {email}. انقر فوق الرابط في الرسالة لإعادة تعيين كلمة المرور. إذا لم يتم استلام الرسالة؟ اتصل بـ {technicalSupportLink}.",

View File

@@ -20,6 +20,20 @@
"account.settings.field.full.name": "Nombre completo",
"account.settings.field.full.name.empty": "Añade nombre",
"account.settings.field.full.name.help.text": "El nombre que es usado para la verificación de identidad y aparece en sus certificados.",
"account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
"account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
"account.settings.field.name.verified": "Verified name",
"account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
"account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
"account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
"account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
"account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
"account.settings.field.name.verified.success.message.header": "Your name change request is complete!",
"account.settings.field.name.verified.failure.message": "Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.",
"account.settings.field.name.verified.failure.message.header": "We were not able to verify your identity.",
"account.settings.field.name.verified.failure.message.help.link": "Más información sobre la verificación de ID",
"account.settings.field.name.verified.submitted.message": "Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.",
"account.settings.field.name.verified.submitted.message.header": "Your name change request is almost complete!",
"account.settings.field.email": "Correo electrónico (Ingresar)",
"account.settings.field.email.empty": "Agregar correo electrónico",
"account.settings.field.email.confirmation": "Le enviamos un mensaje de confirmación a {value}. Hacer click en la liga del mensaje para actualizar su correo electrónico.",
@@ -80,6 +94,12 @@
"account.settings.editable.field.action.edit": "Editar",
"account.settings.static.field.empty": "No hay valor establecido. Contacte su administrador {enterprise} para hacer cambios.",
"account.settings.static.field.empty.no.admin": "No hay valor establecido.",
"account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
"account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
"account.settings.field.name.modal.certificate.select": "Select a name",
"account.settings.field.name.modal.certificate.option.full": "Full Name",
"account.settings.field.name.modal.certificate.option.verified": "Verified Name",
"account.settings.field.name.modal.certificate.button.choose": "Choose name",
"account.settings.coaching.consent.welcome.header": "Empecemos",
"account.settings.coaching.consent.welcome.subheader": "Estamos aquí para ustede desde el inicio hasta el final",
"account.settings.coaching.consent.description": "Los programas de MicroBachelors incluyen entrenamiento que se enfoca en su carrera, educación y cómo logrará resultados a través de la comunicación individual con un profesional experimentado. Si está interesado, proporcione la información a continuación y haga clic en \"Enviar\", y nuestro socio asesor se comunicará con usted por correo electrónico y / o mensaje de texto para ayudarlo a avanzar. Los términos y Condiciones aplican.*",
@@ -103,7 +123,7 @@
"account.settings.delete.account.subheader": "¡Sentimos que te vayas!",
"account.settings.delete.account.text.1": "Please note: Deletion of your account and personal data is permanent and cannot be undone. {siteName} will not be able to recover your account or the data that is deleted.",
"account.settings.delete.account.text.2": "Once your account is deleted, you cannot use it to take courses on {siteName}.",
"account.settings.delete.account.text.2.edX": "Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employers or universitys system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.",
"account.settings.delete.account.text.2.edX": "Una vez su cuenta haya sido eliminada, no la podrá usar para tomar cursos en la app de edX, edx.org o en cualquier otro sitio administrado por edX. Esto incluye el acceso a edx.org desde el sistema de su empleador o universidad y el acceso a páginas privadas ofrecidas por MIT Open Learning, Wharton Executive Education y Harvard Medical School.",
"account.settings.delete.account.text.3.link": "Follow these instructions for printing or downloading a certificate",
"account.settings.delete.account.text.warning": "Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on {siteName}.",
"account.settings.delete.account.text.change.instead": "En lugar de eso, ¿quieres cambiar tu correo electrónico, nombre o contraseña?",
@@ -113,7 +133,7 @@
"account.settings.delete.account.modal.header": "¿Está seguro?",
"account.settings.delete.account.modal.text.1": "You have selected \"Delete My Account\". Deletion of your account and personal data is permanent and cannot be undone. {siteName} will not be able to recover your account or the data that is deleted.",
"account.settings.delete.account.modal.text.2": "If you proceed, you will be unable to use this account to take courses on {siteName}.",
"account.settings.delete.account.modal.text.2.edX": "If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer's or university's system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.",
"account.settings.delete.account.modal.text.2.edX": "Si procedes, no será posible usar esta cuenta para tomar cursos ni en la aplicación móvil de edX, ni en edx.org, ni en cualquier otro sitio hospedado por edX. Esto incluye el acceso a edx.org desde el sistema de tu empleador o universidad, y el acceso a sitios privados ofrecidos por MIT Open Learning, Wharton Executive Education, y Harvard Medical School.",
"account.settings.delete.account.modal.enter.password": "Si deseas continuar y eliminar tu cuenta, por favor introduce la contraseña de tu cuenta:",
"account.settings.delete.account.modal.confirm.delete": "Si, Eliminar",
"account.settings.delete.account.modal.confirm.cancel": "Cancelar",
@@ -157,6 +177,16 @@
"account.settings.field.demographics.future_work_sector.empty": "Añade área profesional",
"account.settings.field.demographics.work_sector.options.empty": "Selecciona área profesional",
"account.settings.section.demographics.why": "Why does {siteName} collect this information?",
"account.settings.name.change.title.id": "This name change requires identity verification",
"account.settings.name.change.title.begin": "Before we begin",
"account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
"account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
"account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
"account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
"account.settings.name.change.error.valid.name": "Please enter a valid name.",
"account.settings.name.change.error.general": "A technical error occurred. Please try again.",
"account.settings.name.change.continue": "Continue",
"account.settings.name.change.cancel": "Cancel",
"error.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
"account.settings.editable.field.password.reset.button.confirmation.support.link": "soporte técnico",
"account.settings.editable.field.password.reset.button.confirmation": "Hemos mandado un mensaje a {email}. Haz clic en el enlace en el mensaje para restablecer tu contraseña. ¿No recibiste el mensaje? Contáctate con {technicalSupportLink}.",
@@ -170,7 +200,7 @@
"account.settings.sso.no.providers": "No se pueden vincular cuentas en este momento.",
"id.verification.access.blocked.denied": "No puedes verificar tu identidad en este momento. Si aún tienes que activar tu cuenta, revisa tu carpeta de correo no deseado y busca el correo electrónico de activación de {email}.",
"id.verification.next": "Siguiente",
"id.verification.support": "support",
"id.verification.support": "soporte",
"id.verification.continue.upload": "Continue with Upload",
"id.verification.example.card.alt": "Ejemplo de un documento de identidad válido con foto y nombre completo.",
"id.verification.requirements.title": "Requerimientos de verificación por foto",
@@ -188,7 +218,7 @@
"id.verification.access.blocked.enrollment": "Actualmente, no estás inscrito en un curso que requiera verificación de identidad.",
"id.verification.access.blocked.pending": "Ya has enviado tu información de verificación de identidad. Recibirás un mensaje en tu panel principal cuando el proceso de verificación esté completado (usualmente dentro de los 5 días).",
"id.verification.photo.take": "Tomar la foto",
"id.verification.photo.retake": "Retake Photo?",
"id.verification.photo.retake": "¿Tomar nuevamente la foto?",
"id.verification.photo.enable.detection": "Habilitar la detección de rostro",
"id.verification.photo.enable.detection.portrait.help.text": "Si está marcada, aparecerá un cuadro alrededor de tu cara. Tu rostro se puede ver claramente si el cuadro que lo rodea es azul. Si Tu cara no está en una buena posición o es indetectable, el cuadro será rojo.",
"id.verification.photo.enable.detection.id.help.text": "Si está marcada, aparecerá una casilla alrededor de la cara de tu documento de identificación. La cara se puede ver claramente si la caja que la rodea es azul. Si la cara no está en una buena posición o es indetectable, el cuadro será rojo.",
@@ -272,7 +302,7 @@
"id.verification.id.photo.instructions.camera": "Cuando tu identificación esté en su lugar, usa el botón Tomar foto a continuación para tomar tu foto.",
"id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. Supported formats: ",
"id.verification.id.photo.instructions.upload.error.invalidFileType": "The file you have selected is not a supported image type. Please choose from the following formats: ",
"id.verification.id.photo.instructions.upload.error.fileTooLarge": "The file you have selected is too large. Please try again with a file less than 10MB.",
"id.verification.id.photo.instructions.upload.error.fileTooLarge": "El archivo que has seleccionado es demasiado grande. Vuelve a intentarlo con un archivo de menos de 10 MB.",
"id.verification.account.name.title": "Verificación de nombre de cuenta",
"id.verification.account.name.instructions": "El nombre de tu cuenta y el nombre de tu identificación deben coincidir exactamente. De lo contrario, haz clic en \"No\" para actualizar el nombre de tu cuenta.",
"id.verification.account.name.radio.label": "¿El nombre de tu identificación coincide con el nombre de la cuenta a continuación?",
@@ -318,5 +348,5 @@
"id.verification.requirements.card.device.text": "Necesitas un dispositivo que tenga una cámara. Si has recibido un aviso del navegador para habilitar acceso a tu cámara, por favor asegúrate de seleccionar [allow].",
"id.verification.account.name.summary.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help.",
"idv.submission.alert.error": "\n Se produjo un error técnico al intentar enviar la verificación de ID.\n Es posible que sea una cuestión temporal, así que inténtalo de nuevo en unos minutos.\n Si el problema continúa, dirígete a {support_link} para obtener ayuda.\n ",
"id.verification.account.name.edit": "Edit {sr}"
"id.verification.account.name.edit": "Editar {sr}"
}

View File

@@ -20,6 +20,20 @@
"account.settings.field.full.name": "Full name",
"account.settings.field.full.name.empty": "Add name",
"account.settings.field.full.name.help.text": "The name that is used for ID verification and that appears on your certificates.",
"account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
"account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
"account.settings.field.name.verified": "Verified name",
"account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
"account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
"account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
"account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
"account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
"account.settings.field.name.verified.success.message.header": "Your name change request is complete!",
"account.settings.field.name.verified.failure.message": "Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.",
"account.settings.field.name.verified.failure.message.header": "We were not able to verify your identity.",
"account.settings.field.name.verified.failure.message.help.link": "Learn more about ID verification",
"account.settings.field.name.verified.submitted.message": "Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.",
"account.settings.field.name.verified.submitted.message.header": "Your name change request is almost complete!",
"account.settings.field.email": "Email address (Sign in)",
"account.settings.field.email.empty": "Add email address",
"account.settings.field.email.confirmation": "Weve sent a confirmation message to {value}. Click the link in the message to update your email address.",
@@ -80,6 +94,12 @@
"account.settings.editable.field.action.edit": "Edit",
"account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
"account.settings.static.field.empty.no.admin": "No value set.",
"account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
"account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
"account.settings.field.name.modal.certificate.select": "Select a name",
"account.settings.field.name.modal.certificate.option.full": "Full Name",
"account.settings.field.name.modal.certificate.option.verified": "Verified Name",
"account.settings.field.name.modal.certificate.button.choose": "Choose name",
"account.settings.coaching.consent.welcome.header": "Lets get started.",
"account.settings.coaching.consent.welcome.subheader": "We're here for you from start to finish",
"account.settings.coaching.consent.description": "MicroBachelors programs include coaching that focuses on your career, education, and how you'll achieve results through one-on-one communication with an experienced professional. If youre interested, provide the information below and click “Submit,” and our coaching partner will connect with you via email and/or text message to help you move forward. Terms and conditions apply.*",
@@ -157,6 +177,16 @@
"account.settings.field.demographics.future_work_sector.empty": "Add work industry",
"account.settings.field.demographics.work_sector.options.empty": "Select work industry",
"account.settings.section.demographics.why": "Why does {siteName} collect this information?",
"account.settings.name.change.title.id": "This name change requires identity verification",
"account.settings.name.change.title.begin": "Before we begin",
"account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
"account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
"account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
"account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
"account.settings.name.change.error.valid.name": "Please enter a valid name.",
"account.settings.name.change.error.general": "A technical error occurred. Please try again.",
"account.settings.name.change.continue": "Continue",
"account.settings.name.change.cancel": "Cancel",
"error.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
"account.settings.editable.field.password.reset.button.confirmation.support.link": "technical support",
"account.settings.editable.field.password.reset.button.confirmation": "We've sent a message to {email}. Click the link in the message to reset your password. Didn't receive the message? Contact {technicalSupportLink}.",

View File

@@ -20,6 +20,20 @@
"account.settings.field.full.name": "Full name",
"account.settings.field.full.name.empty": "Add name",
"account.settings.field.full.name.help.text": "The name that is used for ID verification and that appears on your certificates.",
"account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
"account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
"account.settings.field.name.verified": "Verified name",
"account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
"account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
"account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
"account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
"account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
"account.settings.field.name.verified.success.message.header": "Your name change request is complete!",
"account.settings.field.name.verified.failure.message": "Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.",
"account.settings.field.name.verified.failure.message.header": "We were not able to verify your identity.",
"account.settings.field.name.verified.failure.message.help.link": "Learn more about ID verification",
"account.settings.field.name.verified.submitted.message": "Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.",
"account.settings.field.name.verified.submitted.message.header": "Your name change request is almost complete!",
"account.settings.field.email": "Email address (Sign in)",
"account.settings.field.email.empty": "Add email address",
"account.settings.field.email.confirmation": "Weve sent a confirmation message to {value}. Click the link in the message to update your email address.",
@@ -80,6 +94,12 @@
"account.settings.editable.field.action.edit": "Edit",
"account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
"account.settings.static.field.empty.no.admin": "No value set.",
"account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
"account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
"account.settings.field.name.modal.certificate.select": "Select a name",
"account.settings.field.name.modal.certificate.option.full": "Full Name",
"account.settings.field.name.modal.certificate.option.verified": "Verified Name",
"account.settings.field.name.modal.certificate.button.choose": "Choose name",
"account.settings.coaching.consent.welcome.header": "Lets get started.",
"account.settings.coaching.consent.welcome.subheader": "We're here for you from start to finish",
"account.settings.coaching.consent.description": "MicroBachelors programs include coaching that focuses on your career, education, and how you'll achieve results through one-on-one communication with an experienced professional. If youre interested, provide the information below and click “Submit,” and our coaching partner will connect with you via email and/or text message to help you move forward. Terms and conditions apply.*",
@@ -157,6 +177,16 @@
"account.settings.field.demographics.future_work_sector.empty": "Add work industry",
"account.settings.field.demographics.work_sector.options.empty": "Select work industry",
"account.settings.section.demographics.why": "Why does {siteName} collect this information?",
"account.settings.name.change.title.id": "This name change requires identity verification",
"account.settings.name.change.title.begin": "Before we begin",
"account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
"account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
"account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
"account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
"account.settings.name.change.error.valid.name": "Please enter a valid name.",
"account.settings.name.change.error.general": "A technical error occurred. Please try again.",
"account.settings.name.change.continue": "Continue",
"account.settings.name.change.cancel": "Cancel",
"error.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
"account.settings.editable.field.password.reset.button.confirmation.support.link": "technical support",
"account.settings.editable.field.password.reset.button.confirmation": "We've sent a message to {email}. Click the link in the message to reset your password. Didn't receive the message? Contact {technicalSupportLink}.",

View File

@@ -28,7 +28,7 @@ const messages = defineMessages({
},
'id.verification.requirements.description': {
id: 'id.verification.requirements.description',
defaultMessage: 'In order to complete Photo Verification online, you will need the following:',
defaultMessage: 'In order to complete Photo Verification, you will need the following:',
description: 'Description for the Photo Verification Requirements page.',
},
'id.verification.requirements.card.device.title': {
@@ -43,12 +43,12 @@ const messages = defineMessages({
},
'id.verification.requirements.card.id.title': {
id: 'id.verification.requirements.card.id.title',
defaultMessage: 'Photo Identification',
defaultMessage: 'Photo Identification Card',
description: 'Title for the Photo Identification requirement card.',
},
'id.verification.requirements.card.id.text': {
id: 'id.verification.requirements.card.id.text',
defaultMessage: 'You need a valid identification card that contains your full name and photo.',
defaultMessage: 'You need a valid identification card that contains your full name and photo, such as a drivers license or passport.',
description: 'Text that explains that the user needs a photo ID.',
},
'id.verification.privacy.title': {
@@ -463,22 +463,22 @@ const messages = defineMessages({
},
'id.verification.id.photo.unclear.question': {
id: 'id.verification.id.photo.unclear.question',
defaultMessage: 'Is your ID image not clear or too blurry?',
defaultMessage: 'Is your ID card image not clear or too blurry?',
description: 'Question on what to do if the user\'s ID image is unclear',
},
'id.verification.id.tips.title': {
id: 'id.verification.id.tips.title',
defaultMessage: 'Helpful ID Tips',
defaultMessage: 'Helpful Identification Card Tips',
description: 'Title for the ID Tips page.',
},
'id.verification.id.tips.description': {
id: 'id.verification.id.tips.description',
defaultMessage: 'Next, we\'ll need you to take a photo of a valid identification card that includes your full name and photo. Please have your ID ready.',
defaultMessage: 'Next, we\'ll need you to take a photo of a valid identification card that includes your full name and photo, such as a drivers license or passport. Please have your ID ready.',
description: 'Description for the ID Tips page.',
},
'id.verification.id.tips.list.well.lit': {
id: 'id.verification.id.tips.list.well.lit',
defaultMessage: 'Your ID is well-lit.',
defaultMessage: 'Your identification card is well-lit.',
description: 'Tip to ensure ID is well lit.',
},
'id.verification.id.tips.list.clear': {
@@ -488,12 +488,12 @@ const messages = defineMessages({
},
'id.verification.id.photo.title.camera': {
id: 'id.verification.id.photo.title.camera',
defaultMessage: 'Take a Photo of Your ID',
defaultMessage: 'Take a Photo of Your Identification Card',
description: 'Title for the ID Photo page if camera access is enabled.',
},
'id.verification.id.photo.title.upload': {
id: 'id.verification.id.photo.title.upload',
defaultMessage: 'Upload a Photo of Your ID',
defaultMessage: 'Upload a Photo of Your Identification Card',
description: 'Title for the ID Photo page if camera access is disabled.',
},
'id.verification.id.photo.preview.alt': {
@@ -503,12 +503,12 @@ const messages = defineMessages({
},
'id.verification.id.photo.instructions.camera': {
id: 'id.verification.id.photo.instructions.camera',
defaultMessage: 'When your ID is in position, use the Take Photo button below to take your photo.',
defaultMessage: 'When your ID is in position, use the Take Photo button below to take your photo. Please use a passport, drivers license, or another identification card that includes your full name and a picture of your face.',
description: 'Instructions to use the camera to take an ID photo.',
},
'id.verification.id.photo.instructions.upload': {
id: 'id.verification.id.photo.instructions.upload',
defaultMessage: 'Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. Supported formats: ',
defaultMessage: 'Please upload a photo of your identification card. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. Supported formats: ',
description: 'Instructions for ID photo upload.',
},
'id.verification.id.photo.instructions.upload.error.invalidFileType': {
@@ -603,12 +603,12 @@ const messages = defineMessages({
},
'id.verification.review.id.label': {
id: 'id.verification.review.id.label',
defaultMessage: 'Your Photo ID',
defaultMessage: 'Your Identification Card',
description: 'Label for the Photo ID card.',
},
'id.verification.review.id.alt': {
id: 'id.verification.review.id.alt',
defaultMessage: 'Photo of your ID to be submitted.',
defaultMessage: 'Photo of your identification card to be submitted.',
description: 'Alt text for the ID photo.',
},
'id.verification.review.id.retake': {

View File

@@ -9,9 +9,11 @@ import { getExistingIdVerification, getEnrollments } from './data/service';
import AccessBlocked from './AccessBlocked';
import { hasGetUserMediaSupport } from './getUserMediaShim';
import IdVerificationContext, { MEDIA_ACCESS, ERROR_REASONS, VERIFIED_MODES } from './IdVerificationContext';
import { VerifiedNameContext } from './VerifiedNameContext';
export default function IdVerificationContextProvider({ children }) {
const { authenticatedUser } = useContext(AppContext);
const { verifiedName, verifiedNameEnabled } = useContext(VerifiedNameContext);
const [existingIdVerification, setExistingIdVerification] = useState(null);
useEffect(() => {
@@ -33,8 +35,9 @@ export default function IdVerificationContextProvider({ children }) {
const [canVerify, setCanVerify] = useState(true);
const [error, setError] = useState('');
useEffect(() => {
// Check for an existing verification attempt
if (existingIdVerification && !existingIdVerification.canVerify) {
// With verified name we can redo verification multiple times
// if not a successful request prevents re-verification
if (!verifiedNameEnabled && existingIdVerification && !existingIdVerification.canVerify) {
const { status } = existingIdVerification;
setCanVerify(false);
if (status === 'pending' || status === 'approved') {
@@ -43,7 +46,7 @@ export default function IdVerificationContextProvider({ children }) {
setError(ERROR_REASONS.CANNOT_VERIFY);
}
}
}, [existingIdVerification]);
}, [existingIdVerification, verifiedNameEnabled]);
useEffect(() => {
// Check whether the learner is enrolled in a verified course mode.
(async () => {
@@ -95,7 +98,9 @@ export default function IdVerificationContextProvider({ children }) {
mediaStream,
mediaAccess,
userId: authenticatedUser.userId,
nameOnAccount: authenticatedUser.name,
// If the learner has an applicable verified name, then this should override authenticatedUser.name
// when determining the context value nameOnAccount.
nameOnAccount: verifiedName || authenticatedUser.name,
profileDataManager,
optimizelyExperimentName,
shouldUseCamera,

View File

@@ -11,6 +11,7 @@ import { idVerificationSelector } from './data/selectors';
import './getUserMediaShim';
import IdVerificationContextProvider from './IdVerificationContextProvider';
import { VerifiedNameContextProvider } from './VerifiedNameContext';
import ReviewRequirementsPanel from './panels/ReviewRequirementsPanel';
import ChooseModePanel from './panels/ChooseModePanel';
import RequestCameraAccessPanel from './panels/RequestCameraAccessPanel';
@@ -51,20 +52,22 @@ function IdVerificationPage(props) {
<div className="page__id-verification container-fluid py-5">
<div className="row">
<div className="col-lg-6 col-md-8">
<IdVerificationContextProvider>
<Switch>
<Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
<Route path={`${path}/choose-mode`} component={ChooseModePanel} />
<Route path={`${path}/request-camera-access`} component={RequestCameraAccessPanel} />
<Route path={`${path}/portrait-photo-context`} component={PortraitPhotoContextPanel} />
<Route path={`${path}/take-portrait-photo`} component={TakePortraitPhotoPanel} />
<Route path={`${path}/id-context`} component={IdContextPanel} />
<Route path={`${path}/get-name-id`} component={GetNameIdPanel} />
<Route path={`${path}/take-id-photo`} component={TakeIdPhotoPanel} />
<Route path={`${path}/summary`} component={SummaryPanel} />
<Route path={`${path}/submitted`} component={SubmittedPanel} />
</Switch>
</IdVerificationContextProvider>
<VerifiedNameContextProvider>
<IdVerificationContextProvider>
<Switch>
<Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
<Route path={`${path}/choose-mode`} component={ChooseModePanel} />
<Route path={`${path}/request-camera-access`} component={RequestCameraAccessPanel} />
<Route path={`${path}/portrait-photo-context`} component={PortraitPhotoContextPanel} />
<Route path={`${path}/take-portrait-photo`} component={TakePortraitPhotoPanel} />
<Route path={`${path}/id-context`} component={IdContextPanel} />
<Route path={`${path}/get-name-id`} component={GetNameIdPanel} />
<Route path={`${path}/take-id-photo`} component={TakeIdPhotoPanel} />
<Route path={`${path}/summary`} component={SummaryPanel} />
<Route path={`${path}/submitted`} component={SubmittedPanel} />
</Switch>
</IdVerificationContextProvider>
</VerifiedNameContextProvider>
</div>
<div className="col-lg-6 col-md-4 pt-md-0 pt-4 text-right">
<Button variant="link" className="px-0" onClick={() => setIsModalOpen(true)}>

View File

@@ -0,0 +1,40 @@
import React, { createContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { getVerifiedNameHistory } from '../account-settings/data/service';
import { getMostRecentApprovedOrPendingVerifiedName } from '../utils';
export const VerifiedNameContext = createContext();
export function VerifiedNameContextProvider({ children }) {
const [verifiedNameEnabled, setVerifiedNameEnabled] = useState(false);
const [verifiedName, setVerifiedName] = useState('');
useEffect(() => {
// Make API call to retrieve VerifiedName history for the learner.
// From this information, derive whether the verified name feature is enabled
// and the learner's verified name as it should be displayed during the IDV process.
(async () => {
const response = await getVerifiedNameHistory();
if (response) {
const { verified_name_enabled: verifiedNameFeatureEnabled, results } = response;
setVerifiedNameEnabled(verifiedNameFeatureEnabled);
if (verifiedNameFeatureEnabled) {
const applicableVerifiedName = getMostRecentApprovedOrPendingVerifiedName(results);
setVerifiedName(applicableVerifiedName);
}
}
})();
}, []);
const value = {
verifiedNameEnabled,
verifiedName,
};
return (<VerifiedNameContext.Provider value={value}>{children}</VerifiedNameContext.Provider>);
}
VerifiedNameContextProvider.propTypes = {
children: PropTypes.node.isRequired,
};

View File

@@ -146,9 +146,15 @@ function GetNameIdPanel(props) {
onChange={e => setIdPhotoName(e.target.value)}
data-testid="name-input"
/>
<Form.Control.Feedback id="photo-id-name-feedback" type="invalid">
{getErrorMessage()}
</Form.Control.Feedback>
{(invalidName || profileDataManager) && (
<Form.Control.Feedback
id="photo-id-name-feedback"
data-testid="id-name-feedback-message"
type="invalid"
>
{getErrorMessage()}
</Form.Control.Feedback>
)}
</Form.Group>
</Form>

View File

@@ -11,6 +11,7 @@ import { useNextPanelSlug } from '../routing-utilities';
import BasePanel from './BasePanel';
import IdVerificationContext from '../IdVerificationContext';
import ImagePreview from '../ImagePreview';
import { VerifiedNameContext } from '../VerifiedNameContext';
import messages from '../IdVerification.messages';
import CameraHelpWithUpload from '../CameraHelpWithUpload';
@@ -31,6 +32,7 @@ function SummaryPanel(props) {
portraitPhotoMode,
idPhotoMode,
} = useContext(IdVerificationContext);
const { verifiedNameEnabled } = useContext(VerifiedNameContext);
const nameToBeUsed = idPhotoName || nameOnAccount || '';
const [isSubmitting, setIsSubmitting] = useState(false);
const [submissionError, setSubmissionError] = useState(null);
@@ -72,6 +74,19 @@ function SummaryPanel(props) {
};
if (idPhotoName) {
verificationData.idPhotoName = idPhotoName;
} else if (verifiedNameEnabled) {
/**
* If learner has not entered an idPhotoName on the GetNameIdPanel,
* and the verified name feature is enabled, use the current nameOnAccount
* when submitting IDV. The reason we only do this if the feature is enabled
* is that, when the feature is off, the server will change the learner's
* profile name to this value. If we send the idPhotoName on all requests,
* even ones where the learner does not change the idPhotoName, then the
* server will record that the full name on the learner's profile has
* a requested change, even if the name is the same. This will pollute
* the history.
*/
verificationData.idPhotoName = nameOnAccount;
}
if (optimizelyExperimentName) {
verificationData.optimizelyExperimentName = optimizelyExperimentName;

View File

@@ -9,9 +9,11 @@ import { getProfileDataManager } from '../../account-settings/data/service';
import { getExistingIdVerification, getEnrollments } from '../data/service';
import IdVerificationContextProvider from '../IdVerificationContextProvider';
import { VerifiedNameContext } from '../VerifiedNameContext';
jest.mock('../../account-settings/data/service', () => ({
getProfileDataManager: jest.fn(),
getVerifiedNameHistory: jest.fn(),
}));
jest.mock('../data/service', () => ({
@@ -30,12 +32,15 @@ describe('IdVerificationContextProvider', () => {
});
it('renders correctly and calls getExistingIdVerification + getEnrollments', async () => {
const context = { authenticatedUser: { userId: 3, roles: [] } };
const appContext = { authenticatedUser: { userId: 3, roles: [] } };
const verifiedNameContext = { verifiedName: '', verifiedNameEnabled: false };
await act(async () => render((
<AppContext.Provider value={context}>
<IntlProvider locale="en">
<IdVerificationContextProvider {...defaultProps} />
</IntlProvider>
<AppContext.Provider value={appContext}>
<VerifiedNameContext.Provider value={verifiedNameContext}>
<IntlProvider locale="en">
<IdVerificationContextProvider {...defaultProps} />
</IntlProvider>
</VerifiedNameContext.Provider>
</AppContext.Provider>
)));
expect(getExistingIdVerification).toHaveBeenCalled();
@@ -43,23 +48,26 @@ describe('IdVerificationContextProvider', () => {
});
it('calls getProfileDataManager if the user has any roles', async () => {
const context = {
const appContext = {
authenticatedUser: {
userId: 3,
username: 'testname',
roles: ['enterprise_learner'],
},
};
const verifiedNameContext = { verifiedName: '', verifiedNameEnabled: false };
await act(async () => render((
<AppContext.Provider value={context}>
<IntlProvider locale="en">
<IdVerificationContextProvider {...defaultProps} />
</IntlProvider>
<AppContext.Provider value={appContext}>
<VerifiedNameContext.Provider value={verifiedNameContext}>
<IntlProvider locale="en">
<IdVerificationContextProvider {...defaultProps} />
</IntlProvider>
</VerifiedNameContext.Provider>
</AppContext.Provider>
)));
expect(getProfileDataManager).toHaveBeenCalledWith(
context.authenticatedUser.username,
context.authenticatedUser.roles,
appContext.authenticatedUser.username,
appContext.authenticatedUser.roles,
);
});
});

View File

@@ -11,6 +11,13 @@ import * as selectors from '../data/selectors';
jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ idVerificationSelector: () => ({}) })));
jest.mock('../IdVerificationContextProvider', () => jest.fn(({ children }) => children));
jest.mock('../VerifiedNameContext', () => {
const originalModule = jest.requireActual('../VerifiedNameContext');
return {
...originalModule,
VerifiedNameContextProvider: jest.fn(({ children }) => children),
};
});
jest.mock('../panels/ReviewRequirementsPanel');
jest.mock('../panels/RequestCameraAccessPanel');
jest.mock('../panels/PortraitPhotoContextPanel');

View File

@@ -0,0 +1,85 @@
import React, { useContext } from 'react';
import { render, cleanup, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { getVerifiedNameHistory } from '../../account-settings/data/service';
import { VerifiedNameContext, VerifiedNameContextProvider } from '../VerifiedNameContext';
const VerifiedNameContextTestComponent = () => {
const { verifiedName, verifiedNameEnabled } = useContext(VerifiedNameContext);
return (
<>
{verifiedNameEnabled && (<div data-testid="verified-name">{verifiedName}</div>)}
<div data-testid="verified-name-enabled">{verifiedNameEnabled ? 'true' : 'false'}</div>
</>
);
};
jest.mock('../../account-settings/data/service', () => ({
getVerifiedNameHistory: jest.fn(),
}));
describe('VerifiedNameContextProvider', () => {
const defaultProps = {
children: <div />,
intl: {},
};
afterEach(() => {
cleanup();
jest.clearAllMocks();
});
it('calls getVerifiedNameHistory', async () => {
jest.mock('../../account-settings/data/service', () => ({
getVerifiedNameHistory: jest.fn(),
}));
render(<VerifiedNameContextProvider {...defaultProps} />);
expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1);
});
it('sets verifiedName and verifiedNameEnabled correctly when verified name feature enabled', async () => {
const mockReturnValue = {
verified_name_enabled: true,
results: [{
verified_name: 'Michael',
status: 'approved',
created: '2021-08-31T18:33:32.489200Z',
}],
};
getVerifiedNameHistory.mockReturnValueOnce(mockReturnValue);
const { getByTestId } = render((
<VerifiedNameContextProvider {...defaultProps}>
<VerifiedNameContextTestComponent />
</VerifiedNameContextProvider>
));
await waitFor(() => expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1));
expect(getByTestId('verified-name')).toHaveTextContent('Michael');
expect(getByTestId('verified-name-enabled')).toHaveTextContent('true');
});
it('sets verifiedName and verifiedNameEnabled correctly when verified name feature not enabled', async () => {
const mockReturnValue = {
verified_name_enabled: false,
results: [{
verified_name: 'Michael',
status: 'approved',
created: '2021-08-31T18:33:32.489200Z',
}],
};
getVerifiedNameHistory.mockReturnValueOnce(mockReturnValue);
const { queryByTestId } = render((
<VerifiedNameContextProvider {...defaultProps}>
<VerifiedNameContextTestComponent />
</VerifiedNameContextProvider>
));
await waitFor(() => expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1));
expect(queryByTestId('verified-name')).toBeNull();
expect(queryByTestId('verified-name-enabled')).toHaveTextContent('false');
});
});

View File

@@ -54,8 +54,10 @@ describe('GetNameIdPanel', () => {
const noButton = await screen.findByTestId('name-matches-no');
const input = await screen.findByTestId('name-input');
const nextButton = await screen.findByTestId('next-button');
const errorMessageQuery = await screen.queryByTestId('id-name-feedback-message');
expect(input).toHaveProperty('readOnly');
expect(errorMessageQuery).toBeNull();
fireEvent.click(noButton);
expect(input).toHaveProperty('readOnly', false);
@@ -63,6 +65,8 @@ describe('GetNameIdPanel', () => {
fireEvent.change(input, { target: { value: 'test change' } });
expect(contextValue.setIdPhotoName).toHaveBeenCalled();
// Ensure the feedback message on name shows when the user says the name does not match ID
expect(await screen.queryByTestId('id-name-feedback-message')).toBeTruthy();
fireEvent.click(yesButton);
expect(input).toHaveProperty('readOnly');
@@ -77,11 +81,13 @@ describe('GetNameIdPanel', () => {
const noButton = await screen.findByTestId('name-matches-no');
const input = await screen.findByTestId('name-input');
const nextButton = await screen.findByTestId('next-button');
const errorMessageQuery = await screen.queryByTestId('id-name-feedback-message');
expect(yesButton).toHaveProperty('disabled');
expect(noButton).toHaveProperty('disabled');
expect(input).toHaveProperty('readOnly', false);
expect(nextButton.classList.contains('disabled')).toBe(true);
expect(errorMessageQuery).toBeTruthy();
});
it('blocks the user from changing account name if managed by a third party', async () => {

View File

@@ -10,6 +10,7 @@ import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import * as dataService from '../../data/service';
import IdVerificationContext from '../../IdVerificationContext';
import SummaryPanel from '../../panels/SummaryPanel';
import { VerifiedNameContext } from '../../VerifiedNameContext';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendTrackEvent: jest.fn(),
@@ -27,7 +28,7 @@ describe('SummaryPanel', () => {
intl: {},
};
const contextValue = {
const appContextValue = {
facePhotoFile: 'test.jpg',
idPhotoFile: 'test.jpg',
nameOnAccount: 'test name',
@@ -39,13 +40,19 @@ describe('SummaryPanel', () => {
setReachedSummary: jest.fn(),
};
const verifiedNameContextValue = {
verifiedNameEnabled: false,
};
const getPanel = async () => {
await act(async () => render((
<Router history={history}>
<IntlProvider locale="en">
<IdVerificationContext.Provider value={contextValue}>
<IntlSummaryPanel {...defaultProps} />
</IdVerificationContext.Provider>
<VerifiedNameContext.Provider value={verifiedNameContextValue}>
<IdVerificationContext.Provider value={appContextValue}>
<IntlSummaryPanel {...defaultProps} />
</IdVerificationContext.Provider>
</VerifiedNameContext.Provider>
</IntlProvider>
</Router>
)));
@@ -72,17 +79,17 @@ describe('SummaryPanel', () => {
});
it('allows user to upload ID photo', async () => {
contextValue.optimizelyExperimentName = '';
appContextValue.optimizelyExperimentName = '';
await getPanel();
const collapsible = await screen.getAllByRole('button', { 'aria-expanded': false })[0];
fireEvent.click(collapsible);
const uploadButton = await screen.getByTestId('fileUpload');
expect(uploadButton).toBeVisible();
contextValue.optimizelyExperimentName = 'test-experiment';
appContextValue.optimizelyExperimentName = 'test-experiment';
});
it('displays warning if account is managed by a third party', async () => {
contextValue.profileDataManager = 'test-org';
appContextValue.profileDataManager = 'test-org';
await getPanel();
const warning = await screen.getAllByText('test-org');
expect(warning.length).toEqual(1);
@@ -90,29 +97,29 @@ describe('SummaryPanel', () => {
it('submits', async () => {
const verificationData = {
facePhotoFile: contextValue.facePhotoFile,
idPhotoFile: contextValue.idPhotoFile,
idPhotoName: contextValue.idPhotoName,
optimizelyExperimentName: contextValue.optimizelyExperimentName,
portraitPhotoMode: contextValue.portraitPhotoMode,
idPhotoMode: contextValue.idPhotoMode,
facePhotoFile: appContextValue.facePhotoFile,
idPhotoFile: appContextValue.idPhotoFile,
idPhotoName: appContextValue.idPhotoName,
optimizelyExperimentName: appContextValue.optimizelyExperimentName,
portraitPhotoMode: appContextValue.portraitPhotoMode,
idPhotoMode: appContextValue.idPhotoMode,
courseRunKey: null,
};
await getPanel();
const button = await screen.findByTestId('submit-button');
fireEvent.click(button);
expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled());
await waitFor(() => expect(appContextValue.stopUserMedia).toHaveBeenCalled());
});
it('does not submit a name if name is blank', async () => {
contextValue.idPhotoName = '';
appContextValue.idPhotoName = '';
const verificationData = {
facePhotoFile: contextValue.facePhotoFile,
idPhotoFile: contextValue.idPhotoFile,
portraitPhotoMode: contextValue.portraitPhotoMode,
idPhotoMode: contextValue.idPhotoMode,
optimizelyExperimentName: contextValue.optimizelyExperimentName,
facePhotoFile: appContextValue.facePhotoFile,
idPhotoFile: appContextValue.idPhotoFile,
portraitPhotoMode: appContextValue.portraitPhotoMode,
idPhotoMode: appContextValue.idPhotoMode,
optimizelyExperimentName: appContextValue.optimizelyExperimentName,
courseRunKey: null,
};
await getPanel();
@@ -122,13 +129,13 @@ describe('SummaryPanel', () => {
});
it('does not submit a name if name is unchanged', async () => {
contextValue.idPhotoName = null;
appContextValue.idPhotoName = null;
const verificationData = {
facePhotoFile: contextValue.facePhotoFile,
idPhotoFile: contextValue.idPhotoFile,
portraitPhotoMode: contextValue.portraitPhotoMode,
idPhotoMode: contextValue.idPhotoMode,
optimizelyExperimentName: contextValue.optimizelyExperimentName,
facePhotoFile: appContextValue.facePhotoFile,
idPhotoFile: appContextValue.idPhotoFile,
portraitPhotoMode: appContextValue.portraitPhotoMode,
idPhotoMode: appContextValue.idPhotoMode,
optimizelyExperimentName: appContextValue.optimizelyExperimentName,
courseRunKey: null,
};
await getPanel();
@@ -137,6 +144,24 @@ describe('SummaryPanel', () => {
expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
});
it('submits a name if a name is unchanged if verified name feature is enabled', async () => {
appContextValue.idPhotoName = null;
verifiedNameContextValue.verifiedNameEnabled = true;
const verificationData = {
facePhotoFile: appContextValue.facePhotoFile,
idPhotoFile: appContextValue.idPhotoFile,
portraitPhotoMode: appContextValue.portraitPhotoMode,
idPhotoMode: appContextValue.idPhotoMode,
optimizelyExperimentName: appContextValue.optimizelyExperimentName,
courseRunKey: null,
idPhotoName: appContextValue.nameOnAccount,
};
await getPanel();
const button = await screen.findByTestId('submit-button');
fireEvent.click(button);
expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
});
it('shows error when cannot submit', async () => {
dataService.submitIdVerification = jest.fn().mockReturnValue({ success: false });
await getPanel();
@@ -207,6 +232,6 @@ describe('SummaryPanel', () => {
await getPanel();
const collapsible = await screen.queryByTestId('collapsible');
expect(collapsible).not.toBeInTheDocument();
contextValue.optimizelyExperimentName = 'test-experiment';
appContextValue.optimizelyExperimentName = 'test-experiment';
});
});

View File

@@ -98,10 +98,10 @@ describe('TakeIdPhotoPanel', () => {
)));
// check that upload title and text are correct
const title = await screen.findByText('Upload a Photo of Your ID');
const title = await screen.findByText('Upload a Photo of Your Identification Card');
expect(title).toBeVisible();
const text = await screen.findByTestId('upload-text');
expect(text.textContent).toContain('Please upload an ID photo');
expect(text.textContent).toContain('Please upload a photo of your identification card');
});
});

View File

@@ -1,4 +1,6 @@
import 'babel-polyfill';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'formdata-polyfill';
import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
import {
@@ -18,7 +20,6 @@ import CoachingConsent from './account-settings/coaching/CoachingConsent';
import appMessages from './i18n';
import './index.scss';
import './assets/favicon.ico';
subscribe(APP_READY, () => {
ReactDOM.render(

View File

@@ -1,4 +1,5 @@
/* eslint-disable import/no-extraneous-dependencies */
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

83
src/tests/utils.test.js Normal file
View File

@@ -0,0 +1,83 @@
import { compareVerifiedNamesByCreatedDate, getMostRecentApprovedOrPendingVerifiedName } from '../utils';
describe('getMostRecentApprovedOrPendingVerifiedName', () => {
it('returns correct verified name if one exists', () => {
const verifiedNames = [
{
created: '2021-08-31T18:33:32.489200Z',
verified_name: 'Mike',
status: 'denied',
},
{
created: '2021-09-03T18:33:32.489200Z',
verified_name: 'Michelangelo',
status: 'approved',
},
];
expect(getMostRecentApprovedOrPendingVerifiedName(verifiedNames)).toEqual(verifiedNames[1].verified_name);
});
it('returns no verified name if one does not exist', () => {
const verifiedNames = [
{
created: '2021-08-31T18:33:32.489200Z',
verified_name: 'Mike',
status: 'denied',
},
{
created: '2021-09-03T18:33:32.489200Z',
verified_name: 'Michelangelo',
status: 'submitted',
},
];
expect(getMostRecentApprovedOrPendingVerifiedName(verifiedNames)).toBeNull();
});
});
describe('compareVerifiedNamesByCreatedDate', () => {
it('returns 0 when equal', () => {
const a = {
created: '2021-08-31T18:33:32.489200Z',
verified_name: 'Mike',
status: 'denied',
};
const b = {
created: '2021-08-31T18:33:32.489200Z',
verified_name: 'Michael',
status: 'denied',
};
expect(compareVerifiedNamesByCreatedDate(a, b)).toEqual(0);
});
it('returns negative number when first argument is greater than second argument', () => {
const a = {
created: '2021-09-30T18:33:32.489200Z',
verified_name: 'Mike',
status: 'denied',
};
const b = {
created: '2021-08-31T18:33:32.489200Z',
verified_name: 'Michael',
status: 'denied',
};
expect(compareVerifiedNamesByCreatedDate(a, b)).toBeLessThan(0);
});
it('returns positive number when first argument is less than second argument', () => {
const a = {
created: '2021-08-31T18:33:32.489200Z',
verified_name: 'Mike',
status: 'denied',
};
const b = {
created: '2021-09-30T18:33:32.489200Z',
verified_name: 'Michael',
status: 'denied',
};
expect(compareVerifiedNamesByCreatedDate(a, b)).toBeGreaterThan(0);
});
});

40
src/utils.js Normal file
View File

@@ -0,0 +1,40 @@
/**
* Compare two dates.
* @param {*} a the first date
* @param {*} b the second date
* @returns a negative integer if a > b, a positive integer if a < b, or 0 if a = b
*/
export function compareVerifiedNamesByCreatedDate(a, b) {
const aTimeSinceEpoch = new Date(a.created).getTime();
const bTimeSinceEpoch = new Date(b.created).getTime();
return bTimeSinceEpoch - aTimeSinceEpoch;
}
/**
*
* @param {*} verifiedNames a list of verified name objects, where each object has at least the
* following keys: created, status, and verified_name.
* @returns the most recent verified name object from the list parameter with the 'pending' or
* 'accepted' status, if one exists; otherwise, null
*/
export function getMostRecentApprovedOrPendingVerifiedName(verifiedNames) {
// clone array so as not to modify original array
const names = [...verifiedNames];
if (Array.isArray(names)) {
names.sort(compareVerifiedNamesByCreatedDate);
}
// We only want to consider a subset of verified names when determining the value of nameOnAccount.
// approved: consider this status, as the name has been verified by IDV and should supersede the full name
// (profile name).
// pending: consider this status, as the learner has started the name change process through the
// Account Settings page, and has been navigated to IDV to complete the name change process.
// submitted: do not consider this status, as the name has already been submitted for verification through
// IDV but has not yet been verified
// denied: do not consider this status because the name was already denied via the IDV process
const applicableNames = names.filter(name => ['approved', 'pending'].includes(name.status));
const applicableName = applicableNames.length > 0 ? applicableNames[0].verified_name : null;
return applicableName;
}