Add forgot username & password pages, and also check if the user is already logged in
This commit is contained in:
113
src/app/account/forgot-password/page.tsx
Normal file
113
src/app/account/forgot-password/page.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
113
src/app/account/forgot-username/page.tsx
Normal file
113
src/app/account/forgot-username/page.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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'>
|
||||
{result == -1
|
||||
<p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
|
||||
{loading
|
||||
? 'Loading...'
|
||||
: 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 == 0 ? (
|
||||
<form
|
||||
className='flex flex-col gap-2'
|
||||
onSubmit={async e => {
|
||||
e.preventDefault()
|
||||
{!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 (newPassword !== retypeNewPassword) {
|
||||
alert('Passwords must match')
|
||||
return
|
||||
}
|
||||
if (newPassword !== retypeNewPassword) {
|
||||
alert('Passwords must match')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await axios.post('/api/account/reset-password', {
|
||||
token,
|
||||
code: codeParam,
|
||||
password: newPassword
|
||||
})
|
||||
if (result.data.success) {
|
||||
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'
|
||||
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'>Update password</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.'
|
||||
: 'Password reset sucessfully'}
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
{result == 2 && (
|
||||
<div className='flex justify-center mt-6'>
|
||||
<button>Login</button>
|
||||
</div>
|
||||
try {
|
||||
const result = await axios.post(
|
||||
'/api/account/reset-password',
|
||||
{
|
||||
token,
|
||||
code: codeParam,
|
||||
password: newPassword
|
||||
}
|
||||
)
|
||||
if (result.data.success) {
|
||||
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'
|
||||
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'>Update password</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.'
|
||||
: 'Password reset sucessfully'}
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
{result == 2 && (
|
||||
<div className='flex justify-center mt-6'>
|
||||
<button>Login</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user