Commit 5c61906a authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Merged the license and cookie agreement into a single mandatory dialog.

parent bd3bc3e5
Pipeline #53282 passed with stages
in 15 minutes and 51 seconds
......@@ -6,7 +6,7 @@ import { compose } from 'recompose'
import classNames from 'classnames'
import { MuiThemeProvider, withStyles } from '@material-ui/core/styles'
import { IconButton, Checkbox, FormLabel, LinearProgress, ListItemIcon, ListItemText,
MenuList, MenuItem, Typography, Drawer, AppBar, Toolbar, Divider, Snackbar, SnackbarContent, Button } from '@material-ui/core'
MenuList, MenuItem, Typography, Drawer, AppBar, Toolbar, Divider, Button, DialogContent, DialogTitle, DialogActions, Dialog } from '@material-ui/core'
import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom'
import BackupIcon from '@material-ui/icons/Backup'
import SearchIcon from '@material-ui/icons/Search'
......@@ -28,6 +28,7 @@ import { DomainProvider } from './domains'
import MetaInfoBrowser from './metaInfoBrowser/MetaInfoBrowser'
import packageJson from '../../package.json'
import { Cookies, withCookies } from 'react-cookie'
import Markdown from './Markdown'
const drawerWidth = 200
......@@ -281,7 +282,7 @@ class NavigationUnstyled extends React.Component {
const Navigation = compose(withRouter, withApi(false), withStyles(NavigationUnstyled.styles))(NavigationUnstyled)
class CookieConsentUnstyled extends React.Component {
class LicenseAgreementUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
cookies: instanceOf(Cookies).isRequired
......@@ -303,39 +304,54 @@ class CookieConsentUnstyled extends React.Component {
}
state = {
accepted: this.props.cookies.get('eu-cookie-law-accepted')
accepted: this.props.cookies.get('terms-accepted')
}
handleClosed() {
this.props.cookies.set('eu-cookie-law-accepted', true)
this.setState({accepted: true})
handleClosed(accepted) {
if (accepted) {
this.props.cookies.set('terms-accepted', true)
this.setState({accepted: true})
}
}
render() {
return (
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left'
}}
open={!this.state.accepted}>
<SnackbarContent
className={this.props.classes.content}
message={'This website uses cookies. By using this website you agree to the use of cookies.'}
action={
<Button
className={this.props.classes.button}
onClick={this.handleClosed} size="small">
don't show again
<div>
<Dialog
disableBackdropClick disableEscapeKeyDown
open={!this.state.accepted}
>
<DialogTitle>Terms of Use</DialogTitle>
<DialogContent>
<Markdown>{`
By uploading and downloading data, you agree to the
[terms of use](https://www.nomad-coe.eu/the-project/nomad-repository/nomad-repository-terms).
Uploaded data is licensed under the Creative Commons Attribution license
([CC BY 3.0](https://creativecommons.org/licenses/by/3.0/)). You can publish
uploaded data with an *embargo*. Data with an *embargo* is only visible to
you and users you share your data with. The *embargo period* lasts up to 36 month.
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/).
`}
</Markdown>
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleClosed(true)} color="primary">
Accept
</Button>
}/>
</Snackbar>
</DialogActions>
</Dialog>
{this.state.accepted ? this.props.children : ''}
</div>
)
}
}
const CookieConsent = compose(withCookies, withStyles(CookieConsentUnstyled.styles))(CookieConsentUnstyled)
const LicenseAgreement = compose(withCookies, withStyles(LicenseAgreementUnstyled.styles))(LicenseAgreementUnstyled)
export default class App extends React.Component {
constructor(props) {
......@@ -442,7 +458,7 @@ export default class App extends React.Component {
</HelpProvider>
</BrowserRouter>
</ErrorSnacks>
<CookieConsent />
<LicenseAgreement />
</MuiThemeProvider>
)
}
......
......@@ -68,7 +68,8 @@ var styles = theme => ({
margin: '24px 0 16px'
}),
'& p, & ul, & ol': {
lineHeight: theme.typography.lineHeight
lineHeight: theme.typography.lineHeight,
marginBottom: theme.spacing.unit
},
'& ul': {
paddingLeft: 0,
......
import React from 'react'
import { withStyles, Button, Collapse, Fade } from '@material-ui/core'
import { withStyles, Button, Collapse } from '@material-ui/core'
import Markdown from './Markdown'
import PropTypes, { instanceOf } from 'prop-types'
import { Cookies, withCookies } from 'react-cookie'
......@@ -75,48 +75,6 @@ export class Help extends React.Component {
}
}
class AgreeComponent extends React.Component {
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.node, PropTypes.arrayOf(PropTypes.node)
]).isRequired,
message: PropTypes.string.isRequired,
cookie: PropTypes.string.isRequired,
cookies: instanceOf(Cookies).isRequired
}
state = {
agreed: this.props.cookies.get(this.props.cookie)
}
onAgreeClicked() {
this.props.cookies.set(this.props.cookie, true)
this.setState({agreed: true})
}
render() {
const { children, message } = this.props
const { agreed } = this.state
return (
<div>
<Collapse in={!agreed}>
<GotIt onGotIt={() => this.onAgreeClicked()} color="error">
{message}
</GotIt>
</Collapse>
<Fade in={!!agreed}>
<div>
{children}
</div>
</Fade>
</div>
)
}
}
export const Agree = withCookies(AgreeComponent)
class GotItUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
......
......@@ -11,7 +11,7 @@ import ReloadIcon from '@material-ui/icons/Cached'
import CheckIcon from '@material-ui/icons/Check'
import ClipboardIcon from '@material-ui/icons/Assignment'
import ConfirmDialog from './ConfirmDialog'
import { Help, Agree } from '../help'
import { Help } from '../help'
import { withApi } from '../api'
import { withCookies, Cookies } from 'react-cookie'
import Pagination from 'material-ui-flat-pagination'
......@@ -333,89 +333,78 @@ class Uploads extends React.Component {
const { classes } = this.props
const { uploadCommand } = this.state
const agreement = `
By uploading and downloading data, you agree to the
[terms of use](https://www.nomad-coe.eu/the-project/nomad-repository/nomad-repository-terms).
Note that uploaded files become downloadable by others. Uploaded data is licensed under the
Creative Commons Attribution license ([CC BY 3.0](https://creativecommons.org/licenses/by/3.0/)).
You can put an *embargo* on uploaded data. The *embargo period* lasts up to 36 month.
`
return (
<div className={classes.root}>
<Agree message={agreement} cookie="agreedToUploadTerms">
<Help cookie="uploadHelp" component={Markdown}>{`
To upload your own data, please put all relevant files of all the calculations
you want to upload into a single \`*.zip\` or \`*.tar.gz\` archive.
We encourage you to add all code input and
output files, as well as any other auxiliary files that you might have created.
You can put data from multiple calculations, using your preferred directory
structure, into your archives. Drop your archive file(s) below. You can also
click the dropbox to select the file from your hard drive.
Uploaded data will not be public immediately. We call this *staging area*.
After uploading and processing, you can decide if you want to make the data public,
delete it again, or put an *embargo* on it.
The *embargo* allows you to shared it with selected users, create a DOI
for your data, and later publish the data. The *embargo* might last up to
36 month before it becomes public automatically. During an *embargo*
some meta-data will be available.
There is a limit of 32 GB per upload. Please upload multiple archives, if
you have more than 32 GB of data to upload.
`}</Help>
<Paper className={classes.dropzoneContainer}>
<Dropzone
accept={[
'application/zip', 'application/gzip', 'application/bz2', 'application/x-gzip',
'application/x-bz2', 'application/x-gtar', 'application/x-tgz', 'application/tar+gzip',
'application/x-tar', 'application/tar+bz2']}
className={classes.dropzone}
activeClassName={classes.dropzoneAccept}
rejectClassName={classes.dropzoneReject}
onDrop={this.onDrop.bind(this)}
>
<p>drop .tar.gz or .zip files here</p>
<UploadIcon style={{fontSize: 36}}/>
</Dropzone>
</Paper>
<Help cookie="uploadCommandHelp">{`
Alternatively, you can upload files via the following shell command.
Replace \`<local_file>\` with your archive file. After executing the command,
return here and press the reload button below). The same 32 GB limit applies.
`}</Help>
<div className={classes.commandContainer}>
<div className={classes.commandMarkup}>
<Markdown>{`
\`\`\`
${uploadCommand.upload_command}
\`\`\`
`}</Markdown>
</div>
<CopyToClipboard text={uploadCommand} onCopy={() => null}>
<Tooltip title="copy command to clipboard">
<IconButton>
<ClipboardIcon />
</IconButton>
</Tooltip>
{/* <button>Copy to clipboard with button</button> */}
</CopyToClipboard>
<Help cookie="uploadHelp" component={Markdown}>{`
To upload your own data, please put all relevant files of all the calculations
you want to upload into a single \`*.zip\` or \`*.tar.gz\` archive.
We encourage you to add all code input and
output files, as well as any other auxiliary files that you might have created.
You can put data from multiple calculations, using your preferred directory
structure, into your archives. Drop your archive file(s) below. You can also
click the dropbox to select the file from your hard drive.
Uploaded data will not be public immediately. We call this *staging area*.
After uploading and processing, you can decide if you want to make the data public,
delete it again, or put an *embargo* on it.
The *embargo* allows you to shared it with selected users, create a DOI
for your data, and later publish the data. The *embargo* might last up to
36 month before it becomes public automatically. During an *embargo*
some meta-data will be available.
There is a limit of 32 GB per upload. Please upload multiple archives, if
you have more than 32 GB of data to upload.
`}</Help>
<Paper className={classes.dropzoneContainer}>
<Dropzone
accept={[
'application/zip', 'application/gzip', 'application/bz2', 'application/x-gzip',
'application/x-bz2', 'application/x-gtar', 'application/x-tgz', 'application/tar+gzip',
'application/x-tar', 'application/tar+bz2']}
className={classes.dropzone}
activeClassName={classes.dropzoneAccept}
rejectClassName={classes.dropzoneReject}
onDrop={this.onDrop.bind(this)}
>
<p>drop .tar.gz or .zip files here</p>
<UploadIcon style={{fontSize: 36}}/>
</Dropzone>
</Paper>
<Help cookie="uploadCommandHelp">{`
Alternatively, you can upload files via the following shell command.
Replace \`<local_file>\` with your archive file. After executing the command,
return here and press the reload button below). The same 32 GB limit applies.
`}</Help>
<div className={classes.commandContainer}>
<div className={classes.commandMarkup}>
<Markdown>{`
\`\`\`
${uploadCommand.upload_command}
\`\`\`
`}</Markdown>
</div>
<CopyToClipboard text={uploadCommand} onCopy={() => null}>
<Tooltip title="copy command to clipboard">
<IconButton>
<ClipboardIcon />
</IconButton>
</Tooltip>
{/* <button>Copy to clipboard with button</button> */}
</CopyToClipboard>
</div>
<Help cookie="moreUploadCommandHelp">{`
The above command can be modified. To see progress on large files, use
\`${uploadCommand.upload_progress_command}\`. To
\`tar\` and upload in one command, use \`${uploadCommand.upload_tar_command}\`.
`}</Help>
<Help cookie="moreUploadCommandHelp">{`
The above command can be modified. To see progress on large files, use
\`${uploadCommand.upload_progress_command}\`. To
\`tar\` and upload in one command, use \`${uploadCommand.upload_tar_command}\`.
`}</Help>
{this.renderUnpublishedUploads()}
{this.renderPublishedUploads()}
</Agree>
{this.renderUnpublishedUploads()}
{this.renderPublishedUploads()}
</div>
)
}
......
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