password modal and logout token clear

components/Auth.tsx

@@ -1,8 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-import { FunctionComponent, useState } from 'react'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
+import { FunctionComponent } from 'react'
 
 import { matchProtectedRoute } from '../utils/tools'
 import useLocalStorage from '../utils/useLocalStorage'
@@ -14,22 +14,33 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
   const [token, setToken] = useLocalStorage(authTokenPath, '')
 
   return (
-    <div className="text-center my-20">
-      <div className="dark:text-white text-xl font-bold mb-8 mt-5">Enter Password</div>
+    <div className="flex flex-col space-y-4 max-w-sm mx-auto md:my-10">
+      <div className="mx-auto w-3/4 md:w-5/6">
+        <Image src={'/images/no-looking.png'} alt="authenticate" width={912} height={912} />
+      </div>
+      <div className="dark:text-gray-100 text-gray-900 text-lg font-bold">Enter Password</div>
+
+      <p className="text-sm text-gray-500">
+        This route (the folder itself and the files inside) is password protected. If you know the password, please
+        enter it below.
+      </p>
+
       <input
-        className="mr-2 text-center p-2 bg-blue-50 dark:bg-gray-600 dark:text-white rounded focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none"
+        className="font-mono p-2 bg-blue-50 dark:bg-gray-600 dark:text-white rounded focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none"
         type="text"
+        placeholder="************"
         value={token}
         onChange={e => {
           setToken(e.target.value)
         }}
       />
       <button
-        className="bg-blue-500 rounded px-3 py-[0.43em] text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600"
+        className="inline-flex space-x-2 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600"
         onClick={() => {
           router.reload()
         }}
       >
+        <span>Lemme in</span>
         <FontAwesomeIcon icon="arrow-right" />
       </button>
     </div>

components/FourOhFour.tsx

@@ -5,9 +5,13 @@ const FourOhFour: FunctionComponent<{ errorMsg: string }> = ({ errorMsg }) => {
   return (
     <div className="text-center my-20">
       <div className="mx-auto w-1/2 md:w-1/3">
-        <Image src={'/404.png'} alt="404" width={825} height={910} />
+        <Image src={'/images/empty.png'} alt="404" width={912} height={912} />
+      </div>
+      <div className="text-gray-500 mt-5">
+        Error: {errorMsg}.{' '}
+        <kbd className="border bg-gray-200 font-mono text-sm px-2 py-1 rounded border-opacity-20">F12</kbd> for more
+        details.
       </div>
-      <div className="text-gray-500 mt-5">Error: {errorMsg}</div>
     </div>
   )
 }

components/Navbar.tsx

@@ -1,24 +1,125 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Dialog, Transition } from '@headlessui/react'
+import toast, { Toaster } from 'react-hot-toast'
+
 import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Fragment, useState } from 'react'
 
 import siteConfig from '../config/site.json'
 
 const Navbar = () => {
+  const router = useRouter()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const clearTokens = () => {
+    setIsOpen(false)
+
+    siteConfig.protectedRoutes.forEach(r => {
+      localStorage.removeItem(r)
+    })
+
+    toast.success('Cleared all tokens')
+    setTimeout(() => {
+      router.reload()
+    }, 1000)
+  }
+
   return (
     <div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
       <div className="max-w-4xl w-full mx-auto flex items-center justify-between">
+        <Toaster />
+
         <h1 className="font-bold text-xl p-2 rounded dark:text-white hover:opacity-80">
           <Link href="/">{siteConfig.title}</Link>
         </h1>
-        <a
-          href="https://github.com/spencerwooo/onedrive-vercel-index"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="p-2 rounded dark:text-white hover:opacity-80"
-        >
-          <FontAwesomeIcon icon={['fab', 'github']} size="lg" />
-        </a>
+        <div className="flex items-center">
+          <button
+            className="flex space-x-2 items-center p-3 rounded dark:text-white hover:opacity-80"
+            onClick={() => setIsOpen(true)}
+          >
+            <FontAwesomeIcon icon="key" />
+            <span>Logout</span>
+          </button>
+          <a
+            href="https://github.com/spencerwooo/onedrive-vercel-index"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="p-2 rounded dark:text-white hover:opacity-80"
+          >
+            <FontAwesomeIcon icon={['fab', 'github']} size="lg" />
+          </a>
+        </div>
       </div>
+
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="fixed inset-0 z-10 overflow-y-auto" open={isOpen} onClose={() => setIsOpen(false)}>
+          <div className="min-h-screen px-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-100"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-50"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Dialog.Overlay className="fixed inset-0" />
+            </Transition.Child>
+
+            {/* This element is to trick the browser into centering the modal contents. */}
+            <span className="inline-block h-screen align-middle" aria-hidden="true">
+              &#8203;
+            </span>
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-100"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-50"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-900 shadow-lg rounded">
+                <Dialog.Title className="text-lg font-bold text-gray-900 dark:text-gray-100">
+                  Clear all tokens?
+                </Dialog.Title>
+                <div className="mt-2">
+                  <p className="text-sm text-gray-500">
+                    These tokens are used to authenticate yourself into password protected folders, clearing them means
+                    that you will need to re-enter the passwords again.
+                  </p>
+                </div>
+
+                <div className="mt-4 font-mono text-sm dark:text-gray-100 max-h-32 overflow-y-scroll">
+                  {siteConfig.protectedRoutes.map((r, i) => (
+                    <div key={i} className="flex space-x-1 items-center">
+                      <FontAwesomeIcon icon="key" />
+                      <span className="truncate">{r}</span>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-8 flex justify-end items-center">
+                  <button
+                    className="inline-flex space-x-2 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mr-3"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    className="inline-flex space-x-2 items-center justify-center bg-red-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-red-300 hover:bg-red-600"
+                    onClick={() => clearTokens()}
+                  >
+                    <FontAwesomeIcon icon={['far', 'trash-alt']} />
+                    <span>Clear all</span>
+                  </button>
+                </div>
+              </div>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition>
     </div>
   )
 }