276 lines
9.0 KiB
TypeScript
276 lines
9.0 KiB
TypeScript
"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";
|
|
import md5 from "md5";
|
|
|
|
export function MixSignUp(props: {
|
|
setError: (e: string | null) => void;
|
|
setVerification: (b: boolean) => void;
|
|
|
|
email: (value: string) => void;
|
|
password: (value: string) => void;
|
|
referrer: (value: string) => void;
|
|
emailValue: string;
|
|
passwordValue: string;
|
|
referrerValue: 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 signUpWithOutCode = async (username: string, password: string, referrer: string) => {
|
|
|
|
console.log("--username:", username, "--password:", password, "--referrer", referrer);
|
|
|
|
if (
|
|
isLoading ||
|
|
typeof username !== "string"
|
|
) {
|
|
return null;
|
|
}
|
|
setIsLoading(true)
|
|
|
|
await service.post('/api/v1/customer/uregister', {
|
|
user_name: username,
|
|
Referral: referrer,
|
|
password: md5(password),
|
|
}).then(function (result: any) {
|
|
setIsLoading(false);
|
|
console.log("result:", result)
|
|
|
|
if (result && result.header.code != 0) {
|
|
|
|
toast.error(result.header.message)
|
|
return
|
|
}
|
|
|
|
toast.success(result.header.message)
|
|
|
|
router.push("/auth/sign-in");
|
|
// 自身方法
|
|
// localStorage.setItem("data", JSON.stringify(result.data));
|
|
// []方法
|
|
{ {/* localStorage["name"]="bonly"; */ } }
|
|
|
|
}).catch((err: any) => {
|
|
setIsLoading(false);
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
return (
|
|
<FadeInStagger>
|
|
{!goPassword ?
|
|
<form className="grid gap-2" onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const regname = new FormData(e.currentTarget).get("regname");
|
|
const refer = new FormData(e.currentTarget).get("referreredit")
|
|
|
|
if (
|
|
typeof regname !== "string"
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
console.log("--regname:", regname, "--referrer:", refer)
|
|
props.email(regname)
|
|
props.referrer(refer)
|
|
|
|
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 "
|
|
/>
|
|
|
|
<label htmlFor="referreredit" className="text-xs text-black/50">
|
|
{t("refcode")}
|
|
</label>
|
|
|
|
<Input
|
|
name="referreredit"
|
|
placeholder={t("auth.referrerplaceholder")}
|
|
type="text"
|
|
defaultValue={props.emailValue}
|
|
autoCapitalize="none"
|
|
autoComplete="on"
|
|
autoCorrect="off"
|
|
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}
|
|
>
|
|
{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("The two passwords you entered do not match.")
|
|
return
|
|
}
|
|
|
|
await signUpWithOutCode(props.emailValue, password, props.referrer)
|
|
|
|
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"}
|
|
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)
|
|
}} />
|
|
</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"}
|
|
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)
|
|
}} />
|
|
</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" /> : "Next"}
|
|
</button>
|
|
|
|
</form>}
|
|
|
|
</FadeInStagger>
|
|
);
|
|
};
|