Merge pull request #27 from himohitmehta/dashboard-and-ui

Dashboard and UI

apps/admin/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

apps/application/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "dev": " next dev",
+        "dev": " next dev --port 3002",
         "build": "next build",
         "start": "next start",
         "lint": "next lint",

apps/auth/app/(auth)/layout.tsx

@@ -0,0 +1,16 @@
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Login | Saroh",
+    description:
+        "Login to saroh. A platform for managing your portfolios, marketing websites and more.",
+};
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
+    return (
+        <div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8">
+            {children}
+        </div>
+    );
+}

apps/auth/app/(auth)/login/github-login-button.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import LoadingDots from "./loading-dots";
+// import { toast } from "sonner";
+
+export default function GithubLoginButton() {
+    const [loading, setLoading] = useState(false);
+
+    // Get error message added by next/auth in URL.
+    const searchParams = useSearchParams();
+    const error = searchParams?.get("error");
+
+    useEffect(() => {
+        const errorMessage = Array.isArray(error) ? error.pop() : error;
+        errorMessage;
+        // && toast.error(errorMessage);
+    }, [error]);
+
+    return (
+        <button
+            disabled={loading}
+            onClick={() => {
+                setLoading(true);
+                signIn("github");
+            }}
+            className={`${
+                loading
+                    ? "cursor-not-allowed bg-stone-50 dark:bg-stone-800"
+                    : "bg-white hover:bg-stone-50 active:bg-stone-100 dark:bg-black dark:hover:border-white dark:hover:bg-black"
+            } group my-2 flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-stone-200 transition-colors duration-75 focus:outline-none dark:border-stone-700`}
+        >
+            {loading ? (
+                <LoadingDots color="#A8A29E" />
+            ) : (
+                <>
+                    <svg
+                        className="h-4 w-4 text-black dark:text-white"
+                        aria-hidden="true"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                    </svg>
+                    <p className="text-sm font-medium text-stone-600 dark:text-stone-400">
+                        Login with GitHub
+                    </p>
+                </>
+            )}
+        </button>
+    );
+}

apps/auth/app/(auth)/login/google-login-button.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { SiGoogle } from "react-icons/si";
+import LoadingDots from "./loading-dots";
+// import { toast } from "sonner";
+export default function GoogleLoginButton() {
+    const [loading, setLoading] = useState(false);
+
+    // Get error message added by next/auth in URL.
+    const searchParams = useSearchParams();
+    const error = searchParams?.get("error");
+
+    useEffect(() => {
+        const errorMessage = Array.isArray(error) ? error.pop() : error;
+        errorMessage;
+        // && toast.error(errorMessage);
+    }, [error]);
+
+    return (
+        <button
+            disabled={loading}
+            onClick={() => {
+                setLoading(true);
+                signIn("google");
+            }}
+            className={`${
+                loading
+                    ? "cursor-not-allowed bg-stone-50 dark:bg-stone-800"
+                    : "bg-white hover:bg-stone-50 active:bg-stone-100 dark:bg-black dark:hover:border-white dark:hover:bg-black"
+            } group my-2 flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-stone-200 transition-colors duration-75 focus:outline-none dark:border-stone-700`}
+        >
+            {loading ? (
+                <LoadingDots color="#A8A29E" />
+            ) : (
+                <>
+                    <SiGoogle color="inherit" />
+                    <p className="text-sm font-medium text-stone-600 dark:text-stone-400">
+                        Login with Google
+                    </p>
+                </>
+            )}
+        </button>
+    );
+}

apps/auth/app/(auth)/login/loading-dots.module.css

@@ -0,0 +1,40 @@
+.loading {
+  display: inline-flex;
+  align-items: center;
+}
+
+.loading .spacer {
+  margin-right: 2px;
+}
+
+.loading span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+
+.loading span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+
+.loading span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}

apps/auth/app/(auth)/login/loading-dots.tsx

@@ -0,0 +1,17 @@
+import styles from "./loading-dots.module.css";
+
+interface LoadingDotsProps {
+    color?: string;
+}
+
+const LoadingDots = ({ color = "#000" }: LoadingDotsProps) => {
+    return (
+        <span className={styles.loading}>
+            <span style={{ backgroundColor: color }} />
+            <span style={{ backgroundColor: color }} />
+            <span style={{ backgroundColor: color }} />
+        </span>
+    );
+};
+
+export default LoadingDots;

