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,36 +27,43 @@ 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 && (
-        <Link
+        <>
-          href='/account/change-username'
+          <p className='mt-6'>
-          draggable={false}
+            Logged in as: {getCookie('accountUsername', 'N/A')}
-          className='button'
+          </p>
-        >
+          <div className='flex justify-center flex-col gap-2 mt-4 text-center'>
-          Change username
+            <Link
-        </Link>
+              href='/account/change-username'
-        <Link
+              draggable={false}
-          href='/account/change-password'
+              className='button'
-          draggable={false}
+            >
-          className='button'
+              Change username
-        >
+            </Link>
-          Change password
+            <Link
-        </Link>
+              href='/account/change-password'
-        <Link href='/account/login' draggable={false} className='button'>
+              draggable={false}
-          Refresh login
+              className='button'
-        </Link>
+            >
-        <button
+              Change password
-          onClick={() => {
+            </Link>
-            unsetCookie('accountToken')
+            <Link href='/account/login' draggable={false} className='button'>
-            unsetCookie('accountUsername')
+              Refresh login
-            unsetCookie('accountId')
+            </Link>
-            router.push('/account/login')
+            <button
-          }}
+              onClick={() => {
-          draggable={false}
+                unsetCookie('accountToken')
-        >
+                unsetCookie('accountUsername')
-          Logout
+                unsetCookie('accountId')
-        </button>
+                router.push('/account/login')
-      </div>
+              }}
+              draggable={false}
+            >
+              Logout
+            </button>
+          </div>
+        </>
+      )}
     </div>
   )
 }