[#11878] Integrate instructor request form with API

[xenosf]

Part of #11878

Depends on #12929

Outline of Solution

• Make request to API when instructor request form is submitted
• Remove home page URL field
• Display server errors
• Improve front-end form validation
  • Use the same email validation regex as the back-end
  • Validate back-end max length constraints
  • Validate back-end name constraints (must start with alphanumeric, cannot contain %, |)
  • Display server error messages
• Add test cases

[jayasting98]

Let's clean up the commit history here as well, like in #12942, specifically this comment.

The current overall history looks like this.

One way to do it is by doing the following. You are free to do it in any other way though.

1. Remove the merging of account-request-form. There may be conflicts because something was changed in the merge commit. The main thing added in the merge was removed anyway in "Remove extra emit".

git rebase --committer-date-is-author-date --onto <commit SHA of "Remove redundant statement"> <commit SHA of merge of account-request-form>

2. Remove the merging of arf-instructor-frontend. There should not be any conflicts.

git rebase --committer-date-is-author-date --onto <commit SHA of "Integrate instructor request form FE with API"> <commit SHA of merge of arf-instructor-frontend>

3. Rebase onto account-request-form from "Integrate instructor request form FE with API" onwards. There should be a conflict because there was a placeholder value.

git rebase --committer-date-is-author-date --onto account-request-form <commit SHA of "Rename methods to be clearer">

4. Double check that the changes after doing the rebase are the same as the changes before the rebase.

[jayasting98]

I just have some comments.

[jayasting98]

My concern with this is that the back-end regex and the front-end regex may go out of sync; I think it would probably be better to use the same regex in the front-end as in the back-end. Still, if the one in the back-end cannot be converted then I guess there is nothing much that we can do (that I know of).

One option would be to use your front-end regex in the back-end, but changing the one in the back-end is probably out of our scope (perhaps this can be done after account-request-form is merged into master). Another option might be to not check this in the front-end at all and just leave this for the back-end to check, but the feedback would probably take longer (requires requests to the server).

In any case, it's probably unlikely that this will go out of sync with the regex in the back-end because it seems it doesn't really change often. For me, I can accept this for now, but let's see if other reviewers want to resolve this and have ideas on how to do so.

[ziqing26]

I think it is fine to leave it as it is now. Maybe add a comment in frontend and backend regex so that future dev know their existence when they touch on one of them

[xenosf]

My other concern with leaving it for the back-end to check (besides the extra requests to the server) is that the display of errors in the front-end would be less clear if there are validation issues for multiple fields. Since the server response is not tied to a particular form field, the error(s) can only be displayed all at once at the bottom of the form and not near the relevant field(s).

I will add a comment to highlight the existence of the separate regexes.

[xenosf]

Would it be better to put the front-end regex in the back-end FieldValidator (alongside the existing back-end one) and convert it together with the other API constants instead? This would reduce the likelihood of someone changing one without noticing the other. However, it could be confusing as the front-end regex isn't actually used in any of the back-end code, and the two regexes are somewhat redundant.

[ziqing26]

I agree putting front-end regex in the back-end might be confusing since it is a pure front-end check. Maybe leave it in the front-end code?

[ziqing26]

The integration LGTM, waiting for final review and settling the discussion on the regex

[jayasting98]

Good work! Thanks!