adding userRegistrationForm and updating users table

src/components/RegistrationForm/index.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function RegistrationForm() {
+  const router = useRouter()
+  const [error, setError] = useState('')
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  })
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+
+    if (formData.password !== formData.confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
+    try {
+      // Add your registration API call here
+      console.log('Form submitted:', formData)
+      router.push('/login') // Redirect to login after successful registration
+    } catch (err) {
+      setError('Failed to register user')
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Create your account
+          </h2>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="rounded-md shadow-sm space-y-4">
+            <div>
+              <label htmlFor="name" className="sr-only">
+                Full Name
+              </label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                required
+                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                placeholder="Full Name"
+                value={formData.name}
+                onChange={(e) => setFormData({...formData, name: e.target.value})}
+              />
+            </div>
+            <div>
+              <label htmlFor="email" className="sr-only">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                placeholder="Email address"
+                value={formData.email}
+                onChange={(e) => setFormData({...formData, email: e.target.value})}
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="sr-only">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                placeholder="Password"
+                value={formData.password}
+                onChange={(e) => setFormData({...formData, password: e.target.value})}
+              />
+            </div>
+            <div>
+              <label htmlFor="confirmPassword" className="sr-only">
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                placeholder="Confirm Password"
+                value={formData.confirmPassword}
+                onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})}
+              />
+            </div>
+          </div>
+
+          {error && (
+            <div className="text-red-500 text-sm text-center">{error}</div>
+          )}
+
+          <div>
+            <button
+              type="submit"
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >
+              Register
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+} 

src/components/UserRegistration/index.tsx

@@ -1,99 +0,0 @@
-// components/UserRegistration.js
-import { useState } from 'react';
-import { useToast } from '@chakra-ui/toast';
-import { FormControl, FormLabel, } from '@chakra-ui/form-control';
-import { Input, Button, Stack, Heading } from '@chakra-ui/react';
-import { drizzle } from 'drizzle-orm/node-postgres';
-import { users } from '@schemas/schema';
-
-
-export default function UserRegistration() {
-  const [formData, setFormData] = useState({
-    username: '',
-    email: '',
-    password: '',
-  });
-
-  const toast = useToast();
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-  
-    // Example of database interaction using drizzle-orm:
-    const db = drizzle(/* your database connection logic */);
-
-    try {
-      // Replace 'users' with your actual table name
-      await db.insert(users).values(formData);
-      toast({
-        title: 'Account created.',
-        description: "We've created your account successfully!",
-        status: 'success',
-        duration: 5000,
-        isClosable: true,
-      });
-
-      // Reset the form
-      setFormData({ username: '', email: '', password: '' });
-    } catch (error) {
-      toast({
-        title: 'An error occurred.',
-        description: error.message,
-        status: 'error',
-        duration: 5000,
-        isClosable: true,
-      });
-    }
-  };
-
-  return (
-    <Stack spacing={4} w="400px" mx="auto" mt={10}>
-      <Heading as="h2" size="lg">User Registration</Heading>
-      <form onSubmit={handleSubmit}>
-        <FormControl isRequired>
-          <FormLabel>Username</FormLabel>
-          <Input 
-            name="username" 
-            value={formData.username} 
-            onChange={handleChange} 
-            placeholder="Enter your username" 
-          />
-        </FormControl>
-        
-        <FormControl isRequired>
-          <FormLabel>Email</FormLabel>
-          <Input 
-            type="email" 
-            name="email" 
-            value={formData.email} 
-            onChange={handleChange} 
-            placeholder="Enter your email" 
-          />
-        </FormControl>
-        
-        <FormControl isRequired>
-          <FormLabel>Password</FormLabel>
-          <Input 
-            type="password" 
-            name="password" 
-            value={formData.password} 
-            onChange={handleChange} 
-            placeholder="Enter your password" 
-          />
-        </FormControl>
-        
-        <Button 
-          mt={4} 
-          colorScheme="teal" 
-          type="submit">
-          Create Account
-        </Button>
-      </form>
-    </Stack>
-  );
-}