Commit caa85577 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Adapted consent in GUI for use of matomo. #199

parent 2d723602
Pipeline #76901 passed with stages
in 23 minutes and 40 seconds
......@@ -4,7 +4,7 @@ window.nomadEnv = {
'keycloakClientId': 'nomad_gui_dev',
'appBase': 'http://localhost:8000/fairdi/nomad/latest',
'debug': false,
'sendTrackingData': true,
'matomoEnabled': true,
'matomoUrl': 'https://repository.nomad-coe.eu/fairdi/stat',
'matomoSiteId': '2'
}
// trigger rebuild
import React, { useEffect, useState, useContext, useCallback, useRef } from 'react'
import PropTypes, { instanceOf } from 'prop-types'
import PropTypes from 'prop-types'
import { compose } from 'recompose'
import classNames from 'classnames'
import { MuiThemeProvider, withStyles, makeStyles } from '@material-ui/core/styles'
import { LinearProgress, MenuList, Typography,
AppBar, Toolbar, Button, DialogContent, DialogTitle, DialogActions, Dialog, Tooltip,
Snackbar, SnackbarContent } from '@material-ui/core'
Snackbar, SnackbarContent, FormGroup, FormControlLabel, Switch } from '@material-ui/core'
import { Route, Link, withRouter, useLocation } from 'react-router-dom'
import BackupIcon from '@material-ui/icons/Backup'
import SearchIcon from '@material-ui/icons/Search'
......@@ -17,6 +17,7 @@ import FAQIcon from '@material-ui/icons/QuestionAnswer'
import MetainfoIcon from '@material-ui/icons/Info'
import DocIcon from '@material-ui/icons/Help'
import CodeIcon from '@material-ui/icons/Code'
import TermsIcon from '@material-ui/icons/Assignment'
import {help as searchHelp, default as SearchPage} from './search/SearchPage'
import HelpDialog from './Help'
import { ApiProvider, withApi, apiContext } from './api'
......@@ -27,8 +28,6 @@ import LoginLogout from './LoginLogout'
import { guiBase, consent, nomadTheme, appBase } from '../config'
import {help as metainfoHelp, default as MetaInfoBrowser} from './metaInfoBrowser/MetaInfoBrowser'
import packageJson from '../../package.json'
import { Cookies, withCookies } from 'react-cookie'
import Markdown from './Markdown'
import {help as uploadHelp, default as UploadPage} from './uploads/UploadPage'
import ResolvePID from './entry/ResolvePID'
import DatasetPage from './DatasetPage'
......@@ -37,6 +36,9 @@ import {help as userdataHelp, default as UserdataPage} from './UserdataPage'
import ResolveDOI from './dataset/ResolveDOI'
import FAQ from './FAQ'
import EntryQuery from './entry/EntryQuery'
import {matomo} from '../index'
import { useCookies } from 'react-cookie'
import Markdown from './Markdown'
export const ScrollContext = React.createContext({scrollParentRef: null})
......@@ -80,7 +82,7 @@ const useMainMenuItemStyles = makeStyles(theme => ({
}
}))
function MainMenuItem({tooltip, title, path, href, icon}) {
function MainMenuItem({tooltip, title, path, href, onClick, icon}) {
const {pathname} = useLocation()
const classes = useMainMenuItemStyles()
const selected = path === pathname || (path !== '/' && pathname.startsWith(path))
......@@ -91,6 +93,7 @@ function MainMenuItem({tooltip, title, path, href, icon}) {
color={selected ? 'primary' : 'default'}
size="small"
startIcon={icon}
onClick={onClick}
{...rest}
>
{title}
......@@ -102,9 +105,73 @@ MainMenuItem.propTypes = {
'title': PropTypes.string.isRequired,
'path': PropTypes.string,
'href': PropTypes.string,
'onClick': PropTypes.func,
'icon': PropTypes.element.isRequired
}
function Consent() {
const [cookies, setCookie] = useCookies()
const [accepted, setAccepted] = useState(cookies['terms-accepted'])
const [optOut, setOptOut] = useState(cookies['tracking-enabled'] === 'false')
useEffect(() => {
if (!optOut) {
matomo.push(['setConsentGiven'])
} else {
matomo.push(['requireConsent'])
}
})
const handleClosed = accepted => {
if (accepted) {
setCookie('terms-accepted', true)
setCookie('tracking-enabled', !optOut)
setAccepted(true)
}
}
const handleOpen = () => {
setCookie('terms-accepted', false)
setAccepted(false)
}
return (
<React.Fragment>
<MainMenuItem
title="Terms"
onClick={handleOpen}
tooltip="NOMAD's terms"
icon={<TermsIcon/>}
/>
<Dialog
disableBackdropClick disableEscapeKeyDown
open={!accepted}
>
<DialogTitle>Terms of Use</DialogTitle>
<DialogContent>
<Markdown>{consent}</Markdown>
<FormGroup>
<FormControlLabel
control={<Switch
checked={optOut}
onChange={(e) => {
setOptOut(!optOut)
}}
color="primary"
/>}
label="Do not provide information about your use of NOMAD (opt-out)."
/>
</FormGroup>
</DialogContent>
<DialogActions>
<Button onClick={() => handleClosed(true)} color="primary">
Accept
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
)
}
const useMainMenuStyles = makeStyles(theme => ({
root: {
display: 'inline-flex',
......@@ -186,6 +253,7 @@ function MainMenu() {
tooltip="NOMAD's Gitlab project"
icon={<CodeIcon/>}
/>
<Consent />
</MenuList>
}
......@@ -378,62 +446,6 @@ class NavigationUnstyled extends React.Component {
const Navigation = compose(withRouter, withErrors, withApi(false), withStyles(NavigationUnstyled.styles))(NavigationUnstyled)
class LicenseAgreementUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
cookies: instanceOf(Cookies).isRequired
}
static styles = theme => ({
content: {
backgroundColor: theme.palette.primary.main
},
button: {
color: 'white'
}
})
constructor(props) {
super(props)
this.handleClosed = this.handleClosed.bind(this)
}
state = {
accepted: this.props.cookies.get('terms-accepted')
}
handleClosed(accepted) {
if (accepted) {
this.props.cookies.set('terms-accepted', true)
this.setState({accepted: true})
}
}
render() {
return (
<div>
<Dialog
disableBackdropClick disableEscapeKeyDown
open={!this.state.accepted}
>
<DialogTitle>Terms of Use</DialogTitle>
<DialogContent>
<Markdown>{consent}</Markdown>
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleClosed(true)} color="primary">
Accept
</Button>
</DialogActions>
</Dialog>
</div>
)
}
}
const LicenseAgreement = compose(withCookies, withStyles(LicenseAgreementUnstyled.styles))(LicenseAgreementUnstyled)
const routes = {
'about': {
exact: true,
......@@ -518,7 +530,6 @@ class App extends React.PureComponent {
</Navigation>
</ApiProvider>
</ErrorSnacks>
<LicenseAgreement />
</MuiThemeProvider>
)
}
......
......@@ -12,7 +12,7 @@ export const keycloakBase = window.nomadEnv.keycloakBase
export const keycloakRealm = window.nomadEnv.keycloakRealm
export const keycloakClientId = window.nomadEnv.keycloakClientId
export const debug = window.nomadEnv.debug || false
export const sendTrackingData = window.nomadEnv.sendTrackingData
export const matomoEnabled = window.nomadEnv.matomoEnabled
export const email = 'webmaster@nomad-coe.eu'
export const maxLogsToShow = 50
......@@ -27,8 +27,10 @@ you and users you share your data with. The *embargo period* lasts up to 36 mont
After the *embargo* your published data will be public. **Note that public data
is visible to others and files become downloadable by everyone.**
This web-site uses *cookies*. By using this web-site you agree to our use
of *cookies*. [Learn more](https://www.cookiesandyou.com/).
This web-site uses *cookies*. We use cookies to track you login status for all NOMAD services
and optionally to store information about your use of NOMAD. None of this information is
shared with other parties. By using this web-site you agree to the described use of *cookies*.
[Learn more](https://www.cookiesandyou.com/).
`
export const nomadPrimaryColor = {
main: '#008DC3',
......
......@@ -8,12 +8,12 @@ import { Router, Route } from 'react-router-dom'
import { QueryParamProvider } from 'use-query-params'
import history from './history'
import PiwikReactRouter from 'piwik-react-router'
import { sendTrackingData, matomoUrl, matomoSiteId, keycloakBase, keycloakRealm, keycloakClientId } from './config'
import { matomoEnabled, matomoUrl, matomoSiteId, keycloakBase, keycloakRealm, keycloakClientId } from './config'
import Keycloak from 'keycloak-js'
import { KeycloakProvider } from 'react-keycloak'
import * as serviceWorker from './serviceWorker'
const matomo = sendTrackingData ? PiwikReactRouter({
export const matomo = matomoEnabled ? PiwikReactRouter({
url: matomoUrl,
siteId: matomoSiteId,
clientTrackerName: 'stat.js',
......@@ -26,9 +26,11 @@ const keycloak = Keycloak({
clientId: keycloakClientId
})
// matomo.push('requireConsent')
ReactDOM.render(
<KeycloakProvider keycloak={keycloak} initConfig={{onLoad: 'check-sso'}} LoadingComponent={<div />}>
<Router history={sendTrackingData ? matomo.connectToHistory(history) : history}>
<Router history={matomoEnabled ? matomo.connectToHistory(history) : history}>
<QueryParamProvider ReactRouterRoute={Route}>
<App />
</QueryParamProvider>
......
......@@ -92,7 +92,7 @@ data:
"keycloakClientId": "{{ .Values.keycloak.guiClientId }}",
"matomoSiteId": {{ .Values.gui.matomoSiteId }},
"matomoUrl": "{{ .Values.gui.matomoUrl }}",
"sendTrackingData": {{ .Values.gui.sendTrackingData }},
"matomoEnabled": {{ .Values.gui.matomoEnabled }},
"debug": {{ .Values.gui.debug }}
};
---
......
......@@ -68,11 +68,11 @@ gui:
## This variable is used in the GUI to show or hide additional information
debug: false
## URL for matomo(piwik) user tracking
matomoUrl: 'http://nowhere.no'
matomoUrl: 'https://repository.nomad-coe.eu/fairdi/stat'
## site id for matomo(piwik) user tracking
matomoSiteId: 1
## send matomo(piwik) user tracking data
sendTrackingData: false
matomoEnabled: false
## Everything concerning the nginx that serves the gui, proxies the api
# It is run via NodePort service
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment