Fixes to other forms and add preview to upload page of icon marketplace

src/app/account/login/page.tsx

@@ -11,6 +11,9 @@ function LoginForm ({ redirect }: { redirect: string | null }) {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
 
+  const [username, setUsername] = useState<string>('')
+  const [password, setPassword] = useState<string>('')
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Account Login'
 
@@ -33,11 +36,6 @@ function LoginForm ({ redirect }: { redirect: string | null }) {
           onSubmit={async e => {
             e.preventDefault()
 
-            const form = e.currentTarget
-            const formData = new FormData(form)
-            const username = formData.get('username') as string
-            const password = formData.get('password') as string
-
             try {
               const result = await axios.post('/api/account/login', {
                 username,
@@ -77,6 +75,8 @@ function LoginForm ({ redirect }: { redirect: string | null }) {
             name='username'
             placeholder='Username'
             type='username'
+            value={username}
+            onChange={e => setUsername(e.target.value)}
             required
           />
           <input
@@ -84,6 +84,8 @@ function LoginForm ({ redirect }: { redirect: string | null }) {
             name='password'
             placeholder='Password'
             type='password'
+            value={password}
+            onChange={e => setPassword(e.target.value)}
             required
           />
           <button type='submit'>Login</button>

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

@@ -11,6 +11,9 @@ function ResetPasswordForm ({ codeParam }: { codeParam: string }) {
   const [token, setToken] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
 
+  const [newPassword, setNewPassword] = useState<string>('')
+  const [retypeNewPassword, setRetypeNewPassword] = useState<string>('')
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Reset Account Password'
   }, [])
@@ -40,12 +43,7 @@ function ResetPasswordForm ({ codeParam }: { codeParam: string }) {
           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) {
+            if (newPassword !== retypeNewPassword) {
               alert('Passwords must match')
               return
             }
@@ -54,7 +52,7 @@ function ResetPasswordForm ({ codeParam }: { codeParam: string }) {
               const result = await axios.post('/api/account/reset-password', {
                 token,
                 code: codeParam,
-                password
+                password: newPassword
               })
               if (result.data.success) {
                 setResult(2)
@@ -85,14 +83,18 @@ function ResetPasswordForm ({ codeParam }: { codeParam: string }) {
             placeholder='New password'
             type='password'
             autoComplete='new-password'
+            value={newPassword}
+            onChange={e => setNewPassword(e.target.value)}
             required
           />
           <input
-            id='retype-password'
-            name='retype-password'
+            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>

src/app/game/berry-dash/icon-marketplace/upload/page.tsx

@@ -14,6 +14,11 @@ export default function BerryDashSubmitIcon () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
 
+  const [name, setName] = useState<string>('')
+  const [price, setPrice] = useState<number>(10)
+  const [file, setFile] = useState<File | undefined>(undefined)
+  const [preview, setPreview] = useState<string | null>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Icon Submition'
 
@@ -54,12 +59,6 @@ export default function BerryDashSubmitIcon () {
               onSubmit={async e => {
                 e.preventDefault()
 
-                const form = e.currentTarget
-                const formData = new FormData(form)
-                const text = formData.get('name') as string
-                const price = formData.get('price') as string
-                const file = formData.get('bird') as File
-
                 if (!file) {
                   alert('Please select a bird image!')
                   return
@@ -80,7 +79,7 @@ export default function BerryDashSubmitIcon () {
                       {
                         token,
                         fileContent: base64Data,
-                        name: text,
+                        name,
                         price
                       },
                       {
@@ -120,8 +119,21 @@ export default function BerryDashSubmitIcon () {
                 name='bird'
                 type='file'
                 accept='image/png'
-                required
                 className='cursor-pointer'
+                onChange={e => {
+                  const f = e.target.files?.[0]
+                  if (!f) return
+                  if (f.type !== 'image/png') {
+                    alert('Please select a PNG file!')
+                    return
+                  }
+                  setFile(f)
+
+                  const reader = new FileReader()
+                  reader.onload = () => setPreview(reader.result as string)
+                  reader.readAsDataURL(f)
+                }}
+                required
               />
               <input
                 id='name'
@@ -129,6 +141,9 @@ export default function BerryDashSubmitIcon () {
                 placeholder='Bird Name'
                 type='text'
                 autoComplete='off'
+                maxLength={16}
+                value={name}
+                onChange={e => setName(e.target.value)}
                 required
               />
               <input
@@ -138,9 +153,33 @@ export default function BerryDashSubmitIcon () {
                 type='number'
                 autoComplete='off'
                 min={10}
+                value={price}
+                onChange={e => setPrice(Number(e.target.value))}
                 required
               />
               <button type='submit'>Upload!</button>
+              <div className='mt-4'>
+                <p className='text-center mb-1 text-xl'>Preview:</p>
+                <div className='sub-box2 text-center'>
+                  <div className='bg-(--col8) rounded-md w-fit h-fit p-2 mx-auto'>
+                    <img
+                      src={preview ?? undefined}
+                      width={96}
+                      height={96}
+                      draggable={false}
+                      className='pointer-events-none'
+                    />
+                  </div>
+                  <p>
+                    Bird Name:{' '}
+                    {!/^[a-zA-Z0-9 ]+$/.test(name) || name.length > 16
+                      ? 'N/A'
+                      : name}
+                  </p>
+                  <p>Price: {price}</p>
+                  <p>Designer Name: {getCookie('accountUsername', '-1')}</p>
+                </div>
+              </div>
             </form>
           ) : (
             (result == 1 || result == 2) && (

src/app/game/berry-dash/splash/page.tsx

@@ -4,7 +4,6 @@ import { BackButton } from '@/app/components/BackButton'
 import { ReloadButton } from '@/app/components/ReloadButton'
 import { UploadButton } from '@/app/components/UploadButton'
 import axios from 'axios'
-import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
 export default function BerryDashSplash () {

src/app/game/berry-dash/splash/submit/page.tsx

@@ -14,6 +14,8 @@ export default function BerryDashSubmitSplash () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
 
+  const [text, setText] = useState<string>('')
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Splash Text Submition'
 
@@ -52,10 +54,6 @@ export default function BerryDashSubmitSplash () {
               onSubmit={async e => {
                 e.preventDefault()
 
-                const form = e.currentTarget
-                const formData = new FormData(form)
-                const text = formData.get('text') as string
-
                 try {
                   const result = await axios.post(
                     '/api/berrydash/splash-text',
@@ -100,8 +98,10 @@ export default function BerryDashSubmitSplash () {
                 placeholder='Text'
                 type='text'
                 className='text-center w-120'
-                required
                 autoComplete='off'
+                value={text}
+                onChange={e => setText(e.target.value)}
+                required
               />
               <button type='submit'>Submit</button>
             </form>