reg workflow improvements

frontend/src/App.css

@@ -154,7 +154,7 @@ body {
   padding: 40px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   width: 100%;
-  max-width: 440px;
+  max-width: 900px;
 }
 
 .auth-card h2 {

frontend/src/pages/Register.tsx

@@ -12,6 +12,8 @@ const Register: React.FC = () => {
     phone: '',
     address: ''
   });
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordsMatch, setPasswordsMatch] = useState(true);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
 
@@ -22,15 +24,41 @@ const Register: React.FC = () => {
     });
   };
 
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    if (name === 'password') {
+      setFormData(prev => ({ ...prev, password: value }));
+      setPasswordsMatch(value === confirmPassword);
+    } else if (name === 'confirmPassword') {
+      setConfirmPassword(value);
+      setPasswordsMatch(formData.password === value);
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
+
+    // Validate password confirmation
+    if (formData.password !== confirmPassword) {
+      setError('Passwords do not match. Please try again.');
+      return;
+    }
+
     setLoading(true);
 
     try {
+      // Register the user
       await authService.register(formData);
-      alert('Registration successful! Please check your email. You can now log in.');
-      navigate('/login');
+      
+      // Automatically log in the user
+      await authService.login({
+        email: formData.email,
+        password: formData.password
+      });
+      
+      // Redirect to dashboard
+      navigate('/dashboard');
     } catch (err: any) {
       setError(err.response?.data?.detail || 'Registration failed. Please try again.');
     } finally {
@@ -48,7 +76,9 @@ const Register: React.FC = () => {
 
         {error && <div className="alert alert-error">{error}</div>}
 
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '40px', maxWidth: '900px', margin: '0 auto' }}>
+          {/* Left Column - Personal Information */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
             <div className="form-group">
               <label htmlFor="first_name">First Name *</label>
               <input
@@ -92,7 +122,7 @@ const Register: React.FC = () => {
                 id="password"
                 name="password"
                 value={formData.password}
-              onChange={handleChange}
+                onChange={handlePasswordChange}
                 minLength={8}
                 required
               />
@@ -101,6 +131,38 @@ const Register: React.FC = () => {
               </small>
             </div>
 
+            <div className="form-group">
+              <label htmlFor="confirmPassword">Confirm Password *</label>
+              <input
+                type="password"
+                id="confirmPassword"
+                name="confirmPassword"
+                value={confirmPassword}
+                onChange={handlePasswordChange}
+                minLength={8}
+                required
+                style={{
+                  borderColor: confirmPassword && !passwordsMatch ? '#dc3545' : confirmPassword && passwordsMatch ? '#28a745' : undefined
+                }}
+              />
+              {confirmPassword && (
+                <small style={{
+                  color: passwordsMatch ? '#28a745' : '#dc3545',
+                  fontSize: '12px'
+                }}>
+                  {passwordsMatch ? '✓ Passwords match' : '✗ Passwords do not match'}
+                </small>
+              )}
+              {!confirmPassword && (
+                <small style={{ color: '#666', fontSize: '12px' }}>
+                  Re-enter your password
+                </small>
+              )}
+            </div>
+          </div>
+
+          {/* Right Column - Contact Information */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
             <div className="form-group">
               <label htmlFor="phone">Phone (optional)</label>
               <input
@@ -122,15 +184,19 @@ const Register: React.FC = () => {
                 rows={3}
               />
             </div>
+          </div>
 
+          {/* Submit Button - Full Width */}
+          <div style={{ gridColumn: '1 / -1', marginTop: '8px' }}>
             <button
               type="submit"
               className="btn btn-primary"
               disabled={loading}
-            style={{ width: '100%', marginTop: '16px' }}
+              style={{ width: '100%' }}
             >
-            {loading ? 'Creating Account...' : 'Create Account'}
+              {loading ? 'Creating Account...' : 'Create Account & Sign In'}
             </button>
+          </div>
         </form>
 
         <div className="form-footer">