diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/settings/Login.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/settings/Login.tsx
index 6daceadb61..d5ecc4bc0c 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/settings/Login.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/settings/Login.tsx
@@ -1,7 +1,7 @@
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
-import { LoginButtonGroup } from '$app/components/_shared/login';
+import { LoginButtonGroup } from '$app/components/auth/LoginButtonGroup';
export const Login = ({ onBack }: { onBack?: () => void }) => {
const { t } = useTranslation();
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/settings/SettingsDialog.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/settings/SettingsDialog.tsx
index 72f2fddb49..9d2f02de1a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/settings/SettingsDialog.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/settings/SettingsDialog.tsx
@@ -4,7 +4,7 @@
import Dialog, { DialogProps } from '@mui/material/Dialog';
import { Settings } from '$app/components/settings/Settings';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
import DialogTitle from '@mui/material/DialogTitle';
import { IconButton } from '@mui/material';
import { ReactComponent as CloseIcon } from '$app/assets/close.svg';
@@ -14,10 +14,15 @@ import { SettingsRoutes } from '$app/components/settings/workplace/const';
import DialogContent from '@mui/material/DialogContent';
import { Login } from '$app/components/settings/Login';
import SwipeableViews from 'react-swipeable-views';
+import { useAppDispatch, useAppSelector } from '$app/stores/store';
+import { currentUserActions, LoginState } from '$app_reducers/current-user/slice';
+import { useNavigate } from 'react-router-dom';
export const SettingsDialog = (props: DialogProps) => {
+ const dispatch = useAppDispatch();
const [routes, setRoutes] = useState
([]);
-
+ const loginState = useAppSelector((state) => state.currentUser.loginState);
+ const lastLoginStateRef = useRef(loginState);
const { t } = useTranslation();
const handleForward = useCallback((route: SettingsRoutes) => {
setRoutes((prev) => {
@@ -29,14 +34,28 @@ export const SettingsDialog = (props: DialogProps) => {
setRoutes((prevState) => {
return prevState.slice(0, -1);
});
- }, []);
+ dispatch(currentUserActions.resetLoginState());
+ }, [dispatch]);
- const handleClose = () => {
+ const handleClose = useCallback(() => {
+ dispatch(currentUserActions.resetLoginState());
props?.onClose?.({}, 'backdropClick');
- };
+ }, [dispatch, props]);
const currentRoute = routes[routes.length - 1];
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (lastLoginStateRef.current === LoginState.Loading && loginState === LoginState.Success) {
+ navigate('/');
+ handleClose();
+ return;
+ }
+
+ lastLoginStateRef.current = loginState;
+ }, [loginState, handleClose, navigate]);
+
return (