Merge pull request #19 from NYCU-SDC/feat/CORE-177-user-onboarding-api-integration

[CORE-177] User Onboarding API Integration

Author: elvisdragonmao

package.json

@@ -19,7 +19,7 @@
 	},
 	"dependencies": {
 		"@icons-pack/react-simple-icons": "^13.8.0",
-		"@nycu-sdc/core-system-sdk": "^0.1.5",
+		"@nycu-sdc/core-system-sdk": "0.1.4-snapshot-e044505",
 		"@radix-ui/react-checkbox": "^1.3.3",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",

pnpm-lock.yaml

@@ -3,6 +3,7 @@
 	inset: -8vh -8vw;
 	overflow: hidden;
 	pointer-events: none;
+	z-index: -10;
 }
 
 .row {

src/features/auth/components/NameMarquee.module.css

@@ -6,6 +6,8 @@
 	gap: 2rem;
 	background: var(--background-color-secondary);
 	padding: 4rem;
+	width: min(37.5rem, 92vw);
+	min-width: 320px;
 	clip-path: polygon(2rem 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%, 0 2rem);
 }
 
@@ -25,3 +27,13 @@
 	display: flex;
 	justify-content: center;
 }
+
+.inputField input {
+	background-color: var(--selection);
+}
+
+.inputField label::before {
+	content: "＊";
+	color: var(--red);
+	margin-right: 0.25rem;
+}

src/features/auth/components/WelcomePage.module.css

