Fix login page (#28)

* added fix * added loading state to all pages
oxygenpay · Aug 17, 2023 · dd7169e · dd7169e
1 parent 1204b51
commit dd7169e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/ui-dashboard/src/app.tsx b/ui-dashboard/src/app.tsx
@@ -98,6 +98,7 @@ const App: React.FC = () => {
     const [user, setUser] = React.useState<User>();
     const [isSupportFormOpen, setIsSupportFormOpen] = React.useState<boolean>(false);
     const [isFormSubmitting, setIsFormSubmitting] = React.useState<boolean>(false);
+    const [isLoading, setIsLoading] = React.useState<boolean>(true);
 
     const loadUserInfo = async () => {
         let newMerchantId = merchantId;
@@ -112,7 +113,11 @@ const App: React.FC = () => {
                         posthog?.reset(true);
                     }
 
-                    navigate("/login");
+                    navigate("/login", {
+                        state: {
+                            isNeedLogout: true
+                        }
+                    });
                 }
             }
         };
@@ -127,7 +132,11 @@ const App: React.FC = () => {
                         posthog?.reset(true);
                     }
 
-                    navigate("/login");
+                    navigate("/login", {
+                        state: {
+                            isNeedLogout: true
+                        }
+                    });
                 }
             }
         };
@@ -154,6 +163,7 @@ const App: React.FC = () => {
             if (!newMerchantId) return;
 
             await getMerchant(newMerchantId);
+            setIsLoading(false);
         };
 
         await getCookie();
@@ -210,7 +220,11 @@ const App: React.FC = () => {
         }
 
         await authProvider.logout();
-        navigate("/login");
+        navigate("/login", {
+            state: {
+                isNeedLogout: true
+            }
+        });
     };
 
     const userMenu: MenuProps["items"] = [
@@ -277,6 +291,7 @@ const App: React.FC = () => {
                                     )}
                                 </RouteContext.Consumer>
                             }
+                            loading={isLoading}
                             actionsRender={() => {
                                 return [
                                     !isManageMerchantsActive ? (

diff --git a/ui-dashboard/src/pages/login-page/login-page.tsx b/ui-dashboard/src/pages/login-page/login-page.tsx
@@ -1,7 +1,8 @@
 import "./login-page.scss";
 
 import * as React from "react";
-import {useNavigate} from "react-router-dom";
+import {AxiosError} from "axios";
+import {useNavigate, useLocation} from "react-router-dom";
 import {Modal, Button, Typography, Form, Input, notification} from "antd";
 import {GoogleOutlined, CheckOutlined} from "@ant-design/icons";
 import logoImg from "/fav/android-chrome-192x192.png";
@@ -15,12 +16,17 @@ import SpinWithMask from "src/components/spin-with-mask/spin-with-mask";
 
 const b = bevis("login-page");
 
+interface LoginState {
+    isNeedLogout: boolean;
+}
+
 const LoginPage: React.FC = () => {
     const [form] = Form.useForm<UserCreateForm>();
     const [api, contextHolder] = notification.useNotification();
     const [isFormSubmitting, setIsFormSubmitting] = React.useState<boolean>(false);
     const [providersList, setProvidersList] = React.useState<AuthProvider[]>([]);
     const navigate = useNavigate();
+    const state: LoginState = useLocation().state;
 
     const openNotification = (title: string, description: string) => {
         api.info({
@@ -60,7 +66,21 @@ const LoginPage: React.FC = () => {
 
     useMount(async () => {
         window.addEventListener("popstate", () => navigate("/login", {replace: true}));
-        localStorage.remove("merchantId");
+
+        if (state?.isNeedLogout) {
+            localStorage.remove("merchantId");
+        } else {
+            try {
+                await authProvider.getCookie();
+                await authProvider.getMe();
+                navigate("/");
+            } catch (e) {
+                if (e instanceof AxiosError && e.response?.status === 401) {
+                    localStorage.remove("merchantId");
+                }
+            }
+        }
+
         const availProviders = await authProvider.getProviders();
         setProvidersList(availProviders ?? []);
     });