.

apps/blogai/app/[locale]/auth/sign-in/[[...sign-in]]/page.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import * as React from "react";
 import { ErrorBanner, WarnBanner } from "../../banners";
 import { EmailCode } from "../email-code";
-import { EmailSignIn } from "../email-signin";
+import { MixSignIn } from "../mix-signin";
 import { OAuthSignIn } from "../oauth-signin";
 import toast from "react-hot-toast";
 import initTranslations from "@/app/i18n";
@@ -19,7 +19,7 @@ export default function SignInPage({ params: { locale } }: { params: { locale: s
   const [verify, setVerify] = React.useState(false);
   const [accountNotFound, setAccountNotFound] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
-  const [email, setEmail] = React.useState("");
+  const [username, setUsername] = React.useState("");
   const [password, setPassword] = React.useState("");
 
   return (
@@ -31,12 +31,12 @@ export default function SignInPage({ params: { locale } }: { params: { locale: s
 
             <Link href={`/auth/sign-up?email=${encodeURIComponent(email)}`}>
               <div className="border text-center text-xs border-transparent hover:border-[#FFD55D]/50  text-[#FFD55D]  duration-200  p-1 rounded-lg ">
-                {/* <MoveRight className="w-4 h-4" /> */}
               </div>
             </Link>
           </div>
         </WarnBanner>
       ) : null}
+
       {error ? <ErrorBanner>{error}</ErrorBanner> : null}
 
       {verify ? (
@@ -50,22 +50,16 @@ export default function SignInPage({ params: { locale } }: { params: { locale: s
           </div>
           <div className="grid w-full gap-6">
             <div className="w-full">
-              <EmailSignIn
+              <MixSignIn
                 setError={setError}
                 verification={setVerify}
                 setAccountNotFound={setAccountNotFound}
-                email={setEmail}
+                username={setUsername}
                 // password={setPassword}
-                emailValue={email}
+                usernameValue={username}
                 passwordValue={password}
               />
               <p className="mt-4 text-left text-sm text-md text-black/50 ">
-                {/* <Link href="/auth/sign-up" className="ml-2 underline text-black hover:underline" onClick={(e) => {
-                  e.preventDefault();
-                  toast.success('coming soon')
-                }}>
-                  {t("auth.change_your_password")}
-                </Link> */}
                 <Link href="/auth/sign-up" className="ml-2 underline text-black hover:underline" onClick={(e) => {
                   e.preventDefault();
                   toast.success('coming soon')

apps/blogai/app/[locale]/auth/sign-in/[[...sign-in]]/page_signin_with_email.tsx_

@@ -0,0 +1,90 @@
+"use client";
+
+import { FadeIn } from "@/components/landing/fade-in";
+import Link from "next/link";
+import * as React from "react";
+import { ErrorBanner, WarnBanner } from "../../banners";
+import { EmailCode } from "../email-code";
+import { EmailSignIn } from "../email-signin";
+import { OAuthSignIn } from "../oauth-signin";
+import toast from "react-hot-toast";
+import initTranslations from "@/app/i18n";
+import { useTranslation } from "react-i18next";
+
+
+export default function SignInPage({ params: { locale } }: { params: { locale: string } }) {
+
+  const { t } = useTranslation();
+
+  const [verify, setVerify] = React.useState(false);
+  const [accountNotFound, setAccountNotFound] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+
+  return (
+    <div className="flex flex-col gap-10">
+      {accountNotFound ? (
+        <WarnBanner>
+          <div className="flex items-center justify-between w-full gap-2">
+            <p className="text-xs">{t("auth.account_not_found")}</p>
+
+            <Link href={`/auth/sign-up?email=${encodeURIComponent(email)}`}>
+              <div className="border text-center text-xs border-transparent hover:border-[#FFD55D]/50  text-[#FFD55D]  duration-200  p-1 rounded-lg ">
+              </div>
+            </Link>
+          </div>
+        </WarnBanner>
+      ) : null}
+      
+      {error ? <ErrorBanner>{error}</ErrorBanner> : null}
+
+      {verify ? (
+        <FadeIn>
+          <EmailCode setError={setError} />
+        </FadeIn>
+      ) : (
+        <>
+          <div className="flex flex-col ">
+            <h1 className="text-4xl text-black">{t("login")}</h1>
+          </div>
+          <div className="grid w-full gap-6">
+            <div className="w-full">
+              <EmailSignIn
+                setError={setError}
+                verification={setVerify}
+                setAccountNotFound={setAccountNotFound}
+                email={setEmail}
+                // password={setPassword}
+                emailValue={email}
+                passwordValue={password}
+              />
+              <p className="mt-4 text-left text-sm text-md text-black/50 ">
+                <Link href="/auth/sign-up" className="ml-2 underline text-black hover:underline" onClick={(e) => {
+                  e.preventDefault();
+                  toast.success('coming soon')
+                }}>
+                {t("auth.frogot_password")}
+                </Link>
+              </p>
+            </div>
+
+           {/* <OAuthSignIn /> */}
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <span className="w-full border-t border-black/20" />
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span className="px-4 bg-white text-black/90"> {t("auth.or")} </span>
+              </div>
+            </div>
+
+            <Link href="/auth/sign-up" className="h-10 leading-10 ml-2 text-center border border-black text-black ">
+              {t("auth.creat_account")}
+            </Link>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

apps/blogai/app/[locale]/auth/sign-in/email-signin.tsx

@@ -23,7 +23,6 @@ export function EmailSignIn(props: {
   emailValue: string;
   passwordValue: string;
 }) {
-  // const { signIn, isLoaded: signInLoaded, setActive } = useSignIn();
   const param = "__clerk_ticket";
   const [isLoading, setIsLoading] = React.useState(false);
   const [showPassword, setShowPassword] = React.useState(false);
@@ -34,37 +33,14 @@ export function EmailSignIn(props: {
   React.useEffect(() => {
     const signUpOrgUser = async () => {
       const ticket = new URL(window.location.href).searchParams.get(param);
-      // if (!signInLoaded) {
-      //   return;
-      // }
       if (!ticket) {
         return;
       }
       setIsLoading(true);
-      // await signIn
-      //   .create({
-      //     strategy: "ticket",
-      //     ticket,
-      //   })
-      //   .then((result) => {
-      //     if (result.status === "complete" && result.createdSessionId) {
-      //       setActive({ session: result.createdSessionId }).then(() => {
-      //         router.push("/app");
-      //       });
-      //     }
-      //   })
-      //   .catch((err) => {
-      //     setIsLoading(false);
-      //     console.error(err);
-      //   });
-
-
     };
     signUpOrgUser();
   }, []);
 
-
-
   const signInWithCode = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const email = new FormData(e.currentTarget).get("email");
@@ -72,42 +48,8 @@ export function EmailSignIn(props: {
     if (isLoading || typeof email !== "string" || typeof password !== "string") {
       return null;
     }
-
-
     console.log(email, password, (md5(password)))
-    // d41d8cd98f00b204e9800998ecf8427e
     setIsLoading(true);
-    // await signIn
-    //   .create({
-    //     identifier: email,
-    //   })
-    //   .then(async () => {
-    //     const firstFactor = signIn.supportedFirstFactors.find((f) => f.strategy === "email_code") as
-    //       | { emailAddressId: string }
-    //       | undefined;
-
-    //     if (firstFactor) {
-    //       await signIn.prepareFirstFactor({
-    //         strategy: "email_code",
-    //         emailAddressId: firstFactor.emailAddressId,
-    //       });
-
-    //       setIsLoading(false);
-    //       props.verification(true);
-    //     }
-    //   })
-    //   .catch((err) => {
-    //     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");
-    //     }
-    //   });
-
-    // console.log(process.env.NEXT_PUBLIC_CLIENT_BASE_URL)
 
     await service.post('/api/v1/customer/login', {
       user_name: email,
@@ -126,19 +68,11 @@ export function EmailSignIn(props: {
       localStorage.setItem("UserData", JSON.stringify(result.data));
       // []方法
       { {/* localStorage["name"]="bonly"; */ } }
-
-      // router.push("/");
       window.location.href = `/`
 
     }).catch((err) => {
       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");
-      // }
     });
   };
   return (
@@ -147,11 +81,11 @@ export function EmailSignIn(props: {
         <div className="grid gap-1">
           <Input
             name="email"
-            placeholder={t("auth.email_address")}
+            placeholder={t("auth.mixplacehoder")}
-            type="email"
+            type="text"
             defaultValue={props.emailValue}
             autoCapitalize="none"
-            autoComplete="email"
+            autoComplete="off"
             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 "
@@ -164,7 +98,7 @@ export function EmailSignIn(props: {
             type={showPassword ? "text" : "password"}
             defaultValue={props.passwordValue}
             autoCapitalize="none"
-            autoComplete="email"
+            autoComplete="off"
             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 "

apps/blogai/app/[locale]/auth/sign-in/mix-signin.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { Loading } from "@/components/ui/loading";
+import { Input } from "@/components/ui/input";
+// import { useSignIn } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+
+import Image from 'next/image';
+import showImage from '@/components/images/show.png';
+import toast from "react-hot-toast";
+import md5 from "md5";
+
+
+import service from '@/lib/http/service';
+import { useTranslation } from "react-i18next";
+
+export function MixSignIn(props: {
+  setError: (err: string) => void;
+  verification: (value: boolean) => void;
+  setAccountNotFound: (value: boolean) => void;
+  username: (value: string) => void;
+  usernameValue: string;
+  passwordValue: string;
+}) {
+  const param = "__clerk_ticket";
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const { t } = useTranslation();
+
+  const router = useRouter();
+  React.useEffect(() => {
+    const signUpOrgUser = async () => {
+      const ticket = new URL(window.location.href).searchParams.get(param);
+      if (!ticket) {
+        return;
+      }
+      setIsLoading(true);
+    };
+    signUpOrgUser();
+  }, []);
+
+  const signInWithCode = async (e: React.FormEvent<HTMLFormElement>) => {
+
+    e.preventDefault();
+    const user = new FormData(e.currentTarget).get("username");
+    const password = new FormData(e.currentTarget).get("password");
+    if (isLoading || typeof user !== "string" || typeof password !== "string") {
+      return null;
+    }
+
+    console.log("--username:", user, "--password:", password, "--md5 password:", (md5(password)))
+    setIsLoading(true);
+
+    await service.post('/api/v1/customer/login', {
+      user_name: email,
+      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
+      }
+
+      localStorage.setItem("UserData", JSON.stringify(result.data));
+      // []方法
+      { {/* localStorage["name"]="bonly"; */ } }
+      window.location.href = `/`
+
+    }).catch((err) => {
+      setIsLoading(false);
+      console.log(err);
+    });
+  };
+  return (
+    <>
+      <form className="grid gap-2" onSubmit={signInWithCode}>
+        <div className="grid gap-1">
+          <Input
+            name="username"
+            placeholder={t("auth.mixplacehoder")}
+            type="text"
+            defaultValue={props.usernameValue}
+            autoCapitalize="none"
+            autoComplete="off"
+            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 "
+          />
+        </div>
+        <div className="grid gap-1 relative">
+          <Input
+            name="password"
+            placeholder={t("password")}
+            type={showPassword ? "text" : "password"}
+            defaultValue={props.passwordValue}
+            autoCapitalize="none"
+            autoComplete="off"
+            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>
+        <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-black rounded hover:border-black/80 hover:bg-black/80 hover:text-white"
+          disabled={isLoading}
+        >
+          {isLoading ? <Loading className="w-4 h-4 animate-spin" /> : t("auth.sign_in")}
+        </button>
+      </form>
+    </>
+  );
+}