+
Retrieve your file
+
+ {Array(config.retrieveCodeSlug.numChars)
+ .fill('')
+ .map((_, index) => (
+ handleInputChange(e, index)}
+ onKeyDown={(e) => handleKeyDown(e, index)}
+ onPaste={handlePaste}
+ ref={(el) => {
+ if (el) {
+ inputsRef.current[index] = el
+ }
+ }}
+ />
+ ))}
+
+
+ Enter the code to download file.
+
+
+ )
+}
diff --git a/src/components/RetrieveCodeBox.tsx b/src/components/RetrieveCodeBox.tsx
new file mode 100644
index 0000000..2bcdec8
--- /dev/null
+++ b/src/components/RetrieveCodeBox.tsx
@@ -0,0 +1,33 @@
+import React, { JSX } from 'react'
+import { CopyableIcon } from './CopyableIcon'
+import config from '../config'
+
+export function RetrieveCodeBox({
+ retrieveCode,
+}: {
+ retrieveCode: string
+}): JSX.Element {
+ return (
+
+
+
File Retrieve Code
+
+
+
+ {Array(config.retrieveCodeSlug.numChars)
+ .fill('')
+ .map((_, index) => (
+
+ {retrieveCode[index]}
+
+ ))}
+
+
+ Use the above code to retrieve the file.
+
+
+ )
+}
diff --git a/src/components/Uploader.tsx b/src/components/Uploader.tsx
index 65ccdb0..76af31a 100644
--- a/src/components/Uploader.tsx
+++ b/src/components/Uploader.tsx
@@ -12,6 +12,8 @@ import { CopyableInput } from './CopyableInput'
import { ConnectionListItem } from './ConnectionListItem'
import { ErrorMessage } from './ErrorMessage'
import { setRotating } from '../hooks/useRotatingSpinner'
+import config from '../config'
+import { RetrieveCodeBox } from './RetrieveCodeBox'
const QR_CODE_SIZE = 128
@@ -25,8 +27,15 @@ export default function Uploader({
onStop: () => void
}): JSX.Element {
const { peer, stop } = useWebRTCPeer()
- const { isLoading, error, longSlug, shortSlug, longURL, shortURL } =
- useUploaderChannel(peer.id)
+ const {
+ isLoading,
+ error,
+ longSlug,
+ shortSlug,
+ longURL,
+ shortURL,
+ retrieveCode,
+ } = useUploaderChannel(peer.id)
const connections = useUploaderConnections(peer, files, password)
const handleStop = useCallback(() => {
@@ -56,10 +65,15 @@ export default function Uploader({
diff --git a/src/config.ts b/src/config.ts
index da715e5..5753048 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -2,6 +2,7 @@ import toppings from './toppings'
export default {
redisURL: 'redis://localhost:6379/0',
+ retrieveCodeMode: process.env.NEXT_PUBLIC_RETRIEVE_CODE_MODE === 'true',
channel: {
ttl: 60 * 60, // 1 hour
},
@@ -25,4 +26,9 @@ export default {
words: toppings,
maxAttempts: 8,
},
+ retrieveCodeSlug: {
+ numChars: 6,
+ chars: '0123456789',
+ maxAttempts: 8,
+ },
}
diff --git a/src/hooks/useUploaderChannel.ts b/src/hooks/useUploaderChannel.ts
index dba7092..49df0fe 100644
--- a/src/hooks/useUploaderChannel.ts
+++ b/src/hooks/useUploaderChannel.ts
@@ -20,6 +20,7 @@ export function useUploaderChannel(
shortSlug: string | undefined
longURL: string | undefined
shortURL: string | undefined
+ retrieveCode: string | undefined
} {
const { isLoading, error, data } = useQuery({
queryKey: ['uploaderChannel', uploaderPeerID],
@@ -56,6 +57,7 @@ export function useUploaderChannel(
const secret = data?.secret
const longSlug = data?.longSlug
const shortSlug = data?.shortSlug
+ const retrieveCode = data?.retrieveCode
const longURL = longSlug ? generateURL(longSlug) : undefined
const shortURL = shortSlug ? generateURL(shortSlug) : undefined
@@ -130,5 +132,6 @@ export function useUploaderChannel(
shortSlug,
longURL,
shortURL,
+ retrieveCode,
}
}
diff --git a/src/slugs.ts b/src/slugs.ts
index 5e4aa00..b734c69 100644
--- a/src/slugs.ts
+++ b/src/slugs.ts
@@ -45,14 +45,7 @@ function generateRandomWords(
}
export const generateShortSlug = (): string => {
- let result = ''
- for (let i = 0; i < config.shortSlug.numChars; i++) {
- result +=
- config.shortSlug.chars[
- Math.floor(Math.random() * config.shortSlug.chars.length)
- ]
- }
- return result
+ return generateRandomWord(config.shortSlug.chars, config.shortSlug.numChars)
}
export const generateLongSlug = async (): Promise => {
@@ -62,3 +55,18 @@ export const generateLongSlug = async (): Promise => {
)
return parts.join('/')
}
+
+export const generateRetrieveCode = (): string => {
+ return generateRandomWord(
+ config.retrieveCodeSlug.chars,
+ config.retrieveCodeSlug.numChars,
+ )
+}
+
+const generateRandomWord = (wordList: string, wordLength: number): string => {
+ let result = ''
+ for (let i = 0; i < wordLength; i++) {
+ result += wordList[Math.floor(Math.random() * wordList.length)]
+ }
+ return result
+}