fix: fix authentication actions

src/app/actions/auth.ts

@@ -1,3 +1,5 @@
+"use server";
+
 import { redirect } from "next/navigation";
 import { cookies } from "next/headers";
 import { usersTable } from "@/lib/db/schema";
@@ -87,20 +89,24 @@ export async function getAuth() {
     return null;
   }
 
-  const decodedToken = jwt.decode(token) as jwt.JwtPayload;
-  const username = decodedToken.sub;
-  if (!username) {
+  try {
+    const decodedToken = jwt.verify(token, JWT_SECRET) as jwt.JwtPayload;
+    const username = decodedToken.sub;
+    if (!username) {
+      return null;
+    }
+
+    const users = await db.select()
+      .from(usersTable)
+      .where(eq(usersTable.username, username));
+    if (users.length === 0) {
+      return null;
+    }
+
+    return users[0];
+  } catch {
     return null;
   }
-
-  const users = await db.select()
-    .from(usersTable)
-    .where(eq(usersTable.username, username));
-  if (users.length === 0) {
-    return null;
-  }
-
-  return users[0];
 }
 
 export async function logOut() {

src/app/auth/page.tsx

@@ -9,14 +9,12 @@ export const metadata: Metadata = {
 export default function About() {
   return (
     <>
-      <div>
-        <h1 className="font-bold text-xl mb-2">Authenticate</h1>
-        <div className="flex gap-4 flex-col md:flex-row">
-          <AuthForm />
-          <AuthForm isRegister />
-        </div>
+      <h1 className="font-bold text-xl mb-2">Authenticate</h1>
+      <div className="flex gap-4 flex-col md:flex-row">
+        <AuthForm />
+        <AuthForm isRegister />
       </div>
-      <div className="text-center text-sm text-neutral-400">
+      <div className="text-center text-sm text-neutral-400 mt-6">
         <p>Welcome to Rhyme!</p>
         <p>Free service for writing and saving notes, lyrics, poetry, etc</p>
         <p>Made with ❤️ by <a href="https://misterkirill.com" className="font-bold hover:underline">Kirill Siukhin</a></p>

src/app/page.tsx

@@ -14,7 +14,7 @@ export default async function Home() {
       <Editor />
       <i className="text-center text-sm text-neutral-400">
         Changes are not saved!<br />
-        <Link href="/login" className="font-bold hover:underline">Log in</Link> to save your notes.
+        <Link href="/auth" className="font-bold hover:underline">Log in</Link> to save your notes.
       </i>
     </div>
   );

src/components/editor/Block.tsx

@@ -1,10 +1,9 @@
-"use client";
-
-import { ArrowDown, ArrowUp, LockOpen, Minus, Plus, X } from "lucide-react";
+import { ArrowDown, ArrowUp, LockOpen, Lock, Minus, Plus, X } from "lucide-react";
+import { IBlock } from "@/lib/db/schema";
 import IconOnlyButton from "../ui/IconOnlyButton";
 import LineInput from "./LineInput";
 
-export default function Block() {
+export default function Block({ block }: { block: IBlock }) {
   return (
     <div className="flex flex-col gap-2 w-full">
       <div className="border-2 border-neutral-800 rounded-lg p-3 w-full">
@@ -12,8 +11,9 @@ export default function Block() {
           type="text"
           placeholder="enter tag..."
           className="w-full focus:outline-none"
+          defaultValue={block.tag}
         />
-        <LineInput />
+        {block.lines.map((line, i) => <LineInput key={i} defaultValue={line} /> )}
         <div className="flex items-center mx-2 mt-2">
           <div className="flex gap-1 mr-4">
             <IconOnlyButton icon={<Plus size={18} />} />
@@ -25,7 +25,10 @@ export default function Block() {
           </div>
           <div className="flex gap-2 ml-auto">
             <IconOnlyButton icon={<X size={18} />} />
-            <IconOnlyButton icon={<LockOpen size={18} />} />
+            <IconOnlyButton
+              alwaysOn={block.isLocked}
+              icon={block.isLocked ? <Lock size={18} /> : <LockOpen size={18} />}
+            />
           </div>
         </div>
       </div>

src/components/editor/Editor.tsx

@@ -1,14 +1,41 @@
-"use client";
-
 import { Copy, Plus } from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
+import { IBlock, INote } from "@/lib/db/schema";
 import IconOnlyButton from "../ui/IconOnlyButton";
 import Block from "./Block";
 
-export default function Editor() {
+const defaultNoteId = uuidv4();
+
+const defaultNote: INote = {
+  id: defaultNoteId,
+  title: "Untitled",
+  creationTime: new Date(),
+  lastEdited: new Date(),
+  authorId: uuidv4(),
+};
+
+const defaultBlocks: IBlock[] = [
+  {
+    id: uuidv4(),
+    tag: "",
+    lines: ["", "", "", ""],
+    isLocked: false,
+    order: 1,
+    noteId: defaultNoteId,
+  },
+];
+
+export default function Editor({
+  note = defaultNote,
+  blocks = defaultBlocks,
+}: {
+  note?: INote;
+  blocks?: IBlock[];
+}) {
   return (
     <div className="flex flex-col items-center max-w-2xl w-full gap-4">
-      <input className="font-bold text-xl w-full text-center focus:outline-none" />
-      <Block />
+      <input className="font-bold text-xl w-full text-center focus:outline-none" defaultValue={note.title} />
+      {blocks.map((block) => <Block key={block.id} block={block} /> )}
       <div className="flex gap-2">
         <IconOnlyButton icon={<Plus size={24} />} />
         <IconOnlyButton icon={<Copy size={24} />} title="Copy note to clipboard" />