Room join: Added recording consect checkbox validations. (#4120)

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -22,6 +22,7 @@ import Logo from '../../../shared_components/Logo';
 import Avatar from '../../../users/user/Avatar';
 import Form from '../../../shared_components/forms/Form';
 import FormControl from '../../../shared_components/forms/FormControl';
+import FormControlGeneric from '../../../shared_components/forms/FormControlGeneric';
 
 export default function RoomJoin() {
   const { t } = useTranslation();
@@ -71,7 +72,7 @@ export default function RoomJoin() {
       //  When the user provides valid input (name, codes) the UI will subscribe to the room channel.
       const channel = subscribeToRoom(friendlyId, { onReceived: () => { setHasStarted(true); } });
 
-      //  Cleanup: On component unmouting any opened channel subscriptions will be closed.
+      //  Cleanup: On component unmounting any opened channel subscriptions will be closed.
       return () => {
         channel.unsubscribe();
         console.info(`WS: unsubscribed from room(friendly_id): ${friendlyId} channel.`);
@@ -81,7 +82,7 @@ export default function RoomJoin() {
 
   useEffect(() => {
     // Meeting started:
-    //  When meeting starts thig logic will be fired, indicating the event to waiting users (thorugh a toast) for UX matter.
+    //  When meeting starts this logic will be fired, indicating the event to waiting users (through a toast) for UX matter.
     //  Logging the event for debugging purposes and refetching the join logic with the user's given input (name & codes).
     //  With a delay of 7s to give reasonable time for the meeting to fully start on the BBB server.
     if (hasStarted) {
@@ -168,18 +169,15 @@ export default function RoomJoin() {
             <Form methods={methods} onSubmit={handleJoin}>
               <FormControl field={fields.name} type="text" disabled={currentUser?.signed_in} autoFocus={!currentUser?.signed_in} />
               {hasAccessCode && <FormControl field={fields.accessCode} type="text" autoFocus={currentUser?.signed_in} />}
-
               {publicRoom?.data?.recording_consent === 'true' && (
-                <div className="mb-1">
-                  <input
-                    id="consentCheck"
-                    className="form-check-input fs-5 me-2"
+                <FormControlGeneric
+                  id={fields.recordingConsent.controlId}
+                  className="text-muted"
+                  field={fields.recordingConsent}
+                  label={fields.recordingConsent.label}
+                  control={RegularForm.Check}
                   type="checkbox"
                 />
-                  <label className="d-inline text-danger align-middle" htmlFor="consentCheck">
-                    {t('room.meeting.recording_consent')}
-                  </label>
-                </div>
               )}
 
               <Button

app/javascript/components/shared_components/forms/FormControlGeneric.jsx

@@ -22,7 +22,7 @@ export default function FormControlGeneric({
 
 FormControlGeneric.defaultProps = {
   control: BootStrapForm.Control,
-  children: undefined,
+  children: null,
 };
 
 FormControlGeneric.propTypes = {

app/javascript/helpers/forms/JoinFormHelpers.jsx

@@ -5,6 +5,7 @@ const validationSchema = yup.object({
   // TODO: amir - Revisit validations.
   name: yup.string().required('Please enter your full name.'),
   access_code: yup.string(),
+  consent: yup.boolean().oneOf([true], ''),
 });
 
 export const joinFormConfig = {
@@ -34,4 +35,14 @@ export const joinFormFields = {
       id: 'access_code',
     },
   },
+  recordingConsent: {
+    label: 'I acknowledge that this session may be recorded. This may include my voice and video if enabled.',
+    controlId: 'consentCheck',
+    hookForm: {
+      id: 'consent',
+      validations: {
+        shouldUnregister: true,
+      },
+    },
+  },
 };