Adding validation

2025-12-06 04:19:31 +00:00 · 2023-02-14 13:03:03 -06:00
parent 267d7c3354
commit cc175d885e
5 changed files with 171 additions and 127 deletions
--- a/package-lock.json
+++ b/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"
--- a/package.json
+++ b/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",
--- a/src/components/stream/main/index.js
+++ b/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('');
-
-  let registration;
+  const [userID, setUserID] = useState('Unregistered User');

  const getSpeakers = async () => {
    const data = await getSpeaker();
@@ -88,8 +89,10 @@ export default function Main() {
  }, []);

  React.useEffect(async () => {
-    registration = await getRegistration();
-    openLoginPage();
+    console.log('Starting Registration');
+    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={() => {
-                      submitSurvey(stages[stage].id, rating, feedback);
+                    onClick={async () => {
+                      const validated = await submitSurvey(
+                        stages[stage].id,
+                        rating,
+                        feedback,
+                      );
+                      if (validated != false) {
                        setSurveyOpen(false);
+                      } else {
+                        setStarValidationError(true);
+                      }
                    }}>
                    Submit
                  </button>
@@ -334,9 +362,8 @@ export default function Main() {
        </button>
      </div>
      <BrowserOnly>
-        {() => (
-          <>
-            <Room videoSource={stages[stage]}></Room>
+        {() => <Room userID={userID} videoSource={stages[stage]}></Room>}
+      </BrowserOnly>
      <Modal
        isOpen={loginOpen}
        onRequestClose={openLoginPage}
@@ -348,13 +375,11 @@ export default function Main() {
              <li>
                <label>
                  What is your email address?
-                        {validationError === true && (
-                          <p class="text-red-500 my-0 pl-2">
-                            Error Validating Email
-                          </p>
+                  {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] 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-[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);
@@ -366,7 +391,7 @@ export default function Main() {
                <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)]"
+                    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);
@@ -399,7 +424,7 @@ export default function Main() {
                <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)]"
+                    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);
@@ -420,19 +445,17 @@ export default function Main() {
                title,
                company,
              );
-                    if (validated) {
+              if (validated != false) {
+                setUserID(validated);
                setLoginOpen(false);
              } else {
-                      setvalidationError(true);
+                setEmailValidationError(true);
              }
            }}>
            Submit
          </button>
        </div>
      </Modal>
-          </>
-        )}
-      </BrowserOnly>
    </div>
  );
 }
--- a/src/components/stream/room/index.js
+++ b/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}`,
-            viewer_user_id: 'Test User ID',
+            video_title: `${videoSource?.id} - ${videoSource?.topic}`,
+            viewer_user_id: userID,
            autoPlay: true,
          }}
          className="h-full !rounded"
--- a/src/services/StreamService.js
+++ b/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)
-    .then((response) => response.text())
-    .then((result) => console.log(result))
-    .catch((error) => console.log('error', error));
+  const response = await fetch(URL + '/survey', requestOptions).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);
-      return true;
+      const uuid = md5(email);
+      localStorage.setItem('entry-status', uuid);
+      return uuid;
    } else {
      return false;
    }