feat update
This commit is contained in:
@@ -4,7 +4,7 @@ import { EmailActionForm } from "@/components/auth/email-action-form";
|
|||||||
|
|
||||||
export const instant = false;
|
export const instant = false;
|
||||||
|
|
||||||
export default async function ResetPasswordPage({ searchParams }: PageProps<"/reset-password">) {
|
export default async function ResetPasswordPage({ searchParams }: PageProps<"/password-reset">) {
|
||||||
await connection();
|
await connection();
|
||||||
const { token, error } = await searchParams;
|
const { token, error } = await searchParams;
|
||||||
return <div className="min-h-svh"><SiteHeader /><main className="grid min-h-[calc(100svh-4rem)] place-items-center p-4">
|
return <div className="min-h-svh"><SiteHeader /><main className="grid min-h-[calc(100svh-4rem)] place-items-center p-4">
|
||||||
@@ -29,7 +29,7 @@ export default async function ProfilePage({ searchParams }: PageProps<"/profile"
|
|||||||
<main className="mx-auto max-w-5xl p-4 py-10 sm:p-8">
|
<main className="mx-auto max-w-5xl p-4 py-10 sm:p-8">
|
||||||
<h1 className="mb-6 font-heading text-3xl font-semibold">โปรไฟล์ของฉัน</h1>
|
<h1 className="mb-6 font-heading text-3xl font-semibold">โปรไฟล์ของฉัน</h1>
|
||||||
{setup === "1" && <p className="mb-6 text-muted-foreground">
|
{setup === "1" && <p className="mb-6 text-muted-foreground">
|
||||||
{upload === "failed" ? "สร้างบัญชีแล้ว แต่บันทึกรูปโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้งหรือข้ามไปก่อน" :
|
{upload === "failed" ? "สร้างบัญชีแล้ว แต่บันทึกรูปโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง" :
|
||||||
"เพิ่มรูปโปรไฟล์หรือแก้ชื่อที่แสดงก่อนเริ่มใช้งาน"}
|
"เพิ่มรูปโปรไฟล์หรือแก้ชื่อที่แสดงก่อนเริ่มใช้งาน"}
|
||||||
</p>}
|
</p>}
|
||||||
<div className="grid items-start gap-6 md:grid-cols-2">
|
<div className="grid items-start gap-6 md:grid-cols-2">
|
||||||
|
|||||||
@@ -4,11 +4,13 @@ import Link from "next/link";
|
|||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useEffect, useRef, useState, type FormEvent } from "react";
|
import { useEffect, useRef, useState, type FormEvent } from "react";
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { authClient } from "@/lib/auth/client";
|
import { authClient } from "@/lib/auth/client";
|
||||||
|
import { ProfileImageInput } from "./profile-image-input";
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface Window {
|
interface Window {
|
||||||
@@ -42,12 +44,18 @@ export function AccountForm({
|
|||||||
const [busy, setBusy] = useState(false);
|
const [busy, setBusy] = useState(false);
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const [pendingEmail, setPendingEmail] = useState("");
|
const [pendingEmail, setPendingEmail] = useState("");
|
||||||
|
const [pendingName, setPendingName] = useState("");
|
||||||
const [notice, setNotice] = useState("");
|
const [notice, setNotice] = useState("");
|
||||||
const [token, setToken] = useState("");
|
const [token, setToken] = useState("");
|
||||||
|
const [profileImage, setProfileImage] = useState<File | null>(null);
|
||||||
|
const [profilePreview, setProfilePreview] = useState<string | null>(null);
|
||||||
const formRef = useRef<HTMLFormElement>(null);
|
const formRef = useRef<HTMLFormElement>(null);
|
||||||
const container = useRef<HTMLDivElement>(null);
|
const container = useRef<HTMLDivElement>(null);
|
||||||
const widget = useRef<string | null>(null);
|
const widget = useRef<string | null>(null);
|
||||||
const captcha = process.env.NODE_ENV !== "development";
|
const captcha = process.env.NODE_ENV !== "development";
|
||||||
|
useEffect(() => () => {
|
||||||
|
if (profilePreview) URL.revokeObjectURL(profilePreview);
|
||||||
|
}, [profilePreview]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!captcha) return;
|
if (!captcha) return;
|
||||||
const script = document.createElement("script");
|
const script = document.createElement("script");
|
||||||
@@ -94,14 +102,16 @@ export function AccountForm({
|
|||||||
try {
|
try {
|
||||||
const fields = new FormData(form);
|
const fields = new FormData(form);
|
||||||
const email = String(fields.get("email") ?? "").trim();
|
const email = String(fields.get("email") ?? "").trim();
|
||||||
|
const name = String(fields.get("name") ?? "").trim();
|
||||||
const result = await authClient.signUp.email({
|
const result = await authClient.signUp.email({
|
||||||
name: String(fields.get("name") ?? "").trim(),
|
name,
|
||||||
email,
|
email,
|
||||||
password: String(fields.get("password") ?? ""),
|
password: String(fields.get("password") ?? ""),
|
||||||
fetchOptions: { headers: captcha ? { "x-captcha-response": token } : undefined },
|
fetchOptions: { headers: captcha ? { "x-captcha-response": token } : undefined },
|
||||||
});
|
});
|
||||||
if (result.error) throw new Error(result.error.message ?? "ส่งรหัสไม่สำเร็จ กรุณาลองอีกครั้ง");
|
if (result.error) throw new Error(result.error.message ?? "ส่งรหัสไม่สำเร็จ กรุณาลองอีกครั้ง");
|
||||||
setPendingEmail(email);
|
setPendingEmail(email);
|
||||||
|
setPendingName(name);
|
||||||
setNotice("ส่งรหัส 6 หลักแล้ว กรุณาตรวจสอบอีเมลและกรอกรหัสภายใน 5 นาที");
|
setNotice("ส่งรหัส 6 หลักแล้ว กรุณาตรวจสอบอีเมลและกรอกรหัสภายใน 5 นาที");
|
||||||
} catch (cause) {
|
} catch (cause) {
|
||||||
setError(cause instanceof Error ? cause.message : "ลองอีกครั้ง");
|
setError(cause instanceof Error ? cause.message : "ลองอีกครั้ง");
|
||||||
@@ -125,8 +135,18 @@ export function AccountForm({
|
|||||||
email: pendingEmail, otp: String(form.get("otp") ?? "").trim(),
|
email: pendingEmail, otp: String(form.get("otp") ?? "").trim(),
|
||||||
});
|
});
|
||||||
if (result.error) throw new Error("รหัสไม่ถูกต้องหรือหมดอายุ กรุณาลองอีกครั้ง");
|
if (result.error) throw new Error("รหัสไม่ถูกต้องหรือหมดอายุ กรุณาลองอีกครั้ง");
|
||||||
const setupPath = `/profile?setup=1&next=${encodeURIComponent(nextPath)}`;
|
if (profileImage) {
|
||||||
router.push(`/login?verified=1&next=${encodeURIComponent(setupPath)}`);
|
const profile = new FormData();
|
||||||
|
profile.set("name", pendingName);
|
||||||
|
profile.set("image", profileImage);
|
||||||
|
const response = await fetch("/api/profile", { method: "POST", body: profile });
|
||||||
|
if (!response.ok) {
|
||||||
|
router.replace(`/profile?setup=1&upload=failed&next=${encodeURIComponent(nextPath)}`);
|
||||||
|
router.refresh();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
router.replace(nextPath);
|
||||||
router.refresh();
|
router.refresh();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -180,6 +200,21 @@ export function AccountForm({
|
|||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
)}
|
)}
|
||||||
|
{register && <Field>
|
||||||
|
<FieldLabel htmlFor="register-image">รูปโปรไฟล์ (ไม่บังคับ)</FieldLabel>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Avatar size="lg" className="size-16">
|
||||||
|
{profilePreview && <AvatarImage src={profilePreview} alt="รูปโปรไฟล์" />}
|
||||||
|
<AvatarFallback>?</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<ProfileImageInput id="register-image" disabled={busy}
|
||||||
|
onChange={(cropped) => {
|
||||||
|
setProfileImage(cropped);
|
||||||
|
setProfilePreview(URL.createObjectURL(cropped));
|
||||||
|
setError("");
|
||||||
|
}} onError={setError} />
|
||||||
|
</div>
|
||||||
|
</Field>}
|
||||||
<Field>
|
<Field>
|
||||||
<FieldLabel htmlFor="email">อีเมล</FieldLabel>
|
<FieldLabel htmlFor="email">อีเมล</FieldLabel>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
@@ -217,13 +252,13 @@ export function AccountForm({
|
|||||||
placeholder="กดส่ง OTP ก่อน" disabled={busy || !pendingEmail} />
|
placeholder="กดส่ง OTP ก่อน" disabled={busy || !pendingEmail} />
|
||||||
</Field>}
|
</Field>}
|
||||||
{captcha && !pendingEmail && <div ref={container} />}
|
{captcha && !pendingEmail && <div ref={container} />}
|
||||||
{(!register || pendingEmail) && <Button type="submit" disabled={busy || (!register && captcha && !token)}>
|
<Button type="submit" disabled={busy || (register && !pendingEmail) || (!register && captcha && !token)}>
|
||||||
{busy
|
{busy
|
||||||
? "กำลังดำเนินการ..."
|
? "กำลังดำเนินการ..."
|
||||||
: register
|
: register
|
||||||
? "ยืนยันอีเมล"
|
? "สมัครสมาชิก"
|
||||||
: "เข้าสู่ระบบ"}
|
: "เข้าสู่ระบบ"}
|
||||||
</Button>}
|
</Button>
|
||||||
</FieldGroup>
|
</FieldGroup>
|
||||||
</form>
|
</form>
|
||||||
{register ? <Button variant="link" nativeButton={false}
|
{register ? <Button variant="link" nativeButton={false}
|
||||||
|
|||||||
@@ -38,14 +38,15 @@ export function EmailSettings({ email, verified, callbackCompleted, callbackErro
|
|||||||
setError("");
|
setError("");
|
||||||
setMessage("");
|
setMessage("");
|
||||||
try {
|
try {
|
||||||
const result = await authClient.changeEmail({ newEmail: newEmail.trim(), callbackURL: "/profile?emailAction=1" });
|
const targetEmail = newEmail.trim();
|
||||||
|
const result = await authClient.changeEmail({ newEmail: targetEmail, callbackURL: "/profile?emailAction=1" });
|
||||||
if (result.error?.code === "SESSION_NOT_FRESH")
|
if (result.error?.code === "SESSION_NOT_FRESH")
|
||||||
throw new Error("กรุณาออกจากระบบและเข้าสู่ระบบอีกครั้งก่อนเปลี่ยนอีเมล");
|
throw new Error("กรุณาออกจากระบบและเข้าสู่ระบบอีกครั้งก่อนเปลี่ยนอีเมล");
|
||||||
if (result.error) throw new Error("เปลี่ยนอีเมลไม่สำเร็จ กรุณาลองอีกครั้ง");
|
if (result.error) throw new Error("เปลี่ยนอีเมลไม่สำเร็จ กรุณาลองอีกครั้ง");
|
||||||
setNewEmail("");
|
setNewEmail("");
|
||||||
setMessage(verified
|
setMessage(verified
|
||||||
? "ตรวจสอบอีเมลปัจจุบันเพื่ออนุมัติ แล้วตรวจสอบอีเมลใหม่เพื่อยืนยัน"
|
? `ตรวจสอบ ${email} เพื่ออนุมัติการเปลี่ยนแปลง`
|
||||||
: "ตรวจสอบอีเมลใหม่เพื่อยืนยันการเปลี่ยนแปลง");
|
: `ตรวจสอบ ${targetEmail} เพื่อยืนยันการเปลี่ยนแปลง`);
|
||||||
} catch (cause) {
|
} catch (cause) {
|
||||||
setError(cause instanceof Error ? cause.message : "เปลี่ยนอีเมลไม่สำเร็จ");
|
setError(cause instanceof Error ? cause.message : "เปลี่ยนอีเมลไม่สำเร็จ");
|
||||||
} finally { setBusy(false); }
|
} finally { setBusy(false); }
|
||||||
@@ -54,7 +55,7 @@ export function EmailSettings({ email, verified, callbackCompleted, callbackErro
|
|||||||
return <Card>
|
return <Card>
|
||||||
<CardHeader><CardTitle>อีเมล</CardTitle></CardHeader>
|
<CardHeader><CardTitle>อีเมล</CardTitle></CardHeader>
|
||||||
<CardContent className="flex flex-col gap-4">
|
<CardContent className="flex flex-col gap-4">
|
||||||
<p className="text-sm">{email} · {verified ? "ยืนยันแล้ว" : "ยังไม่ยืนยัน"}</p>
|
<p className="text-sm">{email} - {verified ? "ยืนยันแล้ว" : "ยังไม่ยืนยัน"}</p>
|
||||||
{callbackCompleted && <Alert><AlertDescription>ยืนยันขั้นตอนแล้ว หากกำลังเปลี่ยนอีเมล โปรดตรวจสอบกล่องจดหมายสำหรับขั้นตอนถัดไป</AlertDescription></Alert>}
|
{callbackCompleted && <Alert><AlertDescription>ยืนยันขั้นตอนแล้ว หากกำลังเปลี่ยนอีเมล โปรดตรวจสอบกล่องจดหมายสำหรับขั้นตอนถัดไป</AlertDescription></Alert>}
|
||||||
{callbackError && <Alert variant="destructive"><AlertDescription>ลิงก์ยืนยันไม่ถูกต้องหรือหมดอายุ กรุณาขอลิงก์ใหม่</AlertDescription></Alert>}
|
{callbackError && <Alert variant="destructive"><AlertDescription>ลิงก์ยืนยันไม่ถูกต้องหรือหมดอายุ กรุณาขอลิงก์ใหม่</AlertDescription></Alert>}
|
||||||
{message && <Alert><AlertDescription>{message}</AlertDescription></Alert>}
|
{message && <Alert><AlertDescription>{message}</AlertDescription></Alert>}
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState, type FormEvent } from "react";
|
import { useEffect, useState, type FormEvent } from "react";
|
||||||
import Link from "next/link";
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
@@ -129,15 +128,6 @@ export function ProfileForm({
|
|||||||
>
|
>
|
||||||
{busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
|
{busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
|
||||||
</Button>
|
</Button>
|
||||||
{nextPath && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
nativeButton={false}
|
|
||||||
render={<Link href={nextPath} />}
|
|
||||||
>
|
|
||||||
ไว้ก่อน
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export function RegistrationOtpForm({ email, nextPath, setup }: {
|
|||||||
const result = await authClient.emailOtp.verifyEmail({ email: address, otp });
|
const result = await authClient.emailOtp.verifyEmail({ email: address, otp });
|
||||||
if (result.error) throw new Error("รหัสไม่ถูกต้องหรือหมดอายุ กรุณาลองอีกครั้ง");
|
if (result.error) throw new Error("รหัสไม่ถูกต้องหรือหมดอายุ กรุณาลองอีกครั้ง");
|
||||||
const returnPath = setup ? `/profile?setup=1&next=${encodeURIComponent(nextPath)}` : nextPath;
|
const returnPath = setup ? `/profile?setup=1&next=${encodeURIComponent(nextPath)}` : nextPath;
|
||||||
router.push(`/login?verified=1&next=${encodeURIComponent(returnPath)}`);
|
router.replace(returnPath);
|
||||||
router.refresh();
|
router.refresh();
|
||||||
} catch (cause) {
|
} catch (cause) {
|
||||||
setError(cause instanceof Error ? cause.message : "ยืนยันอีเมลไม่สำเร็จ");
|
setError(cause instanceof Error ? cause.message : "ยืนยันอีเมลไม่สำเร็จ");
|
||||||
|
|||||||
@@ -63,7 +63,9 @@ describe("actual administrator session boundary", () => {
|
|||||||
(await import("./server")).getAuth();
|
(await import("./server")).getAuth();
|
||||||
const options = mocks.auth.mock.calls.at(-1)![0];
|
const options = mocks.auth.mock.calls.at(-1)![0];
|
||||||
expect(options.emailAndPassword.requireEmailVerification).toBe(true);
|
expect(options.emailAndPassword.requireEmailVerification).toBe(true);
|
||||||
expect(options.emailVerification).toMatchObject({ sendOnSignUp: false });
|
expect(options.emailVerification).toMatchObject({
|
||||||
|
sendOnSignUp: false, autoSignInAfterVerification: true,
|
||||||
|
});
|
||||||
expect(options.user.changeEmail.enabled).toBe(true);
|
expect(options.user.changeEmail.enabled).toBe(true);
|
||||||
const otp = options.plugins.find((plugin: { id?: string }) => plugin.id === "email-otp");
|
const otp = options.plugins.find((plugin: { id?: string }) => plugin.id === "email-otp");
|
||||||
expect(otp.options).toMatchObject({ sendVerificationOnSignUp: true, storeOTP: "hashed" });
|
expect(otp.options).toMatchObject({ sendVerificationOnSignUp: true, storeOTP: "hashed" });
|
||||||
|
|||||||
@@ -72,6 +72,7 @@ function createAuth() {
|
|||||||
},
|
},
|
||||||
emailVerification: {
|
emailVerification: {
|
||||||
sendOnSignUp: false,
|
sendOnSignUp: false,
|
||||||
|
autoSignInAfterVerification: true,
|
||||||
sendVerificationEmail: async ({ user, url }) => {
|
sendVerificationEmail: async ({ user, url }) => {
|
||||||
await sendAuthEmail(user.email, "ยืนยันอีเมล Buzz Guide", `เปิดลิงก์นี้เพื่อยืนยันอีเมล: ${url}\n\nลิงก์นี้หมดอายุใน 1 ชั่วโมง`);
|
await sendAuthEmail(user.email, "ยืนยันอีเมล Buzz Guide", `เปิดลิงก์นี้เพื่อยืนยันอีเมล: ${url}\n\nลิงก์นี้หมดอายุใน 1 ชั่วโมง`);
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ export async function notifyPaidTicketDiscord(ticketId: string, amountBaht: numb
|
|||||||
embeds: [{
|
embeds: [{
|
||||||
title: "มี Ticket คอมมิชชันใหม่ที่ชำระเงินแล้ว",
|
title: "มี Ticket คอมมิชชันใหม่ที่ชำระเงินแล้ว",
|
||||||
url: new URL(`/admin/commission/${ticketId}`, process.env.BETTER_AUTH_URL ?? siteUrl).toString(),
|
url: new URL(`/admin/commission/${ticketId}`, process.env.BETTER_AUTH_URL ?? siteUrl).toString(),
|
||||||
description: `Ticket #${ticketId.slice(0, 8)} · ฿${amountBaht}`,
|
description: `Ticket #${ticketId.slice(0, 8)} - ฿${amountBaht}`,
|
||||||
color: 0x57f287,
|
color: 0x57f287,
|
||||||
timestamp: new Date().toISOString(),
|
timestamp: new Date().toISOString(),
|
||||||
}],
|
}],
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ export async function sendCommissionMessagePush(message: {
|
|||||||
for (let offset = 0; offset < subscriptions.length; offset += 10) {
|
for (let offset = 0; offset < subscriptions.length; offset += 10) {
|
||||||
await Promise.all(subscriptions.slice(offset, offset + 10).map(async ({ subscription }) => {
|
await Promise.all(subscriptions.slice(offset, offset + 10).map(async ({ subscription }) => {
|
||||||
const payload = JSON.stringify({
|
const payload = JSON.stringify({
|
||||||
id: message.id, title: `${message.authorName} · ${message.ticketTitle}`,
|
id: message.id, title: `${message.authorName} - ${message.ticketTitle}`,
|
||||||
body: message.text?.slice(0, 300) || "ส่งรูปภาพ",
|
body: message.text?.slice(0, 300) || "ส่งรูปภาพ",
|
||||||
url: `/${subscription.scope === "admin" ? "admin/commission" : "commission/tickets"}/${message.ticketId}`,
|
url: `/${subscription.scope === "admin" ? "admin/commission" : "commission/tickets"}/${message.ticketId}`,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -7,6 +7,10 @@ const nextConfig: NextConfig = {
|
|||||||
async headers() {
|
async headers() {
|
||||||
return [{ source: "/:path*", headers: securityHeaders(process.env.NODE_ENV === "production", "https://cdn.jsdelivr.net") }];
|
return [{ source: "/:path*", headers: securityHeaders(process.env.NODE_ENV === "production", "https://cdn.jsdelivr.net") }];
|
||||||
},
|
},
|
||||||
|
async rewrites() {
|
||||||
|
// The reset-password segment resolves to the dynamic guide route in this Next version.
|
||||||
|
return { beforeFiles: [{ source: "/reset-password", destination: "/password-reset" }] };
|
||||||
|
},
|
||||||
cacheComponents: true,
|
cacheComponents: true,
|
||||||
cacheHandlers: {
|
cacheHandlers: {
|
||||||
remote: resolve(process.cwd(), "cache-handlers/redis-handler.cjs"),
|
remote: resolve(process.cwd(), "cache-handlers/redis-handler.cjs"),
|
||||||
|
|||||||
Reference in New Issue
Block a user