From 9c8cd71ed251af3e7a20b2b5ba48300cddcf8377 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 9 Apr 2023 14:18:11 +0100
Subject: [PATCH] Remove captcha and add google scripts

---
 src/components/SocialAuth/GoogleButton.tsx    | 92 +++++++++++++++++++
 src/pages/[roadmapId]/index.astro             |  2 -
 .../[bestPracticeId]/index.astro              |  1 -
 src/pages/login.astro                         |  2 -
 src/pages/signup.astro                        |  9 +-
 5 files changed, 95 insertions(+), 11 deletions(-)
 create mode 100644 src/components/SocialAuth/GoogleButton.tsx

diff --git a/src/components/SocialAuth/GoogleButton.tsx b/src/components/SocialAuth/GoogleButton.tsx
new file mode 100644
index 000000000..d9908375e
--- /dev/null
+++ b/src/components/SocialAuth/GoogleButton.tsx
@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'preact/hooks';
+
+import GoogleIcon from '../../icons/google.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
+import { TOKEN_COOKIE_NAME } from '../../lib/constants';
+import Cookies from 'js-cookie';
+
+type GoogleButtonProps = {};
+
+export function GoogleButton(props: GoogleButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const icon = isLoading ? SpinnerIcon : GoogleIcon;
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+    const state = urlParams.get('state');
+    const provider = urlParams.get('provider');
+
+    if (!code || !state || provider !== 'google') {
+      return;
+    }
+
+    setIsLoading(true);
+    fetch(
+      `${import.meta.env.PUBLIC_API_URL}/v1-google-callback${
+        window.location.search
+      }`,
+      {
+        method: 'GET',
+        credentials: 'include',
+      }
+    )
+      .then((res) => res.json())
+      .then((data: any) => {
+        if (!data.token) {
+          setError('Something went wrong. Please try again later.');
+          setIsLoading(false);
+        } else {
+          Cookies.set(TOKEN_COOKIE_NAME, data.token);
+          window.location.href = '/';
+        }
+      })
+      .catch((err) => {
+        setError('Something went wrong. Please try again later.');
+        setIsLoading(false);
+      });
+  }, []);
+
+  const handleClick = () => {
+    setIsLoading(true);
+    fetch(`${import.meta.env.PUBLIC_API_URL}/v1-google-login`, {
+      credentials: 'include',
+      redirect: 'follow',
+    })
+      .then((res) => res.json())
+      .then((data: any) => {
+        // @todo proper typing for API response
+        if (data.loginUrl) {
+          window.location.href = data.loginUrl;
+        } else {
+          setError('Something went wrong. Please try again later.');
+          setIsLoading(false);
+        }
+      })
+      .catch((err) => {
+        setError('Something went wrong. Please try again later.');
+        setIsLoading(false);
+      });
+  };
+
+  return (
+    <>
+      <button
+        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
+        disabled={isLoading}
+        onClick={handleClick}
+      >
+        <img
+          src={icon}
+          alt="Google"
+          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
+        Continue with Google
+      </button>
+      {error && (
+        <p className="mb-2 mt-1 text-sm font-medium text-red-600">{error}</p>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index e316f6f2e..9b3b9ec72 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -105,7 +105,5 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
 
     <FAQs faqs={roadmapFAQs} />
     <RelatedRoadmaps roadmap={roadmapData} />
-
-    <CaptchaScripts slot='after-footer' />
   </div>
 </BaseLayout>
diff --git a/src/pages/best-practices/[bestPracticeId]/index.astro b/src/pages/best-practices/[bestPracticeId]/index.astro
index 75103cf21..46c156eaf 100644
--- a/src/pages/best-practices/[bestPracticeId]/index.astro
+++ b/src/pages/best-practices/[bestPracticeId]/index.astro
@@ -94,5 +94,4 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
   </div>
 
   {bestPracticeData.isUpcoming && <UpcomingForm />}
-  <CaptchaScripts slot='after-footer' />
 </BaseLayout>
diff --git a/src/pages/login.astro b/src/pages/login.astro
index ff09f2ac1..d704919ac 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -46,8 +46,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </div>
     </div>
   </div>
-
-  <CaptchaScripts slot='after-footer' />
 </BaseLayout>
 
 <script>
diff --git a/src/pages/signup.astro b/src/pages/signup.astro
index 2f8866395..24a2932fb 100644
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@@ -1,12 +1,11 @@
 ---
-import CaptchaFields from '../components/Captcha/CaptchaFields.astro';
 import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro';
 import Divider from '../components/Login/Divider.astro';
-import GithubLogin from '../components/Login/GithubLogin.astro';
 import GoogleLogin from '../components/Login/GoogleLogin.astro';
 import EmailSignupForm from '../components/Login/EmailSignupForm';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { GitHubButton } from '../components/SocialAuth/GitHubButton';
+import { GoogleButton } from '../components/SocialAuth/GoogleButton';
 ---
 
 <BaseLayout
@@ -31,9 +30,9 @@ import { GitHubButton } from '../components/SocialAuth/GitHubButton';
         </p>
       </div>
 
-      <div class='flex w-full flex-col items-stretch space-y-2'>
+      <div class='flex w-full flex-col items-stretch gap-2'>
         <GitHubButton client:load />
-        <GoogleLogin />
+        <GoogleButton client:load />
       </div>
 
       <Divider />
@@ -48,8 +47,6 @@ import { GitHubButton } from '../components/SocialAuth/GitHubButton';
       </div>
     </div>
   </div>
-
-  <CaptchaScripts slot='after-footer' />
 </BaseLayout>
 
 <script>