Finish account page (3 more endpoints left then done with accounts on here)

src/app/account/page.tsx

@@ -2,9 +2,10 @@
 
 import { HomeButton } from '@/app/components/HomeButton'
 import { DiscordButton } from '@/app/components/DiscordButton'
-import { getCookie } from '@/util/cookie'
+import { getCookie, unsetCookie } from '@/util/cookie'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 
 export default function AccountPage () {
   const [loading, setLoading] = useState<boolean>(true)
@@ -24,12 +25,42 @@ export default function AccountPage () {
       <HomeButton />
       <DiscordButton />
       <p className={`px-8 -my-2 text-center`}>
-        {loading
-          ? 'Loading...'
-          : 'Nothing on this page yet! You are logged in as ' +
-            getCookie('accountUsername', 'N/A') +
-            '.'}
+        {loading ? 'Loading...' : 'Account'}
       </p>
+      <div className='flex justify-center flex-col gap-2 mt-6 text-center'>
+        <Link
+          href='/account/change-username'
+          draggable={false}
+          className='button'
+        >
+          Change username
+        </Link>
+        <Link
+          href='/account/change-password'
+          draggable={false}
+          className='button'
+        >
+          Change password
+        </Link>
+        <Link
+          href='/account/refresh-login'
+          draggable={false}
+          className='button'
+        >
+          Refresh login
+        </Link>
+        <button
+          onClick={() => {
+            unsetCookie('accountToken')
+            unsetCookie('accountUsername')
+            unsetCookie('accountId')
+            router.push('/account/login')
+          }}
+          draggable={false}
+        >
+          Logout
+        </button>
+      </div>
     </div>
   )
 }

src/util/cookie.ts

@@ -6,6 +6,13 @@ export function setCookie (name: string, value: string): void {
   document.cookie = cookie
 }
 
+export function unsetCookie (name: string): void {
+  const cookie = `${encodeURIComponent(
+    name
+  )}=; Path=/; Max-Age=0; Secure; SameSite=Strict`
+  document.cookie = cookie
+}
+
 export function getCookie (name: string, defaultValue: string): string {
   const cookies = document.cookie.split('; ')
   for (const c of cookies) {