Change form engine

package.json

@@ -40,6 +40,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-highlight-words": "^0.21.0",
+    "react-hook-form": "^7.68.0",
     "react-redux": "^9.2.0",
     "react-router": "^7.5.2",
     "react-transition-group": "^4.4.5",

src/components/generics/form/Fields.jsx

@@ -0,0 +1,99 @@
+import { InlineFormContext } from 'contexts'
+import PropTypes from 'prop-types'
+import { useContext } from 'react'
+
+function Field({ children, ...rest }) {
+  const inline = useContext(InlineFormContext)
+
+  if (inline) {
+    return <FieldInline {...rest}>{children}</FieldInline>
+  }
+
+  return <FieldBlock {...rest}>{children}</FieldBlock>
+}
+
+Field.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+function FieldInline({ children }) {
+  return <div className="field">{children}</div>
+}
+
+FieldInline.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+function FieldBlock({ id, label, errors, children }) {
+  let errorNotification
+  const error = errors?.[id]
+  if (error) {
+    if (error.type === 'required') {
+      errorNotification = <p>This field is requiered</p>
+    } else {
+      errorNotification = <p>{error.message}</p>
+    }
+  }
+
+  return (
+    <div className="field">
+      <label htmlFor={id} className="label">
+        {label}
+      </label>
+      <div className="input">
+        {children}
+        {errorNotification}
+      </div>
+    </div>
+  )
+}
+
+FieldBlock.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  errors: PropTypes.object,
+  children: PropTypes.node.isRequired,
+}
+
+export function InputField({ id, label, type, register, errors, validation }) {
+  return (
+    <Field id={id} label={label} errors={errors}>
+      <div className="text-input">
+        <input type={type} {...register(id, validation)} />
+      </div>
+    </Field>
+  )
+}
+
+InputField.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  type: PropTypes.string,
+  register: PropTypes.func,
+  errors: PropTypes.object,
+  validation: PropTypes.object,
+}
+
+// export function SelectField({
+//   id,
+//   label,
+//   options,
+//   multiple,
+//   registrer,
+//   errors,
+//   validation,
+// }) {
+//   return (
+//     <Field id={id} label={label} errors={errors}>
+//       <div className="select-input">
+//         <select multiple={multiple} {...registrer(label, validation)}>
+//           {options.map((option, id) => (
+//             <option key={id} value={option.value || ''}>
+//               {option.name}
+//             </option>
+//           ))}
+//         </select>
+//       </div>
+//     </Field>
+//   )
+// }

src/components/generics/form/Form.jsx

@@ -0,0 +1,63 @@
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { Form as FormOrigin } from 'react-hook-form'
+
+export function Form({ inline, children, ...rest }) {
+  if (inline) {
+    // wrap by InlineFormContext
+    return null
+  }
+
+  return <FormBlock {...rest}>{children}</FormBlock>
+}
+
+Form.propTypes = {
+  inline: PropTypes.bool,
+  children: PropTypes.node,
+}
+
+export function FormBlock({
+  title,
+  action,
+  control,
+  noSubmit,
+  submitClass = 'primary',
+  submitText = 'Submit',
+  extraControls,
+  children,
+}) {
+  return (
+    <FormOrigin
+      className="form block"
+      action={action}
+      control={control}
+      headers={{ 'Content-Type': 'application/json' }}
+    >
+      {title && (
+        <div className="header">
+          <h3>{title}</h3>
+        </div>
+      )}
+      <div className="set">{children}</div>
+      <div className="controls compact notifiable">
+        {!noSubmit && (
+          <button type="submit" className={classNames('control', submitClass)}>
+            {submitText}
+          </button>
+        )}
+        {extraControls}
+      </div>
+    </FormOrigin>
+  )
+}
+
+FormBlock.propTypes = {
+  title: PropTypes.string,
+  action: PropTypes.string.isRequired,
+  control: PropTypes.object.isRequired,
+  noSubmit: PropTypes.bool,
+  submitClass: PropTypes.string,
+  submitText: PropTypes.string,
+  extraControls: PropTypes.element,
+  children: PropTypes.node,
+}

src/components/registration/Login.jsx

@@ -1,52 +1,52 @@
+import { useForm } from 'react-hook-form'
 import { useSelector } from 'react-redux'
 import { Navigate, NavLink, useSearchParams } from 'react-router'
 
-import { FormBlock, InputField } from 'components/generics/Form'
+import { InputField } from 'components/generics/form/Fields'
+import { Form } from 'components/generics/form/Form'
+
+function ForgottenPasswordLink() {
+  return (
+    <span>
+      Or <NavLink to="/send-reset-password-link">reset your password</NavLink>{' '}
+      if you have forgotten it.
+    </span>
+  )
+}
 
 export default function Login() {
   const isLoggedIn = useSelector((state) => !!state.token)
   const serverSettings = useSelector((state) => state.internal.serverSettings)
 
   const [searchParams, _] = useSearchParams()
 
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useForm()
+
   if (isLoggedIn) {
     return <Navigate to={searchParams.get('from') || '/'} replace />
   }
 
-  let forgottenPasswordLink
-  if (serverSettings?.email_enabled) {
-    forgottenPasswordLink = (
-      <span>
-        {' '}
-        Or <NavLink to="/send-reset-password-link">
-          reset your password
-        </NavLink>{' '}
-        if you have forgotten it.
-      </span>
-    )
-  }
-
   return (
     <div id="login" className="box primary">
       <div className="header">
         <h2>Login</h2>
       </div>
       <div className="flow">
-        <FormBlock
-          action="accounts/login/"
-          submitText="Login"
-          alterationName="login"
-          successMessage={false}
-          pendingMessage={false}
-        >
+        <Form action="api/accounts/login/" submitText="Login" control={control}>
           <InputField
             id="login"
             label={
               <span className="icon">
                 <i className="las la-user"></i>
               </span>
             }
-            required
+            register={register}
+            errors={errors}
+            validation={{ required: true }}
           />
           <InputField
             id="password"
@@ -56,12 +56,19 @@ export default function Login() {
               </span>
             }
             type="password"
-            required
+            register={register}
+            errors={errors}
+            validation={{ required: true }}
           />
-        </FormBlock>
+        </Form>
         <p className="links">
           New here? Create a <NavLink to="/register">new account</NavLink>.
-          {forgottenPasswordLink}
+          {serverSettings?.email_enabled && (
+            <>
+              {' '}
+              <ForgottenPasswordLink />
+            </>
+          )}
         </p>
       </div>
     </div>

src/contexts/index.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const InlineFormContext = createContext(false)