JellyAI
/
hts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

This commit is contained in:
hailin 2025-03-15 19:59:15 +08:00
parent 779ea5a08a
commit 2b87e6dc88
4 changed files with 223 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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')

90
apps/blogai/app/[locale]/auth/sign-in/[[...sign-in]]/page_signin_with_email.tsx_ Normal file
View File

@ -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>
);
}

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

@ -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")}
type="email"
placeholder={t("auth.mixplacehoder")}
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 "

123
apps/blogai/app/[locale]/auth/sign-in/mix-signin.tsx Normal file
View File

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