156 lines
7.5 KiB
TypeScript
156 lines
7.5 KiB
TypeScript
import Head from 'next/head'
|
|
import Image from 'next/image'
|
|
import { useRouter } from 'next/router'
|
|
import { useTranslation, Trans } from 'next-i18next'
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
|
|
import siteConfig from '../../config/site.config'
|
|
import apiConfig from '../../config/api.config'
|
|
import Navbar from '../../components/Navbar'
|
|
import Footer from '../../components/Footer'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
|
|
export default function OAuthStep1() {
|
|
const router = useRouter()
|
|
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
|
|
<Head>
|
|
<title>{t('OAuth Step 1 - {{title}}', { title: siteConfig.title })}</title>
|
|
</Head>
|
|
|
|
<main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
|
|
<Navbar />
|
|
|
|
<div className="mx-auto w-full max-w-5xl p-4">
|
|
<div className="rounded bg-white p-3 dark:bg-gray-900 dark:text-gray-100">
|
|
<div className="mx-auto w-52">
|
|
<Image src="/images/fabulous-fireworks.png" width={912} height={912} alt="fabulous fireworks" priority />
|
|
</div>
|
|
<h3 className="mb-4 text-center text-xl font-medium">
|
|
{t('Welcome to your new onedrive-vercel-index 🎉')}
|
|
</h3>
|
|
|
|
<h3 className="mt-4 mb-2 text-lg font-medium">{t('Step 1/3: Preparations')}</h3>
|
|
|
|
<p className="py-1 text-sm font-medium text-yellow-400">
|
|
<Trans>
|
|
<FontAwesomeIcon icon="exclamation-triangle" className="mr-1" /> If you have not specified a REDIS_URL
|
|
inside your Vercel env variable, go initialise one at{' '}
|
|
<a href="https://upstash.com/" target="_blank" rel="noopener noreferrer" className="underline">
|
|
Upstash
|
|
</a>
|
|
. Docs:{' '}
|
|
<a
|
|
href="https://docs.upstash.com/redis/howto/vercelintegration"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline"
|
|
>
|
|
Vercel Integration - Upstash
|
|
</a>
|
|
.
|
|
</Trans>
|
|
</p>
|
|
|
|
<p className="py-1">
|
|
<Trans>
|
|
Authorisation is required as no valid{' '}
|
|
<code className="font-mono text-sm underline decoration-pink-600 decoration-wavy">access_token</code> or{' '}
|
|
<code className="font-mono text-sm underline decoration-green-600 decoration-wavy">refresh_token</code>{' '}
|
|
is present on this deployed instance. Check the following configurations before proceeding with
|
|
authorising onedrive-vercel-index with your own Microsoft account.
|
|
</Trans>
|
|
</p>
|
|
|
|
<div className="my-4 overflow-hidden">
|
|
<table className="min-w-full table-auto">
|
|
<tbody>
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
|
CLIENT_ID
|
|
</td>
|
|
<td className="whitespace-nowrap py-1 px-3 text-gray-500 dark:text-gray-400">
|
|
<code className="font-mono text-sm">{apiConfig.clientId}</code>
|
|
</td>
|
|
</tr>
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
|
CLIENT_SECRET*
|
|
</td>
|
|
<td className="whitespace-nowrap py-1 px-3 text-gray-500 dark:text-gray-400">
|
|
<code className="font-mono text-sm">{apiConfig.obfuscatedClientSecret}</code>
|
|
</td>
|
|
</tr>
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
|
REDIRECT_URI
|
|
</td>
|
|
<td className="whitespace-nowrap py-1 px-3 text-gray-500 dark:text-gray-400">
|
|
<code className="font-mono text-sm">{apiConfig.redirectUri}</code>
|
|
</td>
|
|
</tr>
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
|
Auth API URL
|
|
</td>
|
|
<td className="whitespace-nowrap py-1 px-3 text-gray-500 dark:text-gray-400">
|
|
<code className="font-mono text-sm">{apiConfig.authApi}</code>
|
|
</td>
|
|
</tr>
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
|
Drive API URL
|
|
</td>
|
|
<td className="whitespace-nowrap py-1 px-3 text-gray-500 dark:text-gray-400">
|
|
<code className="font-mono text-sm">{apiConfig.driveApi}</code>
|
|
</td>
|
|
</tr>
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
|
API Scope
|
|
</td>
|
|
<td className="whitespace-nowrap py-1 px-3 text-gray-500 dark:text-gray-400">
|
|
<code className="font-mono text-sm">{apiConfig.scope}</code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<p className="py-1 text-sm font-medium">
|
|
<Trans>
|
|
<FontAwesomeIcon icon="exclamation-triangle" className="mr-1 text-yellow-400" /> If you see anything
|
|
missing or incorrect, you need to reconfigure{' '}
|
|
<code className="font-mono text-xs">/config/api.config.js</code> and redeploy this instance.
|
|
</Trans>
|
|
</p>
|
|
|
|
<div className="mb-2 mt-6 text-right">
|
|
<button
|
|
className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800"
|
|
onClick={() => {
|
|
router.push('/onedrive-vercel-index-oauth/step-2')
|
|
}}
|
|
>
|
|
<span>{t('Proceed to OAuth')}</span> <FontAwesomeIcon icon="arrow-right" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function getServerSideProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, ['common'])),
|
|
},
|
|
}
|
|
}
|