feat: Oauth update

This commit is contained in:
landaiqing
2024-05-27 00:00:57 +08:00
parent 7f68128b5e
commit e564264c4d
10 changed files with 340 additions and 305 deletions

View File

@@ -1,7 +1,7 @@
/** @format */
import { useNavigate } from "react-router-dom";
// import "./index.less";
import "./index.less";
import { useEffect } from "react";
export default () => {
@@ -17,155 +17,153 @@ export default () => {
}, []);
return (
<>
<body translate="no">
<div className="container container-star">
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="container container-star">
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-1"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
<div className="star-2"></div>
</div>
<div className="container container-bird">
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
</div>
<div className="container container-bird">
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
<div className="bird bird-anim">
<div className="bird-container">
<div className="wing wing-left">
<div className="wing-left-top"></div>
</div>
<div className="wing wing-right">
<div className="wing-right-top"></div>
</div>
</div>
</div>
<div className="container-title">
<div className="title">
<div className="number">4</div>
<div className="moon">
<div className="face">
<div className="mouth"></div>
<div className="eyes">
<div className="eye-left"></div>
<div className="eye-right"></div>
</div>
</div>
<div className="container-title">
<div className="title">
<div className="number">4</div>
<div className="moon">
<div className="face">
<div className="mouth"></div>
<div className="eyes">
<div className="eye-left"></div>
<div className="eye-right"></div>
</div>
</div>
<div className="number">4</div>
</div>
<div className="subtitle">Oops. Looks like you took a wrong turn.</div>
<button
style={{
marginTop: "1.5em",
}}
onClick={goBack}>
Go back
</button>
<div className="number">4</div>
</div>
<div className="subtitle">Oops. Looks like you took a wrong turn.</div>
<button
style={{
marginTop: "1.5em",
}}
onClick={goBack}>
Go back
</button>
</div>
</body>
</div>
</>
);
};

View File

@@ -1,10 +1,8 @@
/** @format */
import { useEffect } from "react";
import MainContainer from "@/components/Home/main-container/MainContainer.tsx";
export default () => {
useEffect(() => {}, []);
return (
<div>
<MainContainer />

View File

@@ -20,6 +20,7 @@ import { observer } from "mobx-react";
import FooterComponent from "@/components/Footer";
import RotateCaptcha, { CaptchaInstance } from "react-rotate-captcha";
import { get, load, verify } from "@/api/captcha/index.ts";
import { oauthLogin } from "@/api/user";
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = "account" | "phone";
@@ -53,6 +54,12 @@ export default observer(() => {
key: "phone",
},
];
async function oAuthLogin(type: string) {
const res: any = await oauthLogin(type);
window.location.href = res.data;
}
const [loginType, setLoginType] = useState<LoginType>("account");
const onSubmit = async (formData: object) => {
@@ -359,6 +366,9 @@ export default observer(() => {
borderRadius: "50%",
}}>
<GitlabOutlined
onClick={() => {
oAuthLogin("GITEE").then();
}}
style={{ ...iconStyles, color: "#FF6A10" }}
/>
</div>