Merge pull request #615 from slumbering/docs-authentication

WIP: swizzle doc page to implement github auth access

website/.gitignore

@@ -10,6 +10,7 @@
 
 # Misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

website/docusaurus.config.js

@@ -12,8 +12,6 @@ module.exports = {
   organizationName: "Dagger",
   projectName: "Dagger",
   stylesheets: [
-    "https://fonts.gstatic.com",
-    "https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap",
     "https://fonts.googleapis.com/css2?family=Karla&family=Poppins:wght@700&display=swap",
   ],
   themeConfig: {
@@ -58,5 +56,12 @@ module.exports = {
       },
     ],
   ],
-  plugins: ["docusaurus-plugin-sass"],
+  plugins: [
+    "docusaurus-plugin-sass",
+    [
+      "docusaurus2-dotenv", {
+        systemvars: true,
+      },
+    ]
+  ],
 };

website/package.json

@@ -20,9 +20,11 @@
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.0",
+    "docusaurus2-dotenv": "^1.4.0",
     "file-loader": "^6.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-social-login-buttons": "^3.4.0",
     "sass": "^1.34.1",
     "url-loader": "^4.1.1"
   },

website/src/api/github.js

@@ -0,0 +1,68 @@
+import axios from 'axios';
+
+const AxiosInstance = axios.create({
+    headers: { 'Accept': 'application/vnd.github.v3+json' },
+});
+
+function bindApiCall({ url, config, errorMessage }) {
+    try {
+        const apiCall = AxiosInstance.get(url, {
+            ...config,
+            validateStatus: function (status) {
+                return status < 500; // Resolve only if the status code is less than 500
+            }
+        })
+
+        return apiCall
+    } catch (error) {
+        console.log(errorMessage, error.message)
+    }
+}
+
+async function getAccessToken(code) {
+    const accessToken = await bindApiCall({
+        url: 'https://github.com/login/oauth/access_token',
+        config: {
+            params: {
+                code,
+                client_id: process.env.REACT_APP_CLIENT_ID,
+                client_secret: process.env.REACT_APP_CLIENT_SECRET,
+            },
+            errorMessage: 'error getAccessToken'
+        }
+    })
+
+    return accessToken.data
+}
+
+export async function getUser(access_token) {
+    const user = await bindApiCall({
+        url: 'https://api.github.com/user',
+        config: {
+            headers: { Authorization: `token ${access_token}` },
+        },
+        errorMessage: 'error getUser'
+    })
+
+    return {
+        login: user.data?.login,
+        error: user.data?.error_description,
+        status: user.status
+    }
+
+}
+
+export async function checkUserCollaboratorStatus(code) {
+    const { access_token } = await getAccessToken(code)
+    const { login } = await getUser(access_token)
+
+    const isUserCollaborator = await bindApiCall({
+        url: `https://docs-access.dagger.io/u/${login}`,
+        errorMessage: 'error checkUserCollaboratorStatus'
+    })
+
+    return {
+        isAllowed: isUserCollaborator.data,
+        access_token
+    }
+}

website/src/components/DocPageAuthentication.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { GithubLoginButton } from 'react-social-login-buttons';
+import style from './DocPageAuthentication.module.css'
+
+export default function DocAuthentication() {
+    return (
+        <div className={style.container}>
+            <h1 className={style.h1}>Welcome on Dagger documentation</h1>
+            <p>Please Sign In to Github to get access to the doc</p>
+            <GithubLoginButton className={style.btn__github} onClick={() => window.location.href = `//github.com/login/oauth/authorize?client_id=cd8f9be2562bfc8d6cfc&scope=user&allow_signup=false`} />
+        </div>
+    )
+}

website/src/components/DocPageAuthentication.module.css

