fix(admin): handle error login status (#7646)

Fix unhandled error login status, modify style

https://github.com/user-attachments/assets/0b40807d-e17a-4d23-a168-4894adfa5998

packages/frontend/admin/src/modules/auth/index.tsx

@@ -1,14 +1,33 @@
 import { Button } from '@affine/admin/components/ui/button';
 import { Input } from '@affine/admin/components/ui/input';
 import { Label } from '@affine/admin/components/ui/label';
-import { FeatureType, getUserFeaturesQuery } from '@affine/graphql';
-import { useCallback, useRef } from 'react';
+import { useMutateQueryResource } from '@affine/core/hooks/use-mutation';
+import { useQuery } from '@affine/core/hooks/use-query';
+import {
+  FeatureType,
+  getCurrentUserFeaturesQuery,
+  getUserFeaturesQuery,
+  serverConfigQuery,
+} from '@affine/graphql';
+import { useCallback, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import logo from './logo.svg';
 
 export function Auth() {
+  const {
+    data: { currentUser },
+  } = useQuery({
+    query: getCurrentUserFeaturesQuery,
+  });
+
+  const {
+    data: { serverConfig },
+  } = useQuery({
+    query: serverConfigQuery,
+  });
+  const revalidate = useMutateQueryResource();
   const emailRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
@@ -24,6 +43,14 @@ export function Auth() {
         'Content-Type': 'application/json',
       },
     })
+      .then(async response => {
+        if (!response.ok) {
+          const data = await response.json();
+          throw new Error(data.message || 'Failed to login');
+        }
+        await revalidate(getCurrentUserFeaturesQuery);
+        return response.json();
+      })
       .then(() =>
         fetch('/graphql', {
           method: 'POST',
@@ -45,6 +72,7 @@ export function Auth() {
           },
         }) => {
           if (features.includes(FeatureType.Admin)) {
+            toast.success('Logged in successfully');
             navigate('/admin');
           } else {
             toast.error('You are not an admin');
@@ -54,9 +82,22 @@ export function Auth() {
       .catch(err => {
         toast.error(`Failed to login: ${err.message}`);
       });
-  }, [navigate]);
+  }, [navigate, revalidate]);
+
+  useEffect(() => {
+    if (serverConfig.initialized === false) {
+      navigate('/admin/setup');
+      return;
+    } else if (!currentUser) {
+      return;
+    } else if (!currentUser?.features.includes?.(FeatureType.Admin)) {
+      toast.error('You are not an admin, please login the admin account.');
+      return;
+    }
+  }, [currentUser, navigate, serverConfig.initialized]);
+
   return (
-    <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
+    <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px] h-screen">
       <div className="flex items-center justify-center py-12">
         <div className="mx-auto grid w-[350px] gap-6">
           <div className="grid gap-2 text-center">
@@ -88,11 +129,11 @@ export function Auth() {
           </div>
         </div>
       </div>
-      <div className="hidden bg-muted lg:block">
+      <div className="hidden bg-muted lg:flex lg:justify-center">
         <img
           src={logo}
           alt="Image"
-          className="w-1/2 h-1/2 object-cover dark:brightness-[0.2] dark:grayscale relative top-1/4 left-1/4"
+          className="h-1/2 object-cover dark:brightness-[0.2] dark:grayscale relative top-1/4 "
         />
       </div>
     </div>