From d173b13bb9d1fcb8704c4835207893ac5d9a8bf7 Mon Sep 17 00:00:00 2001
From: James Pattinson <james.pattinson@sasalliance.org>
Date: Mon, 10 Nov 2025 19:55:29 +0000
Subject: [PATCH] reg workflow improvements

---
 frontend/src/App.css            |   2 +-
 frontend/src/pages/Register.tsx | 226 +++++++++++++++++++++-----------
 2 files changed, 147 insertions(+), 81 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 704507d..9e6fc0d 100644
--- a/frontend/src/App.css
+++ b/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 {
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index 6f25eee..0511c33 100644
--- a/frontend/src/pages/Register.tsx
+++ b/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,89 +76,127 @@ const Register: React.FC = () => {
 
         {error && <div className="alert alert-error">{error}</div>}
 
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label htmlFor="first_name">First Name *</label>
-            <input
-              type="text"
-              id="first_name"
-              name="first_name"
-              value={formData.first_name}
-              onChange={handleChange}
-              required
-            />
+        <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
+                type="text"
+                id="first_name"
+                name="first_name"
+                value={formData.first_name}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="last_name">Last Name *</label>
+              <input
+                type="text"
+                id="last_name"
+                name="last_name"
+                value={formData.last_name}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="email">Email Address *</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="password">Password *</label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                value={formData.password}
+                onChange={handlePasswordChange}
+                minLength={8}
+                required
+              />
+              <small style={{ color: '#666', fontSize: '12px' }}>
+                Minimum 8 characters
+              </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>
 
-          <div className="form-group">
-            <label htmlFor="last_name">Last Name *</label>
-            <input
-              type="text"
-              id="last_name"
-              name="last_name"
-              value={formData.last_name}
-              onChange={handleChange}
-              required
-            />
+          {/* Right Column - Contact Information */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <div className="form-group">
+              <label htmlFor="phone">Phone (optional)</label>
+              <input
+                type="tel"
+                id="phone"
+                name="phone"
+                value={formData.phone}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="address">Address (optional)</label>
+              <textarea
+                id="address"
+                name="address"
+                value={formData.address}
+                onChange={handleChange}
+                rows={3}
+              />
+            </div>
           </div>
 
-          <div className="form-group">
-            <label htmlFor="email">Email Address *</label>
-            <input
-              type="email"
-              id="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-            />
+          {/* Submit Button - Full Width */}
+          <div style={{ gridColumn: '1 / -1', marginTop: '8px' }}>
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={loading}
+              style={{ width: '100%' }}
+            >
+              {loading ? 'Creating Account...' : 'Create Account & Sign In'}
+            </button>
           </div>
-
-          <div className="form-group">
-            <label htmlFor="password">Password *</label>
-            <input
-              type="password"
-              id="password"
-              name="password"
-              value={formData.password}
-              onChange={handleChange}
-              minLength={8}
-              required
-            />
-            <small style={{ color: '#666', fontSize: '12px' }}>
-              Minimum 8 characters
-            </small>
-          </div>
-
-          <div className="form-group">
-            <label htmlFor="phone">Phone (optional)</label>
-            <input
-              type="tel"
-              id="phone"
-              name="phone"
-              value={formData.phone}
-              onChange={handleChange}
-            />
-          </div>
-
-          <div className="form-group">
-            <label htmlFor="address">Address (optional)</label>
-            <textarea
-              id="address"
-              name="address"
-              value={formData.address}
-              onChange={handleChange}
-              rows={3}
-            />
-          </div>
-
-          <button
-            type="submit"
-            className="btn btn-primary"
-            disabled={loading}
-            style={{ width: '100%', marginTop: '16px' }}
-          >
-            {loading ? 'Creating Account...' : 'Create Account'}
-          </button>
         </form>
 
         <div className="form-footer">