style: signup page

.talismanrc

@@ -1,10 +1,6 @@
 fileignoreconfig:
-- filename: frontend/package-lock.json
-  checksum: 8a5cd5eb441617ab02cb53bd4bd7278515463c8cd1c54abf3dfa66574db5ab85
 - filename: frontend/src/app/auth/auth.tsx
-  checksum: 3e224b96e2b3cbeeed25fc3b23aae602777b96854c15f6b1dfdb1fbc4732f8c4
-- filename: frontend/src/app/lib/types.tsx
-  checksum: 72aa08cae493e7078d23ae2bd5bd4d4dcc8af165f6fe3680e09e225aed1125d7
+  checksum: 4ffb9648d31740f2a6fff7fa3368d13d2bfaea047f2eb0f2bc342984ca1d633f
 - filename: frontend/src/app/signup/page.tsx
-  checksum: c39507c1ca4cdc75145e39511e5829617be13d211be0dd4b5739145c9c179007
-version: ""
+  checksum: 98adba90b3c2e6e6b2c9d43996a844467b8afb4881e606f9b22dbd5f239d69ea
+version: ""

frontend/src/app/auth/auth.tsx

@@ -1,34 +1,22 @@
 import { redirect } from "next/navigation";
 import { FormState, SignupFormSchema } from "../lib/types";
-// import bcrypt from 'bcrypt';
 
 export async function signup(state: FormState, formData: FormData) {
     const validatedFields = SignupFormSchema.safeParse({
-        name: formData.get('name'),
-        email: formData.get('email'),
-        password: formData.get('password'),
-      })
+      name: formData.get('name'),
+      email: formData.get('email'),
+      password: formData.get('password'),
+    })
 
-      if (!validatedFields.success) {
-        return {
-          errors: validatedFields.error.flatten().fieldErrors,
-        }
+    if (!validatedFields.success) {
+      return {
+        errors: validatedFields.error.flatten().fieldErrors,
       }
+    }
 
-      const { name, email } = validatedFields.data
-      // const hashedPassword = await bcrypt.hash(password, 10)
+    const { name, email } = validatedFields.data
 
-      // @TODO: call backend API
-
-      // const data = await db
-      // .insert(users)
-      // .values({
-      //   name,
-      //   email,
-      //   password: hashedPassword,
-      // })
-      // .returning({ id: users.id })
-
+    // @TODO: call backend API
     const user = { name, email }
 
     if (!user) {

frontend/src/app/profile/page.tsx

@@ -0,0 +1,8 @@
+export default function Profile() {
+    return (
+      <div>
+        Profile Page
+      </div>
+    );
+  }
+

frontend/src/app/signup/page.tsx

@@ -7,42 +7,45 @@ export default function Signup() {
   const [state, action] = useFormState(signup, undefined)
 
   return (
-    <form action={action}>
-      <div>
-        <label htmlFor="name">Name</label>
-        <input id="name" name="name" placeholder="Name" />
+    <div className="w-full max-w-xs">
+
+    <form action={action} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+      <div className="mb-4">
+        <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">Name</label>
+        <input id="name" name="name" placeholder="Name" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"/>
       </div>
-      {state?.errors?.name && <p>{state.errors.name}</p>}
+      {state?.errors?.name && <p className="text-red-700 text-sm">{state.errors.name}</p>}
 
-      <div>
-        <label htmlFor="email">Email</label>
-        <input id="email" name="email" type="email" placeholder="Email" />
+      <div className="mb-4">
+        <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">Email</label>
+        <input id="email" name="email" type="email" placeholder="Email" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"/>
       </div>
-      {state?.errors?.email && <p>{state.errors.email}</p>}
-      <div>
-        <label htmlFor="password">Password</label>
-        <input id="password" name="password" type="password" />
+      {state?.errors?.email && <p className="text-red-700 text-sm">{state.errors.email}</p>}
+      <div className="mb-4">
+        <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">Password</label>
+        <input id="password" name="password" type="password" placeholder="Password" className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline'/>
       </div>
       {state?.errors?.password && (
-        <div>
-          <p>Password must:</p>
+        <div className="mb-4">
+          <p className="text-red-700 text-sm">Password must:</p>
           <ul>
             {state.errors.password.map((error) => (
-              <li key={error}>- {error}</li>
+              <li key={error} className="text-red-700 text-sm">- {error}</li>
             ))}
           </ul>
         </div>
       )}
       <SubmitButton />
     </form>
+    </div>
   );
 }
 
 function SubmitButton() {
   const { pending } = useFormStatus()
 
   return (
-    <button disabled={pending} type="submit">
+    <button disabled={pending} type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
       Sign Up
     </button>
   )