eagle-id/src/PrivacyNotice.jsx

A React based component to perform identity verification

import React, { Component } from 'react';
import { withSnackbar } from 'notistack';

import Button from '@material-ui/core/Button';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';

import * as constants from './constants'
import { defaultConfig, defaultStyles } from './config';

class PrivacyNotice extends Component {
    
    constructor(props) {
        super(props)

        this.state = {
            config: this.props.config,
            acceptPrivacyNotice: true
        }
    }
    
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.config != this.props.config) {
            this.setState({
                config: this.props.config
            })
        }
    }
    
    acceptPrivacyNotice = () => {
        if (this.state.acceptPrivacyNotice) {
            this.setState({
                privacyNotice: false
            })
            localStorage.setItem('TermsAndConditions', true)
            this.props.switchScreen()
        } else {
            this.props.enqueueSnackbar("Please accept the terms and conditions before continuing.", {
                                    variant: "error",
                                    anchorOrigin: {
                                         vertical: 'bottom',
                                         horizontal: 'center',
                                     }})
        }
    }
    
    handleChange = (event) => {
        this.setState({ acceptPrivacyNotice: event.target.checked });
    }

    render() {
        return (<div>
                <center>
                <img
                    src={this.state.config.resources.images.logo}
                    width={200}
                    alt="logo"
                    style={{ marginTop: 75 }}>
                </img>
                <br />
                <img
                    src={this.state.config.resources.images.privacy}
                    width={150}
                    alt="privacy-notice"
                    style={{ marginTop: 25 }}>
                </img>
                 <FormControlLabel
                    control={
                      <Checkbox
                        checked={this.state.acceptPrivacyNotice}
                        onChange={(event) => { this.handleChange(event) }}
                        color="primary"
                        style={defaultStyles.checkBox}
                      />
                    }
                    labelPlacement="end"
                    label={
                        <p style={defaultStyles.text}>
                        By clicking Start you accept our <a href={this.state.config.privacy.notice}>terms and conditions</a>.
                        </p>
                    }
                    style={{ marginLeft: 25, marginRight: 25 }}
                  />
                 <br />
                 <Button
                    variant="contained"
                    color="primary"
                    style={defaultStyles.buttonFilled}
                    onClick={() => { this.acceptPrivacyNotice() }}>
                  Start
                 </Button>
                 <br />
                 <br />
                 </center>
                 </div>);
    }
}

export default withSnackbar(PrivacyNotice)