Update registration Step

src/components/registration/RegistrationStep4.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Label } from '../ui/label';
+import { Input } from '../ui/input';
+
+const RegistrationStep4 = ({ formData, handleInputChange }) => {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
+          Account Credentials
+        </h2>
+
+        <p className="text-[#6B708D]">
+          Your email is also your username that you can use to login.
+          Please note you can only login after your application is approved.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="email">Email *</Label>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            required
+            value={formData.email}
+            onChange={handleInputChange}
+            placeholder="your.email@example.com"
+            className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            data-testid="email-input"
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="password">Password *</Label>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            required
+            minLength={6}
+            value={formData.password}
+            onChange={handleInputChange}
+            placeholder="At least 6 characters"
+            className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            data-testid="password-input"
+          />
+          <p className="text-sm text-[#6B708D] mt-2">
+            Must be at least 6 characters long
+          </p>
+        </div>
+
+        <div>
+          <Label htmlFor="confirmPassword">Repeat Password *</Label>
+          <Input
+            id="confirmPassword"
+            name="confirmPassword"
+            type="password"
+            required
+            value={formData.confirmPassword}
+            onChange={handleInputChange}
+            placeholder="Re-enter your password"
+            className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            data-testid="confirm-password-input"
+          />
+          {formData.confirmPassword && formData.password !== formData.confirmPassword && (
+            <p className="text-sm text-red-500 mt-2">
+              Passwords do not match
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RegistrationStep4;