Update Register.tsx

src/pages/Register.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
+import { User, Mail, Lock } from 'lucide-react'; // Import icons
 
-const Register = () => {
+const Register: React.FC = () => {
   const navigate = useNavigate();
   const [formData, setFormData] = useState({
     username: '',
@@ -9,74 +10,182 @@ const Register = () => {
     password: '',
     confirmPassword: ''
   });
+  const [error, setError] = useState('');
 
-  const handleChange = (e) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({
       ...formData,
       [e.target.name]: e.target.value
     });
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setError(''); // Clear previous errors
 
     // Simple validation
     if (formData.password !== formData.confirmPassword) {
-      alert("Passwords do not match!");
+      setError("Passwords do not match!");
       return;
     }
 
-    // You can replace this with API call
-    console.log("Registering user:", formData);
+    if (formData.password.length < 6) {
+      setError("Password must be at least 6 characters long.");
+      return;
+    }
 
-    // Simulate success
-    alert("Registration successful!");
+    // You can replace this with your API call for registration
+    console.log("Registering user:", {
+        username: formData.username,
+        email: formData.email
+        // Do not log the password
+    });
+
+    // On successful registration:
+    // For now, we'll simulate success and navigate to the login page.
+    console.log("Registration successful!");
     navigate('/login'); // redirect to login page
   };
 
   return (
-    <div className="register-container" style={{ padding: '2rem', maxWidth: '500px', margin: 'auto' }}>
-      <h2>Create Account</h2>
-      <form onSubmit={handleSubmit}>
+    <div className="min-h-screen bg-gray-50 flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          Create a new account
+        </h2>
+        <p className="mt-2 text-center text-sm text-gray-600">
+          Or{' '}
+          <Link to="/login" className="font-medium text-accent-600 hover:text-accent-500">
+            sign in to your existing account
+          </Link>
+        </p>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white py-8 px-4 shadow-lg sm:rounded-lg sm:px-10">
+          <form className="space-y-6" onSubmit={handleSubmit}>
+            <div>
+              <label
+                htmlFor="username"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Username
+              </label>
+              <div className="mt-1 relative rounded-md shadow-sm">
+                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <User className="h-5 w-5 text-gray-400" />
+                </div>
                 <input
-          type="text"
+                  id="username"
                   name="username"
-          placeholder="Username"
+                  type="text"
+                  autoComplete="username"
+                  required
                   onChange={handleChange}
                   value={formData.username}
-          required
+                  className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
+                  placeholder="yourusername"
                 />
-        <br />
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Email address
+              </label>
+              <div className="mt-1 relative rounded-md shadow-sm">
+                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Mail className="h-5 w-5 text-gray-400" />
+                </div>
                 <input
-          type="email"
+                  id="email"
                   name="email"
-          placeholder="Email"
+                  type="email"
+                  autoComplete="email"
+                  required
                   onChange={handleChange}
                   value={formData.email}
-          required
+                  className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
+                  placeholder="you@example.com"
                 />
-        <br />
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Password
+              </label>
+              <div className="mt-1 relative rounded-md shadow-sm">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
                 <input
-          type="password"
+                  id="password"
                   name="password"
-          placeholder="Password"
+                  type="password"
+                  autoComplete="new-password"
+                  required
                   onChange={handleChange}
                   value={formData.password}
-          required
+                  className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
+                  placeholder="••••••••"
                 />
-        <br />
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor="confirmPassword"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Confirm Password
+              </label>
+              <div className="mt-1 relative rounded-md shadow-sm">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
                 <input
-          type="password"
+                  id="confirmPassword"
                   name="confirmPassword"
-          placeholder="Confirm Password"
+                  type="password"
+                  autoComplete="new-password"
+                  required
                   onChange={handleChange}
                   value={formData.confirmPassword}
-          required
+                  className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
+                  placeholder="••••••••"
                 />
-        <br />
-        <button type="submit">Register</button>
+              </div>
+            </div>
+            
+            {error && (
+              <div className="rounded-md bg-red-50 p-4">
+                  <div className="flex">
+                      <div className="ml-3">
+                          <h3 className="text-sm font-medium text-red-800">{error}</h3>
+                      </div>
+                  </div>
+              </div>
+            )}
+
+            <div>
+              <button
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-accent-600 hover:bg-accent-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-500"
+              >
+                Create account
+              </button>
+            </div>
           </form>
         </div>
+      </div>
+    </div>
   );
 };