nezumi/onedrive-vercel-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/onedrive-vercel-index.git synced 2026-09-22 13:38:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

formatting tailwind classes with prettier

Browse Source
This commit is contained in:
spencerwooo
2022-02-04 16:05:28 +08:00
parent d8ef0733bf
commit e4f3ea7b05
22 changed files with 252 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/onedrive-vercel-index-oauth/step-2.tsx
+17 -17
View File
@@ -20,16 +20,16 @@ export default function OAuthStep2() {
const oAuthUrl = generateAuthorisationUrl()
return (
<div className="dark:bg-gray-900 flex flex-col items-center justify-center min-h-screen bg-white">
<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>
</Head>
<main className="bg-gray-50 dark:bg-gray-800 flex flex-col flex-1 w-full">
<main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
<Navbar />
<div className="w-full max-w-5xl p-4 mx-auto">
<div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
<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-come-back-later.png"
@@ -39,17 +39,17 @@ export default function OAuthStep2() {
priority
/>
</div>
<h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>
<h3 className="mb-4 text-center text-xl font-medium">Welcome to your new onedrive-vercel-index 🎉</h3>
<h3 className="font-medium text-lg mt-4 mb-2">Step 2/3: Get authorisation code</h3>
<h3 className="mt-4 mb-2 text-lg font-medium">Step 2/3: Get authorisation code</h3>
<p className="py-1 text-red-400 font-medium text-sm">
<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.
</p>
<div
className="relative my-2 font-mono border border-gray-500/50 rounded text-sm bg-gray-50 dark:bg-gray-800 cursor-pointer hover:opacity-80"
className="relative my-2 cursor-pointer rounded border border-gray-500/50 bg-gray-50 font-mono text-sm hover:opacity-80 dark:bg-gray-800"
onClick={() => {
window.open(oAuthUrl)
}}
@@ -57,25 +57,25 @@ export default function OAuthStep2() {
<div className="absolute top-0 right-0 p-1 opacity-60">
<FontAwesomeIcon icon="external-link-alt" />
</div>
<pre className="p-2 whitespace-pre-wrap overflow-x-auto">
<pre className="overflow-x-auto whitespace-pre-wrap p-2">
<code>{oAuthUrl}</code>
</pre>
</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-wavy decoration-yellow-400">authorisation code</b>. Your browser will
<b className="underline decoration-yellow-400 decoration-wavy">authorisation code</b>. Your browser will
open a new tab to Microsoft&apos;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-wavy decoration-teal-500">the entire redirected URL</b> down below.
<b className="underline decoration-teal-500 decoration-wavy">the entire redirected URL</b> down below.
</p>
<div className="my-4 rounded overflow-hidden w-2/3 mx-auto">
<div className="my-4 mx-auto w-2/3 overflow-hidden rounded">
<Image src="/images/step-2-screenshot.png" width={1466} height={607} alt="step 2 screenshot" />
</div>
<input
className={`w-full flex-1 border bg-gray-50 dark:bg-gray-800 dark:text-white focus:ring focus:outline-none p-2 font-mono rounded my-2 font-medium text-sm ${
className={`my-2 w-full flex-1 rounded border bg-gray-50 p-2 font-mono text-sm font-medium focus:outline-none focus:ring dark:bg-gray-800 dark:text-white ${
authCode
? 'border-green-500/50 focus:ring-green-500/30 dark:focus:ring-green-500/40'
: 'border-red-500/50 focus:ring-red-500/30 dark:focus:ring-red-500/40'
@@ -91,7 +91,7 @@ export default function OAuthStep2() {
/>
<p className="py-1">The authorisation code extracted is:</p>
<p className="my-2 font-mono border border-gray-400/20 rounded text-sm bg-gray-50 dark:bg-gray-800 p-2 opacity-80 truncate overflow-hidden">
<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>}
</p>
@@ -101,9 +101,9 @@ export default function OAuthStep2() {
: '❌ No valid code extracted.'}
</p>
<div className="text-right mb-2 mt-6">
<div className="mb-2 mt-6 text-right">
<button
className="text-white bg-gradient-to-br from-green-500 to-cyan-400 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-4 py-2.5 text-center disabled:cursor-not-allowed disabled:grayscale"
className="rounded-lg bg-gradient-to-br from-green-500 to-cyan-400 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 disabled:cursor-not-allowed disabled:grayscale dark:focus:ring-green-800"
disabled={authCode === ''}
onClick={() => {
setButtonLoading(true)
@@ -112,7 +112,7 @@ export default function OAuthStep2() {
>
{buttonLoading ? (
<>
<span>Requesting tokens</span> <LoadingIcon className="animate-spin w-4 h-4 ml-1 inline" />
<span>Requesting tokens</span> <LoadingIcon className="ml-1 inline h-4 w-4 animate-spin" />
</>
) : (
<>