From 5962dd2e6a54abe9e2c62baea35540b346b106a3 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Thu, 29 Feb 2024 23:12:49 +0800
Subject: [PATCH] :sparkles: Sign out :bug: Fix infinite reload

---
 pkg/views/src/main.tsx                |  1 +
 pkg/views/src/pages/auth/sign-out.tsx | 50 +++++++++++++++++++++++++++
 pkg/views/src/stores/userinfo.tsx     |  3 +-
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 pkg/views/src/pages/auth/sign-out.tsx

diff --git a/pkg/views/src/main.tsx b/pkg/views/src/main.tsx
index 0ded012..4d8c499 100644
--- a/pkg/views/src/main.tsx
+++ b/pkg/views/src/main.tsx
@@ -64,6 +64,7 @@ const router = createBrowserRouter([
     children: [
       { path: "/auth/sign-up", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/sign-up.tsx") },
       { path: "/auth/sign-in", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/sign-in.tsx") },
+      { path: "/auth/sign-out", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/sign-out.tsx") },
       { path: "/auth/o/connect", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/connect.tsx") }
     ]
   }
diff --git a/pkg/views/src/pages/auth/sign-out.tsx b/pkg/views/src/pages/auth/sign-out.tsx
new file mode 100644
index 0000000..6c37a8d
--- /dev/null
+++ b/pkg/views/src/pages/auth/sign-out.tsx
@@ -0,0 +1,50 @@
+import { Avatar, Button, Card, CardContent, Typography } from "@mui/material";
+import { useUserinfo } from "@/stores/userinfo.tsx";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { useNavigate } from "react-router-dom";
+
+export function Component() {
+  const { clearUserinfo } = useUserinfo();
+
+  const navigate = useNavigate();
+
+  async function signout() {
+    clearUserinfo();
+    navigate("/");
+  }
+
+  return (
+    <>
+      <Card variant="outlined">
+        <CardContent
+          style={{ padding: "40px 48px 36px" }}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center"
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+            <LogoutIcon />
+          </Avatar>
+
+          <Typography gutterBottom variant="h5" component="h1">Sign out</Typography>
+          <Typography variant="body1">
+            Sign out will clear your data on this device. Also will affected those use union identification services.
+            You need sign in again get access them.
+          </Typography>
+
+          <Button
+            fullWidth
+            variant="contained"
+            color="secondary"
+            sx={{ mt: 3 }}
+            onClick={() => signout()}
+          >
+            Sign out
+          </Button>
+        </CardContent>
+      </Card>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/pkg/views/src/stores/userinfo.tsx b/pkg/views/src/stores/userinfo.tsx
index 4f70622..4b7aa5c 100644
--- a/pkg/views/src/stores/userinfo.tsx
+++ b/pkg/views/src/stores/userinfo.tsx
@@ -42,8 +42,7 @@ export function UserinfoProvider(props: any) {
     });
 
     if (res.status !== 200) {
-      clearUserinfo();
-      window.location.reload();
+      return;
     }
 
     const data = await res.json();