hts/apps/migrant/app/[locale]/auth/sign-up/email-code.tsx

"use client";

// import { useSignUp } from "@clerk/nextjs";
import { useRouter } from "next/navigation";
import * as React from "react";

import { Loading } from "@/components/ui/loading";
import { toast } from "@/components/ui/toaster";
import { cn } from "@/lib/utils";
import { OTPInput, SlotProps } from "input-otp";
import service from "@/lib/http/service";
import md5 from "md5";
import { useTranslation } from "react-i18next";
// import { Minus } from "lucide-react";

type Props = {
  setError: (e: string) => void;
  emailValue: string;
  passwordValue: string;
};

export const EmailCode: React.FC<Props> = ({ setError, emailValue, passwordValue }) => {
  const router = useRouter();
  const { t } = useTranslation();
  // const { signUp, isLoaded: signUpLoaded, setActive } = useSignUp();

  const [isLoading, setIsLoading] = React.useState(false);
  const [_timeLeft, _setTimeLeft] = React.useState(0);

  const verifyCode = async (otp: string) => {
    // if (!signUpLoaded || typeof otp !== "string") {
    //   return null;
    // }

    console.log("verifyCode", otp, passwordValue,
      // typeof passwordValue, md5(passwordValue), passwordValue === '123456'
    )
    setIsLoading(true);
    // await signUp
    //   .attemptEmailAddressVerification({
    //     code: otp,
    //   })
    //   .then((result) => {
    //     if (result.status === "complete" && result.createdSessionId) {
    //       setActive({ session: result.createdSessionId }).then(() => {
    //         router.push("/new");
    //       });
    //     }
    //   })
    //   .catch((err) => {
    //     setIsLoading(false);
    //     setError(err.errors.at(0)?.longMessage ?? "Unknown error, pleae contact support@unkey.dev");
    //   });

    // debug
    // otp = "88888888"

    await service.post('/api/v1/customer/register', {
      user_name: emailValue,
      email: emailValue,
      password: md5(passwordValue),
      reg_code: otp,

    }).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");



    }).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");
      // }
    });
  };

  const resendCode = async () => {
    console.log("resendCode", emailValue)
    try {
      await service.post('/api/v1/common/auth-code', {
        user_name: emailValue,
        email: emailValue,

      }).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)


        // 自身方法
        // 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);
      setError((error as Error).message);
      console.error(error);
    }
  };

  const [otp, setOtp] = React.useState("");

  return (
    <div className="flex flex-col max-w-sm mx-auto text-left">
      <h1 className="text-4xl text-transparent bg-clip-text bg-gradient-to-r from-black to-black mb-10">
        {t("auth.sign_up")}
      </h1>
      <p className="mb-1 text-sm text-[#666666]">
        {t("auth.verification_code")}
      </p>

      <form className="flex flex-col gap-12 mb-2" onSubmit={() => verifyCode(otp)}>
        <OTPInput
          data-1p-ignore
          value={otp}
          onChange={setOtp}
          onComplete={() => verifyCode(otp)}
          maxLength={6}
          render={({ slots }) => (
            <div className="flex items-center justify-between">
              {slots.slice(0, 3).map((slot, idx) => (
                // biome-ignore lint/suspicious/noArrayIndexKey: I have nothing better
                <Slot key={idx} {...slot} />
              ))}
              {/* <Minus className="w-6 h-6 text-white/15" /> */}
              {slots.slice(3).map((slot, idx) => (
                // biome-ignore lint/suspicious/noArrayIndexKey: I have nothing better
                <Slot key={idx} {...slot} />
              ))}
            </div>
          )}
        />

        {/* <button
          type="submit"
          className="flex items-center justify-center h-10 gap-2 px-4 text-sm font-semibold text-white duration-200 bg-black border border-white rounded-lg hover:border-black/30 hover:bg-black hover:text-black"
          disabled={isLoading}
          onClick={() => verifyCode(otp)}
        >
          {isLoading ? <Loading className="w-4 h-4 mr-2 animate-spin" /> : null}
          Continue
        </button> */}
      </form>

      <p className="mt-2 text-sm text-right text-black/40">
        <button type="button" className=" text-black underline" onClick={resendCode}>
          {t("auth.send_again")}
        </button>
      </p>
    </div>
  );
};

const Slot: React.FC<SlotProps> = (props) => (
  <div
    // text-[2rem]
    className={cn(
      "relative w-12 h-12  border border-black/20 rounded text-black font-light text-base",
      "flex items-center justify-center",
      "transition-all duration-300",
      "group-hover:border-black/50 group-focus-within:border-black/50",
      "outline outline-0 outline-black",
      { "outline-1 ": props.isActive },
    )}
  >
    {props.char !== null && <div>{props.char}</div>}
  </div>
);