Merge pull request #305 from kloudlite/web/devdoc

Web/devdoc
kloudlite · Sep 30, 2024 · 8c392da · 8c392da
2 parents f76531c + c05617c
commit 8c392da
Show file tree

Hide file tree

Showing 48 changed files with 998 additions and 255 deletions.
diff --git a/Taskfile.yaml b/Taskfile.yaml
@@ -66,14 +66,14 @@ tasks:
         cp -r ./static/{{.app}}/. ./public/
 
         case "{{.tscheck}}" in
-          "no")
-            GATEWAY_URL=$GATEWAY_URL URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev
-            ;;
-
-          *)
+          "yes")
             GATEWAY_URL=$GATEWAY_URL URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev & pnpm typecheck
            ;;
 
+          *)
+            GATEWAY_URL=$GATEWAY_URL URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev
+            ;;
+
         esac
 
 

diff --git a/lib/client/helpers/g-recaptcha.tsx b/lib/client/helpers/g-recaptcha.tsx
@@ -0,0 +1,53 @@
+declare global {
+  interface Window {
+    grecaptcha: {
+      enterprise: {
+        ready: (callback: () => Promise<void>) => void;
+        execute: (
+          sitekey: string,
+          action: {
+            action: string;
+          },
+        ) => Promise<string>;
+      };
+    };
+  }
+}
+
+export const onReady = (callback: () => Promise<void>) => {
+  if (
+    !window.grecaptcha ||
+    !window.grecaptcha.enterprise ||
+    !window.grecaptcha.enterprise.ready
+  ) {
+    console.warn('window.grecaptcha.enterprise.ready is not defined.');
+    return;
+  }
+  const ready = window.grecaptcha.enterprise.ready;
+  ready(callback);
+};
+
+export const execute = async (
+  sitekey: string,
+  action: {
+    action: string;
+  },
+) => {
+  if (
+    !window.grecaptcha ||
+    !window.grecaptcha.enterprise ||
+    !window.grecaptcha.enterprise.ready
+  ) {
+    console.warn('window.grecaptcha.enterprises.ready is not defined.');
+    return;
+  }
+  const exec = window.grecaptcha.enterprise.execute;
+  return exec(sitekey, action);
+};
+
+const grecaptcha = {
+  onReady,
+  execute,
+};
+
+export default grecaptcha;
diff --git a/src/apps/auth/components/footer.tsx b/src/apps/auth/components/footer.tsx
@@ -36,15 +36,15 @@ const menu = [
   },
   {
     title: 'Changelog',
-    to: '/',
+    to: 'https://github.com/kloudlite/kloudlite/releases',
   },
   {
     title: 'Pricing',
-    to: '/',
+    to: `${mainUrl}/pricing`,
   },
   {
     title: 'Legal',
-    to: '/',
+    to: `${mainUrl}/legal/privacy-policy`,
   },
 ];
 