@@ -0,0 +1,13 @@
+.container {
+  background: url("/img/Dagger_Website_Space_Uranus.png") no-repeat;
+  background-size: cover;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn__github {
+  width: 240px !important;
+}

website/src/components/DocPageRedirect.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import style from './DocPageRedirect.module.css'
+
+
+export default function DocPageRedirect() {
+    const [counter, setCounter] = useState(10)
+
+    useEffect(() => {
+        setTimeout(() => window.location.href = "https://dagger.io", 10000)
+        setInterval(() => setCounter((prevState) => prevState - 1), 1000)
+    }, [])
+
+    return (
+        <div className={`container ${style.wrapper}`}>
+            <div className={`row ${style.row}`}>
+                <div className="col col--4 col--offset-2">
+                    <h1 className={style.h1}>Oups!</h1>
+                    <p>It seems you don't have the permission to see Dagger's documentation. But don't worry you can request an Eary Access :). You'll be redirect to Dagger website in {counter} seconds </p>
+                    <p>See you soon !</p>
+                    <br />
+                    <small><strong>If nothing happen, <a href="https://dagger.io">click here</a> to go to Dagger website</strong></small>
+                </div>
+                <div className="col col--4">
+                    <img src="/img/dagger-astronaute.png" alt="" />
+                </div>
+            </div>
+        </div>
+    )
+}

website/src/components/DocPageRedirect.module.css

@@ -0,0 +1,25 @@
+.wrapper {
+  background: linear-gradient(180deg, #131226, #0e2b3d);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--ifm-color-primary-light);
+  max-width: 100%;
+}
+
+.wrapper a {
+  color: var(--ifm-color-primary-light);
+  text-decoration: underline;
+}
+
+.h1 {
+  margin-bottom: 2rem;
+}
+
+.row {
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}

website/src/components/Spinner.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './Spinner.module.css';
+
+export default function Spinner() {
+    return (
+        <div className={styles.ellipsis}><div></div><div></div><div></div><div></div></div>
+    )
+}

website/src/components/Spinner.module.css

@@ -0,0 +1,64 @@
+.ellipsis {
+  display: inline-block;
+  position: absolute;
+  top: 50vh;
+  z-index: 99999;
+  left: 50vw;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 80px;
+}
+.ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary-dark);
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+html[data-theme="dark"] .ellipsis div {
+  background: var(--ifm-color-primary-light);
+}
+
+.ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}

website/src/theme/DocPage/index.js

