Merge pull request #4743 from overleaf/hb-recaptcha-branding

add recaptcha branding on login, registration, pw reset and share modal

GitOrigin-RevId: dcdf3e7987a25712601aed2426cce2467eaecea3

services/web/app/views/_mixins/recaptcha.pug

@@ -0,0 +1,2 @@
+mixin recaptchaConditions()
+	.recaptcha-branding !{translate("recaptcha_conditions", {}, [{}, {name: 'a', attrs: {href: 'https://policies.google.com/privacy', rel: 'noopener noreferrer', target: '_blank'}}, {name: 'a', attrs: {href: 'https://policies.google.com/terms', rel: 'noopener noreferrer', target: '_blank'}}])}

services/web/app/views/user/passwordReset.pug

@@ -1,4 +1,5 @@
 extends ../layout
+include ../_mixins/recaptcha
 
 block vars
 	- metadata = { viewport: true }
@@ -56,3 +57,8 @@ block content
 								)
 									span(ng-hide="passwordResetForm.inflight") #{translate("request_password_reset")}
 									span(ng-show="passwordResetForm.inflight") #{translate("requesting_password_reset")}…
+
+			.row
+				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
+					if showCaptcha
+						+recaptchaConditions

services/web/app/views/user/reconfirm.pug

@@ -1,4 +1,5 @@
 extends ../layout
+include ../_mixins/recaptcha
 
 block content
 	- var email = reconfirm_email ? reconfirm_email : ""
@@ -56,3 +57,7 @@ block content
 									ng-disabled="reconfirmAccountForm.$invalid"
 									aria-label=translate('request_password_reset_to_reconfirm')
 								) #{translate('request_password_reset_to_reconfirm')}
+			.row
+				.col-sm-12.col-md-6.col-md-offset-3
+					if showCaptcha
+						+recaptchaConditions

services/web/frontend/extracted-translations.json

@@ -213,7 +213,6 @@
   "no_preview_available": "",
   "no_search_results": "",
   "no_symbols_found": "",
-  "showing_symbol_search_results": "",
   "normal": "",
   "off": "",
   "ok": "",
@@ -256,6 +255,7 @@
   "raw_logs_description": "",
   "read_only": "",
   "reauthorize_github_account": "",
+  "recaptcha_conditions": "",
   "recent_commits_in_github": "",
   "recompile": "",
   "recompile_from_scratch": "",
@@ -290,6 +290,7 @@
   "share_project": "",
   "share_with_your_collabs": "",
   "show_outline": "",
+  "showing_symbol_search_results": "",
   "something_went_wrong_rendering_pdf": "",
   "something_went_wrong_server": "",
   "somthing_went_wrong_compiling": "",

services/web/frontend/js/features/share-project-modal/components/share-modal-body.js

@@ -7,6 +7,7 @@ import ViewMember from './view-member'
 import OwnerInfo from './owner-info'
 import SendInvitesNotice from './send-invites-notice'
 import { useProjectContext } from '../../../shared/context/project-context'
+import RecaptchaConditions from '../../../shared/components/recaptcha-conditions'
 
 export default function ShareModalBody() {
   const { isAdmin } = useShareProjectContext()
@@ -32,6 +33,9 @@ export default function ShareModalBody() {
       ))}
 
       {isAdmin ? <SendInvites /> : <SendInvitesNotice />}
+      {!window.ExposedSettings.recaptchaDisabled?.invite && (
+        <RecaptchaConditions />
+      )}
     </>
   )
 }

services/web/frontend/js/features/symbol-palette/components/symbol-palette-info-link.js

@@ -20,7 +20,7 @@ export default function SymbolPaletteInfoLink() {
         className="symbol-palette-info-link"
         href="https://www.overleaf.com/learn/latex/List_of_Greek_letters_and_math_symbols"
         target="_blank"
-        rel="noopener noreferer"
+        rel="noopener noreferrer"
       >
         <span className="info-badge" />
       </Button>

services/web/frontend/js/shared/components/recaptcha-conditions.js

@@ -0,0 +1,32 @@
+import { Trans } from 'react-i18next'
+
+export default function RecaptchaConditions() {
+  // the component link children below will be overwritten by the translation string
+  return (
+    <div className="recaptcha-branding">
+      <Trans
+        i18nKey="recaptcha_conditions"
+        components={{
+          1: (
+            <a
+              rel="noopener noreferrer"
+              target="_blank"
+              href="https://policies.google.com/privacy"
+            >
+              Privacy Policy
+            </a>
+          ),
+          2: (
+            <a
+              rel="noopener noreferrer"
+              target="_blank"
+              href="https://policies.google.com/terms"
+            >
+              Terms of Service
+            </a>
+          ),
+        }}
+      />
+    </div>
+  )
+}

services/web/frontend/stylesheets/app/base.less

@@ -147,6 +147,12 @@
   height: 0 !important; // Prevent layout shift
 }
 
+.recaptcha-branding {
+  padding: @padding-sm @padding-sm 0 @padding-sm;
+  text-align: center;
+  font-size: @font-size-small;
+}
+
 .tos-agreement-notice {
   text-align: center;
   margin-top: (@line-height-computed / 4);

services/web/locales/en.json

@@ -480,6 +480,7 @@
   "tooltip_hide_filetree": "Click to hide the file-tree",
   "tooltip_show_filetree": "Click to show the file-tree",
   "cannot_verify_user_not_robot": "Sorry, we could not verify that you are not a robot. Please check that Google reCAPTCHA is not being blocked by an ad blocker or firewall.",
+  "recaptcha_conditions": "This site is protected by reCAPTCHA and the Google <1>Privacy Policy</1> and <2>Terms of Service</2> apply.",
   "uncompiled_changes": "Uncompiled Changes",
   "code_check_failed": "Code check failed",
   "code_check_failed_explanation": "Your code has errors that need to be fixed before the auto-compile can run",