From 6b4be3f0ab6e9d05297054b41e03491e63bad443 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 9 Apr 2023 05:56:07 +0100
Subject: [PATCH] Refactor login button

---
 .env.example                                  |  1 +
 astro.config.mjs                              |  6 +-
 package.json                                  |  2 +-
 .../{Icon.astro => AstroIcon.astro}           |  3 +-
 src/components/BestPracticeHeader.astro       |  2 +-
 src/components/FAQs/Question.astro            |  2 +-
 src/components/Footer.astro                   |  2 +-
 src/components/Loader.astro                   |  2 +-
 src/components/Login/GithubLogin.astro        |  8 +-
 src/components/Login/GoogleLogin.astro        |  2 +-
 .../Navigation/AccountDropdown.astro          |  2 +-
 src/components/Navigation/Navigation.astro    |  2 +-
 src/components/OpenSourceBanner.astro         |  2 +-
 src/components/Popup/Popup.astro              |  2 +-
 src/components/RoadmapHeader.astro            |  2 +-
 src/components/RoadmapHint.astro              |  2 +-
 src/components/Setting/SettingSidebar.astro   |  2 +-
 src/components/ShareIcons/ShareIcons.astro    |  2 +-
 src/components/SocialAuth/GitHubButton.tsx    | 92 +++++++++++++++++++
 src/components/Sponsor/Sponsor.astro          |  2 +-
 .../TopicOverlay/TopicOverlay.astro           |  2 +-
 src/components/TopicSearch/TopicSearch.astro  |  2 +-
 src/components/UpcomingForm.astro             |  2 +-
 src/components/YouTubeBanner.astro            |  2 +-
 src/env.d.ts                                  |  1 +
 src/icons/spinner.svg                         |  6 +-
 src/pages/404.astro                           |  2 +-
 src/pages/signup.astro                        |  3 +-
 src/pages/verify.astro                        |  2 +-
 29 files changed, 128 insertions(+), 34 deletions(-)
 create mode 100644 .env.example
 rename src/components/{Icon.astro => AstroIcon.astro} (93%)
 create mode 100644 src/components/SocialAuth/GitHubButton.tsx

diff --git a/.env.example b/.env.example
new file mode 100644
index 000000000..1e1b77ec2
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+PUBLIC_API_URL=http://api.roadmap.sh
diff --git a/astro.config.mjs b/astro.config.mjs
index 05f352c3b..de84afe7f 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,8 +1,8 @@
 // https://astro.build/config
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
-import compress from 'astro-compress';
 import { defineConfig } from 'astro/config';
+import compress from 'astro-compress';
 import rehypeExternalLinks from 'rehype-external-links';
 import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
 import preact from '@astrojs/preact';
@@ -28,7 +28,7 @@ export default defineConfig({
               'https://github.com/kamranahmedse',
               'https://thenewstack.io',
               'https://cs.fyi',
-              'https://roadmap.sh'
+              'https://roadmap.sh',
             ];
 
             if (whiteListedStarts.some((start) => href.startsWith(start))) {
@@ -58,6 +58,6 @@ export default defineConfig({
       css: false,
       js: false,
     }),
-		preact(),
+    preact(),
   ],
 });
diff --git a/package.json b/package.json
index 3f533c128..ed1123dbe 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,8 @@
     "jose": "^4.13.1",
     "js-cookie": "^3.0.1",
     "node-html-parser": "^6.1.5",
-    "preact": "^10.13.2",
     "npm-check-updates": "^16.10.7",
+    "preact": "^10.13.2",
     "rehype-external-links": "^2.0.1",
     "roadmap-renderer": "^1.0.4",
     "tailwindcss": "^3.3.1"
diff --git a/src/components/Icon.astro b/src/components/AstroIcon.astro
similarity index 93%
rename from src/components/Icon.astro
rename to src/components/AstroIcon.astro
index 7e0f77483..69251ebe2 100644
--- a/src/components/Icon.astro
+++ b/src/components/AstroIcon.astro
@@ -35,5 +35,4 @@ const { attributes: baseAttributes, innerHTML } = await getSVG(icon);
 const svgAttributes = { ...baseAttributes, ...attributes };
 ---
 