apps/auth/app/(auth)/login/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { LoginForm } from "@/components/auth/login-form";
+
+export default function LoginPage() {
+    return <LoginForm />;
+    // return (
+    //     <div className="mx-5 border border-stone-200 py-10 sm:mx-auto sm:w-full sm:max-w-lg sm:rounded-lg sm:shadow-md dark:border-stone-700">
+    //         <h1 className="font-cal mt-6 text-center text-3xl dark:text-white">
+    //             Saroh
+    //         </h1>
+    //         <p className="mt-2 text-center text-sm text-stone-600 dark:text-stone-400">
+    //             Build your storefronts, portfolio and blog websites with
+    //             saroh.io. <br />
+    //         </p>
+
+    //         <div className="mx-auto mt-4 w-11/12 max-w-xs sm:w-full">
+    //             <Button
+    //                 onClick={() =>
+    //                     signIn("github", { redirectTo: "/dashboard" })
+    //                 }
+    //             >
+    //                 Sign in with Github
+    //             </Button>
+    //         </div>
+    //     </div>
+    // );
+}

apps/auth/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,2 @@
+import { handlers } from "@/lib/auth";
+export const { GET, POST } = handlers;

apps/auth/app/apps/page.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function AppsListPage() {
+    return (
+        <div>
+            Select the app to open
+            <div>
+                <Link href="http://localhost:3004">Dashboard</Link>
+            </div>
+        </div>
+    );
+}

apps/auth/app/layout.tsx

@@ -1,12 +1,14 @@
+import "@saroh/ui/globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
+
+import Providers from "./providers";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
+    title: "Saroh Auth",
+    description: "login to your saroh account.",
 };
 
 export default function RootLayout({
@@ -16,7 +18,9 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en">
-            <body className={inter.className}>{children}</body>
+            <body className={inter.className}>
+                <Providers>{children}</Providers>
+            </body>
         </html>
     );
 }

apps/auth/app/providers.tsx

@@ -0,0 +1,7 @@
+"use client";
+import { SessionProvider } from "next-auth/react";
+import React from "react";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+    return <SessionProvider>{children}</SessionProvider>;
+}

apps/auth/components/auth/login-form.tsx

@@ -0,0 +1,67 @@
+"use client";
+import { Button } from "@saroh/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@saroh/ui/card";
+import { Input } from "@saroh/ui/input";
+import { Label } from "@saroh/ui/label";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+
+export function LoginForm() {
+    return (
+        <Card className="mx-auto max-w-sm">
+            <CardHeader>
+                <CardTitle className="text-2xl">Login</CardTitle>
+                <CardDescription>
+                    Enter your email below to login to your account
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <div className="grid gap-4">
+                    <div className="grid gap-2">
+                        <Label htmlFor="email">Email</Label>
+                        <Input
+                            id="email"
+                            type="email"
+                            placeholder="[email protected]"
+                            required
+                        />
+                    </div>
+                    <div className="grid gap-2">
+                        <div className="flex items-center">
+                            <Label htmlFor="password">Password</Label>
+                            <Link
+                                href="#"
+                                className="ml-auto inline-block text-sm underline"
+                            >
+                                Forgot your password?
+                            </Link>
+                        </div>
+                        <Input id="password" type="password" required />
+                    </div>
+                    <Button type="submit" className="w-full">
+                        Login
+                    </Button>
+                    <Button
+                        variant="outline"
+                        className="w-full"
+                        onClick={() => signIn("github")}
+                    >
+                        Login with Github
+                    </Button>
+                </div>
+                <div className="mt-4 text-center text-sm">
+                    Don&apos;t have an account?{" "}
+                    <Link href="#" className="underline">
+                        Sign up
+                    </Link>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

apps/auth/lib/auth.config.ts

@@ -0,0 +1,4 @@
+import type { NextAuthConfig } from "next-auth";
+import GitHub from "next-auth/providers/github";
+
+export default { providers: [GitHub] } satisfies NextAuthConfig;

apps/auth/lib/auth.ts

@@ -0,0 +1,12 @@
+import prisma from "@/lib/prisma";
+import { PrismaAdapter } from "@auth/prisma-adapter";
+import NextAuth from "next-auth";
+import authConfig from "./auth.config";
+const VERCEL_DEPLOYMENT = !!process.env.VERCEL_URL;
+
+export const { auth, handlers, signIn, signOut } = NextAuth({
+    // providers: [GitHub, Google],
+    adapter: PrismaAdapter(prisma),
+    session: { strategy: "jwt" },
+    ...authConfig,
+});

apps/auth/lib/prisma.ts

@@ -0,0 +1,11 @@
+// import { PrismaClient } from "@prisma/client";
+import { prisma } from "@saroh/database";
+// declare global {
+//   var prisma: PrismaClient | undefined;
+// }
+
+// const prisma = global.prisma || new PrismaClient();
+
+// if (process.env.NODE_ENV === "development") global.prisma = prisma;
+
+export default prisma;