@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import renderRoutes from '@docusaurus/renderRoutes';
+import Layout from '@theme/Layout';
+import DocSidebar from '@theme/DocSidebar';
+import MDXComponents from '@theme/MDXComponents';
+import NotFound from '@theme/NotFound';
+import IconArrow from '@theme/IconArrow';
+import { matchPath } from '@docusaurus/router';
+import { translate } from '@docusaurus/Translate';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import { ThemeClassNames, docVersionSearchTag } from '@docusaurus/theme-common';
+import { Redirect } from "react-router";
+import qs from 'querystringify';
+import isEmpty from 'lodash/isEmpty';
+import { checkUserCollaboratorStatus, getUser } from '../../api/github'
+import { GithubLoginButton } from 'react-social-login-buttons';
+import Spinner from '../../components/Spinner';
+import DocPageAuthentication from '../../components/DocPageAuthentication';
+import DocPageRedirect from '../../components/DocPageRedirect';
+
+function DocPageContent({ currentDocRoute, versionMetadata, children }) {
+  const { siteConfig, isClient } = useDocusaurusContext();
+  const { pluginId, permalinkToSidebar, docsSidebars, version } = versionMetadata;
+  const sidebarName = permalinkToSidebar[currentDocRoute.path];
+  const sidebar = docsSidebars[sidebarName];
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+  const [hiddenSidebar, setHiddenSidebar] = useState(false);
+  const toggleSidebar = useCallback(() => {
+    if (hiddenSidebar) {
+      setHiddenSidebar(false);
+    }
+
+    setHiddenSidebarContainer(!hiddenSidebarContainer);
+  }, [hiddenSidebar]);
+  return (
+    <Layout
+      key={isClient}
+      wrapperClassName={ThemeClassNames.wrapper.docPages}
+      pageClassName={ThemeClassNames.page.docPage}
+      searchMetadatas={{
+        version,
+        tag: docVersionSearchTag(pluginId, version),
+      }}>
+      <div className={styles.docPage}>
+        {sidebar && (
+          <div
+            className={clsx(styles.docSidebarContainer, {
+              [styles.docSidebarContainerHidden]: hiddenSidebarContainer,
+            })}
+            onTransitionEnd={(e) => {
+              if (
+                !e.currentTarget.classList.contains(styles.docSidebarContainer)
+              ) {
+                return;
+              }
+
+              if (hiddenSidebarContainer) {
+                setHiddenSidebar(true);
+              }
+            }}
+            role="complementary">
+            <DocSidebar
+              key={
+                // Reset sidebar state on sidebar changes
+                // See https://github.com/facebook/docusaurus/issues/3414
+                sidebarName
+              }
+              sidebar={sidebar}
+              path={currentDocRoute.path}
+              sidebarCollapsible={
+                siteConfig.themeConfig?.sidebarCollapsible ?? true
+              }
+              onCollapse={toggleSidebar}
+              isHidden={hiddenSidebar}
+            />
+
+            {hiddenSidebar && (
+              <div
+                className={styles.collapsedDocSidebar}
+                title={translate({
+                  id: 'theme.docs.sidebar.expandButtonTitle',
+                  message: 'Expand sidebar',
+                  description:
+                    'The ARIA label and title attribute for expand button of doc sidebar',
+                })}
+                aria-label={translate({
+                  id: 'theme.docs.sidebar.expandButtonAriaLabel',
+                  message: 'Expand sidebar',
+                  description:
+                    'The ARIA label and title attribute for expand button of doc sidebar',
+                })}
+                tabIndex={0}
+                role="button"
+                onKeyDown={toggleSidebar}
+                onClick={toggleSidebar}>
+                <IconArrow className={styles.expandSidebarButtonIcon} />
+              </div>
+            )}
+          </div>
+        )}
+        <main
+          className={clsx(styles.docMainContainer, {
+            [styles.docMainContainerEnhanced]:
+              hiddenSidebarContainer || !sidebar,
+          })}>
+          <div
+            className={clsx(
+              'container padding-vert--lg',
+              styles.docItemWrapper,
+              {
+                [styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
+              },
+            )}>
+            <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+          </div>
+        </main>
+      </div>
+    </Layout>
+  );
+}
+
+function DocPage(props) {
+  const {
+    route: { routes: docRoutes },
+    versionMetadata,
+    location,
+  } = props;
+  const currentDocRoute = docRoutes.find((docRoute) =>
+    matchPath(location.pathname, docRoute),
+  );
+
+  // CUSTOM DOCPAGE
+  if (typeof window === "undefined" || (typeof window !== "undefined" && window?.location?.hostname !== "localhost")) {
+    const [isUserAuthorized, setIsUserAuthorized] = useState()
+    const [isLoading, setIsLoading] = useState(true)
+    const [redirectState, setRedirectState] = useState()
+    const authQuery = qs.parse(location.search);
+    const [userAccessToken, setUserAccessToken] = useState((() => {
+      if (typeof window !== "undefined") return window.localStorage.getItem('user-github-key')
+    })())
+
+    useEffect(async () => {
+      if (userAccessToken) {
+        const user = await getUser(userAccessToken)
+        setIsUserAuthorized(user)
+      } else {
+        if (!isEmpty(authQuery)) { //callback after successful auth with github
+          const isUserCollaborator = await checkUserCollaboratorStatus(authQuery.code);
+          if (isUserCollaborator?.isAllowed) {
+            setUserAccessToken(isUserCollaborator.access_token)
+            if (typeof window !== "undefined") window.localStorage.setItem('user-github-key', isUserCollaborator.access_token);
+          }
+
+          setIsUserAuthorized(isUserCollaborator?.isAllowed)
+        }
+      }
+      setIsLoading(false)
+    }, [userAccessToken])
+
+
+    if (isLoading) return <Spinner />
+
+    if (isUserAuthorized === false) {
+      return <DocPageRedirect />
+    }
+
+    if (typeof isUserAuthorized == 'undefined' || isUserAuthorized?.status === 401) {
+      return (
+        <DocPageAuthentication />
+      )
+    }
+  }
+  // END CUSTOM DOCPAGE
+
+  if (!currentDocRoute) {
+    return <NotFound {...props} />;
+  }
+
+  return (
+    <DocPageContent
+      currentDocRoute={currentDocRoute}
+      versionMetadata={versionMetadata}>
+      {renderRoutes(docRoutes)}
+    </DocPageContent>
+  );
+}
+
+export default DocPage;

website/src/theme/DocPage/styles.module.css

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+:root {
+  --doc-sidebar-width: 300px;
+}
+
+:global(.docs-wrapper) {
+  display: flex;
+}
+
+.docPage,
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 997px) {
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: none;
+  }
+
+  .docSidebarContainer {
+    width: var(--doc-sidebar-width);
+    margin-top: calc(-1 * var(--ifm-navbar-height));
+    border-right: 1px solid var(--ifm-toc-border-color);
+    will-change: width;
+    transition: width var(--ifm-transition-fast) ease;
+    clip-path: inset(0);
+  }
+
+  .docSidebarContainerHidden {
+    width: 30px;
+    cursor: pointer;
+  }
+
+  .collapsedDocSidebar {
+    position: sticky;
+    top: 0;
+    height: 100%;
+    max-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--ifm-transition-fast) ease;
+  }
+
+  .collapsedDocSidebar:hover,
+  .collapsedDocSidebar:focus {
+    background-color: var(--ifm-color-emphasis-200);
+  }
+
+  .expandSidebarButtonIcon {
+    transform: rotate(0);
+  }
+  html[dir='rtl'] .expandSidebarButtonIcon {
+    transform: rotate(180deg);
+  }
+
+  html[data-theme='dark'] .collapsedDocSidebar:hover,
+  html[data-theme='dark'] .collapsedDocSidebar:focus {
+    background-color: var(--collapse-button-bg-color-dark);
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(var(--ifm-container-width) + var(--doc-sidebar-width));
+  }
+}
+
+@media (max-width: 996px) {
+  .docSidebarContainer {
+    margin-top: 0;
+  }
+}
+
+@media (min-width: 997px) and (max-width: 1320px) {
+  .docItemWrapper {
+    max-width: calc(
+      var(--ifm-container-width) - var(--doc-sidebar-width) -
+        var(--ifm-spacing-horizontal) * 2
+    );
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) - var(--ifm-spacing-horizontal) * 2
+    );
+  }
+}

