From 2be4dd7966ab5bad0d3c70deffca9ad0932c5924 Mon Sep 17 00:00:00 2001
From: Prateek <prateekkukreja5@gmail.com>
Date: Wed, 25 Sep 2024 19:23:50 +0530
Subject: [PATCH] Kukreja (#10)

* Update home page UI and feat: Add an archive feature

* Edit URL validation logic to handle duplicates

* Add middleware for authentication

* Refactor Navbar color logic based on pathname

* Refactor Home component

* Improve error handling in signIn component and refactor name fields to use camelCase

* build error fix

---------

Co-authored-by: Prateek <prateekkukreja@outlook.com>
Co-authored-by: Prateek Rohilla <prateekrohilla4.pr@gmail.com>
---
 app/MobileNav.js               |   6 +-
 app/archive/page.js            | 133 ++++++++++++++++++++++++++
 app/email-verification/page.js |   2 +-
 app/navbar.js                  |  58 +++++++-----
 app/page.js                    | 164 ++++++++++++++++++++-------------
 app/signin/page.js             |   4 +-
 app/signup/page.js             |  24 ++---
 middleware.js                  |  23 +++++
 8 files changed, 308 insertions(+), 106 deletions(-)
 create mode 100644 app/archive/page.js
 create mode 100644 middleware.js

diff --git a/app/MobileNav.js b/app/MobileNav.js
index 1ba4e99..01ae616 100644
--- a/app/MobileNav.js
+++ b/app/MobileNav.js
@@ -25,12 +25,12 @@ export default function MobileNav() {
         </Link>
         <Link href="/about">
           <span className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 cursor-pointer">
-            About
+            Archive
           </span>
         </Link>
         <Link href="/contact">
           <span className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 cursor-pointer">
-            Contact
+            Profile
           </span>
         </Link>
       </div>
@@ -41,7 +41,7 @@ export default function MobileNav() {
 
           <button
             onClick={handleSignOut}
-            className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"
+            className="text-gray-700 hover:text-gray-900 bg-gray-100 px-3 py-2 rounded-md text-sm font-medium"
           >
             Sign Out
           </button>
diff --git a/app/archive/page.js b/app/archive/page.js
new file mode 100644
index 0000000..ac0bdea
--- /dev/null
+++ b/app/archive/page.js
@@ -0,0 +1,133 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Cookies from 'js-cookie'
+import { MdDelete } from 'react-icons/md'
+import TimeAgo from '../timeAgo'
+
+function Archive() {
+  const [archiveURLs, setArchiveURLs] = useState([])
+  const [token, setToken] = useState(Cookies.get('jwt'))
+  const webURL = process.env.NEXT_PUBLIC_WEB_URL
+
+  useEffect(() => {
+    fetchArchiveURLs()
+  }, [])
+
+  const fetchArchiveURLs = async () => {
+    try {
+      const response = await fetch(webURL + 'shortener/archived', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      const archiveUrls = await response.json()
+      setArchiveURLs(archiveUrls)
+    } catch (error) {
+      console.error('Error fetching Archive URLs:', error)
+    }
+  }
+
+  const handleDeleteUrl = async (id) => {
+    try {
+      await fetch(webURL + `shortener/${id}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      const updatedArchiveUrl = archiveURLs.filter((url) => url.id !== id)
+      setArchiveURLs(updatedArchiveUrl)
+    } catch (error) {
+      console.error('Error Deleting Archive URL:', error)
+    }
+  }
+
+  return (
+    <section className="flex flex-col items-center min-h-screen bg-[#f4f4f5]">
+      {archiveURLs.length > 0 ? (
+        <div className="my-10 mx-2 w-full max-w-4xl border-2 rounded-3xl bg-white overflow-x-auto">
+          <div className="h-20 flex items-center mx-4">
+            <h2 className="font-bold">Archive History</h2>
+          </div>
+          <table className="table-auto w-full border-collapse border-none">
+            <thead>
+              <tr className="bg-gray-200">
+                <th className="px-4 py-2">Original URL</th>
+                <th className="px-4 py-2">Shortened URL</th>
+                <th className="px-4 py-2">Clicks</th>
+                <th className="px-4 py-2">Creation Date</th>
+                <th className="px-4 py-2">Last Updated</th>
+                <th className="px-4 py-2"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {archiveURLs
+                .sort(
+                  (a, b) =>
+                    new Date(b.updatedAt).getTime() -
+                    new Date(a.updatedAt).getTime()
+                )
+                .map(
+                  ({
+                    id,
+                    originalUrl,
+                    shortUrl,
+                    clicks,
+                    archived,
+                    createdAt,
+                    updatedAt,
+                  }) => (
+                    <tr key={id} className="text-center">
+                      <td className="px-4 py-2 break-all">
+                        <a
+                          href={originalUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-teal-500 hover:text-teal-700"
+                        >
+                          {originalUrl.substring(0, 10)}...
+                        </a>
+                      </td>
+                      <td className="px-4 py-2">
+                        <a
+                          href={'https://gehe.fyi/' + shortUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-teal-500 hover:text-teal-700"
+                        >
+                          {shortUrl}
+                        </a>
+                      </td>
+                      <td className="px-4 py-2">{clicks}</td>
+                      <td className="px-4 py-2">
+                        <TimeAgo date={createdAt} title={'Created at'} />
+                      </td>
+                      <td className="px-4 py-2">
+                        <TimeAgo date={updatedAt} title={'Updated'} />
+                      </td>
+                      <td className="px-4 py-2">
+                        <MdDelete
+                          className="cursor-pointer hover:opacity-60"
+                          onClick={() => handleDeleteUrl(id)}
+                        />
+                      </td>
+                    </tr>
+                  )
+                )}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        'fetching archive URLs...'
+      )}
+    </section>
+  )
+}
+
+export default Archive
diff --git a/app/email-verification/page.js b/app/email-verification/page.js
index 4f3db6d..caa5a6b 100644
--- a/app/email-verification/page.js
+++ b/app/email-verification/page.js
@@ -60,7 +60,7 @@ export default function Verification() {
           {/* OTP Verification */}
           <div className="mb-4">
             <label htmlFor="email" className="block text-gray-700 mb-2">
-              We've sent a code to
+              {`We've sent a code to`}
             </label>
             <input
               type="text"
diff --git a/app/navbar.js b/app/navbar.js
index c33b92d..19eba59 100644
--- a/app/navbar.js
+++ b/app/navbar.js
@@ -1,17 +1,21 @@
 // components/Navbar.js
 'use client'
 
-import { useContext, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import Link from 'next/link'
 import MobileNav from './MobileNav'
 import { AuthContext } from './AuthContext'
-import { useRouter } from 'next/navigation'
+import { usePathname } from 'next/navigation'
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false)
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const { token, logout } = useContext(AuthContext)
-  const router = useRouter()
+
+  const pathname = usePathname()
+
+  const bgColor = pathname === '/' ? 'bg-[#27272a]' : 'bg-[#f4f4f5]'
+  const color = pathname === '/' ? 'text-white' : 'text-black'
 
   async function handleSignOut() {
     try {
@@ -22,48 +26,58 @@ export default function Navbar() {
     }
   }
   return (
-    <nav className="bg-white shadow-md">
+    <nav className={`${bgColor} shadow-md`}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between h-16">
           {/* Logo or App Name */}
           <div className="flex-shrink-0 flex items-center">
             <Link href="/">
-              <span className="text-xl font-bold text-teal-600 cursor-pointer">
-                Shortify
+              <span className="text-xl md:text-2xl font-bold text-teal-600 cursor-pointer">
+                Gehe.fyi
               </span>
             </Link>
           </div>
 
           {/* Desktop Navigation Links and Buttons */}
-          <div className="hidden sm:ml-6 sm:flex sm:items-center">
-            <div className="flex space-x-4">
+
+          {token && (
+            <div className="hidden sm:ml-6 sm:flex sm:items-center">
               <Link href="/">
-                <span className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium cursor-pointer">
+                <span
+                  className={`${color} hover:opacity-80 px-4 py-2 rounded-md text-base font-medium cursor-pointer`}
+                >
                   Home
                 </span>
               </Link>
-              <Link href="/about">
-                <span className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium cursor-pointer">
-                  About
+              <Link href="/archive">
+                <span
+                  className={`${color} hover:opacity-80 px-4 py-2 rounded-md text-base font-medium cursor-pointer`}
+                >
+                  Archive
                 </span>
               </Link>
-              <Link href="/contact">
-                <span className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium cursor-pointer">
-                  Contact
+              <Link href="/profile">
+                <span
+                  className={`${color} hover:opacity-80 px-4 py-2 rounded-md text-base font-medium cursor-pointer`}
+                >
+                  Profile
                 </span>
               </Link>
             </div>
+          )}
 
+          <div className="hidden sm:ml-6 sm:flex sm:items-center">
             {token ? (
               <>
                 {/* Sign Out Button */}
-
-                <button
-                  onClick={handleSignOut}
-                  className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  Sign Out
-                </button>
+                <div className="flex space-x-4 items-center">
+                  <button
+                    onClick={handleSignOut}
+                    className="w-full text-gray-700 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 px-3 py-2 rounded-md text-base font-medium"
+                  >
+                    Sign Out
+                  </button>
+                </div>
               </>
             ) : (
               <>
diff --git a/app/page.js b/app/page.js
index ff43435..e5969b9 100644
--- a/app/page.js
+++ b/app/page.js
@@ -4,12 +4,11 @@
 import { useContext, useEffect, useState } from 'react'
 import Cookies from 'js-cookie'
 import { formatDistanceToNow } from 'date-fns'
-import { AuthContext } from './AuthContext'
 import { useRouter } from 'next/navigation'
-import { MdDelete } from 'react-icons/md'
 import { RiEdit2Fill } from 'react-icons/ri'
 import { TiTick } from 'react-icons/ti'
 import TimeAgo from './timeAgo'
+import Link from 'next/link'
 
 export default function Home() {
   const webURL = process.env.NEXT_PUBLIC_WEB_URL
@@ -27,12 +26,8 @@ export default function Home() {
   const [selectedUrls, setSelectedUrls] = useState([])
 
   useEffect(() => {
-    if (!token) {
-      router.push('/signin')
-    } else {
-      fetchAllURLs()
-    }
-  }, [token, router])
+    fetchAllURLs()
+  }, [])
 
   async function fetchAllURLs() {
     try {
@@ -75,27 +70,8 @@ export default function Home() {
     } catch (err) {
       setError(err.message || 'An unexpected error occurred')
     } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleDeleteSelected = async () => {
-    try {
-      for (let id of selectedUrls) {
-        await fetch(webURL + `shortener/${id}`, {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-        })
-      }
-      // Filter out the deleted URLs from the state
-      const updatedURLs = URLs.filter((url) => !selectedUrls.includes(url.id))
-      setURLs(updatedURLs)
-      setSelectedUrls([]) // Clear the selection
-    } catch (error) {
-      console.error('Error deleting URLs:', error)
+      setTimeout(() => setLoading(false), 1000)
+      setTimeout(() => setShortenedUrl(''), 1000) // Clear message after 1 seconds
     }
   }
 
@@ -127,6 +103,15 @@ export default function Home() {
         }),
       })
 
+      console.log(response.status)
+      if (response.status === 400) {
+        // Assuming 409 is returned by the backend when there's a duplicate URL
+        setError(
+          'Shortened URL already exists. Please choose a different name.'
+        )
+        return
+      }
+
       const data = await response.json()
 
       const updatedURLs = URLs.map((url) => {
@@ -149,6 +134,8 @@ export default function Home() {
   }
 
   const handleArchiveSelected = async () => {
+    setLoading(true)
+
     try {
       for (let id of selectedUrls) {
         await fetch(webURL + `shortener/${id}/archive`, {
@@ -165,41 +152,80 @@ export default function Home() {
       setSelectedUrls([]) // Clear the selection
     } catch (error) {
       console.error('Error Archive URLs:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDeleteSelected = async () => {
+    setLoading(true)
+
+    try {
+      for (let id of selectedUrls) {
+        await fetch(webURL + `shortener/${id}`, {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+        })
+      }
+      // Filter out the deleted URLs from the state
+      const updatedURLs = URLs.filter((url) => !selectedUrls.includes(url.id))
+      setURLs(updatedURLs)
+      setSelectedUrls([]) // Clear the selection
+    } catch (error) {
+      console.error('Error deleting URLs:', error)
+    } finally {
+      setLoading(false)
     }
   }
 
   return (
     <>
-      <main className="relative flex flex-col items-center min-h-screen bg-gray-100 pt-4 px-2">
-        <h1 className="text-4xl font-bold mb-8 mt-6 text-gray-800">
-          URL Shortener
-        </h1>
-        <form onSubmit={handleShortenUrl} className="w-full max-w-md">
-          <div className="flex items-center border-b border-teal-500 py-2">
-            <input
-              type="url"
-              placeholder="Enter the URL to shorten"
-              value={originalUrl}
-              onChange={(e) => setOriginalUrl(e.target.value)}
-              required
-              className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
-            />
-            <button
-              type="submit"
-              disabled={loading}
-              className={`flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded ${
-                loading ? 'opacity-50 cursor-not-allowed' : ''
-              }`}
-            >
-              {loading ? 'Shortening...' : 'Shorten URL'}
-            </button>
-          </div>
-        </form>
+      <main className="relative flex flex-col items-center min-h-screen bg-[#f4f4f5]">
+        <div className="h-[40vh] bg-[#27272a] w-full flex justify-center items-center">
+          <h1 className="text-4xl md:text-5xl font-bold mb-16 mt-6 text-white">
+            URL Shortener
+          </h1>
+        </div>
+        <div className="static inset-0 flex justify-center items-center mb-16">
+          <form
+            onSubmit={handleShortenUrl}
+            className="absolute w-full max-w-2xl bg-white px-2 py-3 md:px-10 md:py-6 rounded-md shadow-lg "
+          >
+            <div className="flex items-center border-b border-teal-500 py-2">
+              <input
+                type="url"
+                placeholder="Enter the URL to shorten"
+                value={originalUrl}
+                onChange={(e) => setOriginalUrl(e.target.value)}
+                required
+                className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
+              />
+              <button
+                type="submit"
+                disabled={loading}
+                className={`flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-md border-4 text-white py-2 px-3 rounded ${
+                  loading ? 'opacity-50 cursor-not-allowed' : ''
+                }`}
+              >
+                {loading ? 'Shortening...' : 'Shorten URL'}
+              </button>
+            </div>
+          </form>
+        </div>
         {error && <p className="text-red-500 mt-4">{error}</p>}
         {shortenedUrl && (
           <p className="mt-4 text-green-500">Shortened URL: {shortenedUrl}</p>
         )}
-        {URLs.length > 0 ? (
+        {loading ? (
+          <div className="flex flex-row gap-2 justify-center items-center">
+            <div className="w-4 h-4 rounded-full bg-teal-500 animate-bounce [animation-delay:.7s]"></div>
+            <div className="w-4 h-4 rounded-full bg-teal-500 animate-bounce [animation-delay:.3s]"></div>
+            <div className="w-4 h-4 rounded-full bg-teal-500 animate-bounce [animation-delay:.7s]"></div>
+          </div>
+        ) : URLs.length > 0 ? (
           <div className="my-10 mx-2 w-full max-w-4xl border-2 rounded-3xl bg-white overflow-x-auto">
             <div className="h-20 flex items-center mx-4">
               <h2 className="font-bold">Shortify History</h2>
@@ -212,13 +238,13 @@ export default function Home() {
                       type="checkbox"
                       className="transform scale-150"
                       checked={selectedUrls.length === URLs.length}
+                      readOnly
                     />
                   </th>
-                  <th className="px-4 py-2">URL Id</th>
+
                   <th className="px-4 py-2">Original URL</th>
                   <th className="px-4 py-2">Shortened URL</th>
                   <th className="px-4 py-2">Clicks</th>
-                  <th className="px-4 py-2">Archived</th>
                   <th className="px-4 py-2">Creation Date</th>
                   <th className="px-4 py-2">Last Updated</th>
                   <th className="px-4 py-2"></th>
@@ -247,7 +273,6 @@ export default function Home() {
                           onChange={() => handleCheckboxChange(id)}
                         />
                       </td>
-                      <td className="px-4 py-2">{id.substring(0, 8)}...</td>
                       <td className="px-4 py-2 break-all">
                         <a
                           href={originalUrl}
@@ -255,7 +280,7 @@ export default function Home() {
                           rel="noopener noreferrer"
                           className="text-teal-500 hover:text-teal-700"
                         >
-                          {originalUrl.substring(0, 10)}...
+                          {originalUrl.substring(0, 15)}...
                         </a>
                       </td>
                       <td className="px-4 py-2">
@@ -278,7 +303,6 @@ export default function Home() {
                         )}
                       </td>
                       <td className="px-4 py-2">{clicks}</td>
-                      <td className="px-4 py-2">{archived ? 'Yes' : 'No'}</td>
                       <td className="px-4 py-2">
                         <TimeAgo date={createdAt} title={'Created at'} />
                       </td>
@@ -305,18 +329,17 @@ export default function Home() {
             </table>
           </div>
         ) : (
-          <p>No URL Available</p>
+          <div className="h-[70vh] max-w-4xl w-full my-14 bg-white border-2 rounded-3xl"></div>
         )}
 
         {deletedUrl && (
           <p className="mt-4 text-green-500">Shortened URL: {deletedUrl}</p>
         )}
-
         {selectedUrls.length > 0 && (
           <div
             className={`action_menu fixed bottom-[-100%] transform transition-transform duration-500 ease-in-out ${
-              selectedUrls.length > 0 ? 'bottom-[10%] md:bottom-[13%]' : ''
-            } flex justify-between items-center text-teal-500 bg-white rounded w-full md:w-[500px] h-16 md:h-20 px-2 md:px-3 py-4 md:py-6 border`}
+              selectedUrls.length > 0 ? 'bottom-[6%]' : ''
+            } flex justify-between items-center text-teal-500 bg-white rounded-xl w-full md:w-[500px] h-16 md:h-20 px-2 md:px-3 py-4 md:py-6 border shadow-xl`}
           >
             <div>
               <span className="p-1 bg-teal-500 text-white rounded text-xs md:text-base">
@@ -327,13 +350,14 @@ export default function Home() {
 
             <div className="flex gap-2 md:gap-3">
               <button
-                className="px-2 py-1 border rounded bg-teal-500 hover:bg-teal-700 text-white text-xs md:text-base"
+                type="submit"
+                className={`flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-md border-4 text-white py-1 px-2 rounded `}
                 onClick={handleDeleteSelected}
               >
                 Delete
               </button>
               <button
-                className="px-2 py-1 border rounded hover:bg-[#f3f4f6] text-xs md:text-base"
+                className={`flex-shrink-0 bg-white hover:bg-[#f3f4f6] border-teal-500 hover:border-teal-700 text-md border text-teal-500 py-1 px-2 rounded `}
                 onClick={handleArchiveSelected}
               >
                 Archive
@@ -341,6 +365,14 @@ export default function Home() {
             </div>
           </div>
         )}
+        <div className="static md:fixed md:right-0 md:bottom-28 md:-rotate-90">
+          <Link
+            href="/archive"
+            className="text-[#26a8ed] hover:underline underline-offset-2"
+          >
+            View the archives →
+          </Link>
+        </div>
       </main>
     </>
   )
diff --git a/app/signin/page.js b/app/signin/page.js
index 567cca9..934f795 100644
--- a/app/signin/page.js
+++ b/app/signin/page.js
@@ -34,7 +34,7 @@ export default function Signin() {
 
       if (!res.ok) {
         const errorData = await res.json()
-        throw new Error(errorData.message || 'Failed to sign in')
+        throw new Error(errorData.error || 'Failed to sign in')
       }
 
       const { token } = await res.json()
@@ -47,7 +47,7 @@ export default function Signin() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100 p-4">
+    <div className="flex items-center justify-center min-h-screen bg-[#f4f4f5] p-4">
       <div className="w-full max-w-md bg-white rounded shadow-md p-6">
         <h2 className="text-2xl font-bold mb-6 text-gray-800">Sign In</h2>
         <form onSubmit={handleSubmit}>
diff --git a/app/signup/page.js b/app/signup/page.js
index 20c205b..6bc063e 100644
--- a/app/signup/page.js
+++ b/app/signup/page.js
@@ -18,8 +18,8 @@ export default function Signup() {
   const { updateUser } = useContext(UserContext)
 
   const [formData, setFormData] = useState({
-    firstname: '',
-    lastname: '',
+    firstName: '',
+    lastName: '',
     email: '',
     password: '',
   })
@@ -52,7 +52,7 @@ export default function Signup() {
 
       if (!res.ok) {
         const errorData = await res.json()
-        throw new Error(errorData.message || 'Failed to sign up')
+        throw new Error(errorData.error || 'Failed to sign up')
       }
 
       const data = await res.json()
@@ -67,20 +67,20 @@ export default function Signup() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100 p-4">
+    <div className="flex items-center justify-center min-h-screen bg-[#f4f4f5] p-4">
       <div className="w-full max-w-md bg-white rounded shadow-md p-6">
         <h2 className="text-2xl font-bold mb-6 text-gray-800">Sign Up</h2>
         <form onSubmit={handleSubmit}>
           {/* First Name */}
           <div className="mb-4">
-            <label htmlFor="firstname" className="block text-gray-700 mb-2">
+            <label htmlFor="firstName" className="block text-gray-700 mb-2">
               First Name
             </label>
             <input
               type="text"
-              name="firstname"
-              id="firstname"
-              value={formData.firstname}
+              name="firstName"
+              id="firstName"
+              value={formData.firstName}
               onChange={handleChange}
               required
               className="w-full px-3 py-2 border rounded focus:outline-none focus:border-teal-500"
@@ -88,14 +88,14 @@ export default function Signup() {
           </div>
           {/* Last Name */}
           <div className="mb-4">
-            <label htmlFor="lastname" className="block text-gray-700 mb-2">
+            <label htmlFor="lastName" className="block text-gray-700 mb-2">
               Last Name
             </label>
             <input
               type="text"
-              name="lastname"
-              id="lastname"
-              value={formData.lastname}
+              name="lastName"
+              id="lastName"
+              value={formData.lastName}
               onChange={handleChange}
               required
               className="w-full px-3 py-2 border rounded focus:outline-none focus:border-teal-500"
diff --git a/middleware.js b/middleware.js
new file mode 100644
index 0000000..94640e1
--- /dev/null
+++ b/middleware.js
@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  const path = request.nextUrl.pathname
+
+  const isPublic = path === '/signin' || path === '/signup'
+
+  const token = request.cookies.get('jwt')?.value
+
+  if (isPublic && token) {
+    return NextResponse.redirect(new URL('/', request.nextUrl))
+  }
+
+  if (!isPublic && !token) {
+    return NextResponse.redirect(new URL('/signin', request.nextUrl))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: ['/', '/archive', '/profile', '/signin', '/signup'],
+}