mirror of
https://github.com/Nezumi-2711/onedrive-vercel-index.git
synced 2026-09-22 13:38:45 +00:00
add translations for oauth guide pages
This commit is contained in:
myl7
@@ -1,6 +1,7 @@
|
||||
import Head from 'next/head'
|
||||
import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation, Trans } from 'next-i18next'
|
||||
|
||||
import siteConfig from '../../config/site.config'
|
||||
import apiConfig from '../../config/api.config'
|
||||
@@ -11,10 +12,12 @@ 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>{`OAuth Step 1 - ${siteConfig.title}`}</title>
|
||||
<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">
|
||||
@@ -25,34 +28,40 @@ export default function OAuthStep1() {
|
||||
<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">Welcome to your new onedrive-vercel-index 🎉</h3>
|
||||
<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">Step 1/3: Preparations</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">
|
||||
<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>
|
||||
<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">
|
||||
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>
|
||||
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">
|
||||
@@ -111,9 +120,11 @@ export default function OAuthStep1() {
|
||||
</div>
|
||||
|
||||
<p className="py-1 text-sm font-medium">
|
||||
<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.json</code>{' '}
|
||||
and redeploy this instance.
|
||||
<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.json</code> and redeploy this instance.
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
<div className="mb-2 mt-6 text-right">
|
||||
@@ -123,7 +134,7 @@ export default function OAuthStep1() {
|
||||
router.push('/onedrive-vercel-index-oauth/step-2')
|
||||
}}
|
||||
>
|
||||
<span>Proceed to OAuth</span> <FontAwesomeIcon icon="arrow-right" />
|
||||
<span>{t('Proceed to OAuth')}</span> <FontAwesomeIcon icon="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useState } from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { useTranslation, Trans } from 'next-i18next'
|
||||
|
||||
import siteConfig from '../../config/site.config'
|
||||
import Navbar from '../../components/Navbar'
|
||||
@@ -17,12 +18,14 @@ export default function OAuthStep2() {
|
||||
const [authCode, setAuthCode] = useState('')
|
||||
const [buttonLoading, setButtonLoading] = useState(false)
|
||||
|
||||
const { t } = useTranslation()
|
||||
|
||||
const oAuthUrl = generateAuthorisationUrl()
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
|
||||
<Head>
|
||||
<title>{`OAuth Step 2 - ${siteConfig.title}`}</title>
|
||||
<title>{t('OAuth Step 2 - {{title}}', { title: siteConfig.title })}</title>
|
||||
</Head>
|
||||
|
||||
<main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
|
||||
@@ -39,13 +42,17 @@ export default function OAuthStep2() {
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mb-4 text-center text-xl font-medium">Welcome to your new onedrive-vercel-index 🎉</h3>
|
||||
<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">Step 2/3: Get authorisation code</h3>
|
||||
<h3 className="mt-4 mb-2 text-lg font-medium">{t('Step 2/3: Get authorisation code')}</h3>
|
||||
|
||||
<p className="py-1 text-sm font-medium text-red-400">
|
||||
<FontAwesomeIcon icon="exclamation-circle" className="mr-1" /> If you are not the owner of this website,
|
||||
stop now, as continuing with this process may expose your personal files in OneDrive.
|
||||
<Trans>
|
||||
<FontAwesomeIcon icon="exclamation-circle" className="mr-1" /> If you are not the owner of this website,
|
||||
stop now, as continuing with this process may expose your personal files in OneDrive.
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
<div
|
||||
@@ -63,11 +70,13 @@ export default function OAuthStep2() {
|
||||
</div>
|
||||
|
||||
<p className="py-1">
|
||||
The OAuth link for getting the authorisation code has been created. Click on the link above to get the{' '}
|
||||
<b className="underline decoration-yellow-400 decoration-wavy">authorisation code</b>. Your browser will
|
||||
open a new tab to Microsoft's account login page. After logging in and authenticating with your
|
||||
Microsoft account, you will be redirected to a blank page on localhost. Paste{' '}
|
||||
<b className="underline decoration-teal-500 decoration-wavy">the entire redirected URL</b> down below.
|
||||
<Trans>
|
||||
The OAuth link for getting the authorisation code has been created. Click on the link above to get the{' '}
|
||||
<b className="underline decoration-yellow-400 decoration-wavy">authorisation code</b>. Your browser will
|
||||
open a new tab to Microsoft's account login page. After logging in and authenticating with your
|
||||
Microsoft account, you will be redirected to a blank page on localhost. Paste{' '}
|
||||
<b className="underline decoration-teal-500 decoration-wavy">the entire redirected URL</b> down below.
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
<div className="my-4 mx-auto w-2/3 overflow-hidden rounded">
|
||||
@@ -90,15 +99,15 @@ export default function OAuthStep2() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<p className="py-1">The authorisation code extracted is:</p>
|
||||
<p className="py-1">{t('The authorisation code extracted is:')}</p>
|
||||
<p className="my-2 overflow-hidden truncate rounded border border-gray-400/20 bg-gray-50 p-2 font-mono text-sm opacity-80 dark:bg-gray-800">
|
||||
{authCode || <span className="animate-pulse">Waiting for code...</span>}
|
||||
{authCode || <span className="animate-pulse">{t('Waiting for code...')}</span>}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{authCode
|
||||
? '✅ You can now proceed onto the next step: requesting your access token and refresh token.'
|
||||
: '❌ No valid code extracted.'}
|
||||
? t('✅ You can now proceed onto the next step: requesting your access token and refresh token.')
|
||||
: t('❌ No valid code extracted.')}
|
||||
</p>
|
||||
|
||||
<div className="mb-2 mt-6 text-right">
|
||||
@@ -112,11 +121,11 @@ export default function OAuthStep2() {
|
||||
>
|
||||
{buttonLoading ? (
|
||||
<>
|
||||
<span>Requesting tokens</span> <LoadingIcon className="ml-1 inline h-4 w-4 animate-spin" />
|
||||
<span>{t('Requesting tokens')}</span> <LoadingIcon className="ml-1 inline h-4 w-4 animate-spin" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>Get tokens</span> <FontAwesomeIcon icon="arrow-right" />
|
||||
<span>{t('Get tokens')}</span> <FontAwesomeIcon icon="arrow-right" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
@@ -3,6 +3,7 @@ import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { useTranslation, Trans } from 'next-i18next'
|
||||
|
||||
import siteConfig from '../../config/site.config'
|
||||
import Navbar from '../../components/Navbar'
|
||||
@@ -15,6 +16,8 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
const router = useRouter()
|
||||
const [expiryTimeLeft, setExpiryTimeLeft] = useState(expiryTime)
|
||||
|
||||
const { t } = useTranslation()
|
||||
|
||||
useEffect(() => {
|
||||
if (!expiryTimeLeft) return
|
||||
|
||||
@@ -27,7 +30,7 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
|
||||
const [buttonContent, setButtonContent] = useState(
|
||||
<div>
|
||||
<span>Store tokens</span> <FontAwesomeIcon icon="key" />
|
||||
<span>{t('Store tokens')}</span> <FontAwesomeIcon icon="key" />
|
||||
</div>
|
||||
)
|
||||
const [buttonError, setButtonError] = useState(false)
|
||||
@@ -36,7 +39,7 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
setButtonError(false)
|
||||
setButtonContent(
|
||||
<div>
|
||||
<span>Storing tokens</span> <LoadingIcon className="ml-1 inline h-4 w-4 animate-spin" />
|
||||
<span>{t('Storing tokens')}</span> <LoadingIcon className="ml-1 inline h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -46,7 +49,7 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
setButtonError(true)
|
||||
setButtonContent(
|
||||
<div>
|
||||
<span>Error validating identify, restart</span> <FontAwesomeIcon icon="exclamation-circle" />
|
||||
<span>{t('Error validating identify, restart')}</span> <FontAwesomeIcon icon="exclamation-circle" />
|
||||
</div>
|
||||
)
|
||||
return
|
||||
@@ -55,7 +58,7 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
setButtonError(true)
|
||||
setButtonContent(
|
||||
<div>
|
||||
<span>Do not pretend to be the site owner</span> <FontAwesomeIcon icon="exclamation-circle" />
|
||||
<span>{t('Do not pretend to be the site owner')}</span> <FontAwesomeIcon icon="exclamation-circle" />
|
||||
</div>
|
||||
)
|
||||
return
|
||||
@@ -66,7 +69,7 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
setButtonError(false)
|
||||
setButtonContent(
|
||||
<div>
|
||||
<span>Stored! Going home...</span> <FontAwesomeIcon icon="check" />
|
||||
<span>{t('Stored! Going home...')}</span> <FontAwesomeIcon icon="check" />
|
||||
</div>
|
||||
)
|
||||
setTimeout(() => {
|
||||
@@ -77,7 +80,7 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
setButtonError(true)
|
||||
setButtonContent(
|
||||
<div>
|
||||
<span>Error storing the token</span> <FontAwesomeIcon icon="exclamation-circle" />
|
||||
<span>{t('Error storing the token')}</span> <FontAwesomeIcon icon="exclamation-circle" />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
@@ -86,7 +89,7 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
|
||||
<Head>
|
||||
<title>{`OAuth Step 3 - ${siteConfig.title}`}</title>
|
||||
<title>{t('OAuth Step 3 - {{title}}', { title: siteConfig.title })}</title>
|
||||
</Head>
|
||||
|
||||
<main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
|
||||
@@ -103,30 +106,42 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mb-4 text-center text-xl font-medium">Welcome to your new onedrive-vercel-index 🎉</h3>
|
||||
<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">Step 3/3: Get access and refresh tokens</h3>
|
||||
<h3 className="mt-4 mb-2 text-lg font-medium">{t('Step 3/3: Get access and refresh tokens')}</h3>
|
||||
{error ? (
|
||||
<div>
|
||||
<p className="py-1 font-medium text-red-500">
|
||||
<FontAwesomeIcon icon="exclamation-circle" className="mr-2" />
|
||||
<span>Whoops, looks like we got a problem: {error}.</span>
|
||||
<span>
|
||||
{t('Whoops, looks like we got a problem: {{error}}.', {
|
||||
// t('No auth code present')
|
||||
error: t(error)
|
||||
})}
|
||||
</span>
|
||||
</p>
|
||||
<p className="my-2 whitespace-pre-line rounded border border-gray-400/20 bg-gray-50 p-2 font-mono text-sm opacity-80 dark:bg-gray-800">
|
||||
{description}
|
||||
{
|
||||
// t('Where is the auth code? Did you follow step 2 you silly donut?')
|
||||
t(description)
|
||||
}
|
||||
</p>
|
||||
{errorUri && (
|
||||
<p>
|
||||
Check out{' '}
|
||||
<a
|
||||
href={errorUri}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline dark:text-blue-500"
|
||||
>
|
||||
Microsoft's official explanation
|
||||
</a>{' '}
|
||||
on the error message.
|
||||
<Trans>
|
||||
Check out{' '}
|
||||
<a
|
||||
href={errorUri}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline dark:text-blue-500"
|
||||
>
|
||||
Microsoft's official explanation
|
||||
</a>{' '}
|
||||
on the error message.
|
||||
</Trans>
|
||||
</p>
|
||||
)}
|
||||
<div className="mb-2 mt-6 text-right">
|
||||
@@ -136,19 +151,19 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
router.push('/onedrive-vercel-index-oauth/step-1')
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon="arrow-left" /> <span>Restart</span>
|
||||
<FontAwesomeIcon icon="arrow-left" /> <span>{t('Restart')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p className="py-1 font-medium">Success! The API returned what we needed.</p>
|
||||
<p className="py-1 font-medium">{t('Success! The API returned what we needed.')}</p>
|
||||
<ol className="py-1">
|
||||
{accessToken && (
|
||||
<li>
|
||||
<FontAwesomeIcon icon={['far', 'check-circle']} className="text-green-500" />{' '}
|
||||
<span>
|
||||
Acquired access_token:{' '}
|
||||
{t('Acquired access_token: ')}
|
||||
<code className="font-mono text-sm opacity-80">{`${accessToken.substring(0, 60)}...`}</code>
|
||||
</span>
|
||||
</li>
|
||||
@@ -157,7 +172,7 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
<li>
|
||||
<FontAwesomeIcon icon={['far', 'check-circle']} className="text-green-500" />{' '}
|
||||
<span>
|
||||
Acquired refresh_token:{' '}
|
||||
{t('Acquired refresh_token: ')}
|
||||
<code className="font-mono text-sm opacity-80">{`${refreshToken.substring(0, 60)}...`}</code>
|
||||
</span>
|
||||
</li>
|
||||
@@ -165,15 +180,22 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
|
||||
</ol>
|
||||
|
||||
<p className="py-1 text-sm font-medium text-teal-500">
|
||||
<FontAwesomeIcon icon="exclamation-circle" className="mr-1" /> These tokens may take a few seconds to
|
||||
populate after you click the button below. If you go back home and still see the welcome page telling
|
||||
you to re-authenticate, revisit home and do a hard refresh.
|
||||
<FontAwesomeIcon icon="exclamation-circle" className="mr-1" />{' '}
|
||||
{t('These tokens may take a few seconds to populate after you click the button below. ') +
|
||||
t('If you go back home and still see the welcome page telling you to re-authenticate, ') +
|
||||
t('revisit home and do a hard refresh.')}
|
||||
</p>
|
||||
<p className="py-1">
|
||||
Final step, click the button below to store these tokens persistently before they expire after{' '}
|
||||
{Math.floor(expiryTimeLeft / 60)} minutes {expiryTimeLeft - Math.floor(expiryTimeLeft / 60) * 60}{' '}
|
||||
seconds. Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes
|
||||
and updates after your site goes live.
|
||||
{t(
|
||||
'Final step, click the button below to store these tokens persistently before they expire after {{minutes}} minutes {{seconds}} seconds. ',
|
||||
{
|
||||
minutes: Math.floor(expiryTimeLeft / 60),
|
||||
seconds: expiryTimeLeft - Math.floor(expiryTimeLeft / 60) * 60
|
||||
}
|
||||
) +
|
||||
t(
|
||||
'Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes and updates after your site goes live.'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="mb-2 mt-6 text-right">
|
||||
|
||||
Reference in New Issue
Block a user