Updates / bug fixes / styling fixes / theme fixes

Author: cvs0

package-lock.json

@@ -9,8 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@clerk/clerk-sdk-node": "^5.0.46",
-    "@clerk/nextjs": "^5.1.3",
+    "@clerk/backend": "^1.16.0",
+    "@clerk/clerk-sdk-node": "^5.0.61",
+    "@clerk/nextjs": "^6.3.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@hookform/resolvers": "^3.9.0",
@@ -51,7 +52,7 @@
     "crypto-js": "^4.2.0",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.383.0",
-    "next": "^14.2.13",
+    "next": "^15.0.3",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-day-picker": "^8.10.1",

package.json

@@ -0,0 +1,33 @@
+import { ClerkProvider } from "@clerk/nextjs";
+import type { Metadata } from "next";
+import { Montserrat } from "next/font/google";
+import "../globals.css";
+import { ModalProvider } from "@/providers/modal-provider";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/ui/app-sidebar";
+import { ToastProvider } from "@/providers/toast-provider";
+
+const inter = Montserrat({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "LockScript - Vault",
+  description: "Online security, made simple.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <SidebarProvider>
+      <ToastProvider />
+      <ModalProvider />
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  );
+}

src/app/(auth)/layout.tsx

@@ -1,17 +1,19 @@
+import { Icons } from "@/components/ui/icons";
 import VaultPage from "@/components/ui/vault/vault";
 import prismadb from "@/lib/prismadb";
-import {auth} from "@clerk/nextjs/server";
-import {Loader} from "lucide-react";
+import { auth } from "@clerk/nextjs/server";
+import { Loader } from "lucide-react";
 
 const Page = async () => {
-  const { userId } = auth();
+  const { userId } = await auth();
 
   if (!userId) {
     return (
       <div className="h-full w-full flex justify-center items-center">
+        <Icons.logo />
         <Loader className="text-black animate-spin" />
       </div>
-    )
+    );
   }
 
   const user = await prismadb.user.findUnique({
@@ -26,11 +28,7 @@ const Page = async () => {
     },
   });
 
-  return (
-    <>
-      <VaultPage user={user} />
-    </>
-  );
+  return <VaultPage user={user} />;
 };
 
 export default Page;

src/app/(main)/layout.tsx

@@ -7,7 +7,7 @@ export async function DELETE(
   { params }: { params: { passwordId: string } }
 ) {
   try {
-    const { userId } = auth();
+    const { userId } = await auth();
 
     if (!userId) {
       return new NextResponse("Unauthenticated", { status: 401 });

src/app/page.tsx src/app/(main)/page.tsxsrc/app/page.tsx renamed to src/app/(main)/page.tsx

@@ -4,7 +4,7 @@ import {NextResponse} from "next/server";
 
 export async function POST(req: Request) {
   try {
-    const { userId } = auth();
+    const { userId } = await auth();
     const body = await req.json();
 
     const { website, username, password } = body;

src/app/api/passwords/[passwordId]/route.ts

@@ -1,10 +1,13 @@
 import prismadb from "@/lib/prismadb";
-import { auth, clerkClient } from "@clerk/nextjs/server";
+import { auth, } from "@clerk/nextjs/server";
 import { NextResponse } from "next/server";
+import { createClerkClient } from '@clerk/backend'
+
+const clerkClient = createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY })
 
 export async function POST(req: Request) {
   try {
-    const { userId } = auth();
+    const { userId } = await auth();
 
     if (!userId) {
       return new NextResponse("Unauthenticated", { status: 401 });
@@ -40,4 +43,4 @@ export async function POST(req: Request) {
     console.error(error);
     return new Response("Internal Server Error", { status: 500 });
   }
-}
+}

src/app/api/passwords/route.ts

@@ -1,100 +1,111 @@
 @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
-
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 222.2 84% 4.9%;
-
-      --card: 0 0% 100%;
-      --card-foreground: 222.2 84% 4.9%;
-
-      --popover: 0 0% 100%;
-      --popover-foreground: 222.2 84% 4.9%;
-
-      --primary: 222.2 47.4% 11.2%;
-      --primary-foreground: 210 40% 98%;
-
-      --secondary: 210 40% 96.1%;
-      --secondary-foreground: 222.2 47.4% 11.2%;
-
-      --muted: 210 40% 96.1%;
-      --muted-foreground: 215.4 16.3% 46.9%;
-
-      --accent: 210 40% 96.1%;
-      --accent-foreground: 222.2 47.4% 11.2%;
-
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 40% 98%;
-
-      --border: 214.3 31.8% 91.4%;
-      --input: 214.3 31.8% 91.4%;
-      --ring: 222.2 84% 4.9%;
-
-      --radius: 0.5rem;
-
-      --sidebar-background: 0 0% 98%;
-
-      --sidebar-foreground: 240 5.3% 26.1%;
-
-      --sidebar-primary: 240 5.9% 10%;
-
-      --sidebar-primary-foreground: 0 0% 98%;
-
-      --sidebar-accent: 240 4.8% 95.9%;
-
-      --sidebar-accent-foreground: 240 5.9% 10%;
-
-      --sidebar-border: 220 13% 91%;
-
-      --sidebar-ring: 217.2 91.2% 59.8%;
-    }
-
-    .dark {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
-
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
-
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
-
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
-
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 349 100% 55.5%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 349 100% 55.5%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 349 100% 55.5%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 349 100% 55.5%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 349 100% 55.5%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 349 100% 55.5%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  :root {
+    --chart-1: 349 100% 55.5%;
+    --chart-2: 0 0 90;
+    --chart-3: 0 0 83;
+    --chart-4: 0 0 64;
+    --chart-5: 27 87% 67%;
+    font-family: Inter, sans-serif;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "salt";
+  }
 
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
+  .dark {
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
+  * {
+    @apply border-border;
+  }
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-      --sidebar-background: 240 5.9% 10%;
-      --sidebar-foreground: 240 4.8% 95.9%;
-      --sidebar-primary: 224.3 76.3% 48%;
-      --sidebar-primary-foreground: 0 0% 100%;
-      --sidebar-accent: 240 3.7% 15.9%;
-      --sidebar-accent-foreground: 240 4.8% 95.9%;
-      --sidebar-border: 240 3.7% 15.9%;
-      --sidebar-ring: 217.2 91.2% 59.8%;
+  @supports (font-variation-settings: normal) {
+    :root {
+      font-family: InterVariable, sans-serif;
+      font-feature-settings: "cv02", "cv03", "cv04", "cv11", "salt";
     }
   }
 
-  @layer base {
-    * {
-      @apply border-border;
-    }
-    body {
-      @apply bg-background text-foreground;
-    }
-  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}