Register.tsx

import { useForm } from 'react-hook-form';
import { useState } from 'react';
import './Register.scss';

interface IRegister {
  name: string;
  email: string;
  password: string;
  confirmPassword: string;
  customerType: string;
}

export function Register() {
  const [error, setError] = useState('');
  const { register, handleSubmit } = useForm<IRegister>({mode: 'onChange'});

  const onSubmit = (formValue: IRegister) => {
    if (formValue.password.length < 7) {
      setError('password length must be greater than 6 characters');
      return;
    }

    if (formValue.password !== formValue.confirmPassword) {
      setError('password and confirm password must match');
      return;
    }

    setError('');
    console.log('ready to make register api call');
  };

  return (
    <>
      <div className='register'>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className='card register-card'>
            <div className='form-group'>
              <label>Full Name</label>
              <input type='text' placeholder='Full name' {...register('name', { required: true })} />
            </div>
            
            <div className='form-group'>
              <label>Email Address</label>
              <input type='email' placeholder='Enter email' {...register('email', { required: true })} />
            </div>

            <div className='form-group'>
              <label>Password</label>
              <input type='password' placeholder='Enter password' {...register('password', { required: true })} />
            </div>

            <div className='form-group'>
              <label>Confirm Password</label>
              <input type='password' placeholder='Confirm password' {...register('confirmPassword', { required: true })} />
            </div>

            <div className='form-group'>
              <label>Customer Type</label>
              <select {...register('customerType', { required: true })}>
                <option value="Customer">Customer</option>
                <option value="Airline">Airline</option>
              </select>
            </div>

            <div className='form-group'>
              <button type='submit'>Submit</button>
            </div>

            <div className='form-group'>
              {error && <span>{error}</span>}
            </div>
          </div>
        </form>
      </div>
    </>
  );  
}

export default Register;