docs: ✨ display styled pages when signIn and unauthorized

Signed-off-by: slumbering <slumbering.pierrot@gmail.com>

website/src/components/DocPageAuthentication.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { GithubLoginButton } from 'react-social-login-buttons';
-import style from './DocAuthentication.module.css'
+import style from './DocPageAuthentication.module.css'
 
 export default function DocAuthentication() {
     return (

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/theme/DocPage/index.js

@@ -24,7 +24,8 @@ import isEmpty from 'lodash/isEmpty';
 import { checkUserCollaboratorStatus, getUser } from '../../api/github'
 import { GithubLoginButton } from 'react-social-login-buttons';
 import Spinner from '../../components/Spinner';
-import DocAuthentication from '../../components/DocAuthentication';
+import DocPageAuthentication from '../../components/DocPageAuthentication';
+import DocPageRedirect from '../../components/DocPageRedirect';
 
 function DocPageContent({ currentDocRoute, versionMetadata, children }) {
   const { siteConfig, isClient } = useDocusaurusContext();
@@ -168,12 +169,12 @@ function DocPage(props) {
   if (isLoading) return <Spinner />
 
   if ((isUserAuthorized?.status && isUserAuthorized?.status === 401)) {
-    return <p>Redirection vers dagger.io...</p>
+    return <DocPageRedirect />
   }
 
   if (!isUserAuthorized) {
     return (
-      <DocAuthentication />
+      <DocPageAuthentication />
     )
   }