From 85b90e89e6c64de0bb5d7decb4ba5990992f69d1 Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Mon, 11 Nov 2024 17:24:57 +0800
Subject: [PATCH] fix: LinuxDo OAuth

---
 web/src/App.js                     |  9 +++++
 web/src/components/LinuxDoOAuth.js | 61 ++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 web/src/components/LinuxDoOAuth.js

diff --git a/web/src/App.js b/web/src/App.js
index 3e75e25..04f8b03 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -26,6 +26,7 @@ import Midjourney from './pages/Midjourney';
 import Pricing from './pages/Pricing/index.js';
 import Task from "./pages/Task/index.js";
 import Playground from './components/Playground.js';
+import LinuxDoOAuth from './components/LinuxDoOAuth.js';
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
@@ -181,6 +182,14 @@ function App() {
             </Suspense>
           }
         />
+        <Route
+          path='/oauth/linuxdo'
+          element={
+            <Suspense fallback={<Loading></Loading>}>
+              <LinuxDoOAuth />
+            </Suspense>
+          }
+        />
         <Route
           path='/setting'
           element={
diff --git a/web/src/components/LinuxDoOAuth.js b/web/src/components/LinuxDoOAuth.js
new file mode 100644
index 0000000..f6e9f97
--- /dev/null
+++ b/web/src/components/LinuxDoOAuth.js
@@ -0,0 +1,61 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { API, showError, showSuccess, updateAPI } from '../helpers';
+import { UserContext } from '../context/User';
+import { setUserData } from '../helpers/data.js';
+
+const LinuxDoOAuth = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [userState, userDispatch] = useContext(UserContext);
+  const [prompt, setPrompt] = useState('处理中...');
+  const [processing, setProcessing] = useState(true);
+
+  let navigate = useNavigate();
+
+  const sendCode = async (code, state, count) => {
+    const res = await API.get(`/api/oauth/linuxdo?code=${code}&state=${state}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (message === 'bind') {
+        showSuccess('绑定成功！');
+        navigate('/setting');
+      } else {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        setUserData(data);
+        updateAPI()
+        showSuccess('登录成功！');
+        navigate('/token');
+      }
+    } else {
+      showError(message);
+      if (count === 0) {
+        setPrompt(`操作失败，重定向至登录界面中...`);
+        navigate('/setting'); // in case this is failed to bind GitHub
+        return;
+      }
+      count++;
+      setPrompt(`出现错误，第 ${count} 次重试中...`);
+      await new Promise((resolve) => setTimeout(resolve, count * 2000));
+      await sendCode(code, state, count);
+    }
+  };
+
+  useEffect(() => {
+    let code = searchParams.get('code');
+    let state = searchParams.get('state');
+    sendCode(code, state, 0).then();
+  }, []);
+
+  return (
+    <Segment style={{ minHeight: '300px' }}>
+      <Dimmer active inverted>
+        <Loader size='large'>{prompt}</Loader>
+      </Dimmer>
+    </Segment>
+  );
+};
+
+export default LinuxDoOAuth;