feat: admin connection & google login

Sawangg · Nov 17, 2023 · 98e8e0c · 98e8e0c
1 parent a1df2ff
commit 98e8e0c
Show file tree

Hide file tree

Showing 21 changed files with 639 additions and 33 deletions.
diff --git a/components.json b/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "src",
+    "utils": "@lib/utils"
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -12,6 +12,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "avatars.githubusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "*.googleusercontent.com",
+      },
     ],
   },
 };

diff --git a/package.json b/package.json
@@ -16,20 +16,28 @@
     "db:studio": "cross-env SKIP_ENV_VALIDATION=true drizzle-kit studio --host 127.0.0.1 --port 3001"
   },
   "dependencies": {
+    "@auth/core": "^0.18.1",
     "@formatjs/intl-localematcher": "^0.5.1",
+    "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
     "@react-three/fiber": "^8.15.10",
     "@t3-oss/env-nextjs": "^0.7.1",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "drizzle-orm": "^0.29.0",
     "framer-motion": "^10.16.4",
+    "lucide-react": "^0.292.0",
     "next": "^14.0.2",
     "next-auth": "5.0.0-beta.3",
     "postgres": "^3.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
     "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7",
     "three": "^0.158.0",
     "typescript": "^5.2.2",
     "zod": "^3.22.4"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/assets/apple.png b/public/assets/apple.png
diff --git a/public/assets/github.png b/public/assets/github.png
diff --git a/public/assets/google.png b/public/assets/google.png
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -1,5 +1,15 @@
 {
   "admin": {
+    "login": {
+      "github": "GitHub",
+      "google": "Google",
+      "apple": "Apple",
+      "choice": "Choose a connection method",
+      "connection": "Sign in",
+      "division":"or sign in with",
+      "pass" : "Password"
+    },
+
     "signout": "Sign out"
   }
 }
diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -1,5 +1,14 @@
 {
-  "admin": {
+  "admin": {  
+    "login": {
+      "github": "Github",
+      "google": "Google",
+
+      "choice": "Choisissez un moyen de connection",
+      "connection" : "Se connecter",
+      "division": "ou connectez-vous avec",
+      "pass" : "Mot de passe"
+    },
     "signout": "Déconnexion"
   }
 }
diff --git a/src/app/[lang]/admin/login/page.tsx b/src/app/[lang]/admin/login/page.tsx
@@ -1,8 +1,14 @@
+import Image from "next/image";
 import { redirect } from "next/navigation";
 import { auth, signIn } from "@lib/auth";
+import { getDictionnary, type Locale } from "@lib/getDictionnary";
+import { AspectRatio } from "@src/ui/AspectRatio";
+import { Button } from "@src/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@src/ui/card";
+import { Input } from "@src/ui/input";
 
-export default async function AdminLoginPage(/*{ params }: { params: { lang: string } }*/) {
-  // const dictionnary = await getDictionnary(params.lang as Locale);
+export default async function AdminLoginPage({ params }: { params: { lang: string } }) {
+  const dictionnary = await getDictionnary(params.lang as Locale);
   const session = await auth();
   if (session) return redirect("/admin");
 
@@ -13,14 +19,81 @@ export default async function AdminLoginPage(/*{ params }: { params: { lang: str
     redirect(url.replace("signin", "api/auth/signin"));
   }
 
+  async function signInGoogle() {
+    "use server";
+    const url = (await signIn("google", { redirect: false })) as string;
+    // TODO: Should be fixed after next-auth@5 is stable
+    redirect(url.replace("signin", "api/auth/signin"));
+  }
+
   return (
-    <body>
+    <body className="bg-black">
       <header></header>
-      <main>
-        <form action={signInGithub}>
-          <button>Sign In Github</button>
-        </form>
+      <main className="grid h-screen place-items-center">
+        <Card className="border-gray-800 bg-black">
+          <CardHeader>
+            <CardTitle className="  text-white">{dictionnary.admin.login.connection}</CardTitle>
+            <CardDescription className="text-gray-500">{dictionnary.admin.login.choice}</CardDescription>
+          </CardHeader>
+          <CardContent className="grid grid-cols-2 gap-x-3 gap-y-2">
+            <form action={signInGithub}>
+              <Button className="flex w-52 gap-x-2 space-y-52 rounded-xl border border-gray-800 bg-black">
+                <div className="w-5">
+                  <AspectRatio ratio={1 / 1}>
+                    <Image src="/assets/github.png" sizes="" alt="" fill />
+                  </AspectRatio>
+                </div>
+                {dictionnary.admin.login.github}
+              </Button>
+            </form>
+            <form action={signInGoogle}>
+              <Button className="flex w-52 gap-x-2 rounded-xl border border-gray-800 bg-black">
+                <div className="w-5">
+                  <AspectRatio ratio={1 / 1}>
+                    <Image src="/assets/google.png" sizes="" alt="" fill />
+                  </AspectRatio>
+                </div>
+                {dictionnary.admin.login.google}
+              </Button>
+            </form>
+            <div className="col-span-2 flex items-center">
+              <hr className="grow border-t border-gray-500" />
+              <span className="px-2 text-center uppercase text-gray-500">{dictionnary.admin.login.division}</span>
+              <hr className="grow border-t border-gray-500" />
+            </div>
+
+            <label htmlFor="email" className="col-span-2 text-white">
+              Email
+            </label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="email@exemple.com"
+              className="col-span-2 rounded-xl border-gray-800 bg-black"
+            />
+
+            <label htmlFor="password" className="col-span-2 text-white">
+              {dictionnary.admin.login.pass}
+            </label>
+            <Input id="password" type="password" className="col-span-2 rounded-xl border-gray-800 bg-black " />
+          </CardContent>
+          <CardFooter className="grid grid-cols-2">
+            <Button variant="secondary" className="col-span-2 rounded-xl border border-gray-800 ">
+              {dictionnary.admin.login.connection}
+            </Button>
+          </CardFooter>
+        </Card>
       </main>
+      <footer className="absolute bottom-4 left-4">
+        <div className="flex items-center gap-x-2">
+          <div className="w-6">
+            <AspectRatio ratio={1 / 1}>
+              <Image src="/assets/SG.png" sizes="" alt="" fill />
+            </AspectRatio>
+          </div>
+          <p className="text-center text-sm text-white">Sponsored by SG</p>
+        </div>
+      </footer>
     </body>
   );
 }