refactor: Fixed some queries, updated Readme, for troubleshooting and testing

Author: jeremy-clerk

.env.example

@@ -0,0 +1,10 @@
+# Recommended to have an example env file for other users know what environment variables need to be set.
+
+# Get your keys from the Clerk dashboard at https://dashboard.clerk.com
+CLERK_SECRET_KEY=sk_
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+
+# If using a local docker container (local-database.yml)
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/lockscript?schema=public

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#Intellij Editors
+.idea

README.md

@@ -10,6 +10,47 @@ LockScript Vault is an open-source secure vault for passwords, cards, notes, and
 - Prisma
 - Zod
 
+## Getting Started
+
+Clone the repository
+```bash
+git clone [email protected]:Lockscript/Lockscript-Vault
+```
+```bash
+cd Lockscript-Vault
+```
+
+Repo is using yarn as a package manager. 
+
+[How To Install Yarn](https://classic.yarnpkg.com/lang/en/docs/install)
+
+Install dependencies
+```bash
+yarn install
+```
+
+### Setup local database (if required)
+
+Start Docker container (requires [Docker](https://docs.docker.com/engine/install/))
+
+```bash
+docker compose -f ./local-database.yml up -d
+```
+Generate database client
+
+```bash
+yarn run generate
+```
+```bash
+yarn run push
+```
+
+### Start the dev server
+```bash
+yarn run dev
+```
+
+
 ## How to contribute
 
 We accept contributions from the community, but you must follow some rules:

local-database.yml

@@ -0,0 +1,17 @@
+# Use postgres/example user/password credentials
+version: '3.1'
+services:
+  db:
+    container_name: lockscript-postgres
+    image: postgres
+    restart: always
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_PASSWORD: postgres
+    volumes:
+      - postgres:/var/lib/postgres/data
+volumes:
+    postgres:
+      external: false
+

src/app/(main)/page.tsx

@@ -1,32 +1,19 @@
 import {VaultPage} from "@/components/vault/vault-page";
-import prismadb from "@/lib/prismadb";
-import {auth} from "@clerk/nextjs/server";
-import {instantiateVault} from "../actions";
+import {auth, currentUser} from "@clerk/nextjs/server";
+import {getPasswords, instantiateVault} from "../actions";
 
-export const dynamic = "force-dynamic";
-
-const Page = async () => {
+export default async function Page(){
   const { userId, redirectToSignIn } = await auth();
 
   if (!userId) return redirectToSignIn();
 
-  const user = await prismadb.user.findUnique({
-    where: {
-      id: userId,
-    },
-    include: {
-      passwordItems: true,
-      cardItems: true,
-      pinItems: true,
-      noteItems: true,
-    },
-  });
+  const user = await getPasswords(userId)
 
   if (!user) {
-    instantiateVault();
+    const clerkUser = await currentUser()
+    if(!clerkUser) return redirectToSignIn()
+   await instantiateVault(clerkUser.id, clerkUser.username as string);
   }
 
   return <VaultPage user={user} />;
 };
-
-export default Page;

src/app/actions.ts

@@ -94,46 +94,29 @@ export async function createPasswordItem(
     throw new Error("Not authenticated");
   }
 
-  const user = await prismadb.user.findUnique({
-    where: {
-      id: userId,
-    },
-    include: {
-      passwordItems: true,
-    },
-  });
-
-  if (!user) {
-    throw new Error("User not found");
-  }
-
   const newPasswordItem = await prismadb.passwordItem.create({
     data: {
       username,
       website,
       password,
       updatedAt: new Date().toISOString(),
       createdAt: new Date().toISOString(),
-      userId: user.id,
+      user: {
+        connect: {
+          id: userId
+        }
+      }
     },
   });
 
   return newPasswordItem;
 }
 
-export async function instantiateVault() {
-  const { userId } = await auth()
-
-  if (!userId) {
-    throw new Error("Not authenticated");
-  }
-
-  const user = await currentUser()
-
+export async function instantiateVault(userId: string, username: string) {
   const vault = await prismadb.user.create({
     data: {
       id: userId,
-      username: user?.username!,
+      username: username,
     },
     include: {
       passwordItems: true,
@@ -145,3 +128,17 @@ export async function instantiateVault() {
 
   return vault;
 }
+
+export async function getPasswords(userId: string) {
+  return prismadb.user.findUnique({
+    where: {
+      id: userId,
+    },
+    include: {
+      passwordItems: true,
+      cardItems: true,
+      pinItems: true,
+      noteItems: true,
+    },
+  });
+}

src/components/vault/dialogs/create-password-dialog.tsx

@@ -1,27 +1,31 @@
-"use client"
-
 import {createPasswordItem} from "@/app/actions";
 import {Button} from "@/components/ui/button";
 import {Dialog,DialogContent,DialogFooter,DialogHeader,DialogTitle} from "@/components/ui/dialog";
 import {Input} from "@/components/ui/input";
 import {encrypt} from "@/utils/encryption";
 import {useUser} from "@clerk/nextjs";
 import {Loader2} from "lucide-react";
-import {useState} from "react";
+import {ChangeEvent, useState} from "react";
 import toast from "react-hot-toast";
 import {z} from "zod";
 
+const initialPasswordItemState = {
+  name: "",
+  username: "",
+  website: "",
+  password: "",
+}
+
 export const CreatePasswordDialog = ({
   open,
-  onClose,
+    onClose,
 }: {
   open: boolean;
-  onClose: () => void;
+  onClose: ()=> void
 }) => {
-  const [name, setName] = useState("");
-  const [username, setUsername] = useState("");
-  const [website, setWebsite] = useState("");
-  const [password, setPassword] = useState("");
+
+  const [passwordItem, setPasswordItem] = useState(initialPasswordItemState)
+
   const [loading, setLoading] = useState(false);
 
   const { user: clerkuser } = useUser();
@@ -47,12 +51,7 @@ export const CreatePasswordDialog = ({
 
   const handleSave = async () => {
     setLoading(true);
-    const validationResult = passwordSchema.safeParse({
-      name,
-      username,
-      website,
-      password,
-    });
+    const validationResult = passwordSchema.safeParse(passwordItem);
 
     if (!validationResult.success) {
       const errorMessage =
@@ -64,11 +63,12 @@ export const CreatePasswordDialog = ({
 
     try {
       await createPasswordItem(
-        encrypt(username, clerkuser),
-        encrypt(website, clerkuser),
-        encrypt(password, clerkuser)
+        encrypt(passwordItem.username, clerkuser),
+        encrypt(passwordItem.website, clerkuser),
+        encrypt(passwordItem.password, clerkuser)
       );
       toast.success("Password created");
+      setPasswordItem(initialPasswordItemState)
       onClose();
     } catch (error) {
       toast.error("Failed to create password");
@@ -77,6 +77,10 @@ export const CreatePasswordDialog = ({
     }
   };
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPasswordItem(prevState => ({...prevState, [e.target.name]: e.target.value}))
+  }
+
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent>
@@ -87,50 +91,54 @@ export const CreatePasswordDialog = ({
           <div className="relative">
             <Input
               placeholder="Name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
+              value={passwordItem.name}
+              onChange={handleChange}
               maxLength={50}
+              name="name"
             />
-            <div className="mt-1 text-sm text-gray-500">{name.length} / 50</div>
+            <div className="mt-1 text-sm text-gray-500">{passwordItem.name.length} / 50</div>
           </div>
           <div className="relative">
             <Input
               placeholder="Username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
+              value={passwordItem.username}
+              onChange={handleChange}
               maxLength={30}
+              name="username"
             />
             <div className="mt-1 text-sm text-gray-500">
-              {username.length} / 30
+              {passwordItem.username.length} / 30
             </div>
           </div>
           <div className="relative">
             <Input
               placeholder="Website"
-              value={website}
-              onChange={(e) => setWebsite(e.target.value)}
+              value={passwordItem.website}
+              onChange={handleChange}
               maxLength={1024}
+              name="website"
             />
             <div className="mt-1 text-sm text-gray-500">
-              {website.length} / 1024
+              {passwordItem.website.length} / 1024
             </div>
           </div>
           <div className="relative">
             <Input
               placeholder="Password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
+              value={passwordItem.password}
+              onChange={handleChange}
               type="password"
+              name="password"
               maxLength={128}
             />
             <div className=" mt-1 text-sm text-gray-500">
-              {password.length} / 128
+              {passwordItem.password.length} / 128
             </div>
           </div>
         </div>
         <DialogFooter>
           <div className="mt-4 flex justify-end gap-2">
-            <Button variant="outline" onClick={onClose}>
+            <Button variant="outline" onClick={()=>onClose()}>
               Cancel
             </Button>
             <Button onClick={handleSave}>