From e1f6ac68f9b5abe9ad7d958aacb0f75e22e3a1d7 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 31 Mar 2023 23:09:10 +0600
Subject: [PATCH] chore: github astro component

---
 src/components/Login/Divider.astro         |   5 +
 src/components/Login/GithubLogin.astro     |  69 +++++++++++
 src/components/Login/GoogleLogin.astro     |  70 ++++++++++++
 src/components/Login/LoginComponent.tsx    |  69 -----------
 src/components/Login/LoginCopmponent.astro |  31 +++++
 src/components/Login/LoginPopup.astro      |   5 +-
 src/components/Login/google-login.tsx      | 127 ---------------------
 src/icons/github.svg                       |   1 +
 src/icons/google.svg                       |   2 +-
 src/pages/signup.astro                     |  11 +-
 10 files changed, 186 insertions(+), 204 deletions(-)
 create mode 100644 src/components/Login/Divider.astro
 create mode 100644 src/components/Login/GithubLogin.astro
 create mode 100644 src/components/Login/GoogleLogin.astro
 delete mode 100644 src/components/Login/LoginComponent.tsx
 create mode 100644 src/components/Login/LoginCopmponent.astro
 delete mode 100644 src/components/Login/google-login.tsx
 create mode 100644 src/icons/github.svg

