Login: add recaptcha component

2024-06-06 16:12:25 +03:00 · 2024-06-06 16:12:25 +03:00 · 0fc19070dc
commit 0fc19070dc
parent af59952251
8 changed files with 73 additions and 5 deletions
--- a/packages/login/package.json
+++ b/packages/login/package.json
@ -13,11 +13,13 @@
    "deploy": "shx --silent mkdir -p ../../../publish/web/login && shx --silent mkdir -p ../../../publish/web/login/.next && shx --silent mkdir -p ../../../publish/web/login/node_modules && shx --silent mkdir -p ../../../publish/web/login/.next/static && shx cp -r .next/standalone/node_modules/* ../../../publish/web/login/node_modules && shx cp -r .next/static/* ../../../publish/web/login/.next/static    && shx cp -r .next/standalone/packages/login/.next/* ../../../publish/web/login/.next &&  shx cp -f server.prod.js ../../../publish/web/login/server.js"
  },
  "dependencies": {
+    "@hcaptcha/react-hcaptcha": "^1.10.1",
    "i18next": "^20.6.1",
    "next": "14.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-google-recaptcha": "^3.1.0",
+    "react-hcaptcha": "^0.1.1",
    "react-i18next": "^13.2.1",
    "sass": "^1.59.3",
    "styled-components": "^5.3.9"
--- a/packages/login/src/app/(root)/page.tsx
+++ b/packages/login/src/app/(root)/page.tsx
@ -41,6 +41,8 @@ async function Page() {
          <LoginForm
            hashSettings={settings?.passwordHash}
            cookieSettingsEnabled={settings?.cookieSettingsEnabled}
+            reCaptchaPublicKey={settings?.recaptchaPublicKey}
+            reCaptchaType={settings?.recaptchaType}
          />
          <ThirdParty />
          {settings.enableAdmMess && <RecoverAccess />}
--- a/packages/login/src/app/layout.tsx
+++ b/packages/login/src/app/layout.tsx
@ -104,6 +104,8 @@ export default async function RootLayout({
    settings.culture = cookieLng.value;
  }

+  console.log(settings);
+
  return (
    <html lang="en" translate="no">
      <head>
--- a/packages/login/src/components/LoginForm/index.tsx
+++ b/packages/login/src/components/LoginForm/index.tsx
@ -36,6 +36,7 @@ import React, {
 } from "react";
 import { useTranslation } from "react-i18next";
 import ReCAPTCHA from "react-google-recaptcha";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 import { useTheme } from "styled-components";
 import { useSearchParams } from "next/navigation";

@ -63,12 +64,15 @@ const LoginForm = ({
  hashSettings,
  cookieSettingsEnabled,
  reCaptchaPublicKey,
+  reCaptchaType,
 }: LoginFormProps) => {
  const { isLoading, isModalOpen } = useContext(LoginValueContext);
  const { setIsLoading } = useContext(LoginDispatchContext);

  const searchParams = useSearchParams();

+  console.log(reCaptchaPublicKey, reCaptchaType);
+
  const theme = useTheme();

  const { t, ready, i18n } = useTranslation(["Login", "Common"]);
@ -111,6 +115,7 @@ const LoginForm = ({
    setIdentifier(email);
    setEmailFromInvitation(email);
  }, [loginData]);
+
  const authCallback = useCallback(
    async (profile: string) => {
      localStorage.removeItem("profile");
@ -337,6 +342,8 @@ const LoginForm = ({

  const passwordErrorMessage = errorMessage();

+  console.log(reCaptchaPublicKey);
+
  return (
    <form className="auth-form-container">
      <EmailContainer
@ -366,13 +373,17 @@ const LoginForm = ({
        onChangeCheckbox={onChangeCheckbox}
      />

-      {reCaptchaPublicKey && isCaptcha && (
+      {reCaptchaPublicKey && (
        <StyledCaptcha isCaptchaError={isCaptchaError}>
          <div className="captcha-wrapper">
-            <ReCAPTCHA
+            {/* <ReCAPTCHA
              sitekey={reCaptchaPublicKey}
              ref={captchaRef}
-              theme={theme.isBase ? "light" : "dark"}
+              // theme={theme.isBase ? "light" : "dark"}
+              onChange={onSuccessfullyComplete}
+            /> */}
+            <HCaptcha
+              sitekey={reCaptchaPublicKey}
              onChange={onSuccessfullyComplete}
            />
          </div>
--- a/packages/login/src/types/index.ts
+++ b/packages/login/src/types/index.ts
@ -33,7 +33,7 @@ import {
  TThirdPartyProvider,
 } from "@docspace/shared/api/settings/types";
 import { TValidate } from "@docspace/shared/components/email-input/EmailInput.types";
-import { ThemeKeys } from "@docspace/shared/enums";
+import { RecaptchaType, ThemeKeys } from "@docspace/shared/enums";

 export type TDataContext = {
  settings?: TSettings;
@ -85,6 +85,7 @@ export type RegisterModalDialogProps = {
 export type LoginFormProps = {
  hashSettings?: TPasswordHash;
  reCaptchaPublicKey?: string;
+  reCaptchaType?: RecaptchaType;
  cookieSettingsEnabled: boolean;
 };

--- a/packages/shared/api/settings/types.ts
+++ b/packages/shared/api/settings/types.ts
@ -24,7 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode

-import { TenantStatus } from "../../enums";
+import { RecaptchaType, TenantStatus } from "../../enums";
 import { TColorScheme } from "../../themes";

 export type TTfaType = "sms" | "app" | "none";
@ -126,6 +126,8 @@ export type TSettings = {
  defaultPage?: string;
  tagManagerId?: string;
  enabledJoin?: boolean;
+  recaptchaPublicKey?: string;
+  recaptchaType?: RecaptchaType;
 };

 export type TCustomSchema = {
--- a/packages/shared/enums/index.ts
+++ b/packages/shared/enums/index.ts
@ -481,6 +481,13 @@ export enum RoomsType {
  CustomRoom = 5,
 }

+export const enum RecaptchaType {
+  Default = 0,
+  AndroidV2 = 1,
+  iOSV2 = 2,
+  hCaptcha = 3,
+}
+
 export enum AccountsSearchArea {
  People = "0",
  Groups = "1",
--- a/yarn.lock
+++ b/yarn.lock
@ -2036,6 +2036,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/runtime@npm:^7.17.9":
+  version: 7.24.7
+  resolution: "@babel/runtime@npm:7.24.7"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 7b77f566165dee62db3db0296e71d08cafda3f34e1b0dcefcd68427272e17c1704f4e4369bff76651b07b6e49d3ea5a0ce344818af9116e9292e4381e0918c76
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0, @babel/template@npm:^7.3.3, @babel/template@npm:^7.8.6":
  version: 7.24.0
  resolution: "@babel/template@npm:7.24.0"
@ -2655,6 +2664,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@docspace/login@workspace:packages/login"
  dependencies:
+    "@hcaptcha/react-hcaptcha": "npm:^1.10.1"
    "@svgr/webpack": "npm:^8.1.0"
    "@types/node": "npm:^20"
    "@types/react": "npm:^18"
@ -2669,6 +2679,7 @@ __metadata:
    react: "npm:^18.2.0"
    react-dom: "npm:^18.2.0"
    react-google-recaptcha: "npm:^3.1.0"
+    react-hcaptcha: "npm:^0.1.1"
    react-i18next: "npm:^13.2.1"
    sass: "npm:^1.59.3"
    shx: "npm:^0.3.4"
@ -3930,6 +3941,26 @@ __metadata:
  languageName: node
  linkType: hard

+"@hcaptcha/loader@npm:^1.2.1":
+  version: 1.2.4
+  resolution: "@hcaptcha/loader@npm:1.2.4"
+  checksum: bf794dc9e76bcfee352e4ef63a1e2c3a826380a26524b8caa950b0d4529f21dc7ddac34a61b726713abd7da8cfb6cdffd95acdbb5703a7a91b3a7eb9544ebcd5
+  languageName: node
+  linkType: hard
+
+"@hcaptcha/react-hcaptcha@npm:^1.10.1":
+  version: 1.10.1
+  resolution: "@hcaptcha/react-hcaptcha@npm:1.10.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.17.9"
+    "@hcaptcha/loader": "npm:^1.2.1"
+  peerDependencies:
+    react: ">= 16.3.0"
+    react-dom: ">= 16.3.0"
+  checksum: eb7d1123a0b1d8a83bd59493f43c94f88d6912208f92d47e74d5148c47d0c861f7f844015549d2a13f849ab1ccb7874fd7278521ccda4b4baf453f096021f357
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.11.14":
  version: 0.11.14
  resolution: "@humanwhocodes/config-array@npm:0.11.14"
@ -23339,6 +23370,16 @@ __metadata:
  languageName: node
  linkType: hard

+"react-hcaptcha@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "react-hcaptcha@npm:0.1.1"
+  peerDependencies:
+    react: ^16.4.1
+    react-dom: ^16.4.1
+  checksum: 5137314385e007b0d44c6b526ea4d7040798e2f315e0a7d70f2a2b15c50427f9372996c76d67b28ea932270252ac5377e586ae5ec0c3a50045a4d59b93f6d491
+  languageName: node
+  linkType: hard
+
 "react-helmet-async@npm:^1.0.2":
  version: 1.3.0
  resolution: "react-helmet-async@npm:1.3.0"