✨ Sign out

🐛 Fix infinite reload

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") }
     ]
   }

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>
+    </>
+  );
+}

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();