fix signup code usage

src/app/auth/authService.ts

@@ -1,6 +1,7 @@
 import { User } from '../user/userStore.ts'
 import { dispatchMessage } from '../messageBus/messageBus.ts'
 import client from '../api/client.ts'
+import { ProblemDetails } from '../../types'
 
 export class AuthService {
   constructor(private readonly user: User | null) {}
@@ -33,7 +34,8 @@ export class AuthService {
     })
 
     if (!res.data) {
-      throw new Error('invalid credentials')
+      console.error(res.error)
+      throw new Error((res.error as ProblemDetails)?.detail ?? 'invalid credentials')
     }
 
     dispatchMessage('auth:registered', { ...res.data })

src/app/auth/pages/SignupPage.tsx

@@ -20,7 +20,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
   const { code } = useParams()
   const [signupCode, setSignupCode] = useState<string | null>(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
-
+  const [error, setError] = useState<string>('')
   const [username, setUsername, usernameError, validateUsername] =
     useValidatedInput(isValidUsername)
 
@@ -44,6 +44,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
       localStorage.setItem(SignupCodeKey, theSignupCode)
     } else {
       theSignupCode = localStorage.getItem(SignupCodeKey)
+      setSignupCode(theSignupCode)
     }
 
     if (!theSignupCode) {
@@ -51,6 +52,10 @@ export default function SignupPage({ authService }: SignupPageProps) {
     }
   }, [code, signupCode])
 
+  useEffect(() => {
+    console.debug('signup code', signupCode)
+  }, [signupCode])
+
   const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
@@ -78,6 +83,9 @@ export default function SignupPage({ authService }: SignupPageProps) {
     try {
       await authService.signup(username, password, signupCode)
       navigate('/')
+    } catch (e: unknown) {
+      const err = e as Error
+      setError(err.message)
     } finally {
       setIsSubmitting(false)
     }
@@ -120,6 +128,8 @@ export default function SignupPage({ authService }: SignupPageProps) {
             <LinkButton secondary to={'/login'}>
               login instead?
             </LinkButton>
+
+            <span className="text-xs h-3 text-red-500">{error}</span>
           </form>
         </div>
       </main>

src/types.d.ts

@@ -0,0 +1,7 @@
+export interface ProblemDetails {
+  detail: string
+  title: string
+  status: number
+  type: string
+  traceId: string
+}