-
-<svg {...svgAttributes} set:html={innerHTML}></svg>
\ No newline at end of file
+<svg {...svgAttributes} set:html={innerHTML}></svg>
diff --git a/src/components/BestPracticeHeader.astro b/src/components/BestPracticeHeader.astro
index 38ac3971f..504fff3f8 100644
--- a/src/components/BestPracticeHeader.astro
+++ b/src/components/BestPracticeHeader.astro
@@ -1,7 +1,7 @@
 ---
 import BestPracticeHint from './BestPracticeHint.astro';
 import DownloadPopup from './DownloadPopup.astro';
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
 import LoginPopup from './Login/LoginPopup.astro';
 import SubscribePopup from './SubscribePopup.astro';
 
diff --git a/src/components/FAQs/Question.astro b/src/components/FAQs/Question.astro
index 1ba53c113..e933aac0c 100644
--- a/src/components/FAQs/Question.astro
+++ b/src/components/FAQs/Question.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 
 export interface Props {
   question: string;
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 66621494a..b60d5ef2b 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
 ---
 
 <div class='py-6 sm:py-16 pb-10 bg-slate-900 text-white'>
diff --git a/src/components/Loader.astro b/src/components/Loader.astro
index 3e5406533..5b2293b85 100644
--- a/src/components/Loader.astro
+++ b/src/components/Loader.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
 ---
 
 <div class='flex justify-center w-full'>
diff --git a/src/components/Login/GithubLogin.astro b/src/components/Login/GithubLogin.astro
index fec6a488c..dd3646f2f 100644
--- a/src/components/Login/GithubLogin.astro
+++ b/src/components/Login/GithubLogin.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 import Spinner from '../Spinner.astro';
 ---
 
@@ -8,10 +8,10 @@ import Spinner from '../Spinner.astro';
   id='github-login-button'
 >
   <Spinner class='hidden text-black' id='github-login-spinner' />
-  <div class='flex items-center' data-github-text>
+  <span class='flex items-center' data-github-text>
     <Icon icon='github' />
     <span class='ml-2'>Continue with Github</span>
-  </div>
+  </span>
 </button>
 
 <p class='hidden text-sm font-medium text-red-600' data-github-error></p>
@@ -49,7 +49,7 @@ import Spinner from '../Spinner.astro';
 
   githubLoginButton?.addEventListener('click', () => {
     addSpinner();
-    fetch('http://localhost:8080/v1-github-login', {
+    fetch(`${import.meta.env.PUBLIC_API_URL}/v1-github-login`, {
       credentials: 'include',
     })
       .then((res) => {
diff --git a/src/components/Login/GoogleLogin.astro b/src/components/Login/GoogleLogin.astro
index 7bc6fa35f..06a251ca1 100644
--- a/src/components/Login/GoogleLogin.astro
+++ b/src/components/Login/GoogleLogin.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 import Spinner from '../Spinner.astro';
 ---
 
diff --git a/src/components/Navigation/AccountDropdown.astro b/src/components/Navigation/AccountDropdown.astro
index afecd86a6..6c2e6df2f 100644
--- a/src/components/Navigation/AccountDropdown.astro
+++ b/src/components/Navigation/AccountDropdown.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 ---
 
 <div class='relative hidden' data-auth-required>
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index 8da993967..a1052d495 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 import AccountDropdown from './AccountDropdown.astro';
 ---
 
diff --git a/src/components/OpenSourceBanner.astro b/src/components/OpenSourceBanner.astro
index 53ec927b0..020f79900 100644
--- a/src/components/OpenSourceBanner.astro
+++ b/src/components/OpenSourceBanner.astro
@@ -1,6 +1,6 @@
 ---
 import { getFormattedStars } from '../lib/github';
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
 
 const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
 ---
diff --git a/src/components/Popup/Popup.astro b/src/components/Popup/Popup.astro
index 79f64e209..b063a43d2 100644
--- a/src/components/Popup/Popup.astro
+++ b/src/components/Popup/Popup.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 
 export interface Props {
   id: string;
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 7696e3a26..be8e2caec 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -1,6 +1,6 @@
 ---
 import DownloadPopup from './DownloadPopup.astro';
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
 import LoginPopup from './Login/LoginPopup.astro';
 import RoadmapHint from './RoadmapHint.astro';
 import RoadmapNote from './RoadmapNote.astro';
diff --git a/src/components/RoadmapHint.astro b/src/components/RoadmapHint.astro
index ceb218905..2fd0b202b 100644
--- a/src/components/RoadmapHint.astro
+++ b/src/components/RoadmapHint.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
 
 export interface Props {
   roadmapId: string;
diff --git a/src/components/Setting/SettingSidebar.astro b/src/components/Setting/SettingSidebar.astro
index 83a0ee383..6f196fe1c 100644
--- a/src/components/Setting/SettingSidebar.astro
+++ b/src/components/Setting/SettingSidebar.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 const { pageUrl, name } = Astro.props;
 
 export interface Props {
diff --git a/src/components/ShareIcons/ShareIcons.astro b/src/components/ShareIcons/ShareIcons.astro
index f788c2ad2..d7648ccda 100644
--- a/src/components/ShareIcons/ShareIcons.astro
+++ b/src/components/ShareIcons/ShareIcons.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 
 export interface Props {
   pageUrl: string;
diff --git a/src/components/SocialAuth/GitHubButton.tsx b/src/components/SocialAuth/GitHubButton.tsx
new file mode 100644
index 000000000..03eefa8d7
--- /dev/null
+++ b/src/components/SocialAuth/GitHubButton.tsx
@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'preact/hooks';
+
+import GitHubIcon from '../../icons/github.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
+import { TOKEN_COOKIE_NAME } from '../../lib/constants';
+import Cookies from 'js-cookie';
+
+type GitHubButtonProps = {};
+
+export function GitHubButton(props: GitHubButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const icon = isLoading ? SpinnerIcon : GitHubIcon;
+
+  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 !== 'github') {
+      return;
+    }
+
+    setIsLoading(true);
+    fetch(
+      `${import.meta.env.PUBLIC_API_URL}/v1-github-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-github-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="GitHub"
+          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
+        Continue with GitHub
+      </button>
+      {error && (
+        <p className="mb-2 mt-1 text-sm font-medium text-red-600">{error}</p>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Sponsor/Sponsor.astro b/src/components/Sponsor/Sponsor.astro
index e28963627..303a7250d 100644
--- a/src/components/Sponsor/Sponsor.astro
+++ b/src/components/Sponsor/Sponsor.astro
@@ -1,6 +1,6 @@
 ---
 import type { GAEventType } from '../Analytics/analytics';
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 
 export type SponsorType = {
   url: string;
diff --git a/src/components/TopicOverlay/TopicOverlay.astro b/src/components/TopicOverlay/TopicOverlay.astro
index a00a6e37c..a42f23375 100644
--- a/src/components/TopicOverlay/TopicOverlay.astro
+++ b/src/components/TopicOverlay/TopicOverlay.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 import Loader from '../Loader.astro';
 
 export interface Props {
diff --git a/src/components/TopicSearch/TopicSearch.astro b/src/components/TopicSearch/TopicSearch.astro
index bb50b5962..37d879989 100644
--- a/src/components/TopicSearch/TopicSearch.astro
+++ b/src/components/TopicSearch/TopicSearch.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
 ---
 
 <script src='./topics.js'></script>
diff --git a/src/components/UpcomingForm.astro b/src/components/UpcomingForm.astro
index 1fad8594b..22c888278 100644
--- a/src/components/UpcomingForm.astro
+++ b/src/components/UpcomingForm.astro
@@ -1,6 +1,6 @@
 ---
 import CaptchaFields from './Captcha/CaptchaFields.astro';
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
 ---
 
 <div class='my-0 px-5 rounded-lg text-left sm:text-center sm:pb-10 pb-8'>
diff --git a/src/components/YouTubeBanner.astro b/src/components/YouTubeBanner.astro
index 12262a74e..ad1628e78 100644
--- a/src/components/YouTubeBanner.astro
+++ b/src/components/YouTubeBanner.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
 ---
 
 <!-- sticky top-0 -->
diff --git a/src/env.d.ts b/src/env.d.ts
index db53e77f0..a7da0c001 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   GITHUB_SHA: string;
+  PUBLIC_API_URL: string;
 }
 
 interface ImportMeta {
diff --git a/src/icons/spinner.svg b/src/icons/spinner.svg
index fc17f519e..8fb5d6030 100644
--- a/src/icons/spinner.svg
+++ b/src/icons/spinner.svg
@@ -1,4 +1,4 @@
 <svg class='h-6 w-6 sm:w-12 sm:h-12 text-gray-200 animate-spin fill-blue-600' viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M46.5 93C72.1812 93 93 72.1812 93 46.5C93 20.8188 72.1812 0 46.5 0C20.8188 0 0 20.8188 0 46.5C0 72.1812 20.8188 93 46.5 93ZM46.5 77C63.3447 77 77 63.3447 77 46.5C77 29.6553 63.3447 16 46.5 16C29.6553 16 16 29.6553 16 46.5C16 63.3447 29.6553 77 46.5 77Z" fill="currentColor"/>
-  <path d="M84.9746 49.5667C89.3257 49.9135 93.2042 46.6479 92.81 42.3008C92.3588 37.3251 91.1071 32.437 89.0872 27.8298C86.0053 20.7998 81.2311 14.6422 75.1905 9.90623C69.15 5.17027 62.031 2.00329 54.4687 0.687889C49.5126 -0.174203 44.467 -0.223422 39.5274 0.525737C35.2118 1.18024 32.966 5.72596 34.3411 9.86865V9.86865C35.7161 14.0113 40.2118 16.1424 44.5681 15.8677C46.9635 15.7166 49.3773 15.8465 51.7599 16.2609C56.7515 17.1291 61.4505 19.2196 65.4377 22.3456C69.4249 25.4717 72.5762 29.5362 74.6105 34.1764C75.5815 36.3912 76.2835 38.7044 76.7084 41.0666C77.4811 45.3626 80.6234 49.2199 84.9746 49.5667V49.5667Z" fill="currentFill"/>
-</svg>
\ No newline at end of file
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M46.5 93C72.1812 93 93 72.1812 93 46.5C93 20.8188 72.1812 0 46.5 0C20.8188 0 0 20.8188 0 46.5C0 72.1812 20.8188 93 46.5 93ZM46.5 77C63.3447 77 77 63.3447 77 46.5C77 29.6553 63.3447 16 46.5 16C29.6553 16 16 29.6553 16 46.5C16 63.3447 29.6553 77 46.5 77Z" fill="#e5e7eb"/>
+  <path d="M84.9746 49.5667C89.3257 49.9135 93.2042 46.6479 92.81 42.3008C92.3588 37.3251 91.1071 32.437 89.0872 27.8298C86.0053 20.7998 81.2311 14.6422 75.1905 9.90623C69.15 5.17027 62.031 2.00329 54.4687 0.687889C49.5126 -0.174203 44.467 -0.223422 39.5274 0.525737C35.2118 1.18024 32.966 5.72596 34.3411 9.86865V9.86865C35.7161 14.0113 40.2118 16.1424 44.5681 15.8677C46.9635 15.7166 49.3773 15.8465 51.7599 16.2609C56.7515 17.1291 61.4505 19.2196 65.4377 22.3456C69.4249 25.4717 72.5762 29.5362 74.6105 34.1764C75.5815 36.3912 76.2835 38.7044 76.7084 41.0666C77.4811 45.3626 80.6234 49.2199 84.9746 49.5667V49.5667Z" fill="#2463eb" />
+</svg>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index edb6be1f1..a6f0b9152 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../components/Icon.astro';
+import Icon from '../components/AstroIcon.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { getRoadmapIds } from '../lib/roadmap';
 
diff --git a/src/pages/signup.astro b/src/pages/signup.astro
index 82493de93..2f8866395 100644
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@@ -6,6 +6,7 @@ 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';
 ---
 
 <BaseLayout
@@ -31,7 +32,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </div>
 
       <div class='flex w-full flex-col items-stretch space-y-2'>
-        <GithubLogin />
+        <GitHubButton client:load />
         <GoogleLogin />
       </div>
 
diff --git a/src/pages/verify.astro b/src/pages/verify.astro
index dad7f03b7..ecdca3ec0 100644
--- a/src/pages/verify.astro
+++ b/src/pages/verify.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from '../components/Icon.astro';
+import Icon from '../components/AstroIcon.astro';
 import SettingLayout from '../layouts/SettingLayout.astro';
 ---