fix an issue where entering password triggers reload

components/Auth.tsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import Image from 'next/image'
 import { useRouter } from 'next/router'
-import { FunctionComponent } from 'react'
+import { FunctionComponent, useState } from 'react'
 
 import { matchProtectedRoute } from '../utils/protectedRouteHandler'
 import useLocalStorage from '../utils/useLocalStorage'
@@ -11,7 +11,8 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
   const authTokenPath = matchProtectedRoute(redirect)
 
   const router = useRouter()
-  const [token, setToken] = useLocalStorage(authTokenPath, '')
+  const [token, setToken] = useState('')
+  const [persistedToken, setPersistedToken] = useLocalStorage(authTokenPath, '')
 
   return (
     <div className="md:my-10 flex flex-col max-w-sm mx-auto space-y-4">
@@ -37,6 +38,7 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
           }}
           onKeyPress={e => {
             if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+              setPersistedToken(token)
               router.reload()
             }
           }}

components/Navbar.tsx

@@ -76,7 +76,7 @@ const Navbar = () => {
               className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 flex items-center p-2 space-x-2 rounded"
               onClick={() => setIsOpen(true)}
             >
-              <span>Logout</span>
+              <span className="text-sm">Logout</span>
               <FontAwesomeIcon icon="sign-out-alt" />
             </button>
           )}
@@ -139,7 +139,7 @@ const Navbar = () => {
                     Cancel
                   </button>
                   <button
-                    className="focus:outline-none focus:ring focus:ring-red-300 hover:bg-red-600 inline-flex items-center justify-center px-4 py-2 space-x-2 text-white bg-red-500 rounded"
+                    className="focus:outline-none focus:ring focus:ring-red-300 hover:bg-red-400 inline-flex items-center justify-center px-4 py-2 space-x-2 text-white bg-red-500 rounded"
                     onClick={() => clearTokens()}
                   >
                     <FontAwesomeIcon icon={['far', 'trash-alt']} />