App.jsx

import { useState } from 'react'
import './App.css'

function App() {
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    password: '',
    role: '',
    agreeToTerms: false,
  })
  
  const [errors, setErrors] = useState({})
  const [isSubmitted, setIsSubmitted] = useState(false)

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }))
  }

  const validate = () => {
    const newErrors = {}
    if (!formData.fullName.trim()) {
      newErrors.fullName = 'Full name is required'
    }
    if (!formData.email.trim()) {
      newErrors.email = 'Email address is required'
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = 'Email address is invalid'
    }
    if (!formData.password) {
      newErrors.password = 'Password is required'
    } else if (formData.password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters long'
    }
    if (!formData.role) {
      newErrors.role = 'Please select a role'
    }
    if (!formData.agreeToTerms) {
      newErrors.agreeToTerms = 'You must agree to the terms and conditions'
    }
    return newErrors
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const validationErrors = validate()
    if (Object.keys(validationErrors).length === 0) {
      setIsSubmitted(true)
      setErrors({})
    } else {
      setErrors(validationErrors)
      setIsSubmitted(false)
    }
  }

  const handleReset = () => {
    setFormData({
      fullName: '',
      email: '',
      password: '',
      role: '',
      agreeToTerms: false,
    })
    setIsSubmitted(false)
    setErrors({})
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <h1>Learn Playwright Automation</h1>
        <p>Use Playwright to automate filling and submitting this form!</p>
      </header>

      <main className="form-card">
        {isSubmitted ? (
          <div className="success-message" id="success-container">
            <div className="success-icon">✓</div>
            <h2>Registration Successful!</h2>
            <p>
              Thank you, <strong id="display-name">{formData.fullName}</strong>!
            </p>
            <p>
              Your account has been successfully created. We've sent a confirmation email to{' '}
              <strong id="display-email">{formData.email}</strong> as a{' '}
              <strong id="display-role">{formData.role}</strong>.
            </p>
            <button onClick={handleReset} className="btn-secondary" id="reset-btn">
              Register Another Account
            </button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} noValidate>
            <div className="form-group">
              <label htmlFor="fullName">Full Name</label>
              <input
                type="text"
                id="fullName"
                name="fullName"
                placeholder="John Doe"
                value={formData.fullName}
                onChange={handleChange}
                className={errors.fullName ? 'input-error' : ''}
              />
              {errors.fullName && (
                <span className="error-text" id="fullName-error">
                  {errors.fullName}
                </span>
              )}
            </div>

            <div className="form-group">
              <label htmlFor="email">Email Address</label>
              <input
                type="email"
                id="email"
                name="email"
                placeholder="john.doe@example.com"
                value={formData.email}
                onChange={handleChange}
                className={errors.email ? 'input-error' : ''}
              />
              {errors.email && (
                <span className="error-text" id="email-error">
                  {errors.email}
                </span>
              )}
            </div>

            <div className="form-group">
              <label htmlFor="password">Password</label>
              <input
                type="password"
                id="password"
                name="password"
                placeholder="At least 6 characters"
                value={formData.password}
                onChange={handleChange}
                className={errors.password ? 'input-error' : ''}
              />
              {errors.password && (
                <span className="error-text" id="password-error">
                  {errors.password}
                </span>
              )}
            </div>

            <div className="form-group">
              <label htmlFor="role">Preferred Role</label>
              <select
                id="role"
                name="role"
                value={formData.role}
                onChange={handleChange}
                className={errors.role ? 'input-error' : ''}
              >
                <option value="">-- Select a role --</option>
                <option value="developer">Developer</option>
                <option value="designer">Designer</option>
                <option value="manager">Product Manager</option>
                <option value="other">Other</option>
              </select>
              {errors.role && (
                <span className="error-text" id="role-error">
                  {errors.role}
                </span>
              )}
            </div>

            <div className="form-group checkbox-group">
              <label className="checkbox-label" htmlFor="agreeToTerms">
                <input
                  type="checkbox"
                  id="agreeToTerms"
                  name="agreeToTerms"
                  checked={formData.agreeToTerms}
                  onChange={handleChange}
                />
                <span>I agree to the terms and conditions</span>
              </label>
              {errors.agreeToTerms && (
                <span className="error-text" id="agreeToTerms-error">
                  {errors.agreeToTerms}
                </span>
              )}
            </div>

            <button type="submit" className="btn-primary" id="submit-btn">
              Submit Form
            </button>
          </form>
        )}
      </main>
    </div>
  )
}

export default App