feat: handle agree ('allow') button click to select account for oauth auth

web/src/pages/Authorize/index.tsx

@@ -1,13 +1,24 @@
-import { type FC } from "react";
+import { useCallback, type FC } from "react";
 
 import { Card, CardContent } from "@/components/ui/card";
 import { ArrowLeftRight, ChevronDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import Avatar from "@/feature/Avatar";
 import { useAuth } from "@/store/auth";
+import { useOAuthContext } from "@/context/oauth";
 
 const AuthorizePage: FC = () => {
   const promptAccountSelection = useAuth((state) => state.deleteActiveAccount);
+  const activeAccount = useAuth((state) => state.activeAccount);
+
+  const oauth = useOAuthContext();
+
+  const profile = useAuth((state) => state.profile);
+
+  const handleAgree = useCallback(() => {
+    if (!activeAccount) return;
+    oauth.selectSession(activeAccount.access);
+  }, [activeAccount, oauth]);
 
   return (
     <div
@@ -49,7 +60,7 @@ const AuthorizePage: FC = () => {
                 <div className="flex flex-row items-center justify-center mb-6 gap-2">
                   <Avatar iconSize={28} className="w-9 h-9" />
                   <p className="text-sm text-gray-500 dark:text-gray-500">
-                    qwer.009771@gmail.com
+                    {profile?.email}
                   </p>
                   <Button
                     variant="icon"
@@ -101,7 +112,7 @@ const AuthorizePage: FC = () => {
               <div className="flex flex-row justify-between items-center">
                 <Button variant="text">Cancel</Button>
 
-                <Button>Allow</Button>
+                <Button onClick={handleAgree}>Allow</Button>
               </div>
             </CardContent>
           </div>