VAN-299: Add header to Password Reset Alert (#119)

src/reset-password/ResetPasswordPage.jsx

@@ -87,11 +87,10 @@ const ResetPasswordPage = (props) => {
       <>
         <div id="main" className="d-flex justify-content-center m-4" ref={mainRef}>
           <div className="d-flex flex-column mw-500">
-            {props.status === 'failure' ? <Alert variant="danger">{props.errors}</Alert> : null}
-            {emptyFieldError && (
+            {(emptyFieldError || props.status) && (
               <Alert id="validation-errors" variant="danger">
                 <Alert.Heading>{intl.formatMessage(messages['forgot.password.empty.new.password.error.heading'])}</Alert.Heading>
-                <ul><li>{intl.formatMessage(messages['reset.password.empty.new.password.field.error'])}</li></ul>
+                <ul><li>{emptyFieldError || props.errors}</li></ul>
               </Alert>
             )}
             <Form>

src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap

@@ -47,7 +47,20 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
   <div
     className="d-flex flex-column mw-500"
   >
-    
+    <div
+      className="fade alert alert-danger show"
+      id="validation-errors"
+      role="alert"
+    >
+      <div
+        className="alert-heading h4"
+      >
+        We couldn't reset your password.
+      </div>
+      <ul>
+        <li />
+      </ul>
+    </div>
     <form
       className=""
     >
@@ -155,7 +168,6 @@ exports[`ResetPasswordPage should match reset password default section snapshot
   <div
     className="d-flex flex-column mw-500"
   >
-    
     <form
       className=""
     >
@@ -282,11 +294,20 @@ exports[`ResetPasswordPage should match unsuccessful reset message section snaps
   >
     <div
       className="fade alert alert-danger show"
+      id="validation-errors"
       role="alert"
     >
-      Password reset was unsuccessful.
+      <div
+        className="alert-heading h4"
+      >
+        We couldn't reset your password.
+      </div>
+      <ul>
+        <li>
+          Password reset was unsuccessful.
+        </li>
+      </ul>
     </div>
-    
     <form
       className=""
     >