Add recaptcha conditions to the add-email form (#24295)

GitOrigin-RevId: 4b90a73edd2435d6c858ccf790827fb3352069e8

services/web/frontend/js/features/settings/components/emails/add-email.tsx

@@ -19,6 +19,7 @@ import { ReCaptcha2 } from '../../../../shared/components/recaptcha-2'
 import { useRecaptcha } from '../../../../shared/hooks/use-recaptcha'
 import OLCol from '@/features/ui/components/ol/ol-col'
 import { ConfirmEmailForm } from '@/features/settings/components/emails/confirm-email-form'
+import RecaptchaConditions from '@/shared/components/recaptcha-conditions'
 
 function AddEmail() {
   const { t } = useTranslation()
@@ -161,6 +162,15 @@ function AddEmail() {
       />
     </>
   )
+  const recaptchaConditions = (
+    <OLCol>
+      <Cell>
+        <div className="affiliations-table-cell-tabbed">
+          <RecaptchaConditions />
+        </div>
+      </Cell>
+    </OLCol>
+  )
 
   if (!isValidEmail(newEmail)) {
     return (
@@ -180,6 +190,7 @@ function AddEmail() {
               <AddNewEmailBtn email={newEmail} disabled />
             </Cell>
           </OLCol>
+          {recaptchaConditions}
         </Layout>
       </form>
     )
@@ -237,6 +248,7 @@ function AddEmail() {
             </Cell>
           </OLCol>
         )}
+        {recaptchaConditions}
       </Layout>
     </form>
   )

services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss

@@ -200,6 +200,14 @@
   }
 }
 
+#settings-page-root {
+  .recaptcha-branding {
+    font-size: var(--font-size-01);
+    text-align: left;
+    padding: 0 0 var(--spacing-04);
+  }
+}
+
 #settings-page-root,
 #action-project-modal {
   &#settings-page-root .confirm-email-form {