Merge pull request #56 from Kinfe123/fix/oauth-auth

Feat - oauth auth added
Kinfe123 · Jun 17, 2024 · ea9734a · ea9734a
2 parents 04c5c22 + e2bb1c4
commit ea9734a
Show file tree

Hide file tree

Showing 12 changed files with 546 additions and 42 deletions.
diff --git a/apps/www/app/(www)/login/_components/Login.tsx b/apps/www/app/(www)/login/_components/Login.tsx
@@ -0,0 +1,204 @@
+"use client";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { signIn } from "next-auth/react";
+import { BottomLine } from "components/LineUtils";
+import { PlusSvg } from "components/SectionSvg";
+import { ChevronRight } from "lucide-react";
+import React, { useState } from "react";
+
+export default function FUILoginWithGridProvider() {
+  const [reset, setReset] = useState(false);
+  return (
+    <main className="w-full min-h-screen   flex flex-col items-center justify-center sm:px-4 relative">
+      <div className="relative w-full bg-page-gradient   space-y-6 text-gray-600 sm:max-w-md md:max-w-xl lg:max-w-xl px-5 py-10  rounded-none  transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]">
+        <PlusSvg className="size-5 absolute top-[-6px] left-[-6px]" />
+        <PlusSvg className="size-5 absolute top-[-31px] right-[-16px]" />
+
+        <PlusSvg className="size-5 absolute bottom-[-14px] left-[-6px]" />
+
+        <PlusSvg className="size-5 absolute bottom-[-14px] right-[-16px] " />
+        <div className="text-center">
+          <img
+            src="https://farmui.com/logo.svg"
+            width={100}
+            className="mx-auto rounded-full"
+          />
+          <div className="mt-5 space-y-2">
+            <h3 className="text-gray-200 text-2xl font-normal sm:text-3xl tracking-tighter font-geist">
+              Log in to your account
+            </h3>
+            <p className="text-gray-400">
+              Don't have an account?{" "}
+              <a
+                href="javascript:void(0)"
+                className="font-medium text-purple-600 hover:text-purple-500"
+              >
+                Sign up
+              </a>
+            </p>
+          </div>
+        </div>
+        <div className="shadow p-4 py-6 space-y-8 sm:p-6  sm:rounded-lg">
+          <div className="grid grid-cols-3 gap-x-3">
+            <button
+              onClick={() => signIn("google")}
+              onMouseEnter={() => setReset(false)}
+              onMouseLeave={() => setReset(true)}
+              className="group flex transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]  border-white/10  items-center justify-center py-5 border rounded-lg hover:bg-transparent/50 duration-150 active:bg-transparent/50"
+            >
+              <svg
+                className={cn(
+                  "w-5 h-5 group-hover:-translate-y-1 duration-300 transition-all ",
+                  reset ? "translate-y-0" : "tranistion-transform"
+                )}
+                viewBox="0 0 48 48"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g clip-path="url(#clip0_17_40)">
+                  <path
+                    d="M47.532 24.5528C47.532 22.9214 47.3997 21.2811 47.1175 19.6761H24.48V28.9181H37.4434C36.9055 31.8988 35.177 34.5356 32.6461 36.2111V42.2078H40.3801C44.9217 38.0278 47.532 31.8547 47.532 24.5528Z"
+                    fill="#4285F4"
+                  />
+                  <path
+                    d="M24.48 48.0016C30.9529 48.0016 36.4116 45.8764 40.3888 42.2078L32.6549 36.2111C30.5031 37.675 27.7252 38.5039 24.4888 38.5039C18.2275 38.5039 12.9187 34.2798 11.0139 28.6006H3.03296V34.7825C7.10718 42.8868 15.4056 48.0016 24.48 48.0016Z"
+                    fill="#34A853"
+                  />
+                  <path
+                    d="M11.0051 28.6006C9.99973 25.6199 9.99973 22.3922 11.0051 19.4115V13.2296H3.03298C-0.371021 20.0112 -0.371021 28.0009 3.03298 34.7825L11.0051 28.6006Z"
+                    fill="#FBBC04"
+                  />
+                  <path
+                    d="M24.48 9.49932C27.9016 9.44641 31.2086 10.7339 33.6866 13.0973L40.5387 6.24523C36.2 2.17101 30.4414 -0.068932 24.48 0.00161733C15.4055 0.00161733 7.10718 5.11644 3.03296 13.2296L11.005 19.4115C12.901 13.7235 18.2187 9.49932 24.48 9.49932Z"
+                    fill="#EA4335"
+                  />
+                </g>
+                <defs>
+                  <clipPath id="clip0_17_40">
+                    <rect width="48" height="48" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </button>
+            <button
+              onMouseEnter={() => setReset(false)}
+              onMouseLeave={() => setReset(true)}
+              className="group flex transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]  border-white/10  items-center justify-center py-5 border rounded-lg hover:bg-transparent/50 duration-150 active:bg-transparent/50"
+            >
+              <svg
+                className={cn(
+                  "w-5 h-5 group-hover:-translate-y-1 duration-300 transition-all ",
+                  reset ? "translate-y-0" : "tranistion-transform"
+                )}
+                viewBox="0 0 48 48"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M15.095 43.5014C33.2083 43.5014 43.1155 28.4946 43.1155 15.4809C43.1155 15.0546 43.1155 14.6303 43.0867 14.2079C45.0141 12.8138 46.6778 11.0877 48 9.11033C46.2028 9.90713 44.2961 10.4294 42.3437 10.6598C44.3996 9.42915 45.9383 7.49333 46.6733 5.21273C44.7402 6.35994 42.6253 7.16838 40.4198 7.60313C38.935 6.02428 36.9712 4.97881 34.8324 4.6285C32.6935 4.27818 30.4988 4.64256 28.5879 5.66523C26.677 6.68791 25.1564 8.31187 24.2615 10.2858C23.3665 12.2598 23.1471 14.4737 23.6371 16.5849C19.7218 16.3885 15.8915 15.371 12.3949 13.5983C8.89831 11.8257 5.81353 9.33765 3.3408 6.29561C2.08146 8.4636 1.69574 11.0301 2.2622 13.4725C2.82865 15.9148 4.30468 18.0495 6.38976 19.4418C4.82246 19.3959 3.2893 18.9731 1.92 18.2092V18.334C1.92062 20.6077 2.7077 22.8112 4.14774 24.5707C5.58778 26.3303 7.59212 27.5375 9.8208 27.9878C8.37096 28.3832 6.84975 28.441 5.37408 28.1567C6.00363 30.1134 7.22886 31.8244 8.87848 33.0506C10.5281 34.2768 12.5197 34.9569 14.5747 34.9958C12.5329 36.6007 10.1946 37.7873 7.69375 38.4878C5.19287 39.1882 2.57843 39.3886 0 39.0777C4.50367 41.9677 9.74385 43.5007 15.095 43.4937"
+                  fill="#1DA1F2"
+                />
+              </svg>
+            </button>
+            <button
+              onMouseEnter={() => setReset(false)}
+              onMouseLeave={() => setReset(true)}
+              className="group flex transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]  border-white/10  items-center justify-center py-5 border rounded-lg hover:bg-transparent/50 duration-150 active:bg-transparent/50"
+            >
+              <svg
+                className={cn(
+                  "w-5 h-5 group-hover:-translate-y-1 duration-300 transition-all ",
+                  reset ? "translate-y-0" : "tranistion-transform"
+                )}
+                viewBox="0 0 48 48"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g clip-path="url(#clip0_910_21)">
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M24.0005 1C18.303 1.00296 12.7923 3.02092 8.45374 6.69305C4.11521 10.3652 1.23181 15.452 0.319089 21.044C-0.593628 26.636 0.523853 32.3684 3.47174 37.2164C6.41963 42.0643 11.0057 45.7115 16.4099 47.5059C17.6021 47.7272 18.0512 46.9883 18.0512 46.36C18.0512 45.7317 18.0273 43.91 18.0194 41.9184C11.3428 43.3608 9.93197 39.101 9.93197 39.101C8.84305 36.3349 7.26927 35.6078 7.26927 35.6078C5.09143 34.1299 7.43223 34.1576 7.43223 34.1576C9.84455 34.3275 11.1123 36.6194 11.1123 36.6194C13.2504 40.2667 16.7278 39.2116 18.0949 38.5952C18.3095 37.0501 18.9335 35.999 19.621 35.4023C14.2877 34.8017 8.68408 32.7548 8.68408 23.6108C8.65102 21.2394 9.53605 18.9461 11.156 17.2054C10.9096 16.6047 10.087 14.1785 11.3905 10.8829C11.3905 10.8829 13.4054 10.2427 17.9916 13.3289C21.9253 12.2592 26.0757 12.2592 30.0095 13.3289C34.5917 10.2427 36.6026 10.8829 36.6026 10.8829C37.9101 14.1706 37.0875 16.5968 36.8411 17.2054C38.4662 18.9464 39.353 21.2437 39.317 23.6187C39.317 32.7824 33.7015 34.8017 28.3602 35.3905C29.2186 36.1334 29.9856 37.5836 29.9856 39.8122C29.9856 43.0051 29.9578 45.5736 29.9578 46.36C29.9578 46.9962 30.391 47.7391 31.6071 47.5059C37.0119 45.7113 41.5984 42.0634 44.5462 37.2147C47.4941 32.3659 48.611 26.6326 47.6972 21.0401C46.7835 15.4476 43.8986 10.3607 39.5587 6.68921C35.2187 3.01771 29.7067 1.00108 24.0085 1H24.0005Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M9.08887 35.264C9.03721 35.3826 8.84645 35.4181 8.69146 35.3351C8.53646 35.2522 8.42122 35.098 8.47686 34.9755C8.5325 34.853 8.71928 34.8214 8.87428 34.9044C9.02927 34.9874 9.14848 35.1455 9.08887 35.264Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M10.0626 36.3428C9.98028 36.384 9.88612 36.3955 9.79622 36.3753C9.70632 36.3551 9.62629 36.3045 9.56979 36.2321C9.41479 36.0662 9.38298 35.837 9.50221 35.7342C9.62143 35.6315 9.83606 35.6789 9.99105 35.8449C10.146 36.0108 10.1818 36.24 10.0626 36.3428Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M11.0085 37.714C10.8614 37.8167 10.6111 37.714 10.472 37.5085C10.4335 37.4716 10.4029 37.4274 10.382 37.3785C10.3611 37.3297 10.3503 37.2771 10.3503 37.224C10.3503 37.1709 10.3611 37.1183 10.382 37.0694C10.4029 37.0205 10.4335 36.9763 10.472 36.9395C10.619 36.8407 10.8694 36.9395 11.0085 37.141C11.1476 37.3425 11.1516 37.6112 11.0085 37.714Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M12.2921 39.0417C12.161 39.1879 11.8947 39.1484 11.6761 38.9508C11.4575 38.7532 11.4059 38.4845 11.537 38.3423C11.6682 38.2 11.9344 38.2395 12.161 38.4331C12.3875 38.6268 12.4312 38.8994 12.2921 39.0417Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M14.0923 39.8162C14.0327 40.0019 13.7625 40.0849 13.4922 40.0059C13.222 39.9268 13.0432 39.7055 13.0948 39.5159C13.1465 39.3262 13.4207 39.2393 13.6949 39.3262C13.9691 39.4131 14.144 39.6226 14.0923 39.8162Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M16.0557 39.9505C16.0557 40.1442 15.8331 40.3101 15.547 40.3141C15.2608 40.318 15.0264 40.16 15.0264 39.9663C15.0264 39.7727 15.2489 39.6067 15.535 39.6028C15.8212 39.5988 16.0557 39.753 16.0557 39.9505Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M17.8838 39.6463C17.9196 39.8399 17.7208 40.0414 17.4347 40.0888C17.1486 40.1363 16.8982 40.0217 16.8624 39.832C16.8267 39.6423 17.0333 39.4368 17.3115 39.3855C17.5897 39.3341 17.848 39.4526 17.8838 39.6463Z"
+                    fill="currentColor"
+                  />
+                </g>
+                <defs>
+                  <clipPath id="clip0_910_21">
+                    <rect width="48" height="48" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </button>{" "}
+          </div>
+          <div className="relative">
+            <span className="block w-full h-px bg-transparent"></span>
+            <p className="inline-block w-fit text-sm text-gray-200 px-2 absolute -top-2 inset-x-0 mx-auto">
+              Or continue with
+            </p>
+          </div>
+          <form onSubmit={(e) => e.preventDefault()} className="space-y-5">
+            <div>
+              <label className="font-medium text-gray-100/50 font-geist">
+                Email
+              </label>
+              <Input
+                type="email"
+                required
+                className="w-full mt-2 px-3 py-6 text-gray-500 bg-transparent outline-none border focus:border-purple-600 shadow-sm rounded-lg"
+              />
+            </div>
+            <div>
+              <label className="font-medium text-gray-100/50 font-geist">
+                Password
+              </label>
+              <Input
+                type="password"
+                required
+                className="w-full mt-2 px-3 py-6 text-gray-500 bg-transparent outline-none border focus:border-purple-600 shadow-sm rounded-lg"
+              />
+            </div>
+            <button className="w-full group px-4 py-4 font-geist tracking-tighter text-xl text-white font-medium bg-purple-200/10 transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] hover:bg-transparent/10 active:bg-purple-600 rounded-lg duration-150">
+              Sign in
+              <ChevronRight className="inline-flex justify-center items-center w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
+            </button>
+          </form>
+        </div>
+        <div className="text-center">
+          <a href="javascript:void(0)" className="hover:text-purple-600">
+            Forgot password?
+          </a>
+        </div>
+        <div className="absolute bottom-0 bg-page-gradient"></div>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/www/app/(www)/login/page.tsx b/apps/www/app/(www)/login/page.tsx
@@ -0,0 +1,61 @@
+import ChangelogDisplay from "components/Changelog/ChangelogDisplay";
+import RetroGrid from "components/ui/Grid";
+import { ChevronRight } from "lucide-react";
+import FUILoginWithGridProvider from "./_components/Login";
+import Section from "components/SectionView";
+import { BottomLine } from "components/LineUtils";
+import { getSession } from "next-auth/react";
+import { auth } from "auth";
+import { redirect } from "next/navigation";
+const { title, description }: { title: string; description: string } = {
+  title: "Login - Join FarmUI to grab exlusive perks.",
+  description: "Join the community to get fast and up to date informations",
+};
+
+export const metadata = {
+  metadataBase: new URL("https://farmui.com"),
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+    images: [
+      {
+        url: "https://farmui.com/og.png",
+      },
+    ],
+    url: "https://farmui.com",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title,
+    description,
+    images: ["https://farmui.com/og.png"],
+    creator: "@farmui",
+  },
+};
+const LogInPage = async () => {
+    const user = await auth()
+    if(user?.user) {
+        redirect("/")
+    }
+  return (
+    <div className="lg:mt-14 custom-screen">
+      <Section
+        className="relative max-w-7xl"
+        crosses
+        crossesOffset="lg:translate-y-[14rem]"
+        customPaddings
+        id="hero"
+      >
+        <BottomLine />
+        <FUILoginWithGridProvider />
+        <div className="relative">
+          <BottomLine />
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default LogInPage;
diff --git a/apps/www/app/(www)/templates/[slug]/page.tsx b/apps/www/app/(www)/templates/[slug]/page.tsx
@@ -55,7 +55,7 @@ const TemplatePage = async ({ params: { slug } }: { params: Params }) => {
 
   return (
     <>
-      <section className="mt-24 custom-screen-lg mx-auto">
+      <section className="mt-48 custom-screen-lg mx-auto">
         <div className="max-w-full md:max-w-3xl mx-auto lg:max-w-4xl">
           <div className="text-zinc-50 mr-auto text-left">
             <h1 className="text-4xl font-geist md:text-6xl tracking-tighter">

diff --git a/apps/www/app/api/auth/[...nextauth]/route.ts b/apps/www/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,2 @@
+import { handlers } from "../../../../auth"; // Referring to the auth.ts we just created
+export const { GET, POST } = handlers;
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -16,6 +16,7 @@ import { GeistMono } from "geist/font/mono";
 import { Toaster } from "@/components/ui/toaster";
 import Loglib from "@loglib/tracker/react";
 import { Analytics } from "@vercel/analytics/react";
+import { SessionProvider } from "next-auth/react";
 const { title, desc, ogImage } = metatag;
 export const metadata = {
   metadataBase: new URL("https://farmui.com"),
@@ -85,31 +86,34 @@ export default function RootLayout({
         <meta name="twitter:creator" content="@farmui" />
         <link rel="icon" href="/favicon.ico" />
       </head>
-      <body
-        className={cn(
-          inter.className,
-          displayFont.variable,
-          dmSans.variable,
-          GeistSans.variable,
-          "bg-black overflow-x-hidden"
-        )}
-      >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem
-          disableTransitionOnChange
+
+      <SessionProvider>
+        <body
+          className={cn(
+            inter.className,
+            displayFont.variable,
+            dmSans.variable,
+            GeistSans.variable,
+            "bg-black overflow-x-hidden"
+          )}
         >
-          <Toaster />
-          <main>{children}</main>
-          <Loglib
-            config={{
-              id: "farmui_vercel",
-            }}
-          />
-          <Analytics />
-        </ThemeProvider>
-      </body>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <Toaster />
+            <main>{children}</main>
+            <Loglib
+              config={{
+                id: "farmui_vercel",
+              }}
+            />
+            <Analytics />
+          </ThemeProvider>
+        </body>
+      </SessionProvider>
     </html>
   );
 }
diff --git a/apps/www/auth.ts b/apps/www/auth.ts
@@ -0,0 +1,6 @@
+import NextAuth from "next-auth";
+import Google from "next-auth/providers/google"
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  providers: [Google],
+});
diff --git a/apps/www/components/ui/Hero/index.tsx b/apps/www/components/ui/Hero/index.tsx
@@ -9,7 +9,9 @@ import HeroAnimated from "components/HeroAnimated";
 import { cn } from "@/lib/utils";
 import heroStyle from "components/HeroNit/hero.module.css";
 import NumberTicker from "components/NumberCounter";
+import { signIn } from "../../../auth";
 import bgback from "../../../public/bg-back.png";
+
 async function getGitHubStars() {
   try {
     const response = await fetch(
@@ -94,6 +96,7 @@ export default async function () {
             </div>
           </HeroAnimated>
         </div>
+
         <HeroBgGradientClient />
       </section>
       <div className="flex justify-center items-center bg-center overflow-x-hidden w-screen absolute sm:block md:-top-2 right-0 min-h-screen">
@@ -113,3 +116,16 @@ export default async function () {
     </>
   );
 }
+
+export function SignIn() {
+  return (
+    <form
+      action={async () => {
+        "use server";
+        await signIn("google");
+      }}
+    >
+      <button type="submit">Signin with Google</button>
+    </form>
+  );
+}