feat(customers): CUST-1837 Add reCAPTCHA to password reset for Corner… (

#2164)
bigcommerce · Feb 22, 2022 · 7410ea4 · 7410ea4
1 parent ba7abde
commit 7410ea4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Cornerstone performance optimizations: blocking scripts delaying DomContentLoaded. [#2158](https://github.com/bigcommerce/cornerstone/pull/2158)
 - Cornerstone performance optimizations: remove unused fonts. [#2176](https://github.com/bigcommerce/cornerstone/pull/2176)
 - Update stencil-utils package. [#2157](https://github.com/bigcommerce/cornerstone/pull/2157)
+- Add google recaptcha to password reset request page [#2164](https://github.com/bigcommerce/cornerstone/pull/2164)
 
 ## 6.2.0 (12-13-2021)
 - Fix tooltip on close button of modal is shifted. [#2148](https://github.com/bigcommerce/cornerstone/pull/2148)

diff --git a/assets/scss/components/citadel/forms/_forms.scss b/assets/scss/components/citadel/forms/_forms.scss
@@ -236,6 +236,24 @@
     }
 }
 
+.form-prefixPostfix--centeredColumn {
+    &.wrap {
+        flex-direction: column;
+    }
+
+    .g-recaptcha {
+        margin: 2em auto 0;
+    }
+
+    .form-prefixPostfix-button--postfix {
+
+        @include breakpoint("large") {
+            margin: 1em 0 spacing("half");
+        }
+    }
+
+}
+
 .form-prefixPostfix-button--postfix {
     margin: spacing("half") 0 0;
     order: 1; // 1

diff --git a/templates/pages/auth/forgot-password.html b/templates/pages/auth/forgot-password.html
@@ -1,3 +1,4 @@
+{{inject 'recaptchaTitle' (lang 'forgot_password.recaptcha_title')}}
 {{#partial "page"}}
     <div class="account account--fixedSmall">
         {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
@@ -8,9 +9,10 @@ <h2 class="page-heading">{{lang 'reset_password.heading' }}</h2>
         {{/if}}
         <form action="{{urls.auth.send_password_email}}" class="form forgot-password-form" method="post">
             {{inject 'useValidEmail' (lang 'forms.validate.common.email_address')}}
-            <label class="form-label" for="email">{{lang 'common.email_address'}}</label>
-            <div class="form-prefixPostfix wrap">
-                <input class="form-input" name="email" id="email" type="email" formnovalidate>
+            <div class="form-prefixPostfix form-prefixPostfix--centeredColumn wrap">
+                <label class="form-label" for="email">{{lang 'common.email_address'}}</label>
+                <input class="form-input" name="email" id="email" type="email" formnovalidate> 
+                {{{ forms.forgot_password.recaptcha.markup}}}
                 <input type="submit" class="button button--primary form-prefixPostfix-button--postfix" value="{{lang 'reset_password.heading' }}">
             </div>
         </form>