= ({ ...props }) => {\r\n var dataProvider = new DataProvider();\r\n let eventState = props.event;\r\n let [isDialogHiddenState, SetDialogHidden] = useState(true);\r\n let [MailError, SetMailError] = useState(\"\");\r\n\r\n const richTextInput = useRef(null);\r\n const topContext = useContext(FreelancerContext);\r\n const modules: any = {\r\n toolbar: [\r\n [{\r\n 'header': [1, 2, 3, false]\r\n }],\r\n ['bold', 'italic', 'underline', 'strike', 'blockquote'],\r\n [{\r\n 'color': []\r\n }, {\r\n 'background': []\r\n }],\r\n [{\r\n 'list': 'ordered'\r\n }, {\r\n 'list': 'bullet'\r\n }, {\r\n 'indent': '-1'\r\n }, {\r\n 'indent': '+1'\r\n }],\r\n ['link', 'image', 'video'],\r\n ['clean']\r\n ],\r\n };\r\n const formats = ['header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image', 'video', 'background', 'color'];\r\n function onDismiss() {\r\n SetDialogHidden(true);\r\n Utility.removeEmptyDivIfPresent();\r\n }\r\n function sendMail() {\r\n var filterEntry = selectedUser.filter((selection: any) => {\r\n return selection.Checked == true;\r\n });\r\n if (filterEntry.length > 0\r\n && String(mailBody).trim().length > 0\r\n && String(mailSubject).trim().length > 0\r\n ) {\r\n\r\n var richTextField = richTextInput.current;\r\n var mailParameter = {\r\n emailProps: {\r\n stage: \"EventApplicantMail\",\r\n dataObject: {\r\n mailTo: filterEntry.map((x: any) => x.Email).join(','),\r\n mailSubject: mailSubject,\r\n mailBody: mailBody.replaceAll(\"\", \"
\")\r\n }\r\n },\r\n MailType: AppConstants.MailType.Standard,\r\n ID: eventState.eventID\r\n };\r\n topContext.ShowFreelanceLoader(true, \"Mail sending is in progress...\");\r\n // SetShowLoader(true);\r\n if (Utility.IsLoginUserActive(topContext.ExpireSession)) {\r\n dataProvider.sendMail(mailParameter)\r\n .then((result: any) => {\r\n // console.log(result);\r\n if (result.hasError) {\r\n /// mail failed\r\n SetMailError(result.message);\r\n }\r\n else {\r\n /// mail send\r\n SetMailError(\"\");\r\n SetDialogHidden(true);\r\n topContext.ShowFreelancerModal(\"Message\", \"Mail send successfully.\")\r\n }\r\n topContext.ShowFreelanceLoader(false, \"\");\r\n }).catch((err: any) => {\r\n console.log(err);\r\n SetMailError(\"Error occur in sending mail.\");\r\n topContext.ShowFreelanceLoader(false, \"\");\r\n });\r\n }\r\n\r\n } else {\r\n SetMailError(\"Please select users and provide mail subject/body to send mail.\");\r\n }\r\n Utility.removeEmptyDivIfPresent();\r\n }\r\n function openMailDialog() {\r\n SetDialogHidden(false);\r\n }\r\n function returnSelection(selectedUserColl: any) {\r\n // alert(JSON.stringify(selectedUserColl));\r\n selectedUser = selectedUserColl;\r\n SetMailError(\"\");\r\n }\r\n const onMailChange = (event: React.FormEvent, newValue?: string) => {\r\n mailBody = newValue;\r\n SetMailError(\"\");\r\n }\r\n const onSubjectChange = (event: React.FormEvent, newValue?: string) => {\r\n mailSubject = newValue;\r\n SetMailError(\"\");\r\n }\r\n function handleMailBodyChange(value: string) {\r\n mailBody = value;\r\n SetMailError(\"\");\r\n }\r\n useEffect(() => {\r\n var eventSubmissions = eventState.submission\r\n ? JSON.parse(eventState.submission)\r\n : [];\r\n var uniqueUserColl: any = [];\r\n eventSubmissions.forEach((submission: any) => {\r\n var coll = uniqueUserColl.filter((item: any) => {\r\n return item.key == submission.Email\r\n });\r\n if (coll.length == 0) {\r\n uniqueUserColl.push({\r\n key: submission.Email,\r\n text: submission.FirstName + \" \" + submission.LastName\r\n });\r\n }\r\n });\r\n\r\n }, [JSON.stringify(props.event)]);\r\n return (\r\n <>\r\n openMailDialog()}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n onSubjectChange(e, value)}\r\n >\r\n \r\n \r\n \r\n {MailError.length > 0 &&\r\n {MailError} \r\n }\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n","import { Label, Stack, StackItem } from 'office-ui-fabric-react';\r\nimport * as React from 'react';\r\nimport { AppConstants } from '../../../../Utility/Constants';\r\nimport '../Calendar.scss';\r\nimport { EventMail } from './EventMail';\r\nimport { RenderApplicant } from './RenderApplicant';\r\nexport interface IEventApplicantProps {\r\n eventRequiredJobs: any,\r\n eventSubmissions: any,\r\n event: any\r\n}\r\n\r\nexport interface IEventApplicantState {\r\n}\r\n\r\nexport class EventApplicant extends React.Component {\r\n constructor(MyProps: any) {\r\n super(MyProps);\r\n this.state = {\r\n };\r\n }\r\n\r\n public render() {\r\n\r\n return (\r\n \r\n \r\n Registered Users \r\n \r\n \r\n \r\n {\r\n this.state.eventJobSubmissions.map((job: any) => {\r\n return \r\n \r\n \r\n {job.title}\r\n \r\n \r\n {job.Applicant.map((applicant: any) => {\r\n return {applicant.Name} {applicant.Status + \" \" + applicant.Order}
\r\n })}\r\n \r\n \r\n \r\n\r\n })\r\n }\r\n\r\n \r\n */}\r\n \r\n );\r\n }\r\n\r\n public componentDidMount() {\r\n\r\n }\r\n\r\n}","import * as React from 'react';\r\nimport '../Main.scss';\r\nimport {\r\n ActionButton, Checkbox, css, Stack, PrimaryButton, TextField, Text, getTheme, Link, DetailsList, DetailsListLayoutMode, IColumn, SelectionMode, IDetailsRowProps, DetailsRow, Spinner, IconButton, Dialog, DialogFooter, DefaultButton, ConstrainMode, Icon, Label, DialogType, SpinnerSize, Dropdown, IDropdownOption, IDropdownStyles, IChoiceGroupOption, ChoiceGroup\r\n} from 'office-ui-fabric-react';\r\n\r\nimport {\r\n DatePicker,\r\n IDatePickerStrings,\r\n addMonths,\r\n addYears,\r\n IDatePickerStyles,\r\n} from 'office-ui-fabric-react';\r\nimport { IDataProvider } from '../../../../dataprovider/IDataProvider';\r\nimport { IEventQuery, IFreelancerEvent, IUserEventSelection } from '../../../../Interfaces/IUserDetails';\r\nimport { EventMode, TimeMode } from '../../../Utility/FreelancerEnums';\r\nimport { FreelancerContext } from '../../Common/FreelancerContext';\r\nimport { Utility } from '../../../Utility/Utility';\r\nimport { EventApplicant } from './SubEvents/EventApplicant';\r\nimport { AppTooltip } from '../../Common/AppTooltip';\r\nimport { AppConstants } from '../../../Utility/Constants';\r\nimport { EventAttendance } from './SubEvents/EventAttendance';\r\nimport { update } from 'lodash';\r\nimport { ExportToCsv, Options } from 'export-to-csv';\r\nimport { Confirmation } from '../../Common/Confirmation';\r\nconst options: Options = {\r\n filename: \"All events\",\r\n fieldSeparator: ',',\r\n quoteStrings: '\"',\r\n decimalSeparator: '.',\r\n showLabels: true,\r\n // showTitle: true,\r\n // title: 'My Awesome CSV',\r\n useTextFile: false,\r\n useBom: true,\r\n useKeysAsHeaders: true,\r\n // headers: ['Column 1', 'Column 2', etc...] <-- Won't work with useKeysAsHeaders present!\r\n};\r\nconst csvExporter = new ExportToCsv(options);\r\nexport interface IManageEventProps {\r\n calendarInfo: any;\r\n dataProvider: IDataProvider;\r\n masterData: any;\r\n closeIfModal?: any;\r\n loginUserDetail: any;\r\n isUserAdmin: boolean;\r\n eventInfo: any;\r\n}\r\n\r\nexport interface IManageEventState {\r\n availableJobs: any;\r\n eventDate: any;\r\n eventTime: any;\r\n eventTitle: string;\r\n eventDesc: string;\r\n eventJobUsers: any;\r\n userSelectionForEvent: any;\r\n eventStatus: string;\r\n event: any;\r\n showConfirmation: boolean;\r\n}\r\n\r\nconst statusOptions: IDropdownOption[] = [\r\n {\r\n key: \"Draft\",\r\n text: \"Draft\"\r\n },\r\n {\r\n key: \"Final\",\r\n text: \"Final\"\r\n }\r\n];\r\nconst hoursOptions: IDropdownOption[] = [];\r\nfor (let i = 0; i < 24; i++) {\r\n hoursOptions.push({\r\n key: i,\r\n text: i.toString()\r\n });\r\n}\r\n\r\nconst minOptions: IDropdownOption[] = [];\r\nfor (let i = 0; i < 60; i++) {\r\n minOptions.push({\r\n key: i,\r\n text: i.toString()\r\n });\r\n}\r\nconst dropdownStyles: Partial = {\r\n dropdown: { width: 200 },\r\n // dropdownItem: { width: 300 },\r\n};\r\nconst datePickerStyles: Partial = { root: { maxWidth: 300 } };\r\n\r\nlet userJobsOptions: any[] = [];\r\nlet isLoginUserFilledJob: boolean = false;\r\nlet isValidDateForEvent: boolean = true;\r\nvar eventSubmissions: any = [];\r\nvar eventRequiredJobs: any = [];\r\nvar eventJobAttendance: any = [];\r\nexport class ManageEvent extends React.Component {\r\n constructor(MyProps: any) {\r\n super(MyProps);\r\n this.initializeVariables();\r\n this.state = {\r\n event: null,\r\n eventStatus: \"\",\r\n userSelectionForEvent: null,\r\n eventJobUsers: [],\r\n availableJobs: eventRequiredJobs,\r\n eventDate: null,\r\n eventTime: null,\r\n eventTitle: \"\",\r\n eventDesc: \"\",\r\n showConfirmation: false,\r\n };\r\n // this.context.ShowFreelanceLoader(true, \"\");\r\n this.renderEvent = this.renderEvent.bind(this);\r\n this.downloadEventAttendance = this.downloadEventAttendance.bind(this);\r\n Utility.addBlockBackgroundClass();\r\n Utility.removeEmptyDivIfPresent();\r\n }\r\n private initializeVariables() {\r\n userJobsOptions = [];\r\n isLoginUserFilledJob = false;\r\n isValidDateForEvent = true;\r\n eventSubmissions = [];\r\n eventRequiredJobs = [];\r\n eventJobAttendance = [];\r\n }\r\n protected BindUserJobOptions(eventRequiredJobs: any, eventSubmissions: any, IsUserJobPresent: boolean) {\r\n userJobsOptions = [];\r\n if (this.props.masterData) {\r\n var userProfileJobs: any = [];\r\n if (this.props.loginUserDetail.approvedJobs) {\r\n userProfileJobs = JSON.parse(JSON.stringify(this.props.loginUserDetail.approvedJobs));\r\n }\r\n /// disable user options if not approved in user profile by admin\r\n this.props.masterData.userJobArea.forEach((job: any) => {\r\n var filteredProfileJob = userProfileJobs.filter((item: any) => {\r\n return (item.lookupId == job.id);\r\n });\r\n userJobsOptions.push({\r\n key: job.id,\r\n text: job.title,\r\n disabled: filteredProfileJob.length > 0 ? false : true,\r\n JobType: 1\r\n });\r\n });\r\n }\r\n\r\n /// Check if login user already filled job option then radio button should be disabled\r\n if (IsUserJobPresent) {\r\n userJobsOptions.forEach(element => {\r\n element.disabled = true;\r\n });\r\n }\r\n /// If all jobs are filled then radio button should be disable\r\n /// Check for all jobs filled\r\n userJobsOptions.forEach(element => {\r\n var requiredJobs = eventRequiredJobs.filter((item: any) => {\r\n return element.key == item.id;\r\n });\r\n var userApplicationsForJob = eventSubmissions.filter((item: any) => {\r\n return element.key == item.ID;\r\n });\r\n if (requiredJobs.length > 0) {\r\n\r\n if (userApplicationsForJob.length >= requiredJobs[0].count) {\r\n element.JobType = 2;\r\n }\r\n /// Applicants should be double of required jobs(main and subordinate) \r\n if (userApplicationsForJob.length >= (requiredJobs[0].count * AppConstants.NoOfApplicantForEachJob)) {\r\n element.disabled = true;\r\n element.JobType = 0;\r\n }\r\n\r\n }\r\n else {\r\n element.disabled = true;\r\n element.JobType = 0;\r\n }\r\n });\r\n\r\n\r\n\r\n }\r\n protected OnEventTitleChange(event: any) {\r\n this.setState({\r\n eventTitle: event.target.value\r\n });\r\n }\r\n public onTimeChange(timeMode: TimeMode, event: React.FormEvent, item: IDropdownOption) {\r\n\r\n var timeslot = this.state.eventTime;\r\n switch (timeMode) {\r\n case TimeMode.StartHours:\r\n timeslot.start.hour = item.key;\r\n break;\r\n case TimeMode.StartMins:\r\n timeslot.start.min = item.key;\r\n break;\r\n case TimeMode.EndHours:\r\n timeslot.end.hour = item.key;\r\n break;\r\n case TimeMode.EndMins:\r\n timeslot.end.min = item.key;\r\n break;\r\n default:\r\n break;\r\n }\r\n this.setState({\r\n eventTime: timeslot,\r\n });\r\n };\r\n protected downloadEventAttendance() {\r\n try {\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n eventJobAttendance = eventSubmissions;\r\n var userEventsForDownload: any[] = [];\r\n var Title = this.state.eventTitle;\r\n var Description = this.state.eventDesc;\r\n var eventStartDate = new Date(this.state.eventDate);\r\n eventStartDate.setHours(this.state.eventTime.start.hour, this.state.eventTime.start.min);\r\n\r\n var eventEndDate = new Date(this.state.eventDate);\r\n eventEndDate.setHours(this.state.eventTime.end.hour, this.state.eventTime.end.min);\r\n eventJobAttendance.forEach((item: any) => {\r\n if (item?.IsP == true) {\r\n var jobStartTime: Date = item?.ST\r\n ? new Date(eventStartDate)\r\n : null;\r\n var jobEndTime: Date = item?.ST\r\n ? new Date(eventEndDate)\r\n : null;\r\n if (jobStartTime) {\r\n jobStartTime.setHours(item.ST.H, item.ST.M);\r\n }\r\n if (jobEndTime) {\r\n jobEndTime.setHours(item.ET.H, item.ET.M);\r\n }\r\n userEventsForDownload.push(\r\n {\r\n Title: Title,\r\n // \"Start Time\": Utility.GetClientDateTimeFormat(eventStartDate),\r\n // \"End Time\": Utility.GetClientDateTimeFormat(eventEndDate),\r\n // Description: Description,\r\n User: item?.Email,\r\n Job: item?.Text,\r\n Status: item?.Type + \" \" + item?.Order,\r\n \"Job Start Time\": Utility.GetClientDateTimeFormat(jobStartTime),\r\n \"Job End Time\": Utility.GetClientDateTimeFormat(jobEndTime),\r\n Hours: item?.Hours ? item.Hours : \"\",\r\n Rating: item?.Rating ? item.Rating : \"\"\r\n }\r\n );\r\n }\r\n\r\n });\r\n if (userEventsForDownload.length > 0) {\r\n csvExporter.options.filename = \"Event Attendances\";\r\n setTimeout(function () {\r\n csvExporter.generateCsv(userEventsForDownload);\r\n }, 1000);\r\n }\r\n else {\r\n this.context.ShowFreelancerModal(\"Message\", \"No event available for download.\");\r\n }\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n }\r\n catch (err) {\r\n console.log(err);\r\n this.context.ShowFreelancerModal(\"Error\", \"Error in export.\");\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n }\r\n }\r\n /// get context type\r\n static contextType = FreelancerContext;\r\n public render() {\r\n return (\r\n \r\n {this.state.eventDate != null\r\n &&\r\n
\r\n {!isValidDateForEvent &&\r\n
\r\n {this.props.isUserAdmin ? \"Time to edit event has closed.\" : \"Time to register for event has closed.\"} \r\n
\r\n }\r\n\r\n
\r\n \r\n \r\n Title \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Date \r\n \r\n \r\n \r\n \r\n \r\n \r\n Start Time \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n End Time \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Description \r\n \r\n \r\n \r\n\r\n \r\n {this.props.isUserAdmin &&\r\n \r\n \r\n Status \r\n \r\n \r\n \r\n
\r\n \r\n \r\n }\r\n \r\n \r\n Required job profile: \r\n \r\n \r\n {\r\n this.props.isUserAdmin ? \"Count\" : \"\"\r\n } \r\n \r\n \r\n\r\n {this.props.isUserAdmin &&\r\n this.state.availableJobs.map((job: any, jobIndex: number) => {\r\n return \r\n \r\n {job.title} name.id == job.id)[0].tooltip}\r\n /> \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n })\r\n }\r\n\r\n {!this.props.isUserAdmin &&\r\n userJobsOptions.map((job: any, jobIndex: number) => {\r\n return <>\r\n \r\n {job.text} name.id == job.key)[0].tooltip}\r\n /> \r\n \r\n \r\n {this.state.userSelectionForEvent.ID == job.key\r\n ?\r\n \r\n \r\n {\r\n this.state.userSelectionForEvent.ID != job.key\r\n &&\r\n job.disabled == false\r\n &&\r\n job.JobType == 2\r\n &&\r\n \r\n Note** :- Only substitute job available.\r\n
\r\n Note** :- You have registered as {this.state.userSelectionForEvent.Type == \"Main\" ? \"main\" : \"substitute\"} resource.\r\n
\r\n {this.props.isUserAdmin\r\n && eventRequiredJobs.length > 0\r\n && eventSubmissions.length > 0\r\n &&\r\n
\r\n }\r\n {!isValidDateForEvent &&\r\n this.props.isUserAdmin\r\n &&\r\n
\r\n }\r\n {\r\n (this.props.isUserAdmin\r\n ||\r\n (isValidDateForEvent && !this.props.isUserAdmin)\r\n )\r\n &&\r\n
\r\n {\r\n (this.props.isUserAdmin && !isValidDateForEvent && eventSubmissions.length == 0)\r\n ?\r\n No user registered for this event.
\r\n :\r\n {isLoginUserFilledJob ? \"Deregister from Event\" : \"Submit Request\"} \r\n }\r\n {\r\n (\r\n this.props.isUserAdmin\r\n && eventSubmissions.length == 0\r\n && this.props.eventInfo.eventID > 0\r\n )\r\n && Delete Event \r\n\r\n }\r\n \r\n }\r\n {!this.props.isUserAdmin &&\r\n
\r\n \r\n **Instruction \r\n \r\n \r\n \r\n A freelancer can opt for single job only. \r\n Freelancer can de-register from event using Deregister button. \r\n If all job are fill then freelancer will not be able to apply for job. \r\n \r\n\r\n \r\n \r\n }\r\n
\r\n }\r\n {this.state.showConfirmation == true &&\r\n
\r\n }\r\n
, item: IDropdownOption) {\r\n this.setState({\r\n eventStatus: item.key.toString()\r\n });\r\n }\r\n\r\n protected _onChange(jobID: number, value: string, event: any): void {\r\n var userSelectedOption = this.state.userSelectionForEvent;\r\n userSelectedOption.ID = jobID;\r\n userSelectedOption.Text = value;\r\n this.setState({\r\n userSelectionForEvent: userSelectedOption\r\n });\r\n }\r\n protected OnDescChange(event: any) {\r\n this.setState({\r\n eventDesc: event.target.value,\r\n });\r\n }\r\n protected OnCountChange(jobID: any, event: any) {\r\n var availableJobs = [...this.state.availableJobs];\r\n var selectedItems = [];\r\n selectedItems = availableJobs.filter((item) => {\r\n return (item.id == jobID);\r\n });\r\n if (selectedItems.length > 0) {\r\n selectedItems[0].count = event.target.value;\r\n }\r\n this.setState({\r\n availableJobs: availableJobs\r\n });\r\n }\r\n public onSaveEvent() {\r\n var eventStartDate = new Date(this.state.eventDate);\r\n eventStartDate.setHours(this.state.eventTime.start.hour, this.state.eventTime.start.min);\r\n\r\n var eventEndDate = new Date(this.state.eventDate);\r\n eventEndDate.setHours(this.state.eventTime.end.hour, this.state.eventTime.end.min);\r\n\r\n if (this.props.isUserAdmin) {\r\n if (eventStartDate < eventEndDate) {\r\n var Difference_In_Time = eventEndDate.getTime() - eventStartDate.getTime();\r\n var Difference_In_Mins = Difference_In_Time / (1000 * 60);\r\n if (Difference_In_Mins < 30) {\r\n this.context.ShowFreelancerModal(\"Message\", \"Please select minimum 30 minute event time.\");\r\n return false;\r\n }\r\n }\r\n else {\r\n this.context.ShowFreelancerModal(\"Message\", \"End date should be greater than start date\");\r\n return false;\r\n }\r\n\r\n\r\n if (!this.state.eventTitle) {\r\n this.context.ShowFreelancerModal(\"Message\", \"Please give event title.\");\r\n return false;\r\n }\r\n if (!this.state.eventStatus) {\r\n this.context.ShowFreelancerModal(\"Message\", \"Please select event status.\");\r\n return false;\r\n }\r\n var zeroRequirementRows = this.state.availableJobs.filter((i: any) => {\r\n return i.count == 0;\r\n });\r\n if (zeroRequirementRows.length == this.state.availableJobs.length) {\r\n this.context.ShowFreelancerModal(\"Message\", \"Please give count(>0) for a job for event.\");\r\n return false;\r\n }\r\n }\r\n if (!this.props.isUserAdmin && this.state.userSelectionForEvent.ID <= 0) {\r\n this.context.ShowFreelancerModal(\"Message\", \"Please select job for event.\");\r\n return false;\r\n }\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n try {\r\n var eventValues: IFreelancerEvent = {\r\n EventID: this.props.eventInfo.eventID == 0 ? null : Number(this.props.eventInfo.eventID),\r\n Title: this.state.eventTitle,\r\n Description: this.state.eventDesc,\r\n StartTime: eventStartDate.toUTCString(),\r\n EndTime: eventEndDate.toUTCString(),\r\n Status: this.state.eventStatus,\r\n Requirements: JSON.stringify(this.state.availableJobs),\r\n IsAdmin: this.props.isUserAdmin,\r\n Attendance: eventJobAttendance.length == 0 ? \"\" : JSON.stringify(eventJobAttendance),\r\n DeregisterUser: isLoginUserFilledJob ? this.props.loginUserDetail?.title : \"\",\r\n Selection: (isLoginUserFilledJob == false && this.state.userSelectionForEvent.ID > 0)\r\n ? this.state.userSelectionForEvent\r\n : null,\r\n };\r\n if (Utility.IsLoginUserActive(this.context.ExpireSession)) {\r\n this.props.dataProvider.submitEvent(eventValues)\r\n .then((result) => {\r\n console.log(result);\r\n this.props.closeIfModal();\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n this.context.ShowFreelancerModal(\"Error\", \"Error in saving event.\");\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n });\r\n }\r\n } catch (ex) {\r\n console.log(ex);\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n this.context.ShowFreelancerModal(\"Error\", \"Error in saving event data.\");\r\n }\r\n }\r\n\r\n public componentDidMount() {\r\n this.renderEvent();\r\n }\r\n\r\n private async renderEvent() {\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n try {\r\n var event = null;\r\n if (this.props.eventInfo.eventID != 0) {\r\n /// get event\r\n var eventQuery: IEventQuery = {\r\n EventID: Number(this.props.eventInfo.eventID),\r\n FreelancerEmail: \"\",\r\n FreelancerID: null,\r\n Status: \"\",\r\n DateRange: null,\r\n };\r\n var eventColl = await this.props.dataProvider.getEvent(eventQuery);\r\n if (eventColl.length == 1) {\r\n event = eventColl[0];\r\n }\r\n }\r\n /// initialize variables\r\n var calEventStartDate;\r\n var calEventEndDate;\r\n if (event != null) {\r\n calEventStartDate = event.startTime;\r\n calEventEndDate = event.endTime;\r\n\r\n }\r\n else {\r\n calEventStartDate = this.props.calendarInfo.start ? this.props.calendarInfo.start : event.startTime;\r\n calEventEndDate = this.props.calendarInfo.end ? this.props.calendarInfo.end : event.endTime;\r\n }\r\n calEventStartDate = new Date(calEventStartDate);\r\n calEventEndDate = new Date(calEventEndDate);\r\n isValidDateForEvent = this.props.isUserAdmin ? Utility.IsValidDateForEventCreation(calEventStartDate) : Utility.IsValidDateForEventRegistration(calEventStartDate);\r\n if (calEventStartDate.getDay() != calEventEndDate.getDay()) {\r\n calEventEndDate.setMinutes(calEventEndDate.getMinutes() - 1);\r\n }\r\n var calTime = {\r\n start: {\r\n hour: calEventStartDate.getHours(),\r\n min: calEventStartDate.getMinutes()\r\n },\r\n end: {\r\n hour: calEventEndDate.getHours(),\r\n min: calEventEndDate.getMinutes(),\r\n }\r\n }\r\n\r\n var userSelectionForEvent: IUserEventSelection = {\r\n ID: 0,\r\n Text: \"\",\r\n FirstName: this.props.loginUserDetail?.firstName,\r\n LastName: this.props.loginUserDetail?.lastName,\r\n Email: this.props.loginUserDetail?.title,\r\n PID: this.props.loginUserDetail?.id,\r\n AID: this.props.loginUserDetail?.userAccountId,\r\n\r\n }\r\n\r\n /// get user submissions if event is presend with user entry\r\n eventSubmissions = event\r\n ? (event.submission\r\n ? JSON.parse(event.submission)\r\n : []\r\n )\r\n : [];\r\n if (eventSubmissions.length > 0) {\r\n var loginUserSubmission = eventSubmissions.filter((item: any) => {\r\n return (item.Email.toLowerCase() == this.props.loginUserDetail.title.toLowerCase())\r\n });\r\n if (loginUserSubmission.length) {\r\n userSelectionForEvent = loginUserSubmission[0];\r\n isLoginUserFilledJob = true;\r\n }\r\n }\r\n eventRequiredJobs = event\r\n ? (event.requirements\r\n ? JSON.parse(event.requirements)\r\n : []\r\n )\r\n : [];\r\n this.BindUserJobOptions(eventRequiredJobs, eventSubmissions, userSelectionForEvent.ID > 0 ? true : false);\r\n\r\n if (eventRequiredJobs.length == 0) {\r\n eventRequiredJobs = [];\r\n if (this.props.masterData) {\r\n this.props.masterData.userJobArea.forEach((element: any) => {\r\n eventRequiredJobs.push({\r\n id: element.id,\r\n title: element.title,\r\n count: 0,\r\n });\r\n });\r\n }\r\n }\r\n this.setState({\r\n event: event,\r\n eventStatus: event ? event.status : \"\",\r\n userSelectionForEvent: userSelectionForEvent,\r\n eventJobUsers: [],\r\n availableJobs: eventRequiredJobs,\r\n eventDate: new Date(calEventStartDate),\r\n eventTime: calTime,\r\n eventTitle: event ? event.title : \"\",\r\n eventDesc: event ? event.description : \"\",\r\n }, () => {\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n });\r\n } catch (err) {\r\n console.log(err);\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n this.context.ShowFreelancerModal(\"Message\", \"Error in initializing form.\");\r\n }\r\n }\r\n}","import { DefaultButton, Dialog, DialogFooter, DialogType, PrimaryButton, Stack, TextField } from '@fluentui/react';\r\nimport { Label } from 'office-ui-fabric-react';\r\nimport * as React from 'react';\r\nimport { useEffect, useState } from 'react';\r\nimport { CommentMode } from '../../Utility/FreelancerEnums';\r\nimport { Utility } from '../../Utility/Utility';\r\nimport './Common.scss';\r\nexport interface IModalCommentProps {\r\n header: string;\r\n message: string;\r\n buttonText: string;\r\n confirmed: any;\r\n hideConfirmedDialog: any;\r\n}\r\n\r\n\r\nexport const Confirmation: React.FunctionComponent = ({ ...props }) => {\r\n useEffect(() => {\r\n\r\n });\r\n\r\n return (\r\n <>\r\n \r\n \r\n props.confirmed()} text={props.buttonText} />\r\n props.hideConfirmedDialog()} text=\"Cancel\" />\r\n \r\n \r\n \r\n );\r\n};\r\n","import * as React from 'react';\r\nimport { useRef, RefObject } from 'react';\r\nimport FullCalendar, { formatDate } from '@fullcalendar/react'\r\nimport dayGridPlugin from '@fullcalendar/daygrid'\r\nimport timeGridPlugin from '@fullcalendar/timegrid'\r\nimport interactionPlugin, { Draggable } from '@fullcalendar/interaction'\r\nimport { DialogType, FontIcon, Panel, PanelType, SpinnerSize } from 'office-ui-fabric-react';\r\nimport { ManageEvent } from './ManageEvent';\r\nimport { IDataProvider } from '../../../../dataprovider/IDataProvider';\r\nimport { IEventQuery } from '../../../../Interfaces/IUserDetails';\r\nimport { EventMode } from '../../../Utility/FreelancerEnums';\r\nimport './Calendar.scss';\r\nimport { FormLoader } from '../../Common/Loader';\r\nimport { FreelancerContext } from '../../Common/FreelancerContext';\r\nimport { Utility } from '../../../Utility/Utility';\r\nimport { AppConstants } from '../../../Utility/Constants';\r\nimport { ExportToCsv, Options } from 'export-to-csv';\r\nimport { Constants } from '@azure/msal-common';\r\nexport interface IEventProps {\r\n dataProvider: IDataProvider;\r\n masterData: any;\r\n loginUserDetail: any;\r\n isUserAdmin: boolean;\r\n}\r\n\r\nexport interface IEventState {\r\n currentEvents: any;\r\n isPanelOpen: boolean;\r\n panelHeader: string;\r\n calendarInfo: any;\r\n initialEvents: any;\r\n EventMode: EventMode;\r\n}\r\nvar defaultEventID = 0;\r\nvar noActionDate = Utility.DateForEventCreation();\r\nlet eventQuery: IEventQuery = null;\r\nlet eventQueryStart: Date = null;\r\nlet eventQueryEnd: Date = null;\r\nconst options: Options = {\r\n filename: \"All events\",\r\n fieldSeparator: ',',\r\n quoteStrings: '\"',\r\n decimalSeparator: '.',\r\n showLabels: true,\r\n // showTitle: true,\r\n // title: 'My Awesome CSV',\r\n useTextFile: false,\r\n useBom: true,\r\n useKeysAsHeaders: true,\r\n // headers: ['Column 1', 'Column 2', etc...] <-- Won't work with useKeysAsHeaders present!\r\n};\r\nconst csvExporter = new ExportToCsv(options);\r\nexport class EventCalendar extends React.Component {\r\n constructor(MyProps: any) {\r\n super(MyProps);\r\n eventQueryStart = null;\r\n eventQueryEnd = null;\r\n this.state = {\r\n currentEvents: [],\r\n isPanelOpen: false,\r\n panelHeader: \"\",\r\n calendarInfo: null,\r\n initialEvents: [],\r\n EventMode: null,\r\n };\r\n\r\n this.closePanel = this.closePanel.bind(this);\r\n // this.ShowLoader = this.ShowLoader.bind(this);\r\n }\r\n\r\n private closePanel(event: any) {\r\n /// Dialog above panel default calling panel cancel functionality\r\n /// CHeck type to prevent wrong call from modal dialog\r\n var processPanel = false;\r\n if (event) {\r\n if (event.type.toLowerCase() == \"click\") {\r\n processPanel = true;\r\n }\r\n }\r\n else {\r\n processPanel = true;\r\n }\r\n\r\n if (processPanel) {\r\n /// redired to url without parameter\r\n var paramUser = Number(Utility.getDefaultEvent());\r\n if (paramUser > 0) {\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n Utility.redirectHome();\r\n }\r\n else {\r\n this.setState({\r\n isPanelOpen: false,\r\n }, () => {\r\n this.loadCalendarData(eventQuery);\r\n Utility.removeBlockBackgroundClass();\r\n Utility.removeEmptyDivIfPresent();\r\n });\r\n }\r\n }\r\n }\r\n\r\n\r\n /// get context type\r\n static contextType = FreelancerContext;\r\n\r\n calendarRef = React.createRef()\r\n public render() {\r\n return (\r\n <>\r\n \r\n
\r\n {this.state.isPanelOpen &&\r\n
\r\n {this.state.isPanelOpen == true &&\r\n \r\n this.viewDidMount(0, e)}\r\n // viewWillUnmount={this.viewDidMount}\r\n // height=\"auto\"\r\n // contentHeight={10}\r\n // viewClassNames=\"viewCalendarClass\"\r\n dayCellClassNames=\"dayCellClassNames\"\r\n // allDayClassNames=\"allDayClassNames\"\r\n // eventClassNames=\"eventClassNames\"\r\n plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}\r\n // businessHours={{\r\n // // days of week. an array of zero-based day of week integers (0=Sunday)\r\n // daysOfWeek: [1, 2, 3, 4, 5], // Monday - Thursday\r\n\r\n // startTime: '10:00', // a start time (10am in this example)\r\n // endTime: '23:00', // an end time (6pm in this example)\r\n\r\n // }}\r\n slotMinTime={AppConstants.EventCalendar.slotMinTime}\r\n slotMaxTime={AppConstants.EventCalendar.slotMaxTime}\r\n\r\n // themeSystem='bootstrap'\r\n customButtons={{\r\n eventDownloadButton: {\r\n text: 'Download Attendance',\r\n click: this.DownloadEvents.bind(this),\r\n },\r\n prev: {\r\n text: 'Prev',\r\n click: (e: any) => this.viewDidMount(1, e)\r\n\r\n },\r\n next: {\r\n text: 'Next',\r\n click: (e: any) => this.viewDidMount(2, e)\r\n },\r\n today: {\r\n text: 'Today',\r\n click: (e: any) => this.viewDidMount(3, e)\r\n }\r\n }\r\n }\r\n\r\n headerToolbar={{\r\n left: 'prev,next today',\r\n center: 'title',\r\n // right: 'eventDownloadButton dayGridMonth,timeGridDay'\r\n right: this.props.isUserAdmin\r\n ? 'eventDownloadButton dayGridMonth,timeGridDay'\r\n : 'dayGridMonth,timeGridDay'\r\n }}\r\n slotLabelFormat={{ hour: 'numeric', minute: '2-digit', hour12: false }}\r\n eventTimeFormat={{ hour: 'numeric', minute: '2-digit', hour12: false }}\r\n initialView='dayGridMonth'\r\n editable={true}\r\n selectable={true}\r\n selectMirror={true}\r\n dayMaxEvents={false}\r\n weekends={true}\r\n events={this.state.initialEvents}\r\n allDaySlot={false}\r\n // initialEvents={INITIAL_EVENTS}\r\n select={this.handleSelect}\r\n /// Event for mobile call only. on web geting called automatically\r\n dateClick={\r\n window.innerWidth <= AppConstants.CalendarAction.MobileWidth\r\n ? this.handleDateSelect\r\n : null\r\n }\r\n\r\n eventContent={renderEventContent} // custom render function\r\n eventClick={this.handleEventClick}\r\n eventsSet={this.handleEvents} // called after events are initialized/added/changed/removed\r\n // eventChange={function (event: any) {\r\n\r\n // var v = \"dsfs\";\r\n // event.revert();\r\n // }}\r\n // you can update a remote database when these fire:\r\n // eventAdd={function () { alert(\"Add\"); }}\r\n // eventChange={function () { alert(\"Change\"); }}\r\n // eventRemove={function () { alert(\"Remove\") }}\r\n\r\n // eventColor=\"yellow\"\r\n // eventTextColor=\"green\"\r\n // eventBackgroundColor=\"red\"\r\n // eventDidMount={this.dayCellDidMount.bind(this)}\r\n dayCellDidMount={this.dayCellDidMount.bind(this)}\r\n\r\n />\r\n
\r\n {eventInfo.timeText} */}\r\n {eventInfo.event.title} \r\n \r\n )\r\n}\r\n\r\n","import * as React from 'react';\r\nimport { IDataProvider } from '../../../../dataprovider/IDataProvider';\r\nimport { Utility } from '../../../Utility/Utility';\r\nimport { EventCalendar } from './Calendar';\r\n\r\nexport interface IDefaultViewProps {\r\n dataProvider: IDataProvider;\r\n masterData: any;\r\n loginUserDetail: any;\r\n isUserAdmin: boolean;\r\n}\r\n\r\nexport interface IDefaultViewState {\r\n}\r\n\r\nexport class UserEvents extends React.Component {\r\n constructor(MyProps: IDefaultViewProps) {\r\n Utility.removeEmptyDivIfPresent();\r\n super(MyProps);\r\n this.state = {\r\n };\r\n }\r\n\r\n public render() {\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n public componentDidMount() {\r\n\r\n }\r\n\r\n}","import React, { useState, useEffect } from \"react\";\r\nimport { useMsal } from \"@azure/msal-react\";\r\n//import { useIsAuthenticated } from \"@azure/msal-react\";\r\nimport Button from \"react-bootstrap/Button\";\r\nimport { AuthenticatedTemplate, UnauthenticatedTemplate } from \"@azure/msal-react\";\r\nimport { AccountType, IAuthenticatedUser, IUserAccount } from './LoginComponent';\r\nimport { Redirect } from 'react-router';\r\nimport { Dialog, DialogType, Spinner, SpinnerSize } from \"office-ui-fabric-react\";\r\n\r\n// Add scopes here for ID token to be used at Microsoft identity platform endpoints.\r\nexport const loginRequest = {\r\n scopes: [\"User.Read\"],\r\n //prompt: 'select_account',\r\n};\r\n\r\nfunction parseMicrosoftUser(idToken: any): IUserAccount {\r\n return {\r\n firstName: idToken.idTokenClaims?.given_name,\r\n lastName: idToken.idTokenClaims?.family_name,\r\n email: idToken.idTokenClaims?.email,\r\n accountType: AccountType.Microsoft,\r\n userId: null,\r\n activateGuid: null,\r\n id: null,\r\n password: null\r\n } as IUserAccount;\r\n}\r\n\r\nfunction handleLogin(validUsers: any, instance: any, callback: (userInformation: IUserAccount, token: string) => Promise, setAuthenticated: (a: boolean) => void, showError: (e: string) => void, setAuthStatus: (loggedIn: boolean, user: IAuthenticatedUser) => Promise, setRedirect: (a: boolean) => void, setShowWaitingSpinner: (a: boolean) => void) {\r\n return instance.loginPopup(loginRequest).then((result: any) => {\r\n\r\n console.log(\"MICROSOFT ACCOUNT\", result);\r\n\r\n let user = parseMicrosoftUser(result?.account);\r\n // alert(user.email);\r\n var userIsValid = false;\r\n if (validUsers.length == 0) {\r\n userIsValid = true;\r\n }\r\n else {\r\n validUsers.forEach((element: any) => {\r\n if (element.toLowerCase()) {\r\n if (user.email.toLowerCase().endsWith(element.toLowerCase()) == true) {\r\n userIsValid = true;\r\n return;\r\n }\r\n }\r\n });\r\n }\r\n if (userIsValid == true) {\r\n setShowWaitingSpinner(true);\r\n\r\n callback(user, result.idToken).then((spUser: IAuthenticatedUser) => {\r\n if (spUser.isNewUser) {\r\n window.sessionStorage.freelanceConsentTarget = JSON.stringify(spUser);\r\n\r\n setShowWaitingSpinner(false);\r\n\r\n // redirect user to consent page first\r\n setRedirect(true);\r\n\r\n // for now, don't sign user in yet\r\n window.sessionStorage.removeItem(\"authToken\");\r\n window.sessionStorage.removeItem(\"freelanceUser\");\r\n } else {\r\n setShowWaitingSpinner(false);\r\n setAuthStatus(true, spUser);\r\n setAuthenticated(true);\r\n }\r\n }).catch((err) => {\r\n setShowWaitingSpinner(false);\r\n\r\n console.log(\"EnsureUser: \" + err);\r\n instance.logoutRedirect({\r\n onRedirectNavigate: (url: string) => {\r\n // Return false if you would like to stop navigation after local logout\r\n return false;\r\n }\r\n });\r\n setAuthStatus(false, null);\r\n setAuthenticated(false);\r\n\r\n window.sessionStorage.removeItem(\"authToken\");\r\n window.sessionStorage.removeItem(\"freelanceUser\");\r\n\r\n showError(\"Microsoft\");\r\n });\r\n }\r\n else {\r\n alert(\"User:- \" + user.email + \" is not valid for this app.\");\r\n instance.logoutPopup().then((result: any) => {\r\n setAuthenticated(false);\r\n setAuthStatus(false, null);\r\n }).catch((err: string) => {\r\n console.error(err);\r\n });\r\n }\r\n\r\n }).catch((err: string) => {\r\n console.error(err);\r\n });\r\n}\r\n\r\nfunction handleLogout(instance: any, setAuthenticated: (a: boolean) => void, setAuthStatus: (loggedIn: boolean, user: IAuthenticatedUser) => Promise) {\r\n instance.logoutPopup().then((result: any) => {\r\n setAuthenticated(false);\r\n setAuthStatus(false, null);\r\n }).catch((err: string) => {\r\n console.error(err);\r\n });\r\n}\r\n\r\nexport interface IMicrosoftComponentProps {\r\n currentUser: IAuthenticatedUser;\r\n signedIn: boolean;\r\n callback: (userInformation: IUserAccount, token: string, isUserToken: boolean) => Promise;\r\n showError: (error: string) => void;\r\n setAuthStatus: (loggedIn: boolean, user: IAuthenticatedUser) => Promise;\r\n msUsersAllowed: [];\r\n}\r\n\r\n\r\nexport const MicrosoftComponent = (props: IMicrosoftComponentProps) => {\r\n const { instance, accounts } = useMsal();\r\n\r\n //console.log(\"MS Accounts\", accounts);\r\n\r\n const [authenticated, setAuthenticated] = useState(false);\r\n const [redirect, setRedirect] = useState(false);\r\n const [showWaitingSpinner, setShowWaitingSpinner] = useState(false);\r\n const [userName, setUserName] = useState(props.currentUser ? `${props.currentUser.firstName} ${props.currentUser.lastName}` : \"\");\r\n useEffect(() => {\r\n if (props.signedIn) {\r\n setAuthenticated(true);\r\n } else {\r\n setAuthenticated(false);\r\n }\r\n\r\n if (props.currentUser) {\r\n\r\n let currentUser = window.sessionStorage.freelanceUser ? JSON.parse(window.sessionStorage.freelanceUser) : null;\r\n setUserName(\r\n currentUser?.displayName ? currentUser.displayName : (\r\n props.currentUser ? `${props.currentUser.firstName} ${props.currentUser.lastName}` : \"\"\r\n ));\r\n\r\n // setUserName(props.currentUser ? `${props.currentUser.firstName} ${props.currentUser.lastName}` : \"\");\r\n }\r\n\r\n //if (accounts.length > 0) {\r\n // console.log(\"MSAL Accounts\", accounts);\r\n\r\n // let user = parseUser(accounts[0]);\r\n // if (!props.currentUser || props.currentUser.email !== user.email) {\r\n // props.setAuthStatus(true, user);\r\n // }\r\n //} else {\r\n // if (props.currentUser) {\r\n // props.setAuthStatus(false, null);\r\n // }\r\n //}\r\n });\r\n\r\n return (\r\n <>\r\n {redirect && Signed in as:{`${userName}`} handleLogout(instance, setAuthenticated, props.setAuthStatus)}>Logout
\r\n :\r\n handleLogin(props.msUsersAllowed, instance, (user: IUserAccount, token: string) => {\r\n return props.callback(user, token, false);\r\n }, setAuthenticated, props.showError, props.setAuthStatus, setRedirect, setShowWaitingSpinner)}>Sign in with Microsoft \r\n }\r\n \r\n ;\r\n showError: (error: string) => void;\r\n setAuthStatus: (loggedIn: boolean, user: IAuthenticatedUser) => Promise;\r\n}\r\n\r\nexport interface IGoogleLoginComponentState {\r\n redirectConsent: boolean;\r\n showWaitingSpinner: boolean;\r\n showGoogleError: boolean;\r\n googleErrorMessage: string;\r\n}\r\n\r\nexport default class GoogleLoginComponent extends Component {\r\n constructor(props: IGoogleLoginComponentProps) {\r\n super(props);\r\n\r\n console.log(\"GAPI\", (window as any).gapi);\r\n this.state = {\r\n redirectConsent: false,\r\n showWaitingSpinner: false,\r\n showGoogleError: false,\r\n googleErrorMessage: null\r\n };\r\n }\r\n\r\n // Success Handler\r\n private responseGoogleSuccess = (response: any) => {\r\n console.log(\"GOOGLE RESPONSE\", response);\r\n var decoded: any = jwt_decode(response!.credential);\r\n console.log(\"Decoded\", decoded);\r\n let user: IUserAccount = {\r\n firstName: decoded.given_name,\r\n lastName: decoded.family_name,\r\n email: decoded.email,\r\n accountType: AccountType.Google,\r\n name: decoded.name,\r\n userId: null,\r\n activateGuid: null,\r\n id: null,\r\n password: null\r\n //firstName: response.profileObj.givenName,\r\n //lastName: response.profileObj.familyName,\r\n //email: response.profileObj.email,\r\n //accountType: AccountType.Google,\r\n //name: response.profileObj.name,\r\n //userId: null,\r\n //activateGuid: null,\r\n //id: null,\r\n //password: null\r\n } as IUserAccount;\r\n\r\n this.setState({ showWaitingSpinner: true });\r\n\r\n if (!this.props.currentUser || this.props.currentUser.email !== user.email) {\r\n this.props.callback(user, response!.credential, false).then((spUser) => {\r\n if (spUser.isNewUser) {\r\n\r\n // keep user information for consent screen\r\n window.sessionStorage.freelanceConsentTarget = JSON.stringify(spUser);\r\n\r\n // redirect user to consent page first \r\n this.setState({ showWaitingSpinner: false, redirectConsent: true });\r\n\r\n // for now, don't sign user in yet\r\n window.sessionStorage.removeItem(\"authToken\");\r\n window.sessionStorage.removeItem(\"freelanceUser\");\r\n } else {\r\n // directly authenticate user\r\n this.setState({ showWaitingSpinner: false });\r\n this.props.setAuthStatus(true, spUser);\r\n }\r\n }).catch(() => {\r\n this.setState({ showWaitingSpinner: false });\r\n this.props.showError(\"Google\");\r\n this.forceLogout();\r\n });\r\n }\r\n // this.setState({ currentUser: user, isLoggedIn: true }, () => {\r\n // this.props.setAuthStatus(true, user);\r\n // });\r\n };\r\n\r\n // Error Handler\r\n private responseGoogleError = () => {\r\n this.setState({\r\n showGoogleError: true,\r\n googleErrorMessage: `Google Sign-in failed`\r\n });\r\n //if (response.error == \"popup_closed_by_user\") {\r\n // console.log(\"Google login cancelled by user\");\r\n //} else {\r\n // this.setState({\r\n // showGoogleError: true,\r\n // googleErrorMessage: `Google SignIn error: ${response.error}`\r\n // });\r\n // //alert(\"Error on Google login: \" + response.details)\r\n //}\r\n };\r\n\r\n // Logout Session and Update State\r\n private logout = () => {\r\n\r\n if (this.props.currentUser) {\r\n this.props.setAuthStatus(false, null);\r\n }\r\n };\r\n\r\n private forceLogout = () => {\r\n console.log(\"Signing out...\");\r\n //console.log(\"Forcing logout...\");\r\n //loadGapiInsideDOM().then((gapi) => {\r\n // console.log(\"Gapi loaded....\", gapi);\r\n\r\n // gapi.load(\"auth2\",function (){\r\n // console.log(\"auth2 loaded\", (window as any).gapi.auth2);\r\n // gapi.auth2.getAuthInstance().then((auth2:any) => { \r\n // auth2.signOut().then(() => { \r\n // console.log(\"signed out.\"); \r\n // });\r\n // });\r\n // });\r\n //});\r\n\r\n googleLogout();\r\n\r\n window.sessionStorage.removeItem(\"authToken\");\r\n window.sessionStorage.removeItem(\"freelanceUser\");\r\n\r\n this.props.setAuthStatus(false, null);\r\n }\r\n\r\n public render() {\r\n\r\n let isLoggedIn = Boolean(this.props.currentUser);\r\n let userName = this.props.currentUser ? `${this.props.currentUser.firstName} ${this.props.currentUser.lastName}` : \"\";\r\n let currentUser = window.sessionStorage.freelanceUser ? JSON.parse(window.sessionStorage.freelanceUser) : null;\r\n userName = currentUser?.displayName ? currentUser.displayName : userName;\r\n return (\r\n \r\n {this.state.redirectConsent &&
}\r\n
\r\n {isLoggedIn ? (\r\n
\r\n Signed in as:{userName} Sign Out \r\n {/**/}\r\n
\r\n\r\n ) : (\r\n
\r\n )}\r\n
\r\n
\r\n { this.setState({ googleErrorMessage: null, showGoogleError: false }); }}\r\n >\r\n {this.state.googleErrorMessage} \r\n \r\n ;\r\n onPanelStatusChange?: (isOpen: boolean) => void;\r\n currentUser: IAuthenticatedUser;\r\n}\r\n\r\nexport interface ICustomAuthComponentState {\r\n state: \"login\" | \"registration\";\r\n currentUser: IUserAccount;\r\n\r\n firstNameErrorMessage: string;\r\n lastNameErrorMessage: string;\r\n emailErrorMessage: string;\r\n passwordErrorMessage: string;\r\n confirmPasswordErrorMessage: string;\r\n legalNoticeErrorMessage: string;\r\n privacyNoticeErrorMessage: string;\r\n\r\n pwdBadgeVariant: string;\r\n pwdBadgeLabel: string;\r\n\r\n informationType?: MessageBarType;\r\n informationMessage?: string;\r\n registered: boolean;\r\n loggedIn: boolean;\r\n confirmationPassword?: string;\r\n\r\n legalNoticeChecked: boolean;\r\n privacyNoticeChecked: boolean;\r\n\r\n isProcessing: boolean;\r\n showCustomLoginPanel: boolean;\r\n reCaptchaError: boolean;\r\n reCaptchaToken: string;\r\n sendingConfirmation: boolean;\r\n\r\n isValidated: boolean;\r\n}\r\n\r\nexport class ICustomAuthComponent extends React.Component {\r\n private refReCaptchaRegister: React.RefObject = null;\r\n private refReCaptchaLogin: React.RefObject = null;\r\n\r\n constructor(props: ICustomAuthComponentProps) {\r\n super(props);\r\n\r\n this.refReCaptchaRegister = React.createRef();\r\n this.refReCaptchaLogin = React.createRef();\r\n\r\n //let stringUser = sessionStorage.getItem(\"CurrentUser\");\r\n\r\n\r\n let loggedIn = false;\r\n let user: IUserAccount = {\r\n firstName: \"\",\r\n lastName: \"\",\r\n email: \"\",\r\n accountType: AccountType.Custom,\r\n password: \"\",\r\n userId: \"\"\r\n }\r\n //if (stringUser) {\r\n // user = JSON.parse(stringUser) as IUserAccount;\r\n // loggedIn = true;\r\n // this.props.setAuthStatus(true, user);\r\n //}\r\n\r\n if (props.currentUser) {\r\n user = props.currentUser;\r\n loggedIn = true;\r\n }\r\n\r\n this.state = {\r\n state: \"login\",\r\n currentUser: user,\r\n firstNameErrorMessage: \"\",\r\n lastNameErrorMessage: \"\",\r\n emailErrorMessage: \"\",\r\n passwordErrorMessage: \"\",\r\n confirmPasswordErrorMessage: \"\",\r\n legalNoticeErrorMessage: \"\",\r\n privacyNoticeErrorMessage: \"\",\r\n\r\n pwdBadgeVariant: null,\r\n pwdBadgeLabel: null,\r\n\r\n registered: false,\r\n\r\n loggedIn: loggedIn,\r\n\r\n legalNoticeChecked: false,\r\n privacyNoticeChecked: false,\r\n\r\n isProcessing: false,\r\n showCustomLoginPanel: false,\r\n reCaptchaError: false,\r\n reCaptchaToken: null,\r\n\r\n sendingConfirmation: false,\r\n isValidated: false\r\n };\r\n\r\n }\r\n public componentDidMount() {\r\n //console.log(\"LoginComponent componentDidMount\");\r\n\r\n }\r\n\r\n public componentWillReceiveProps(newProps: ICustomAuthComponentProps) {\r\n if (this.props.currentUser != newProps.currentUser) {\r\n let user: IUserAccount = newProps.currentUser;\r\n if (!newProps.currentUser) {\r\n user = {\r\n firstName: \"\",\r\n lastName: \"\",\r\n email: \"\",\r\n accountType: AccountType.Custom,\r\n password: \"\",\r\n userId: \"\"\r\n }\r\n }\r\n this.setState({\r\n loggedIn: Boolean(newProps.currentUser),\r\n currentUser: user\r\n });\r\n }\r\n }\r\n\r\n private _onRegisterBtnCLicked = () => {\r\n try {\r\n console.time(\"_onRegisterBtnCLicked\");\r\n if (this.inputsAreaValid(true)) {\r\n // check if email allready exist \r\n this.registerUser();\r\n\r\n } else {\r\n this.setInformationMessage(\"Please fix the validation issues\", MessageBarType.error);\r\n }\r\n } catch (err) {\r\n alert(\"Error: \" + err);\r\n }\r\n }\r\n private _onLoginBtnClicked = () => {\r\n try {\r\n console.time(\"_onLoginBtnClicked\");\r\n if (this.inputsAreaValid(false)) {\r\n // check if email allready exist\r\n this.loginUser();\r\n } else {\r\n this.setInformationMessage(\"Please fix the validation issues\", MessageBarType.error);\r\n }\r\n } catch (err) {\r\n alert(\"Error: \" + err);\r\n }\r\n }\r\n private _onLogoutBtnClicked = () => {\r\n try {\r\n console.time(\"_onLogoutBtnClicked\");\r\n this.setState({\r\n currentUser: {\r\n firstName: \"\",\r\n lastName: \"\",\r\n email: \"\",\r\n accountType: AccountType.Custom,\r\n password: \"\",\r\n userId: \"\"\r\n },\r\n registered: false, loggedIn: false\r\n }, () => {\r\n this.props.setAuthStatus(false, null);\r\n });\r\n\r\n } catch (err) {\r\n alert(\"Error: \" + err);\r\n } finally {\r\n window.sessionStorage.removeItem(\"authToken\");\r\n window.sessionStorage.removeItem(\"freelanceUser\");\r\n }\r\n }\r\n\r\n private resendActivationCode = () => {\r\n this.setState({ sendingConfirmation: true });\r\n let updatedMessage: any = <>Account is not active { }}>Resent Confirmation Email Resent Confirmation Email ;\r\n autoDismissError = false;\r\n } else if (errormessage == \"reCaptcha Token expired or is invalid\") {\r\n errormessage = <>reCaptcha Token has expired. Please try again.;\r\n autoDismissError = false;\r\n }\r\n\r\n this.setInformationMessage(errormessage, MessageBarType.error, autoDismissError);\r\n\r\n // reset reCaptcha, it's only valid for 1 serverVerify\r\n this.refReCaptchaLogin.current.reset();\r\n\r\n }).finally(() => {\r\n this.setState({ isProcessing: false });\r\n });\r\n }\r\n\r\n\r\n\r\n private registerUser = () => {\r\n this.setState({ isProcessing: true });\r\n this.props.dataProvider.registerInternalUserAccount(this.state.currentUser, this.state.reCaptchaToken).then(result => {\r\n //this.setInformationMessage(\"New Account Register Successfully, please click on the link in the email to confirm the registration\", MessageBarType.success);\r\n this.setState({ registered: true });\r\n }).catch(err => {\r\n console.dir(err);\r\n let errormessage = err;\r\n if (err.detail) {\r\n errormessage = err.detail;\r\n } else if (err.status) {\r\n console.log(err.status)\r\n errormessage = GeneralHelper.parseError(err);\r\n }\r\n if (errormessage == \"reCaptcha Token expired or is invalid\") {\r\n errormessage = <>reCaptcha Token has expired. Please try again.;\r\n }\r\n this.setInformationMessage(errormessage, MessageBarType.error);\r\n\r\n // reset reCaptcha, it's only valid for 1 serverVerify\r\n this.refReCaptchaRegister.current.reset();\r\n\r\n }).finally(() => {\r\n this.setState({ isProcessing: false });\r\n });\r\n }\r\n\r\n private onReCaptchaChange = (value: string) => {\r\n console.log(\"ReCaptcha value: \" + value)\r\n };\r\n\r\n private inputsAreaValid = (register: boolean): boolean => {\r\n\r\n this.setState({ firstNameErrorMessage: \"\", lastNameErrorMessage: \"\", emailErrorMessage: \"\", passwordErrorMessage: \"\", confirmPasswordErrorMessage: \"\", legalNoticeErrorMessage: \"\", privacyNoticeErrorMessage: \"\", reCaptchaError: false });\r\n let invalid = false;\r\n\r\n if (register) {\r\n if (!this.state?.currentUser?.firstName || this.state?.currentUser?.firstName?.trim().length === 0) {\r\n invalid = true;\r\n this.setState({ firstNameErrorMessage: GeneralHelper.mandatoryValidation });\r\n }\r\n if (!this.state?.currentUser?.lastName || this.state?.currentUser?.lastName?.trim().length === 0) {\r\n invalid = true;\r\n this.setState({ lastNameErrorMessage: GeneralHelper.mandatoryValidation });\r\n }\r\n if (!this.state?.currentUser?.password || this.state?.currentUser?.password?.trim().length === 0) {\r\n invalid = true;\r\n this.setState({ passwordErrorMessage: GeneralHelper.mandatoryValidation });\r\n } else {\r\n if (this.state?.confirmationPassword != this.state?.currentUser?.password) {\r\n invalid = true;\r\n this.setState({ confirmPasswordErrorMessage: GeneralHelper.confirmationPasswordInvalid });\r\n }\r\n }\r\n if (!this.checkPasswordStrength(this.state?.currentUser?.password)) {\r\n invalid = true;\r\n // no errorMessage necessary, it's displayed already with the password strength badge\r\n }\r\n if (!this.state?.legalNoticeChecked) {\r\n invalid = true;\r\n this.setState({ legalNoticeErrorMessage: \"You must confirm to have read and agree to StraumannGroup's Legal Notice\" });\r\n }\r\n if (!this.state?.privacyNoticeChecked) {\r\n invalid = true;\r\n this.setState({ privacyNoticeErrorMessage: \"You must confirm to have read and agree to StraumannGroup's Privacy Notice\" });\r\n }\r\n\r\n if (!this.refReCaptchaRegister?.current?.getValue()) {\r\n invalid = true;\r\n this.setState({ reCaptchaError: true });\r\n }\r\n } else {\r\n if (!this.refReCaptchaLogin?.current?.getValue()) {\r\n invalid = true;\r\n this.setState({ reCaptchaError: true });\r\n }\r\n }\r\n\r\n if (!this.state?.currentUser?.email || this.state?.currentUser?.email?.trim().length == 0) {\r\n invalid = true;\r\n this.setState({ emailErrorMessage: GeneralHelper.mandatoryValidation });\r\n } else if (this.state?.currentUser?.email?.indexOf(\"@\") == -1) {\r\n invalid = true;\r\n this.setState({ emailErrorMessage: GeneralHelper.emailValidation });\r\n }\r\n if (!this.state?.currentUser?.password || this.state?.currentUser?.password?.trim().length === 0) {\r\n invalid = true;\r\n this.setState({ passwordErrorMessage: GeneralHelper.mandatoryValidation });\r\n }\r\n\r\n this.setState({ isValidated: true });\r\n\r\n return !invalid;\r\n }\r\n\r\n private resetValidation = (): void => {\r\n this.setState({\r\n firstNameErrorMessage: \"\", lastNameErrorMessage: \"\", emailErrorMessage: \"\", passwordErrorMessage: \"\", confirmPasswordErrorMessage: \"\", informationMessage: \"\",\r\n legalNoticeErrorMessage: \"\", privacyNoticeErrorMessage: \"\", pwdBadgeVariant: null, pwdBadgeLabel: null, reCaptchaError: false, isValidated: false\r\n });\r\n\r\n this.setState(prevState => ({\r\n currentUser: {\r\n ...prevState.currentUser,\r\n email: null,\r\n password: null\r\n }\r\n }));\r\n };\r\n\r\n private setInformationMessage = (message: string, type?: MessageBarType, autoDismiss: boolean = true): void => {\r\n if (autoDismiss) {\r\n this.setState(\r\n {\r\n informationMessage: message,\r\n informationType: type || MessageBarType.warning\r\n },\r\n () => {\r\n setTimeout(() => { this.setState({ informationMessage: \"\" }); }, 4000)\r\n });\r\n } else {\r\n this.setState({ informationMessage: message, informationType: type || MessageBarType.warning });\r\n }\r\n }\r\n\r\n private onCustomLoginButton_Clicked = (): void => {\r\n this.setState({ showCustomLoginPanel: true });\r\n\r\n if (this.props.onPanelStatusChange) {\r\n this.props.onPanelStatusChange(true);\r\n }\r\n }\r\n\r\n private onCustomLoginPanel_Dismiss = (): void => {\r\n this.setState({ showCustomLoginPanel: false });\r\n\r\n if (this.props.onPanelStatusChange) {\r\n this.props.onPanelStatusChange(false);\r\n }\r\n\r\n this.resetValidation();\r\n }\r\n\r\n private onLegalNoticeClicked = (ev?: any, checked?: boolean) => {\r\n this.setState({\r\n legalNoticeChecked: checked\r\n }, () => {\r\n if (this.state.isValidated) {\r\n this.inputsAreaValid(true);\r\n }\r\n });\r\n }\r\n\r\n private onPrivacyNoticeClicked = (ev?: any, checked?: boolean) => {\r\n this.setState({\r\n privacyNoticeChecked: checked\r\n }, () => {\r\n if (this.state.isValidated) {\r\n this.inputsAreaValid(true);\r\n }\r\n });\r\n }\r\n\r\n private checkPasswordStrength = (pwd: string): boolean => {\r\n let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})');\r\n let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))');\r\n let badgeVariant = null;\r\n let badgeLabel = null;\r\n let result: boolean = true;\r\n if (strongPassword.test(pwd)) {\r\n badgeVariant = \"success\";\r\n badgeLabel = \"Strong Password\";\r\n result = true;\r\n } else if (mediumPassword.test(pwd)) {\r\n badgeVariant = \"warning\";\r\n badgeLabel = \"Too short\";\r\n result = false;\r\n } else {\r\n badgeVariant = \"danger\";\r\n badgeLabel = \"Weak Password\";\r\n result = false;\r\n }\r\n this.setState({\r\n pwdBadgeVariant: badgeVariant,\r\n pwdBadgeLabel: badgeLabel\r\n });\r\n return result;\r\n }\r\n\r\n public render(): React.ReactElement {\r\n\r\n let userData = (this.state.currentUser) as any;\r\n\r\n const styleError: string = mergeStyles({\r\n fontFamily: 'Segoe UI, Segoe UI Web (West European), Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif',\r\n fontSize: '12px',\r\n fontWeight: 400,\r\n color: 'rgb(164, 38, 44)',\r\n margin: '0px',\r\n paddingTop: '5px',\r\n display: 'flex',\r\n alignItems: 'center'\r\n });\r\n\r\n let userName = this.props.currentUser ? `${this.props.currentUser.firstName} ${this.props.currentUser.lastName}` : \"\";\r\n let currentUser = window.sessionStorage.freelanceUser ? JSON.parse(window.sessionStorage.freelanceUser) : null;\r\n userName = currentUser?.displayName ? currentUser.displayName : userName;\r\n\r\n return (\r\n \r\n
\r\n {\r\n this.state.registered ?
{\r\n this.setState({ registered: false });\r\n if (this.props.onPanelStatusChange) {\r\n this.props.onPanelStatusChange(false);\r\n }\r\n }}\r\n >You have been registered successfully.Please check your E-Mail for a validation E-Mail. :\r\n <> {\r\n this.state.loggedIn ? Signed in as:{`${userName}`} Logout
:\r\n <>\r\n {\r\n !this.state.showCustomLoginPanel ? Sign in or create new account \r\n :\r\n \r\n Straumann Research Screening Account \r\n \r\n \r\n Sign in \r\n Register \r\n \r\n \r\n {\r\n this.setState(prevState => ({\r\n currentUser: {\r\n ...prevState.currentUser,\r\n email: newValue || \"\"\r\n },\r\n emailErrorMessage: \"\"\r\n }), () => {\r\n if (this.state.isValidated) { this.inputsAreaValid(false); }\r\n });\r\n }} defaultValue={this.state?.currentUser?.email}> \r\n {\r\n this.setState(prevState => ({\r\n currentUser: {\r\n ...prevState.currentUser,\r\n password: newValue || \"\"\r\n },\r\n\r\n }), () => {\r\n if (this.state.isValidated) { this.inputsAreaValid(false); }\r\n });\r\n }} defaultValue={this.state?.currentUser?.password}> \r\n \r\n { this.setState({ reCaptchaToken: token }); if (this.state.isValidated) { this.inputsAreaValid(false); } }}\r\n />\r\n {this.state.reCaptchaError && Please click on \"I'm not a robot\" }\r\n \r\n Login {this.state.isProcessing &&
{this.state.informationMessage} : \"\"\r\n }\r\n { window.location.href = `${Common.getCurrentServerUrl()}/resetpw` }} >Forgot my password \r\n \r\n \r\n {\r\n this.setState(prevState => ({\r\n currentUser: {\r\n ...prevState.currentUser,\r\n firstName: newValue || \"\",\r\n\r\n },\r\n firstNameErrorMessage: \"\"\r\n }), () => {\r\n if (this.state.isValidated) { this.inputsAreaValid(true); }\r\n });\r\n }} defaultValue={this.state.currentUser.firstName}> \r\n {\r\n this.setState(prevState => ({\r\n currentUser: {\r\n ...prevState.currentUser,\r\n lastName: newValue || \"\"\r\n },\r\n lastNameErrorMessage: \"\"\r\n }), () => {\r\n if (this.state.isValidated) { this.inputsAreaValid(true); }\r\n });\r\n }} defaultValue={this.state?.currentUser?.lastName}> \r\n {\r\n this.setState(prevState => ({\r\n currentUser: {\r\n ...prevState.currentUser,\r\n email: newValue || \"\"\r\n },\r\n emailErrorMessage: \"\"\r\n }), () => {\r\n if (this.state.isValidated) { this.inputsAreaValid(true); }\r\n });\r\n }} defaultValue={this.state?.currentUser?.email}> \r\n {\r\n this.setState(prevState => ({\r\n currentUser: {\r\n ...prevState.currentUser,\r\n password: newValue || \"\"\r\n }\r\n\r\n }), () => {\r\n if (this.state.isValidated) { this.inputsAreaValid(true); }\r\n });\r\n\r\n this.checkPasswordStrength(newValue);\r\n\r\n }} defaultValue={this.state?.currentUser?.password}> \r\n {this.state?.pwdBadgeVariant && this.state?.pwdBadgeLabel && {this.state.pwdBadgeLabel} {(this.state?.pwdBadgeVariant == \"danger\" || this.state?.pwdBadgeVariant == \"warning\") && Password must be at least 8 characters long and contain: lowercase letters, capital letters, numbers and special characters } {\r\n this.setState({ confirmationPassword: newValue }, () => {\r\n if (this.state.isValidated) { this.inputsAreaValid(true); }\r\n });\r\n }} defaultValue={this.state?.confirmationPassword}> \r\n \r\n \r\n I agree to the StraumannGroup's Legal Notice \r\n \r\n {this.state.legalNoticeErrorMessage && {this.state.legalNoticeErrorMessage} }\r\n \r\n \r\n \r\n I acknowledge that my data will be processed in accordance with the StraumannGroup's Privacy Notice \r\n \r\n {this.state?.privacyNoticeErrorMessage && {this.state.privacyNoticeErrorMessage} }\r\n \r\n \r\n { this.setState({ reCaptchaToken: token }); if (this.state.isValidated) { this.inputsAreaValid(true); } }}\r\n />\r\n {this.state.reCaptchaError && Please click on \"I'm not a robot\" }\r\n \r\n {\r\n this.state.informationMessage ?\r\n {this.state.informationMessage} : \"\"\r\n }\r\n Register {this.state.isProcessing &&
\r\n \r\n \r\n \r\n }\r\n\r\n \r\n }\r\n }\r\n\r\n \r\n
;\r\n currentUser: IAuthenticatedUser;\r\n authenticationData: any;\r\n}\r\n\r\nexport interface ILoginComponentState {\r\n loggedInWithGoogle: boolean;\r\n loggedInWithMicrosoft: boolean;\r\n loggedInWithCustomAccount: boolean;\r\n currentUser: IAuthenticatedUser;\r\n\r\n isCalloutOpen: boolean;\r\n isLoggedIn: boolean;\r\n isCustomPanelOpen: boolean;\r\n\r\n error_provider: string;\r\n isErrorOpen: boolean;\r\n}\r\n\r\n// Add the endpoints here for Microsoft Graph API services you'd like to use.\r\nexport const graphConfig = {\r\n graphMeEndpoint: \"https://graph.microsoft.com/v1.0/me\"\r\n};\r\n\r\n\r\nexport class LoginComponent extends React.Component {\r\n private dataProvider = new DataProvider();\r\n private refPersonIcon: React.RefObject = null;\r\n\r\n constructor(props: ILoginComponentProps) {\r\n super(props);\r\n\r\n this.state = {\r\n isLoggedIn: Boolean(props.currentUser),\r\n currentUser: props.currentUser,\r\n loggedInWithGoogle: props.currentUser && props.currentUser.accountType == AccountType.Google,\r\n loggedInWithMicrosoft: props.currentUser && props.currentUser.accountType == AccountType.Microsoft,\r\n loggedInWithCustomAccount: props.currentUser && props.currentUser.accountType == AccountType.Custom,\r\n\r\n isCalloutOpen: false,\r\n\r\n isCustomPanelOpen: false,\r\n\r\n error_provider: null,\r\n isErrorOpen: false\r\n };\r\n\r\n this.refPersonIcon = React.createRef();\r\n }\r\n public componentDidMount() {\r\n }\r\n\r\n public ensureSPUser = (userInformation: IUserAccount, token: string, isUserToken: boolean): Promise => {\r\n return this.dataProvider.ensureExternalUserAccount(userInformation, token, isUserToken).then((result: IAuthenticatedUser) => {\r\n console.log(result);\r\n window.sessionStorage.authToken = JSON.stringify(result.bearerToken);\r\n window.sessionStorage.freelanceUser = JSON.stringify(result);\r\n\r\n return result;\r\n }).catch(err => {\r\n console.dir(err);\r\n window.sessionStorage.removeItem(\"authToken\");\r\n window.sessionStorage.removeItem(\"freelanceUser\");\r\n return Promise.reject(err);\r\n });\r\n }\r\n\r\n private showAuthenticationError = (provider: string): void => {\r\n this.setState({\r\n error_provider: provider,\r\n isErrorOpen: true\r\n });\r\n }\r\n\r\n public componentWillReceiveProps(newProps: ILoginComponentProps) {\r\n if (this.state.currentUser != newProps.currentUser) {\r\n this.setState({\r\n isLoggedIn: Boolean(newProps.currentUser),\r\n currentUser: newProps.currentUser,\r\n loggedInWithGoogle: newProps.currentUser && newProps.currentUser.accountType == AccountType.Google,\r\n loggedInWithMicrosoft: newProps.currentUser && newProps.currentUser.accountType == AccountType.Microsoft,\r\n loggedInWithCustomAccount: newProps.currentUser && newProps.currentUser.accountType == AccountType.Custom,\r\n });\r\n }\r\n }\r\n\r\n\r\n public render(): React.ReactElement {\r\n\r\n // hide the whole login component if the user is on the pages: 'confirmation', 'resetPW'\r\n let curUrl = window.location.href.toLowerCase();\r\n let hideLoginComponent = curUrl.includes('confirm') || curUrl.includes('resetpw') || curUrl.includes('consent');\r\n\r\n let signedIn = this.state.loggedInWithCustomAccount || this.state.loggedInWithGoogle || this.state.loggedInWithMicrosoft;\r\n\r\n // Login component AND person symbol should be displayed on the right screen border \r\n let signedInStyles = mergeStyles(\r\n hideLoginComponent ? [{ display: 'none' }, {\r\n position: 'absolute',\r\n right: '20px'\r\n }] : [{ height: 'calc(100% - 100px)' }, {\r\n position: 'absolute',\r\n right: '20px'\r\n }]);\r\n\r\n const { loggedInWithCustomAccount, loggedInWithGoogle, loggedInWithMicrosoft, isCustomPanelOpen } = this.state;\r\n\r\n return (\r\n \r\n {!(this.state.loggedInWithCustomAccount || this.state.loggedInWithGoogle || this.state.loggedInWithMicrosoft) &&\r\n
\r\n {this.props.authenticationData.showGAuthentication &&\r\n
\r\n {!this.state.loggedInWithMicrosoft && !this.state.loggedInWithCustomAccount && !isCustomPanelOpen ? {\r\n //console.log(\"GoogleLogin: \", loggedIn);\r\n //console.log(\"Google account\", user); \r\n return new Promise((resolve, reject) => {\r\n this.setState((prevState) => {\r\n let isLoggedIn = prevState.loggedInWithCustomAccount || loggedIn || prevState.loggedInWithMicrosoft;\r\n return {\r\n loggedInWithGoogle: loggedIn,\r\n loggedInWithCustomAccount: false,\r\n loggedInWithMicrosoft: false,\r\n isLoggedIn: isLoggedIn,\r\n currentUser: user,\r\n isCalloutOpen: prevState.isCalloutOpen && loggedIn\r\n };\r\n }, () => {\r\n this.props.setAuthStatus(this.state.isLoggedIn, user).then(() => {\r\n resolve();\r\n });\r\n });\r\n });\r\n\r\n }} /> : \"\"}\r\n
\r\n }\r\n {this.props.authenticationData.showMSAuthentication &&\r\n
\r\n {!this.state.loggedInWithGoogle && !this.state.loggedInWithCustomAccount && !isCustomPanelOpen ?\r\n {\r\n //console.log(\"%cMicrosoftLogin: \" + loggedIn, \"color:purple;font-size:14px;\");\r\n return new Promise((resolve, reject) => {\r\n this.setState((prevState: ILoginComponentState, props: ILoginComponentProps) => {\r\n let isLoggedIn = prevState.loggedInWithCustomAccount || prevState.loggedInWithGoogle || loggedIn;\r\n return {\r\n loggedInWithMicrosoft: loggedIn,\r\n loggedInWithCustomAccount: false,\r\n loggedInWithGoogle: false,\r\n isLoggedIn: isLoggedIn,\r\n currentUser: user,\r\n isCalloutOpen: prevState.isCalloutOpen && loggedIn\r\n };\r\n }, () => {\r\n this.props.setAuthStatus(this.state.isLoggedIn, user).then(() => {\r\n resolve();\r\n });\r\n });\r\n });\r\n }} /> : \"\"\r\n }\r\n
\r\n }\r\n {this.props.authenticationData.showCustom &&\r\n
\r\n {\r\n !this.state.loggedInWithGoogle && !this.state.loggedInWithMicrosoft ?\r\n {\r\n return new Promise((resolve, reject) => {\r\n console.log(\"CustomLogin: \" + loggedIn);\r\n this.setState((prevState) => {\r\n let isLoggedIn = loggedIn || prevState.loggedInWithGoogle || prevState.loggedInWithMicrosoft;\r\n return {\r\n loggedInWithCustomAccount: loggedIn,\r\n isLoggedIn: isLoggedIn,\r\n currentUser: user,\r\n isCalloutOpen: prevState.isCalloutOpen && loggedIn\r\n };\r\n }, () => {\r\n this.props.setAuthStatus(this.state.isLoggedIn, user);\r\n resolve();\r\n });\r\n });\r\n }} onPanelStatusChange={(isOpen: boolean) => { this.setState({ isCustomPanelOpen: isOpen }) }} /> : \"\"\r\n }\r\n
\r\n }\r\n
\r\n }\r\n {(this.state.loggedInWithCustomAccount || this.state.loggedInWithGoogle || this.state.loggedInWithMicrosoft) &&\r\n
\r\n
{ this.setState((state) => { return { isCalloutOpen: !this.state.isCalloutOpen }; }); }} componentRef={this.refPersonIcon} imageProps={{ src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAVxSURBVHhe7ZznbuQwDITv/d9m03tDGtJ7RXrvvRcdxqc9IDnaK8k2yb1ogPmXrGl9ay1FUf5VqVRMtJwjAGFHAMKOAIQdAQg7AhB2BCDsCEDYEYCwIwBhRwDCjgCEXXcAent7TX9//19Tf1NPVg+gs7PTrK6umsvLS5Om9/d3c3h4aMbHx01zczP5OVqtFsDAwIDZ39+3Q+yuj48Ps7W1ZVpbW8nP1WZ1APAN3tnZscMZrtfXV7OwsGAaGxvJ62ixKgB9fX3m7u7ODmExOj8/V/00qAEwODiYzOVl6P7+3nR1dZHXlbYKAJjv397e7HCVo5eXF9PR0UFeX9LiALq7u5PB4dDNzY1pamoi45CyKICGhobM9LIMIV2lYpGyKABkKRKanJwk45GwGADMx2XP+2l6enpSs2ATA4DFkqRWVlbIuLgtAgB5OVasksLT19LSQsbHaREA8/PzdhhkhTio+DgtAuDi4sIOgayurq7I+DjNDgDTz+fnpx0CeUkvztgBjI6O2lvXIemUlB0Asg9N2tzcJOPkMjuAvb09e+s6hGopFSeX2QGcnZ3ZW9chLMqoOLnMDgCZhyZhPULFyWV2AKhIapNkhZQdAHf100U/CsDp6am9bT2i4uQyO4Dd3V172zqEzSAqTi6zA1heXra3rkOYEqk4ucwOYGRkxN66DuGJpOLkMjsAbbWgubk5Mk4uswOAtVRDIfSaUjFyWQSA1F7wdz08PJDxcVoEgIYdMUjDtqQIAFg6HcUXoL29nYyN02IAcPNSXREQGoCpuLgtBgCWWhOgc1rDtx8WBYDenMfHRzssfJqenibjkbAoABhpYFld0ZSwH0HFIWVxADCOFnEIbeptbW1kDFJWAQAuu1cIO1+xPb2G8SSUMR1hwRUPaDgahzWK/GHGQT8NLYhpVgcAxg4VVql5nobn52dVbehpVgmgaszZ6+vryfztKuw5T01NqT8dWTUrABzEm5mZSVrTt7e3zeLiYnJEifrb78bUtLa2lvwfqqnorqgaZY2lpSXvyubExETyeTg1gwYtxIbrUH9blksHgJPumE4wJaQJQDgPTKAYmLU3jacIFVv8HfX/Rbo0AENDQ14b8MjROd79gG+465SGgh2ekDLT18IB4FsT2n6IG8a0RH1uXuM3AU9iSBm8CqKM+lGhAFBjQaErr05OTgpdseK3oYiGMFRvsadNXSPUhQDAcVN8Q4oU2kXyFs2q6WzItz5N2M+enZ0lrxfiQgCUeeDu9vY2WSH7pJWYs5EV+aSvvhobGyOv7evcAJBzcwiPP9JFfPuQzuIHG5kTppfh4eEkhcRTiLIDhxBPERv6uQDgB5frNQMahcwtb/qcC4D0WV8NyruxHwwA1UVNDVZSynveOBgAygJRf5QnKwoCgLQzq7Tw04TaFDVOLg4CoK3BVlqYikPrRkEA8MMT9VWhew9BAFAqiPqq0PPGQQDKXGHWq0LfO+ENAAuPqH+FdJQar1r2BoB3e0bRCilXewNAESqKFmpU1Jhl2RuAlsMVGoWCIDVmWfYGsLGxYS8X9V2oDlBjlmVvACgJR9EKOXHpDUDbyzY06fj4mByzLHsD+Mn1/1oKOfTtBSCuAbKFDRpq3LLsBaCnp8deKopSyGLMCwD2XqOy5duT6gWAawO+nuXbz+QFAK0eUdnCNE2NXZq9AMRFWG35liO8ABwcHNjLRKXJt2HLC4DG971pk287pRcAiUPV9SYUK6mxS7MXgCKbXP9X+TZqOQPArn9UbfnuDTsDQCNqVG3hcAo1fml2BhBXwW46Ojoixy/NzgDiKthNvm9jdwYQV8Fuur6+Jscvzc4A4irYTb4vAnQGEFfBbsIhRWr8aFfMby6cdlNReu0sAAAAAElFTkSuQmCC', style: { width: '50px' } }} />\r\n {\r\n this.state.isCalloutOpen &&\r\n { this.setState({ isCalloutOpen: false }); }} >\r\n \r\n {!loggedInWithMicrosoft && !loggedInWithCustomAccount ? {\r\n return new Promise((resolve, reject) => {\r\n //console.log(\"GoogleLogin: \" + loggedIn); \r\n this.setState((prevState) => {\r\n //let isLoggedIn = prevState.loggedInWithCustomAccount || prevState.loggedInWithGoogle || prevState.loggedInWithMicrosoft;\r\n let isLoggedIn = loggedIn;\r\n return {\r\n loggedInWithGoogle: loggedIn,\r\n isLoggedIn: isLoggedIn,\r\n currentUser: user,\r\n isCalloutOpen: prevState.isCalloutOpen && loggedIn\r\n };\r\n });\r\n this.props.setAuthStatus(loggedIn, user);\r\n resolve();\r\n });\r\n\r\n }} /> : \"\"}\r\n
\r\n \r\n {!loggedInWithGoogle && !loggedInWithCustomAccount ?\r\n {\r\n return new Promise((resolve, reject) => {\r\n this.setState((prevState) => {\r\n //let isLoggedIn = prevState.loggedInWithCustomAccount || prevState.loggedInWithGoogle || prevState.loggedInWithMicrosoft;\r\n let isLoggedIn = loggedIn;\r\n return {\r\n loggedInWithMicrosoft: loggedIn,\r\n isLoggedIn: isLoggedIn,\r\n currentUser: user,\r\n isCalloutOpen: prevState.isCalloutOpen && loggedIn\r\n };\r\n });\r\n this.props.setAuthStatus(loggedIn, user);\r\n resolve();\r\n });\r\n }} /> : \"\"\r\n }\r\n
\r\n \r\n {\r\n !loggedInWithGoogle && !loggedInWithMicrosoft ?\r\n {\r\n return new Promise((resolve, reject) => {\r\n console.log(\"CustomLogin: \" + loggedIn);\r\n this.setState((prevState) => {\r\n let isLoggedIn = loggedIn || prevState.loggedInWithGoogle || prevState.loggedInWithMicrosoft;\r\n return {\r\n loggedInWithCustomAccount: loggedIn,\r\n loggedInWithGoogle: false,\r\n loggedInWithMicrosoft: false,\r\n isLoggedIn: isLoggedIn,\r\n currentUser: user,\r\n isCalloutOpen: prevState.isCalloutOpen && loggedIn\r\n };\r\n });\r\n this.props.setAuthStatus(this.state.isLoggedIn, user);\r\n resolve();\r\n });\r\n }} /> : \"\"\r\n }\r\n
\r\n \r\n }\r\n }\r\n
{ this.setState({ isErrorOpen: false }); }\r\n }}\r\n modalProps={{ isBlocking: true, className: \"busyOverlay\" }}\r\n >\r\n Authentication with {this.state.error_provider} was not possible. The Token provided by {this.state.error_provider} was invalid.\r\n \r\n\r\n = {\r\n dropdown: { width: 200 },\r\n // dropdownItem: { width: 300 },\r\n};\r\nconst addProfileSearchIcon: IIconProps = {\r\n iconName: 'ProfileSearch',\r\n}\r\nconst viewIcon: IIconProps = { iconName: 'View' };\r\nlet iconPropsSearch = {\r\n iconName: 'ProfileSearch',\r\n onClick: () => {\r\n //alert('clicked the custom button!');\r\n }\r\n\r\n\r\n};\r\nexport class ProfileManagement extends React.Component {\r\n private _selection: Selection;\r\n private _allItems: IDocument[];\r\n private loremIndex = 0;\r\n constructor(MyProps: any) {\r\n super(MyProps);\r\n const columns: IColumn[] = [\r\n {\r\n key: 'column0',\r\n name: 'Email',\r\n fieldName: 'email',\r\n minWidth: 150,\r\n maxWidth: 200,\r\n isResizable: true,\r\n isRowHeader: true,\r\n isCollapsible: true,\r\n isSorted: true,\r\n isSortedDescending: false,\r\n sortAscendingAriaLabel: 'Sorted A to Z',\r\n sortDescendingAriaLabel: 'Sorted Z to A',\r\n data: 'string',\r\n onColumnClick: this._onColumnClick,\r\n },\r\n {\r\n key: 'column1',\r\n name: 'First Name',\r\n fieldName: 'firstName',\r\n minWidth: 150,\r\n maxWidth: 200,\r\n isResizable: true,\r\n isCollapsible: true,\r\n onColumnClick: this._onColumnClick,\r\n data: 'string',\r\n isPadded: true,\r\n },\r\n {\r\n key: 'column2',\r\n name: 'Last Name',\r\n fieldName: 'lastName',\r\n minWidth: 150,\r\n maxWidth: 200,\r\n isResizable: true,\r\n isCollapsible: true,\r\n onColumnClick: this._onColumnClick,\r\n data: 'string',\r\n isPadded: true,\r\n },\r\n {\r\n key: 'column3',\r\n name: 'Status',\r\n fieldName: 'status',\r\n minWidth: 150,\r\n maxWidth: 200,\r\n isResizable: true,\r\n isCollapsible: true,\r\n data: 'string',\r\n onColumnClick: this._onColumnClick,\r\n isPadded: true,\r\n },\r\n {\r\n key: 'action',\r\n name: 'Action',\r\n ariaLabel: 'Action',\r\n minWidth: 50,\r\n maxWidth: 60,\r\n onRender: (item: any) => {\r\n return (\r\n this.openPanel(item)} />\r\n )\r\n },\r\n }\r\n ];\r\n\r\n var availableOptions: IDropdownOption[] = [];\r\n availableOptions.push({\r\n key: AppConstants.ProfileStatus.NoSelection,\r\n text: AppConstants.ProfileStatus.NoSelection\r\n });\r\n if (this.props.MasterData) {\r\n this.props.MasterData.userStatusColl.forEach((element: string) => {\r\n availableOptions.push({\r\n key: element,\r\n text: element\r\n });\r\n });\r\n }\r\n this.state = {\r\n isQueryApplied: false,\r\n selectedUserDetail: null,\r\n isPanelOpen: false,\r\n options: availableOptions,\r\n userEmail: \"\",\r\n selectedStatus: AppConstants.ProfileStatus.Submitted,\r\n listData: [],\r\n allListData: [],\r\n columns: columns,\r\n isCompactMode: false,\r\n // ShowLoader: false,\r\n // LoaderMessage: \"\",\r\n filterText: \"\"\r\n };\r\n this.GetUserData = this.GetUserData.bind(this);\r\n this.reloadData = this.reloadData.bind(this);\r\n this.onSearchImageClick = this.onSearchImageClick.bind(this);\r\n this.onEmailSearch = this.onEmailSearch.bind(this);\r\n iconPropsSearch.onClick = this.onSearchImageClick;\r\n\r\n }\r\n\r\n private _onColumnClick = (ev: React.MouseEvent, column: IColumn): void => {\r\n const { columns, listData } = this.state;\r\n const newColumns: IColumn[] = columns.slice();\r\n const currColumn: IColumn = newColumns.filter(currCol => column.key === currCol.key)[0];\r\n newColumns.forEach((newCol: IColumn) => {\r\n if (newCol === currColumn) {\r\n currColumn.isSortedDescending = !currColumn.isSortedDescending;\r\n currColumn.isSorted = true;\r\n } else {\r\n newCol.isSorted = false;\r\n newCol.isSortedDescending = true;\r\n }\r\n });\r\n const newItems = this._copyAndSort(listData, currColumn.fieldName!, currColumn.isSortedDescending);\r\n this.setState({\r\n columns: newColumns,\r\n listData: newItems,\r\n });\r\n }\r\n private _copyAndSort(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {\r\n const key = columnKey as keyof T;\r\n return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));\r\n }\r\n\r\n private onSearchImageClick() {\r\n this.GetUserData();\r\n }\r\n protected onEmailSearch(event: any) {\r\n if (event.key === \"Enter\") {\r\n this.GetUserData();\r\n }\r\n }\r\n protected OnEmailChange(event: any) {\r\n var email = event.target.value;\r\n this.setState({\r\n userEmail: email\r\n });\r\n }\r\n private _onChangeText = (ev: React.FormEvent, text: string): void => {\r\n var allListData = this.state.allListData;\r\n if (text) {\r\n allListData = allListData.filter((i: any) => {\r\n if (i.firstName.toLowerCase().indexOf(text) > -1\r\n || i.lastName.toLowerCase().indexOf(text) > -1\r\n || i.email.toLowerCase().indexOf(text) > -1\r\n ) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n });\r\n }\r\n this.setState({\r\n listData: allListData,\r\n filterText: text,\r\n });\r\n }\r\n\r\n /// get context type\r\n static contextType = FreelancerContext;\r\n public render() {\r\n return (\r\n <>\r\n {/* \r\n {this.state.selectedUserDetail &&\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Status */}\r\n \r\n \r\n Search Profile\r\n \r\n \r\n \r\n {this.state.isQueryApplied &&\r\n \r\n \r\n }\r\n {this.state.listData.length > 0\r\n ?\r\n\r\n \r\n \r\n :\r\n \r\n No data available.
\r\n \r\n }\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n private reloadData(event: any) {\r\n /// Dialog above panel default calling panel cancel functionality\r\n /// CHeck type to prevent wrong call from modal dialog\r\n var processPanel = false;\r\n if (event) {\r\n if (event.type.toLowerCase() == \"click\") {\r\n processPanel = true;\r\n }\r\n }\r\n else {\r\n processPanel = true;\r\n }\r\n\r\n if (processPanel) {\r\n /// redired to url without parameter\r\n var paramUser = Number(Utility.getDefaultUser());\r\n if (paramUser > 0) {\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n Utility.redirectHome();\r\n }\r\n else {\r\n this.GetUserData();\r\n this.setState({\r\n isPanelOpen: false\r\n }, () => {\r\n Utility.removeBlockBackgroundClass();\r\n });\r\n }\r\n }\r\n }\r\n private openPanel(item: any) {\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n var userProfileQuery = {\r\n Value: String(item.profileId),\r\n Type: AppConstants.ProfileQueryType.UserProfile\r\n };\r\n if (Utility.IsLoginUserActive(this.context.ExpireSession)) {\r\n this.props.dataProvider.getUserProfile(userProfileQuery)\r\n .then((result) => {\r\n this.setState({\r\n isPanelOpen: true,\r\n selectedUserDetail: result.userDetail,\r\n });\r\n }).catch((error) => {\r\n this.context.ShowFreelancerModal(\"Error\", \"Error in getting user profiles.\");\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n });\r\n }\r\n }\r\n\r\n private onSearchPeople() {\r\n this.GetUserData();\r\n }\r\n private _getKey(item: any, index?: number): string {\r\n return item.key;\r\n }\r\n private _onItemInvoked(item: any): void {\r\n alert(`Item invoked: ${item.name}`);\r\n }\r\n\r\n public onStatusChange(event: React.FormEvent, item: IDropdownOption) {\r\n this.setState({\r\n selectedStatus: item.key,\r\n }, () => {\r\n this.GetUserData();\r\n });\r\n }\r\n public GetUserData() {\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n this.setState({\r\n filterText: \"\"\r\n }, () => {\r\n\r\n });\r\n if (this.props.currentUser?.email && this.props.currentUser?.id) {\r\n var userQuery = {\r\n userStatus: this.state.selectedStatus,\r\n userEmail: this.state.userEmail\r\n };\r\n if (Utility.IsLoginUserActive(this.context.ExpireSession)) {\r\n this.props.dataProvider.getAllUserProfiles(userQuery)\r\n .then((values) => {\r\n this.setState({\r\n listData: values,\r\n allListData: values,\r\n isQueryApplied: values.length > 0\r\n }, () => {\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n });\r\n }).catch((error) => {\r\n console.log(error);\r\n\r\n this.setState({\r\n listData: [],\r\n allListData: [],\r\n isQueryApplied: false\r\n }, () => {\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n this.context.ShowFreelancerModal(\"Error\", \"Error in getting user profiles.\");\r\n });\r\n });\r\n }\r\n }\r\n }\r\n public componentDidMount() {\r\n this.GetUserData();\r\n\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n var defaultUserParam = Utility.getDefaultUser();\r\n if (defaultUserParam) {\r\n var defaultUserID = Number(defaultUserParam);\r\n if (defaultUserID != NaN) {\r\n if (defaultUserID > 0) {\r\n var userProfileQuery = {\r\n Value: String(defaultUserID),\r\n Type: AppConstants.ProfileQueryType.UserProfile\r\n };\r\n if (Utility.IsLoginUserActive(this.context.ExpireSession)) {\r\n this.props.dataProvider.getUserProfile(userProfileQuery)\r\n .then((result) => {\r\n if (result.userDetail) {\r\n this.setState({\r\n isPanelOpen: true,\r\n selectedUserDetail: result.userDetail,\r\n });\r\n }\r\n else {\r\n this.context.ShowFreelancerModalWithFun(\"Error\", \"No user profile present.\", Utility.redirectHome);\r\n }\r\n })\r\n .catch((error) => {\r\n this.context.ShowFreelancerModalWithFun(\"Error\", \"Error in getting user profiles.\", Utility.redirectHome);\r\n });\r\n }\r\n }\r\n else {\r\n this.context.ShowFreelancerModalWithFun(\"Error\", \"Error in getting user profiles.\", Utility.redirectHome);\r\n }\r\n }\r\n else {\r\n this.context.ShowFreelancerModalWithFun(\"Error\", \"Error in getting user profiles.\", Utility.redirectHome);\r\n }\r\n }\r\n }\r\n\r\n}","import * as React from 'react';\r\nimport { UserProfile } from './UserProfile/UserProfile'\r\nimport { UserEvents } from './Events/UserEvents'\r\nimport { css, Stack, PrimaryButton, Text, getTheme, Link, DetailsList, DetailsListLayoutMode, IColumn, SelectionMode, IDetailsRowProps, DetailsRow, Spinner, IconButton, Dialog, DialogFooter, DefaultButton, ConstrainMode, Icon } from 'office-ui-fabric-react';\r\nimport { Tabs, Tab, TabList, TabPanel } from 'react-tabs';\r\nimport 'react-tabs/style/react-tabs.css';\r\nimport { IDataProvider } from '../../../dataprovider/IDataProvider';\r\nimport { AccountType, IUserAccount } from '../../LoginComponent/LoginComponent';\r\nimport { ProfileManagement } from './Admin/ProfileManagement';\r\nimport { ProfileView } from '../../Utility/FreelancerEnums';\r\nimport { FreelancerContext } from '../Common/FreelancerContext';\r\nimport { AppConstants } from '../../Utility/Constants';\r\nimport { Utility } from '../../Utility/Utility';\r\nexport interface IDefaultViewProps {\r\n dataProvider: IDataProvider;\r\n currentUser?: IUserAccount;\r\n}\r\n\r\nexport interface IDefaultViewState {\r\n LoginUserDetail: any;\r\n MasterData: any;\r\n isUserAdmin: boolean;\r\n IsProfilePresent: boolean;\r\n TabOrder: number;\r\n}\r\n\r\nexport class UserDashBoard extends React.Component {\r\n constructor(MyProps: IDefaultViewProps) {\r\n super(MyProps);\r\n var tabOrder = -1;\r\n this.state = {\r\n LoginUserDetail: null,\r\n MasterData: null,\r\n isUserAdmin: false,\r\n IsProfilePresent: false,\r\n TabOrder: tabOrder,\r\n };\r\n this.GetUserData = this.GetUserData.bind(this);\r\n }\r\n\r\n /// get context type\r\n static contextType = FreelancerContext;\r\n\r\n public render() {\r\n return (\r\n \r\n {this.state.TabOrder >= 0 &&\r\n \r\n \r\n {\r\n (this.state.LoginUserDetail.userDetail?.status == AppConstants.ProfileStatus.Active\r\n || this.state.isUserAdmin == true)\r\n &&\r\n Events \r\n }\r\n {!this.state.isUserAdmin &&\r\n My Profile \r\n }\r\n {this.state.isUserAdmin &&\r\n Manage Profiles \r\n }\r\n\r\n \r\n {\r\n (this.state.LoginUserDetail.userDetail?.status == AppConstants.ProfileStatus.Active\r\n || this.state.isUserAdmin == true)\r\n &&\r\n \r\n \r\n }\r\n {!this.state.isUserAdmin &&\r\n \r\n {this.state.LoginUserDetail.userDetail &&\r\n \r\n }\r\n {this.state.isUserAdmin &&\r\n \r\n {this.state.MasterData && \r\n }\r\n\r\n \r\n }\r\n \r\n\r\n );\r\n }\r\n\r\n public GetUserData() {\r\n return new Promise((resolve, reject) => {\r\n if (this.props.currentUser?.email && this.props.currentUser?.id) {\r\n var loginUserDetail = this.state.LoginUserDetail;\r\n if (loginUserDetail) {\r\n loginUserDetail.userDetail = null;\r\n this.setState({ LoginUserDetail: loginUserDetail });\r\n }\r\n var userProfileQuery = {\r\n Value: this.props.currentUser?.email,\r\n Type: AppConstants.ProfileQueryType.UserEmail\r\n };\r\n if (Utility.IsLoginUserActive(this.context.ExpireSession)) {\r\n this.context.ShowFreelanceLoader(true, \"\");\r\n Promise.all([\r\n this.props.dataProvider.getUserProfile(userProfileQuery),\r\n this.props.dataProvider.getMasterData(),\r\n this.props.dataProvider.getUserType(this.props.currentUser?.email)\r\n ])\r\n .then((values) => {\r\n var isUserProfilePresent = false;\r\n var tabOrder = 0;\r\n var userDetail = values[0];\r\n if (!userDetail.userDetail) {\r\n tabOrder = 1;\r\n userDetail.userDetail = {\r\n firstName: this.props.currentUser?.firstName,\r\n lastName: this.props.currentUser?.lastName,\r\n mobileNo: \"\",\r\n userAccountId: this.props.currentUser?.id,\r\n title: this.props.currentUser?.email,\r\n accountType: this.props.currentUser?.accountType,\r\n }\r\n }\r\n else {\r\n userDetail.userDetail.userAccountId = this.props.currentUser?.id;\r\n userDetail.userDetail.accountType = this.props.currentUser?.accountType;\r\n isUserProfilePresent = true;\r\n }\r\n var isUserAdmin = values[2].userStatus == AppConstants.LoginUser.Admin ? true : false;\r\n if (isUserAdmin) {\r\n tabOrder = 0;\r\n }\r\n if (isUserAdmin) {\r\n var tab = Utility.getTabDueToParameter();\r\n if (tab > -1) {\r\n tabOrder = tab;\r\n }\r\n }\r\n if (!isUserAdmin && userDetail.userDetail?.status != AppConstants.ProfileStatus.Active) {\r\n tabOrder = 1;\r\n }\r\n this.setState({\r\n TabOrder: tabOrder,\r\n IsProfilePresent: isUserProfilePresent,\r\n LoginUserDetail: userDetail,\r\n MasterData: values[1],\r\n isUserAdmin: isUserAdmin\r\n }, () => {\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n });\r\n resolve(\"success\");\r\n\r\n }).catch((error) => {\r\n resolve(\"fail\");\r\n console.log(error);\r\n this.context.ShowFreelanceLoader(false, \"\");\r\n this.context.ShowFreelancerModal(\"Error\", \"Error in getting user profile and master data.\");\r\n });\r\n }\r\n }\r\n });\r\n }\r\n public async componentDidMount() {\r\n var v = await this.GetUserData();\r\n }\r\n}","import { Dialog, DialogType, Spinner } from 'office-ui-fabric-react';\r\nimport * as React from 'react';\r\nexport interface IFormLoaderProps {\r\n ShowLoader: any;\r\n SpinnerSize: number;\r\n SpinnerLabel: string;\r\n DialogType: DialogType;\r\n}\r\n\r\nexport interface IFormLoaderState {\r\n}\r\n\r\n\r\nexport class FormLoader extends React.Component {\r\n constructor(MyProps: any) {\r\n super(MyProps);\r\n this.state = {\r\n };\r\n }\r\n\r\n\r\n public render() {\r\n\r\n return (\r\n\r\n\r\n \r\n {\r\n constructor(MyProps: any) {\r\n super(MyProps);\r\n this.state = {\r\n // hideDialog: this.props.hideDialog\r\n };\r\n this.toggleHideDialog = this.toggleHideDialog.bind(this);\r\n }\r\n\r\n public toggleHideDialog() {\r\n // this.setState({\r\n // hideDialog: true\r\n // });\r\n this.props.closeDialog();\r\n\r\n }\r\n\r\n public render() {\r\n return (\r\n <>\r\n {/* \r\n
\r\n
\r\n \r\n {this.props.header}
\r\n \r\n \r\n \r\n {this.props.message}
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n\r\n \r\n );\r\n }\r\n\r\n public componentDidMount() {\r\n\r\n }\r\n public componentWillReceiveProps(newProps: any) {\r\n // if (this.state.hideDialog != newProps.hideDialog) {\r\n // this.setState({ hideDialog: newProps.hideDialog });\r\n // }\r\n }\r\n\r\n}","import * as React from 'react';\r\nimport { css, Stack, PrimaryButton, Text, getTheme, Link, DetailsList, DetailsListLayoutMode, IColumn, SelectionMode, IDetailsRowProps, DetailsRow, Spinner, IconButton, Dialog, DialogFooter, DefaultButton, ConstrainMode, Icon, DialogType, SpinnerSize } from 'office-ui-fabric-react';\r\nimport { PageURL } from '../../App';\r\nimport './Welcome.scss';\r\nimport { IUserAccount, LoginComponent } from '../LoginComponent/LoginComponent';\r\nimport { Redirect } from 'react-router';\r\nimport DataProvider from '../../dataprovider/DataProvider';\r\nimport { UserDashBoard } from './User/UserDashBoard'\r\nimport moment from 'moment';\r\nimport { FreelancerContext } from './Common/FreelancerContext';\r\nimport { FormLoader } from './Common/Loader';\r\nimport { ModalComponent } from './Common/ModalComponent';\r\nimport { Utility } from '../Utility/Utility';\r\nimport { AppConstants } from '../Utility/Constants';\r\n\r\nconst theme = getTheme();\r\n\r\nexport interface IWelcomePageProps {\r\n location: Location;\r\n history: any;\r\n stepSizeClass: string;\r\n isLoggedIn: boolean;\r\n dataProvider: DataProvider;\r\n currentUser?: IUserAccount;\r\n sessionExpired: any;\r\n}\r\n\r\nexport interface IWelcomePageState {\r\n showLoader: boolean;\r\n loaderMSG: string;\r\n isLoggedIn: boolean;\r\n modalValues: any;\r\n}\r\nexport class WelcomePage extends React.Component {\r\n constructor(props: IWelcomePageProps) {\r\n super(props);\r\n this.state = {\r\n modalValues: { hideDialog: true, header: \"\", msg: \"\" },\r\n showLoader: false,\r\n loaderMSG: \"\",\r\n isLoggedIn: props.isLoggedIn,\r\n };\r\n this.ShowFreelancerLoader = this.ShowFreelancerLoader.bind(this);\r\n this.ShowFreelancerModal = this.ShowFreelancerModal.bind(this);\r\n this.ShowFreelancerModalWithFun = this.ShowFreelancerModalWithFun.bind(this);\r\n this.closeDialog = this.closeDialog.bind(this);\r\n }\r\n public componentDidMount() {\r\n\r\n }\r\n\r\n public componentWillReceiveProps(newProps: IWelcomePageProps) {\r\n if (this.state.isLoggedIn != newProps.isLoggedIn) {\r\n this.setState({ isLoggedIn: newProps.isLoggedIn }, () => {\r\n // this.setLoggedInInformation();\r\n });\r\n }\r\n }\r\n\r\n public ShowFreelancerLoader(showLoader: boolean, msg: any) {\r\n\r\n this.setState({\r\n loaderMSG: msg.length > 0 ? msg : AppConstants.loaderMSG,\r\n showLoader: showLoader\r\n });\r\n }\r\n public ShowFreelancerModal(header: string, message: string) {\r\n this.setState({\r\n modalValues: { hideDialog: false, header: header, msg: message }\r\n });\r\n }\r\n public ShowFreelancerModalWithFun(header: string, message: string, func: any) {\r\n this.setState({\r\n modalValues: { hideDialog: false, header: header, msg: message, func: func }\r\n }, () => {\r\n // func();\r\n });\r\n }\r\n public closeDialog() {\r\n var func = this.state.modalValues.func;\r\n this.setState({\r\n modalValues: { hideDialog: true, header: \"\", msg: \"\" }\r\n }, () => {\r\n if (func) {\r\n func();\r\n }\r\n });\r\n }\r\n public render(): React.ReactElement {\r\n return (\r\n \r\n {!this.state.modalValues.hideDialog &&\r\n \r\n\r\n \r\n {this.state.isLoggedIn\r\n ? <>\r\n {this.props.currentUser &&\r\n Please sign in to be able to create a request
\r\n\r\n \r\n \r\n );\r\n }\r\n}","import * as React from 'react';\r\nimport { css, Stack, PrimaryButton, Text, getTheme, Link, Spinner } from 'office-ui-fabric-react';\r\nimport { IDataProvider } from '../../dataprovider/IDataProvider';\r\nimport { GeneralHelper } from './LoginHelper';\r\nimport { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib-commonjs';\r\nimport { Common } from './Common';\r\nconst theme = getTheme();\r\n\r\nexport interface IConfirmPageProps {\r\n location: Location;\r\n history: any;\r\n stepSizeClass: string;\r\n dataProvider: IDataProvider;\r\n}\r\n\r\nexport interface IConfirmPageState {\r\n activationInProgress: boolean;\r\n accountActivated: boolean;\r\n errorMessage: string;\r\n\r\n sendingConfirmation: boolean;\r\n}\r\n\r\nexport class ConfirmPage extends React.Component {\r\n\r\n constructor(props: IConfirmPageProps) {\r\n super(props);\r\n\r\n this.state = {\r\n activationInProgress: true, // activation starts on page load\r\n accountActivated: false,\r\n errorMessage: \"\",\r\n\r\n sendingConfirmation: false\r\n };\r\n\r\n }\r\n public componentDidMount() {\r\n console.log(\"ConfirmPage componentDidMount\");\r\n const queryString = window.location.search;\r\n const urlParams = new URLSearchParams(queryString);\r\n const code = urlParams.get('activationGuid');\r\n if (code) {\r\n this.props.dataProvider.getUserByActivateParam(code, true).then(result => {\r\n this.setState(\r\n {\r\n accountActivated: true,\r\n activationInProgress: false\r\n }, () => {\r\n setTimeout(() => {\r\n window.location.href = Common.getCurrentServerUrl();\r\n }, 5000)\r\n });\r\n }).catch(err => {\r\n console.dir(err);\r\n let errormessage = err;\r\n if (err.detail) {\r\n errormessage = err.detail;\r\n }\r\n this.setState({ activationInProgress: false, errorMessage: errormessage });\r\n });\r\n } else {\r\n this.setState({ errorMessage: \"No valid Activation url\", activationInProgress: false })\r\n }\r\n }\r\n public handleClickOnLink(ev: React.MouseEvent) {\r\n window.location.href = Common.getCurrentServerUrl();\r\n }\r\n\r\n public render(): React.ReactElement {\r\n\r\n\r\n return (\r\n \r\n \r\n User Account Activation \r\n {\r\n this.state.activationInProgress ? {\r\n window.location.href = `${Common.getCurrentServerUrl()}/`;\r\n }}>User activated successfully! You can \r\n :\r\n this.state.errorMessage && Activation was not successful. This activation code might have expired.Click here to order a new activation code \r\n }\r\n\r\n\r\n \r\n\r\n \r\n );\r\n }\r\n}","import * as React from 'react';\r\nimport { css, Stack, PrimaryButton, Text, getTheme, Link, TextField, DefaultButton, MessageBarType, MessageBar, Alignment, Label } from 'office-ui-fabric-react';\r\nimport { IDataProvider } from '../../dataprovider/IDataProvider';\r\nimport { GeneralHelper } from './LoginHelper';\r\nimport { IUserAccount } from './LoginComponent';\r\nimport { Spinner } from 'office-ui-fabric-react';\r\nimport { Common } from './Common';\r\nimport { Redirect, Router } from 'react-router';\r\nimport { Badge } from 'react-bootstrap';\r\n\r\nrequire('./LoginComponent.css');\r\n\r\nexport interface IPWResetProps {\r\n location: Location;\r\n history: any;\r\n stepSizeClass: string;\r\n dataProvider: IDataProvider;\r\n}\r\n\r\nexport interface IPWResetState {\r\n userReadyForPWReset: boolean;\r\n informationMessage: string;\r\n informationType?: MessageBarType;\r\n password: string;\r\n email?: string;\r\n activationCode: string;\r\n confirmationPassword?: string;\r\n passwordErrorMessage?: string;\r\n emailErrorMessage?: string;\r\n\r\n emailWasSent: boolean;\r\n isProcessing: boolean;\r\n resetSuccessful: boolean;\r\n // redirectToLogin: boolean;\r\n\r\n pwdBadgeVariant: string;\r\n pwdBadgeLabel: string;\r\n\r\n confirmMode: boolean;\r\n}\r\n\r\nexport class ResetPWPage extends React.Component {\r\n\r\n\r\n\r\n constructor(props: IPWResetProps) {\r\n super(props);\r\n\r\n this.state = {\r\n userReadyForPWReset: false,\r\n informationMessage: \"\",\r\n activationCode: \"\",\r\n password: \"\",\r\n\r\n emailWasSent: false,\r\n isProcessing: false,\r\n resetSuccessful: false,\r\n\r\n pwdBadgeVariant: null,\r\n pwdBadgeLabel: null,\r\n\r\n confirmMode: false\r\n // redirectToLogin: false\r\n };\r\n\r\n }\r\n public componentDidMount() { \r\n console.log(\"Reset PW componentDidMount\");\r\n const queryString = window.location.search;\r\n const urlParams = new URLSearchParams(queryString);\r\n\r\n // switch mode for confirmation\r\n let confirmMode = false;\r\n if (urlParams.get('confirmOnly') === \"true\") {\r\n this.setState({ confirmMode: true });\r\n confirmMode = true;\r\n }\r\n\r\n const code = urlParams.get('activationGuid');\r\n if (code) {\r\n this.setState({ activationCode: code });\r\n\r\n if (!confirmMode) {\r\n this.props.dataProvider.getUserByActivateParam(code, false).then(userReadyForPWReset => {\r\n if (userReadyForPWReset) {\r\n this.setState({ userReadyForPWReset: userReadyForPWReset })\r\n }\r\n }).catch(err => {\r\n console.dir(err);\r\n let errormessage = err;\r\n if (err.detail) {\r\n errormessage = err.detail;\r\n }\r\n Common.removeUrlParam(\"activationGuid\");\r\n this.setInformationMessage(`${errormessage} Your link might have expired. Please do another Password Reset.`, MessageBarType.error, true);\r\n //let errormessage = GeneralHelper.parseError(err);\r\n //alert(\"Error on getUserByActivateParam: \" + errormessage);\r\n });\r\n }\r\n } else {\r\n // this.setState({ informationMessage: \"No valid reset PW link. Please click again on the reset PW link\"})\r\n }\r\n }\r\n\r\n private _resetBtnClicked = () => {\r\n try {\r\n console.time(\"_resetBtnClicked\");\r\n if (this.inputsAreaValid(true)) {\r\n // check if email allready exist\r\n this.resetPw();\r\n\r\n } else {\r\n this.setInformationMessage(\"Please fix the validation issues\", MessageBarType.error);\r\n }\r\n } catch (err) {\r\n alert(\"Error: \" + err);\r\n }\r\n }\r\n\r\n private _getResetLink = () => {\r\n let validEmail = Boolean(this.state.email) && this.state.email.search(/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/) !== -1;\r\n \r\n if (!validEmail) {\r\n this.setState({ emailErrorMessage: `please enter a valid E-Mail address` });\r\n } else {\r\n this.setState({ isProcessing: true });\r\n let baseUrl = Common.getCurrentServerUrl();\r\n\r\n if (this.state.confirmMode) {\r\n this.props.dataProvider.resendActivationCode(this.state.email, baseUrl).then(activationCode => {\r\n this.setState({\r\n emailWasSent: true,\r\n isProcessing: false\r\n }, () => {\r\n this.setInformationMessage(\"Confirmation E-mail was sent to you. Please check your E-mail.\", MessageBarType.success, true);\r\n })\r\n }).catch(err => {\r\n let errormessage = err;\r\n if (err.detail) {\r\n errormessage = err.detail;\r\n }\r\n //let errormessage = GeneralHelper.parseError(err);\r\n this.setInformationMessage(errormessage, MessageBarType.error);\r\n }).finally(() => {\r\n this.setState({ isProcessing: false });\r\n });\r\n } else {\r\n this.props.dataProvider.getNewActivationCode(this.state.email, baseUrl).then(activationCode => {\r\n\r\n this.setState({\r\n emailWasSent: true,\r\n isProcessing: false\r\n }, () => {\r\n this.setInformationMessage(\"Password Reset Email was sent to you. Please check your E-mail.\", MessageBarType.success, true);\r\n })\r\n }).catch(err => {\r\n let errormessage = err;\r\n if (err.detail) {\r\n errormessage = err.detail;\r\n }\r\n //let errormessage = GeneralHelper.parseError(err);\r\n this.setInformationMessage(errormessage, MessageBarType.error);\r\n }).finally(() => {\r\n this.setState({ isProcessing: false });\r\n });\r\n }\r\n }\r\n }\r\n\r\n private resetPw = () => {\r\n this.setState({ isProcessing: true });\r\n this.props.dataProvider.resetPWByActivateParam(this.state.activationCode, this.state.password).then(result => {\r\n this.setInformationMessage(\"Reset Password successfully\", MessageBarType.success, true);\r\n this.setState({ password: \"\", confirmationPassword: \"\", isProcessing: false, resetSuccessful: true });\r\n }).catch(err => {\r\n console.dir(err);\r\n let errormessage = err;\r\n if(err.detail){\r\n errormessage = err.detail;\r\n }\r\n //let errormessage = GeneralHelper.parseError(err);\r\n this.setInformationMessage(errormessage, MessageBarType.info);\r\n\r\n });\r\n }\r\n private inputsAreaValid = (register: boolean): boolean => {\r\n\r\n this.setState({ passwordErrorMessage: \"\" });\r\n let invalid = false;\r\n if (this.state.password == \"\") {\r\n invalid = true;\r\n this.setState({ passwordErrorMessage: GeneralHelper.mandatoryValidation });\r\n }\r\n if (this.state.confirmationPassword == \"\") {\r\n invalid = true;\r\n this.setState({ passwordErrorMessage: GeneralHelper.mandatoryValidation });\r\n } else if (this.state.confirmationPassword != this.state.password) {\r\n invalid = true;\r\n this.setState({ passwordErrorMessage: GeneralHelper.confirmationPasswordInvalid });\r\n }\r\n if (!this.checkPasswordStrength(this.state?.password)) {\r\n invalid = true;\r\n // no errorMessage necessary, it's displayed already with the password strength badge\r\n }\r\n return !invalid;\r\n\r\n\r\n }\r\n\r\n private setInformationMessage = (message: string, type?: MessageBarType, keepMessage = false): void => {\r\n this.setState({ informationMessage: message, informationType: type || MessageBarType.warning },\r\n () => {\r\n if (!keepMessage) {\r\n setTimeout(() => { this.setState({ informationMessage: \"\" }); }, 4000);\r\n }\r\n });\r\n }\r\n\r\n private checkPasswordStrength = (pwd: string): boolean => {\r\n let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})');\r\n let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))');\r\n let badgeVariant = null;\r\n let badgeLabel = null;\r\n let result: boolean = true;\r\n if (strongPassword.test(pwd)) {\r\n badgeVariant = \"success\";\r\n badgeLabel = \"Strong Password\";\r\n result = true;\r\n } else if (mediumPassword.test(pwd)) {\r\n badgeVariant = \"warning\";\r\n badgeLabel = \"Too short\";\r\n result = false;\r\n } else {\r\n badgeVariant = \"danger\";\r\n badgeLabel = \"Weak Password\";\r\n result = false;\r\n }\r\n this.setState({\r\n pwdBadgeVariant: badgeVariant,\r\n pwdBadgeLabel: badgeLabel\r\n });\r\n return result;\r\n }\r\n\r\n public render(): React.ReactElement {\r\n\r\n return (\r\n \r\n \r\n {this.state.confirmMode ? Confirmation Email : Reset Password }\r\n {!this.state.emailWasSent &&\r\n <>\r\n {\r\n this.state.userReadyForPWReset ? !this.state.resetSuccessful && <>\r\n\r\n {\r\n this.setState({ password: newValue || \"\" });\r\n\r\n this.checkPasswordStrength(newValue);\r\n }}> \r\n {this.state?.pwdBadgeVariant && this.state?.pwdBadgeLabel && {this.state.pwdBadgeLabel} {(this.state?.pwdBadgeVariant == \"danger\" || this.state?.pwdBadgeVariant == \"warning\") && Password must be at least 8 characters long and contain: lowercase letters, capital letters, numbers and special characters } {\r\n this.setState({ confirmationPassword: newValue });\r\n }}> \r\n Save new Password {this.state.isProcessing &&
\r\n\r\n\r\n :\r\n <>\r\n {\r\n if(newValue && newValue.trim().length !== 0){\r\n this.setState({ email: newValue.trim() });\r\n } else {\r\n this.setState({ email: null });\r\n }\r\n }}> \r\n {this.state.confirmMode ? \"Send Confirmation Email\" : \"Reset Password\" } {this.state.isProcessing &&
\r\n\r\n \r\n }\r\n }\r\n {\r\n this.state.informationMessage ?\r\n { \r\n this.setState({ emailWasSent: false, informationMessage: null}, ()=>{\r\n window.location.href = `${Common.getCurrentServerUrl()}/`;\r\n });\r\n }}\r\n >{this.state.informationMessage} : \"\"\r\n } \r\n\r\n \r\n\r\n \r\n );\r\n }\r\n}","import * as React from 'react';\r\nimport { css, Stack, PrimaryButton, Text, getTheme, Link, Spinner } from 'office-ui-fabric-react';\r\n\r\nexport class CookieList extends React.Component {\r\n\r\n public render() {\r\n return (\r\n \r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Redirect, Route } from 'react-router';\r\nimport { Layout } from './components/Layout/Layout.tsx?1';\r\nimport { WelcomePage } from './components/Welcome/Welcome.tsx?1';\r\nimport { LoginComponent } from './components/LoginComponent/LoginComponent';\r\nimport { ConfirmPage } from './components/LoginComponent/ConfirmPage';\r\nimport { ResetPWPage } from './components/LoginComponent/ResetPWPage';\r\nimport { ExternalConsent } from './components/LoginComponent/ExternalConsent';\r\nimport { MsalProvider } from \"@azure/msal-react\";\r\nimport { PublicClientApplication } from \"@azure/msal-browser\";\r\nimport { Common } from './components/LoginComponent/Common';\r\nimport './custom.scss'\r\nimport DataProvider from './dataprovider/DataProvider';\r\nimport { CookieList } from './components/LoginComponent/CookieList';\r\nimport { GoogleOAuthProvider } from '@react-oauth/google';\r\nimport { AppConstants } from './components/Utility/Constants';\r\n\r\nconst CLIENT_ID = \"203645364480-27bhv5or3e92bf62escq19het0eturtr.apps.googleusercontent.com\";\r\n//const CLIENT_ID = \"313235099716-c5ttur4f2v0o001gd3vngd55kmhirihm.apps.googleusercontent.com\";\r\n\r\nexport const PageURL = {\r\n ConfirmationPage: \"/confirm\",\r\n ResetPWPage: \"/resetPW\",\r\n Consent: \"/consent\",\r\n CookieList: \"/cookies\"\r\n}\r\n\r\nfunction getMSALConfig() {\r\n let returnURI = Common.getCurrentServerUrl();\r\n return {\r\n auth: {\r\n clientId: \"1f886d40-4c42-4b6d-aa39-b7996c42d73e\",\r\n authority: \"https://login.microsoftonline.com/common\",\r\n redirectUri: `${returnURI}`\r\n },\r\n cache: {\r\n cacheLocation: \"sessionStorage\", // This configures where your cache will be stored\r\n storeAuthStateInCookie: false, // Set this to \"true\" if you are having issues on IE11 or Edge\r\n }\r\n };\r\n}\r\n\r\nconst msalInstance = new PublicClientApplication(getMSALConfig());\r\n\r\n\r\nexport default class App extends Component {\r\n refLoginComponent = null;\r\n\r\n constructor() {\r\n super();\r\n this.state = {\r\n authenticationData: {\r\n showGAuthentication: false,\r\n showMSAuthentication: false,\r\n showCustom: false,\r\n msUsersAllowed: []\r\n },\r\n isLoggedIn: false,\r\n currentUser: null,\r\n path: \"/\",\r\n redirectHome: false\r\n };\r\n\r\n this.refLoginComponent = React.createRef();\r\n this.setAppSettings = this.setAppSettings.bind(this);\r\n this.checkAndLogoutSession = this.checkAndLogoutSession.bind(this);\r\n }\r\n\r\n setAppSettings(data) {\r\n this.setState({\r\n authenticationData: {\r\n showGAuthentication: data.showGAuthentication,\r\n showMSAuthentication: data.showMSAuthentication,\r\n showCustom: data.showCustom,\r\n msUsersAllowed: data.msUsersAllowed\r\n }\r\n }, () => {\r\n this.checkAndLogoutSession();\r\n });\r\n }\r\n checkAndLogoutSession() {\r\n if (this.state.currentUser) {\r\n if (\r\n (this.state.currentUser.accountType == AppConstants.AccountType.Google\r\n && this.state.authenticationData.showGAuthentication == false\r\n )\r\n ||\r\n (this.state.currentUser.accountType == AppConstants.AccountType.Custom\r\n && this.state.authenticationData.showCustom == false\r\n )\r\n ||\r\n (this.state.currentUser.accountType == AppConstants.AccountType.Microsoft\r\n && this.state.authenticationData.showMSAuthentication == false\r\n )\r\n ) {\r\n this.sessionExpired();\r\n }\r\n }\r\n }\r\n componentDidMount() {\r\n // in case the page is reloaded, check if there is a user in the session already\r\n if (window.sessionStorage.authToken) {\r\n let authToken = JSON.parse(window.sessionStorage.authToken);\r\n let expirationDate = new Date(authToken.expirationUTC);\r\n if (expirationDate < new Date()) {\r\n // this token is expired. Clean it up\r\n window.sessionStorage.removeItem(\"authToken\");\r\n window.sessionStorage.removeItem(\"freelanceUser\");\r\n alert(\"Your Session expired. Please sign-in again.\");\r\n }\r\n if (window.sessionStorage.freelanceUser) {\r\n let currentUser = JSON.parse(window.sessionStorage.freelanceUser);\r\n console.log(\"..............................................\");\r\n console.log(currentUser);\r\n this.setState({\r\n isLoggedIn: true,\r\n currentUser: currentUser\r\n });\r\n }\r\n }\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n }\r\n setAuthStatus = (loggedIn, user) => {\r\n return new Promise((resolve, reject) => {\r\n this.setState({ isLoggedIn: loggedIn, currentUser: user }, () => {\r\n console.log(\"%cLOG OUT HERE!!!!!\", \"color:yellow;font-size:16px\");\r\n if (!user) {\r\n sessionStorage.removeItem(\"authToken\");\r\n sessionStorage.removeItem(\"freelanceUser\");\r\n // redirect to home\r\n window.location.href = `${window.location.protocol}//${window.location.host}`;\r\n }\r\n resolve();\r\n });\r\n console.log(\"%cCurrent User\", \"color:blue;font-size:16px\", user);\r\n });\r\n }\r\n\r\n sessionExpired = () => {\r\n this.setState({\r\n isLoggedIn: false,\r\n currentUser: null\r\n });\r\n window.sessionStorage.removeItem(\"authToken\");\r\n window.sessionStorage.removeItem(\"freelanceUser\");\r\n alert(\"Your Session expired. Please sign-in again.\");\r\n window.location.replace(window.location.origin);\r\n\r\n };\r\n\r\n static displayName = App.name;\r\n dataProvider = new DataProvider();\r\n\r\n \r\n render() {\r\n return (\r\n \r\n {this.state.redirectHome && \r\n \r\n {\r\n if (this.state.path !== \"/\")\r\n this.setState({ path: \"/\" });\r\n return {\r\n if (this.state.path !== PageURL.ConfirmationPage)\r\n this.setState({ path: PageURL.ConfirmationPage });\r\n return {\r\n if (this.state.path !== PageURL.ResetPWPage)\r\n this.setState({ path: PageURL.ResetPWPage });\r\n return {\r\n if (this.state.path !== PageURL.Consent)\r\n this.setState({ path: PageURL.Consent });\r\n return {\r\n return
\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport default function register () {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Lets check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl);\r\n } else {\r\n // Is not local host. Just register service worker\r\n registerValidSW(swUrl);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW (swUrl) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the old content will have been purged and\r\n // the fresh content will have been added to the cache.\r\n // It's the perfect time to display a \"New content is\r\n // available; please refresh.\" message in your web app.\r\n console.log('New content is available; please refresh.');\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker (swUrl) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n if (\r\n response.status === 404 ||\r\n response.headers.get('content-type').indexOf('javascript') === -1\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister () {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport App from './App';\r\nimport registerServiceWorker from './registerServiceWorker';\r\nimport { initializeIcons } from '@uifabric/icons';\r\n\r\n\r\n\r\ninitializeIcons();\r\n\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n \r\n ,\r\n rootElement);\r\n\r\nregisterServiceWorker();\r\n\r\n","\"use strict\";\r\nvar __extends = (this && this.__extends) || (function () {\r\n var extendStatics = function (d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n };\r\n return function (d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n };\r\n})();\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nexports.ExternalConsent = void 0;\r\nvar React = require(\"react\");\r\nvar react_router_1 = require(\"react-router\");\r\nvar office_ui_fabric_react_1 = require(\"office-ui-fabric-react\");\r\nvar gapi_script_1 = require(\"gapi-script\");\r\nvar msal_react_1 = require(\"@azure/msal-react\");\r\nvar ExternalConsent = /** @class */ (function (_super) {\r\n __extends(ExternalConsent, _super);\r\n function ExternalConsent(props) {\r\n var _this = _super.call(this, props) || this;\r\n _this.onLegalNoticeClicked = function (ev, checked) {\r\n _this.setState({ legalNoticeChecked: checked });\r\n };\r\n _this.onPrivacyNoticeClicked = function (ev, checked) {\r\n _this.setState({ privacyNoticeChecked: checked });\r\n };\r\n _this.onConfirmClicked = function () {\r\n console.log(\"MSAL Context\", _this.context);\r\n _this.setState({ showWaitingSpinner: true });\r\n window.sessionStorage.removeItem(\"freelanceConsentTarget\");\r\n _this.props.loginComponent.ensureSPUser(_this.state.user, _this.state.user.bearerToken.token, true).then(function (finalUser) {\r\n window.sessionStorage.authToken = JSON.stringify(finalUser.bearerToken);\r\n window.sessionStorage.freelanceUser = JSON.stringify(finalUser);\r\n _this.props.setAuthStatus(true, finalUser);\r\n _this.setState({ redirectWelcome: true, showWaitingSpinner: false });\r\n }).catch(function (err) {\r\n var error = err;\r\n if (err.message) {\r\n error = err.message;\r\n }\r\n alert(\"Error: \" + error);\r\n });\r\n };\r\n _this.onNoConsentClicked = function () {\r\n var _a, _b;\r\n var that = _this;\r\n // sign out of google, if it's a google account\r\n try {\r\n gapi_script_1.loadGapiInsideDOM().then(function (gapi) {\r\n console.log(\"Gapi loaded....\", gapi);\r\n gapi.load(\"auth2\", function () {\r\n console.log(\"auth2 loaded\", window.gapi.auth2);\r\n try {\r\n gapi.auth2.getAuthInstance()\r\n .then(function (auth2) {\r\n auth2.signOut().then(function () {\r\n console.log(\"signed out.\");\r\n that.setState({ redirectWelcome: true });\r\n });\r\n })\r\n .catch(function (error) {\r\n console.log(error);\r\n that.setState({ redirectWelcome: true });\r\n });\r\n }\r\n catch (err) {\r\n console.log(err);\r\n that.setState({ redirectWelcome: true });\r\n }\r\n });\r\n });\r\n }\r\n catch (err) {\r\n alert(\"sdfsdf\");\r\n /* ignore possible errors */\r\n }\r\n // sign out of microsoft, if it's a microsoft account\r\n try {\r\n (_b = (_a = _this.context) === null || _a === void 0 ? void 0 : _a.instance) === null || _b === void 0 ? void 0 : _b.logoutRedirect({\r\n onRedirectNavigate: function (url) {\r\n // Return false if you would like to stop navigation after local logout\r\n return false;\r\n }\r\n });\r\n }\r\n catch (err) { /* ignore possible errors*/ }\r\n window.sessionStorage.removeItem(\"freelanceConsentTarget\");\r\n };\r\n _this.state = {\r\n legalNoticeChecked: false,\r\n privacyNoticeChecked: false,\r\n redirectWelcome: false,\r\n user: null,\r\n showWaitingSpinner: false\r\n };\r\n return _this;\r\n }\r\n ExternalConsent.prototype.componentDidMount = function () {\r\n var _a;\r\n this.setState({\r\n user: JSON.parse((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.freelanceConsentTarget)\r\n });\r\n };\r\n ExternalConsent.prototype.render = function () {\r\n var _a, _b, _c, _d, _e, _f, _g, _h;\r\n return (React.createElement(\"div\", null,\r\n this.state.redirectWelcome && React.createElement(react_router_1.Redirect, { to: \"/\" }),\r\n React.createElement(\"div\", null,\r\n \"Hello \", (_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 :\r\n _b.firstName,\r\n \" \", (_d = (_c = this.state) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 :\r\n _d.lastName,\r\n \",\",\r\n React.createElement(\"br\", null),\r\n React.createElement(\"br\", null),\r\n \"This is the first time you are accessing the Straumann Research Screening Site with your \", (_f = (_e = this.state) === null || _e === void 0 ? void 0 : _e.user) === null || _f === void 0 ? void 0 :\r\n _f.accountType,\r\n \" account.\",\r\n React.createElement(\"br\", null),\r\n \"In order to be able to access this site we need the following consent from you.\"),\r\n React.createElement(office_ui_fabric_react_1.Stack, null,\r\n React.createElement(office_ui_fabric_react_1.Stack, { style: { marginTop: '15px' } },\r\n React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, verticalAlign: 'center' },\r\n React.createElement(office_ui_fabric_react_1.Checkbox, { id: \"chkLegal\", onChange: this.onLegalNoticeClicked, checked: (_g = this.state) === null || _g === void 0 ? void 0 : _g.legalNoticeChecked }),\r\n React.createElement(office_ui_fabric_react_1.Label, { htmlFor: \"chkLegal\", style: { position: 'relative', top: '-5px' } },\r\n \"I agree to the \",\r\n React.createElement(\"a\", { target: \"_blank\", href: \"https://www.straumann.com/en/dental-professionals/legal-notice.html\" }, \"StraumannGroup's Legal Notice\")))),\r\n React.createElement(office_ui_fabric_react_1.Stack, null,\r\n React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, verticalAlign: 'center' },\r\n React.createElement(office_ui_fabric_react_1.Checkbox, { id: \"chkPrivacy\", onChange: this.onPrivacyNoticeClicked, checked: (_h = this.state) === null || _h === void 0 ? void 0 : _h.privacyNoticeChecked }),\r\n React.createElement(office_ui_fabric_react_1.Label, { htmlFor: \"chkPrivacy\", style: { position: 'relative', top: '-5px' } },\r\n \"I acknowledge that my data will be processed in accordance with the \",\r\n React.createElement(\"a\", { target: \"_blank\", href: \"https://www.straumann.com/group/en/discover/privacy/com/en.html\" }, \"StraumannGroup's Privacy Notice\")))),\r\n React.createElement(office_ui_fabric_react_1.Stack, { style: { marginTop: '20px' } },\r\n React.createElement(\"div\", { style: { display: 'flex', justifyContent: 'space-between' } },\r\n React.createElement(office_ui_fabric_react_1.DefaultButton, { style: { color: 'white', backgroundColor: !(this.state.legalNoticeChecked && this.state.privacyNoticeChecked) ? 'gray' : 'green', cursor: !(this.state.legalNoticeChecked && this.state.privacyNoticeChecked) ? 'not-allowed' : 'pointer' }, text: \"Confirm\", onClick: this.onConfirmClicked, disabled: !(this.state.legalNoticeChecked && this.state.privacyNoticeChecked) }),\r\n React.createElement(office_ui_fabric_react_1.DefaultButton, { style: { color: 'white', backgroundColor: 'red' }, text: \"I do not Consent\", onClick: this.onNoConsentClicked })))),\r\n React.createElement(office_ui_fabric_react_1.Dialog, { hidden: !this.state.showWaitingSpinner, dialogContentProps: {\r\n type: office_ui_fabric_react_1.DialogType.normal,\r\n }, modalProps: { isBlocking: true, className: \"busyOverlay\" } },\r\n React.createElement(office_ui_fabric_react_1.Spinner, { size: office_ui_fabric_react_1.SpinnerSize.large, label: \"Working on it...\", ariaLive: \"assertive\" }))));\r\n };\r\n ExternalConsent.contextType = msal_react_1.MsalContext;\r\n return ExternalConsent;\r\n}(React.Component));\r\nexports.ExternalConsent = ExternalConsent;\r\n//# sourceMappingURL=ExternalConsent.js.map","module.exports = __webpack_public_path__ + \"static/media/str-group-white.c517c0ca.svg\";","module.exports = __webpack_public_path__ + \"static/media/Pool_logo_RGB.16c86910.png\";","module.exports = __webpack_public_path__ + \"static/media/Pool_logo_RGB_Black.73c383ae.png\";","module.exports = __webpack_public_path__ + \"static/media/Pool_logo_RGB_White.fdd38bab.png\";"],"sourceRoot":""}