This commit is contained in:
hailin 2025-03-14 18:17:48 +08:00
parent 84e153cf03
commit 7d17e81f4b
6 changed files with 291 additions and 81 deletions

View File

@ -35,15 +35,15 @@ export default function AuthenticationPage() {
</Link>
</p> */}
</div>
<div className="grid gap-10 mt-4">
<div className="relative">
</div>
<EmailSignUp
<MixSignUp
setError={setError}
setVerification={setVerify}
email={setEmail}
password={setPassword}
emailValue={email}

View File

@ -1,6 +1,5 @@
"use client";
// import { useSignUp } from "@clerk/nextjs";
import * as React from "react";
import { Loading } from "@/components/ui/loading";
@ -14,12 +13,6 @@ import Image from 'next/image';
import showImage from '@/components/images/show.png';
import { useTranslation } from "react-i18next";
// type Props = {
// setError: (e: string | null) => void;
// setVerification: (b: boolean) => void;
// };
// export const EmailSignUp: React.FC<Props> = ({ setError, setVerification, emailValue, passwordValue }) => {
export function EmailSignUp(props: {
setError: (e: string | null) => void;
@ -30,7 +23,6 @@ export function EmailSignUp(props: {
emailValue: string;
passwordValue: string;
}) {
// const { signUp, isLoaded: signUpLoaded, setActive } = useSignUp();
const [isLoading, setIsLoading] = React.useState(false);
const [showPassword, setShowPassword] = React.useState(false);
@ -45,9 +37,11 @@ export function EmailSignUp(props: {
const signUpFromParams = async () => {
const ticket = new URL(window.location.href).searchParams.get("__clerk_ticket");
const emailParam = new URL(window.location.href).searchParams.get("email");
if (!ticket && !emailParam) {
return;
}
if (ticket) {
// await signUp
// ?.create({
@ -185,7 +179,6 @@ export function EmailSignUp(props: {
const email = new FormData(e.currentTarget).get("email");
if (
typeof email !== "string"
// typeof first !== "string" ||
// typeof last !== "string"
@ -200,9 +193,11 @@ export function EmailSignUp(props: {
}}>
<div className="grid gap-4 mb-0">
<div className="flex flex-col items-start gap-2">
<label htmlFor="email" className="text-xs text-black/50">
{t("email")}
</label>
<Input
name="email"
placeholder={t("auth.email_address")}
@ -214,6 +209,7 @@ export function EmailSignUp(props: {
required
className="h-10 text-black duration-500 bg-transparent focus:text-black border-black/20 focus:bg-white focus:border-black rounded hover:bg-white/20 hover:border-black/40 placeholder:black/20 "
/>
</div>
</div>
@ -225,6 +221,7 @@ export function EmailSignUp(props: {
{/* {isLoading ? <Loading className="w-4 h-4 animate-spin" /> : "Sign Up with Email"} */}
{t("next")}
</button>
</form> : <form className="grid gap-2" onSubmit={async (e) => {
e.preventDefault();
const password = new FormData(e.currentTarget).get("password");
@ -236,11 +233,7 @@ export function EmailSignUp(props: {
toast.error("two passwords do not match")
return
}
await signUpWithCode(props.emailValue, password)
setGoPassword(false)
}} >
@ -268,11 +261,11 @@ export function EmailSignUp(props: {
</div>
<div className="grid gap-4 mb-4">
<label htmlFor="password" className="text-xs text-black/50">
{t("confirm_password")}
</label>
<div className="grid gap-1 relative">
<Input
name="confirmPassword"
@ -290,6 +283,7 @@ export function EmailSignUp(props: {
// toast.success('coming soon')
}} />
</div>
</div>
<button
@ -302,9 +296,6 @@ export function EmailSignUp(props: {
</button>
</form>}
</FadeInStagger>
);
};

View File

@ -0,0 +1,270 @@
"use client";
import * as React from "react";
import { Loading } from "@/components/ui/loading";
import { FadeInStagger } from "@/components/landing/fade-in";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/toaster";
import { useRouter } from "next/navigation";
import service from "@/lib/http/service";
import Image from 'next/image';
import showImage from '@/components/images/show.png';
import { useTranslation } from "react-i18next";
export function MixSignUp(props: {
setError: (e: string | null) => void;
setVerification: (b: boolean) => void;
email: (value: string) => void;
password: (value: string) => void;
emailValue: string;
passwordValue: string;
}) {
const [isLoading, setIsLoading] = React.useState(false);
const [showPassword, setShowPassword] = React.useState(false);
const [showPassword2, setShowPassword2] = React.useState(false);
const [goPassword, setGoPassword] = React.useState(false);
const [_transferLoading, setTransferLoading] = React.useState(true);
const router = useRouter();
const { t } = useTranslation();
React.useEffect(() => {
const signUpFromParams = async () => {
const ticket = new URL(window.location.href).searchParams.get("__clerk_ticket");
const emailParam = new URL(window.location.href).searchParams.get("email");
if (!ticket && !emailParam) {
return;
}
if (ticket) {
// await signUp
// ?.create({
// strategy: "ticket",
// ticket,
// })
// .then((result) => {
// if (result.status === "complete" && result.createdSessionId) {
// setActive({ session: result.createdSessionId }).then(() => {
// router.push("/app/apis");
// });
// }
// })
// .catch((err) => {
// setTransferLoading(false);
// setError((err as Error).message);
// console.error(err);
// });
}
if (emailParam) {
// setVerification(true);
// await signUp
// ?.create({
// emailAddress: emailParam,
// })
// .then(async () => {
// await signUp.prepareEmailAddressVerification();
// // set verification to true so we can show the code input
// setVerification(true);
// setTransferLoading(false);
// })
// .catch((err) => {
// setTransferLoading(false);
// if (err.errors[0].code === "form_identifier_exists") {
// toast.error("Sorry, it looks like you have an account. Please use sign in");
// } else {
// console.log("Supress error");
// }
// });
}
};
signUpFromParams();
setTransferLoading(false);
}, []);
const signUpWithCode = async (email: string, password: string) => {
console.log("-------------", email)
if (
isLoading ||
typeof email !== "string"
) {
return null;
}
setIsLoading(true)
try {
await service.post('/api/v1/common/auth-code', {
user_name: email,
email: email,
}).then(function (result: any) {
setIsLoading(false);
console.log("result:", result)
if (result && result.header.code != 0) {
toast.error(result.header.message)
return
}
props.password(password)
toast.success(result.header.message)
props.setVerification(true);
// 自身方法
// localStorage.setItem("data", JSON.stringify(result.data));
// []方法
{ {/* localStorage["name"]="bonly"; */ } }
}).catch((err: any) => {
setIsLoading(false);
console.log(err);
// if (err.errors[0].code === "form_identifier_not_found") {
// props.setAccountNotFound(true);
// props.email(email);
// } else {
// props.setError("Sorry, We couldn't sign you in. Please try again later");
// }
});
} catch (error) {
setIsLoading(false);
console.error(error);
}
};
return (
<FadeInStagger>
{!goPassword ?
<form className="grid gap-2" onSubmit={(e) => {
e.preventDefault();
const regname = new FormData(e.currentTarget).get("regname");
if (
typeof regname !== "string"
) {
return null;
}
console.log("------1", regname)
props.email(regname)
setGoPassword(true)
}}>
<div className="grid gap-4 mb-0">
<div className="flex flex-col items-start gap-2">
<label htmlFor="regname" className="text-xs text-black/50">
{t("mixaccount")}
</label>
<Input
name="regname"
placeholder={t("auth.mixplacehoder")}
type="text"
defaultValue={props.emailValue}
autoCapitalize="none"
autoComplete="on"
autoCorrect="off"
required
className="h-10 text-black duration-500 bg-transparent focus:text-black border-black/20 focus:bg-white focus:border-black rounded hover:bg-white/20 hover:border-black/40 placeholder:black/20 "
/>
</div>
</div>
<button
type="submit"
className="flex items-center justify-center h-10 gap-2 px-4 mt-8 text-sm font-semibold text-white duration-200 bg-black border border-black rounded hover:border-black/30 hover:bg-black/80 hover:text-white"
disabled={isLoading}
>
{/* {isLoading ? <Loading className="w-4 h-4 animate-spin" /> : "Sign Up with Email"} */}
{t("next")}
</button>
</form> : <form className="grid gap-2" onSubmit={async (e) => {
e.preventDefault();
const password = new FormData(e.currentTarget).get("password");
const confirmPassword = new FormData(e.currentTarget).get("confirmPassword");
console.log("------1", props.emailValue, password, confirmPassword)
if (typeof password !== "string" || password != confirmPassword) {
toast.error("two passwords do not match")
return
}
await signUpWithCode(props.emailValue, password)
setGoPassword(false)
}} >
<div className="grid gap-4 mb-4">
<label htmlFor="password" className="text-xs text-black/50">
{t("password")}
</label>
<div className="grid gap-1 relative">
<Input
name="password"
placeholder={t("password")}
type={showPassword ? "text" : "password"}
// defaultValue={props.passwordValue}
autoCapitalize="none"
autoComplete="email"
autoCorrect="off"
required
className="h-10 rounded text-black duration-500 bg-transparent focus:text-black border-black/20 focus:bg-white focus:border-black hover:bg-white/20 hover:border-black/40 placeholder:black/20 "
/>
<Image src={showImage} width={16} alt="show" className="absolute right-4 top-3" onClick={() => {
setShowPassword(!showPassword)
// toast.success('coming soon')
}} />
</div>
</div>
<div className="grid gap-4 mb-4">
<label htmlFor="password" className="text-xs text-black/50">
{t("confirm_password")}
</label>
<div className="grid gap-1 relative">
<Input
name="confirmPassword"
placeholder={t("confirm_password")}
type={showPassword2 ? "text" : "password"}
// defaultValue={props.passwordValue}
autoCapitalize="none"
autoComplete="password"
autoCorrect="off"
required
className="h-10 rounded text-black duration-500 bg-transparent focus:text-black border-black/20 focus:bg-white focus:border-black hover:bg-white/20 hover:border-black/40 placeholder:black/20 "
/>
<Image src={showImage} width={16} alt="show" className="absolute right-4 top-3" onClick={() => {
setShowPassword2(!showPassword2)
// toast.success('coming soon')
}} />
</div>
</div>
<button
type="submit"
className="flex items-center justify-center h-10 gap-2 px-4 mt-8 text-sm font-semibold text-white duration-200 bg-black border border-black rounded hover:border-black/30 hover:bg-black/80 hover:text-white"
disabled={isLoading}
>
{/* {isLoading ? <Loading className="w-4 h-4 animate-spin" /> : "Sign Up with Email"} */}
{isLoading ? <Loading className="w-4 h-4 animate-spin" /> : "Next"}
</button>
</form>}
</FadeInStagger>
);
};

View File

@ -131,7 +131,9 @@ export default async function ChatIndexPage({ params: { locale } }: { params: {
<div className=' '>
<Article />
</div>
<Footer />
{/* </Web3Provider> */}
</>
@ -140,62 +142,3 @@ export default async function ChatIndexPage({ params: { locale } }: { params: {
}
// function ChatIndexPage_bak({ params: { locale } }: { params: { locale: string } }) {
// const session = await auth()
// const avatarUrl = session?.user?.image
// const id = nanoid()
// return (
// <>
// {/* <Web3Provider> */}
// <Header />
// <div className=' '>
// {/* <Chat
// initialMessages={initialMessages}
// id={id}
// showLanding
// avatarUrl={avatarUrl}
// /> */}
// <div className='pt-[3rem] lg:pt-[5rem] pb-[2rem] lg:pb-[3rem] w-11/12 sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-3/5 2xl:w-1/2 mx-auto'>
// <FadeIn className=''>
// {/* <LogoAI
// className='flex text-center m-auto'
// /> */}
// {/* <div className="space-y-4 py-[4rem] w-5/6 lg:w-5/6 xl:w-4/5 2xl:w-3/4 m-auto">
// <ChatModel className='' position='relative lg:w-full' id={id} showLanding avatarUrl={avatarUrl} />
// {/* <PromptFormIndex
// id={id}
// // onSubmit={value => {
// // console.log('--value----', value)
// // // await new Promise(r => setTimeout(r, 300));
// // // await append(
// // // {
// // // id,
// // // content: value,
// // // role: 'user'
// // // },
// // // { functions: functionSchemas }
// // // )
// // }}
// // input={input}
// // setInput={setInput}
// // isLoading={isLoading}
// /> }
// </div> */}
// </FadeIn>
// </div>
// <Article />
// </div>
// <Footer />
// {/* </Web3Provider> */}
// </>
// )
// }

View File

@ -5,6 +5,8 @@
"login": "Login",
"username_placeholder": "John Doe",
"email": "Email",
"regname": "User Name",
"mixaccount": "Phone/Email",
"first_name": "First Name",
"password": "Password",
"confirm_password": "Confirm Password",
@ -27,6 +29,7 @@
"verification_code": "Six-digit verification code",
"send_again": "Send Again",
"email_address": "Email Address",
"mixplacehoder": "Enter your phone number or Email address",
"creat_account": "Creat Account",
"frogot_password": "Frogot password?",
"account_not_found": "Account not found, did you mean to sign up?",
@ -66,7 +69,7 @@
"subscribe_success": "Subscription Successful",
"placeholder_email": "Please provide your e-mail address.",
"manage_subscriptions": "Manage my subscriptions",
"h3": "Lets connect, Stay up to date with all things JellyAI.",
"h3": "Lets connect, Stay up to date with all things Cradle.",
"p_ok": "You have successfully subscribed.",
"p": "By clicking the Subscribe button, you agree to the Privacy Policy."
}

View File

@ -5,6 +5,8 @@
"login": "登录",
"username_placeholder": "李华",
"email": "邮箱",
"regname": "用户名",
"mixaccount": "手机号/邮箱地址",
"first_name": "昵称",
"password": "密码",
"confirm_password": "确认密码",
@ -27,6 +29,7 @@
"verification_code": "六位验证码",
"send_again": "再次发送",
"email_address": "电子邮件地址",
"mixplacehoder": "输入您的手机号或者邮箱地址",
"creat_account": "创建帐户",
"frogot_password": "忘记密码?",
"account_not_found": "未找到帐户,您想注册吗?",
@ -66,7 +69,7 @@
"subscribe_success": "订阅成功",
"placeholder_email": "请提供您的电子邮件地址",
"manage_subscriptions": "管理我的订阅",
"h3": "让我们联系吧! 随时了解 JellyAI 的最新动态.",
"h3": "让我们联系吧! 随时了解 AI摇篮 的最新动态.",
"p_ok": "您已经成功订阅.",
"p": "单击“订阅”按钮即表示您同意隐私政策。"
}