Adding validation

package-lock.json

@@ -17,6 +17,7 @@
         "autoprefixer": "^10.4.13",
         "classnames": "^2.3.2",
         "clsx": "^1.1.1",
+        "crypto-js": "^4.1.1",
         "docusaurus-plugin-openapi-docs": "^1.5.1",
         "docusaurus-theme-openapi-docs": "^1.5.1",
         "mux-embed": "^4.17.0",
@@ -4995,7 +4996,8 @@
     },
     "node_modules/crypto-js": {
       "version": "4.1.1",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
     "node_modules/crypto-random-string": {
       "version": "2.0.0",
@@ -18522,7 +18524,9 @@
       }
     },
     "crypto-js": {
-      "version": "4.1.1"
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
     "crypto-random-string": {
       "version": "2.0.0"

package.json

@@ -31,6 +31,7 @@
     "autoprefixer": "^10.4.13",
     "classnames": "^2.3.2",
     "clsx": "^1.1.1",
+    "crypto-js": "^4.1.1",
     "docusaurus-plugin-openapi-docs": "^1.5.1",
     "docusaurus-theme-openapi-docs": "^1.5.1",
     "mux-embed": "^4.17.0",

src/components/stream/main/index.js

@@ -6,6 +6,7 @@ import Agenda from '../agenda';
 import FAQ from '../faq';
 import Room from '../room';
 import Speakers from '../speakers';
+import md5 from 'crypto-js/md5';
 
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import {useEffect, useState} from 'react';
@@ -68,13 +69,13 @@ export default function Main() {
   const [hover, setHover] = useState(0);
   const [feedback, setFeedback] = useState('');
 
-  const [validationError, setvalidationError] = useState(false);
+  const [emailValidationError, setEmailValidationError] = useState(false);
+  const [starValidationError, setStarValidationError] = useState(false);
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
   const [title, setTitle] = useState('');
   const [company, setCompany] = useState('');
-
+  const [userID, setUserID] = useState('Unregistered User');
-  let registration;
 
   const getSpeakers = async () => {
     const data = await getSpeaker();
@@ -88,8 +89,10 @@ export default function Main() {
   }, []);
 
   React.useEffect(async () => {
-    registration = await getRegistration();
+    console.log('Starting Registration');
-    openLoginPage();
+    const reg = await getRegistration();
+    console.log(reg);
+    openLoginPage(reg);
   }, []);
 
   //setting socket here
@@ -124,12 +127,6 @@ export default function Main() {
       setStages(data.stages);
     });
 
-    socket.on('survey', (data) => {
-      if (stage === data) {
-        setSurveyOpen(true);
-      }
-    });
-
     return () => {
       socket.off('connect');
       socket.off('disconnect');
@@ -138,18 +135,35 @@ export default function Main() {
     };
   }, []);
 
+  useEffect(() => {
+    socket.on('survey', (data) => {
+      if (stage === data) {
+        setSurveyOpen(true);
+      }
+    });
+    return () => {
+      socket.off('survey');
+    };
+  }, [stage]);
+
   function changeToIDNStage() {
     setStage('IDN');
+    console.log('Changing Stage');
   }
   function changeToIIQStage() {
     setStage('IIQ');
+    console.log('Changing Stage');
   }
 
-  function openLoginPage() {
+  function openLoginPage(reg) {
     setTimeout(() => {
       console.log('opening login page');
       let pop_status = localStorage.getItem('entry-status');
-      if (!pop_status && registration) {
+      console.log(pop_status);
+      console.log(reg);
+      setUserID(pop_status);
+      if (!pop_status && reg) {
+        console.log('open');
         setLoginOpen(true);
       }
     }, 1000);
@@ -264,7 +278,13 @@ export default function Main() {
                         <p className="my-0">
                           How valuable was the session "{stages[stage]?.topic}"
                           to you?
+                          {starValidationError === true && (
+                            <p class="text-red-500 my-0 pl-2">
+                              Rating is required
+                            </p>
+                          )}
                         </p>
+
                         <div className="py-4">
                           {[...Array(5)].map((star, index) => {
                             index += 1;
@@ -292,7 +312,7 @@ export default function Main() {
                           this session to know?
                         </p>
                         <textarea
-                          className="max-w-full w-full h-40 resize-none block p-2.5 font-[poppins] text-gray-900  rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
+                          className="max-w-full w-full h-40 resize-none block p-2.5 font-[poppins] rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
                           placeholder="Write your thoughts here..."
                           onInput={(e) => {
                             setFeedback(e.target.value);
@@ -305,9 +325,17 @@ export default function Main() {
                 <div className="flex flex-row justify-end">
                   <button
                     className={styles.modalButton}
-                    onClick={() => {
+                    onClick={async () => {
-                      submitSurvey(stages[stage].id, rating, feedback);
+                      const validated = await submitSurvey(
-                      setSurveyOpen(false);
+                        stages[stage].id,
+                        rating,
+                        feedback,
+                      );
+                      if (validated != false) {
+                        setSurveyOpen(false);
+                      } else {
+                        setStarValidationError(true);
+                      }
                     }}>
                     Submit
                   </button>
@@ -334,105 +362,100 @@ export default function Main() {
         </button>
       </div>
       <BrowserOnly>
-        {() => (
+        {() => <Room userID={userID} videoSource={stages[stage]}></Room>}
-          <>
-            <Room videoSource={stages[stage]}></Room>
-            <Modal
-              isOpen={loginOpen}
-              onRequestClose={openLoginPage}
-              className={styles.modal}
-              contentLabel="Survey">
-              <div className="md:h-[50vh] sm:w-[90vw] h-[45vh] overflow-auto p-4">
-                <div className="h-full flex flex-row justify-center w-full">
-                  <ul className="flex flex-col justify-center gap-6 m-0 px-8 list-none">
-                    <li>
-                      <label>
-                        What is your email address?
-                        {validationError === true && (
-                          <p class="text-red-500 my-0 pl-2">
-                            Error Validating Email
-                          </p>
-                        )}
-                        <input
-                          className="max-w-full w-[420px] resize-none block p-2.5 font-[poppins] text-gray-900  rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
-                          placeholder="Email"
-                          onInput={(e) => {
-                            setEmail(e.target.value);
-                          }}
-                        />
-                      </label>
-                    </li>
-                    <li>
-                      <label>
-                        What name shall we address you by?
-                        <input
-                          className="max-w-full w-[420px] resize-none block p-2.5 font-[poppins] text-gray-900  rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
-                          placeholder="Name"
-                          onInput={(e) => {
-                            setName(e.target.value);
-                          }}
-                        />
-                      </label>
-                    </li>
-                    <li>
-                      <label>
-                        What title are you most often addressed by?
-                        <select
-                          className="max-w-full w-[420px] resize-none block p-2.5 font-[poppins] rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
-                          placeholder="Title"
-                          onChange={(e) => {
-                            setTitle(e.target.value);
-                          }}
-                          defaultValue="select">
-                          <option disabled>select</option>
-                          <option>Developer</option>
-                          <option>Architect</option>
-                          <option>Solutions</option>
-                          <option>Consultant</option>
-                          <option>Director</option>
-                          <option>SVP/VP</option>
-                          <option>CEO</option>
-                        </select>
-                      </label>
-                    </li>
-                    <li>
-                      <label>
-                        What company are you joining on behalf of today?
-                        <input
-                          className="max-w-full w-[420px] resize-none block p-2.5 font-[poppins] text-gray-900  rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
-                          placeholder="Company"
-                          onInput={(e) => {
-                            setCompany(e.target.value);
-                          }}
-                        />
-                      </label>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <div className="flex flex-row justify-end">
-                <button
-                  className={styles.modalButton}
-                  onClick={async () => {
-                    const validated = await submitAttendance(
-                      email,
-                      name,
-                      title,
-                      company,
-                    );
-                    if (validated) {
-                      setLoginOpen(false);
-                    } else {
-                      setvalidationError(true);
-                    }
-                  }}>
-                  Submit
-                </button>
-              </div>
-            </Modal>
-          </>
-        )}
       </BrowserOnly>
+      <Modal
+        isOpen={loginOpen}
+        onRequestClose={openLoginPage}
+        className={styles.modal}
+        contentLabel="Survey">
+        <div className="md:h-[50vh] sm:w-[90vw] h-[45vh] overflow-auto p-4">
+          <div className="h-full flex flex-row justify-center w-full">
+            <ul className="flex flex-col justify-center gap-6 m-0 px-8 list-none">
+              <li>
+                <label>
+                  What is your email address?
+                  {emailValidationError === true && (
+                    <p class="text-red-500 my-0 pl-2">Error Validating Email</p>
+                  )}
+                  <input
+                    className="max-w-full w-[420px] resize-none block p-2.5 font-[poppins]  rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
+                    placeholder="Email"
+                    onInput={(e) => {
+                      setEmail(e.target.value);
+                    }}
+                  />
+                </label>
+              </li>
+              <li>
+                <label>
+                  What name shall we address you by?
+                  <input
+                    className="max-w-full w-[420px] resize-none block p-2.5 font-[poppins]  rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
+                    placeholder="Name"
+                    onInput={(e) => {
+                      setName(e.target.value);
+                    }}
+                  />
+                </label>
+              </li>
+              <li>
+                <label>
+                  What title are you most often addressed by?
+                  <select
+                    className="max-w-full w-[420px] resize-none block p-2.5 font-[poppins] rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
+                    placeholder="Title"
+                    onChange={(e) => {
+                      setTitle(e.target.value);
+                    }}
+                    defaultValue="select">
+                    <option disabled>select</option>
+                    <option>Developer</option>
+                    <option>Architect</option>
+                    <option>Solutions</option>
+                    <option>Consultant</option>
+                    <option>Director</option>
+                    <option>SVP/VP</option>
+                    <option>CEO</option>
+                  </select>
+                </label>
+              </li>
+              <li>
+                <label>
+                  What company are you joining on behalf of today?
+                  <input
+                    className="max-w-full w-[420px] resize-none block p-2.5 font-[poppins] rounded-lg border focus:ring-blue-500 focus:border-blue-500 placeholder:text-[color:var(--ifm-color-primary)]"
+                    placeholder="Company"
+                    onInput={(e) => {
+                      setCompany(e.target.value);
+                    }}
+                  />
+                </label>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="flex flex-row justify-end">
+          <button
+            className={styles.modalButton}
+            onClick={async () => {
+              const validated = await submitAttendance(
+                email,
+                name,
+                title,
+                company,
+              );
+              if (validated != false) {
+                setUserID(validated);
+                setLoginOpen(false);
+              } else {
+                setEmailValidationError(true);
+              }
+            }}>
+            Submit
+          </button>
+        </div>
+      </Modal>
     </div>
   );
 }

src/components/stream/room/index.js

@@ -5,13 +5,15 @@ import styles from './styles.module.css';
 import Link from '@docusaurus/Link';
 import WidgetBot from '@widgetbot/react-embed';
 
-export default function Room({videoSource}) {
+export default function Room({videoSource, userID}) {
   const [test, setTest] = useState();
 
   useEffect(() => {
     setTest(test);
   }, [videoSource?.topic]);
 
+  console.log(userID);
+
   const staticVideo = '/img/developer_days_placeholder_video.mov';
   const placeholderVideo = 'placeholdervideo';
 
@@ -36,8 +38,8 @@ export default function Room({videoSource}) {
           metadata={{
             player_name: 'SailPoint Developer Community - Developer Days',
             video_id: videoSource?.id,
-            video_title: `${videoSource?.speaker} - ${videoSource?.topic}`,
+            video_title: `${videoSource?.id} - ${videoSource?.topic}`,
-            viewer_user_id: 'Test User ID',
+            viewer_user_id: userID,
             autoPlay: true,
           }}
           className="h-full !rounded"

src/services/StreamService.js

@@ -1,4 +1,6 @@
-export const URL = 'https://developer-community-backend.herokuapp.com';
+import md5 from 'crypto-js/md5';
+
+export const URL = 'https://developer-community-backend-de.herokuapp.com';
 
 export async function getFAQ() {
   try {
@@ -37,6 +39,7 @@ export async function getRegistration() {
 }
 
 export async function submitSurvey(session, rating, feedback) {
+  if (rating < 1) return false;
   var myHeaders = new Headers();
   myHeaders.append('Content-Type', 'application/json');
 
@@ -51,10 +54,20 @@ export async function submitSurvey(session, rating, feedback) {
     redirect: 'follow',
   };
 
-  fetch(URL + '/survey', requestOptions)
+  const response = await fetch(URL + '/survey', requestOptions).catch(
-    .then((response) => response.text())
+    (error) => {
-    .then((result) => console.log(result))
+      console.log('error', error);
-    .catch((error) => console.log('error', error));
+      return false;
+    },
+  );
+
+  const validated = await response.text();
+
+  if (validated) {
+    return true;
+  } else {
+    return false;
+  }
 }
 
 export async function submitAttendance(email, name, title, company) {
@@ -85,8 +98,9 @@ export async function submitAttendance(email, name, title, company) {
 
     if (validated) {
       console.log('setting login status');
-      localStorage.setItem('entry-status', 1);
+      const uuid = md5(email);
-      return true;
+      localStorage.setItem('entry-status', uuid);
+      return uuid;
     } else {
       return false;
     }