website/yarn.lock

@@ -3382,6 +3382,13 @@ docusaurus-plugin-sass@^0.2.0:
   dependencies:
     sass-loader "^10.1.1"
 
+docusaurus2-dotenv@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/docusaurus2-dotenv/-/docusaurus2-dotenv-1.4.0.tgz#9ab900e29de9081f9f1f28f7224ff63760385641"
+  integrity sha512-iWqem5fnBAyeBBtX75Fxp71uUAnwFaXzOmade8zAhN4vL3RG9m27sLSRwjJGVVgIkEo3esjGyCcTGTiCjfi+sg==
+  dependencies:
+    dotenv-webpack "1.7.0"
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -3478,6 +3485,25 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+dotenv-defaults@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz#032c024f4b5906d9990eb06d722dc74cc60ec1bd"
+  integrity sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==
+  dependencies:
+    dotenv "^6.2.0"
+
+dotenv-webpack@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
+  integrity sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw==
+  dependencies:
+    dotenv-defaults "^1.0.2"
+
+dotenv@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
+  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -6891,6 +6917,11 @@ react-side-effect@^2.1.0:
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
   integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
 
+react-social-login-buttons@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/react-social-login-buttons/-/react-social-login-buttons-3.4.0.tgz#7b3f249c661624435e01881cf163ef4c4a960409"
+  integrity sha512-bECnTNfRSPKMnwVdfsLNNi0Fv5A8btJw3ANLg1Zj95DCjP11KPKUuhqOj9AQWLmQeyrLjMO7orEFE5M2QiDY9A==
+
 react-textarea-autosize@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.2.tgz#4f9374d357b0a6f6469956726722549124a1b2db"