From f003e77d522c1c902d7ce69807a54aafb578bbd0 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Sun, 18 May 2025 20:55:51 +0800 Subject: [PATCH] add: text fields and button in signup page --- packages/backend/middleware/index.ts | 2 + .../frontend/src/components/Dialog.svelte | 3 + .../src/components/NavigationDrawer.svelte | 17 ++- .../frontend/src/components/Portal.svelte | 8 ++ .../RegisterPage/RegisterForm.svelte | 78 ++++++++++++ .../frontend/src/components/TextField.svelte | 72 +++++++++++ .../src/components/TitleBarMobile.svelte | 33 ++--- .../src/components/icon/LeftArrow.astro | 8 ++ .../src/components/icon/LoadingSpinner.svelte | 15 +++ .../src/components/icon/MenuIcon.svelte | 13 +- .../src/components/icon/RightArrow.astro | 2 +- packages/frontend/src/lib/vdf.ts | 113 ++++++++++++++++++ .../frontend/src/pages/register/index.astro | 25 ++-- packages/frontend/tsconfig.json | 4 +- 14 files changed, 345 insertions(+), 48 deletions(-) create mode 100644 packages/frontend/src/components/Dialog.svelte create mode 100644 packages/frontend/src/components/Portal.svelte create mode 100644 packages/frontend/src/components/RegisterPage/RegisterForm.svelte create mode 100644 packages/frontend/src/components/TextField.svelte create mode 100644 packages/frontend/src/components/icon/LeftArrow.astro create mode 100644 packages/frontend/src/components/icon/LoadingSpinner.svelte create mode 100644 packages/frontend/src/lib/vdf.ts diff --git a/packages/backend/middleware/index.ts b/packages/backend/middleware/index.ts index 6f8e411..1aa05ca 100644 --- a/packages/backend/middleware/index.ts +++ b/packages/backend/middleware/index.ts @@ -8,8 +8,10 @@ import { logger } from "./logger.ts"; import { timing } from "hono/timing"; import { contentType } from "./contentType.ts"; import { captchaMiddleware } from "./captcha.ts"; +import { cors } from 'hono/cors'; export function configureMiddleWares(app: Hono<{ Variables: Variables }>) { + app.all("*", cors()); app.use("*", contentType); app.use(timing()); app.use("*", preetifyResponse); diff --git a/packages/frontend/src/components/Dialog.svelte b/packages/frontend/src/components/Dialog.svelte new file mode 100644 index 0000000..fd9d191 --- /dev/null +++ b/packages/frontend/src/components/Dialog.svelte @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/packages/frontend/src/components/NavigationDrawer.svelte b/packages/frontend/src/components/NavigationDrawer.svelte index 404c883..a13ebf2 100644 --- a/packages/frontend/src/components/NavigationDrawer.svelte +++ b/packages/frontend/src/components/NavigationDrawer.svelte @@ -6,7 +6,6 @@ export let show: boolean = false; export let onClose: () => void; - let drawer: HTMLDivElement; let cover: HTMLDivElement; onMount(() => { @@ -27,19 +26,17 @@
{#if show} {/if} diff --git a/packages/frontend/src/components/Portal.svelte b/packages/frontend/src/components/Portal.svelte new file mode 100644 index 0000000..a838ebd --- /dev/null +++ b/packages/frontend/src/components/Portal.svelte @@ -0,0 +1,8 @@ + + +
+ +
\ No newline at end of file diff --git a/packages/frontend/src/components/RegisterPage/RegisterForm.svelte b/packages/frontend/src/components/RegisterPage/RegisterForm.svelte new file mode 100644 index 0000000..c01471d --- /dev/null +++ b/packages/frontend/src/components/RegisterPage/RegisterForm.svelte @@ -0,0 +1,78 @@ + + +
+ + + + + \ No newline at end of file diff --git a/packages/frontend/src/components/TextField.svelte b/packages/frontend/src/components/TextField.svelte new file mode 100644 index 0000000..66b649c --- /dev/null +++ b/packages/frontend/src/components/TextField.svelte @@ -0,0 +1,72 @@ + + +
+
+
+
+ +
+ + {labelText} + +
+ +
+
+ + focus = true} + onblur={() => focus = false} + oninput={onValueChange} + type={type} + /> +
+ {#if supportingText || maxChar} +
+ {#if supportingText} + + {supportingText} + + {/if} + {#if maxChar} + + {inputText.length}/{maxChar} + + {/if} +
+ {/if} +
diff --git a/packages/frontend/src/components/TitleBarMobile.svelte b/packages/frontend/src/components/TitleBarMobile.svelte index 105aacc..ee1d7ff 100644 --- a/packages/frontend/src/components/TitleBarMobile.svelte +++ b/packages/frontend/src/components/TitleBarMobile.svelte @@ -9,6 +9,7 @@ import HomeIcon from "@components/icon/HomeIcon.svelte"; import InfoIcon from "@components/icon/InfoIcon.svelte"; import RegisterIcon from "@components/icon/RegisterIcon.svelte"; + import Portal from "@components/Portal.svelte"; let searchBox: SearchBox | null = null; let showSearchBox = false; @@ -19,22 +20,24 @@ } - showDrawer = false}> -
-
- - 首页 + + showDrawer = false}> +
+
+ + 首页 +
+
+ + 关于 +
+
+ + 注册 +
-
- - 关于 -
-
- - 注册 -
-
- + +
{#if !showSearchBox} diff --git a/packages/frontend/src/components/icon/LeftArrow.astro b/packages/frontend/src/components/icon/LeftArrow.astro new file mode 100644 index 0000000..975fceb --- /dev/null +++ b/packages/frontend/src/components/icon/LeftArrow.astro @@ -0,0 +1,8 @@ +--- +const { ...props } = Astro.props; +--- + + + diff --git a/packages/frontend/src/components/icon/LoadingSpinner.svelte b/packages/frontend/src/components/icon/LoadingSpinner.svelte new file mode 100644 index 0000000..bceffda --- /dev/null +++ b/packages/frontend/src/components/icon/LoadingSpinner.svelte @@ -0,0 +1,15 @@ + + +
+ + + + + + + + + +
diff --git a/packages/frontend/src/components/icon/MenuIcon.svelte b/packages/frontend/src/components/icon/MenuIcon.svelte index 1c74e68..9522247 100644 --- a/packages/frontend/src/components/icon/MenuIcon.svelte +++ b/packages/frontend/src/components/icon/MenuIcon.svelte @@ -3,18 +3,7 @@
- - - Created with Pixso. - - - - - - - + - -
diff --git a/packages/frontend/src/components/icon/RightArrow.astro b/packages/frontend/src/components/icon/RightArrow.astro index b42a138..b4dc488 100644 --- a/packages/frontend/src/components/icon/RightArrow.astro +++ b/packages/frontend/src/components/icon/RightArrow.astro @@ -2,7 +2,7 @@ const {...props} = Astro.props; --- - + \ No newline at end of file diff --git a/packages/frontend/src/lib/vdf.ts b/packages/frontend/src/lib/vdf.ts new file mode 100644 index 0000000..edd623c --- /dev/null +++ b/packages/frontend/src/lib/vdf.ts @@ -0,0 +1,113 @@ + +// Define interfaces for input and output +interface VdfProgressCallback { + (progress: number): void; +} + +interface VdfResult { + result: bigint; + time: number; // Time taken in milliseconds +} + +// The content of the Web Worker script +const workerContent = `addEventListener("message", async (event) => { + const { g, N, difficulty } = event.data; + + // Although pow is not used in the iterative VDF, it's good to keep the original worker code structure. + // The iterative computeVDFWithProgress is better for progress reporting. + function pow(base, exponent, mod) { + let result = 1n; + base = base % mod; + while (exponent > 0n) { + if (exponent % 2n === 1n) { + result = (result * base) % mod; + } + base = (base * base) % mod; + exponent = exponent / 2n; + // Using BigInt division (/) which performs integer division + } + return result; + } + + // Compute VDF iteratively to report progress + function computeVDFWithProgress(g, N, T, postProgress) { + let result = g; + let latestTime = performance.now(); + const totalSteps = T; // T is the difficulty, representing 2^T squaring steps + + for (let i = 0n; i < totalSteps; i++) { + result = (result * result) % N; + // Report progress periodically (approx. every 16ms to match typical frame rate) + if (performance.now() - latestTime > 16) { + // Calculate progress as a percentage + const progress = Number((i + 1n) * 10000n / totalSteps) / 100; // Using 10000 for better precision before dividing by 100 + postProgress(progress); + latestTime = performance.now(); + } + } + // Ensure final progress is reported + postProgress(100); + return result; + } + + const startTime = performance.now(); + // The worker computes g^(2^difficulty) mod N. The loop runs 'difficulty' times, performing squaring. + const result = computeVDFWithProgress(g, N, difficulty, (progress) => { + // Post progress back to the main thread + postMessage({ type: "progress", progress: progress }); + }); + const endTime = performance.now(); + const timeTaken = endTime - startTime; + + // Post the final result and time taken back to the main thread + postMessage({ type: "result", result: result.toString(), time: timeTaken }); +}); +`; + +/** + * Computes the Verifiable Delay Function (VDF) result g^(2^difficulty) mod N + * in a Web Worker and reports progress. + * @param g - The base (bigint). + * @param N - The modulus (bigint). + * @param difficulty - The number of squaring steps (T) (bigint). + * @param onProgress - Optional callback function to receive progress updates (0-100). + * @returns A Promise that resolves with the VDF result and time taken. + */ +export function computeVdfInWorker(g: bigint, N: bigint, difficulty: bigint, onProgress?: VdfProgressCallback): Promise { + return new Promise((resolve, reject) => { + // Create a Blob containing the worker script + const blob = new Blob([workerContent], { type: "text/javascript" }); + // Create a URL for the Blob + const workerUrl = URL.createObjectURL(blob); + // Create a new Web Worker + const worker = new Worker(workerUrl); + + // Handle messages from the worker + worker.onmessage = (event) => { + const { type, progress, result, time } = event.data; + + if (type === "progress") { + if (onProgress) { + onProgress(progress); + } + } else if (type === "result") { + // Resolve the promise with the result and time + resolve({ result: BigInt(result), time }); + // Terminate the worker and revoke the URL + worker.terminate(); + URL.revokeObjectURL(workerUrl); + } + }; + + // Handle potential errors in the worker + worker.onerror = (error) => { + reject(error); + // Terminate the worker and revoke the URL in case of error + worker.terminate(); + URL.revokeObjectURL(workerUrl); + }; + + // Post the data to the worker to start the computation + worker.postMessage({ g, N, difficulty }); + }); +} diff --git a/packages/frontend/src/pages/register/index.astro b/packages/frontend/src/pages/register/index.astro index ede0a4b..6f345d6 100644 --- a/packages/frontend/src/pages/register/index.astro +++ b/packages/frontend/src/pages/register/index.astro @@ -1,13 +1,24 @@ --- import Layout from "@layouts/Layout.astro"; import RightArrow from "@components/icon/RightArrow.astro"; +import RegisterForm from "@components/RegisterPage/RegisterForm.svelte"; +import LeftArrow from "@components/icon/LeftArrow.astro"; + +const backendURL = import.meta.env.BACKEND_URL; --- -
-
+
+
+

+ + +

欢迎

-

+

欢迎来到中 V 档案馆。
这里是中文虚拟歌手相关信息的收集站与档案馆。

@@ -15,16 +26,14 @@ import RightArrow from "@components/icon/RightArrow.astro"; 注册一个账号，
让我们一起见证中 V 的历史，现在，与未来。

-

+

已有账户？ 登录 -

-

很抱歉，但您现在无法注册。

-

因为目前还没有写好啦~

-

返回首页

+
diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json index c99a382..cd25b55 100644 --- a/packages/frontend/tsconfig.json +++ b/packages/frontend/tsconfig.json @@ -7,10 +7,10 @@ "paths": { "@components/*": ["src/components/*"], "@layouts/*": ["src/layouts/*"], - "@utils/*": ["src/utils/*"], + "@lib/*": ["src/lib/*"], "@assets/*": ["src/assets/*"], "@styles": ["src/styles/*"], - "@core/*": ["../core/*"] + "@core/*": ["../core/*"], }, "verbatimModuleSyntax": true }