From 457b5e4f2fd947e73146d95a386e8dc34a2d92dd Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Tue, 26 Apr 2022 11:32:12 +0800
Subject: [PATCH] feat: oauth page

---
 src/routes/index.js        |  9 +++++
 src/routes/oauth/index.js  | 61 +++++++++++++++++++++++++++++++
 src/routes/oauth/styled.js | 75 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 src/routes/oauth/index.js
 create mode 100644 src/routes/oauth/styled.js

diff --git a/src/routes/index.js b/src/routes/index.js
index fa2a04a4..7b74fa1e 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -3,6 +3,7 @@ import { Route, Routes, HashRouter } from "react-router-dom";
 import { Provider, useSelector } from "react-redux";
 // import Welcome from './Welcome'
 import NotFoundPage from "./404";
+import OAuthPage from "./oauth";
 import LoginPage from "./login";
 import HomePage from "./home";
 import ChatPage from "./chat";
@@ -38,6 +39,14 @@ const PageRoutes = () => {
   return (
     <HashRouter>
       <Routes>
+        <Route
+          path="/oauth/:token"
+          element={
+            <RequireNoAuth>
+              <OAuthPage />
+            </RequireNoAuth>
+          }
+        />
         <Route
           path="/login"
           element={
diff --git a/src/routes/oauth/index.js b/src/routes/oauth/index.js
new file mode 100644
index 00000000..cce5fccf
--- /dev/null
+++ b/src/routes/oauth/index.js
@@ -0,0 +1,61 @@
+import { useState, useEffect } from "react";
+import { useDispatch } from "react-redux";
+
+import StyledWrapper from "./styled";
+import { useNavigate, useParams } from "react-router-dom";
+import { useLoginMutation } from "../../app/services/auth";
+import toast from "react-hot-toast";
+import { setAuthData } from "../../app/slices/auth.data";
+
+// import BASE_URL from "../../app/config";
+// import { useCheckInviteTokenValidMutation } from "../../app/services/auth";
+
+export default function OAuthPage() {
+  const [
+    login,
+    { data, isSuccess, isError, error: loginError },
+  ] = useLoginMutation();
+  const { token } = useParams();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const dispatch = useDispatch();
+  // const [token, setToken] = useState("");
+  // const [valid, setValid] = useState(false);
+  // const [sp] = useSearchParams();
+  const navigateTo = useNavigate();
+  useEffect(() => {
+    const startOauth = () => {
+      if (!token) {
+        setError("Token Not Found");
+        return;
+      }
+      login({ key: token, type: "thirdparty" });
+    };
+    setTimeout(() => {
+      startOauth();
+    }, 1500);
+  }, [token]);
+  useEffect(() => {
+    if (isError) {
+      setError(loginError);
+    }
+  }, [isError, loginError]);
+
+  useEffect(() => {
+    if (isSuccess && data) {
+      setLoading(false);
+      // 更新本地认证信息
+      console.log("login data", data);
+      toast.success("login success");
+      dispatch(setAuthData(data));
+      navigateTo("/");
+    }
+  }, [isSuccess, data]);
+
+  return (
+    <StyledWrapper>
+      {loading ? "loading" : ""}
+      {error}
+    </StyledWrapper>
+  );
+}
diff --git a/src/routes/oauth/styled.js b/src/routes/oauth/styled.js
new file mode 100644
index 00000000..e31c9563
--- /dev/null
+++ b/src/routes/oauth/styled.js
@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+const StyledWrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ .form {
+  padding: 36px 40px 32px 40px;
+  /* border: 1px solid #eee; */
+  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  border-radius: 12px;
+  .tips {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   padding-bottom: 24px;
+   .logo {
+    width: 56px;
+    height: 56px;
+    margin-bottom: 28px;
+   }
+   .title {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+    color: #101828;
+    margin-bottom: 8px;
+   }
+  }
+  .desc {
+   font-weight: normal;
+   font-size: 16px;
+   line-height: 24px;
+   color: #667085;
+  }
+  form {
+   display: flex;
+   flex-direction: column;
+   gap: 20px;
+   input {
+    width: 360px;
+    background: #ffffff;
+    border: 1px solid #d0d5dd;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+    border-radius: 8px;
+    padding: 10px 14px;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 24px;
+    color: #667085;
+   }
+  }
+  .btn {
+   display: inline-block;
+   text-align: center;
+   width: 100%;
+   font-weight: 500;
+   font-size: 16px;
+   line-height: 24px;
+   color: #ffffff;
+   padding: 10px;
+   background: #1fe1f9;
+   border: 1px solid #1fe1f9;
+   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+   border-radius: 8px;
+   &.google {
+    color: #344054;
+    border-color: #d0d5dd;
+    background: none;
+   }
+  }
+ }
+`;
+
+export default StyledWrapper;