feat: proper redirect handling

web/src/pages/Agreement/index.tsx

@@ -1,12 +1,13 @@
 import { type FC } from "react";
 
 import { Card, CardContent } from "@/components/ui/card";
-import { ArrowLeftRight } from "lucide-react";
+import { ArrowLeftRight, ChevronDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import Avatar from "@/feature/Avatar";
 import { useAuth } from "@/store/auth";
 
 const AgreementPage: FC = () => {
-  const profile = useAuth((state) => state.profile);
+  const promptAccountSelection = useAuth((state) => state.deleteActiveAccount);
 
   return (
     <div
@@ -22,16 +23,8 @@ const AgreementPage: FC = () => {
                 className="w-16 h-16 mb-4 mt-2 sm:mt-6"
               /> */}
               <div className="flex flex-row items-center gap-4 mt-2 mb-4 sm:mt-6">
-                <div className="w-12 h-12 overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500">
-                  {/* <User size={32} /> */}
-                  <img
-                    src={profile?.profile_picture?.toString()}
-                    className="w-full h-full flex-1 object-cover"
-                    alt="profile"
-                  />
-                </div>
+                <Avatar iconSize={32} className="w-12 h-12" />
                 <div className="text-gray-400 dark:text-gray-600">
-                  {/* <Activity /> */}
                   <ArrowLeftRight />
                 </div>
                 <div className="p-2 rounded-full bg-gray-900 ring ring-gray-400 dark:ring dark:ring-gray-500">
@@ -54,16 +47,17 @@ const AgreementPage: FC = () => {
                   wants to access your Home Account
                 </h2>
                 <div className="flex flex-row items-center justify-center mb-6 gap-2">
-                  <div className="w-10 h-10 overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500">
-                    <img
-                      src="http://192.168.178.69:9000/guard-storage/profile_eff00028-2d9e-458d-8944-677855edc147_1748099702417601900.jpg"
-                      className="w-full h-full flex-1"
-                      alt="profile"
-                    />
-                  </div>
+                  <Avatar iconSize={28} className="w-9 h-9" />
                   <p className="text-sm text-gray-500 dark:text-gray-500">
                     qwer.009771@gmail.com
                   </p>
+                  <Button
+                    variant="icon"
+                    className="px-0 py-0"
+                    onClick={promptAccountSelection}
+                  >
+                    <ChevronDown />
+                  </Button>
                 </div>
                 <h4 className="text-base mb-3 text-gray-400 dark:text-gray-500 text-left">
                   This will allow{" "}

web/src/pages/Login/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Card, CardContent } from "@/components/ui/card";
 import { Mail, Lock } from "lucide-react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 
@@ -34,7 +34,6 @@ export default function LoginPage() {
   const repo = useAccountRepo();
 
   const location = useLocation();
-  const navigate = useNavigate();
 
   const updateActiveAccount = useAuth((state) => state.updateActiveAccount);
 
@@ -68,10 +67,6 @@ export default function LoginPage() {
 
         oauth.selectSession(response.access);
         await updateActiveAccount(account);
-
-        if (!location.state?.from) {
-          navigate("/");
-        }
       } catch (err: any) {
         console.log(err);
         setError(
@@ -82,7 +77,7 @@ export default function LoginPage() {
         setLoading(false);
       }
     },
-    [repo, reset, oauth, updateActiveAccount, location.state?.from, navigate]
+    [repo, reset, oauth, updateActiveAccount]
   );
 
   return (
@@ -173,7 +168,11 @@ export default function LoginPage() {
               </Button>
               <div className="text-sm text-center text-gray-600">
                 Don't have an account?{" "}
-                <Link to="/register" className="text-blue-600 hover:underline">
+                <Link
+                  to="/register"
+                  state={location.state}
+                  className="text-blue-600 hover:underline"
+                >
                   Register
                 </Link>
               </div>

web/src/pages/Register/index.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { Mail, Lock, User, Phone } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 
@@ -23,6 +23,8 @@ export default function RegisterPage() {
     formState: { errors },
   } = useForm<RegisterForm>();
 
+  const location = useLocation();
+
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState("");
@@ -238,7 +240,11 @@ export default function RegisterPage() {
               </Button>
               <div className="text-sm text-center text-gray-600">
                 Already have an account?{" "}
-                <Link to="/login" className="text-blue-600 hover:underline">
+                <Link
+                  to="/login"
+                  state={location.state}
+                  className="text-blue-600 hover:underline"
+                >
                   Login
                 </Link>
               </div>