21 |
25 |
27 |
4 |
7 | )
8 | }
9 |
10 | // As there is no CSS-in-JS styling system, pass class list to override styles
11 | export const LoadingIcon: React.FC<{ className?: string }> = ({ className }) => {
12 | return (
13 |
21 | )
22 | }
23 |
24 | export default Loading
25 |
--------------------------------------------------------------------------------
/utils/fileDetails.ts:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs'
2 |
3 | import siteConfig from '../config/site.config'
4 |
5 | /**
6 | * Convert raw bits file/folder size into a human readable string
7 | *
8 | * @param size File or folder size, in raw bits
9 | * @returns Human readable form of the file or folder size
10 | */
11 | export const humanFileSize = (size: number) => {
12 | if (size < 1024) return size + ' B'
13 | const i = Math.floor(Math.log(size) / Math.log(1024))
14 | const num = size / Math.pow(1024, i)
15 | const round = Math.round(num)
16 | const formatted = round < 10 ? num.toFixed(2) : round < 100 ? num.toFixed(1) : round
17 | return `${formatted} ${'KMGTPEZY'[i - 1]}B`
18 | }
19 |
20 | /**
21 | * Convert the last modified date time into locale friendly string
22 | *
23 | * @param lastModifedDateTime DateTime string in ISO format
24 | * @returns Human readable form of the file or folder last modified date
25 | */
26 | export const formatModifiedDateTime = (lastModifedDateTime: string) => {
27 | return dayjs(lastModifedDateTime).format(siteConfig.datetimeFormat)
28 | }
29 |
--------------------------------------------------------------------------------
/components/previews/ImagePreview.tsx:
--------------------------------------------------------------------------------
1 | import type { OdFileObject } from '../../types'
2 |
3 | import { FC } from 'react'
4 | import { useRouter } from 'next/router'
5 |
6 | import { PreviewContainer, DownloadBtnContainer } from './Containers'
7 | import DownloadButtonGroup from '../DownloadBtnGtoup'
8 | import { getStoredToken } from '../../utils/protectedRouteHandler'
9 |
10 | const ImagePreview: FC<{ file: OdFileObject }> = ({ file }) => {
11 | const { asPath } = useRouter()
12 | const hashedToken = getStoredToken(asPath)
13 |
14 | return (
15 | <>
16 | {loadingText}
6 |
19 |
23 |
25 |
26 | )
27 | }
28 |
29 | export default PDFEmbedPreview
30 |
--------------------------------------------------------------------------------
/utils/getReadablePath.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Make path readable but still valid in URL (means the whole URL is still recognized as a URL)
3 | * @param path Path. May be used as URL path or query value.
4 | * @returns Readable but still valid path
5 | */
6 | export function getReadablePath(path: string) {
7 | path = path
8 | .split('/')
9 | .map(s => decodeURIComponent(s))
10 | .map(s =>
11 | Array.from(s)
12 | .map(c => (isSafeChar(c) ? c : encodeURIComponent(c)))
13 | .join('')
14 | )
15 | .join('/')
16 | return path
17 | }
18 |
19 | // Check if the character is safe (means no need of percent-encoding)
20 | function isSafeChar(c: string) {
21 | if (c.charCodeAt(0) < 0x80) {
22 | // ASCII
23 | if (/^[a-zA-Z0-9\-._~]$/.test(c)) {
24 | // RFC3986 unreserved chars
25 | return true
26 | } else if (/^[*:@,!]$/.test(c)) {
27 | // Some extra pretty safe chars for URL path or query
28 | // Ref: https://stackoverflow.com/a/42287988/11691878
29 | return true
30 | }
31 | } else {
32 | if (!/\s|\u180e/.test(c)) {
33 | // Non-whitespace char. \u180e is missed in \s.
34 | return true
35 | }
36 | }
37 | return false
38 | }
39 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
36 | # redis dump
37 | dump.rdb
38 |
39 | # General
40 | .DS_Store
41 | .AppleDouble
42 | .LSOverride
43 |
44 | # Icon must end with two \r
45 | Icon
46 |
47 |
48 | # Thumbnails
49 | ._*
50 |
51 | # Files that might appear in the root of a volume
52 | .DocumentRevisions-V100
53 | .fseventsd
54 | .Spotlight-V100
55 | .TemporaryItems
56 | .Trashes
57 | .VolumeIcon.icns
58 | .com.apple.timemachine.donotpresent
59 |
60 | # Directories potentially created on remote AFP share
61 | .AppleDB
62 | .AppleDesktop
63 | Network Trash Folder
64 | Temporary Items
65 | .apdisk
66 |
67 | .vscode/*
68 |
69 | # Local History for Visual Studio Code
70 | .history/
71 |
72 | # Built Visual Studio Code Extensions
73 | *.vsix
74 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
3 |
4 | import siteConfig from '../config/site.config'
5 | import Navbar from '../components/Navbar'
6 | import FileListing from '../components/FileListing'
7 | import Footer from '../components/Footer'
8 | import Breadcrumb from '../components/Breadcrumb'
9 | import SwitchLayout from '../components/SwitchLayout'
10 |
11 | export default function Home() {
12 | return (
13 |
20 |
21 |
22 |
14 |
15 | {siteConfig.title}
16 |
17 |
18 |
19 |
28 |
29 |
30 |
31 | )
32 | }
33 |
34 | export async function getServerSideProps({ locale }) {
35 | return {
36 | props: {
37 | ...(await serverSideTranslations(locale, ['common'])),
38 | },
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/pages/api/item.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import type { NextApiRequest, NextApiResponse } from 'next'
3 |
4 | import { getAccessToken } from '.'
5 | import apiConfig from '../../config/api.config'
6 |
7 | export default async function handler(req: NextApiRequest, res: NextApiResponse) {
8 | // Get access token from storage
9 | const accessToken = await getAccessToken()
10 |
11 | // Get item details (specifically, its path) by its unique ID in OneDrive
12 | const { id = '' } = req.query
13 |
14 | // Set edge function caching for faster load times, check docs:
15 | // https://vercel.com/docs/concepts/functions/edge-caching
16 | res.setHeader('Cache-Control', apiConfig.cacheControlHeader)
17 |
18 | if (typeof id === 'string') {
19 | const itemApi = `${apiConfig.driveApi}/items/${id}`
20 |
21 | try {
22 | const { data } = await axios.get(itemApi, {
23 | headers: { Authorization: `Bearer ${accessToken}` },
24 | params: {
25 | select: 'id,name,parentReference',
26 | },
27 | })
28 | res.status(200).json(data)
29 | } catch (error: any) {
30 | res.status(error?.response?.status ?? 500).json({ error: error?.response?.data ?? 'Internal server error.' })
31 | }
32 | } else {
33 | res.status(400).json({ error: 'Invalid driveItem ID.' })
34 | }
35 | return
36 | }
37 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | const defaultTheme = require('tailwindcss/defaultTheme')
2 | const colors = require('tailwindcss/colors')
3 | const siteConfig = require('./config/site.config')
4 |
5 | module.exports = {
6 | mode: 'jit',
7 | content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
8 | theme: {
9 | colors: {
10 | transparent: 'transparent',
11 | current: 'currentColor',
12 | black: colors.black,
13 | white: colors.white,
14 | gray: colors.zinc,
15 | red: colors.rose,
16 | yellow: colors.amber,
17 | green: colors.green,
18 | blue: colors.sky,
19 | indigo: colors.indigo,
20 | purple: colors.purple,
21 | pink: colors.pink,
22 | teal: colors.teal,
23 | cyan: colors.cyan,
24 | orange: colors.orange,
25 | },
26 | extend: {
27 | fontFamily: {
28 | sans: [`"${siteConfig.googleFontSans}"`, '"Noto Sans SC"', ...defaultTheme.fontFamily.sans],
29 | mono: [`"${siteConfig.googleFontMono}"`, ...defaultTheme.fontFamily.mono]
30 | },
31 | colors: {
32 | gray: {
33 | 850: '#222226'
34 | }
35 | },
36 | animation: {
37 | 'spin-slow': 'spin 5s linear infinite',
38 | }
39 | }
40 | },
41 | plugins: [
42 | require('@tailwindcss/line-clamp'),
43 | ],
44 | }
45 |
--------------------------------------------------------------------------------
/utils/fetchOnMount.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import { useEffect, useState } from 'react'
3 | import { getStoredToken } from './protectedRouteHandler'
4 |
5 | /**
6 | * Custom hook for axios to fetch raw file content on component mount
7 | * @param fetchUrl The URL pointing to the raw file content
8 | * @param path The path of the file, used for determining whether path is protected
9 | */
10 | export default function useFileContent(
11 | fetchUrl: string,
12 | path: string
13 | ): { response: any; error: string; validating: boolean } {
14 | const [response, setResponse] = useState('')
15 | const [validating, setValidating] = useState(true)
16 | const [error, setError] = useState('')
17 |
18 | useEffect(() => {
19 | const hashedToken = getStoredToken(path)
20 | const url = fetchUrl + (hashedToken ? `&odpt=${hashedToken}` : '')
21 |
22 | axios
23 | // Using 'blob' as response type to get the response as a raw file blob, which is later parsed as a string.
24 | // Axios defaults response parsing to JSON, which causes issues when parsing JSON files.
25 | .get(url, { responseType: 'blob' })
26 | .then(async res => setResponse(await res.data.text()))
27 | .catch(e => setError(e.message))
28 | .finally(() => setValidating(false))
29 | }, [fetchUrl, path])
30 | return { response, error, validating }
31 | }
32 |
--------------------------------------------------------------------------------
/components/previews/OfficePreview.tsx:
--------------------------------------------------------------------------------
1 | import type { OdFileObject } from '../../types'
2 | import { FC, useEffect, useRef, useState } from 'react'
3 | import { useRouter } from 'next/router'
4 |
5 | import Preview from 'preview-office-docs'
6 |
7 | import DownloadButtonGroup from '../DownloadBtnGtoup'
8 | import { DownloadBtnContainer } from './Containers'
9 | import { getBaseUrl } from '../../utils/getBaseUrl'
10 | import { getStoredToken } from '../../utils/protectedRouteHandler'
11 |
12 | const OfficePreview: FC<{ file: OdFileObject }> = ({ file }) => {
13 | const { asPath } = useRouter()
14 | const hashedToken = getStoredToken(asPath)
15 |
16 | const docContainer = useRef
29 |
33 |
35 |
36 | )
37 | }
38 |
39 | export default OfficePreview
40 |
--------------------------------------------------------------------------------
/pages/[...path].tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import { useRouter } from 'next/router'
3 | import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
4 |
5 | import siteConfig from '../config/site.config'
6 | import Navbar from '../components/Navbar'
7 | import FileListing from '../components/FileListing'
8 | import Footer from '../components/Footer'
9 | import Breadcrumb from '../components/Breadcrumb'
10 | import SwitchLayout from '../components/SwitchLayout'
11 |
12 | export default function Folders() {
13 | const { query } = useRouter()
14 |
15 | return (
16 |
30 |
32 |
17 |
18 | {siteConfig.title}
19 |
20 |
21 |
22 |
31 |
32 |
33 |
34 | )
35 | }
36 |
37 | export async function getServerSideProps({ locale }) {
38 | return {
39 | props: {
40 | ...(await serverSideTranslations(locale, ['common'])),
41 | },
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/components/FourOhFour.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import { Trans } from 'next-i18next'
3 |
4 | const FourOhFour: React.FC<{ errorMsg: string }> = ({ errorMsg }) => {
5 | return (
6 |
24 |
28 |
30 |
7 |
40 | )
41 | }
42 |
43 | export default FourOhFour
44 |
--------------------------------------------------------------------------------
/pages/api/proxy.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import type { NextApiRequest, NextApiResponse } from 'next'
3 |
4 | import apiConfig from '../../config/api.config'
5 |
6 | export default async function handler(req: NextApiRequest, res: NextApiResponse) {
7 | // 'inline' is used for previewing PDF files inside the browser directly
8 | const { url, inline = false } = req.query
9 |
10 | if (!url || typeof url !== 'string') {
11 | res.status(400).json({ error: 'Bad request, URL is not valid.' })
12 | return
13 | }
14 |
15 | // Only handle urls that start with OneDrive's own direct link (or SharePoint's):
16 | // https://public.*.files.1drv.com/y4m0G_0GPeS8AXGrux-lVV79eU1F38VbWxtCSi-8-aUkBLeZH1H6...
17 | const hostname = new URL(url).hostname
18 | if (hostname.match(new RegExp(apiConfig.directLinkRegex)) === null) {
19 | res
20 | .status(400)
21 | .json({ error: `URL forbidden, only OneDrive direct links that match ${apiConfig.directLinkRegex} are allowed.` })
22 | return
23 | }
24 |
25 | const { headers, data: stream } = await axios.get(url as string, {
26 | responseType: 'stream',
27 | })
28 |
29 | // Check if requested file is PDF based on content-type
30 | if (headers['content-type'] === 'application/pdf' && inline) {
31 | // Get filename from content-disposition header
32 | const filename = headers['content-disposition'].split(/filename[*]?=/)[1]
33 | // Remove original content-disposition header
34 | delete headers['content-disposition']
35 | // Add new inline content-disposition header along with filename
36 | headers['content-disposition'] = `inline; filename*=UTF-8''${filename}`
37 | }
38 |
39 | // Send data stream as response
40 | res.writeHead(200, headers)
41 | stream.pipe(res)
42 | }
43 |
--------------------------------------------------------------------------------
/components/previews/TextPreview.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router'
2 | import { useTranslation } from 'next-i18next'
3 |
4 | import FourOhFour from '../FourOhFour'
5 | import Loading from '../Loading'
6 | import DownloadButtonGroup from '../DownloadBtnGtoup'
7 | import useFileContent from '../../utils/fetchOnMount'
8 | import { DownloadBtnContainer, PreviewContainer } from './Containers'
9 |
10 | const TextPreview = ({ file }) => {
11 | const { asPath } = useRouter()
12 | const { t } = useTranslation()
13 |
14 | const { response: content, error, validating } = useFileContent(`/api/raw/?path=${asPath}`, asPath)
15 | if (error) {
16 | return (
17 |
8 |
10 |
11 |
39 |
12 |
13 | {/* eslint-disable-next-line react/no-unescaped-entities */}
14 | Oops, that's a four-oh-four.
15 |
16 |
17 |
18 | {errorMsg}
19 |
20 |
21 |
22 | Press{' '}
23 |
24 | F12
25 | {' '}
26 | and open devtools for more details, or seek help at{' '}
27 |
33 | onedrive-vercel-index discussions
34 |
35 | .
36 |
37 |
38 |
51 |
52 |
54 |
55 |
57 |
58 | )
59 | }
60 |
61 | export default TextPreview
62 |
--------------------------------------------------------------------------------
/utils/protectedRouteHandler.ts:
--------------------------------------------------------------------------------
1 | import sha256 from 'crypto-js/sha256'
2 | import siteConfig from '../config/site.config'
3 |
4 | // Hash password token with SHA256
5 | function encryptToken(token: string): string {
6 | return sha256(token).toString()
7 | }
8 |
9 | // Fetch stored token from localStorage and encrypt with SHA256
10 | export function getStoredToken(path: string): string | null {
11 | const storedToken =
12 | typeof window !== 'undefined' ? JSON.parse(localStorage.getItem(matchProtectedRoute(path)) as string) : ''
13 | return storedToken ? encryptToken(storedToken) : null
14 | }
15 |
16 | /**
17 | * Compares the hash of .password and od-protected-token header
18 | * @param odTokenHeader od-protected-token header (sha256 hashed token)
19 | * @param dotPassword non-hashed .password file
20 | * @returns whether the two hashes are the same
21 | */
22 | export function compareHashedToken({
23 | odTokenHeader,
24 | dotPassword,
25 | }: {
26 | odTokenHeader: string
27 | dotPassword: string
28 | }): boolean {
29 | return encryptToken(dotPassword.trim()) === odTokenHeader
30 | }
31 | /**
32 | * Match the specified route against a list of predefined routes
33 | * @param route directory path
34 | * @returns whether the directory is protected
35 | */
36 |
37 | export function matchProtectedRoute(route: string): string {
38 | const protectedRoutes: string[] = siteConfig.protectedRoutes
39 | let authTokenPath = ''
40 |
41 | for (const r of protectedRoutes) {
42 | // protected route array could be empty
43 | if (r) {
44 | if (
45 | route.startsWith(
46 | r
47 | .split('/')
48 | .map(p => encodeURIComponent(p))
49 | .join('/')
50 | )
51 | ) {
52 | authTokenPath = r
53 | break
54 | }
55 | }
56 | }
57 | return authTokenPath
58 | }
59 |
--------------------------------------------------------------------------------
/components/previews/CodePreview.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react'
2 | import { useTranslation } from 'next-i18next'
3 | import useSystemTheme from 'react-use-system-theme'
4 | import { useRouter } from 'next/router'
5 |
6 | import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
7 | import { tomorrowNightEighties, tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
8 |
9 | import useFileContent from '../../utils/fetchOnMount'
10 | import { getLanguageByFileName } from '../../utils/getPreviewType'
11 | import FourOhFour from '../FourOhFour'
12 | import Loading from '../Loading'
13 | import DownloadButtonGroup from '../DownloadBtnGtoup'
14 | import { DownloadBtnContainer, PreviewContainer } from './Containers'
15 |
16 | const CodePreview: FC<{ file: any }> = ({ file }) => {
17 | const { asPath } = useRouter()
18 | const { response: content, error, validating } = useFileContent(`/api/raw/?path=${asPath}`, asPath)
19 |
20 | const theme = useSystemTheme('dark')
21 | const { t } = useTranslation()
22 |
23 | if (error) {
24 | return (
25 | {content}
53 |
48 |
49 |
51 |
52 |
62 |
63 | )
64 | }
65 |
66 | export default TextPreview
67 |
--------------------------------------------------------------------------------
/utils/fetchWithSWR.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import useSWRInfinite from 'swr/infinite'
3 |
4 | import type { OdAPIResponse } from '../types'
5 |
6 | import { getStoredToken } from './protectedRouteHandler'
7 |
8 | // Common axios fetch function for use with useSWR
9 | export async function fetcher(url: string, token?: string): Promise{content}
50 |
53 | window.open(parseDotUrl(content) ?? '')}
55 | btnColor="blue"
56 | btnText={t('Open URL')}
57 | btnIcon="external-link-alt"
58 | btnTitle={t('Open URL{{url}}', { url: ' ' + parseDotUrl(content) ?? '' })}
59 | />
60 |
61 | -
28 | {path
29 | .slice(0)
30 | .reverse()
31 | .map((p: string, i: number) => (
32 |
-
33 |
34 | encodeURIComponent(p)) 38 | .join('/')}`} 39 | passHref 40 | > 41 | 46 | {p} 47 | 48 | 49 |
50 | ))}
51 | -
52 |
53 |
54 |
61 |
63 | )
64 | }
65 |
66 | export default Breadcrumb
67 |
--------------------------------------------------------------------------------
/components/Auth.tsx:
--------------------------------------------------------------------------------
1 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
2 |
3 | import Image from 'next/image'
4 | import { useRouter } from 'next/router'
5 | import { FC, useState } from 'react'
6 | import { useTranslation } from 'next-i18next'
7 |
8 | import { matchProtectedRoute } from '../utils/protectedRouteHandler'
9 | import useLocalStorage from '../utils/useLocalStorage'
10 |
11 | const Auth: FC<{ redirect: string }> = ({ redirect }) => {
12 | const authTokenPath = matchProtectedRoute(redirect)
13 |
14 | const router = useRouter()
15 | const [token, setToken] = useState('')
16 | const [_, setPersistedToken] = useLocalStorage(authTokenPath, '')
17 |
18 | const { t } = useTranslation()
19 |
20 | return (
21 |
22 |
60 | )
61 | }
62 |
63 | export default Auth
64 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "onedrive-vercel-index",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint",
10 | "format": "prettier 'components/**/*.tsx' 'config/*.js' 'pages/**/*.{ts,tsx}' '{types,utils}/**/*.ts' --write",
11 | "extract": "i18next"
12 | },
13 | "dependencies": {
14 | "@fortawesome/fontawesome-svg-core": "^1.2.35",
15 | "@fortawesome/free-brands-svg-icons": "^5.15.4",
16 | "@fortawesome/free-regular-svg-icons": "^5.15.3",
17 | "@fortawesome/free-solid-svg-icons": "^5.15.3",
18 | "@fortawesome/react-fontawesome": "^0.1.14",
19 | "@headlessui/react": "^1.4.0",
20 | "@tailwindcss/line-clamp": "^0.3.1",
21 | "awesome-debounce-promise": "^2.1.0",
22 | "axios": "^0.25.0",
23 | "cors": "^2.8.5",
24 | "crypto-js": "^4.1.1",
25 | "csstype": "^2.6.2",
26 | "dayjs": "^1.10.7",
27 | "emoji-regex": "^10.0.0",
28 | "ioredis": "^4.28.2",
29 | "jszip": "^3.7.1",
30 | "mpegts.js": "^1.6.10",
31 | "next": "^12.0.10",
32 | "next-i18next": "^10.2.0",
33 | "nextjs-progressbar": "^0.0.13",
34 | "plyr-react": "^3.2.1",
35 | "preview-office-docs": "^1.0.2",
36 | "react": "^17.0.2",
37 | "react-async-hook": "^4.0.0",
38 | "react-audio-player": "^0.17.0",
39 | "react-cookie": "^4.1.1",
40 | "react-copy-to-clipboard": "^5.0.3",
41 | "react-dom": "^17.0.2",
42 | "react-hot-toast": "^2.0.0",
43 | "react-hotkeys-hook": "^3.4.4",
44 | "react-markdown": "^8.0.0",
45 | "react-reader": "^0.20.4",
46 | "react-syntax-highlighter": "^15.4.5",
47 | "react-use-system-theme": "^1.1.1",
48 | "rehype-katex": "^6.0.2",
49 | "rehype-raw": "^6.0.0",
50 | "remark-gfm": "^3.0.1",
51 | "remark-math": "^5.1.1",
52 | "swr": "^1.2.0",
53 | "use-clipboard-copy": "^0.2.0",
54 | "use-constant": "^1.1.0"
55 | },
56 | "devDependencies": {
57 | "@types/cors": "^2.8.12",
58 | "@types/crypto-js": "^4.0.2",
59 | "@types/ioredis": "^4.28.5",
60 | "@types/react": "17.0.38",
61 | "@types/react-copy-to-clipboard": "^5.0.0",
62 | "@types/react-dom": "^17.0.8",
63 | "@types/react-pdf": "^5.0.4",
64 | "@types/react-syntax-highlighter": "^13.5.1",
65 | "autoprefixer": "^10.4.0",
66 | "eslint": "8.8.0",
67 | "eslint-config-next": "12.0.10",
68 | "eslint-config-prettier": "^8.3.0",
69 | "i18next-parser": "^5.4.0",
70 | "postcss": "^8.4.5",
71 | "prettier": "^2.5.1",
72 | "prettier-plugin-tailwindcss": "^0.1.4",
73 | "tailwindcss": "^3.0.18",
74 | "typescript": "4.5.5"
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/config/api.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains the configuration for the API endpoints and tokens we use.
3 | *
4 | * - If you are a OneDrive International user, you would not have to change anything here.
5 | * - If you are not the admin of your OneDrive for Business account, you may need to define your own clientId/clientSecret,
6 | * check documentation for more details.
7 | * - If you are using a E5 Subscription OneDrive for Business account, the direct links of your files are not the same here.
8 | * In which case you would need to change directLinkRegex.
9 | */
10 | module.exports = {
11 | // The clientId and clientSecret are used to authenticate the user with Microsoft Graph API using OAuth. You would
12 | // not need to change anything here if you can authenticate with your personal Microsoft account with OneDrive International.
13 | clientId: 'd87bcc39-1750-4ca0-ad54-f8d0efbb2735',
14 | obfuscatedClientSecret: 'U2FsdGVkX1830zo3/pFDqaBCVBb37iLw3WnBDWGF9GIB2f4apzv0roemp8Y+iIxI3Ih5ecyukqELQEGzZlYiWg==',
15 |
16 | // The redirectUri is the URL that the user will be redirected to after they have authenticated with Microsoft Graph API.
17 | // Likewise, you would not need to change redirectUri if you are using your personal Microsoft account with OneDrive International.
18 | redirectUri: 'http://localhost',
19 |
20 | // These are the URLs of the OneDrive API endpoints. You would not need to change anything here if you are using OneDrive International
21 | // or E5 Subscription OneDrive for Business. You may need to change these if you are using OneDrive 世纪互联.
22 | authApi: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
23 | driveApi: 'https://graph.microsoft.com/v1.0/me/drive',
24 |
25 | // The scope we require are listed here, in most cases you would not need to change this as well.
26 | scope: 'user.read files.read.all offline_access',
27 |
28 | // The directLinkRegex is used to match the direct link of the file from the response of the API. We originally use this to prevent
29 | // unauthorised use of the proxied download feature - but that is disabled for now. So you can safely ignore this settings.
30 | directLinkRegex: 'public[.].*[.]files[.]1drv[.]com',
31 |
32 | // Cache-Control header, check Vercel documentation for more details. The default settings imply:
33 | // - max-age=0: no cache for your browser
34 | // - s-maxage=0: cache is fresh for 60 seconds on the edge, after which it becomes stale
35 | // - stale-while-revalidate: allow serving stale content while revalidating on the edge
36 | // https://vercel.com/docs/concepts/edge-network/caching
37 | cacheControlHeader: 'max-age=0, s-maxage=60, stale-while-revalidate',
38 | }
39 |
--------------------------------------------------------------------------------
/components/SwitchLang.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from 'react'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { Menu, Transition } from '@headlessui/react'
4 |
5 | import { useRouter } from 'next/router'
6 | import Link from 'next/link'
7 | import { useCookies, withCookies } from 'react-cookie'
8 |
9 | // https://headlessui.dev/react/menu#integrating-with-next-js
10 | const CustomLink = ({ href, children, as, locale, ...props }): JSX.Element => {
11 | return (
12 |
13 | {children}
14 |
15 | )
16 | }
17 |
18 | const localeText = (locale: string): string => {
19 | switch (locale) {
20 | case 'en':
21 | return '🇬🇧 English'
22 | case 'zh-CN':
23 | return '🇨🇳 简体中文'
24 | default:
25 | return '🇬🇧 English'
26 | }
27 | }
28 |
29 | const SwitchLang = () => {
30 | const { locales, pathname, query, asPath } = useRouter()
31 |
32 | const [_, setCookie] = useCookies(['NEXT_LOCALE'])
33 |
34 | return (
35 |
23 |
25 | {t('Enter Password')}
26 |
27 | 28 | {t('This route (the folder itself and the files inside) is password protected. ') + 29 | t('If you know the password, please enter it below.')} 30 |
31 | 32 |
33 | {
40 | setToken(e.target.value)
41 | }}
42 | onKeyPress={e => {
43 | if (e.key === 'Enter' || e.key === 'NumpadEnter') {
44 | setPersistedToken(token)
45 | router.reload()
46 | }
47 | }}
48 | />
49 |
58 |
59 |
36 |
70 |
71 | )
72 | }
73 |
74 | export default withCookies(SwitchLang)
75 |
--------------------------------------------------------------------------------
/utils/useLocalStorage.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useEffect, useState } from 'react'
2 |
3 | type SetValue
46 |
71 |
73 |
74 | )
75 | }
76 |
77 | export default EPUBPreview
78 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | // API response object for /api/?path=
50 |
70 |
51 |
69 |
58 | fixEpub(rendition)}
61 | loadingView={
68 |
21 |
22 |
23 |
24 |
37 |
38 |
47 |
48 | {layouts.map(layout => (
49 |
57 |
71 | ))}
72 |
73 |
74 |
75 |
76 | )
77 | }
78 |
79 | export default SwitchLayout
80 |
--------------------------------------------------------------------------------
/utils/getFileIcon.ts:
--------------------------------------------------------------------------------
1 | import type { IconPrefix, IconName } from '@fortawesome/fontawesome-common-types'
2 |
3 | const icons: { [key: string]: [IconPrefix, IconName] } = {
4 | image: ['far', 'file-image'],
5 | pdf: ['far', 'file-pdf'],
6 | word: ['far', 'file-word'],
7 | powerpoint: ['far', 'file-powerpoint'],
8 | excel: ['far', 'file-excel'],
9 | audio: ['far', 'file-audio'],
10 | video: ['far', 'file-video'],
11 | archive: ['far', 'file-archive'],
12 | code: ['far', 'file-code'],
13 | text: ['far', 'file-alt'],
14 | file: ['far', 'file'],
15 | markdown: ['fab', 'markdown'],
16 | book: ['fas', 'book'],
17 | link: ['fas', 'link'],
18 | }
19 |
20 | const extensions = {
21 | gif: icons.image,
22 | jpeg: icons.image,
23 | jpg: icons.image,
24 | png: icons.image,
25 | heic: icons.image,
26 | webp: icons.image,
27 |
28 | pdf: icons.pdf,
29 |
30 | doc: icons.word,
31 | docx: icons.word,
32 |
33 | ppt: icons.powerpoint,
34 | pptx: icons.powerpoint,
35 |
36 | xls: icons.excel,
37 | xlsx: icons.excel,
38 |
39 | aac: icons.audio,
40 | mp3: icons.audio,
41 | ogg: icons.audio,
42 | flac: icons.audio,
43 | oga: icons.audio,
44 | opus: icons.audio,
45 | m4a: icons.audio,
46 |
47 | avi: icons.video,
48 | flv: icons.video,
49 | mkv: icons.video,
50 | mp4: icons.video,
51 |
52 | '7z': icons.archive,
53 | bz2: icons.archive,
54 | xz: icons.archive,
55 | wim: icons.archive,
56 | gz: icons.archive,
57 | rar: icons.archive,
58 | tar: icons.archive,
59 | zip: icons.archive,
60 |
61 | c: icons.code,
62 | cpp: icons.code,
63 | js: icons.code,
64 | jsx: icons.code,
65 | java: icons.code,
66 | sh: icons.code,
67 | cs: icons.code,
68 | py: icons.code,
69 | css: icons.code,
70 | html: icons.code,
71 | ts: icons.code,
72 | tsx: icons.code,
73 | rs: icons.code,
74 | vue: icons.code,
75 | json: icons.code,
76 | yml: icons.code,
77 | yaml: icons.code,
78 | toml: icons.code,
79 |
80 | txt: icons.text,
81 | rtf: icons.text,
82 | vtt: icons.text,
83 | srt: icons.text,
84 | log: icons.text,
85 | diff: icons.text,
86 |
87 | md: icons.markdown,
88 |
89 | epub: icons.book,
90 | mobi: icons.book,
91 | azw3: icons.book,
92 |
93 | url: icons.link,
94 | }
95 |
96 | /**
97 | * To stop TypeScript complaining about indexing the object with a non-existent key
98 | * https://dev.to/mapleleaf/indexing-objects-in-typescript-1cgi
99 | *
100 | * @param obj Object with keys to index
101 | * @param key The index key
102 | * @returns Whether or not the key exists inside the object
103 | */
104 | export function hasKey
18 |
19 |
75 |
76 |
78 |
79 | )
80 | }
81 |
82 | export default DefaultPreview
83 |
--------------------------------------------------------------------------------
/components/previews/MarkdownPreview.tsx:
--------------------------------------------------------------------------------
1 | import { FC, CSSProperties, ReactNode } from 'react'
2 | import ReactMarkdown from 'react-markdown'
3 | import gfm from 'remark-gfm'
4 | import remarkMath from 'remark-math'
5 | import rehypeKatex from 'rehype-katex'
6 | import rehypeRaw from 'rehype-raw'
7 | import { useTranslation } from 'next-i18next'
8 | import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
9 | import { tomorrowNight } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
10 |
11 | import 'katex/dist/katex.min.css'
12 |
13 | import useFileContent from '../../utils/fetchOnMount'
14 | import FourOhFour from '../FourOhFour'
15 | import Loading from '../Loading'
16 | import DownloadButtonGroup from '../DownloadBtnGtoup'
17 | import { DownloadBtnContainer, PreviewContainer } from './Containers'
18 |
19 | const MarkdownPreview: FC<{
20 | file: any
21 | path: string
22 | standalone?: boolean
23 | }> = ({ file, path, standalone = true }) => {
24 | // The parent folder of the markdown file, which is also the relative image folder
25 | const parentPath = standalone ? path.substring(0, path.lastIndexOf('/')) : path
26 |
27 | const { response: content, error, validating } = useFileContent(`/api/raw/?path=${parentPath}/${file.name}`, path)
28 | const { t } = useTranslation()
29 |
30 | // Check if the image is relative path instead of a absolute url
31 | const isUrlAbsolute = (url: string | string[]) => url.indexOf('://') > 0 || url.indexOf('//') === 0
32 | // Custom renderer:
33 | const customRenderer = {
34 | // img: to render images in markdown with relative file paths
35 | img: ({
36 | alt,
37 | src,
38 | title,
39 | width,
40 | height,
41 | style,
42 | }: {
43 | alt?: string
44 | src?: string
45 | title?: string
46 | width?: string | number
47 | height?: string | number
48 | style?: CSSProperties
49 | }) => {
50 | return (
51 | // eslint-disable-next-line @next/next/no-img-element
52 |
20 |
74 |
21 |
24 |
25 | {file.name}
23 |
26 |
73 |
27 |
30 |
31 | {t('Last modified')}
28 | {formatModifiedDateTime(file.lastModifiedDateTime)}
29 |
32 |
35 |
36 | {t('File size')}
33 | {humanFileSize(file.size)}
34 |
37 |
40 |
41 | {t('MIME type')}
38 | {file.file?.mimeType ?? t('Unavailable')}
39 |
42 |
44 |
45 |
71 |
72 | {t('Hashes')}
43 | | 47 | Quick XOR 48 | | 49 |50 | {file.file.hashes?.quickXorHash ?? t('Unavailable')} 51 | | 52 |
| 55 | SHA1 56 | | 57 |58 | {file.file.hashes?.sha1Hash ?? t('Unavailable')} 59 | | 60 |
| 63 | SHA256 64 | | 65 |66 | {file.file.hashes?.sha256Hash ?? t('Unavailable')} 67 | | 68 |
76 | {children}
77 |
78 | )
79 | }
80 |
81 | const match = /language-(\w+)/.exec(className || '')
82 | return (
83 |
114 |
115 |
126 | {standalone && (
127 |
128 |
130 | )}
131 |
132 | )
133 | }
134 |
135 | export default MarkdownPreview
136 |
--------------------------------------------------------------------------------
/utils/oAuthHandler.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import CryptoJS from 'crypto-js'
3 |
4 | import apiConfig from '../config/api.config'
5 |
6 | // Just a disguise to obfuscate required tokens (including but not limited to client secret,
7 | // access tokens, and refresh tokens), used along with the following two functions
8 | const AES_SECRET_KEY = 'onedrive-vercel-index'
9 | export function obfuscateToken(token: string): string {
10 | // Encrypt token with AES
11 | const encrypted = CryptoJS.AES.encrypt(token, AES_SECRET_KEY)
12 | return encrypted.toString()
13 | }
14 | export function revealObfuscatedToken(obfuscated: string): string {
15 | // Decrypt SHA256 obfuscated token
16 | const decrypted = CryptoJS.AES.decrypt(obfuscated, AES_SECRET_KEY)
17 | return decrypted.toString(CryptoJS.enc.Utf8)
18 | }
19 |
20 | // Generate the Microsoft OAuth 2.0 authorization URL, used for requesting the authorisation code
21 | export function generateAuthorisationUrl(): string {
22 | const { clientId, redirectUri, authApi, scope } = apiConfig
23 | const authUrl = authApi.replace('/token', '/authorize')
24 |
25 | // Construct URL parameters for OAuth2
26 | const params = new URLSearchParams()
27 | params.append('client_id', clientId)
28 | params.append('redirect_uri', redirectUri)
29 | params.append('response_type', 'code')
30 | params.append('scope', scope)
31 | params.append('response_mode', 'query')
32 |
33 | return `${authUrl}?${params.toString()}`
34 | }
35 |
36 | // The code returned from the Microsoft OAuth 2.0 authorization URL is a request URL with hostname
37 | // http://localhost and URL parameter code. This function extracts the code from the request URL
38 | export function extractAuthCodeFromRedirected(url: string): string {
39 | // Return empty string if the url is not the defined redirect uri
40 | if (!url.startsWith(apiConfig.redirectUri)) {
41 | return ''
42 | }
43 |
44 | // New URL search parameter
45 | const params = new URLSearchParams(url.split('?')[1])
46 | return params.get('code') ?? ''
47 | }
48 |
49 | // After a successful authorisation, the code returned from the Microsoft OAuth 2.0 authorization URL
50 | // will be used to request an access token. This function requests the access token with the authorisation code
51 | // and returns the access token and refresh token on success.
52 | export async function requestTokenWithAuthCode(
53 | code: string
54 | ): Promise<
55 | | { expiryTime: string; accessToken: string; refreshToken: string }
56 | | { error: string; errorDescription: string; errorUri: string }
57 | > {
58 | const { clientId, redirectUri, authApi } = apiConfig
59 | const clientSecret = revealObfuscatedToken(apiConfig.obfuscatedClientSecret)
60 |
61 | // Construct URL parameters for OAuth2
62 | const params = new URLSearchParams()
63 | params.append('client_id', clientId)
64 | params.append('redirect_uri', redirectUri)
65 | params.append('client_secret', clientSecret)
66 | params.append('code', code)
67 | params.append('grant_type', 'authorization_code')
68 |
69 | // Request access token
70 | return axios
71 | .post(authApi, params, {
72 | headers: {
73 | 'Content-Type': 'application/x-www-form-urlencoded',
74 | },
75 | })
76 | .then(resp => {
77 | const { expires_in, access_token, refresh_token } = resp.data
78 | return { expiryTime: expires_in, accessToken: access_token, refreshToken: refresh_token }
79 | })
80 | .catch(err => {
81 | const { error, error_description, error_uri } = err.response.data
82 | return { error, errorDescription: error_description, errorUri: error_uri }
83 | })
84 | }
85 |
86 | // Verify the identity of the user with the access token and compare it with the userPrincipalName
87 | // in the Microsoft Graph API. If the userPrincipalName matches, proceed with token storing.
88 | export async function getAuthPersonInfo(accessToken: string) {
89 | const profileApi = apiConfig.driveApi.replace('/drive', '')
90 | return axios.get(profileApi, {
91 | headers: {
92 | Authorization: `Bearer ${accessToken}`,
93 | },
94 | })
95 | }
96 |
97 | export async function sendTokenToServer(accessToken: string, refreshToken: string, expiryTime: string) {
98 | return await axios.post(
99 | '/api',
100 | {
101 | obfuscatedAccessToken: obfuscateToken(accessToken),
102 | accessTokenExpiry: parseInt(expiryTime),
103 | obfuscatedRefreshToken: obfuscateToken(refreshToken),
104 | },
105 | {
106 | headers: {
107 | 'Content-Type': 'application/json',
108 | },
109 | }
110 | )
111 | }
112 |
--------------------------------------------------------------------------------
/components/DownloadBtnGtoup.tsx:
--------------------------------------------------------------------------------
1 | import { MouseEventHandler, useState } from 'react'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { IconProp } from '@fortawesome/fontawesome-svg-core'
4 | import toast from 'react-hot-toast'
5 | import { useClipboard } from 'use-clipboard-copy'
6 | import { useTranslation } from 'next-i18next'
7 |
8 | import Image from 'next/image'
9 | import { useRouter } from 'next/router'
10 |
11 | import { getBaseUrl } from '../utils/getBaseUrl'
12 | import { getStoredToken } from '../utils/protectedRouteHandler'
13 | import CustomEmbedLinkMenu from './CustomEmbedLinkMenu'
14 |
15 | const btnStyleMap = (btnColor?: string) => {
16 | const colorMap = {
17 | gray: 'hover:text-gray-600 dark:hover:text-white focus:ring-gray-200 focus:text-gray-600 dark:focus:text-white border-gray-300 dark:border-gray-500 dark:focus:ring-gray-500',
18 | blue: 'hover:text-blue-600 focus:ring-blue-200 focus:text-blue-600 border-blue-300 dark:border-blue-700 dark:focus:ring-blue-500',
19 | teal: 'hover:text-teal-600 focus:ring-teal-200 focus:text-teal-600 border-teal-300 dark:border-teal-700 dark:focus:ring-teal-500',
20 | red: 'hover:text-red-600 focus:ring-red-200 focus:text-red-600 border-red-300 dark:border-red-700 dark:focus:ring-red-500',
21 | green:
22 | 'hover:text-green-600 focus:ring-green-200 focus:text-green-600 border-green-300 dark:border-green-700 dark:focus:ring-green-500',
23 | pink: 'hover:text-pink-600 focus:ring-pink-200 focus:text-pink-600 border-pink-300 dark:border-pink-700 dark:focus:ring-pink-500',
24 | yellow:
25 | 'hover:text-yellow-400 focus:ring-yellow-100 focus:text-yellow-400 border-yellow-300 dark:border-yellow-400 dark:focus:ring-yellow-300',
26 | }
27 |
28 | if (btnColor) {
29 | return colorMap[btnColor]
30 | }
31 |
32 | return colorMap.gray
33 | }
34 |
35 | export const DownloadButton = ({
36 | onClickCallback,
37 | btnColor,
38 | btnText,
39 | btnIcon,
40 | btnImage,
41 | btnTitle,
42 | }: {
43 | onClickCallback: MouseEventHandler
116 | {/* Using rehypeRaw to render HTML inside Markdown is potentially dangerous, use under safe environments. (#18) */}
117 |
122 | {content}
123 |
124 |
125 |
78 | window.open(`/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`)}
80 | btnColor="blue"
81 | btnText={t('Download')}
82 | btnIcon="file-download"
83 | btnTitle={t('Download the file directly through OneDrive')}
84 | />
85 | {/* window.open(`/api/proxy?url=${encodeURIComponent(downloadUrl)}`)}
87 | btnColor="teal"
88 | btnText={t('Proxy download')}
89 | btnIcon="download"
90 | btnTitle={t('Download the file with the stream proxied through Vercel Serverless')}
91 | /> */}
92 | {
94 | clipboard.copy(`${getBaseUrl()}/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`)
95 | toast.success(t('Copied direct link to clipboard.'))
96 | }}
97 | btnColor="pink"
98 | btnText={t('Copy direct link')}
99 | btnIcon="copy"
100 | btnTitle={t('Copy the permalink to the file to the clipboard')}
101 | />
102 | setMenuOpen(true)}
104 | btnColor="teal"
105 | btnText={t('Customise link')}
106 | btnIcon="pen"
107 | />
108 |
109 |
110 | )
111 | }
112 |
113 | export default DownloadButtonGroup
114 |
--------------------------------------------------------------------------------
/components/previews/AudioPreview.tsx:
--------------------------------------------------------------------------------
1 | import type { OdFileObject } from '../../types'
2 | import { FC, useEffect, useRef, useState } from 'react'
3 |
4 | import ReactAudioPlayer from 'react-audio-player'
5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
6 | import { useTranslation } from 'next-i18next'
7 | import { useRouter } from 'next/router'
8 |
9 | import DownloadButtonGroup from '../DownloadBtnGtoup'
10 | import { DownloadBtnContainer, PreviewContainer } from './Containers'
11 | import { LoadingIcon } from '../Loading'
12 | import { formatModifiedDateTime } from '../../utils/fileDetails'
13 | import { getStoredToken } from '../../utils/protectedRouteHandler'
14 |
15 | enum PlayerState {
16 | Loading,
17 | Ready,
18 | Playing,
19 | Paused,
20 | }
21 |
22 | const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
23 | const { t } = useTranslation()
24 | const { asPath } = useRouter()
25 | const hashedToken = getStoredToken(asPath)
26 |
27 | const rapRef = useRef
55 |
104 |
56 |
86 |
87 |
63 |
65 |
66 | {!brokenThumbnail ? (
67 |
68 | {/* eslint-disable-next-line @next/next/no-img-element */}
69 | 
setBrokenThumbnail(true)}
76 | />
77 |
78 | ) : (
79 |
88 |
103 |
89 |
94 |
95 | {file.name}
90 |
91 | {t('Last modified:') + ' ' + formatModifiedDateTime(file.lastModifiedDateTime)}
92 |
93 | {title}
16 |
17 |
25 |
26 | )
27 | }
28 |
29 | export default function CustomEmbedLinkMenu({
30 | path,
31 | menuOpen,
32 | setMenuOpen,
33 | }: {
34 | path: string
35 | menuOpen: boolean
36 | setMenuOpen: Dispatch{value}
18 |
24 |
129 | window.open(videoUrl)}
131 | btnColor="blue"
132 | btnText={t('Download')}
133 | btnIcon="file-download"
134 | />
135 | {/*
137 | window.open(`/api/proxy?url=${encodeURIComponent(...)}`)
138 | }
139 | btnColor="teal"
140 | btnText={t('Proxy download')}
141 | btnIcon="download"
142 | /> */}
143 | {
145 | clipboard.copy(`${getBaseUrl()}/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`)
146 | toast.success(t('Copied direct link to clipboard.'))
147 | }}
148 | btnColor="pink"
149 | btnText={t('Copy direct link')}
150 | btnIcon="copy"
151 | />
152 | setMenuOpen(true)}
154 | btnColor="teal"
155 | btnText={t('Customise link')}
156 | btnIcon="pen"
157 | />
158 |
159 | window.open(`iina://weblink?url=${getBaseUrl()}${videoUrl}`)}
161 | btnText="IINA"
162 | btnImage="/players/iina.png"
163 | />
164 | window.open(`vlc://${getBaseUrl()}${videoUrl}`)}
166 | btnText="VLC"
167 | btnImage="/players/vlc.png"
168 | />
169 | window.open(`potplayer://${getBaseUrl()}/${videoUrl}`)}
171 | btnText="PotPlayer"
172 | btnImage="/players/potplayer.png"
173 | />
174 |
175 |
28 |
29 | {t('OAuth Step 2 - {{title}}', { title: siteConfig.title })}
30 |
31 |
32 |
33 |
138 |
139 |
140 |
141 | )
142 | }
143 |
144 | export async function getServerSideProps({ locale }) {
145 | return {
146 | props: {
147 | ...(await serverSideTranslations(locale, ['common'])),
148 | },
149 | }
150 | }
151 |
--------------------------------------------------------------------------------
/public/locales/zh-CN/common.json:
--------------------------------------------------------------------------------
1 | {
2 | "- showing {{count}} page(s) ——other": "已显示 {{count}} 页",
3 | "{{count}} item(s)——other": "{{count}} 个项目",
4 | "<0> If you are not the owner of this website, stop now, as continuing with this process may expose your personal files in OneDrive.": "<0> 如果你不是这个网站的所有者，请立即停止操作，因为接下来的操作可能会暴露你的 OneDrive 私人文件。",
5 | "<0> If you have not specified a REDIS_URL inside your Vercel env variable, go initialise one at <3>Upstash. Docs: <6>Vercel Integration - Upstash.": "<0> 如果你还没有在 Vercel 中设置环境变量 REDIS_URL，你可以从 <3>Upstash 处获取一个来使用。文档：<6>Vercel 集成 - Upstash。",
6 | "<0> If you see anything missing or incorrect, you need to reconfigure <3>/config/api.config.js and redeploy this instance.": "<0> 如果你看到有遗漏或错误的项目，你需要重新编辑 <3>/config/api.config.js 并重新部署这个实例。",
7 | "✅ You can now proceed onto the next step: requesting your access token and refresh token.": "✅ 你现在可以进行下一步了：获取你的 access token 和 refresh token。",
8 | "❌ No valid code extracted.": "❌ 无法提取授权码。",
9 | "Acquired access_token: ": "获取 access_token",
10 | "Acquired refresh_token: ": "获取 refresh_token",
11 | "Actions": "操作",
12 | "Authorisation is required as no valid <2>access_token or <5>refresh_token is present on this deployed instance. Check the following configurations before proceeding with authorising onedrive-vercel-index with your own Microsoft account.": "本项目还没有设置有效的 <2>access_token 和 <5>refresh_token，需要进行授权。在继续对 onedrive-vercel-index 授权你的 Microsoft 帐号前，请检查一下下方的配置信息。",
13 | "Cancel": "取消",
14 | "Cannot preview {{path}}": "无法预览 {{path}}",
15 | "Change the raw file direct link to a URL ending with the extension of the file.": "将文件直链接更改为以文件扩展名结尾的 URL。",
16 | "Check out <2>Microsoft's official explanation on the error message.": "请查阅 <2>Microsoft 官方解释 以获取详细的错误信息。",
17 | "Clear all": "清除所有密钥",
18 | "Clear all tokens?": "清除所有密钥？",
19 | "Cleared all tokens": "已清除所有密钥",
20 | "clearing them means that you will need to re-enter the passwords again.": "清除它们意味着下次访问时你需要重新输入密钥。",
21 | "Copied direct link to clipboard.": "已复制直链到剪贴板。",
22 | "Copied folder permalink.": "已复制文件夹永久链接。",
23 | "Copied raw file permalink.": "已复制文件永久链接。",
24 | "Copy direct link": "复制文件直链",
25 | "Copy folder permalink": "复制文件夹永久链接",
26 | "Copy raw file permalink": "复制文件永久链接",
27 | "Copy the permalink to the file to the clipboard": "复制文件永久链接到剪贴板",
28 | "Customise direct link": "自定义文件直链",
29 | "Customise link": "自定义直链",
30 | "Customised": "自定义链接",
31 | "Customised and encoded": "URL 编码的自定义链接",
32 | "Default": "默认",
33 | "Do not pretend to be the site owner": "你不是网站所有者",
34 | "Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes and updates after your site goes live.": "别担心，存储它们之后，onedrive-vercel-index 会在帮助你定时更新 token",
35 | "Download": "下载",
36 | "Download file": "下载此文件",
37 | "Download folder": "下载此文件夹",
38 | "Download selected files": "下载选定文件",
39 | "Download the file directly through OneDrive": "直接从 OneDrive 下载文件",
40 | "Downloading {{progress}}%": "已下载 {{progress}}%",
41 | "Downloading folder, refresh page to cancel": "下载文件夹中，刷新页面以取消",
42 | "Downloading selected files, refresh page to cancel": "下载选定文件中，刷新页面以取消",
43 | "Downloading selected files...": "下载选定文件中…",
44 | "Email": "电子邮件",
45 | "Enter Password": "输入密码",
46 | "Error storing the token": "存储 token 时出错",
47 | "Error validating identify, restart": "校验身份出错，需要重新开始",
48 | "Error: {{message}}": "错误：{{message}}",
49 | "Failed to download folder {{path}}: {{status}} {{message}} Skipped it to continue.": "下载文件夹 {{path}} 失败：{{status}} {{message}} 已忽略此错误并继续下载。",
50 | "Failed to download folder.": "下载文件夹失败。",
51 | "Failed to download selected files.": "下载选定文件失败。",
52 | "File is empty.": "文件为空。",
53 | "File size": "文件大小",
54 | "Filename": "文件名",
55 | "Final step, click the button below to store these tokens persistently before they expire after {{minutes}} minutes {{seconds}} seconds. ": "最后一步，在这些 tokens 于 {{minutes}} 分钟 {{seconds}} 秒后失效前，点击下方按钮以永久存储这些 tokens。",
56 | "Finished downloading folder.": "下载文件夹成功。",
57 | "Finished downloading selected files.": "下载选定文件成功。",
58 | "Get tokens": "获取 tokens",
59 | "Grid": "图格",
60 | "Hashes": "哈希值",
61 | "Home": "首页",
62 | "If you go back home and still see the welcome page telling you to re-authenticate, ": "如果你回到首页却仍然发现欢迎界面在提示你重新认证，",
63 | "If you know the password, please enter it below.": "如果你知晓密码，请在下面输入。",
64 | "Last modified": "最后修改时间",
65 | "Last Modified": "最后修改时间",
66 | "Last modified:": "最后修改时间：",
67 | "List": "列表",
68 | "Load more": "加载更多",
69 | "Loading ...": "加载中…",
70 | "Loading EPUB ...": "加载 EPUB 中…",
71 | "Loading file content...": "加载文件内容中…",
72 | "Loading FLV extension...": "加载 FLV 扩展中…",
73 | "Logout": "注销",
74 | "MIME type": "MIME 类型",
75 | "Name": "文件名",
76 | "No more files": "加载完毕",
77 | "Nothing here.": "无内容。",
78 | "OAuth Step 1 - {{title}}": "OAuth 第 1 步 - {{title}}",
79 | "OAuth Step 2 - {{title}}": "OAuth 第 2 步 - {{title}}",
80 | "OAuth Step 3 - {{title}}": "OAuth 第 3 步 - {{title}}",
81 | "of {{count}} file(s) -——loaded——other": "共 {{count}} 个文件",
82 | "of {{count}} file(s) -——loading——other": "共…个文件",
83 | "Oops, that's a <1>four-oh-four.": "Oops，这里是 <1>404 页面。",
84 | "Open URL": "打开 URL",
85 | "Open URL{{url}}": "打开 URL{{url}}",
86 | "Press <2>F12 and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions.": "请按下 <2>F12 来打开开发者工具窗口以获取详细信息，或是到 <6>onedrive-vercel-index 社区讨论 处寻求帮助。",
87 | "Proceed to OAuth": "继续进行 OAuth",
88 | "Requesting tokens": "正在获取 token",
89 | "Restart": "重新开始",
90 | "revisit home and do a hard refresh.": "重新访问首页并刷新浏览器",
91 | "Search ...": "搜索…",
92 | "Select all files": "选择所有文件",
93 | "Select file": "选择此文件",
94 | "Select files": "选择以下文件",
95 | "Size": "文件大小",
96 | "Step 1/3: Preparations": "步骤 1/3：准备",
97 | "Step 2/3: Get authorisation code": "步骤 2/3：获取授权码",
98 | "Step 3/3: Get access and refresh tokens": "步骤 3/3：获取 access token 和 refresh token",
99 | "Store tokens": "储存 tokens",
100 | "Stored! Going home...": "已存储！正在返回首页…",
101 | "Storing tokens": "正在存储 token…",
102 | "Success! The API returned what we needed.": "成功！需要的 token 已被返回。",
103 | "The authorisation code extracted is:": "提取出的授权码为：",
104 | "The OAuth link for getting the authorisation code has been created. Click on the link above to get the <2>authorisation code. Your browser willopen 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 <6>the entire redirected URL down below.": "创建出的这个 OAuth 链接是用来获取授权码的。点击上方链接以获取所需的 <2>授权码。你的浏览器将在新的标签页打开 Microsoft 帐号登录页面。在登录并验证你的 Microsoft 帐号之后，你将被重定向到一个域名为 localhost 的空白页面。请将<6>完整的重定向后的 URL 整体复制粘贴到下方。",
105 | "These tokens are used to authenticate yourself into password protected folders, ": "这些密钥是用来验证你的身份以访问密钥保护下的文件夹的，",
106 | "These tokens may take a few seconds to populate after you click the button below. ": "当你点击下方按钮之后，这些 tokens 可能需要几秒钟来生成出现。",
107 | "This route (the folder itself and the files inside) is password protected. ": "此路由（此文件夹和其中的文件）是受密钥保护的。",
108 | "Unavailable": "无",
109 | "URL encoded": "URL 编码的链接",
110 | "Waiting for code...": "等待授权码…",
111 | "Weibo": "微博",
112 | "Welcome to your new onedrive-vercel-index 🎉": "欢迎来到你崭新的 onedrive-vercel-index 🎉",
113 | "What is this?": "这是什么？",
114 | "Where is the auth code? Did you follow step 2 you silly donut?": "授权码呢？你遵守了第 2 步吗？你这个傻瓜甜甜圈！o(￣ヘ￣o＃)",
115 | "Whoops, looks like we got a problem: {{error}}.": "Whoops，看来我们遇到了一个问题：{{error}}"
116 | }
117 |
--------------------------------------------------------------------------------
/components/FolderListLayout.tsx:
--------------------------------------------------------------------------------
1 | import type { OdFolderChildren } from '../types'
2 |
3 | import Link from 'next/link'
4 | import { FC } from 'react'
5 | import { useClipboard } from 'use-clipboard-copy'
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
7 | import { useTranslation } from 'next-i18next'
8 |
9 | import { getBaseUrl } from '../utils/getBaseUrl'
10 | import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
11 |
12 | import { Downloading, Checkbox, ChildIcon, ChildName } from './FileListing'
13 | import { getStoredToken } from '../utils/protectedRouteHandler'
14 |
15 | const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c }) => {
16 | return (
17 |
36 |
137 |
37 |
136 |
38 |
46 | 47 | {t('Welcome to your new onedrive-vercel-index 🎉')} 48 |
49 | 50 |{t('Step 2/3: Get authorisation code')}
51 | 52 |
53 |
{
62 | window.open(oAuthUrl)
63 | }}
64 | >
65 |
72 |
73 |
66 |
68 |
69 | {oAuthUrl}
70 |
71 |
74 |
85 |
87 |
88 | {
99 | setOAuthRedirectedUrl(e.target.value)
100 | setAuthCode(extractAuthCodeFromRedirected(e.target.value))
101 | }}
102 | />
103 |
104 | {t('The authorisation code extracted is:')}
105 |106 | {authCode ?? {t('Waiting for code...')}} 107 |
108 | 109 |110 | {authCode 111 | ? t('✅ You can now proceed onto the next step: requesting your access token and refresh token.') 112 | : t('❌ No valid code extracted.')} 113 |
114 | 115 |
116 |
134 |
135 |
18 |
31 | )
32 | }
33 |
34 | const FolderListLayout = ({
35 | path,
36 | folderChildren,
37 | selected,
38 | toggleItemSelected,
39 | totalSelected,
40 | toggleTotalSelected,
41 | totalGenerating,
42 | handleSelectedDownload,
43 | folderGenerating,
44 | handleFolderDownload,
45 | toast,
46 | }) => {
47 | const clipboard = useClipboard()
48 | const hashedToken = getStoredToken(path)
49 |
50 | const { t } = useTranslation()
51 |
52 | // Get item path from item name
53 | const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
54 |
55 | return (
56 |
19 |
24 |
20 |
22 |
25 | {formatModifiedDateTime(c.lastModifiedDateTime)}
26 |
27 |
28 | {humanFileSize(c.size)}
29 |
30 |
57 |
167 | )
168 | }
169 |
170 | export default FolderListLayout
171 |
--------------------------------------------------------------------------------
/pages/onedrive-vercel-index-oauth/step-1.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import Image from 'next/image'
3 | import { useRouter } from 'next/router'
4 | import { useTranslation, Trans } from 'next-i18next'
5 | import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
6 |
7 | import siteConfig from '../../config/site.config'
8 | import apiConfig from '../../config/api.config'
9 | import Navbar from '../../components/Navbar'
10 | import Footer from '../../components/Footer'
11 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
12 |
13 | export default function OAuthStep1() {
14 | const router = useRouter()
15 |
16 | const { t } = useTranslation()
17 |
18 | return (
19 |
58 |
93 |
94 | {folderChildren.map((c: OdFolderChildren) => (
95 |
59 | {t('Name')}
60 |
61 |
62 | {t('Last Modified')}
63 |
64 |
65 | {t('Size')}
66 |
67 |
68 | {t('Actions')}
69 |
70 |
71 |
92 |
72 |
91 |
99 |
100 |
101 |
165 | ))}
166 |
107 | {
111 | clipboard.copy(`${getBaseUrl()}${`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`}`)
112 | toast(t('Copied folder permalink.'), { icon: '👌' })
113 | }}
114 | >
115 |
132 | ) : (
133 |
134 | {
138 | clipboard.copy(
139 | `${getBaseUrl()}/api/raw/?path=${getItemPath(c.name)}${hashedToken ? `&odpt=${hashedToken}` : ''}`
140 | )
141 | toast.success(t('Copied raw file permalink.'))
142 | }}
143 | >
144 |
154 | )}
155 |
156 | {!c.folder && !(c.name === '.password') && (
157 | toggleItemSelected(c.id)}
160 | title={t('Select file')}
161 | />
162 | )}
163 |
164 |
20 |
21 | {t('OAuth Step 1 - {{title}}', { title: siteConfig.title })}
22 |
23 |
24 |
25 |
144 |
145 |
146 |
147 | )
148 | }
149 |
150 | export async function getServerSideProps({ locale }) {
151 | return {
152 | props: {
153 | ...(await serverSideTranslations(locale, ['common'])),
154 | },
155 | }
156 | }
157 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
28 |
143 |
29 |
142 |
30 |
32 | 33 | {t('Welcome to your new onedrive-vercel-index 🎉')} 34 |
35 | 36 |{t('Step 1/3: Preparations')}
37 | 38 |
39 |
59 | access_token or{' '}
62 | refresh_token{' '}
63 | is present on this deployed instance. Check the following configurations before proceeding with
64 | authorising onedrive-vercel-index with your own Microsoft account.
65 |
69 |
70 |
71 |
121 |
122 |
123 | | 73 | CLIENT_ID 74 | | 75 |
76 | {apiConfig.clientId}
77 | |
78 |
| 81 | CLIENT_SECRET* 82 | | 83 |
84 | {apiConfig.obfuscatedClientSecret}
85 | |
86 |
| 89 | REDIRECT_URI 90 | | 91 |
92 | {apiConfig.redirectUri}
93 | |
94 |
| 97 | Auth API URL 98 | | 99 |
100 | {apiConfig.authApi}
101 | |
102 |
| 105 | Drive API URL 106 | | 107 |
108 | {apiConfig.driveApi}
109 | |
110 |
| 113 | API Scope 114 | | 115 |
116 | {apiConfig.scope}
117 | |
118 |
124 | /config/api.config.js and redeploy this instance.
128 |
132 |
140 |
141 |
2 | 
3 | 
8 | 
9 | 
10 | 
11 | 
12 |
13 |
14 | ## TL;DR
15 |
16 | Showcase, share, preview, and download files inside *your* OneDrive with onedrive-vercel-index -
17 |
18 | - Completely free to host 💸
19 | - Super fast ⚡ and responsive 💦
20 | - Takes less than 15 minutes to setup ⏱️
21 | - Highly customisable ⚒️
22 |
23 | 🍌 More importantly, we are pretty (●'◡'●)
24 |
25 | ## Quick start
26 |
27 | 🚀 Quick start: [Getting started](https://ovi.swo.moe/docs/getting-started).
28 |
29 | ## Discussion
30 |
31 | Please go to our [discussion forum](https://github.com/spencerwooo/onedrive-vercel-index/discussions) for general questions and FAQs, **issues are for bug reports and bug reports only.** Feature requests may or may not be ignored, as [I (@spencerwooo)](https://spencerwoo.com) am the only one maintaining the project, so **I only prioritise features that I use.**
32 |
33 | *If you happen to like this project, please give it a star!* :3
34 |
35 | *If you really, really like this project, please send money! -> [Sponsors 🤑 and donations 💰](https://ovi.swo.moe/sponsor)*
36 |
37 | ## Demo
38 |
39 | Live demo at [Spencer's OneDrive](https://drive.swo.moe).
40 |
41 | 
42 |
43 | ## Features
44 |
45 |
3 | onedrive-vercel-index
4 |Get started · What's new? · Sponsoring
5 |OneDrive public directory listing, powered by Vercel and Next.js
6 | 7 |
8 |
9 |
10 |
11 |
12 | | 49 | 👀 File preview 53 | | 54 |55 | 💠 List / Grid layouts 59 | | 60 |61 | 🎥 Video and audio 65 | | 66 |
| PDF, EPUB, markdown, code, plain text | 69 |For previewing images and documents with thumbnails | 70 |mp4, mp3, ..., play online or with IINA, PotPlayer ... with subtitles! | 71 |
| 74 | 📄 Office preview 78 | | 79 |📝 README.md preview | 80 |📑 Pagination | 81 |
| docx, pptx, xlsx, ... | 84 |Also renders code blocks, images with relative links, ... | 85 |For folders with 200 or more items | 86 |
| 🔒 Protected folders | 89 |⏬ Multi-file download | 90 |🔎 Native Search | 91 |
| Password protected routes and files. Details here | 94 |95 | Compress and download multiple files or folders. 96 | Details here 97 | | 98 |99 | Searching through your shared OneDrive files (with some caveats 🥺). 100 | Details here 101 | | 102 |
25 |
54 | )
55 | }
56 |
57 | const FolderGridLayout = ({
58 | path,
59 | folderChildren,
60 | selected,
61 | toggleItemSelected,
62 | totalSelected,
63 | toggleTotalSelected,
64 | totalGenerating,
65 | handleSelectedDownload,
66 | folderGenerating,
67 | handleFolderDownload,
68 | toast,
69 | }) => {
70 | const clipboard = useClipboard()
71 | const hashedToken = getStoredToken(path)
72 |
73 | const { t } = useTranslation()
74 |
75 | // Get item path from item name
76 | const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
77 |
78 | return (
79 |
26 | {thumbnailUrl && !brokenThumbnail ? (
27 | // eslint-disable-next-line @next/next/no-img-element
28 | 
setBrokenThumbnail(true)}
33 | />
34 | ) : (
35 |
43 |
44 |
36 |
41 | )}
42 |
45 |
46 |
50 |
51 | {formatModifiedDateTime(c.lastModifiedDateTime)}
52 |
53 |
80 |
187 | )
188 | }
189 |
190 | export default FolderGridLayout
191 |
--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
2 | import { IconName } from '@fortawesome/fontawesome-svg-core'
3 | import { Dialog, Transition } from '@headlessui/react'
4 | import toast, { Toaster } from 'react-hot-toast'
5 | import { useHotkeys } from 'react-hotkeys-hook'
6 |
7 | import Link from 'next/link'
8 | import Image from 'next/image'
9 | import { useRouter } from 'next/router'
10 | import { Fragment, useEffect, useState } from 'react'
11 | import { useTranslation } from 'next-i18next'
12 |
13 | import siteConfig from '../config/site.config'
14 | import SearchModal from './SearchModal'
15 | import SwitchLang from './SwitchLang'
16 | import useDeviceOS from '../utils/useDeviceOS'
17 |
18 | const Navbar = () => {
19 | const router = useRouter()
20 | const os = useDeviceOS()
21 |
22 | const [tokenPresent, setTokenPresent] = useState(false)
23 | const [isOpen, setIsOpen] = useState(false)
24 |
25 | const [searchOpen, setSearchOpen] = useState(false)
26 | const openSearchBox = () => setSearchOpen(true)
27 |
28 | useHotkeys(`${os === 'mac' ? 'cmd' : 'ctrl'}+k`, e => {
29 | openSearchBox()
30 | e.preventDefault()
31 | })
32 |
33 | useEffect(() => {
34 | const storedToken = () => {
35 | for (const r of siteConfig.protectedRoutes) {
36 | if (localStorage.hasOwnProperty(r)) {
37 | return true
38 | }
39 | }
40 | return false
41 | }
42 | setTokenPresent(storedToken())
43 | }, [])
44 |
45 | const { t } = useTranslation()
46 |
47 | const clearTokens = () => {
48 | setIsOpen(false)
49 |
50 | siteConfig.protectedRoutes.forEach(r => {
51 | localStorage.removeItem(r)
52 | })
53 |
54 | toast.success(t('Cleared all tokens'))
55 | setTimeout(() => {
56 | router.reload()
57 | }, 1000)
58 | }
59 |
60 | return (
61 |
81 |
103 |
104 | {t('{{count}} item(s)', { count: folderChildren.length })}
82 |
83 |
102 |
105 | {folderChildren.map((c: OdFolderChildren) => (
106 |
186 |
110 |
184 | ))}
185 |
111 | {c.folder ? (
112 |
163 |
164 |
113 | {
117 | clipboard.copy(`${getBaseUrl()}${getItemPath(c.name)}`)
118 | toast(t('Copied folder permalink.'), { icon: '👌' })
119 | }}
120 | >
121 |
135 | ) : (
136 |
137 | {
141 | clipboard.copy(
142 | `${getBaseUrl()}/api/raw/?path=${getItemPath(c.name)}${
143 | hashedToken ? `&odpt=${hashedToken}` : ''
144 | }`
145 | )
146 | toast.success(t('Copied raw file permalink.'))
147 | }}
148 | >
149 |
161 | )}
162 |
169 | {!c.folder && !(c.name === '.password') && (
170 | toggleItemSelected(c.id)}
173 | title={t('Select file')}
174 | />
175 | )}
176 |
177 |
178 |
179 |
180 |
62 |
134 |
200 |
201 |
202 | )
203 | }
204 |
205 | export default Navbar
206 |
--------------------------------------------------------------------------------
/components/MultiFileDownloader.tsx:
--------------------------------------------------------------------------------
1 | import { NextRouter } from 'next/router'
2 | import toast from 'react-hot-toast'
3 | import JSZip from 'jszip'
4 | import { useTranslation } from 'next-i18next'
5 |
6 | import { fetcher } from '../utils/fetchWithSWR'
7 | import { getStoredToken } from '../utils/protectedRouteHandler'
8 |
9 | /**
10 | * A loading toast component with file download progress support
11 | * @param props
12 | * @param props.router Next router instance, used for reloading the page
13 | * @param props.progress Current downloading and compression progress (returned by jszip metadata)
14 | */
15 | export function DownloadingToast({ router, progress }: { router: NextRouter; progress?: string }) {
16 | const { t } = useTranslation()
17 |
18 | return (
19 |
67 |
68 |
69 |
132 |
133 |
75 |
91 |
92 |
131 |
20 |
36 | )
37 | }
38 |
39 | // Blob download helper
40 | export function downloadBlob({ blob, name }: { blob: Blob; name: string }) {
41 | // Prepare for download
42 | const el = document.createElement('a')
43 | el.style.display = 'none'
44 | document.body.appendChild(el)
45 |
46 | // Download zip file
47 | const bUrl = window.URL.createObjectURL(blob)
48 | el.href = bUrl
49 | el.download = name
50 | el.click()
51 | window.URL.revokeObjectURL(bUrl)
52 | el.remove()
53 | }
54 |
55 | /**
56 | * Download multiple files after compressing them into a zip
57 | * @param toastId Toast ID to be used for toast notification
58 | * @param files Files to be downloaded
59 | * @param folder Optional folder name to hold files, otherwise flatten files in the zip
60 | */
61 | export async function downloadMultipleFiles({
62 | toastId,
63 | router,
64 | files,
65 | folder,
66 | }: {
67 | toastId: string
68 | router: NextRouter
69 | files: { name: string; url: string }[]
70 | folder?: string
71 | }): Promise
21 | {progress ? t('Downloading {{progress}}%', { progress }) : t('Downloading selected files...')}
22 |
23 |
29 |
35 |
24 |
28 |
25 |
26 |
27 |
99 |
108 |
109 |
110 | )
111 | }
112 |
113 | function SearchResultItemLoadRemote({ result }: { result: OdSearchResult[number] }) {
114 | const { data, error }: SWRResponse{driveItem.name}
100 |
105 | {itemDescription}
106 |
107 |
34 | {t('Store tokens')}
36 | )
37 | const [buttonError, setButtonError] = useState(false)
38 |
39 | const sendAuthTokensToServer = async () => {
40 | setButtonError(false)
41 | setButtonContent(
42 |
43 | {t('Storing tokens')}
45 | )
46 |
47 | // verify identity of the authenticated user with the Microsoft Graph API
48 | const { data, status } = await getAuthPersonInfo(accessToken)
49 | if (status !== 200) {
50 | setButtonError(true)
51 | setButtonContent(
52 |
53 | {t('Error validating identify, restart')}
55 | )
56 | return
57 | }
58 | if (data.userPrincipalName !== siteConfig.userPrincipalName) {
59 | setButtonError(true)
60 | setButtonContent(
61 |
62 | {t('Do not pretend to be the site owner')}
64 | )
65 | return
66 | }
67 |
68 | await sendTokenToServer(accessToken, refreshToken, expiryTime)
69 | .then(() => {
70 | setButtonError(false)
71 | setButtonContent(
72 |
73 | {t('Stored! Going home...')}
75 | )
76 | setTimeout(() => {
77 | router.push('/')
78 | }, 2000)
79 | })
80 | .catch(_ => {
81 | setButtonError(true)
82 | setButtonContent(
83 |
84 | {t('Error storing the token')}
86 | )
87 | })
88 | }
89 |
90 | return (
91 |
92 |
93 | {t('OAuth Step 3 - {{title}}', { title: siteConfig.title })}
94 |
95 |
96 |
97 |
220 |
221 |
222 |
223 | )
224 | }
225 |
226 | export async function getServerSideProps({ query, locale }) {
227 | const { authCode } = query
228 |
229 | // Return if no auth code is present
230 | if (!authCode) {
231 | return {
232 | props: {
233 | error: 'No auth code present',
234 | description: 'Where is the auth code? Did you follow step 2 you silly donut?',
235 | ...(await serverSideTranslations(locale, ['common'])),
236 | },
237 | }
238 | }
239 |
240 | const response = await requestTokenWithAuthCode(authCode)
241 |
242 | // If error response, return invalid
243 | if ('error' in response) {
244 | return {
245 | props: {
246 | error: response.error,
247 | description: response.errorDescription,
248 | errorUri: response.errorUri,
249 | ...(await serverSideTranslations(locale, ['common'])),
250 | },
251 | }
252 | }
253 |
254 | const { expiryTime, accessToken, refreshToken } = response
255 |
256 | return {
257 | props: {
258 | error: null,
259 | expiryTime,
260 | accessToken,
261 | refreshToken,
262 | ...(await serverSideTranslations(locale, ['common'])),
263 | },
264 | }
265 | }
266 |
--------------------------------------------------------------------------------
100 |
219 |
101 |
218 |
102 |
110 | 111 | {t('Welcome to your new onedrive-vercel-index 🎉')} 112 |
113 | 114 |{t('Step 3/3: Get access and refresh tokens')}
115 | {error ? ( 116 |
117 |
160 | ) : (
161 |
118 |
127 | { 128 | // t('Where is the auth code? Did you follow step 2 you silly donut?') 129 | t(description) 130 | } 131 |
132 | {errorUri && ( 133 |
134 |
150 |
158 |
159 |
162 |
216 | )}
217 | {t('Success! The API returned what we needed.')}
163 |-
164 | {accessToken && (
165 |
-
166 |
{' '} 167 | 168 | {t('Acquired access_token: ')} 169 | {`${accessToken.substring(0, 60)}...`}170 | 171 |
172 | )}
173 | {refreshToken && (
174 | -
175 |
{' '} 176 | 177 | {t('Acquired refresh_token: ')} 178 | {`${refreshToken.substring(0, 60)}...`}179 | 180 |
181 | )}
182 |
185 |
191 | {t( 192 | 'Final step, click the button below to store these tokens persistently before they expire after {{minutes}} minutes {{seconds}} seconds. ', 193 | { 194 | minutes: Math.floor(expiryTimeLeft / 60), 195 | seconds: expiryTimeLeft - Math.floor(expiryTimeLeft / 60) * 60, 196 | } 197 | ) + 198 | t( 199 | "Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes and updates after your site goes live." 200 | )} 201 |
202 | 203 |
204 |
214 |
215 |