封装OAuth2授权回调页面

web/src/App.js

@@ -10,7 +10,6 @@ import Setting from './pages/Setting';
 import EditUser from './pages/User/EditUser';
 import { getLogo, getSystemName } from './helpers';
 import PasswordResetForm from './components/PasswordResetForm';
-import GitHubOAuth from './components/GitHubOAuth';
 import PasswordResetConfirm from './components/PasswordResetConfirm';
 import { UserContext } from './context/User';
 import Channel from './pages/Channel';
@@ -26,7 +25,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';
+import OAuth2Callback from "./components/OAuth2Callback.js";
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
@@ -178,7 +177,7 @@ function App() {
           path='/oauth/github'
           element={
             <Suspense fallback={<Loading></Loading>}>
-              <GitHubOAuth />
+              <OAuth2Callback type='github'></OAuth2Callback>
             </Suspense>
           }
         />
@@ -186,7 +185,7 @@ function App() {
           path='/oauth/linuxdo'
           element={
             <Suspense fallback={<Loading></Loading>}>
-              <LinuxDoOAuth />
+                <OAuth2Callback type='linuxdo'></OAuth2Callback>
             </Suspense>
           }
         />

web/src/components/GitHubOAuth.js

@@ -1,61 +0,0 @@
-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 GitHubOAuth = () => {
-  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/github?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 GitHubOAuth;

web/src/components/LinuxDoOAuth.js

@@ -1,61 +0,0 @@
-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;

web/src/components/OAuth2Callback.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 OAuth2Callback = (props) => {
+    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/${props.type}?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 OAuth2Callback;