Add forgot username & password pages, and also check if the user is already logged in

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

@@ -0,0 +1,113 @@
+'use client'
+
+import { Turnstile } from '@marsidev/react-turnstile'
+import { DiscordButton } from '../../components/DiscordButton'
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { BackButton } from '@/app/components/BackButton'
+import { getCookie } from '@/util/cookie'
+import { useRouter } from 'next/navigation'
+
+export default function AccountForgotPasswordPage () {
+  const [loading, setLoading] = useState<boolean>(true)
+  const router = useRouter()
+
+  const [token, setToken] = useState<string | null>(null)
+  const [result, setResult] = useState<number>(-1)
+
+  const [email, setEmail] = useState<string>('')
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Forgot Account Password'
+
+    const token = getCookie('accountToken', '-1')
+    if (token !== '-1') {
+      router.push('/account')
+    } else setLoading(false)
+  }, [])
+
+  return (
+    <div className='box'>
+      <BackButton href='/account/login' />
+      <DiscordButton />
+      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
+        {loading
+          ? 'Loading...'
+          : result == -1
+          ? 'Verify you are human to send a reset password email'
+          : 'Lncvrt Games Forgot Password'}
+      </p>
+      {!loading && (
+        <>
+          {result == -1 ? (
+            <Turnstile
+              siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
+              onSuccess={async token => {
+                setToken(token)
+                setResult(0)
+              }}
+              onError={() => setResult(1)}
+              className='flex justify-center'
+            />
+          ) : result == 0 ? (
+            <form
+              className='flex flex-col gap-2'
+              onSubmit={async e => {
+                e.preventDefault()
+
+                try {
+                  const result = await axios.post(
+                    '/api/account/forgot-password',
+                    {
+                      token,
+                      email: email
+                    }
+                  )
+                  if (result.data.success) {
+                    setResult(2)
+                  } else {
+                    alert(
+                      'Failed to request email, error: ' +
+                        (result.data.message || 'n/a')
+                    )
+                  }
+                } catch (e: any) {
+                  if (e.response) {
+                    alert(
+                      'Failed to request email, error: ' +
+                        (e.response.data?.message ||
+                          JSON.stringify(e.response.data))
+                    )
+                  } else if (e.request) {
+                    alert('Failed to request email, no response from server.')
+                  } else {
+                    alert('Failed to request email, error: ' + e.message)
+                  }
+                }
+              }}
+            >
+              <input
+                id='email'
+                name='email'
+                placeholder='Email'
+                type='email'
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                required
+              />
+              <button type='submit'>Send email</button>
+            </form>
+          ) : (
+            (result == 1 || result == 2) && (
+              <p className='mt-2 -mb-2 text-center text-sm'>
+                {result == 1
+                  ? 'Unable to verify captcha, please reload page.'
+                  : 'An email has been sent. Please check your inbox.'}
+              </p>
+            )
+          )}
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,113 @@
+'use client'
+
+import { Turnstile } from '@marsidev/react-turnstile'
+import { DiscordButton } from '../../components/DiscordButton'
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { BackButton } from '@/app/components/BackButton'
+import { getCookie } from '@/util/cookie'
+import { useRouter } from 'next/navigation'
+
+export default function AccountForgotUsernamePage () {
+  const [loading, setLoading] = useState<boolean>(true)
+  const router = useRouter()
+
+  const [token, setToken] = useState<string | null>(null)
+  const [result, setResult] = useState<number>(-1)
+
+  const [email, setEmail] = useState<string>('')
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Forgot Account Username'
+
+    const token = getCookie('accountToken', '-1')
+    if (token !== '-1') {
+      router.push('/account')
+    } else setLoading(false)
+  }, [])
+
+  return (
+    <div className='box'>
+      <BackButton href='/account/login' />
+      <DiscordButton />
+      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
+        {loading
+          ? 'Loading...'
+          : result == -1
+          ? 'Verify you are human to send a email with your username'
+          : 'Lncvrt Games Forgot Username'}
+      </p>
+      {!loading && (
+        <>
+          {result == -1 ? (
+            <Turnstile
+              siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
+              onSuccess={async token => {
+                setToken(token)
+                setResult(0)
+              }}
+              onError={() => setResult(1)}
+              className='flex justify-center'
+            />
+          ) : result == 0 ? (
+            <form
+              className='flex flex-col gap-2'
+              onSubmit={async e => {
+                e.preventDefault()
+
+                try {
+                  const result = await axios.post(
+                    '/api/account/forgot-username',
+                    {
+                      token,
+                      email: email
+                    }
+                  )
+                  if (result.data.success) {
+                    setResult(2)
+                  } else {
+                    alert(
+                      'Failed to request email, error: ' +
+                        (result.data.message || 'n/a')
+                    )
+                  }
+                } catch (e: any) {
+                  if (e.response) {
+                    alert(
+                      'Failed to request email, error: ' +
+                        (e.response.data?.message ||
+                          JSON.stringify(e.response.data))
+                    )
+                  } else if (e.request) {
+                    alert('Failed to request email, no response from server.')
+                  } else {
+                    alert('Failed to request email, error: ' + e.message)
+                  }
+                }
+              }}
+            >
+              <input
+                id='email'
+                name='email'
+                placeholder='Email'
+                type='email'
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                required
+              />
+              <button type='submit'>Send email</button>
+            </form>
+          ) : (
+            (result == 1 || result == 2) && (
+              <p className='mt-2 -mb-2 text-center text-sm'>
+                {result == 1
+                  ? 'Unable to verify captcha, please reload page.'
+                  : 'An email has been sent. Please check your inbox.'}
+              </p>
+            )
+          )}
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -5,9 +5,13 @@ import { DiscordButton } from '../../components/DiscordButton'
 import { HomeButton } from '../../components/HomeButton'
 import axios from 'axios'
 import { Suspense, useEffect, useState } from 'react'
-import { useSearchParams } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { getCookie } from '@/util/cookie'
 
 function ResetPasswordForm ({ codeParam }: { codeParam: string }) {
+  const [loading, setLoading] = useState<boolean>(true)
+  const router = useRouter()
+
   const [token, setToken] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
 
@@ -16,102 +20,116 @@ function ResetPasswordForm ({ codeParam }: { codeParam: string }) {
 
   useEffect(() => {
     document.title = 'Lncvrt Games - Reset Account Password'
+
+    const token = getCookie('accountToken', '-1')
+    if (token !== '-1') {
+      router.push('/account')
+    } else setLoading(false)
   }, [])
 
   return (
     <div className='box'>
       <HomeButton />
       <DiscordButton />
-      <p className='mb-4 px-8 -mt-2 text-center'>
+      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
-        {result == -1
+        {loading
+          ? 'Loading...'
+          : result == -1
           ? 'Verify you are human to reset your password'
           : 'Lncvrt Games password reset'}
       </p>
-      {result == -1 ? (
+      {!loading && (
-        <Turnstile
+        <>
-          siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
+          {result == -1 ? (
-          onSuccess={async token => {
+            <Turnstile
-            setToken(token)
+              siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
-            setResult(0)
+              onSuccess={async token => {
-          }}
+                setToken(token)
-          onError={() => setResult(1)}
+                setResult(0)
-          className='flex justify-center'
+              }}
-        />
+              onError={() => setResult(1)}
-      ) : result == 0 ? (
+              className='flex justify-center'
-        <form
+            />
-          className='flex flex-col gap-2'
+          ) : result == 0 ? (
-          onSubmit={async e => {
+            <form
-            e.preventDefault()
+              className='flex flex-col gap-2'
+              onSubmit={async e => {
+                e.preventDefault()
 
-            if (newPassword !== retypeNewPassword) {
+                if (newPassword !== retypeNewPassword) {
-              alert('Passwords must match')
+                  alert('Passwords must match')
-              return
+                  return
-            }
+                }
 
-            try {
+                try {
-              const result = await axios.post('/api/account/reset-password', {
+                  const result = await axios.post(
-                token,
+                    '/api/account/reset-password',
-                code: codeParam,
+                    {
-                password: newPassword
+                      token,
-              })
+                      code: codeParam,
-              if (result.data.success) {
+                      password: newPassword
-                setResult(2)
+                    }
-              } else {
+                  )
-                alert(
+                  if (result.data.success) {
-                  'Failed to reset password, error: ' +
+                    setResult(2)
-                    (result.data.message || 'n/a')
+                  } else {
-                )
+                    alert(
-              }
+                      'Failed to reset password, error: ' +
-            } catch (e: any) {
+                        (result.data.message || 'n/a')
-              if (e.response) {
+                    )
-                alert(
+                  }
-                  'Failed to reset password, error: ' +
+                } catch (e: any) {
-                    (e.response.data?.message ||
+                  if (e.response) {
-                      JSON.stringify(e.response.data))
+                    alert(
-                )
+                      'Failed to reset password, error: ' +
-              } else if (e.request) {
+                        (e.response.data?.message ||
-                alert('Failed to reset password, no response from server.')
+                          JSON.stringify(e.response.data))
-              } else {
+                    )
-                alert('Failed to reset password, error: ' + e.message)
+                  } else if (e.request) {
-              }
+                    alert('Failed to reset password, no response from server.')
-            }
+                  } else {
-          }}
+                    alert('Failed to reset password, error: ' + e.message)
-        >
+                  }
-          <input
+                }
-            id='new-password'
+              }}
-            name='new-password'
+            >
-            placeholder='New password'
+              <input
-            type='password'
+                id='new-password'
-            autoComplete='new-password'
+                name='new-password'
-            value={newPassword}
+                placeholder='New password'
-            onChange={e => setNewPassword(e.target.value)}
+                type='password'
-            required
+                autoComplete='new-password'
-          />
+                value={newPassword}
-          <input
+                onChange={e => setNewPassword(e.target.value)}
-            id='retype-new-password'
+                required
-            name='retype-new-password'
+              />
-            placeholder='Re-type password'
+              <input
-            type='password'
+                id='retype-new-password'
-            autoComplete='new-password'
+                name='retype-new-password'
-            value={retypeNewPassword}
+                placeholder='Re-type password'
-            onChange={e => setRetypeNewPassword(e.target.value)}
+                type='password'
-            required
+                autoComplete='new-password'
-          />
+                value={retypeNewPassword}
-          <button type='submit'>Update password</button>
+                onChange={e => setRetypeNewPassword(e.target.value)}
-        </form>
+                required
-      ) : (
+              />
-        (result == 1 || result == 2) && (
+              <button type='submit'>Update password</button>
-          <p className='mt-2 -mb-2 text-center text-sm'>
+            </form>
-            {result == 1
+          ) : (
-              ? 'Unable to verify captcha, please reload page.'
+            (result == 1 || result == 2) && (
-              : 'Password reset sucessfully'}
+              <p className='mt-2 -mb-2 text-center text-sm'>
-          </p>
+                {result == 1
-        )
+                  ? 'Unable to verify captcha, please reload page.'
-      )}
+                  : 'Password reset sucessfully'}
-      {result == 2 && (
+              </p>
-        <div className='flex justify-center mt-6'>
+            )
-          <button>Login</button>
+          )}
-        </div>
+          {result == 2 && (
+            <div className='flex justify-center mt-6'>
+              <button>Login</button>
+            </div>
+          )}
+        </>
       )}
     </div>
   )