Change Username & Password pages & also fixes and improvements to account page

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

@@ -0,0 +1,106 @@
+'use client'
+
+import { DiscordButton } from '@/app/components/DiscordButton'
+import axios from 'axios'
+import { BackButton } from '@/app/components/BackButton'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { getCookie, setCookie } from '@/util/cookie'
+
+export default function AccountChangePasswordPage () {
+  const [loading, setLoading] = useState<boolean>(true)
+  const router = useRouter()
+
+  const [newPassword, setNewPassword] = useState<string>('')
+  const [retypeNewPassword, setRetypeNewPassword] = useState<string>('')
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Change Account Password'
+
+    const token = getCookie('accountToken', '-1')
+    if (token === '-1') {
+      router.push('/account/login')
+    } else setLoading(false)
+  }, [router])
+
+  return (
+    <div className='box'>
+      <BackButton href='/account' />
+      <DiscordButton />
+      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
+        {loading ? 'Loading...' : 'Change Lncvrt Games Account Password'}
+      </p>
+      {!loading && (
+        <form
+          className='flex flex-col gap-2'
+          onSubmit={async e => {
+            e.preventDefault()
+
+            if (newPassword !== retypeNewPassword) {
+              alert('Passwords must match')
+              return
+            }
+
+            try {
+              const result = await axios.post(
+                '/api/account/change-password',
+                {
+                  newPassword
+                },
+                {
+                  headers: {
+                    authorization: getCookie('accountToken', '-1')
+                  }
+                }
+              )
+              if (result.data.success) {
+                if (result.data.data)
+                  setCookie('accountToken', result.data.data)
+                router.push('/account')
+              } else {
+                alert(
+                  'Failed to change password, error: ' +
+                    (result.data.message || 'n/a')
+                )
+              }
+            } catch (e: any) {
+              if (e.response) {
+                alert(
+                  'Failed to change password, error: ' +
+                    (e.response.data?.message ||
+                      JSON.stringify(e.response.data))
+                )
+              } else if (e.request) {
+                alert('Failed to change password, no response from server.')
+              } else {
+                alert('Failed to change password, error: ' + e.message)
+              }
+            }
+          }}
+        >
+          <input
+            id='new-password'
+            name='new-password'
+            placeholder='New password'
+            type='password'
+            autoComplete='new-password'
+            value={newPassword}
+            onChange={e => setNewPassword(e.target.value)}
+            required
+          />
+          <input
+            id='retype-new-password'
+            name='retype-new-password'
+            placeholder='Re-type password'
+            type='password'
+            autoComplete='new-password'
+            value={retypeNewPassword}
+            onChange={e => setRetypeNewPassword(e.target.value)}
+            required
+          />
+          <button type='submit'>Change Password</button>
+        </form>
+      )}
+    </div>
+  )
+}

src/app/account/change-username/page.tsx

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

src/app/account/page.tsx

@@ -27,7 +27,12 @@ export default function AccountPage () {
       <p className={`px-8 -my-2 text-center`}>
         {loading ? 'Loading...' : 'Account'}
       </p>
-      <div className='flex justify-center flex-col gap-2 mt-6 text-center'>
+      {!loading && (
+        <>
+          <p className='mt-6'>
+            Logged in as: {getCookie('accountUsername', 'N/A')}
+          </p>
+          <div className='flex justify-center flex-col gap-2 mt-4 text-center'>
             <Link
               href='/account/change-username'
               draggable={false}
@@ -57,6 +62,8 @@ export default function AccountPage () {
               Logout
             </button>
           </div>
+        </>
+      )}
     </div>
   )
 }