@@ -1,38 +1,135 @@
+import { authService } from "@/features/auth/services/authService";
 import { UserLayout } from "@/layouts";
 import { Button, Input } from "@/shared/components";
 import { ArrowRight } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { NameMarquee } from "./NameMarquee";
 import styles from "./WelcomePage.module.css";
 
 export const WelcomePage = () => {
 	const navigate = useNavigate();
-	const [name, setName] = useState("");
-	const [nickName, setNickName] = useState("Andrew");
+	const isWelcomeGuardMuted = import.meta.env.VITE_MUTE_WELCOME_GUARD === "true"; // true = allow everyone in, false = protect this page.
+	const [nickname, setNickname] = useState("");
+	const [username, setUsername] = useState("");
+	const [isUsernameFocused, setIsUsernameFocused] = useState(false);
+	const [isLoading, setIsLoading] = useState(true);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [submitError, setSubmitError] = useState("");
 
-	const handleSubmit = (e: React.FormEvent) => {
+	useEffect(() => {
+		let isMounted = true;
+
+		const loadUser = async () => {
+			try {
+				const user = await authService.getCurrentUser();
+				if (!isMounted || !user) return;
+
+				const hasGuardFlags = typeof user.isMember === "boolean" && typeof user.isFirstLogin === "boolean";
+				const isMember = user.isMember === true;
+				const isFirstLogin = user.isFirstLogin === true;
+				// TODO: Align with backend contract and switch to fail-close once isMember/isFirstLogin are guaranteed.
+				if (!isWelcomeGuardMuted && hasGuardFlags && (!isMember || !isFirstLogin)) {
+					navigate("/", { replace: true });
+					return;
+				}
+
+				setNickname(typeof user.name === "string" ? user.name : "");
+				setUsername(typeof user.username === "string" ? user.username : "");
+			} catch {
+				if (!isWelcomeGuardMuted && isMounted) {
+					navigate("/", { replace: true });
+				}
+			} finally {
+				if (isMounted) setIsLoading(false);
+			}
+		};
+
+		loadUser();
+		return () => {
+			isMounted = false;
+		};
+	}, [isWelcomeGuardMuted, navigate]);
+
+	const nicknameError = useMemo(() => {
+		if (!nickname) return "";
+		if (nickname.length > 15) return "暱稱需為 15 字以下";
+		if (nickname.length === 15) return "已達上限 15 字！";
+		return "";
+	}, [nickname]);
+
+	const usernameError = useMemo(() => {
+		if (!username.trim()) return "請輸入使用者名稱";
+		if (username.length < 4 || username.length > 15) return "使用者名稱需為 4~15 位";
+		if (!/^[A-Za-z0-9_]+$/.test(username)) return "使用者名稱只能包含英數與底線";
+		return "";
+	}, [username]);
+
+	const canSubmit = Boolean(nickname.trim() && nickname.trim().length <= 15 && username.trim() && !usernameError && !isSubmitting);
+	const displayedUsernameError = isUsernameFocused || username.trim() ? usernameError : "";
+
+	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
-		if (name.trim()) {
-			console.log("Saving name:", name);
+		if (!canSubmit) return;
+
+		try {
+			setSubmitError("");
+			setIsSubmitting(true);
+
+			await authService.updateOnboarding({
+				username: username.trim(),
+				name: nickname.trim()
+			});
+
 			navigate("/forms");
+		} catch {
+			setSubmitError("儲存失敗，請稍後再試");
+		} finally {
+			setIsSubmitting(false);
 		}
 	};
-	const displayName = `${nickName.trim() || "Andrew"}!`;
+
+	const displayName = `${nickname.trim() || "Welcome"}！`;
 
 	return (
 		<UserLayout>
 			<NameMarquee name={displayName} />
 			<div className={styles.content}>
-				<h1 className={styles.title}>很高興認識您，Andrew!</h1>
+				<h1 className={styles.title}>很高興認識您，{displayName}</h1>
 				<form className={styles.form} onSubmit={handleSubmit}>
-					<Input id="nickName" label="暱稱" placeholder="Enter your nickname" value={nickName} onChange={e => setNickName(e.target.value)} required />
-					<Input id="name" label="使用者名稱" placeholder="Enter your name" value={name} onChange={e => setName(e.target.value)} required />
+					<Input
+						id="nickname"
+						label="暱稱"
+						placeholder="Enter your nickname"
+						value={nickname}
+						onChange={e => setNickname(e.target.value)}
+						error={nicknameError}
+						disabled={isLoading}
+						maxLength={15}
+						className={styles.inputField}
+						required
+					/>
+					<Input
+						id="username"
+						label="使用者名稱"
+						placeholder="Becomes your user URL"
+						value={username}
+						onChange={e => setUsername(e.target.value.replace(/\s/g, ""))}
+						onFocus={() => setIsUsernameFocused(true)}
+						onBlur={() => setIsUsernameFocused(false)}
+						error={displayedUsernameError}
+						disabled={isLoading}
+						minLength={4}
+						maxLength={15}
+						className={styles.inputField}
+						required
+					/>
 					<div className={styles.actions}>
-						<Button type="submit" icon={ArrowRight} disabled={!name.trim()} iconPosition="right">
+						<Button type="submit" icon={ArrowRight} disabled={!canSubmit} iconPosition="right">
 							繼續
 						</Button>
 					</div>
+					{submitError && <p>{submitError}</p>}
 				</form>
 			</div>
 		</UserLayout>

src/features/auth/components/WelcomePage.tsx

@@ -22,14 +22,42 @@ export const authService = {
 	async logout() {
 		// Replace with actual API call
 		const response = await fetch("/api/auth/logout", {
-			method: "POST"
+			method: "POST",
+			credentials: "include"
 		});
 		return response.json();
 	},
 
 	async getCurrentUser() {
-		// Replace with actual API call
-		const response = await fetch("/api/auth/me");
+		const response = await fetch("/api/users/me", {
+			credentials: "include"
+		});
+		if (!response.ok) {
+			throw new Error("Failed to get current user");
+		}
+
+		return response.json();
+	},
+
+	async updateOnboarding(payload: { username: string; name: string }) {
+		const response = await fetch("/api/users/onboarding", {
+			method: "PUT",
+			credentials: "include",
+			headers: {
+				"Content-Type": "application/json"
+			},
+			body: JSON.stringify(payload)
+		});
+
+		if (!response.ok) {
+			throw new Error("Failed to update onboarding");
+		}
+
+		const contentType = response.headers.get("content-type") ?? "";
+		if (!contentType.includes("application/json")) {
+			return null;
+		}
+
 		return response.json();
 	}
 };