Add a way to login to your account on the website

src/app/account/login/page.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { getCookie, setCookie } from '@/util/cookie'
+import { useEffect, useState } from 'react'
+import { HomeButton } from '@/app/components/HomeButton'
+import { DiscordButton } from '@/app/components/DiscordButton'
+import axios from 'axios'
+
+export default function AccountLoginPage () {
+  const [loading, setLoading] = useState<boolean>(true)
+  const router = useRouter()
+
+  useEffect(() => {
+    const token = getCookie('accountToken', '-1')
+    if (token !== '-1') {
+      router.push('/account')
+    } else setLoading(false)
+  }, [router])
+
+  return (
+    <div className='box'>
+      <HomeButton />
+      <DiscordButton />
+      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
+        {loading ? 'Loading...' : 'Lncvrt Games Login'}
+      </p>
+      {!loading && (
+        <form
+          className='flex flex-col gap-2'
+          onSubmit={async e => {
+            e.preventDefault()
+
+            const form = e.currentTarget
+            const formData = new FormData(form)
+            const username = formData.get('username') as string
+            const password = formData.get('password') as string
+
+            try {
+              const result = await axios.post('/api/account/login', {
+                username,
+                password
+              })
+              if (result.data.success) {
+                if (result.data.data.session)
+                  setCookie('accountToken', result.data.data.session)
+                if (result.data.data.username)
+                  setCookie('accountUsername', result.data.data.username)
+                if (result.data.data.id)
+                  setCookie('accountId', result.data.data.id)
+
+                router.push('/account')
+              } else {
+                alert(
+                  'Failed to login, error: ' + (result.data.message || 'n/a')
+                )
+              }
+            } catch (e: any) {
+              if (e.response) {
+                alert(
+                  'Failed to login, error: ' +
+                    (e.response.data?.message ||
+                      JSON.stringify(e.response.data))
+                )
+              } else if (e.request) {
+                alert('Failed to login, no response from server.')
+              } else {
+                alert('Failed to login, error: ' + e.message)
+              }
+            }
+          }}
+        >
+          <input
+            id='username'
+            name='username'
+            placeholder='Username'
+            type='username'
+            required
+          />
+          <input
+            id='password'
+            name='password'
+            placeholder='Password'
+            type='password'
+            required
+          />
+          <button type='submit'>Login</button>
+        </form>
+      )}
+    </div>
+  )
+}

src/app/account/page.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { HomeButton } from '@/app/components/HomeButton'
+import { DiscordButton } from '@/app/components/DiscordButton'
+import { getCookie } from '@/util/cookie'
+
+export default function AccountLoginPage () {
+  return (
+    <div className='box'>
+      <HomeButton />
+      <DiscordButton />
+      <p className={`px-8 -my-2 text-center`}>
+        Nothing on this page yet! You are logged in as{' '}
+        {getCookie('accountUsername', 'N/A')}.
+      </p>
+    </div>
+  )
+}

src/app/account/reset-password/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import './styles.css'
 import { Turnstile } from '@marsidev/react-turnstile'
 import { DiscordButton } from '../../components/DiscordButton'
 import { HomeButton } from '../../components/HomeButton'

src/app/account/reset-password/styles.css

@@ -1,5 +0,0 @@
-@import "tailwindcss";
-
-input {
-  @apply bg-[rgb(72,72,96)] focus:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] focus:border-[rgb(120,120,144)] rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer focus:cursor-text;
-}

src/app/globals.css

@@ -64,3 +64,7 @@ select {
 p a {
   @apply text-white underline;
 }
+
+input {
+  @apply bg-[rgb(72,72,96)] focus:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] focus:border-[rgb(120,120,144)] rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer focus:cursor-text;
+}

src/util/cookie.ts

@@ -0,0 +1,16 @@
+export function setCookie (name: string, value: string): void {
+  const maxAge = 60 * 60 * 24 * 90
+  const cookie = `${encodeURIComponent(name)}=${encodeURIComponent(
+    value
+  )}; Path=/; Max-Age=${maxAge}; Secure; SameSite=Strict`
+  document.cookie = cookie
+}
+
+export function getCookie (name: string, defaultValue: string): string {
+  const cookies = document.cookie.split('; ')
+  for (const c of cookies) {
+    const [k, v] = c.split('=')
+    if (decodeURIComponent(k) === name) return decodeURIComponent(v)
+  }
+  return defaultValue
+}