Add reset password page

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

@@ -0,0 +1,126 @@
+'use client'
+
+import './styles.css'
+import { Turnstile } from '@marsidev/react-turnstile'
+import { useEffect, useState } from 'react'
+import { DiscordButton } from '../../components/DiscordButton'
+import { HomeButton } from '../../components/HomeButton'
+import axios from 'axios'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+export default function CaptchaCodePage () {
+  const [token, setToken] = useState<string | null>(null)
+  const [code, setCode] = useState<string | null>(null)
+  const [result, setResult] = useState<number>(-1)
+  const params = useSearchParams()
+  const router = useRouter()
+
+  if (!params.get('code'))
+    return (
+      <div className='box'>
+        <HomeButton />
+        <DiscordButton />
+        <p className='px-8 -mt-2 -mb-2 text-center'>No code provided</p>
+      </div>
+    )
+
+  useEffect(() => {
+    const code = params.get('code')
+    if (code) setCode(code as string)
+  }, [params])
+
+  return (
+    <div className='box'>
+      <HomeButton />
+      <DiscordButton />
+      <p className='mb-4 px-8 -mt-2 text-center'>
+        {result == -1
+          ? 'Verify you are human to reset your password'
+          : 'Lncvrt Games password reset'}
+      </p>
+      {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 == 1 || result == 2) && (
+        <p className='mt-2 -mb-2 text-center text-sm'>
+          {result == 1
+            ? 'Unable to verify captcha, please reload page.'
+            : 'Password reset sucessfully'}
+        </p>
+      )}
+      {result == 0 && (
+        <form
+          className='flex flex-col gap-2'
+          onSubmit={async e => {
+            e.preventDefault()
+
+            const form = e.currentTarget
+            const formData = new FormData(form)
+            const password = formData.get('new-password') as string
+            const confirm = formData.get('retype-password') as string
+
+            if (password !== confirm) {
+              alert('Passwords must match')
+              return
+            }
+
+            try {
+              const result = await axios.post('/api/account/reset-password', {
+                token,
+                code,
+                password
+              })
+              if (result.data.success) {
+                setCode(result.data.data)
+                setResult(2)
+              } else {
+                alert(
+                  'Failed to reset password, error: ' +
+                    (result.data.message || 'n/a')
+                )
+              }
+            } catch (e: any) {
+              if (e.response) {
+                alert(
+                  'Failed to reset password, error: ' +
+                    (e.response.data?.message ||
+                      JSON.stringify(e.response.data))
+                )
+              } 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'
+            type='password'
+            autoComplete='new-password'
+            required
+          />
+          <input
+            id='retype-password'
+            name='retype-password'
+            placeholder='Re-type password'
+            type='password'
+            autoComplete='new-password'
+            required
+          />
+          <button type='submit'>Update password</button>
+        </form>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+@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 outline-0;
+}

src/app/globals.css

@@ -43,8 +43,9 @@ body {
   @apply flex flex-wrap gap-2 justify-center mt-2;
 }
 
-.downloads a {
+.downloads a,
-  @apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200;
+button {
+  @apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer;
 }
 
 .home-button {