feat(admin): init project (#7197)

2026-07-25 14:28:51 +08:00 · 2024-06-18 06:01:13 +00:00
parent d216606193
commit 0fe672efa5
92 changed files with 6392 additions and 175 deletions
@@ -0,0 +1,102 @@
+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 { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+import logo from './logo.svg';
+
+export function Auth() {
+  const emailRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
+  const login = useCallback(() => {
+    if (!emailRef.current || !passwordRef.current) return;
+    fetch('/api/auth/sign-in', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: emailRef.current?.value,
+        password: passwordRef.current?.value,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(() =>
+        fetch('/graphql', {
+          method: 'POST',
+          body: JSON.stringify({
+            operationName: getUserFeaturesQuery.operationName,
+            query: getUserFeaturesQuery.query,
+            variables: {},
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+      )
+      .then(res => res.json())
+      .then(
+        ({
+          data: {
+            currentUser: { features },
+          },
+        }) => {
+          if (features.includes(FeatureType.Admin)) {
+            navigate('/admin');
+          } else {
+            toast.error('You are not an admin');
+          }
+        }
+      )
+      .catch(err => {
+        toast.error(`Failed to login: ${err.message}`);
+      });
+  }, [navigate]);
+  return (
+    <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
+      <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">
+            <h1 className="text-3xl font-bold">Login</h1>
+            <p className="text-balance text-muted-foreground">
+              Enter your email below to login to your account
+            </p>
+          </div>
+          <div className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                ref={emailRef}
+                placeholder="m@example.com"
+                required
+              />
+            </div>
+            <div className="grid gap-2">
+              <div className="flex items-center">
+                <Label htmlFor="password">Password</Label>
+              </div>
+              <Input id="password" type="password" ref={passwordRef} required />
+            </div>
+            <Button onClick={login} type="submit" className="w-full">
+              Login
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="hidden bg-muted lg:block">
+        <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"
+        />
+      </div>
+    </div>
+  );
+}
+
+export { Auth as Component };