\n
\n );\n }\n });\n }\n });\n}","import React, { useRef, useEffect } from \"react\";\n\n/**\n * Hook that alerts clicks outside of the passed ref\n */\nfunction useOutsideAlerter(ref, props) {\n /**\n * Alert if clicked on outside of element\n */\n function handleClickOutside(event) {\n if (ref.current && !ref.current.contains(event.target)) {\n props.dropMenu()\n }\n }\n\n useEffect(() => {\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n });\n}\n\n/**\n * Component that alerts if you click outside of it\n */\nexport default function OutsideAlerter(props) {\n const wrapperRef = useRef(null);\n useOutsideAlerter(wrapperRef, props);\n\n return Fetch warning!
\nError while fetching user info.
\n \n \n{props.children}
;\n}","import React, {useEffect, useState} from \"react\"\nimport * as routes from \"./../../../../../routes\"\nimport {Link} from \"react-router-dom\"\nimport {MenuWrapper, MenuItem} from \"./styled\"\nimport { GetRole, Roles } from '../../../../Services/RoleService'\nimport { Identity } from '../../../../Services/IdentityService'\nimport { ValidateToken } from '../../../../Services/TokenValidityService'\nimport { GetUserOverview } from '../../../../Services/UsersServices/GetUserOverviewService'\nimport OutsideAlerter from '../../../OutsideClick'\nconst ProfileMenu = ({closeMenu, dropMenu}) => {\n const [isLoading, setIsLoading] = useState(true)\n const [identityRole, setIdentityRole] = useState(\"\")\n\n useEffect(() => {\n ValidateToken();\n const fetchData = async () => {\n const identity = await Identity();\n setIdentityRole(identity)\n }\n fetchData()\n setIsLoading(false)\n },[])\n\n return(\n \n \n \n \n
\n }\n \n \n \n \n \n \n \n }\n \n \n \n\n
\n )\n}\n\nexport default NotificationItem","import config from './../../../config'\nconst baseUrl = config.baseUrl + '/Notification/'\n\nexport const getNotifications = async () => {\n const response = await fetch(baseUrl, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n \"Authorization\": \"Bearer \" + sessionStorage.getItem(\"userData\")\n },\n })\n return await response.json()\n}","import config from './../../../config'\nconst baseUrl = config.baseUrl + '/Notification/MarkAsSeen'\n\nexport const markAsSeen = async ({id}) => {\n await fetch(baseUrl, {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n \"Authorization\": \"Bearer \" + sessionStorage.getItem(\"userData\")\n },\n body: JSON.stringify(id)\n })\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function GetVideosById(id, instance) {\n $.ajax('/api/Videos?userId=' + id, {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n instance.setState({\n videos: output, loading: false\n });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n
\n {data.uri !== null &&\n \n \n \n }\n {data.uri === null &&\n\n \n\n }\n \n \n {data.title}\n \n \n {data.message}\n \n
\n \n }\n {data.uri === null &&\n \n \n {data.title}\n \n \n {data.message}\n \n
\n }\n \n
\n );\n }\n });\n }\n });\n}","import React, {useEffect,useState} from \"react\"\nimport {Header, Title, MenuWrapper, NotificationItemWrapper} from './styled'\nimport { Link } from 'react-router-dom'\nimport * as routes from '../../../../routes'\nimport NotificationItem from './NotificationItem'\nimport { getNotifications } from '../../../Services/Notification/get-notifications'\nimport { markAsRead } from '../../../Services/Notification/mark-as-read'\nimport { markAsSeen } from '../../../Services/Notification/mark-as-seen'\n\nimport { HubConnectionBuilder } from '@aspnet/signalr'\nimport { GetVideosById } from '../../../Services/VideoServices/VideoByIdService'\nimport OutsideAlerter from '../../OutsideClick'\n\nconst NotificationCenter = ({data, isLoadingData, onAllRead, onReadMessage, dropMenu}) => {\n const [isLoading, setIsLoading] = useState(isLoadingData)\n\nconst handleMarkAllAsRead = async () => {\n let ids = []\n data.map(item => ids.push(item.id))\n markAsRead({\n id: ids\n }).then(() => setIsLoading(true))\n onAllRead()\n}\n\n return(\n Fetch warning!
\nError while fetching videos.
\n \n \n\n Clear notifications\n
\n You don´t have any notifications
\n }\n \n {(!isLoading && isDropNotificationMenu) &&\n onAllSeen()} dropMenu={() => handleDrop('dropNotification')}\n onReadMessage={(message) => onReadMessage(message)} onAllRead={() => onAllReadMessage()}\n data={data.sort((a, b) => b.id - a.id)} isLoadingData={false}/>}\n\n\n {(!isLoading && isDropProfileMenu) &&\n <>\n handleDrop('dropProfile')}\n className=\"fas fa-user-circle\"/>\n\n handleDrop('dropProfile')} closeMenu={closeMenu}/>}\n\n
\n )\n}\nexport default Profile","import React, { Component } from 'react';\nimport { Redirect, Link } from 'react-router-dom';\nimport '../../Resources/Stylesheets/General/header.css';\nimport { Identity } from '../../Services/IdentityService';\nimport { ValidateToken } from '../../Services/TokenValidityService';\nimport * as routes from \"./../../../routes\"\nimport { GetRole } from '../../Services/RoleService';\nimport cookie from 'react-cookies';\nimport Profile from './Profile'\n\nexport class Header extends Component {\n static displayName = Component.displayName;\n\n constructor(props) {\n super(props);\n this.state = {\n identity: null,\n redirect: false,\n isLoading: true,\n }; \n } \n\n async componentWillMount() {\n ValidateToken(); \n if (sessionStorage.getItem(\"userData\")) {\n if (cookie.load(\"isOneTimePassword\")) {\n this.setState({ redirect: true });\n }\n else {\n let data = Identity()\n this.setState({ identity: data, isLoading: false})\n }\n }\n else {\n this.setState({ redirect: true });\n }\n }\n\n render() {\n if (this.state.redirect) return (\n \n \n \n \n \n {numberOfNotification.length > 9 ? '9+' : numberOfNotification.length}\n \n \n
\n }\n\n {(!isLoading && !isDropNotificationMenu) &&\n setIsDropNotificationMenu(true)}>\n \n \n \n \n \n {numberOfNotification.length > 9 ? '9+' : numberOfNotification.length}\n \n \n
\n }\n\n\n {isDropNotificationMenu &&\n \n\n
\n\n \n }\n\n {(!isLoading && !isDropProfileMenu) &&\n <>\n \n \n {userName} \n \n {identity.role[0] !== 'SysAdmin' &&\n \n ({identity.organizationName} ) }\n
\n\n\n \n handleDrop('dropProfile')} style={{\n alignSelf: (isDropProfileMenu ? 'flex-end' : 'normal'),\n height: '10px',\n position: 'absolute',\n top: (isDropProfileMenu ? '9.5px' : '4px'),\n right: '-20px',\n }} className={isDropProfileMenu ? 'fas fa-sort-up' : 'fas fa-sort-down'}/>\n
\n\n \n }\n\n {isDropProfileMenu && \n handleDrop('dropProfile')}>\n {userName} \n \n {identity.role[0] !== 'SysAdmin' &&\n \n handleDrop('dropProfile')}>({identity.organizationName} ) }\n
\n \n
\n );\n }\n}","import React, { Component } from 'react';\nimport { Route } from 'react-router-dom';\nimport { Header } from '../Components/General/Header';\nimport { Footer } from '../Components/General/Footer'\n\nconst MenuLayout = ({ children, ...rest }) => (\n \n \n ![](\"./Resources/Images/General/Personalizard.png\"/)
\n ![](\"./pe_favicon.png\"/)
\n \n
\n \n \n \n \n {this.props.backBtn ? {this.props.title}\n : this.props.title}\n
\n {!isLoading &&\n \n
\n }\n \n
\n \n \n \n \n {children}\n \n \n
\n);\n\nconst MenuLayoutRoute = ({ component: Component, ...rest }) => {\n return (\n \n
\n );\n}","import React, { Component } from 'react';\nimport { Redirect, Link } from 'react-router-dom';\nimport '../../Resources/Stylesheets/General/header.css';\nimport '../../Resources/Stylesheets/General/statistics.css';\nimport { Identity } from '../../Services/IdentityService';\nimport { Roles, GetRole } from '../../Services/RoleService';\nimport { ValidateToken } from '../../Services/TokenValidityService';\nimport { GetStats } from '../../Services/StatsService'; \nimport { RenderLoader } from './Loader';\nimport { getUserById } from '../../Services/UsersServices/get-user-by-id';\n\nexport class Statistics extends Component {\n static displayName = Statistics.name;\n\n constructor(props) {\n super(props);\n this.state = {\n identity: null,\n redirect: false,\n stats: {\n videosCount: 0,\n videosMinutes: 0,\n templatesCount: 0,\n usersCount: 0,\n organizationsCount: 0,\n videoMinutesLimit: 0,\n orgAdminViews: 0,\n organizationViews: 0,\n viewsCount: 0,\n },\n loading: false,\n userOverview: null\n };\n this.renderStatistics = this.renderStatistics.bind(this);\n this.loadUserStats = this.loadUserStats.bind(this);\n this.loadSysadminStats = this.loadSysadminStats.bind(this);\n this.loadOrgadminStats = this.loadOrgadminStats.bind(this);\n }\n\n componentWillMount() {\n ValidateToken();\n if (sessionStorage.getItem(\"userData\")) {\n GetStats(this);\n this.setState({ identity: Identity(), userOverview: getUserById(Identity().userId) });\n }\n else {\n this.setState({ redirect: true });\n }\n }\n\n loadSysadminStats() {\n return (\n \n ![](\"/Resources/Images/General/Personalizard.png\")
\n
\n \n Collecting data. Please wait...
\n\n
\n );\n }\n\n loadOrgadminStats() { \n return (\n \n
\n {this.state.stats.videosCount}
\n videos
\n \n
\n {this.state.stats.videosMinutes}
\n minutes
\n \n \n
\n {this.state.stats.organizationsCount}
\n organizations
\n \n \n
\n {this.state.stats.usersCount}
\n users
\n \n\n
\n );\n }\n\n loadUserStats() {\n return (\n \n \n
\n\n\n {this.state.stats.videosCount}
\n {/*out of 100 */}videos
\n \n \n
\n {this.state.stats.videosMinutes}
\n out of {this.state.stats.videoMinutesLimit == 0 ? Unlimited : {this.state.stats.videoMinutesLimit} videos}
\n \n \n\n
\n\n {this.state.stats.templatesCount}
\n templates
\n \n \n \n\n
\n {this.state.stats.usersCount}
\n users
\n \n\n \n \n
\n {this.state.stats.orgAdminViews}
\n Admin Views
\n \n \n \n
\n\n\n\n {this.state.stats.organizationViews}
\n Organization Views
\n \n \n\n
\n );\n }\n\n renderStatistics() {\n let stats = null;\n const role = GetRole(this.state.identity.role);\n if (role === Roles.SysAdmin) stats = this.loadSysadminStats();\n else if (role === Roles.OrgAdmin) stats = this.loadOrgadminStats();\n else stats = this.loadUserStats();\n\n return stats;\n } \n\n render() {\n if (this.state.redirect) return (\n \n
\n\n {this.state.stats.videosCount}
\n {/*out of 50 */}videos
\n \n \n
\n\n\n {this.state.stats.videosMinutes}
\n {/*out of 250 */}minutes
\n \n \n
\n\n {this.state.stats.generatingVideosCount}
\n generating
\n \n \n
\n\n {this.state.stats.templatesCount}
\n templates
\n \n \n
\n {this.state.stats.viewsCount}
\n views
\n \n \n { statistics } \n
\n );\n }\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../Resources/Stylesheets/General/popup.css';\nimport { GetUserOverview } from './UsersServices/GetUserOverviewService';\n\nexport function GetStats(instance) {\n $.ajax('/api/Dashboard/', {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n instance.setState({ stats: output });\n GetUserOverview(instance);\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport { Route } from 'react-router-dom';\nimport { Header } from '../Components/General/Header';\nimport { Statistics } from '../Components/General/Statistics';\nimport { Footer } from '../Components/General/Footer';\n\nconst MenuExtendedLayout = ({ children, ...rest }) => (\n Fetch warning!
\nError while fetching statistics.
\n \n \n\n \n \n \n {children}\n \n \n
\n);\n\nconst MenuExtendedLayoutRoute = ({ component: Component, ...rest }) => {\n return (\n \n
\n );\n }\n });\n event.preventDefault();\n }\n\n checkInputLabels(name) {\n let element = $(\"#user-\" + name);\n if (element.val() != \"\")\n element.parent().children(\"label\").addClass(\"input-filled\");\n else\n element.parent().children(\"label\").removeClass(\"input-filled\");\n }\n\n render() {\n let mainStyle = { paddingTop: \"10%\"};\n if (this.state.redirect) return (Sign in warning!
\nPlease fill in all required fields.
\n \n \n\n ![\"\"](\"./Resources/Images/General/Personalizard.png\")
\n
\n \n \n \n
\n \n
\n );\n }\n });\n }\n },\n cache: false\n });\n}","import React, { Component } from 'react';\nimport { Redirect } from 'react-router-dom';\nimport cookie from 'react-cookies';\n\nexport class LogOut extends Component {\n static displayName = LogOut.name;\n\n constructor(props) {\n super(props);\n }\n\n componentWillMount() {\n document.title = \"Log Out | Personalizard\";\n sessionStorage.clear();\n localStorage.clear();\n cookie.remove(\"token\", { path: '/' });\n cookie.remove(\"isOneTimePassword\", { path: '/' });\n }\n\n render() {\n return (Authentication warning!
\nUser not found.
\n \n \n\n \n
\n \n \n \n \n
\n \n \n
\n \n
\n );\n }\n });\n }\n });\n}","import styled from \"styled-components\"\n\nexport const TransparentButton = styled.button`\n background: none;\n border: none;\n`","import styled from \"styled-components\"\n\nexport const SharePanel = styled.div`\n font-size: 13px;\n margin-top: 5px;\n border-top: 1px solid #eeeeee;\n`\nexport const Icon = styled.i`\n padding: 4px 0px;\n margin-top: 5px;\n color: #33B58F;\n cursor: pointer;\n`\n\nexport const IconWithLabel = styled.div`\n display: flex;\n align-items: center;\n color: #33B58F;\n`\n\nexport const Label = styled.div`\n padding-right: 16px;\n margin-top: 5px;\n cursor: pointer;\n display: inline-block;\n `","import React from 'react'\n\nconst baseUrl = window.location.origin + /video/\n\n\nexport const ShareByFacebook = ({ id, icon, picture, title }) => {\n return (\n \n {icon && icon}\n \n )\n}\n\nexport const ShareByTwitter = ({ id, icon }) => {\n return Fetch warning!
\nError while fetching users.
\n \n \n\n
\n );\n }\n });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Done!
\nE-mail sent.
\n \n \n\n
\n );\n }\n });\n }\n });\n} ","import React, { Component } from 'react'\nimport { Link, Redirect } from 'react-router-dom'\nimport $ from 'jquery'\nimport '../../Resources/Stylesheets/MyVideos/myvideos.css'\nimport moment from 'moment'\nimport 'moment-duration-format'\nimport { ValidateToken } from '../../Services/TokenValidityService'\nimport { GetVideosById } from '../../Services/VideoServices/VideoByIdService'\nimport { DeleteVideoById } from '../../Services/VideoServices/DeleteVideoByIdService'\nimport { Identity } from '../../Services/IdentityService'\nimport { confirmAlert } from 'react-confirm-alert'\nimport 'react-confirm-alert/src/react-confirm-alert.css'\nimport '../../Resources/Stylesheets/General/popup.css'\nimport { GetRole, Roles } from '../../Services/RoleService'\nimport Autocomplete from 'react-autocomplete'\nimport { GetUsersByOrganization } from '../../Services/UsersServices/UsersByOrganizationService'\nimport { CopyToClipboard } from 'react-copy-to-clipboard'\nimport { RenderLoader } from '../../Components/General/Loader'\nimport { HubConnectionBuilder } from '@aspnet/signalr'\nimport { TransparentButton } from './../../Components/FormComponents/Button/styled'\nimport { Icon, IconWithLabel, Label, SharePanel } from './styled'\nimport { ShareByFacebook, ShareByLinkedIn, ShareByTwitter } from './Share/ShareByApp'\nimport { ShareByEmail } from '../../Services/VideoServices/ShareByEmailService'\nimport { ReCaptcha } from 'react-recaptcha-v3'\nimport config from './../../../config'\n\nconst baseUrl = config.baseUrl\n\n\nexport class MyVideos extends Component {\n static displayName = MyVideos.name\n\n constructor(props) {\n super(props)\n this.state = {\n videos: [],\n loading: true,\n redirect: false,\n identity: null,\n search: '',\n searchUser: null,\n pageDone: 1,\n perPage: 15,\n sortByLabel: 'Sort by date',\n sortOption: {\n id: 'views',\n text: 'Sort by views',\n },\n isSortToggle: false,\n isSorted: false,\n recaptcha: '',\n }\n this.deleteVideo = this.deleteVideo.bind(this)\n this.toggleVideosFilter = this.toggleVideosFilter.bind(this)\n this.searchByUser = this.searchByUser.bind(this)\n this.getUsers = this.getUsers.bind(this)\n this.getSearchBtnClass = this.getSearchBtnClass.bind(this)\n this.copiedClipboard = this.copiedClipboard.bind(this)\n this.resetSearch = this.resetSearch.bind(this)\n this.handleSortVideos = this.handleSortVideos.bind(this)\n this.verifyCallback = this.verifyCallback.bind(this)\n }\n\n componentWillMount() {\n ValidateToken()\n document.title = 'My videos | Personalizard'\n if (sessionStorage.getItem('userData')) {\n const identity = Identity()\n if (GetRole(identity.role) === Roles.OrgAdmin) GetUsersByOrganization(this)\n GetVideosById(identity.userId, this)\n this.setState({ identity: identity })\n\n // Rerender component when video is rendered\n let connection = new HubConnectionBuilder().withUrl('/hubs/videos', {\n accessTokenFactory: function() {\n return sessionStorage.getItem('userData')\n },\n }).build()\n connection.on('video-rendered', data => {\n if (this.state.searchUser != null) {\n this.setState({ loading: true })\n GetVideosById(this.state.searchUser.id, this)\n } else {\n this.setState({ loading: true })\n GetVideosById(identity.userId, this)\n }\n })\n connection.start()\n this.setState({ hub: connection })\n } else {\n this.setState({ redirect: true })\n }\n }\n\n componentWillUnmount() {\n this.state.hub.stop()\n }\n\n\n toggleSort(instance) {\n instance.setState(prevState => ({\n isSortToggle: !prevState.isSortToggle,\n }))\n }\n\n sortVideo(id, instance) {\n switch (id) {\n case 'views':\n if (this.state.isSorted) {\n this.setState(prevState => ({\n videos: prevState.videos.sort((a, b) => b.seen - a.seen),\n }))\n this.setState({\n isSorted: false,\n })\n } else {\n this.setState(prevState => ({\n videos: prevState.videos.sort((a, b) => a.seen - b.seen),\n }))\n this.setState({\n isSorted: true,\n })\n }\n break\n default:\n if (this.state.isSorted) {\n this.setState(prevState => ({\n videos: prevState.videos.sort((a, b) => new Date(b.createdDate) - new Date(a.createdDate)),\n }))\n this.setState({\n isSorted: false,\n })\n } else {\n this.setState(prevState => ({\n videos: prevState.videos.sort((a, b) => new Date(a.createdDate) - new Date(b.createdDate)),\n }))\n this.setState({\n isSorted: true,\n })\n }\n }\n }\n\n toggleShareMenu(e) {\n $(e.currentTarget).parent().parent().children('.share-panel').toggle()\n }\n\n toggleShowMoreMenu(e) {\n $(e.currentTarget).parent().parent().children('.more-panel').toggle()\n }\n\n handleSortVideos(id, instance) {\n switch (id) {\n case 'date':\n instance.setState({\n sortByLabel: 'Sort by date',\n sortOption: {\n id: 'views',\n text: 'Sort by views',\n },\n sortKey: 'date',\n })\n instance.sortVideo(id)\n break\n case 'views':\n instance.setState({\n sortByLabel: 'Sort by views',\n sortOption: {\n id: 'date',\n text: 'Sort by date',\n },\n sortKey: 'views',\n })\n instance.sortVideo(id)\n break\n default:\n break\n }\n this.setState({\n isSortToggle: false,\n })\n\n }\n\n verifyCallback = (recaptchaToken) => {\n this.setState({ recaptcha: recaptchaToken })\n }\n\n static sendEmail(video, instance) {\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\nError while sharing video by email.
\n \n \n\n \n \n )\n }\n } else\n return (\n \n {stateFilter !== 1 &&\n
\n }\n Share video via email
\nPlease enter email address
\n\n
\n )\n },\n })\n }\n\n deleteVideo(event) {\n let params = event.currentTarget.dataset\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n \n
\n\n \n \n \n
\n )\n },\n })\n event.preventDefault()\n }\n\n\n // Generating Video\n static renderInitGenerWidget(video, widgetClass, instance) {\n return (\n Delete warning!
\nThis action is permanent. Would you like to proceed?
\n \n \n \n\n ![](\"/Resources/Images/General/video-preview.png\"/)
\n
\n )\n }\n\n\n // Generated Video\n static renderDoneWidget(video, widgetClass, instance) {\n return (\n \n \n
\n \n \n {video.name}\n
\n\n \n Video in progress\n \n
\n \n
\n \n \n --:--\n
\n \n \n {moment(video.createdDate).format('YYYY/M/D HH:mm')}\n
\n \n \n 
\n \n
\n )\n }\n\n\n /*\n static renderFailedWidget(video, widgetClass) {\n return (\n \n \n\n \n \n \n \n {/*\n \n \n */}\n \n \n \n \n\n
\n \n \n {video.name}\n
\n\n \n \n \n Share\n \n {/* Adina does not have download functionality\n \n
\n \n \n Play\n
\n \n \n \n Download\n
\n */}\n \n \n
\n \n \n {moment.duration(video.duration, 'seconds').isValid() ?\n moment.duration(video.duration, 'seconds').format('mm:ss', { trim: false }) :\n '--:--'}\n
\n \n \n {moment(video.createdDate).format('M/D/YYYY HH:mm')}\n
\n \n \n {video.seen}\n
\n \n ![](\"/Resources/Images/General/video-preview.png\")
\n
\n );\n }\n\n */\n\n\n static renderSingleWidget(video, widgetClass, instance) {\n if (video.state == 1 || video.state == 2)\n return MyVideos.renderInitGenerWidget(video, widgetClass, instance)\n else if (video.state == 3)\n return MyVideos.renderDoneWidget(video, widgetClass, instance)\n else\n return MyVideos.renderFailedWidget(video, widgetClass)\n }\n\n\n // Video sections\n static renderVideoWidgets(videos = [], stateFilter, instance) {\n const videoStates = ['Generating videos', 'Videos']\n const videoMessage = ['No generating videos found', 'No videos found']\n let widgetClass = ['video-item']\n if (stateFilter === 1) widgetClass.push('item-in-progress')\n else widgetClass.push('item-done')\n if (videos.length <= 0) {\n if (stateFilter !== 1) {\n return (\n \n \n
\n \n \n {video.name}\n
\n\n \n Generating failed\n
\n \n
\n \n \n --:--\n
\n \n \n {moment(video.createdDate).format(\"YYYY/M/D\")}\n
\n {videoStates[stateFilter - 1]}
\n\n
\n {videoMessage[stateFilter - 1]}
\n \n
\n {videoStates[stateFilter - 1]}
\n\n instance.sortVideo(instance.state.sortKey, instance)}>\n {instance.state.isSorted ? :\n }\n
\n \n \n instance.toggleSort(instance)} className=\"section-header-3\">\n
\n {instance.state.isSortToggle && \n
\n instance.toggleSort(instance)} className=\"section-header-3\">\n {instance.state.sortByLabel}\n
\n {instance.state.isSortToggle && \n
\n }\n instance.handleSortVideos(instance.state.sortOption.id, instance)}>\n {instance.state.sortOption.text}\n
\n \n {videos.map((video, index) =>\n stateFilter === 2 ?\n (((index >= (instance.state.perPage * (instance.state.pageDone - 1))) && (index < (instance.state.perPage * (instance.state.pageDone - 1) + instance.state.perPage))) ?\n MyVideos.renderSingleWidget(video, widgetClass, instance) : '') : MyVideos.renderSingleWidget(video, widgetClass, instance))}\n
\n {(videos.length > instance.state.perPage && stateFilter === 2) &&\n \n {(instance.state.pageDone - 1) * instance.state.perPage > 0 ?\n instance.setState({ pageDone: (instance.state.pageDone - 1) })}/> :\n }\n
\n \n
\n {(((instance.state.pageDone - 1) * instance.state.perPage + instance.state.perPage) < videos.length) ?\n instance.setState({ pageDone: (instance.state.pageDone + 1) })}/> :\n }\n {instance.state.pageDone}
\n \n )\n\n let loader = this.state.loading ? RenderLoader() : ''\n let generatingVideos = this.state.videos.filter((value, index, array) => {\n return value.state == 1 || value.state == 2\n })\n let doneVideos = this.state.videos.filter((value, index, array) => {\n return value.state == 3 || value.state == 4\n })\n\n let generatingContents = this.state.loading\n ? \n {loader}\n {GetRole(this.state.identity.role) === Roles.OrgAdmin &&\n \n \n }\n {generatingContents}\n {doneContents}\n \n )\n }\n}\n\n/**/","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function DeleteVideoById(id, instance) {\n $.ajax('/api/Videos/' + id, {\n type: 'DELETE',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n let filtered = instance.state.videos.filter((value, index, array) => { return value.id != id });\n instance.setState({ videos: filtered });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n )\n\n let loader = this.state.loading ? RenderLoader() : ''\n let userContents = this.state.loading\n ? \n {loader}\n {!this.state.isAuthenticated && \n \n }\n {this.state.isAuthenticated &&\n \n \n }\n \n )\n }\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { GetUsersAfterEdit } from './GetUserAfterEdit';\n\nexport function AddNewUser(user, instance) {\n $.ajax('/api/Users', {\n type: 'POST',\n data: JSON.stringify(user),\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n GetUsersAfterEdit(instance);\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n instance.setState({ success: 2 });\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n {loader}\n \n \n \n );\n }\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../../Resources/Stylesheets/General/popup.css';\nimport Autocomplete from 'react-google-autocomplete';\n\nexport function RenderPlaceInput(inputInfo, instance) {\n return (\n \n {loader}\n \n )\n }\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function GetVideoById(id, instance) {\n $.ajax('/api/Videos/' + id + (sessionStorage.getItem(\"userData\") ? '?access_token=' + sessionStorage.getItem(\"userData\") : ''), {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n success: function (output, status, xhr) {\n if (status == \"success\") {\n let parsedUrl = output.url.split(\"/\");\n let customer = parsedUrl[parsedUrl.length - 3];\n let campaign = parsedUrl[parsedUrl.length - 2];\n let uid = parsedUrl[parsedUrl.length - 1].replace(\".mp4\", \"\");\n let isDev = (window.location.hostname === \"devpersonalizard.azurewebsites.net\");\n instance.setState({ video: output, loading: false, customer: customer, campaign: campaign, uid: uid, isDev: isDev });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\") {\n instance.setState({ video: null, loading: false });\n /*confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n Last logged in on {moment(lastLogin[0]).format('dddd')} {moment(lastLogin[0]).format(\"YYYY/M/D HH:mm\")} {lastLogin[1]}\n \n )\n}\nexport default LastLog","import config from './../../../config'\nconst baseUrl = config.baseUrl + '/Logger/'\n\nexport const logsList = async ({pagination}) => {\n const page = JSON.stringify(pagination)\n const response = await fetch(baseUrl+page, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n \"Authorization\": \"Bearer \" + sessionStorage.getItem(\"userData\")\n },\n })\n return await response.json()\n}","import styled from \"styled-components\"\n\nexport const Row = styled.tr`\n font-size: 13px;\n font-weight: normal;\n border-bottom: 2px solid #fafafa;\n`\n\nexport const PaginationWrap = styled.div`\n color: ${props => !props.IsEnable ? \"#fafafa\" : \"#33B58F\"}\n &:hover {\n cursor: pointer;\n }\n\n`","import React from \"react\"\nimport moment from 'moment';\nimport { Row } from \"./../styled\"\n\nconst UserLog = ({userLogData}) => {\n return (\n \n \n {moment(userLogData.logDate).format(\"YYYY/M/D HH:mm\")}\n \n \n {userLogData.user.email}\n \n \n {userLogData.location}\n \n
\n )\n}\n\nexport default UserLog","import React, {useState, useEffect} from \"react\"\nimport {logsList} from \"./../../../../Services/Logs/get-logs\"\nimport UserLog from \"./UserLog\"\nimport { Row } from \"./styled\"\nimport {PaginationWrap} from './styled'\n\nconst LogList = () => {\n const [data,setData] = useState(null)\n const [pagination, setPagination] = useState(1)\n useEffect(() => {\n async function fetchData() {\n const _data = await logsList({\n pagination: pagination\n })\n setData(_data)\n }\n fetchData();\n\n }, [pagination]);\n\n const handlePagination = (event) => {\n switch (event.target.id) {\n case \"newer\":\n if (pagination !== 1) {\n setPagination(pagination - 1)\n }\n break;\n case \"older\":\n if (pagination < data.countAll / 20) {\n setPagination((pagination + 1))\n }\n default:\n break\n }\n }\n\n return (\n \n {loader}\n \n );\n }\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport cookie from 'react-cookies';\n\nexport function DeleteYourself(id, instance) {\n $.ajax('/api/Users/' + id, {\n type: 'DELETE',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n sessionStorage.clear();\n localStorage.clear();\n cookie.remove(\"token\", { path: '/' });\n cookie.remove(\"isOneTimePassword\", { path: '/' });\n instance.setState({ redirect: true });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n )\n let loader = this.state.loading ? RenderLoader() : ''\n let templateContents = this.state.loading\n ? \n {loader}\n\n {!this.state.isAuthenticated && \n
\n \n }\n {this.state.isAuthenticated &&\n Video sharing
\nLink copied to clipboard.
\n\n \n
\n )\n },\n })\n }\n\n resetSearch() {\n this.setState({ loading: true, search: '', searchUser: null })\n GetVideosById(this.state.identity.userId, this)\n }\n\n render() {\n if (this.state.redirect) return (\n
\n : MyVideos.renderVideoWidgets(generatingVideos, 1, this)\n let doneContents = this.state.loading && doneVideos.length > 0\n ? Loading...
\n \n
\n : MyVideos.renderVideoWidgets(doneVideos, 2, this)\n\n return (\n\n // Filter\n Loading...
\n \n
\n \n
\n Filter videos
\n \n\n {this.state.users == null &&
\n Loading...
}\n {(this.state.users != null &&\n this.getUsers().length == 0) && No more users found
}\n {(this.state.users != null &&\n this.getUsers().length > 0) &&\n \n }\n \n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function GetUsersAfterEdit(instance) {\n $.ajax('/api/Users', {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n instance.setState({ users: output, success: 1 });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n instance.setState({ success: 2 });\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\nError while deleting video.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","export function ValidateEmail(email, isRequired = true) {\n const regex = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;\n if (email.length == 0 && isRequired) return null;\n else if (email.match(regex) || (email.length == 0 && !isRequired)) return true;\n return false;\n}","export function ValidatePassword(password, isRequired = true) {\n const regex = /[^]{6,100}/;\n if (password.length == 0 && isRequired) return null;\n else if (password.match(regex) || (password.length == 0 && !isRequired)) return true;\n else return false;\n}","export function ValidateName(name, isRequired = true) {\n if (name.length === 0 && isRequired) return null;\n else if (name.length > 0 || (name.length === 0 && !isRequired)){\n return true;\n }\n return false;\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { GetUsersAfterEdit } from './GetUserAfterEdit';\nimport { Identity } from '../IdentityService'; \nimport { GetRole, Roles } from '../RoleService';\nimport { ValidatePassword } from '../../Validators/PasswordValidatorService';\n\nexport function EditUser(user, instance, isOrgUser = false, fetchAfterEdit = true, isEditMyself = false) {\n let editUser = {\n email: user.email,\n name: user.name\n };\n let identity = Identity();\n if (isEditMyself && (GetRole(identity.role) === Roles.SysAdmin)) {\n delete editUser.name;\n }\n if (ValidatePassword(user.password))\n editUser[\"password\"] = user.password;\n $.ajax('/api/Users/' + user.id, {\n type: 'PUT',\n data: JSON.stringify(editUser),\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") { \n if (user.oldPassword != \"\" && !isOrgUser) { \n $.ajax('/api/Auth/ChangePassword/', {\n type: 'POST',\n data: JSON.stringify({ oldPassword: user.oldPassword, newPassword: user.password }),\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) { \n if (status == \"success\") {\n if (fetchAfterEdit) GetUsersAfterEdit(instance);\n if (isEditMyself) {\n let userVals = instance.state.userOverview;\n userVals.oldPassword = \"\";\n userVals.password = \"\";\n userVals.passwordAgain = \"\";\n instance.setState({ userOverview: userVals });\n }\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Fetch warning!
\nError while fetching users.
\n \n \n\n
\n );\n }\n });\n }\n });\n }\n if (fetchAfterEdit) GetUsersAfterEdit(instance);\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\nError while changing password.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","import styled from \"styled-components\"\n\nexport const Button = styled.button`\n outline: none;\n border: 1px solid #33B58F;\n color: #ffffff;\n background-color: #33B58F;\n font-size: 14px;\n text-transform: uppercase;\n padding: 12.5px 20px;\n font-weight: bold;\n width: 300px;\n position: relative;\n border-radius: 50px;\n margin-top: 15px;\n`\n","import React from \"react\"\nimport {Button} from './styled'\nimport {Link} from 'react-router-dom'\n\n\nconst NoAuthenticated = () => {\n return(\n Process warning!
\nError while editing user.
\n \n \n\n
\n )\n}\n\nexport default NoAuthenticated","import React, { Component } from 'react'\nimport { Redirect } from 'react-router-dom'\nimport $ from 'jquery'\nimport { ValidateToken } from '../Services/TokenValidityService'\nimport '../Resources/Stylesheets/MyUsers/myusers.css'\nimport moment from 'moment'\nimport { confirmAlert } from 'react-confirm-alert'\nimport { AddNewUser } from '../Services/UsersServices/AddUserService'\nimport { GetUsersByOrganization } from '../Services/UsersServices/UsersByOrganizationService'\nimport { DeleteUserById } from '../Services/UsersServices/DeleteUserByIdService'\nimport { GetRole, Roles } from '../Services/RoleService'\nimport { Identity } from '../Services/IdentityService'\nimport { ValidateEmail } from '../Validators/EmailValidatorService'\nimport { ValidatePassword } from '../Validators/PasswordValidatorService'\nimport { ValidateName } from '../Validators/NameValidatorService'\nimport { EditUser } from '../Services/UsersServices/EditUserService'\nimport { RenderLoader } from '../Components/General/Loader'\nimport NoAuthenticated from './NoAuthenticated'\n\nexport class MyUsers extends Component {\n static displayName = MyUsers.name\n\n constructor(props) {\n super(props)\n this.state = {\n redirect: false,\n loading: true,\n success: 2,\n users: [],\n identity: null,\n isAddValid: false,\n editUser: null,\n isEditValid: false,\n isAuthenticated: false,\n newUser: {\n name: '',\n email: '',\n password: '',\n },\n addUserValidators: {\n name: null,\n email: null,\n password: null,\n },\n editUserValidators: {\n name: null,\n email: null,\n password: null,\n },\n }\n this.handleAddUserInputChange = this.handleAddUserInputChange.bind(this)\n this.handleEditUserInputChange = this.handleEditUserInputChange.bind(this)\n this.addUser = this.addUser.bind(this)\n this.editUser = this.editUser.bind(this)\n this.deleteUser = this.deleteUser.bind(this)\n this.toggleAddUser = this.toggleAddUser.bind(this)\n this.toggleEditUser = this.toggleEditUser.bind(this)\n this.getAddInputClass = this.getAddInputClass.bind(this)\n this.getEditInputClass = this.getEditInputClass.bind(this)\n this.getEditBtnClass = this.getEditBtnClass.bind(this)\n this.checkAddValidators = this.checkAddValidators.bind(this)\n this.checkEditValidators = this.checkEditValidators.bind(this)\n this.getAddBtnClass = this.getAddBtnClass.bind(this)\n this.closeAllEdits = this.closeAllEdits.bind(this)\n }\n\n handleAddUserInputChange(event) {\n let userVals = this.state.newUser\n let validatorsVals = this.state.addUserValidators\n switch (event.target.name) {\n case 'name':\n validatorsVals.name = ValidateName(event.target.value)\n this.setState({ addUserValidators: validatorsVals })\n break\n case 'email':\n validatorsVals.email = ValidateEmail(event.target.value)\n this.setState({ addUserValidators: validatorsVals })\n break\n case 'password':\n validatorsVals.password = ValidatePassword(event.target.value)\n this.setState({ addUserValidators: validatorsVals })\n break\n }\n userVals[event.target.name] = event.target.value\n this.setState({ newUser: userVals })\n this.checkAddValidators()\n }\n\n savedSuccess() {\n setTimeout(() => {\n this.setState({\n success: 2,\n })\n }, 2000)\n return (\n \n You are not authenticated\n
\n \n \n \n Saved
\n )\n }\n\n resolveButtonLabel() {\n\n switch (this.state.success) {\n case 0:\n return 'Saving...'\n case 1:\n return this.savedSuccess()\n case 2:\n return 'Add user'\n default:\n break\n\n }\n }\n\n handleEditUserInputChange(event) {\n let userVals = this.state.editUser\n let validatorsVals = this.state.editUserValidators\n switch (event.target.name) {\n case 'name':\n validatorsVals.name = ValidateName(event.target.value)\n this.setState({ editUserValidators: validatorsVals })\n break\n case 'email':\n validatorsVals.email = ValidateEmail(event.target.value)\n this.setState({ editUserValidators: validatorsVals })\n break\n case 'password':\n validatorsVals.password = ValidatePassword(event.target.value)\n this.setState({ editUserValidators: validatorsVals })\n break\n }\n userVals[event.target.name] = event.target.value\n this.setState({ editUser: userVals })\n this.checkEditValidators()\n }\n\n addUser(event) {\n if (this.state.isAddValid) {\n // Save new user to DB\n AddNewUser(this.state.newUser, this)\n this.setState({\n success: 0,\n newUser: {\n name: '',\n email: '',\n password: '',\n }, isAddValid: false, addUserValidators: {\n name: null,\n email: null,\n password: null,\n },\n })\n }\n event.preventDefault()\n }\n\n editUser(event) {\n if (this.state.isEditValid) {\n let userVals = this.state.editUser\n EditUser(userVals, this, true)\n this.closeAllEdits()\n this.setState({\n editUser: {\n name: '',\n email: '',\n password: '',\n }, isEditValid: false, editUserValidators: {\n name: null,\n email: null,\n password: null,\n },\n })\n }\n event.preventDefault()\n }\n\n deleteUser(event) {\n let params = event.currentTarget.dataset\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n
\n )\n },\n })\n event.preventDefault()\n }\n\n componentWillMount() {\n ValidateToken()\n document.title = 'My users | Personalizard'\n const _identity = Identity()\n if (sessionStorage.getItem('userData')) {\n if (GetRole(_identity.role !== Roles.User)) {\n GetUsersByOrganization(this)\n this.setState({\n identity: _identity, addUserValidators: {\n name: null,\n email: null,\n password: null,\n }, AddNewUser: {\n name: '',\n email: '',\n password: '',\n },\n isAuthenticated: true,\n })\n } else {\n this.setState({ isAuthenticated: false, loading: false })\n }\n } else {\n this.setState({ redirect: true })\n }\n }\n\n // Make as single component\n static renderSingleUser(user, instance) {\n let username = user.name\n return (\n Delete warning!
\nThis action is permanent. Would you like to proceed?
\n \n \n \n\n
\n )\n }\n\n\n // User List\n static renderUsers(users = [], instance) {\n if (users.length <= 0)\n return (\n \n \n {username}\n
\n\n
\n \n \n {user.email}\n
\n {user.id != instance.state.identity.userId &&\n \n \n \n
\n }\n \n Videos: {user.videosCount}\n Created: {moment(user.createdDate).format('YYYY/M/D')}\n
\n \n {instance.state.editUser != null && instance.state.editUser.id === user.id &&\n \n }\n
\n \n
\n )\n else\n return users.map(user => No users found
\n {MyUsers.renderSingleUser(user, instance)}
)\n }\n\n toggleAddUser() {\n if ($('.page-top-panel-body').is(':hidden')) $('.page-top-panel-header i').css({\n transform: 'rotateZ(180deg)',\n bottom: '2.5px',\n })\n else $('.page-top-panel-header i').css({ transform: 'rotateZ(0deg)', bottom: '0' })\n $('.page-top-panel-body').toggle()\n this.setState({\n newUser: {\n name: '',\n email: '',\n password: '',\n }, isAddValid: false, addUserValidators: {\n name: null,\n email: null,\n password: null,\n },\n })\n }\n\n toggleEditUser(event) {\n const active = $(event.currentTarget).hasClass('active-item')\n this.closeAllEdits()\n if (active) $(event.currentTarget).removeClass('active-item')\n else $(event.currentTarget).addClass('active-item')\n if (!active) {\n $(event.currentTarget).parent().parent().parent().children('.user-edit').toggle()\n let object = JSON.parse(event.currentTarget.dataset.item)\n object.password = ''\n this.setState({\n editUser: object,\n isEditValid: false,\n editUserValidators: {\n name: ValidateName(object.name),\n email: ValidateEmail(object.email),\n password: ValidatePassword(object.password),\n },\n })\n }\n event.preventDefault()\n }\n\n closeAllEdits() {\n $('.user-edit').each(function() {\n $(this).hide()\n })\n $('.active-item').each(function() {\n $(this).removeClass('active-item')\n })\n }\n\n getAddInputClass(name) {\n if (this.state.addUserValidators[name] == null) return ('form-label-input-block')\n else if (this.state.addUserValidators[name] == false) return ('form-label-input-block nonvalid-field')\n else return ('form-label-input-block valid-field')\n }\n\n getEditInputClass(name) {\n if (this.state.editUserValidators[name] == null) return ('form-label-input-block')\n else if (this.state.editUserValidators[name] == false) return ('form-label-input-block nonvalid-field')\n else return ('form-label-input-block valid-field')\n }\n\n checkAddValidators() {\n const validators = this.state.addUserValidators\n if (validators.name == true && validators.email == true && validators.password == true) this.setState({ isAddValid: true })\n else this.setState({ isAddValid: false })\n }\n\n checkEditValidators() {\n const validators = this.state.editUserValidators\n if (validators.name == true && validators.email == true && (validators.password == true || validators.password == null)) this.setState({ isEditValid: true })\n else this.setState({ isEditValid: false })\n }\n\n getAddBtnClass() {\n if (this.state.isAddValid) return ('form-submit-button form-submit-button-active')\n else if (this.state.success === 1) return ('form-submit-button-success-fetch')\n else return ('form-submit-button')\n }\n\n getEditBtnClass() {\n if (this.state.isEditValid) return ('form-submit-button form-submit-button-active')\n else if (this.state.success === 1) return ('form-submit-button-success-fetch')\n else return ('form-submit-button')\n }\n\n render() {\n if (this.state.redirect) return (\n
\n : MyUsers.renderUsers(this.state.users, this)\n\n return (\n Loading...
\n \n
\n \n
\n Add user
\n \n\n \n
\n My users
\n {userContents}\n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function DeleteUserById(id, instance) {\n $.ajax('/api/Users/' + id, {\n type: 'DELETE',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n let filtered = instance.state.users.filter((value, index, array) => { return value.id != id });\n instance.setState({ users: filtered });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\n{jqXHR.responseJSON.errors[\"\"][0]}
\n \n \n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { Identity } from '../IdentityService';\n\nexport function GetTemplatesByOrganization(instance) {\n $.ajax('/api/Templates/?organizationId=' + Identity().organizationId, {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n instance.setState({ templates: output, loading: false, success: 1 });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\nError while deleting user.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","export function ValidateNumber(text, isRequired = true) {\n if (text.length === 0 && isRequired) return null;\n else if (text.length == 0 && !isRequired) return true;\n return /^[+-]?\\d+(\\.\\d+)?$/.test(text);\n}","export function ValidatePlace(inputJSON, isRequired = true) {\n if (inputJSON[\"formatted_address\"] || !isRequired) return true;\n return false;\n}","export function ValidateText(text, isRequired = true) {\n if (text.length == 0 && isRequired) return null;\n else if (text.length > 0 || (text.length == 0 && !isRequired)) return true;\n return false;\n}","export function ValidateUrl(url, isRequired = false) {\n const regex = /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/;\n if (url.length === 0 && isRequired) return null;\n else if (url.match(regex) || (url.length === 0 && !isRequired)) return true;\n return false;\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { GenerateInputObject } from './GenerateInputObject';\n\nexport function GetTemplateDetail(key, instance) {\n $.ajax('/api/Templates/detail?key=' + key, {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n const objects = GenerateInputObject(output); \n instance.setState({ template: output, templateLoaded: true, inputs: objects[0], validators: objects[1] });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n }\n });\n}","import { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport React, { Component } from 'react';\n\nimport { ValidateNumber } from '../../Validators/NumberValidatorService';\nimport { ValidatePlace } from '../../Validators/PlaceValidatorService';\nimport { ValidateText } from '../../Validators/TextValidatorService';\nimport { ValidateUrl } from '../../Validators/UrlValidatorService';\n\nexport function GenerateInputObject(template) {\n let object = {}; \n let validators = {}; \n console.log(template)\n template.fields.map(input => {\n switch (input.type) {\n case \"place\":\n object[input.key] = null;\n validators[input.key] = {};\n validators[input.key][\"validate\"] = ValidatePlace;\n validators[input.key][\"isRequired\"] = input.required;\n validators[input.key][\"isValid\"] = (input.required ? null : true); \n break;\n case \"number\":\n object[input.key] = \"\";\n validators[input.key] = {};\n validators[input.key][\"validate\"] = ValidateNumber;\n validators[input.key][\"isRequired\"] = input.required;\n validators[input.key][\"isValid\"] = (input.required ? null : true); \n break;\n case \"image\":\n object[input.key] = {};\n object[input.key].name = \"No picture\";\n object[input.key].file = null;\n object[input.key].isUploading = false\n validators[input.key] = {};\n validators[input.key][\"isRequired\"] = input.required;\n validators[input.key][\"isValid\"] = (input.required ? null : true); \n break;\n case \"enum\":\n object[input.key] = input.options[Object.keys(input.options)[0]].value;\n break;\n case \"boolean\":\n object[input.key] = true;\n break;\n case \"text\":\n object[input.key] = \"\";\n validators[input.key] = {};\n validators[input.key][\"validate\"] = ValidateText;\n validators[input.key][\"isRequired\"] = input.required;\n validators[input.key][\"isValid\"] = (input.required ? null : true); \n break;\n case \"page\":\n if (input.key == \"cta\") object[input.key] = template.ctaUrl;\n else object[input.key] = \"\";\n validators[input.key] = {};\n validators[input.key][\"validate\"] = ValidateUrl;\n validators[input.key][\"isRequired\"] = input.required;\n if (input.key == \"cta\" && !template.ctaVisible && template.ctaUrl != \"\") validators[input.key][\"isValid\"] = true\n else if (input.key == \"cta\" && template.ctaVisible && template.ctaUrl != \"\") validators[input.key][\"isValid\"] = true\n else validators[input.key][\"isValid\"] = (input.required ? null : true);\n break;\n default:\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Fetch warning!
\nError while fetching templates.
\n \n \n\n
\n );\n }\n });\n }\n });\n return [object, validators];\n} ","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../../Resources/Stylesheets/General/popup.css';\n\nexport function RenderEnumInput(inputInfo, instance) {\n return (\n\n Init warning!
\nCan´t initialize template input of type {input.type} - {input.label}
\n \n \n\n \n \n
\n );\n}\n\nfunction renderOption(label) {\n return ();\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../Resources/Stylesheets/General/popup.css';\n\nexport function UploadImage(instance, target, file) {\n var data = new FormData();\n data.append(\"file\", file);\n $.ajax('/api/Image', {\n type: 'POST',\n async: true,\n data: data,\n cache: false,\n contentType: false,\n processData: false,\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n let inputs = instance.state.inputs;\n inputs[target][\"href\"] = xhr.getResponseHeader('Location');\n let validators = instance.state.validators; \n validators[target].isValid = true;\n inputs[target].isUploading = false\n instance.setState({ inputs: inputs, validators: validators});\n instance.checkValidators();\n \n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\") {\n let validators = instance.state.validators;\n validators[target].isValid = validators[target].isRequired ? null : true;\n let inputs = instance.state.inputs;\n inputs[target].isUploading = false\n instance.setState({ inputs: inputs, validators: validators });\n\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n
\n );\n }\n });\n }\n }\n \n });\n}","import React, { Component } from 'react';\nimport { Redirect, Link } from 'react-router-dom';\nimport Autocomplete from 'react-google-autocomplete';\nimport $ from 'jquery';\nimport { ValidateToken } from '../Services/TokenValidityService';\nimport { GetVideoTemplate } from '../Services/VideoServices/LoadVideoTemplateService';\nimport '../Resources/Stylesheets/NewVideo/newvideo.css';\nimport { GetTemplatesByOrganization } from '../Services/TemplatesServices/TemplatesByOrganizationService';\nimport { GetTemplateDetail } from '../Services/TemplatesServices/GetTemplateDetail';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../Resources/Stylesheets/General/popup.css';\nimport * as AComplete from 'react-autocomplete';\nimport { RenderLoader } from '../Components/General/Loader';\nimport image from \"./../Resources/Images/video-preview.png\"\n\n// Importing input components\nimport { RenderPlaceInput } from '../Components/Video/Inputs/PlaceInput';\nimport { RenderNumberInput } from '../Components/Video/Inputs/NumberInput';\nimport { RenderImageInput } from '../Components/Video/Inputs/ImageInput';\nimport { RenderEnumInput } from '../Components/Video/Inputs/EnumInput';\nimport { RenderBooleanInput } from '../Components/Video/Inputs/BooleanInput';\nimport { RenderTextInput } from '../Components/Video/Inputs/TextInput';\nimport { RenderPageInput } from '../Components/Video/Inputs/PageInput';\nimport { UploadImage } from '../Services/UploadImageService';\nimport { GenerateVideo } from '../Services/VideoServices/GenerateVideoService';\nimport { ValidateText } from '../Validators/TextValidatorService';\n\n\nexport class NewVideo extends Component {\n static displayName = NewVideo.name;\n\n constructor(props) {\n super(props);\n this.state = {\n templates: null,\n loading: true,\n redirect: false,\n templateSelected: false,\n template: null,\n templateLoaded: false,\n videoName: \"\",\n isNameValid: null,\n selectedItem: null,\n isSelectMenuDrop: false,\n inputs: null,\n validators: null,\n redirectVideos: false,\n isAllValid: false,\n };\n this.generateVideo = this.generateVideo.bind(this);\n this.openFileChooser = this.openFileChooser.bind(this);\n this.openImage = this.openImage.bind(this);\n this.handleInputChange = this.handleInputChange.bind(this);\n this.getTemplates = this.getTemplates.bind(this);\n this.removeImage = this.removeImage.bind(this);\n this.handleNameChange = this.handleNameChange.bind(this);\n this.getInputClass = this.getInputClass.bind(this);\n this.getNameInputClass = this.getNameInputClass.bind(this);\n this.checkValidators = this.checkValidators.bind(this);\n this.dropSelectMenu = this.dropSelectMenu.bind(this)\n }\n\n componentWillMount() {\n ValidateToken();\n document.title = \"New video | Personalizard\";\n if (sessionStorage.getItem(\"userData\")) {\n GetTemplatesByOrganization(this);\n }\n else {\n this.setState({ redirect: true });\n }\n }\n\n static renderInput(input, instance) {\n switch (input.type) {\n case \"place\":\n return RenderPlaceInput(input, instance);\n break;\n case \"number\":\n return RenderNumberInput(input, instance);\n break;\n case \"image\":\n return RenderImageInput(input, instance);\n break;\n case \"enum\":\n return RenderEnumInput(input, instance);\n break;\n case \"boolean\":\n return RenderBooleanInput(input, instance);\n break;\n case \"text\":\n return RenderTextInput(input, instance);\n break;\n case \"page\":\n if (input.key == \"cta\" && !instance.state.template.ctaVisible && instance.state.template.ctaUrl != \"\") return \"\";\n return RenderPageInput(input, instance);\n break;\n default:\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Upload warning!
\nError while uploading image.
\n \n \n\n
\n );\n }\n });\n }\n }\n\n static renderTemplateComponents(instance) {\n if (instance.state.template != null) {\n let btnClass = instance.state.isAllValid ? \"form-submit-button form-submit-button-active\" : \"form-submit-button\";\n let fields = instance.state.template.fields;\n return (\n \n );\n } return \"\";\n }\n\n handleNameChange(e) {\n this.setState({ videoName: e.target.value, isNameValid: ValidateText(e.target.value) });\n this.checkValidators();\n }\n\n handleInputChange(e) {\n let inputs = this.state.inputs;\n let validators = this.state.validators;\n if (e.target.type == \"place\") {\n inputs[e.target.name] = e;\n validators[e.target.name].isValid = this.state.validators[e.target.name].validate(e, validators[e.target.name].isRequired);\n }\n else if (e.target.type == \"file\") {\n if (e.target.files.length > 0) {\n inputs[e.target.name][\"name\"] = e.target.files[0].name;\n inputs[e.target.name][\"file\"] = e.target.files[0];\n inputs[e.target.name][\"isUploading\"] = true\n UploadImage(this, e.target.name, e.target.files[0]);\n } else {\n validators[e.target.name].isValid = (validators[e.target.name].isRequired ? null : true);\n }\n }\n else if (e.target.type == \"text\" || e.target.type == \"number\" || e.target.type == \"select-one\" || e.target.type == \"url\") {\n inputs[e.target.name] = e.target.value;\n if (e.target.type == \"text\" || e.target.type == \"number\" || e.target.type == \"url\")\n validators[e.target.name].isValid = this.state.validators[e.target.name].validate(e.target.value, validators[e.target.name].isRequired);\n }\n else if (e.target.type == \"radio\") {\n inputs[e.target.name] = (e.target.value == \"true\");\n }\n this.setState({ inputs: inputs, validators: validators });\n this.checkValidators();\n }\n\n dropSelectMenu() {\n this.setState(prevState => ({\n isSelectMenuDrop: !prevState.isSelectMenuDrop\n }))\n }\n\n selectItem(selectedItem) {\n this.setState({ selectedItem: selectedItem, templateSelected: true, isSelectMenuDrop: false });\n GetTemplateDetail(selectedItem.key, this)\n }\n openFileChooser(event) {\n let validators = this.state.validators;\n validators[event.currentTarget.dataset.key].isValid = false;\n this.setState({ validators: validators });\n this.checkValidators();\n $(\"#\" + event.currentTarget.dataset.id).click();\n event.preventDefault();\n }\n\n openImage(event) {\n window.open(this.state.inputs[event.currentTarget.dataset.id].href, \"_blank\");\n }\n\n removeImage(event) {\n const key = event.currentTarget.dataset.id;\n let inputs = this.state.inputs;\n inputs[key] = { name: \"No picture\", file: null };\n this.setState({ inputs });\n }\n\n checkValidators() {\n let isValid = true;\n Object.keys(this.state.validators).map((value, index, array) => {\n isValid &= this.state.validators[value].isValid;\n });\n isValid &= this.state.isNameValid;\n isValid = isValid ? true : false\n this.setState({ isAllValid: isValid });\n }\n\n generateVideo(event) {\n if (this.state.isAllValid) {\n this.setState({ loading: true });\n GenerateVideo(this);\n }\n event.preventDefault();\n }\n\n getTemplates() {\n return this.state.templates;\n }\n\n getNameInputClass() {\n if (this.state.isNameValid == null) return \"form-label-input-block\";\n if (this.state.isNameValid == true) return \"form-label-input-block valid-field\";\n else return \"form-label-input-block nonvalid-field\";\n }\n\n getInputClass(input) {\n if (this.state.validators[input].isValid == null) return \"form-label-input-block\";\n if (this.state.validators[input].isValid == true) return \"form-label-input-block valid-field\";\n else return \"form-label-input-block nonvalid-field\";\n }\n\n render() {\n if (this.state.redirect) return (Fetch warning!
\nCan´t render template input of type {input.type} - {input.label}
\n \n \nLoading...
\n
\n\n {templateContents}\n Select template
\n {this.state.templates !== null && this.state.templates.length == 0 &&No templates found
}\n {this.state.templates !== null && this.state.templates.length > 0 &&\n \n
\n }\n {this.state.isSelectMenuDrop &&\n this.dropSelectMenu()} style={{width: \"100%\", height: \"40px\", backgroundColor: \"white\", borderRadius: \"8px\", border: \"1px solid lightgrey\", cursor: \"pointer\"}}>\n
\n \n
\n \n {this.state.selectedItem === null ? \"Select from templates\" : this.state.selectedItem.name}\n
\n \n \n {this.getTemplates().map(item =>
\n }\n {this.state.template !== null &&\n this.selectItem(item)}>\n\n
)}\n \n 
\n
\n {item.email}\n {item.name}
\n \n
\n }\n \n < img height=\"50px\" src={this.state.template.thumbnail === \"about:blank\" ? image : this.state.template.thumbnail}/>\n
\n \n {this.state.template.name}
\n {this.state.template.webUrl &&\n View detail\n }\n
\n \n {this.state.template.webUrl &&\n View detail\n }\n
\n {\n place[\"target\"] = {};\n place[\"target\"][\"type\"] = \"place\";\n place[\"target\"][\"name\"] = inputInfo.key;\n instance.handleInputChange(place);\n }}\n types={['geocode']}\n required={inputInfo.required}\n />\n \n
\n );\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../../Resources/Stylesheets/General/popup.css';\n\nexport function RenderNumberInput(inputInfo, instance) {\n return (\n \n \n \n
\n );\n}","\nimport React from 'react'\nimport 'react-confirm-alert/src/react-confirm-alert.css'\nimport '../../../Resources/Stylesheets/General/popup.css' \n\nexport function RenderImageInput(inputInfo, instance) {\n return (\n \n\n \n\n
\n )\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../../Resources/Stylesheets/General/popup.css';\n\nexport function RenderBooleanInput(inputInfo, instance) {\n return (\n \n
\n\n \n\n \n \n\n
\n \n {instance.state.inputs[inputInfo.key].name === 'No picture' &&\n }\n\n {(instance.state.inputs[inputInfo.key].isUploading === true) &&\n \n }\n\n {(instance.state.inputs[inputInfo.key].name !== 'No picture' && instance.state.inputs[inputInfo.key].href) &&\n }\n\n {instance.state.inputs[inputInfo.key].href &&\n }\n
\n \n
\n );\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../../Resources/Stylesheets/General/popup.css';\n\nexport function RenderTextInput(inputInfo, instance) {\n return (\n \n \n \n
\n \n \n \n \n
\n );\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../../Resources/Stylesheets/General/popup.css';\n\nexport function RenderPageInput(inputInfo, instance) {\n return (\n \n \n \n
\n );\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function GenerateVideo(instance) {\n let video = {\n name: \"\",\n templateKey: \"\",\n fields: []\n };\n let inputs = instance.state.inputs;\n let template = instance.state.template;\n console.log(inputs)\n console.log(template)\n video.name = instance.state.videoName; \n video.templateKey = template.key; \n template.fields.map((value, index, array) => {\n if (value.type == \"boolean\" || value.type == \"number\" || value.type == \"text\" || value.type == \"page\") {\n video.fields.push({ key: value.key, value: inputs[value.key] });\n } else if (value.type == \"enum\") {\n video.fields.push({ key: value.key, value: inputs[value.key] });\n } else if (value.type == \"place\") {\n video.fields.push({ key: value.key, value: inputs[value.key][\"formatted_address\"] });\n } else if (value.type == \"image\") {\n video.fields.push({ key: value.key, value: inputs[value.key][\"href\"] });\n }\n });\n $.ajax('/api/Videos/', {\n type: 'POST',\n async: true,\n data: JSON.stringify(video),\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n instance.setState({ redirectVideos: true });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\") {\n instance.setState({ loading: false });\n let text = \"Error while sending request.\"; \n if (jqXHR.status == 599) text = \"You have exceeded the video generation limit.\"; \n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n
\n );\n }\n });\n }\n }\n });\n}","import styled from \"styled-components\"\n\nexport const IconWrapper = styled.div`\n border-radius: 100%;\n border: 2px solid #33B58F;\n height: 34px;\n width: 34px;\n text-align: center;\n line-height: 30px;\n margin-left: 4px;\n`\nexport const Column = styled.div`\n width: 50%;\n @media (max-width: 768px) {\n width: 100%;\n}\n`\n\nexport const ColumnRight = styled.div`\n width: 50%;\n text-align: right;\n @media (max-width: 768px) {\n width: 100%;\n text-align: left;\n}\n`\n\nexport const WrapContent = styled.div`\n display: flex;\n justify-content: space-between;\n @media (max-width: 768px) {\n display: block;\n}\n`\n\n\n\nexport const Icon = styled.i`\n color: #33B58F;\n`\n\nexport const SharePanel = styled.div`\n a {\n cursor: pointer;\n }\n`\n\nexport const SharePanelVideoDetail = styled.div`\ndisplay: flex;\nflex-direction: row-reverse;\n @media (max-width: 768px) {\n justify-content: flex-end;\n padding-top: 5px;\n}\n a {\n cursor: pointer;\n }\n`\n","import React, { Component } from 'react'\nimport '../../Resources/Stylesheets/Video/video.css'\nimport { GetVideoById } from '../../Services/VideoServices/FullVideoByIdService'\nimport { confirmAlert } from 'react-confirm-alert'\nimport 'react-confirm-alert/src/react-confirm-alert.css'\nimport '../../Resources/Stylesheets/General/popup.css'\nimport { RenderLoader } from '../../Components/General/Loader'\nimport { Icon, IconWrapper, Column, ColumnRight, WrapContent } from './styled'\nimport { ShareByFacebook, ShareByTwitter, ShareByLinkedIn } from \"./../MyVideos/Share/ShareByApp/index\"\nimport { CopyToClipboard } from 'react-copy-to-clipboard'\nimport { SharePanel, SharePanelVideoDetail } from './styled'\nimport { ShareByEmail } from '../../Services/VideoServices/ShareByEmailService'\nimport { ReCaptcha } from 'react-recaptcha-v3'\nimport MetaTags from 'react-meta-tags'\nimport { ValidateToken } from '../../Services/TokenValidityService'\n\nexport class Video extends Component {\n static displayName = Video.name\n\n constructor(props) {\n super(props)\n const { match: { params } } = this.props\n this.state = {\n videoId: params.videoId,\n video: null,\n loading: true,\n recaptcha: \"\"\n }\n this.copiedClipboard = this.copiedClipboard.bind(this);\n this.verifyCallback = this.verifyCallback.bind(this);\n }\n\n componentDidMount() {\n const script = document.createElement(\"script\");\n\n script.src = \"https://www.google.com/recaptcha/api.js\";\n script.async = true;\n\n document.body.appendChild(script);\n }\n\n async componentWillMount() {\n await ValidateToken();\n document.title = 'Video | Personalizard'\n if (this.state.videoId) {\n GetVideoById(this.state.videoId, this)\n }\n }\n copiedClipboard() {\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\n{text}
\n \n \n\n
\n )\n },\n })\n }\n\n verifyCallback = (recaptchaToken) => {\n this.setState({ recaptcha: recaptchaToken });\n }\n\n static sendEmail(video, id, instance) {\n video.id = id\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Video sharing
\nLink copied to clipboard.
\n \n \n\n
\n )\n },\n })\n }\n\n render() {\n let loader = this.state.loading ? RenderLoader() : ''\n let videoContent = this.state.loading ?\n\n Share video via email
\nPlease enter email address
\n \n\n \n
\n\n \n \n Loading...
: this.state.video == null ?\n Video not found
:\n \n \n \n \n \n \n \n \n \n
\n return (\n \n
\n \n \n \n {this.state.video.creatorName} | {this.state.video.organizationName}\n \n \n \n \n \n \n \n\n Video.sendEmail(this.state.video, this.state.videoId, this)}>\n \n \n \n \n \n \n
\n \n \n \n
\n {this.state.video.videoName}
\nShare
\n\n 
\n
\n {videoContent}\n\n \n
\n );\n }\n });*/\n }\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function GetOrganizationLogo(instance, id) {\n $.ajax('/api/Image/organization/logo/' + id, {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n \n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n instance.setState({ orgLogo: output, orgLoading: false });\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus === \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Fetch warning!
\nError while fetching video.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function ChangeOrganizationLogo(logo, id, instance) {\n $.ajax('/api/Image/organization/logo/' + id + '?logoUrl=' + logo, {\n type: 'POST',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n instance.setState({ orgLogo: logo, isUploading: false });\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus === \"error\")\n instance.setState({ orgLogo: null, isUploading: false });\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Fetch warning!
\nError while fetching organizations.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { ChangeOrganizationLogo } from './ChangeOrganizationLogoService';\n\nexport function UploadLogo(instance, file, id, orgLogo) {\n if (file.name.includes(\".png\")) {\n var data = new FormData();\n data.append(\"file\", file);\n $.ajax('/api/Image/logo', {\n type: 'POST',\n async: true,\n data: data,\n cache: false,\n contentType: false,\n processData: false,\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n ChangeOrganizationLogo(xhr.getResponseHeader('Location'), id, instance)\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\") {\n instance.setState({ orgLogo: null, isUploading: false });\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Fetch warning!
\nError while updating organization logo.
\n \n \n\n
\n );\n }\n });\n }\n }\n\n });\n }\n else {\n instance.setState({ orgLogo: orgLogo, isUploading: false });\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Upload warning!
\nError while uploading logo.
\n \n \n\n
\n );\n }\n });\n }\n}","\nimport React from 'react'\nimport 'react-confirm-alert/src/react-confirm-alert.css'\nimport '../../../Resources/Stylesheets/General/popup.css' \n\nexport function RenderLogoInput(instance) {\n return (\n Upload warning!
\nSelect .png image.
\n \n \n\n\n instance.handleLogoInputChange(this, e)}/>\n\n )
}\n\n \n\n
\n )\n}","import React, {useState, useEffect} from \"react\"\nimport \"./index.css\"\nconst Switch = ({id, state, updateValue}) => {\n const [switchValue, setSwitchValue] = useState(state)\n\n const onSwitchChange = (event) => {\n setSwitchValue(!switchValue)\n updateValue(id, !switchValue)\n }\n\n // TODO: Call server\n // useEffect(() => updateValue(id, switchValue), [switchValue]);\n\n return(\n \n
\n\n {!instance.state.isUploading && \n \n\n
\n \n {!instance.state.isUploading && }\n {instance.state.orgLogo &&\n }\n {(instance.state.isUploading === true) &&\n \n }\n
\n \n \n
\n )\n}\nexport default Switch","import config from './../../../config'\nconst baseUrl = config.baseUrl + '/Notification/Settings'\n\nexport const getNotificationSettings = async () => {\n const response = await fetch(baseUrl, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n \"Authorization\": \"Bearer \" + sessionStorage.getItem(\"userData\")\n },\n })\n return await response.json()\n}","import config from './../../../config'\nconst baseUrl = config.baseUrl + '/Notification/Settings'\n\nexport const updateNotificationSettings = async ({data}) => {\n await fetch(baseUrl, {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n \"Authorization\": \"Bearer \" + sessionStorage.getItem(\"userData\")\n },\n body: JSON.stringify(data)\n })\n}","import React, {useState, useEffect} from \"react\"\nimport \"../../../Components/FormComponents/Switch/index.css\"\nimport Switch from \"./../../../Components/FormComponents/Switch\"\nimport \"./index.css\"\nimport { getNotificationSettings } from '../../../Services/Notification/get-notification-settings'\nimport { updateNotificationSettings } from '../../../Services/Notification/update-notification-settings'\n\nconst NotificationForm = () => {\n const [data, setData] = useState({\n isRenderedVideoNotifOn: null,\n isRenderedVideoEmailOn: null,\n isFirstSeenVideoNotifOn: null,\n isFirstSeenVideoEmailOn: null,\n isNewTemplateNotifOn: null,\n isNewTemplateEmailOn: null,\n isTemplateQuotaEmailOn: null,\n isTemplateQuotaNotifOn: null,\n isVideoQuotaNotifOn: null,\n isVideoQuotaEmailOn: null,\n minVideoQuota: 0,\n isUserQuotaNotifOn: null,\n isUserQuotaEmailOn: null\n })\n\n const [isLoading, setIsLoading] = useState(true)\n\n useEffect(() => {\n async function fetchData() {\n const _data = await getNotificationSettings()\n setData(_data)\n }\n fetchData().then( () => setIsLoading(false));\n\n }, []);\n\n const handleValueChanged = async (id, value) => {\n setData({\n ...data,\n [id]: value\n })\n\n await updateNotificationSettings({\n data: {\n ...data,\n [id]: value\n }\n }\n )\n }\n\n return(\n \n {!isLoading &&\n \n \n
\n }\n
\n )\n}\nexport default NotificationForm","import styled from \"styled-components\"\n\nexport const Message = styled.div`\n font-size: 12px;\n color: lightgray;\n padding: 24px 0;\n`\n","import React from \"react\"\nimport {Identity} from \"../../../../Services/IdentityService\"\nimport {Message} from \"./styled\"\nimport moment from 'moment';\n\n\nconst LastLog = () => {\n const lastLogin = Identity().lastLogin.split(\",\")\n return(\n | \n | \n \n \n \n Push \n | \n \n | \n \n \n \n Mail \n | \n
|---|---|---|---|
| Rendered Video | \n\n | ||
| First View | \n\n | ||
| Added new template | \n\n | ||
| Template quota | \n\n | ||
| User quota | \n\n | ||
| Video quota | \n\n | ||
| Percentage video quota | \n\n \n | \n
\n \n \n
\n
\n )\n}\n\nexport default LogList","import React, { Component } from 'react';\nimport { Redirect, Link } from 'react-router-dom';\nimport $ from 'jquery';\nimport { ValidateToken } from '../../Services/TokenValidityService';\nimport { Identity } from '../../Services/IdentityService';\nimport { Roles, GetRole } from '../../Services/RoleService';\nimport '../../Resources/Stylesheets/Settings/settings.css';\nimport { GetUserOverview } from '../../Services/UsersServices/GetUserOverviewService';\nimport { GetOrganizationLogo } from '../../Services/OrganizationServices/GetOrganizationLogoService';\nimport { ValidateEmail } from '../../Validators/EmailValidatorService';\nimport { ValidatePassword } from '../../Validators/PasswordValidatorService';\nimport { ValidateName } from '../../Validators/NameValidatorService';\nimport { EditUser } from '../../Services/UsersServices/EditUserService';\nimport { UploadLogo } from '../../Services/OrganizationServices/UploadLogoService';\nimport { ChangeOrganizationLogo } from '../../Services/OrganizationServices/ChangeOrganizationLogoService';\nimport { DeleteYourself } from '../../Services/UsersServices/DeleteYourselfService';\nimport { RenderLogoInput } from './Components/LogoInput';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { RenderLoader } from '../../Components/General/Loader';\n\n// Componenets\nimport NotificationForm from './../Settings/NotificationForm'\nimport SingleLog from \"./../Settings/Logs/LastLog\"\nimport LogList from './../Settings/Logs/LogList'\n\nexport class Settings extends Component {\n static displayName = Settings.name;\n\n constructor(props) {\n super(props);\n this.state = {\n identity: null,\n redirect: false,\n loading: true, \n orgLoading: true,\n editUserValidators: {\n name: true,\n email: true,\n password: null,\n passwordAgain: null\n },\n isEditValid: false,\n userOverview: null,\n orgLogo: null,\n isUploading: false\n };\n this.handleEditUserInputChange = this.handleEditUserInputChange.bind(this);\n this.checkEditValidators = this.checkEditValidators.bind(this);\n this.getEditInputClass = this.getEditInputClass.bind(this);\n this.getEditBtnClass = this.getEditBtnClass.bind(this);\n this.editUser = this.editUser.bind(this);\n this.deleteUser = this.deleteUser.bind(this);\n }\n\n componentWillMount() {\n ValidateToken();\n document.title = \"Settings | Personalizard\";\n if (sessionStorage.getItem(\"userData\")) {\n const identity = Identity();\n GetUserOverview(this);\n if(GetRole(identity.role) === Roles.OrgAdmin)\n {\n GetOrganizationLogo(this, identity.organizationId);\n }\n this.setState({ identity: identity });\n }\n else {\n this.setState({ redirect: true });\n }\n }\n\n handleEditUserInputChange(event) {\n let userVals = this.state.userOverview;\n let validatorsVals = this.state.editUserValidators;\n switch (event.target.name) {\n case \"name\":\n validatorsVals.name = ValidateName(event.target.value);\n this.setState({ editUserValidators: validatorsVals });\n break;\n case \"email\":\n validatorsVals.email = ValidateEmail(event.target.value);\n this.setState({ editUserValidators: validatorsVals });\n break;\n case \"oldPassword\":\n validatorsVals.oldPassword = ValidatePassword(event.target.value);\n this.setState({ editUserValidators: validatorsVals });\n break;\n case \"password\":\n validatorsVals.password = ValidatePassword(event.target.value);\n this.setState({ editUserValidators: validatorsVals });\n break;\n case \"passwordAgain\":\n validatorsVals.passwordAgain = ValidatePassword(event.target.value);\n this.setState({ editUserValidators: validatorsVals });\n break;\n }\n userVals[event.target.name] = event.target.value;\n this.setState({ userOverview: userVals });\n this.checkEditValidators();\n }\n\n checkEditValidators() {\n const validators = this.state.editUserValidators;\n if (GetRole(this.state.identity.role) === Roles.User) {\n if (validators.name == true && validators.email == true && ((validators.password == true && validators.passwordAgain == true && validators.oldPassword == true) || (validators.password == null && validators.passwordAgain == null && validators.oldPassword == null)))\n if (this.state.userOverview.password == this.state.userOverview.passwordAgain) this.setState({ isEditValid: true });\n else this.setState({ isEditValid: false });\n else this.setState({ isEditValid: false });\n }\n else {\n if (validators.email == true && ((validators.password == true && validators.passwordAgain == true && validators.oldPassword == true) || (validators.password == null && validators.passwordAgain == null && validators.oldPassword == null)))\n if (this.state.userOverview.password == this.state.userOverview.passwordAgain) this.setState({ isEditValid: true });\n else this.setState({ isEditValid: false });\n else this.setState({ isEditValid: false });\n }\n }\n\n openFileChooser(event) {\n $(\"#\" + event.currentTarget.dataset.id).click();\n event.preventDefault();\n }\n\n handleLogoInputChange(instance, e) {\n if (e.target.files.length > 0) {\n let oldOrgLogo = this.state.orgLogo;\n this.setState({ isUploading: true, orgLogo: e.target.files[0].name });\n UploadLogo(this, e.target.files[0], this.state.identity.organizationId, oldOrgLogo);\n }\n }\n removeImage(instance, e) {\n ChangeOrganizationLogo(\"\", instance.state.identity.organizationId, instance);\n } \n\n getEditInputClass(name) {\n if (this.state.editUserValidators[name] == null) return (\"form-label-input-block\");\n else if (this.state.editUserValidators[name] == false) return (\"form-label-input-block nonvalid-field\");\n else return (\"form-label-input-block valid-field\");\n }\n\n getEditBtnClass() {\n if (this.state.isEditValid) return (\"form-submit-button form-submit-button-active\");\n else return (\"form-submit-button\");\n }\n\n editUser(event) {\n if (this.state.isEditValid) {\n let userVals = this.state.userOverview;\n userVals.id = this.state.identity.userId;\n EditUser(userVals, this, false, false, true);\n this.setState({\n isEditValid: false, editUserValidators: {\n name: true,\n email: true,\n oldPassword: null,\n password: null,\n passwordAgain: null\n } \n });\n }\n event.preventDefault();\n }\n\n renderFormWithName() {\n return (\n \n );\n }\n\n renderFormWithoutName() {\n return (\n \n );\n }\n\n renderRoleInfo() {\n if (GetRole(this.state.identity.role) === Roles.SysAdmin) return (User Login history
\n| \n DATE\n | \n\n USER\n | \n\n LOCATION\n | \n\n | \n \n\n | \n\n | \n
|---|
You are God of Personalizard
);\n else if (GetRole(this.state.identity.role) === Roles.OrgAdmin) return (You are a administrator of {this.state.identity.organizationName}
);\n else return (You are a member of {this.state.identity.organizationName}
);\n }\n\n renderDeleteButton() {\n return (I don´t want to be a user of Personalizard anymore.
);\n }\n\n renderOrganizationSetting() {\n return (\n\n
\n );\n }\n\n deleteUser(event) {\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Edit organization
\n {RenderLogoInput(this)}\n\n
\n );\n }\n });\n event.preventDefault();\n }\n\n render() {\n if (this.state.redirect) return (Delete warning!
\nThis action is permanent. Would you like to proceed?
\n \n \n \n\n
\n {orgSettingsForm}\n {deleteAccount}\n Edit myself
\n {this.renderRoleInfo()}\n {settingsForm}\n\n
}\n \n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../Resources/Stylesheets/General/popup.css';\n\nexport function ValidateTemplate(key, added, instance, stateKey, callCheck = false) {\n if (key.length == 0) return null;\n else if (key.length > 0) { \n $.ajax('/api/Templates/overview?key=' + key, {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n let checkDuplicates = added.filter((value, index, array) => { return value.id == output.id; });\n let state = instance.state[stateKey];\n state.key = (checkDuplicates.length == 0);\n if (instance.state.newOrganization) {\n let newOrg = instance.state.newOrganization;\n newOrg.ctaAvailable = output.ctaAvailable;\n instance.setState({ [stateKey]: state, newOrganization: newOrg });\n }\n else if (instance.state.newTemplate) {\n let newTem = instance.state.newTemplate;\n newTem.ctaAvailable = output.ctaAvailable;\n instance.setState({ [stateKey]: state, newTemplate: newTem });\n }\n else {\n instance.setState({ [stateKey]: state });\n }\n if (callCheck) instance.checkAddValidators();\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\") {\n let state = instance.state[stateKey];\n state.key = false;\n instance.setState({ [stateKey]: state });\n if (callCheck) instance.checkAddValidators();\n }\n }\n });\n }\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function GetTemplateOverview(key) {\n let obj = null;\n $.ajax('/api/Templates/overview?key=' + key, {\n type: 'GET',\n async: false,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n obj = output;\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n }\n }); \n return obj;\n}","import config from './../../../config'\nconst baseUrl = config.baseUrl + '/Templates'\n\nexport const editTemplate = async ({data}) => {\n await fetch(baseUrl, {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n \"Authorization\": \"Bearer \" + sessionStorage.getItem(\"userData\")\n },\n body: JSON.stringify(data)\n })\n}","import React, { Component } from 'react'\nimport { Redirect } from 'react-router-dom'\nimport { ValidateToken } from '../Services/TokenValidityService'\nimport '../Resources/Stylesheets/MyTemplates/mytemplates.css'\nimport $ from 'jquery'\nimport moment from 'moment'\nimport { AddNewTemplate } from '../Services/TemplatesServices/AddTemplateService'\nimport { GetTemplatesByOrganization } from '../Services/TemplatesServices/TemplatesByOrganizationService'\nimport { ValidateTemplate } from '../Validators/TemplateValidatorService'\nimport { DeleteTemplateById } from '../Services/TemplatesServices/DeleteTemplateService'\nimport { confirmAlert } from 'react-confirm-alert'\nimport 'react-confirm-alert/src/react-confirm-alert.css'\nimport { GetTemplateOverview } from '../Services/TemplatesServices/GetTemplateOverviewService'\nimport { RenderLoader } from '../Components/General/Loader'\nimport * as AComplete from 'react-autocomplete'\nimport { GetUsersByOrganization } from '../Services/UsersServices/UsersByOrganizationService'\nimport { editTemplate } from '../Services/TemplatesServices/edit-template'\nimport Switch from \"./../Components/FormComponents/Switch\"\nimport { Identity } from '../Services/IdentityService'\nimport { ValidateUrl } from '../Validators/UrlValidatorService'\nimport { GetRole, Roles } from '../Services/RoleService'\nimport NoAuthenticated from \"./NoAuthenticated\"\nimport videoPreview from \"./../Resources/Images/video-preview.png\"\n\nexport class MyTemplates extends Component {\n static displayName = MyTemplates.name\n\n constructor(props) {\n super(props)\n this.state = {\n identity: null,\n isAuthenticated: false,\n redirect: false,\n loading: true,\n templates: [],\n isValid: false,\n isEditValid: false,\n userSelected: false,\n user: null,\n userLoaded: false,\n users: [],\n success: 2,\n editSuccess: 2,\n usersEdited: [],\n newTemplate: {\n name: '',\n webUrl: '',\n ctaUrl: '',\n ctaVisible: '',\n key: '',\n removedUsers: [],\n\n },\n addTemplateValidators: {\n key: null,\n webUrl: null,\n ctaUrl: null,\n name: null,\n\n },\n editTemplateValidators: {\n ctaUrl: null,\n webUrl: null,\n removedUsers: null,\n },\n isAddValid: false,\n editTemplate: {\n isEdited: false,\n templateId: null,\n },\n templateEditing: {\n template: null,\n key: null,\n name: null,\n webUrl: null,\n ctaUrl: null,\n ctaVisible: null,\n removedUsers: [],\n },\n }\n this.handleAddTemplateInputChange = this.handleAddTemplateInputChange.bind(this)\n this.addTemplate = this.addTemplate.bind(this)\n this.deleteTemplate = this.deleteTemplate.bind(this)\n this.toggleAddTemplate = this.toggleAddTemplate.bind(this)\n this.getAddBtnClass = this.getAddBtnClass.bind(this)\n this.getEditBtnClass = this.getEditBtnClass.bind(this)\n this.checkAddValidators = this.checkAddValidators.bind(this)\n this.getAddInputClass = this.getAddInputClass.bind(this)\n this.handleEditTemplate = this.handleEditTemplate.bind(this)\n this.getEditBtnClass = this.getEditBtnClass.bind(this)\n this.addRestrictedUser = this.addRestrictedUser.bind(this)\n this.closeAllEdits = this.closeAllEdits.bind(this)\n this.handleCtaValueChanged = this.handleCtaValueChanged.bind(this)\n this.handleCtaEditValueChanged = this.handleCtaEditValueChanged.bind(this)\n }\n\n componentWillMount() {\n ValidateToken()\n document.title = 'My templates | Personalizard'\n if (sessionStorage.getItem('userData')) {\n const _identity = Identity()\n this.setState({ identity: _identity })\n if (GetRole(_identity.role !== Roles.User)) {\n GetTemplatesByOrganization(this)\n GetUsersByOrganization(this)\n this.setState({\n isAuthenticated: true\n })\n } else {\n this.setState({isAuthenticated: false, loading: false})\n }\n } else {\n this.setState({ redirect: true })\n }\n }\n\n handleAddTemplateInputChange(event) {\n let templateVals = this.state.newTemplate\n let addTemplateValidators = this.state.addTemplateValidators\n switch (event.target.name) {\n case 'key':\n ValidateTemplate(event.target.value, this.state.templates, this, 'addTemplateValidators', true)\n break\n case 'webUrl':\n addTemplateValidators.webUrl = ValidateUrl(event.target.value, true)\n this.setState({ addTemplateValidators: addTemplateValidators })\n break\n case 'ctaUrl':\n addTemplateValidators.ctaUrl = ValidateUrl(event.target.value, true)\n this.setState({ addTemplateValidators: addTemplateValidators })\n break\n }\n templateVals[event.target.name] = event.target.value\n this.setState({ newTemplate: templateVals })\n this.checkAddValidators()\n }\n\n closeAllEdits() {\n $('.tempEdit').each(function() {\n $(this).hide()\n })\n this.setState({\n editTemplate: {\n isEdited: false,\n templateId: null,\n },\n })\n $('.active-item').each(function() {\n $(this).removeClass('active-item')\n })\n }\n\n editedSuccess() {\n setTimeout(() => {\n this.setState({\n editSuccess: 2,\n })\n }, 2000)\n return (\n Process warning!
\nError while deleting user.
\n \n \nSaved
\n )\n }\n\n savedSuccess() {\n setTimeout(() => {\n this.setState({\n success: 2,\n })\n }, 2000)\n return (\n Saved
\n )\n }\n\n resolveButtonLabel() {\n switch (this.state.success) {\n case 0:\n return 'Saving...'\n case 1:\n return this.savedSuccess()\n case 2:\n return 'Add Template'\n default:\n break\n\n }\n }\n\n\n resolveEditButtonLabel() {\n\n switch (this.state.editSuccess) {\n case 0:\n return 'Saving...'\n case 1:\n return this.editedSuccess()\n case 2:\n return 'Edit Template'\n default:\n break\n\n }\n }\n\n addTemplate(event) {\n if (this.state.isAddValid) {\n let template = GetTemplateOverview(this.state.newTemplate.key)\n delete template.addedDate\n delete template.thumbnail\n template.webUrl = this.state.newTemplate.webUrl\n template.name = this.state.newTemplate.name\n template.ctaUrl = this.state.newTemplate.ctaUrl\n template.ctaVisible = this.state.newTemplate.ctaVisible === \"true\"\n template.excludedUsers = this.state.newTemplate.removedUsers ? this.state.newTemplate.removedUsers.map(user => user.id) : []\n\n this.setState({\n success: 0,\n })\n AddNewTemplate(template, this)\n this.setState({\n usersEdited: this.state.users,\n newTemplate: {\n key: '',\n removedUsers: [],\n name: '',\n webUrl: '',\n },\n templateEditing: {\n removedUsers: [],\n },\n addTemplateValidators: {\n key: null,\n webUrl: null,\n name: null,\n },\n isAddValid: false,\n })\n }\n event.preventDefault()\n }\n\n getAddInputClass(name) {\n if (this.state.addTemplateValidators[name] == null) return ('form-label-input-block')\n else if (this.state.addTemplateValidators[name] == false) return ('form-label-input-block nonvalid-field')\n else return ('form-label-input-block valid-field')\n }\n\n getAddBtnClass() {\n if (this.state.isAddValid) return ('form-submit-button form-submit-button-active')\n if (this.state.success === 1) return ('form-submit-button-success-fetch')\n else return ('form-submit-button')\n }\n\n getEditBtnClass() {\n if (this.state.isEditValid) return ('form-submit-button form-submit-button-active')\n if (this.state.editSuccess === parseInt(1)) return ('form-submit-button-success-fetch')\n else return ('form-submit-button')\n }\n\n checkAddValidators() {\n const validators = this.state.addTemplateValidators\n if (validators.key == true && validators.webUrl === true || validators.webUrl === null) {\n this.setState({ isAddValid: true })\n } else this.setState({ isAddValid: false })\n }\n\n checkEditValidators() {\n const validators = this.state.editTemplateValidators\n if (validators.webUrl === true || validators.webUrl === null && this.state.templateEditing.removedUsers.length >= 0) {\n this.setState({ isEditValid: true })\n } else this.setState({ isEditValid: false })\n }\n\n toggleEdit(event, template, instance) {\n const active = $(event.currentTarget).hasClass('active-item')\n this.closeAllEdits()\n if (active) $(event.currentTarget).removeClass('active-item')\n else $(event.currentTarget).addClass('active-item')\n if (!active) {\n GetUsersByOrganization(this)\n instance.setState(prevState => ({\n editTemplate: {\n isEdited: !prevState.isEdited,\n templateId: template.id,\n },\n usersEdited: prevState.users.filter(user => template.excludedUsers.every(exc => exc.id !== user.id)).filter(user => user.id != this.state.identity.userId),\n templateEditing: {\n template: template,\n name: template.name,\n webUrl: template.webUrl,\n ctaUrl: template.ctaUrl,\n ctaVisible: template.ctaVisible,\n key: template.key,\n removedUsers: template.excludedUsers,\n },\n user: null,\n }))\n }\n\n }\n\n\n handleEditTemplate = (event) => {\n\n let editTemplateValidators = this.state.editTemplateValidators\n switch (event.target.name) {\n case 'webUrl':\n editTemplateValidators.webUrl = ValidateUrl(event.target.value, true)\n this.setState({ addTemplateValidators: editTemplateValidators })\n break\n case 'ctaUrl':\n editTemplateValidators.ctaUrl = ValidateUrl(event.target.value, true)\n this.setState({ addTemplateValidators: editTemplateValidators })\n break\n }\n\n (this.state.templateEditing.name !== null || this.state.editTemplate.name !== '') ? this.setState({ isValid: true }) : this.setState({ isValid: false })\n this.setState({\n templateEditing: {\n ...this.state.templateEditing,\n template: {\n ...this.state.templateEditing.template,\n [event.target.id]: event.target.value,\n },\n },\n })\n this.checkEditValidators()\n }\n\n addRestrictedUser = (event) => {\n event.preventDefault()\n if (this.state.user !== null) {\n this.setState(prevState => ({\n newTemplate: {\n ...prevState.newTemplate,\n removedUsers: [...prevState.newTemplate.removedUsers, prevState.user],\n },\n search: '',\n user: null,\n usersEdited: prevState.usersEdited.filter(function(person) {\n return person.id !== prevState.user.id\n }),\n isValid: true,\n }))\n }\n }\n\n addRestrictedUserEdit = (event) => {\n event.preventDefault()\n if (this.state.user !== null) {\n this.setState(prevState => ({\n templateEditing: {\n ...prevState.templateEditing,\n removedUsers: [...prevState.templateEditing.removedUsers, prevState.user],\n },\n search: '',\n user: null,\n usersEdited: prevState.usersEdited.filter(function(person) {\n return person.id !== prevState.user.id\n }),\n isEditValid: true,\n }))\n }\n }\n\n handleEditSubmit = (event) => {\n this.setState({\n editSuccess: 0,\n isEditValid: false,\n })\n this.setState({\n addTemplateValidators: {\n webUrl: null,\n },\n })\n const { templateEditing } = this.state\n templateEditing.template.excludedUsers = templateEditing.removedUsers\n\n const newTemplates = this.state.templates.map(u => {\n if (u.id === templateEditing.template.id) {\n return {\n ...templateEditing.template,\n }\n }\n return u\n })\n\n this.setState({\n templates: newTemplates,\n })\n\n editTemplate({\n data: {\n ...templateEditing.template,\n excludedUsers: this.state.templateEditing.removedUsers ? templateEditing.removedUsers.map(user => user.id) : [],\n },\n }).then(() => this.setState({\n editSuccess: 1,\n }))\n event.preventDefault()\n }\n\n removeUser = (userId) => {\n this.setState({\n usersEdited: [...this.state.usersEdited, ...this.state.users.filter(user => user.id === userId)],\n newTemplate: {\n ...this.state.newTemplate,\n removedUsers: [...this.state.newTemplate.removedUsers.filter(user => user.id !== userId)],\n },\n })\n }\n\n removeUserEdit = (userId) => {\n\n this.setState({\n usersEdited: [...this.state.usersEdited, ...this.state.users.filter(user => user.id === userId)],\n templateEditing: {\n ...this.state.templateEditing,\n removedUsers: [...this.state.templateEditing.removedUsers.filter(user => user.id !== userId)],\n },\n })\n this.checkEditValidators()\n }\n\n onAddChange = (event) => {\n this.setState({\n [event.target.id]: event.target.value,\n })\n }\n\n deleteTemplate(event) {\n let params = event.currentTarget.dataset\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n
\n )\n },\n })\n event.preventDefault()\n }\n\n static renderSingleTemplate(template, instance) {\n return (\n Delete warning!
\nThis action is permanent. Would you like to proceed?
\n \n \n \n\n
\n )\n }\n\n\n handleCtaValueChanged(id, val) {\n let newTemplate = this.state.newTemplate;\n newTemplate[id] = val;\n this.setState({ newTemplate: newTemplate });\n }\n\n handleCtaEditValueChanged(id, val) {\n let template = this.state.templateEditing;\n template[id] = val;\n template.template[id] = val;\n this.setState({ templateEditing: template });\n this.checkEditValidators()\n }\n\n static renderTemplates(templates = [], instance) {\n if (templates.length <= 0)\n return (\n \n 
\n
\n {(instance.state.editTemplate.isEdited && instance.state.editTemplate.templateId === template.id) &&\n \n
\n \n \n {template.name}\n
\n\n
\n \n \n {template.key}\n
\n \n \n \n Added: {moment(template.addedDate).format('YYYY/M/D')}\n {template.webUrl &&\n View Detail\n }\n
\n \n
\n }\n \n \n
\n \n
\n )\n else\n return (\n No templates found
\n \n {templates.map(template => MyTemplates.renderSingleTemplate(template, instance))}\n
\n )\n }\n\n toggleAddTemplate() {\n this.setState(prevState => ({\n success: 2,\n usersEdited: prevState.users.filter(user => user.id != this.state.identity.userId),\n }))\n if ($('.page-top-panel-body').is(':hidden')) $('.page-top-panel-header i').css({\n transform: 'rotateZ(180deg)',\n bottom: '2.5px',\n })\n else $('.page-top-panel-header i').css({ transform: 'rotateZ(0deg)', bottom: '0' })\n $('.page-top-panel-body').toggle()\n }\n\n render() {\n if (this.state.redirect) return (\n
\n : MyTemplates.renderTemplates(this.state.templates, this)\n\n return (\n Loading...
\n \n
\n \n
\n Add template
\n \n\n
\n\n \n \n \n
\n\n {this.state.newTemplate.ctaAvailable && \n \n \n \n
}\n\n {this.state.newTemplate.ctaAvailable && URL for Click-to-action
\n \n \n
}\n\n \n
\n {this.state.newTemplate.removedUsers &&\n \n \n
\n \n\n item.name}\n items={this.state.usersEdited}\n renderItem={(item, isHighlighted) =>\n
\n \n
\n }\n value={this.state.search}\n onChange={(event, search) => this.setState({\n search,\n template: null,\n userLoaded: false,\n userSelected: false,\n })}\n onSelect={(search, item) => {\n this.setState({ search, userSelected: true })\n this.setState({ user: item })\n }}\n />\n\n \n \n
\n {item.name}
\n {item.email}
\n \n
\n }\n \n \n \n \n {this.state.newTemplate.removedUsers.map(user =>\n
\n \n \n {user.name}
)\n }\n My templates
\n {templateContents}\n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function DeleteTemplateById(id, instance) {\n $.ajax('/api/Templates/' + id, {\n type: 'DELETE',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n let filtered = instance.state.templates.filter((value, index, array) => { return value.id != id });\n instance.setState({ templates: filtered });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\nError while adding template.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function GetOrganizationsAfterEdit(instance) {\n $.ajax('/api/Organizations', {\n type: 'GET',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n instance.setState({ organizations: output, success: 1 });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n instance.setState({ success: 2 });\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\nError while deleting template.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react'\nimport { Redirect } from 'react-router-dom'\nimport $ from 'jquery'\nimport { ValidateToken } from '../Services/TokenValidityService'\nimport '../Resources/Stylesheets/Organizations/organizations.css'\nimport { AddNewOrganization } from '../Services/OrganizationServices/AddOrganizationService'\nimport { DeleteOrganizationById } from '../Services/OrganizationServices/DeleteOrganizationByIdService'\nimport { GetOrganizations } from '../Services/OrganizationServices/GetOrganizationsService'\nimport { EditOrganization } from '../Services/OrganizationServices/EditOrganizationService'\nimport { GetOrganizationLogo } from '../Services/OrganizationServices/GetOrganizationLogoService';\nimport { Identity } from '../Services/IdentityService'\nimport moment from 'moment'\nimport { UploadLogo } from './../Services/OrganizationServices/UploadLogoService';\nimport { ChangeOrganizationLogo } from './../Services/OrganizationServices/ChangeOrganizationLogoService';\nimport { confirmAlert } from 'react-confirm-alert'\nimport { ValidateEmail } from '../Validators/EmailValidatorService'\nimport { ValidatePassword } from '../Validators/PasswordValidatorService'\nimport { ValidateName } from '../Validators/NameValidatorService'\nimport { ValidateTemplate } from '../Validators/TemplateValidatorService'\nimport { GetTemplateOverview } from '../Services/TemplatesServices/GetTemplateOverviewService'\nimport { RenderLoader } from '../Components/General/Loader'\nimport { ValidateNumber } from '../Validators/NumberValidatorService'\nimport { ValidateUrl } from '../Validators/UrlValidatorService'\nimport { GetRole, Roles } from '../Services/RoleService'\nimport NoAuthenticated from './NoAuthenticated'\nimport Switch from \"./../Components/FormComponents/Switch\"\nimport { RenderLogoInput } from './Settings/Components/LogoInput'\n\nexport class Organizations extends Component {\n static displayName = Organizations.name\n\n constructor(props) {\n super(props)\n this.state = {\n success: 2,\n redirect: false,\n newOrganization: {\n name: '',\n orgAdminEmail: '',\n password: '',\n key: '',\n webUrl: '',\n ctaVisible: false,\n ctaUrl: '',\n ctaAvailable: false,\n templateName: '',\n videoMinutesLimit: 0,\n usersCountLimit: 0,\n templatesCountLimit: 0,\n templates: [],\n },\n organizations: [],\n addOrgValidators: {\n name: null,\n orgAdminEmail: null,\n password: null,\n videoMinutesLimit: true,\n templatesCountLimit: true,\n usersCountLimit: true,\n key: null,\n webUrl: null,\n ctaUrl: null\n },\n loading: true,\n isAddValid: false,\n nameError: false,\n editOrganization: null,\n isEditValid: false,\n editOrgValidators: {\n name: null,\n orgAdminEmail: null,\n password: null,\n videoMinutesLimit: null,\n templatesCountLimit: null,\n usersCountLimit: null,\n key: null,\n },\n isUploading: false,\n orgLoading: true,\n orgLogo: null\n }\n this.handleAddOrgInputChange = this.handleAddOrgInputChange.bind(this)\n this.handleEditOrgInputChange = this.handleEditOrgInputChange.bind(this)\n this.addOrganization = this.addOrganization.bind(this)\n this.toggleAddOrganization = this.toggleAddOrganization.bind(this)\n this.toggleEditOrg = this.toggleEditOrg.bind(this)\n this.deleteOrganization = this.deleteOrganization.bind(this)\n this.getAddInputClass = this.getAddInputClass.bind(this)\n this.getEditInputClass = this.getEditInputClass.bind(this)\n this.checkAddValidators = this.checkAddValidators.bind(this)\n this.checkEditValidators = this.checkEditValidators.bind(this)\n this.getAddBtnClass = this.getAddBtnClass.bind(this)\n this.getEditBtnClass = this.getEditBtnClass.bind(this)\n this.orgAddNewKey = this.orgAddNewKey.bind(this)\n this.orgEditNewKey = this.orgEditNewKey.bind(this)\n this.closeAllEdits = this.closeAllEdits.bind(this)\n this.editOrg = this.editOrg.bind(this)\n this.orgAddDeleteKey = this.orgAddDeleteKey.bind(this)\n this.orgEditDeleteKey = this.orgEditDeleteKey.bind(this)\n this.handleCtaValueChanged = this.handleCtaValueChanged.bind(this)\n }\n\n openFileChooser(event) {\n $(\"#\" + event.currentTarget.dataset.id).click();\n event.preventDefault();\n }\n\n handleLogoInputChange(instance, e) {\n if (e.target.files.length > 0) {\n var oldOrgLogo = this.state.orgLogo;\n this.setState({ isUploading: true, orgLogo: e.target.files[0].name });\n UploadLogo(this, e.target.files[0], this.state.editOrganization.id, oldOrgLogo);\n }\n }\n removeImage(instance, e) {\n ChangeOrganizationLogo(\"\", this.state.editOrganization.id, this);\n } \n\n componentWillMount() {\n ValidateToken()\n document.title = 'Organizations | Personalizard'\n const _identity = Identity()\n if (sessionStorage.getItem('userData')) {\n if (GetRole(_identity.role !== Roles.User && GetRole(_identity.role !== Roles.OrgAdmin))) {\n GetOrganizations(this)\n this.setState({\n identity: _identity, addOrgValidators: {\n name: null,\n orgAdminEmail: null,\n password: null,\n videoMinutesLimit: true,\n key: null,\n }, AddNewOrganization: {\n name: '',\n orgAdminEmail: '',\n password: '',\n videoMinutesLimit: 0,\n usersCountLimit: 0,\n templatesCountLimit: 0,\n templates: [],\n },\n isAuthenticated: true,\n })\n } else {\n this.setState({ isAuthenticated: false, loading: false })\n }\n } else {\n this.setState({ redirect: true })\n }\n }\n\n validateNameByDuplicated(name) {\n let orgsArray = this.state.organizations\n for (let i = 0; i < orgsArray.length; i++) {\n if (orgsArray[i].name === name) {\n this.setState({\n nameError: true,\n })\n return false\n } else {\n this.setState({\n nameError: false,\n })\n return true\n }\n }\n return true\n }\n\n handleAddOrgInputChange(event) {\n let orgVals = this.state.newOrganization\n let validatorsVals = this.state.addOrgValidators\n switch (event.target.name) {\n case 'name':\n validatorsVals.name = ValidateName(event.target.value)\n validatorsVals.name = this.validateNameByDuplicated(event.target.value)\n this.setState({ addOrgValidators: validatorsVals })\n break\n case 'orgAdminEmail':\n validatorsVals.orgAdminEmail = ValidateEmail(event.target.value)\n this.setState({ addOrgValidators: validatorsVals })\n break\n case 'password':\n validatorsVals.password = ValidatePassword(event.target.value)\n this.setState({ addOrgValidators: validatorsVals })\n break\n case 'videoMinutesLimit':\n validatorsVals.videoMinutesLimit = ValidateNumber(event.target.value)\n this.setState({ addOrgValidators: validatorsVals })\n break\n case 'templatesCountLimit':\n validatorsVals.templatesCountLimit = ValidateNumber(event.target.value)\n this.setState({ addOrgValidators: validatorsVals })\n break\n case 'usersCountLimit':\n validatorsVals.usersCountLimit = ValidateNumber(event.target.value)\n this.setState({ addOrgValidators: validatorsVals })\n break\n case 'key':\n ValidateTemplate(event.target.value, this.state.newOrganization.templates, this, 'addOrgValidators')\n this.setState({ addOrgValidators: validatorsVals })\n break\n case 'webUrl':\n validatorsVals.webUrl = ValidateUrl(event.target.value, true)\n this.setState({ addOrgValidators: validatorsVals })\n break\n case 'ctaUrl':\n validatorsVals.ctaUrl = ValidateUrl(event.target.value, true)\n this.setState({ addOrgValidators: validatorsVals })\n break\n\n }\n orgVals[event.target.name] = event.target.value\n this.setState({ newOrganization: orgVals })\n this.checkAddValidators()\n }\n\n handleEditOrgInputChange(event) {\n let orgVals = this.state.editOrganization\n let validatorsVals = this.state.editOrgValidators\n switch (event.target.name) {\n case 'name':\n validatorsVals.name = ValidateName(event.target.value)\n this.setState({ editOrgValidators: validatorsVals })\n break\n case 'orgAdminEmail':\n validatorsVals.orgAdminEmail = ValidateEmail(event.target.value)\n this.setState({ editOrgValidators: validatorsVals })\n break\n case 'password':\n validatorsVals.password = ValidatePassword(event.target.value)\n this.setState({ editOrgValidators: validatorsVals })\n break\n case 'videoMinutesLimit':\n validatorsVals.videoMinutesLimit = ValidateNumber(event.target.value)\n this.setState({ editOrgValidators: validatorsVals })\n break\n case 'templatesCountLimit':\n validatorsVals.templatesCountLimit = ValidateNumber(event.target.value)\n this.setState({ editOrgValidators: validatorsVals })\n break\n case 'usersCountLimit':\n validatorsVals.usersCountLimit = ValidateNumber(event.target.value)\n this.setState({ editOrgValidators: validatorsVals })\n break\n case 'key':\n ValidateTemplate(event.target.value, this.state.editOrganization.templates, this, 'editOrgValidators')\n this.setState({ editOrgValidators: validatorsVals })\n break\n }\n orgVals[event.target.name] = event.target.value\n this.setState({ editOrganization: orgVals })\n this.checkEditValidators()\n }\n\n orgAddNewKey(event) {\n if (this.state.addOrgValidators.key === true) {\n let newOrgVals = this.state.newOrganization\n let orgValidators = this.state.addOrgValidators\n let template = GetTemplateOverview(newOrgVals.key)\n template.webUrl = this.state.newOrganization.webUrl\n template.name = this.state.newOrganization.templateName\n template.ctaUrl = this.state.newOrganization.ctaUrl\n template.ctaVisible = this.state.newOrganization.ctaVisible\n newOrgVals.templates.push(template)\n newOrgVals.key = ''\n newOrgVals.webUrl = ''\n newOrgVals.templateName = ''\n newOrgVals.ctaVisible = false\n newOrgVals.ctaUrl = ''\n orgValidators.key = null\n this.setState({ newOrganization: newOrgVals, addOrgValidators: orgValidators })\n }\n event.preventDefault()\n }\n\n orgAddDeleteKey(event) {\n const keyId = event.currentTarget.dataset.id\n let newOrg = this.state.newOrganization\n newOrg.templates = newOrg.templates.filter((value, index, array) => {\n return value.id != keyId\n })\n this.setState({ newOrganization: newOrg })\n }\n\n orgEditDeleteKey(event) {\n const keyId = event.currentTarget.dataset.id\n let editOrg = this.state.editOrganization\n editOrg.templates = editOrg.templates.filter((value, index, array) => {\n return value.id != keyId\n })\n this.checkEditValidators()\n this.setState({ editOrganization: editOrg })\n }\n\n orgEditNewKey(event) {\n if (this.state.editOrgValidators.key == true) {\n let editOrgVals = this.state.editOrganization\n let orgValidators = this.state.editOrgValidators\n let template = GetTemplateOverview(editOrgVals.key)\n editOrgVals.templates.push(template)\n editOrgVals.key = ''\n orgValidators.key = null\n this.setState({ editOrganization: editOrgVals, editOrgValidators: orgValidators })\n }\n event.preventDefault()\n }\n\n savedSuccess() {\n setTimeout(() => {\n this.setState({\n success: 2,\n })\n }, 2000)\n return (\n Fetch warning!
\nError while fetching organizations.
\n \n \nSaved
\n )\n }\n\n resolveButtonLabel() {\n\n switch (this.state.success) {\n case 0:\n return 'Saving...'\n case 1:\n return this.savedSuccess()\n case 2:\n return 'Add organization'\n default:\n break\n\n }\n }\n\n\n addOrganization(event) {\n if (this.state.isAddValid) {\n let orgVals = this.state.newOrganization\n delete orgVals.key\n delete orgVals.templateName\n this.setState({\n success: 0,\n })\n AddNewOrganization(orgVals, this)\n this.setState({\n newOrganization: {\n name: '',\n orgAdminEmail: '',\n password: '',\n key: '',\n webUrl: '',\n ctaUrl: '',\n ctaVisible: false,\n ctaAvailable: false,\n videoMinutesLimit: 0,\n templatesCountLimit: 0,\n usersCountLimit: 0,\n templates: [],\n }, isAddValid: false, addOrgValidators: {\n name: null,\n orgAdminEmail: null,\n password: null,\n videoMinutesLimit: true,\n templatesCountLimit: true,\n usersCountLimit: true,\n key: null,\n },\n })\n }\n event.preventDefault()\n }\n\n editOrg(event) {\n if (this.state.isEditValid) {\n let orgVals = this.state.editOrganization\n delete orgVals.key\n EditOrganization(orgVals, this)\n this.closeAllEdits()\n this.setState({\n editOrganization: null, isEditValid: false, editOrgValidators: {\n name: null,\n orgAdminEmail: null,\n password: null,\n videoMinutesLimit: null,\n usersCountLimit: null,\n templatesCountLimit: null,\n key: null,\n },\n })\n }\n event.preventDefault()\n }\n\n deleteOrganization(event) {\n let params = event.currentTarget.dataset\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n
\n )\n },\n })\n event.preventDefault()\n }\n\n handleCtaValueChanged(id, val) {\n let newOrg = this.state.newOrganization;\n newOrg[id] = val;\n this.setState({ newOrganization: newOrg });\n }\n\n toggleEditOrg(event) {\n const active = $(event.currentTarget).hasClass('active-item')\n this.closeAllEdits()\n if (active) $(event.currentTarget).removeClass('active-item')\n else $(event.currentTarget).addClass('active-item')\n if (!active) {\n $(event.currentTarget).parent().parent().parent().children('.org-edit').toggle()\n let object = JSON.parse(event.currentTarget.dataset.item)\n object.password = ''\n object.key = ''\n GetOrganizationLogo(this, object.id);\n this.setState({\n editOrganization: object,\n isEditValid: false,\n editOrgValidators: {\n name: ValidateName(object.name),\n orgAdminEmail: ValidateEmail(object.orgAdminEmail),\n password: ValidatePassword(object.password),\n videoMinutesLimit: ValidateNumber(object.videoMinutesLimit),\n usersCountLimit: ValidateNumber(object.usersCountLimit),\n templatesCountLimit: ValidateNumber(object.templatesCountLimit),\n\n key: ValidateTemplate(object.key),\n },\n })\n }\n else {\n this.setState({ orgLoading: true, orgLogo: null });\n }\n event.preventDefault()\n }\n\n closeAllEdits() {\n $('.org-edit').each(function() {\n $(this).hide()\n })\n $('.active-item').each(function() {\n $(this).removeClass('active-item')\n })\n }\n\n toggleAddOrganization() {\n if ($('.page-top-panel-body').is(':hidden')) $('.page-top-panel-header i').css({\n transform: 'rotateZ(180deg)',\n bottom: '2.5px',\n })\n else $('.page-top-panel-header i').css({ transform: 'rotateZ(0deg)', bottom: '0' })\n $('.page-top-panel-body').toggle()\n this.setState({\n newOrganization: {\n name: '',\n orgAdminEmail: '',\n password: '',\n key: '',\n webUrl: '',\n ctaUrl: '',\n ctaVisible: false,\n videoMinutesLimit: 0,\n usersCountLimit: 0,\n templatesCountLimit: 0,\n templates: [],\n }, isAddValid: false, addOrgValidators: {\n name: null,\n orgAdminEmail: null,\n password: null,\n videoMinutesLimit: true,\n key: null,\n },\n })\n }\n\n // One organization card\n static renderSingleOrganization(organization, instance) {\n return (\n Delete warning!
\nThis action is permanent. Would you like to proceed?
\n \n \n \n\n
\n )\n }\n\n static renderOrganizations(organizations = [], instance) {\n if (organizations.length <= 0)\n return (\n \n
\n \n \n {organization.name}\n
\n\n
\n \n \n {organization.orgAdminEmail}\n
\n \n \n \n
\n \n Temps: {organization.templates.length}\n Videos: {organization.videosCount}\n Users: {organization.usersCount}\n Created: {moment(organization.createdDate).format('YYYY/M/D')}\n
\n \n {!instance.state.orgLoading && instance.state.editOrganization != null && RenderLogoInput(instance)}\n {instance.state.editOrganization != null &&\n \n }\n
\n \n
\n )\n else\n return (\n No organizations found
\n \n {organizations.map(organization => Organizations.renderSingleOrganization(organization, instance))}\n
\n )\n }\n\n getAddInputClass(name) {\n if (this.state.addOrgValidators[name] == null) return ('form-label-input-block')\n else if (this.state.addOrgValidators[name] == false) return ('form-label-input-block nonvalid-field')\n else return ('form-label-input-block valid-field')\n }\n\n getEditInputClass(name) {\n if (this.state.editOrgValidators[name] == null) return ('form-label-input-block')\n else if (this.state.editOrgValidators[name] == false) return ('form-label-input-block nonvalid-field')\n else return ('form-label-input-block valid-field')\n }\n\n checkAddValidators() {\n const validators = this.state.addOrgValidators\n if (validators.name == true && validators.orgAdminEmail == true && validators.password == true && validators.videoMinutesLimit == true) this.setState({ isAddValid: true })\n else this.setState({ isAddValid: false })\n }\n\n checkEditValidators() {\n const validators = this.state.editOrgValidators\n if (validators.name == true && validators.orgAdminEmail == true && validators.videoMinutesLimit == true && (validators.password == true || validators.password == null)) this.setState({ isEditValid: true })\n else this.setState({ isEditValid: false })\n }\n\n getAddBtnClass() {\n if (this.state.isAddValid) return ('form-submit-button form-submit-button-active')\n if (this.state.success === 1) return ('form-submit-button-success-fetch')\n else return ('form-submit-button')\n }\n\n getAddKeyBtnClass() {\n if (this.state.addOrgValidators.key == true) return ('add-btn add-btn-active')\n else return ('add-btn')\n }\n\n getEditKeyBtnClass() {\n if (this.state.editOrgValidators.key == true) return ('add-btn add-btn-active')\n else return ('add-btn')\n }\n\n getEditBtnClass() {\n if (this.state.isEditValid) return ('form-submit-button form-submit-button-active')\n else return ('form-submit-button')\n }\n\n render() {\n if (this.state.redirect) return (\n
\n : Organizations.renderOrganizations(this.state.organizations, this)\n\n return (\n Loading...
\n \n {loader}\n {!this.state.isAuthenticated && \n
\n\n \n }\n {this.state.isAuthenticated &&\n\n \n
\n \n
\n Add organization
\n \n\n
\n\n \n \n \n \n
\n\n\n\n\n {this.state.newOrganization.ctaAvailable && URL to external web
\n \n \n \n \n \n
}\n\n {this.state.newOrganization.ctaAvailable && URL for Click-to-action
\n \n \n
}\n\n\n \n
\n \n \n \n \n {this.state.newOrganization.templates.map(template =>\n
\n \n \n \n {template.name}
,\n )}\n Organizations
\n {organizationsContent}\n\n \n \n );\n }\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { GetUsersAfterEdit } from './GetUserAfterEdit';\nimport { Identity } from '../IdentityService';\nimport { GetRole, Roles } from '../RoleService';\nimport cookie from 'react-cookies';\n\nexport function OnetimeFirstChange(oldPassword, password, instance) {\n $.ajax('/api/Auth/ChangePassword/', {\n type: 'POST',\n data: JSON.stringify({ oldPassword: oldPassword, newPassword: password }),\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n cookie.remove(\"isOneTimePassword\", { path: '/' });\n instance.setState({ redirectDashboard: true });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n
')\n await fetch(baseUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n \"Authorization\": \"Bearer \" + sessionStorage.getItem(\"userData\")\n },\n body: JSON.stringify(data)\n })\n}","import React, {useState, useEffect} from \"react\"\nimport { postSupport } from \"./../../Services/Support/post-support\"\nimport { confirmAlert } from 'react-confirm-alert'\nimport 'react-confirm-alert/src/react-confirm-alert.css'\n\nconst SupportForm = () => {\n const [form, setForm] = useState({\n subject: \"\",\n message: \"\"\n })\n\n useEffect(() => {\n if (form.message.length > 0 && form.subject.length > 0) {\n setIsValid(true)\n } else {\n setIsValid(false)\n }\n })\n const [isValid, setIsValid] = useState(false)\n\n const handleChange = ({target}) => {\n setForm({\n ...form,\n [target.id]: target.value\n });\n }\n\n\n const handleSubmit = async (event) => {\n event.preventDefault()\n if (isValid) {\n await postSupport({\n data: form\n })\n setForm({\n subject: \"\",\n message: \"\",\n })\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n\n \n
Fetch warning!
\nError while fetching organizations.
\n\n \n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { GetOrganizationsAfterEdit } from './GetOrganizationsAfterEdit';\n\nexport function AddNewOrganization(organization, instance) { \n $.ajax('/api/Organizations', {\n type: 'POST',\n data: JSON.stringify(organization),\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n GetOrganizationsAfterEdit(instance);\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n instance.setState({ success: 2 });\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n \n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\nimport { GetOrganizationsAfterEdit } from './GetOrganizationsAfterEdit';\nimport { ValidatePassword } from '../../Validators/PasswordValidatorService';\n\nexport function EditOrganization(organization, instance) {\n let editOrg = {\n name: organization.name,\n orgAdminEmail: organization.orgAdminEmail,\n templates: organization.templates,\n videoMinutesLimit: organization.videoMinutesLimit,\n usersCountLimit: organization.usersCountLimit,\n templatesCountLimit: organization.templatesCountLimit\n };\n if (ValidatePassword(organization.password))\n editOrg[\"password\"] = organization.password;\n $.ajax('/api/Organizations/' + organization.id, {\n type: 'PUT',\n data: JSON.stringify(editOrg),\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n GetOrganizationsAfterEdit(instance);\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\nError while adding organization.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport $ from 'jquery';\nimport { confirmAlert } from 'react-confirm-alert';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../../Resources/Stylesheets/General/popup.css';\n\nexport function DeleteOrganizationById(id, instance) {\n $.ajax('/api/Organizations/' + id, {\n type: 'DELETE',\n async: true,\n contentType: 'application/json',\n beforeSend: function (xhr) {\n xhr.setRequestHeader(\"Authorization\", \"Bearer \" + sessionStorage.getItem(\"userData\"));\n },\n success: function (output, status, xhr) {\n if (status == \"success\") {\n let filtered = instance.state.organizations.filter((value, index, array) => { return value.id != id });\n instance.setState({ organizations: filtered });\n }\n },\n error: function (jqXHR, textStatus, errorThrown) {\n if (textStatus == \"error\")\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Process warning!
\nError while editing organization.
\n \n \n\n
\n );\n }\n });\n }\n });\n}","import React, { Component } from 'react';\nimport { Redirect } from 'react-router-dom';\nimport cookie from 'react-cookies';\nimport $ from 'jquery';\nimport '../Resources/Stylesheets/LogIn/signin.css';\nimport 'react-confirm-alert/src/react-confirm-alert.css';\nimport '../Resources/Stylesheets/General/popup.css';\nimport { ValidatePassword } from '../Validators/PasswordValidatorService';\nimport { OnetimeFirstChange } from '../Services/UsersServices/OnetimeFirstChangeService';\n\nexport class OneTimePassword extends Component {\n static displayName = OneTimePassword.name;\n\n constructor(props) {\n super(props);\n this.state = {\n password: '',\n passwordAgain: '',\n redirectLogin: false,\n redirectDashboard: false,\n validators: {\n password: null,\n passwordAgain: null\n }\n }\n this.handleInputChange = this.handleInputChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.getBtnClass = this.getBtnClass.bind(this);\n }\n\n componentWillMount() {\n document.title = \"One time password | Personalizard\";\n if (sessionStorage.getItem(\"userData\")) {\n if (!cookie.load(\"isOneTimePassword\"))\n this.setState({ redirectDashboard: true });\n } else\n this.setState({ redirectLogin: true });\n }\n\n handleInputChange(event) {\n let validators = this.state.validators;\n switch (event.target.name) {\n case \"password\":\n validators.password = ValidatePassword(event.target.value);\n this.setState({ validators: validators });\n break;\n case \"passwordAgain\":\n validators.passwordAgain = ValidatePassword(event.target.value);\n this.setState({ validators: validators });\n break;\n }\n this.setState({\n [event.target.name]: event.target.value\n });\n this.checkInputLabels(event.target.name);\n }\n\n handleSubmit(event) {\n if (this.state.validators.password && this.state.validators.passwordAgain) {\n if (this.state.password === this.state.passwordAgain) {\n OnetimeFirstChange(\"\", this.state.password, this)\n }\n }\n event.preventDefault();\n }\n\n getBtnClass() {\n if (this.state.validators.password && this.state.validators.passwordAgain) {\n if (this.state.password === this.state.passwordAgain) {\n return \"form-submit-button form-submit-button-active\";\n }\n }\n return \"form-submit-button\";\n }\n\n checkInputLabels(name) {\n let element = $(\"#user-\" + name);\n if (element.val() != \"\")\n element.parent().children(\"label\").addClass(\"input-filled\");\n else\n element.parent().children(\"label\").removeClass(\"input-filled\");\n }\n\n render() {\n let mainStyle = { paddingTop: \"10%\" };\n if (this.state.redirectDashboard) return (Process warning!
\nError while deleting organization.
\n \n \n\n \n
\n \n\n \n
\n \n
\n );\n }\n });\n }\n });\n}","import config from './../../../config'\nconst baseUrl = config.baseUrl + '/Support'\n\nexport const postSupport = async ({ data }) => {\n data.message = data.message.replace(/\\n\\r?/g, 'Process warning!
\nError while changing one-time password.
\n \n \n')\n await fetch(baseUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n \"Authorization\": \"Bearer \" + sessionStorage.getItem(\"userData\")\n },\n body: JSON.stringify(data)\n })\n}","import React, {useState, useEffect} from \"react\"\nimport { postSupport } from \"./../../Services/Support/post-support\"\nimport { confirmAlert } from 'react-confirm-alert'\nimport 'react-confirm-alert/src/react-confirm-alert.css'\n\nconst SupportForm = () => {\n const [form, setForm] = useState({\n subject: \"\",\n message: \"\"\n })\n\n useEffect(() => {\n if (form.message.length > 0 && form.subject.length > 0) {\n setIsValid(true)\n } else {\n setIsValid(false)\n }\n })\n const [isValid, setIsValid] = useState(false)\n\n const handleChange = ({target}) => {\n setForm({\n ...form,\n [target.id]: target.value\n });\n }\n\n\n const handleSubmit = async (event) => {\n event.preventDefault()\n if (isValid) {\n await postSupport({\n data: form\n })\n setForm({\n subject: \"\",\n message: \"\",\n })\n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n
\n
\n )\n },\n })\n } else { \n confirmAlert({\n customUI: ({ onClose }) => {\n return (\n Message sent
\nYour message has been successfully send
\n \n \n\n
\n )\n },\n })\n }\n }\n\n return (\n Form warning!
\nCheck if form is filled in correctly.
\n \n \n\n