diff --git a/src/components/Login/Divider.astro b/src/components/Login/Divider.astro
new file mode 100644
index 000000000..49d9955ed
--- /dev/null
+++ b/src/components/Login/Divider.astro
@@ -0,0 +1,5 @@
+<div class='flex w-full items-center gap-2 py-6 text-sm text-slate-600'>
+  <div class='h-px w-full bg-slate-200'></div>
+  OR
+  <div class='h-px w-full bg-slate-200'></div>
+</div>
diff --git a/src/components/Login/GithubLogin.astro b/src/components/Login/GithubLogin.astro
new file mode 100644
index 000000000..8d204ac89
--- /dev/null
+++ b/src/components/Login/GithubLogin.astro
@@ -0,0 +1,69 @@
+---
+import Icon from '../Icon.astro';
+import Spinner from '../Spinner.astro';
+---
+
+<button
+  class='inline-flex h-10 w-full items-center justify-center 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:opacity-60'
+  id='github-login-button'
+>
+  <Spinner className='text-black hidden' id='github-login-spinner' />
+  <div class='flex items-center' data-github-text>
+    <Icon icon='github' />
+    <span class='ml-2'>Continue with Github</span>
+  </div>
+</button>
+
+<script>
+  import Cookies from 'js-cookie';
+  import { TOKEN_COOKIE_NAME } from '../../lib/utils';
+  const githubLoginButton = document.getElementById('github-login-button');
+  const githubLoginSpinner = document.getElementById('github-login-spinner');
+  const githubLoginText = document.querySelector('[data-github-text]');
+
+  githubLoginButton?.addEventListener('click', () => {
+    githubLoginSpinner?.classList.remove('hidden');
+    githubLoginText?.classList.add('hidden');
+    fetch('http://localhost:8080/v1-github-login', {
+      credentials: 'include',
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        githubLoginText?.classList.remove('hidden');
+        githubLoginSpinner?.classList.add('hidden');
+        window.location.href = data.loginUrl;
+      });
+  });
+
+  window.addEventListener('load', () => {
+    // Get all query params and send them to v1-github-callback
+    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 === 'github') {
+      githubLoginSpinner?.classList.remove('hidden');
+      githubLoginText?.classList.add('hidden');
+      fetch(
+        `http://localhost:8080/v1-github-callback${window.location.search}`,
+        {
+          method: 'GET',
+          credentials: 'include',
+        }
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.token) {
+            Cookies.set(TOKEN_COOKIE_NAME, data.token);
+            githubLoginText?.classList.remove('hidden');
+            githubLoginSpinner?.classList.add('hidden');
+            window.location.href = '/';
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  });
+</script>
diff --git a/src/components/Login/GoogleLogin.astro b/src/components/Login/GoogleLogin.astro
new file mode 100644
index 000000000..6563c2ac6
--- /dev/null
+++ b/src/components/Login/GoogleLogin.astro
@@ -0,0 +1,70 @@
+---
+import Icon from '../Icon.astro';
+import Spinner from '../Spinner.astro';
+---
+
+<button
+  class='inline-flex h-10 w-full items-center justify-center 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:opacity-60'
+  id='google-login-button'
+>
+  <Spinner className='text-black hidden' id='google-login-spinner' />
+  <div class='flex items-center' data-google-text>
+    <Icon icon='google' />
+    <span class='ml-2'>Continue with Google</span>
+  </div>
+</button>
+
+<script>
+  import Cookies from 'js-cookie';
+  import { TOKEN_COOKIE_NAME } from '../../lib/utils';
+  const googleLoginButton = document.getElementById('google-login-button');
+  const googleLoginSpinner = document.getElementById('google-login-spinner');
+  const googleLoginText = document.querySelector('[data-google-text]');
+
+  googleLoginButton?.addEventListener('click', () => {
+    googleLoginSpinner?.classList.remove('hidden');
+    googleLoginText?.classList.add('hidden');
+    fetch('http://localhost:8080/v1-google-login', {
+      credentials: 'include',
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        googleLoginText?.classList.remove('hidden');
+        googleLoginSpinner?.classList.add('hidden');
+        window.location.href = data.loginUrl;
+      });
+  });
+
+  window.addEventListener('load', () => {
+    // Get all query params and send them to v1-google-callback
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+    const state = urlParams.get('state');
+    const prompt = urlParams.get('prompt');
+    const provider = urlParams.get('provider');
+
+    if (code && state && prompt && provider === 'google') {
+      googleLoginSpinner?.classList.remove('hidden');
+      googleLoginText?.classList.add('hidden');
+      fetch(
+        `http://localhost:8080/v1-google-callback${window.location.search}`,
+        {
+          method: 'GET',
+          credentials: 'include',
+        }
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.token) {
+            Cookies.set(TOKEN_COOKIE_NAME, data.token);
+            googleLoginText?.classList.remove('hidden');
+            googleLoginSpinner?.classList.add('hidden');
+            window.location.href = '/';
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  });
+</script>
diff --git a/src/components/Login/LoginComponent.tsx b/src/components/Login/LoginComponent.tsx
deleted file mode 100644
index 8445e1af4..000000000
--- a/src/components/Login/LoginComponent.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { FunctionComponent } from 'preact';
-import EmailLoginForm from './email-login-form';
-import GoogleLoginButton from './google-login';
-
-export default function LoginComponent() {
-  return (
-    <div>
-      <div className="text-center">
-        <h2 className="text-2xl font-semibold leading-5 text-slate-900">
-          Welcome back
-        </h2>
-        <p className="mt-2 text-sm leading-4 text-slate-600">
-          Please enter your details.
-        </p>
-      </div>
-
-      <div className="mt-10 space-y-2">
-        <GithubLoginButton />
-        <GoogleLoginButton />
-      </div>
-
-      <Divider />
-
-      <EmailLoginForm />
-
-      <div className="mt-6 text-center text-sm text-slate-600">
-        Don't have an account?{' '}
-        <a href="/signup" className="font-medium text-[#4285f4]">
-          Sign up
-        </a>
-      </div>
-    </div>
-  );
-}
-
-export const Divider: FunctionComponent<{ className?: string }> = ({
-  className,
-}) => {
-  return (
-    <div className="flex w-full items-center gap-2 py-6 text-sm text-slate-600">
-      <div className="h-px w-full bg-slate-200" />
-      OR
-      <div className="h-px w-full bg-slate-200" />
-    </div>
-  );
-};
-
-export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({
-  className,
-}) => {
-  return (
-    <button className="inline-flex h-10 w-full items-center justify-center 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:opacity-60">
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 96 96"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-          fill="#24292f"
-        />
-      </svg>
-      <span className="ml-2">Continue with Github</span>
-    </button>
-  );
-};
diff --git a/src/components/Login/LoginCopmponent.astro b/src/components/Login/LoginCopmponent.astro
new file mode 100644
index 000000000..3e9b71014
--- /dev/null
+++ b/src/components/Login/LoginCopmponent.astro
@@ -0,0 +1,31 @@
+---
+import Divider from './Divider.astro';
+import GithubLogin from './GithubLogin.astro';
+import GoogleLogin from './GoogleLogin.astro';
+import EmailLoginForm from './email-login-form';
+---
+
+<div>
+  <div class='text-center'>
+    <h2 class='text-2xl font-semibold leading-5 text-slate-900'>
+      Welcome back
+    </h2>
+    <p class='mt-2 text-sm leading-4 text-slate-600'>
+      Please enter your details.
+    </p>
+  </div>
+
+  <div class='mt-10 space-y-2'>
+    <GithubLogin />
+    <GoogleLogin />
+  </div>
+
+  <Divider />
+
+  <EmailLoginForm client:load />
+
+  <div class='mt-6 text-center text-sm text-slate-600'>
+    Don't have an account?{' '}
+    <a href='/signup' class='font-medium text-[#4285f4]'> Sign up</a>
+  </div>
+</div>
diff --git a/src/components/Login/LoginPopup.astro b/src/components/Login/LoginPopup.astro
index 2f5948035..be8cc5bd0 100644
--- a/src/components/Login/LoginPopup.astro
+++ b/src/components/Login/LoginPopup.astro
@@ -1,9 +1,8 @@
 ---
 import Popup from '../Popup/Popup.astro';
-import LoginComponent from './LoginComponent'
+import LoginComponent from './LoginCopmponent.astro';
 ---
 
 <Popup id='login-popup' title='' subtitle=''>
-  <LoginComponent client:only="preact" />
+  <LoginComponent />
 </Popup>
-
diff --git a/src/components/Login/google-login.tsx b/src/components/Login/google-login.tsx
deleted file mode 100644
index 35885fffd..000000000
--- a/src/components/Login/google-login.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import Cookies from 'js-cookie';
-import { useEffect, useState } from 'preact/hooks';
-import { TOKEN_COOKIE_NAME } from '../../lib/utils';
-
-export default function GoogleLoginButton() {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  const handleRedirect = () => {
-    setIsLoading(true);
-    fetch('http://localhost:8080/v1-google-login', {
-      credentials: 'include',
-    })
-      .then((res) => res.json())
-      .then((data) => {
-        setIsLoading(false);
-        window.location.href = data.loginUrl;
-      });
-  };
-
-  useEffect(() => {
-    // Get all query params and send them to v1-google-callback
-    const urlParams = new URLSearchParams(window.location.search);
-    const code = urlParams.get('code');
-    const state = urlParams.get('state');
-    const prompt = urlParams.get('prompt');
-
-    if (code && state && prompt) {
-      setIsLoading(true);
-      fetch(
-        `http://localhost:8080/v1-google-callback${window.location.search}`,
-        {
-          method: 'GET',
-          credentials: 'include',
-        }
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          if (data.token) {
-            Cookies.set(TOKEN_COOKIE_NAME, data.token);
-            setIsLoading(false);
-            window.location.href = '/';
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    }
-  }, []);
-
-  return (
-    <button
-      className="mt-2 inline-flex h-10 w-full items-center justify-center 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:opacity-60"
-      onClick={handleRedirect}
-    >
-      {isLoading ? (
-        <Spinner className="text-black" />
-      ) : (
-        <>
-          <GoogleLogo />
-          <span className="ml-2">Continue with Google</span>
-        </>
-      )}
-    </button>
-  );
-}
-
-function Spinner({ className }: { className?: string }) {
-  return (
-    <svg
-      className={`animate-spin" h-5 w-5 ${className}`}
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        className="stroke-[4px] opacity-25"
-        cx={12}
-        cy={12}
-        r={10}
-        stroke="currentColor"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  );
-}
-
-function GoogleLogo() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height={18}
-      viewBox="0 0 186.69 190.5"
-    >
-      <g transform="translate(1184.583 765.171)">
-        <path
-          clipPath="none"
-          mask="none"
-          d="M-1089.333-687.239v36.888h51.262c-2.251 11.863-9.006 21.908-19.137 28.662l30.913 23.986c18.011-16.625 28.402-41.044 28.402-70.052 0-6.754-.606-13.249-1.732-19.483z"
-          fill="#4285f4"
-        />
-        <path
-          clipPath="none"
-          mask="none"
-          d="M-1142.714-651.791l-6.972 5.337-24.679 19.223h0c15.673 31.086 47.796 52.561 85.03 52.561 25.717 0 47.278-8.486 63.038-23.033l-30.913-23.986c-8.486 5.715-19.31 9.179-32.125 9.179-24.765 0-45.806-16.712-53.34-39.226z"
-          fill="#34a853"
-        />
-        <path
-          clipPath="none"
-          mask="none"
-          d="M-1174.365-712.61c-6.494 12.815-10.217 27.276-10.217 42.689s3.723 29.874 10.217 42.689c0 .086 31.693-24.592 31.693-24.592-1.905-5.715-3.031-11.776-3.031-18.098s1.126-12.383 3.031-18.098z"
-          fill="#fbbc05"
-        />
-        <path
-          d="M-1089.333-727.244c14.028 0 26.497 4.849 36.455 14.201l27.276-27.276c-16.539-15.413-38.013-24.852-63.731-24.852-37.234 0-69.359 21.388-85.032 52.561l31.692 24.592c7.533-22.514 28.575-39.226 53.34-39.226z"
-          fill="#ea4335"
-          clipPath="none"
-          mask="none"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/src/icons/github.svg b/src/icons/github.svg
new file mode 100644
index 000000000..1e00675e1
--- /dev/null
+++ b/src/icons/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" className="w-[18px] h-[18px]" viewBox="0 0 98 96"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
\ No newline at end of file
diff --git a/src/icons/google.svg b/src/icons/google.svg
index a2491e75b..719c527b1 100644
--- a/src/icons/google.svg
+++ b/src/icons/google.svg
@@ -1,4 +1,4 @@
-<svg width="90" height="92" viewBox="0 0 90 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="h-[18px] w-[18px]" viewBox="0 0 90 92" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M90 47.1C90 44 89.7 40.8 89.2 37.8H45.9V55.5H70.7C69.7 61.2 66.4 66.2 61.5 69.4L76.3 80.9C85 72.8 90 61 90 47.1Z" fill="#4280EF"/>
 <path d="M45.9 91.9C58.3 91.9 68.7 87.8 76.3 80.8L61.5 69.4C57.4 72.2 52.1 73.8 45.9 73.8C33.9 73.8 23.8 65.7 20.1 54.9L4.90002 66.6C12.7 82.1 28.5 91.9 45.9 91.9Z" fill="#34A353"/>
 <path d="M20.1 54.8C18.2 49.1 18.2 42.9 20.1 37.2L4.90002 25.4C-1.59998 38.4 -1.59998 53.7 4.90002 66.6L20.1 54.8Z" fill="#F6B704"/>
diff --git a/src/pages/signup.astro b/src/pages/signup.astro
index 676906ee2..eb809863f 100644
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@@ -1,9 +1,10 @@
 ---
 import CaptchaFields from '../components/Captcha/CaptchaFields.astro';
 import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro';
-import { Divider, GithubLoginButton } from '../components/Login/LoginComponent';
+import Divider from '../components/Login/Divider.astro';
+import GithubLogin from '../components/Login/GithubLogin.astro';
+import GoogleLogin from '../components/Login/GoogleLogin.astro';
 import EmailLoginForm from '../components/Login/email-login-form';
-import GoogleLoginButton from '../components/Login/google-login';
 import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
@@ -29,8 +30,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         </p>
       </div>
 
-      <GithubLoginButton />
-      <GoogleLoginButton client:load />
+      <div class='flex w-full flex-col items-stretch space-y-2'>
+        <GithubLogin />
+        <GoogleLogin />
+      </div>
 
       <Divider />