docs: display styled pages when signIn and unauthorized

Signed-off-by: slumbering <slumbering.pierrot@gmail.com>
This commit is contained in:
slumbering 2021-06-11 14:50:29 +02:00
parent 38ee07e5f9
commit f693032cc1
6 changed files with 59 additions and 4 deletions

View File

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

View File

@ -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>
)
}

View File

@ -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;
}

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB