fix profile validation and regex error

mitodl · Aug 31, 2023 · 8ebcbfe · 8ebcbfe
1 parent 27f3f5a
commit 8ebcbfe
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/cms/templates/home_page.html b/cms/templates/home_page.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% block bodyclass %}{% if show_new_design_hero or show_new_featured_carousel or show_home_page_video_component %}new-design{% endif %}{% endblock %}
 
 {% load static wagtail_img_src feature_img_src %}
 {% load wagtailcore_tags wagtailembeds_tags %}
@@ -171,4 +172,4 @@ <h3>{{ page.video_component_title }}</h3>
     }
 })
 </script>
-{% endblock %}
+{% endblock %}
diff --git a/cms/templates/product_page.html b/cms/templates/product_page.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% block bodyclass %}{% if new_design %}new-design{% endif %}{% endblock %}
 
 {% load static wagtail_img_src feature_img_src %}
 {% load wagtailcore_tags wagtailembeds_tags %}

diff --git a/frontend/public/scss/home-page/home-page-hero.scss b/frontend/public/scss/home-page/home-page-hero.scss
@@ -1,3 +1,6 @@
+body.new-design {
+    background: white;
+}
 .home-page-hero-row {
   width: 100%;
   height: 600px;

diff --git a/frontend/public/scss/meta-product-page.scss b/frontend/public/scss/meta-product-page.scss
@@ -5,6 +5,6 @@
 @import "product-page/product-details";
 @import "product-page/product-faculty-members";
 
-body {
+body.new-design {
     background: white;
 }
diff --git a/frontend/public/src/components/forms/ProfileFormFields.js b/frontend/public/src/components/forms/ProfileFormFields.js
@@ -23,26 +23,38 @@ import {
   usernameFieldErrorMessage
 } from "../../lib/validation"
 
-export const NAME_REGEX = "^(?![~!@&)(+:'.?,-]+)([^/\\^$#*=[\\]`%_;<>{}\"|]+)$"
+export const NAME_REGEX = /^(?![~!@&)(+:'.?/,`-]+)([^/^$#*=[\]`%_;<>{}"|]+)$/
 
 const seedYear = moment().year()
 
 // Field Error messages
 export const NAME_REGEX_FAIL_MESSAGE =
-  "Name cannot start with a special character ~!@&)(+:'.?,-, and cannot contain any of /^$#*=[]`%_;\\<>{}\"|"
+  "Name cannot start with a special character (~!@&)(+:'.?/,`-), and cannot contain any of (/^$#*=[]`%_;\\<>{}\"|)"
 
 export const fullNameRegex = "^.{2,255}$"
 const fullNameErrorMessage = "Full name must be between 2 and 254 characters."
 
 const countryRegex = "^\\S{2,}$"
 
 export const legalAddressValidation = yup.object().shape({
-  name:          yup.string().label("Full Name"),
+  name: yup
+    .string()
+    .label("Full Name")
+    .matches(fullNameRegex, fullNameErrorMessage)
+    .required(),
   legal_address: yup.object().shape({
-    first_name: yup.string().label("First Name"),
-    last_name:  yup.string().label("Last Name"),
-    country:    yup.string().label("Country"),
-    state:      yup
+    first_name: yup
+      .string()
+      .label("First Name")
+      .matches(NAME_REGEX, NAME_REGEX_FAIL_MESSAGE)
+      .required(),
+    last_name: yup
+      .string()
+      .label("First Name")
+      .matches(NAME_REGEX, NAME_REGEX_FAIL_MESSAGE)
+      .required(),
+    country: yup.string().label("Country"),
+    state:   yup
       .string()
       .label("State")
       .when("country", {
@@ -172,7 +184,6 @@ const renderYearOfBirthField = () => {
         className="form-control"
         autoComplete="bday-year"
         aria-describedby="user_profile.year_of_birth_error"
-        required
       >
         <option value="">-----</option>
         {reverse(range(seedYear - 120, seedYear - 13)).map((year, i) => (
@@ -181,6 +192,7 @@ const renderYearOfBirthField = () => {
           </option>
         ))}
       </Field>
+      <ErrorMessage name="user_profile.year_of_birth" component={FormError} />
     </div>
   )
 }
@@ -208,10 +220,8 @@ export const LegalAddressFields = ({
         autoComplete="given-name"
         aria-describedby="first-name-subtitle"
         aria-label="First Name"
-        required
-        pattern={NAME_REGEX}
-        title={NAME_REGEX_FAIL_MESSAGE}
       />
+      <ErrorMessage name="legal_address.first_name" component={FormError} />
     </div>
     <div className="form-group">
       <label htmlFor="legal_address.last_name" className="fw-bold">
@@ -224,10 +234,8 @@ export const LegalAddressFields = ({
         id="legal_address.last_name"
         className="form-control"
         autoComplete="family-name"
-        required
-        pattern={NAME_REGEX}
-        title={NAME_REGEX_FAIL_MESSAGE}
       />
+      <ErrorMessage name="legal_address.last_name" component={FormError} />
     </div>
     <div className="form-group">
       <label htmlFor="name" className="row">
@@ -246,10 +254,8 @@ export const LegalAddressFields = ({
         autoComplete="name"
         aria-describedby="full-name-subtitle"
         aria-label="Full Name"
-        required
-        pattern={fullNameRegex}
-        title={fullNameErrorMessage}
       />
+      <ErrorMessage name="name" component={FormError} />
     </div>
     {isNewAccount ? (
       <React.Fragment>
@@ -335,7 +341,7 @@ export const LegalAddressFields = ({
           id="legal_address.state"
           className="form-control"
           autoComplete="state"
-          required
+          aria-describedby="legal_address.state_error"
         >
           <option value="">-----</option>
           {findStates(values.legal_address.country, countries)
@@ -348,6 +354,7 @@ export const LegalAddressFields = ({
             )
             : null}
         </Field>
+        <ErrorMessage name="legal_address.state" component={FormError} />
       </div>
     ) : null}
     {isNewAccount ? (

diff --git a/frontend/public/webpack.config.js b/frontend/public/webpack.config.js
@@ -22,8 +22,8 @@ module.exports = function (env, argv) {
     output: {
       path: path.resolve(__dirname, "build"),
       ...(isProduction ? {
-        filename: "[name]-[chunkhash].js",
-        chunkFilename: "[id]-[chunkhash].js",
+        filename: "[name]-[contenthash].js",
+        chunkFilename: "[id]-[contenthash].js",
         crossOriginLoading: "anonymous",
         hashFunction: "xxhash64"
       } : {