@@ -71,7 +71,7 @@ const Footer = () => {
       <Wrapper className="py-6xl flex flex-col gap-4xl">
         <div className="flex flex-row items-center justify-between">
           <div className="flex flex-col md:flex-row md:items-center gap-lg">
-            <a href="/" aria-label="kloudlite">
+            <a href={mainUrl} aria-label="kloudlite">
               <BrandLogo size={24} detailed />
             </a>
             <span className="text-text-soft bodyMd">

diff --git a/src/apps/auth/consts.tsx b/src/apps/auth/consts.tsx
@@ -1 +1,2 @@
 export const mainUrl = 'https://kloudlite.io';
+export const RECAPTCHA_SITE_KEY = '6LcxXUIqAAAAABtRW-S7Bov6z9PgUHhbNWjTLhND';
diff --git a/src/apps/auth/root.tsx b/src/apps/auth/root.tsx
@@ -2,6 +2,10 @@ import Root, { links as baseLinks } from '~/lib/app-setup/root.jsx';
 import { ChildrenProps } from '~/components/types';
 import ThemeProvider from '~/root/lib/client/hooks/useTheme';
 import authStylesUrl from './styles/index.css';
+import { RECAPTCHA_SITE_KEY } from './consts';
+import { useEffect } from 'react';
+import { useLocation } from '@remix-run/react';
+import grecaptcha from '~/root/lib/client/helpers/g-recaptcha';
 
 export { loader } from '~/lib/app-setup/root.jsx';
 export { shouldRevalidate } from '~/lib/app-setup/root.jsx';
@@ -13,6 +17,39 @@ export const links = () => {
 export { ErrorBoundary } from '~/lib/app-setup/root';
 
 const Layout = ({ children }: ChildrenProps) => {
+  const { pathname, search } = useLocation();
+  const hideCaptcha = () => {
+    let x = document.querySelector('.grecaptcha-badge') as HTMLDivElement;
+    if (x) {
+      if (
+        (pathname.startsWith('/signup') && search === '?mode=email') ||
+        (pathname.startsWith('/login') && search === '?mode=email') ||
+        pathname.startsWith('/forgot-password')
+      ) {
+        x.style.setProperty('display', 'block', 'important');
+        x.style.setProperty('visibility', 'visible');
+      } else {
+        x.style.display = 'none';
+        x.style.setProperty('visibility', 'hidden');
+      }
+    }
+  };
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = `https://www.google.com/recaptcha/enterprise.js?render=${RECAPTCHA_SITE_KEY}`;
+    script.onload = () => {
+      grecaptcha.onReady(async () => {
+        hideCaptcha();
+      });
+    };
+    document.head.appendChild(script);
+  }, []);
+
+  useEffect(() => {
+    hideCaptcha();
+  }, [pathname, search]);
+
   return (
     // <SSRProvider>
     // eslint-disable-next-line react/jsx-no-useless-fragment

diff --git a/src/apps/auth/routes/_main+/forgot-password.tsx b/src/apps/auth/routes/_main+/forgot-password.tsx
@@ -9,6 +9,8 @@ import { handleError } from '~/root/lib/utils/common';
 import { useAuthApi } from '~/auth/server/gql/api-provider';
 import { ArrowRight } from '~/components/icons';
 import Container from '../../components/container';
+import grecaptcha from '~/root/lib/client/helpers/g-recaptcha';
+import { RECAPTCHA_SITE_KEY } from '~/auth/consts';
 
 const ForgetPassword = () => {
   const api = useAuthApi();
@@ -21,8 +23,13 @@ const ForgetPassword = () => {
     }),
     onSubmit: async (val) => {
       try {
+        const token = await grecaptcha.execute(RECAPTCHA_SITE_KEY, {
+          action: 'login',
+        });
         const { errors: e } = await api.requestResetPassword({
           email: val.email,
+          //@ts-ignore
+          token,
         });
         if (e) {
           throw e[0];

diff --git a/src/apps/auth/routes/_providers+/login.tsx b/src/apps/auth/routes/_providers+/login.tsx
@@ -20,6 +20,8 @@ import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 import Container from '../../components/container';
 import { IProviderContext } from './_layout';
+import grecaptcha from '~/root/lib/client/helpers/g-recaptcha';
+import { RECAPTCHA_SITE_KEY } from '~/auth/consts';
 
 const CustomGoogleIcon = (props: any) => {
   return <GoogleLogo {...props} weight={4} />;
@@ -41,14 +43,19 @@ const LoginWithEmail = () => {
     }),
     onSubmit: async (v) => {
       try {
+        const token = await grecaptcha.execute(RECAPTCHA_SITE_KEY, {
+          action: 'login',
+        });
         const { errors: _errors } = await api.login({
           email: v.email,
           password: v.password,
+          //@ts-ignore
+          token,
         });
         if (_errors) {
           throw _errors[0];
         }
-        toast.success('logged in success fully');
+        toast.success('Logged in successfully');
 
         const callback = searchParams.get('callback');
         if (callback) {

diff --git a/src/apps/auth/routes/_providers+/signup.tsx b/src/apps/auth/routes/_providers+/signup.tsx
@@ -19,9 +19,10 @@ import { useAPIClient } from '~/root/lib/client/hooks/api-provider';
 import { handleError } from '~/root/lib/utils/common';
 import { ArrowLeft, ArrowRight } from '~/components/icons';
 import { cn } from '~/components/utils';
-import { mainUrl } from '~/auth/consts';
+import { RECAPTCHA_SITE_KEY, mainUrl } from '~/auth/consts';
 import Container from '../../components/container';
 import { IProviderContext } from './_layout';
+import grecaptcha from '~/root/lib/client/helpers/g-recaptcha';
 
 const CustomGoogleIcon = (props: any) => {
   return <GoogleLogo {...props} weight={4} />;
@@ -47,10 +48,14 @@ const SignUpWithEmail = () => {
     }),
     onSubmit: async (v) => {
       try {
+        const token = await grecaptcha.execute(RECAPTCHA_SITE_KEY, {
+          action: 'login',
+        });
         const { errors: _errors } = await api.signUpWithEmail({
           email: v.email,
           name: v.name,
           password: v.password,
+          token,
         });
         if (_errors) {
           throw _errors[0];
@@ -229,7 +234,7 @@ const Signup = () => {
           <br />
           <span>
             <Button
-              to={`${mainUrl}/terms-of-services`}
+              to={`${mainUrl}/legal/terms-of-services`}
               linkComponent={Link}
               className="!inline-block align-bottom"
               variant="plain"
@@ -241,7 +246,7 @@ const Signup = () => {
             />
             <span> and </span>
             <Button
-              to={`${mainUrl}/privacy-policy`}
+              to={`${mainUrl}/legal/privacy-policy`}
               linkComponent={Link}
               className="!inline-block align-bottom"
               variant="plain"

diff --git a/src/apps/devdoc/.env.development b/src/apps/devdoc/.env.development
@@ -2,3 +2,4 @@ APP_ENV=development
 AUTH_URL=https://auth.dev.kloudlite.io
 CONSOLE_URL=https://console.dev.kloudlite.io
 CONTACT_URL=https://marketing-api.dev.kloudlite.io/website/contact-us
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcxXUIqAAAAABtRW-S7Bov6z9PgUHhbNWjTLhND
diff --git a/src/apps/devdoc/.env.production b/src/apps/devdoc/.env.production
@@ -2,3 +2,4 @@ APP_ENV=production
 AUTH_URL=https://auth.kloudlite.io
 CONSOLE_URL=https://console.kloudlite.io
 CONTACT_URL=https://marketing-api.dev.kloudlite.io/website/contact-us
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcxXUIqAAAAABtRW-S7Bov6z9PgUHhbNWjTLhND
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const mainUrl = 'https://kloudlite.io';
		export const RECAPTCHA_SITE_KEY = '6LcxXUIqAAAAABtRW-S7Bov6z9PgUHhbNWjTLhND';