LukeParke/developer.sailpoint.com
1
0
Fork 0
mirror of https://github.com/LukeHagar/developer.sailpoint.com.git synced 2025-12-06 12:27:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding validation

Browse Source
This commit is contained in:
luke-hagar-sp
2023-02-14 13:03:03 -06:00
parent 267d7c3354
commit cc175d885e
5 changed files with 171 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -17,6 +17,7 @@
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"classnames": "^2.3.2", "classnames": "^2.3.2",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"crypto-js": "^4.1.1",
"docusaurus-plugin-openapi-docs": "^1.5.1", "docusaurus-plugin-openapi-docs": "^1.5.1",
"docusaurus-theme-openapi-docs": "^1.5.1", "docusaurus-theme-openapi-docs": "^1.5.1",
"mux-embed": "^4.17.0", "mux-embed": "^4.17.0",
@@ -4995,7 +4996,8 @@
}, },
"node_modules/crypto-js": { "node_modules/crypto-js": {
"version": "4.1.1", "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": { "node_modules/crypto-random-string": {
"version": "2.0.0", "version": "2.0.0",
@@ -18522,7 +18524,9 @@
} }
}, },
"crypto-js": { "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": { "crypto-random-string": {
"version": "2.0.0" "version": "2.0.0"

1
package.json
View File

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

85
src/components/stream/main/index.js
View File

@@ -6,6 +6,7 @@ import Agenda from '../agenda';
import FAQ from '../faq'; import FAQ from '../faq';
import Room from '../room'; import Room from '../room';
import Speakers from '../speakers'; import Speakers from '../speakers';
import md5 from 'crypto-js/md5';
import BrowserOnly from '@docusaurus/BrowserOnly'; import BrowserOnly from '@docusaurus/BrowserOnly';
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
@@ -68,13 +69,13 @@ export default function Main() {
const [hover, setHover] = useState(0); const [hover, setHover] = useState(0);
const [feedback, setFeedback] = useState(''); const [feedback, setFeedback] = useState('');
const [validationError, setvalidationError] = useState(false); const [emailValidationError, setEmailValidationError] = useState(false);
const [starValidationError, setStarValidationError] = useState(false);
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [name, setName] = useState(''); const [name, setName] = useState('');
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
const [company, setCompany] = useState(''); const [company, setCompany] = useState('');
const [userID, setUserID] = useState('Unregistered User');
let registration;
const getSpeakers = async () => { const getSpeakers = async () => {
const data = await getSpeaker(); const data = await getSpeaker();
@@ -88,8 +89,10 @@ export default function Main() {
}, []); }, []);
React.useEffect(async () => { React.useEffect(async () => {
registration = await getRegistration(); console.log('Starting Registration');
openLoginPage(); const reg = await getRegistration();
console.log(reg);
openLoginPage(reg);
}, []); }, []);
//setting socket here //setting socket here
@@ -124,12 +127,6 @@ export default function Main() {
setStages(data.stages); setStages(data.stages);
}); });
socket.on('survey', (data) => {
if (stage === data) {
setSurveyOpen(true);
}
});
return () => { return () => {
socket.off('connect'); socket.off('connect');
socket.off('disconnect'); 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() { function changeToIDNStage() {
setStage('IDN'); setStage('IDN');
console.log('Changing Stage');
} }
function changeToIIQStage() { function changeToIIQStage() {
setStage('IIQ'); setStage('IIQ');
console.log('Changing Stage');
} }
function openLoginPage() { function openLoginPage(reg) {
setTimeout(() => { setTimeout(() => {
console.log('opening login page'); console.log('opening login page');
let pop_status = localStorage.getItem('entry-status'); 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); setLoginOpen(true);
} }
}, 1000); }, 1000);
@@ -264,7 +278,13 @@ export default function Main() {
<p className="my-0"> <p className="my-0">
How valuable was the session "{stages[stage]?.topic}" How valuable was the session "{stages[stage]?.topic}"
to you? to you?
{starValidationError === true && (
<p class="text-red-500 my-0 pl-2">
Rating is required
</p> </p>
)}
</p>
<div className="py-4"> <div className="py-4">
{[...Array(5)].map((star, index) => { {[...Array(5)].map((star, index) => {
index += 1; index += 1;
@@ -292,7 +312,7 @@ export default function Main() {
this session to know? this session to know?
</p> </p>
<textarea <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..." placeholder="Write your thoughts here..."
onInput={(e) => { onInput={(e) => {
setFeedback(e.target.value); setFeedback(e.target.value);
@@ -305,9 +325,17 @@ export default function Main() {
<div className="flex flex-row justify-end"> <div className="flex flex-row justify-end">
<button <button
className={styles.modalButton} className={styles.modalButton}
onClick={() => { onClick={async () => {
submitSurvey(stages[stage].id, rating, feedback); const validated = await submitSurvey(
stages[stage].id,
rating,
feedback,
);
if (validated != false) {
setSurveyOpen(false); setSurveyOpen(false);
} else {
setStarValidationError(true);
}
}}> }}>
Submit Submit
</button> </button>
@@ -334,9 +362,8 @@ export default function Main() {
</button> </button>
</div> </div>
<BrowserOnly> <BrowserOnly>
{() => ( {() => <Room userID={userID} videoSource={stages[stage]}></Room>}
<> </BrowserOnly>
<Room videoSource={stages[stage]}></Room>
<Modal <Modal
isOpen={loginOpen} isOpen={loginOpen}
onRequestClose={openLoginPage} onRequestClose={openLoginPage}
@@ -348,13 +375,11 @@ export default function Main() {
<li> <li>
<label> <label>
What is your email address? What is your email address?
{validationError === true && ( {emailValidationError === true && (
<p class="text-red-500 my-0 pl-2"> <p class="text-red-500 my-0 pl-2">Error Validating Email</p>
Error Validating Email
</p>
)} )}
<input <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" placeholder="Email"
onInput={(e) => { onInput={(e) => {
setEmail(e.target.value); setEmail(e.target.value);
@@ -366,7 +391,7 @@ export default function Main() {
<label> <label>
What name shall we address you by? What name shall we address you by?
<input <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" placeholder="Name"
onInput={(e) => { onInput={(e) => {
setName(e.target.value); setName(e.target.value);
@@ -399,7 +424,7 @@ export default function Main() {
<label> <label>
What company are you joining on behalf of today? What company are you joining on behalf of today?
<input <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" placeholder="Company"
onInput={(e) => { onInput={(e) => {
setCompany(e.target.value); setCompany(e.target.value);
@@ -420,19 +445,17 @@ export default function Main() {
title, title,
company, company,
); );
if (validated) { if (validated != false) {
setUserID(validated);
setLoginOpen(false); setLoginOpen(false);
} else { } else {
setvalidationError(true); setEmailValidationError(true);
} }
}}> }}>
Submit Submit
</button> </button>
</div> </div>
</Modal> </Modal>
</>
)}
</BrowserOnly>
</div> </div>
); );
} }

8
src/components/stream/room/index.js
View File

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

28
src/services/StreamService.js
View File

@@ -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() { export async function getFAQ() {
try { try {
@@ -37,6 +39,7 @@ export async function getRegistration() {
} }
export async function submitSurvey(session, rating, feedback) { export async function submitSurvey(session, rating, feedback) {
if (rating < 1) return false;
var myHeaders = new Headers(); var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json'); myHeaders.append('Content-Type', 'application/json');
@@ -51,10 +54,20 @@ export async function submitSurvey(session, rating, feedback) {
redirect: 'follow', 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) { export async function submitAttendance(email, name, title, company) {
@@ -85,8 +98,9 @@ export async function submitAttendance(email, name, title, company) {
if (validated) { if (validated) {
console.log('setting login status'); console.log('setting login status');
localStorage.setItem('entry-status', 1); const uuid = md5(email);
return true; localStorage.setItem('entry-status', uuid);
return uuid;
} else { } else {
return false; return false;
} }