Add privacy policy flow

src/Home.jsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useRef, useEffect } from "react";
 import { useHistory, Link } from "react-router-dom";
 import {
   useClient,
@@ -22,6 +22,7 @@ import {
   usePublicRooms,
   createRoom,
   roomAliasFromRoomName,
+  useInteractiveRegistration,
 } from "./ConferenceCallManagerHooks";
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import styles from "./Home.module.css";
@@ -43,9 +44,10 @@ export function Home() {
     loading,
     error,
     client,
-    register,
   } = useClient();
 
+  const [{ privacyPolicyUrl }, register] = useInteractiveRegistration();
+
   const history = useHistory();
   const [creatingRoom, setCreatingRoom] = useState(false);
   const [createRoomError, setCreateRoomError] = useState();
@@ -118,6 +120,7 @@ export function Home() {
             createRoomError={createRoomError}
             creatingRoom={creatingRoom}
             onJoinRoom={onJoinRoom}
+            privacyPolicyUrl={privacyPolicyUrl}
           />
         ) : (
           <RegisteredView
@@ -143,7 +146,25 @@ function UnregisteredView({
   createRoomError,
   creatingRoom,
   onJoinRoom,
+  privacyPolicyUrl,
 }) {
+  const acceptTermsRef = useRef();
+  const [acceptTerms, setAcceptTerms] = useState(false);
+
+  useEffect(() => {
+    if (!acceptTermsRef.current) {
+      return;
+    }
+
+    if (!acceptTerms) {
+      acceptTermsRef.current.setCustomValidity(
+        "You must accept the terms to continue."
+      );
+    } else {
+      acceptTermsRef.current.setCustomValidity("");
+    }
+  }, [acceptTerms]);
+
   return (
     <div className={classNames(styles.home, styles.fullWidth)}>
       <Header className={styles.header}>
@@ -202,6 +223,20 @@ function UnregisteredView({
                     placeholder="Room Name"
                   />
                 </FieldRow>
+                <FieldRow>
+                  <InputField
+                    id="acceptTerms"
+                    type="checkbox"
+                    name="acceptTerms"
+                    onChange={(e) => setAcceptTerms(e.target.checked)}
+                    checked={acceptTerms}
+                    label="Accept Privacy Policy"
+                    ref={acceptTermsRef}
+                  />
+                  <a target="_blank" href={privacyPolicyUrl}>
+                    Privacy Policy
+                  </a>
+                </FieldRow>
                 {createRoomError && (
                   <FieldRow className={styles.fieldRow}>
                     <ErrorMessage>{createRoomError.message}</ErrorMessage>