Frontend/231/submit-form #383

hilvitzs · 2020-11-02T20:36:48Z

This pull request changes...

This PR allows the user to submit their profile information in order to be assigned a role by an admin user.
This adds a requestAccess action and reducer in order to store the information from the user endpoint.
requestAccess action will trigger the SET_AUTH action to set user information
It also adds associated tests for the action and reducers.
This changes the fetchStts action and reducer names to fetchSttLists.
This PR also ensures that the Federal Government is always the first option in the STT combo box.
This also adds the word required to the labels for all form elements in Edit Profile based on the feedback from Robert's accessibility review.
Adds a fix for space bar not triggering skip links anchor
Updates App.test.js

[AC] This pull request is ready to merge when...

[DoD] This feature is done when...

Design has approved the experience
Product has approved the experience

…nto 231-submit-form

… setUser

…le, update mockstore in routes.test with requestAccess module, add requestAccess reducer and action

…1-submit-form

hilvitzs · 2020-11-05T20:47:44Z

tdrs-frontend/src/reducers/requestAccess.js

@@ -0,0 +1,38 @@
+import {


This is the reducer for requestAccess which will set loading and requestAccess.

carltonsmith

Backend changes are looking good

hilvitzs · 2020-11-05T20:48:05Z

tdrs-frontend/src/reducers/sttList.test.js

@@ -1,15 +1,15 @@
-import reducer from './stts'
+import reducer from './sttList'


Just updating the name from stt to sttList

riatzukiza · 2020-11-05T21:45:48Z

tdrs-backend/tdpservice/users/serializers.py

@@ -48,17 +54,29 @@ class Meta:
        extra_kwargs = {"password": {"write_only": True}}


-class SetUserProfileSerializer(serializers.ModelSerializer):
+class UserProfileSerializer(serializers.ModelSerializer):
    """Serializer used for setting a user's profile."""


Using a more general name for this, because it is now used for both authorization-check and set-profile

riatzukiza · 2020-11-05T21:46:33Z

tdrs-backend/tdpservice/users/serializers.py

    class Meta:
        """Metadata."""

        model = User
-        fields = ["first_name", "last_name"]
+        fields = ["first_name", "last_name", "stt", "email"]


In order to add STT to auth-check, and email to set-profile, so they'd have the same payload.

riatzukiza · 2020-11-05T21:48:44Z

tdrs-frontend/src/actions/requestAccess.test.js

+describe('actions/requestAccess.js', () => {
+  const mockStore = configureStore([thunk])
+
+  it('sends a PATCH request when requestAccess is called', async () => {


Update the frontend to reflect the different REST method for the set_profile end point

riatzukiza · 2020-11-05T21:51:48Z

tdrs-backend/docs/api/set_profile.md



 ----
 **Request**:

-`Post` `v1/set_profile/`
+`PATCH` `v1/set_profile/`


Using a patch instead of a post, required changes on both ends of the stack.

hilvitzs · 2020-11-05T22:23:27Z

tdrs-frontend/src/components/EditProfile/EditProfile.jsx

+    if (requestAccessError) {
+      dispatch(
+        setAlert({ heading: requestAccessError.message, type: ALERT_ERROR })
+      )
+    }
+    dispatch(fetchSttList())


Realized that the user would not know if the request itself failed so adding in that logic and added the corresponding test below.

hack

Fix header typo

Only use cookie jar if not testing

Rename import rename import rename remove system environmet

Csrf hack

carltonsmith

I just had one question. After that this is ready to go.

carltonsmith · 2020-11-09T20:56:37Z

tdrs-frontend/src/actions/sttList.js

@@ -38,6 +38,12 @@ export const fetchStts = () => async (dispatch) => {
    })

    if (data) {
+      data.forEach((item, i) => {
+        if (item.id === 57) {


@hilvitzs Are we sure this ID will remain constant in all environments?

hilvitzs · 2020-11-09T21:05:23Z

I have no idea

…

On Nov 9, 2020, 1:04 PM -0800, Carl Smith ***@***.***>, wrote: @carltonsmith commented on this pull request. I just had one question. After that this is ready to go. In tdrs-frontend/src/actions/sttList.js: > @@ -38,6 +38,12 @@ export const fetchStts = () => async (dispatch) => { }) if (data) { + data.forEach((item, i) => { + if (item.id === 57) { @hilvitzs Are we sure this ID will remain constant in all environments? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

riatzukiza · 2020-11-09T21:08:37Z

tdrs-frontend/src/actions/auth.js

      withCredentials: true,
    })
+
+    instance.defaults.headers['X-CSRFToken'] = csrf


Due to an issue in production that was not present in our development environments, the csrf token was not available in the cookies like we were expecting them to be. We decided to deal with this by passing csrf with the auth request, since we expected it to be exposed to the client via a cookie any way, we believe this solution to be as secure as using a cookie.

riatzukiza · 2020-11-09T21:09:13Z

tdrs-frontend/src/actions/auth.js

    if (user) {
      dispatch({ type: SET_AUTH, payload: { user } })
    } else {
      dispatch({ type: CLEAR_AUTH })
    }
+    // cookieJar.getCookies(URL, (err, cookies) => {


Should remove this commented code, we thought we could access the cookies via another route to fix the csrf issue, this turned out to not be true.

riatzukiza · 2020-11-09T21:10:34Z

tdrs-frontend/src/actions/requestAccess.js

+  try {
+    const URL = `${process.env.REACT_APP_BACKEND_URL}/users/set_profile/`
+    const user = { first_name: firstName, last_name: lastName, stt: { id } }
+    const { data } = await (await utils.axiosInstance).patch(URL, user, {


We are using a custom axios client for these authenticated patch requests, we set the csrf token as a default value here, but not for the global axios client.

riatzukiza · 2020-11-09T21:12:21Z

tdrs-frontend/src/index.js

+axios.defaults.xsrfCookieName = 'csrftoken'
+axios.defaults.xsrfHeaderName = 'X-CSRFToken'
+axios.defaults.withCredentials = true


I'm not sure we need these lines any more, now that we are getting csrf from auth_check

riatzukiza · 2020-11-09T21:14:27Z

tdrs-frontend/src/utils/index.js

+  get axiosInstance() {
+    if (memo) return memo
+    memo = axios.create({
+      withCredentials: true,


We had some difficulty testing this, it could possibly be refactored, but we are delaying that to a future ticket since this works. We think it is possible the csrf issue is a configuration issue on the frontend ticket. The goal of adding this was to unblock the project while we pursued this

carltonsmith

This is ready to go

carltonsmith · 2020-11-10T20:04:47Z

Closing and re-opening to re-run Snyk

Multi-Issue PR

carltonsmith and others added 30 commits October 1, 2020 13:40

add endpoint

826ffbe

test authorization

c4a95ae

linting

aed59f5

merge cleanup

719fb28

test users with stts

7cc59cd

update to PATCH endpoint

cc6aa2d

update documentation

0a6dea7

update doc formatting

a275240

update permissions

a6ffe9e

run frontend

b9acf63

update shape of call and response tests

dd360db

updating serializers

93ff1b8

accept stts as dict and return as dict

ff8ae09

update docs to show stt changes

979ed1a

add setUser action and reducer and call it from editprofile

57eda4a

Merge branch 'backend/231/profile-update' into 231-submit-form

47a7eb9

pass profileInfo to setUser action

30f7a94

Merge branch '230-form-validation' of github.com:raft-tech/TANF-app i…

df647b2

…nto 231-submit-form

add axios defaults, add setUser action, update auth reducer to handle…

aa76d4d

… setUser

rename all stts to sttList

4ee034d

remove unnecessary useSelector import

394c7e3

add unassigned component, add route and add functionality to editprofile

252cf67

Merge branch '230-form-validation' into 231-submit-form

c58af7e

middle of working on tests

3e6ed16

add tests to actions/requestAccess, reducers/requestAccess, editprofi…

a6076a3

…le, update mockstore in routes.test with requestAccess module, add requestAccess reducer and action

Merge branch 'raft-tdp-main' of github.com:raft-tech/TANF-app into 23…

4a920b8

…1-submit-form

update Request Access form language

ef918b1

remove styles and add utility classes

17b8d94

make ids dynamic

726a4e2

add label prop to formgroup

6fea305

hilvitzs commented Nov 5, 2020

View reviewed changes

carltonsmith approved these changes Nov 5, 2020

View reviewed changes

hilvitzs commented Nov 5, 2020

View reviewed changes

carltonsmith added the raft review This issue is ready for raft review label Nov 5, 2020

carltonsmith requested a review from alexsoble November 5, 2020 21:04

riatzukiza reviewed Nov 5, 2020

View reviewed changes

will set alert if api call for requestAccess fails

fa3ad0f

hilvitzs commented Nov 5, 2020

View reviewed changes

hilvitzs and others added 12 commits November 6, 2020 07:45

remove unused code in EditProfile.test.js

2c4b32b

add sign out function to request and add tests

b121da6

add request-access-button class to make sign out button correct color

59f7259

Attempting to fix

4931a11

hack

Allow X-CSRFToken

567e570

Fix header typo

update

e85f72f

Only use cookie jar if not testing

All tests pass

cbe3ab6

Cleaned lint

4e7c430

Change how we get csrf token

64f6068

fix lint

987da47

Rename import rename import rename remove system environmet

Merge pull request #401 from raft-tech/csrf-hack

b80ac89

Csrf hack

remove unused code lines from Aaron

849d7af

carltonsmith reviewed Nov 9, 2020

View reviewed changes

riatzukiza reviewed Nov 9, 2020

View reviewed changes

hilvitzs and others added 2 commits November 9, 2020 13:57

change federal government check from id to name

fafa313

remove commented code

4306d46

carltonsmith approved these changes Nov 9, 2020

View reviewed changes

carltonsmith linked an issue Nov 10, 2020 that may be closed by this pull request

As a user, I can fill out and submit a form to create my profile. #231

Closed

18 tasks

carltonsmith closed this Nov 10, 2020

riatzukiza pushed a commit that referenced this pull request Jul 22, 2022

Merge pull request #383 from raft-tech/develop

768e6a2

Multi-Issue PR

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend/231/submit-form #383

Frontend/231/submit-form #383

hilvitzs commented Nov 2, 2020 •

edited

Loading

hilvitzs Nov 5, 2020

carltonsmith left a comment

hilvitzs Nov 5, 2020

riatzukiza Nov 5, 2020

riatzukiza Nov 5, 2020

riatzukiza Nov 5, 2020

riatzukiza Nov 5, 2020

hilvitzs Nov 5, 2020

carltonsmith left a comment

carltonsmith Nov 9, 2020

hilvitzs commented Nov 9, 2020 via email •

edited

Loading

riatzukiza Nov 9, 2020

riatzukiza Nov 9, 2020

riatzukiza Nov 9, 2020

riatzukiza Nov 9, 2020

riatzukiza Nov 9, 2020

carltonsmith left a comment

carltonsmith commented Nov 10, 2020

		@@ -1,15 +1,15 @@
		import reducer from './stts'
		import reducer from './sttList'

Frontend/231/submit-form #383

Frontend/231/submit-form #383

Conversation

hilvitzs commented Nov 2, 2020 • edited Loading

This pull request changes...

[AC] This pull request is ready to merge when...

[DoD] This feature is done when...

Choose a reason for hiding this comment

carltonsmith left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

carltonsmith left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hilvitzs commented Nov 9, 2020 via email • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

carltonsmith left a comment

Choose a reason for hiding this comment

carltonsmith commented Nov 10, 2020

hilvitzs commented Nov 2, 2020 •

edited

Loading

hilvitzs commented Nov 9, 2020 via email •

edited

Loading