Add register page

src/app/account/register/page.tsx

@@ -0,0 +1,162 @@
+'use client'
+
+import { Turnstile } from '@marsidev/react-turnstile'
+import { DiscordButton } from '../../components/DiscordButton'
+import { HomeButton } from '../../components/HomeButton'
+import axios from 'axios'
+import { getCookie } from '@/util/cookie'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function AccountRegisterPage () {
+  const [loading, setLoading] = useState<boolean>(true)
+  const router = useRouter()
+
+  const [token, setToken] = useState<string | null>(null)
+  const [result, setResult] = useState<number>(-1)
+
+  const [username, setUsername] = useState<string>('')
+  const [email, setEmail] = useState<string>('')
+  const [retypeEmail, setRetypeEmail] = useState<string>('')
+  const [password, setPassword] = useState<string>('')
+  const [retypePassword, setRetypePassword] = useState<string>('')
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Account Register'
+
+    const token = getCookie('accountToken', '-1')
+    if (token !== '-1') {
+      router.push('/account')
+    } else setLoading(false)
+  }, [])
+
+  return (
+    <div className='box'>
+      <HomeButton />
+      <DiscordButton />
+      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
+        {loading
+          ? 'Loading...'
+          : result == -1
+          ? 'Verify you are human to register an account'
+          : 'Create a Lncvrt Games Account'}
+      </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()
+
+                if (email !== retypeEmail) {
+                  alert('Emails must match')
+                  return
+                }
+
+                if (password !== retypePassword) {
+                  alert('Passwords must match')
+                  return
+                }
+
+                try {
+                  const result = await axios.post('/api/account/register', {
+                    token,
+                    username,
+                    email,
+                    password
+                  })
+                  if (result.data.success) {
+                    router.push('/account/login')
+                  } else {
+                    alert(
+                      'Failed to register, error: ' +
+                        (result.data.message || 'n/a')
+                    )
+                  }
+                } catch (e: any) {
+                  if (e.response) {
+                    alert(
+                      'Failed to register, error: ' +
+                        (e.response.data?.message ||
+                          JSON.stringify(e.response.data))
+                    )
+                  } else if (e.request) {
+                    alert('Failed to register, no response from server.')
+                  } else {
+                    alert('Failed to register, error: ' + e.message)
+                  }
+                }
+              }}
+            >
+              <input
+                id='username'
+                name='username'
+                placeholder='Username'
+                type='username'
+                value={username}
+                onChange={e => setUsername(e.target.value)}
+                required
+              />
+              <input
+                id='email'
+                name='email'
+                placeholder='Email'
+                type='email'
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                required
+              />
+              <input
+                id='retype-email'
+                name='retype-email'
+                placeholder='Re-Type email'
+                type='email'
+                value={retypeEmail}
+                onChange={e => setRetypeEmail(e.target.value)}
+                required
+              />
+              <input
+                id='password'
+                name='password'
+                placeholder='Password'
+                type='password'
+                autoComplete='new-password'
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                required
+              />
+              <input
+                id='retype-password'
+                name='retype-password'
+                placeholder='Re-Type password'
+                type='password'
+                autoComplete='new-password'
+                value={retypePassword}
+                onChange={e => setRetypePassword(e.target.value)}
+                required
+              />
+              <button type='submit'>Register</button>
+            </form>
+          ) : (
+            result == 1 && (
+              <p className='mt-2 -mb-2 text-center text-sm'>
+                {'Unable to verify captcha, please reload page.'}
+              </p>
+            )
+          )}
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -71,7 +71,7 @@ function ResetPasswordForm ({ codeParam }: { codeParam: string }) {
                     }
                   )
                   if (result.data.success) {
-                    setResult(2)
+                    router.push('/account/login')
                   } else {
                     alert(
                       'Failed to reset password, error: ' +
@@ -116,19 +116,12 @@ function ResetPasswordForm ({ codeParam }: { codeParam: string }) {
               <button type='submit'>Update password</button>
             </form>
           ) : (
-            (result == 1 || result == 2) && (
+            result == 1 && (
               <p className='mt-2 -mb-2 text-center text-sm'>
-                {result == 1
-                  ? 'Unable to verify captcha, please reload page.'
-                  : 'Password reset sucessfully'}
+                Unable to verify captcha, please reload page.
               </p>
             )
           )}
-          {result == 2 && (
-            <div className='flex justify-center mt-6'>
-              <button>Login</button>
-            </div>
-          )}
         </>
       )}
     </div>