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/accounts/components/ceate-user-panel.tsx

@@ -55,7 +55,7 @@ export function CreateUserPanel() {
 
   return (
     <div className="flex flex-col h-full gap-1">
-      <div className="flex-grow-0 flex-shrink-0 h-[56px] flex justify-between items-center py-[10px] px-6">
+      <div className=" flex justify-between items-center py-[10px] px-6">
         <Button
           type="button"
           size="icon"

packages/frontend/admin/src/modules/accounts/components/edit-panel.tsx

@@ -71,7 +71,7 @@ export function EditPanel({
 
   return (
     <div className="flex flex-col h-full gap-1">
-      <div className="flex-grow-0 flex-shrink-0 h-[56px] flex justify-between items-center py-[10px] px-6 ">
+      <div className=" flex justify-between items-center py-[10px] px-6 ">
         <Button
           type="button"
           size="icon"

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

@@ -30,7 +30,7 @@ export function AccountPage() {
 
   return (
     <div className=" h-screen flex-1 flex-col flex">
-      <div className="flex items-center justify-between px-6 py-3  max-md:ml-9 max-md:mt-[2px]">
+      <div className="flex items-center justify-between px-6 py-3  my-[2px]  max-md:ml-9 max-md:mt-[2px]">
         <div className="text-base font-medium">Accounts</div>
       </div>
       <Separator />

packages/frontend/admin/src/modules/ai/edit-prompt.tsx

@@ -47,7 +47,7 @@ export function EditPrompt({ item }: { item: Prompt }) {
 
   return (
     <div className="flex flex-col h-full gap-1">
-      <div className="flex-grow-0 flex-shrink-0 h-[56px] flex justify-between items-center py-[10px] px-6 ">
+      <div className="flex justify-between items-center py-[10px] px-6 ">
         <Button
           type="button"
           size="icon"

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

@@ -14,7 +14,7 @@ export function Ai() {
 export function AiPage() {
   return (
     <div className=" h-screen flex-1 flex-col flex">
-      <div className="flex items-center justify-between px-6 py-3 max-md:ml-9 max-md:mt-[2px]">
+      <div className="flex items-center justify-between px-6 py-3 my-[2px] max-md:ml-9 max-md:mt-[2px]">
         <div className="text-base font-medium">AI</div>
       </div>
       <Separator />

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 { useMutateQueryResource } from '@affine/core/hooks/use-mutation';
-import { useCallback, useRef } from 'react';
+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>

packages/frontend/admin/src/modules/layout.tsx

@@ -6,6 +6,12 @@ import {
 import { Separator } from '@affine/admin/components/ui/separator';
 import { TooltipProvider } from '@affine/admin/components/ui/tooltip';
 import { cn } from '@affine/admin/utils';
+import { useQuery } from '@affine/core/hooks/use-query';
+import {
+  FeatureType,
+  getCurrentUserFeaturesQuery,
+  serverConfigQuery,
+} from '@affine/graphql';
 import { AlignJustifyIcon } from 'lucide-react';
 import type { ReactNode, RefObject } from 'react';
 import {
@@ -17,6 +23,8 @@ import {
   useState,
 } from 'react';
 import type { ImperativePanelHandle } from 'react-resizable-panels';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 
 import { Button } from '../components/ui/button';
 import {
@@ -114,6 +122,36 @@ export function Layout({ content }: LayoutProps) {
     [closePanel, openPanel]
   );
 
+  const {
+    data: { serverConfig },
+  } = useQuery({
+    query: serverConfigQuery,
+  });
+  const {
+    data: { currentUser },
+  } = useQuery({
+    query: getCurrentUserFeaturesQuery,
+  });
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (serverConfig.initialized === false) {
+      navigate('/admin/setup');
+      return;
+    } else if (!currentUser) {
+      navigate('/admin/auth');
+      return;
+    } else if (!currentUser?.features.includes?.(FeatureType.Admin)) {
+      toast.error('You are not an admin, please login the admin account.');
+      navigate('/admin/auth');
+      return;
+    }
+  }, [currentUser, navigate, serverConfig.initialized]);
+
+  if (serverConfig.initialized === false || !currentUser) {
+    return null;
+  }
+
   return (
     <RightPanelContext.Provider
       value={{

packages/frontend/admin/src/modules/nav/user-dropdown.tsx

@@ -43,6 +43,7 @@ export function UserDropdown() {
       method: 'POST',
     })
       .then(() => {
+        toast.success('Logged out successfully');
         navigate('/admin/auth');
       })
       .catch(err => {

packages/frontend/admin/src/modules/setup/form.tsx

@@ -6,6 +6,7 @@ import {
   CarouselItem,
 } from '@affine/admin/components/ui/carousel';
 import { validateEmailAndPassword } from '@affine/admin/utils';
+import { useMutateQueryResource } from '@affine/core/hooks/use-mutation';
 import { useQuery } from '@affine/core/hooks/use-query';
 import { serverConfigQuery } from '@affine/graphql';
 import { useCallback, useEffect, useState } from 'react';
@@ -81,6 +82,8 @@ export const Form = () => {
   const disableContinue =
     (!nameValue || !emailValue || !passwordValue) && isCreateAdminStep;
 
+  const revalidate = useMutateQueryResource();
+
   useEffect(() => {
     if (!api) {
       return;
@@ -92,11 +95,9 @@ export const Form = () => {
     api.on('select', () => {
       setCurrent(api.selectedScrollSnap() + 1);
     });
-  }, [api]);
+  }, [api, data.serverConfig.initialized, navigate]);
 
   const createAdmin = useCallback(async () => {
-    if (invalidEmail || invalidPassword) return;
-
     try {
       const createResponse = await fetch('/api/setup/create-admin-user', {
         method: 'POST',
@@ -115,13 +116,14 @@ export const Form = () => {
       }
 
       await createResponse.json();
+      await revalidate(serverConfigQuery);
       toast.success('Admin account created successfully.');
     } catch (err) {
       toast.error((err as Error).message);
       console.error(err);
       throw err;
     }
-  }, [emailValue, invalidEmail, invalidPassword, passwordValue]);
+  }, [emailValue, passwordValue, revalidate]);
 
   const onNext = useCallback(async () => {
     if (isCreateAdminStep) {
@@ -138,8 +140,12 @@ export const Form = () => {
       } else {
         try {
           await createAdmin();
+          setInvalidEmail(false);
+          setInvalidPassword(false);
         } catch (e) {
           console.error(e);
+          setInvalidEmail(true);
+          setInvalidPassword(true);
           return;
         }
       }
@@ -164,10 +170,14 @@ export const Form = () => {
 
   const onPrevious = useCallback(() => {
     if (current === count) {
-      return navigate('/admin', { replace: true });
+      if (data.serverConfig.initialized === true) {
+        return navigate('/admin', { replace: true });
+      }
+      toast.error('Goto Admin Panel failed, please try again.');
+      return;
     }
     api?.scrollPrev();
-  }, [api, count, current, navigate]);
+  }, [api, count, current, data.serverConfig.initialized, navigate]);
 
   return (
     <div className="flex flex-col justify-between h-full w-full  lg:pl-36 max-lg:items-center ">