TermsPage.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState, useContext}  from 'react';
import styled from 'styled-components'
import {device} from '../Components/device.js'
import { Store } from '../Store.js';
import { Button } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import LabeledCheckbox from "../Components/Checkbox.js"
import TermsPageContent from '../Components/TermsPageContent.js'
import AppBar from '@material-ui/core/AppBar';
import { makeStyles } from '@material-ui/core/styles';
import {Link} from 'react-router-dom'
const CardStyled = styled(Card)`
    box-sizing : border-box;
    background-color : white;
    max-width: 1700px;
    padding-top: 52px;
    @media ${device.mobileM} {
        width : 100%;
        height : 100%;
    }
 `

const Styledspan = styled.span`
    font-family: 'Roboto', sans serif;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    font-size: 15px;
    letter-spacing: .01em;
`
const StyledSpanContinuar = styled.span`
    font-family: 'Roboto', sans serif;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    font-size: 15px;
    letter-spacing: .01em;
    color: #fff;
`

const Background = styled.div`
    padding-top : 40px;
    background-color : #f4f4f4;
    color : #666;
    padding-bottom : 40px;

    .container {
        padding : 0;
        margin-right : auto;
        margin-left : auto;

        @media screen and (min-width: 768px) {
            width : 750px;
        }
        @media screen and (min-width: 992px) {
            width : 970px;
        }
        @media screen and (min-width: 1200px) {
            width : 1170px;
        }
    }
`

export default function TermsContainer (props) {
        // eslint-disable-next-line
        const {state, dispatch} = useContext(Store)
        // eslint-disable-next-line
        const [checked, setChecked] = useState(false);
        const [unavailableButton, setButtonAvailability] = useState(true);
        const classes = useStyles()

        const handleChecked = e => {
            setChecked(e.target.checked);
            setButtonAvailability(!unavailableButton);
        }

        const handleAgreement = () => {

            dispatch( {
                type: 'USER_AGREED_TO_PUBLICATION_TERMS',
                userAgreement: true
            })

            if (props.location.state) {
                props.history.push('/professor')
            }else {
                props.history.push('/permission')
                window.scrollTo(0, 0)
            }
        }

        return (
                <Background>
                <div className="container">
                    <CardStyled variant="outlined">
                        <TermsPageContent/>
                    </CardStyled>
                </div>
                <AppBar position="fixed" color="primary" className={classes.appBar}>
                    <StyledAppBarContainer>
                        <div className="container">
                            <div style={{fontSize:"14px"}}>
                                <LabeledCheckbox label={<Styledspan style={{color : "#666", fontWeight : "600"}}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
                            </div>
                            <div className="botoes">
                                <Button disabled = {unavailableButton}
                                style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
                                onClick={handleAgreement}
                                >
                                    <StyledSpanContinuar  style={unavailableButton ? {color:"#666666"} : {}}>
                                        Continuar
                                    </StyledSpanContinuar>
                                </Button>
                                <Link to="/">
                                    <GrayButton>
                                            Cancelar
                                    </GrayButton>
                                </Link>
                            </div>
                        </div>
                    </StyledAppBarContainer>
                </AppBar>
            </Background>
        )
}

const GrayButton = styled(Button)`
    &:hover {
        background-color : rgba(158,158,158,0.2) !important;
    }
    height : 36px !important;
    font-weight : 600 !important;
    color : #666 !important;
    background-color: transparent;
    min-width : 88px !important;
    height : 36px !important;
    margin-left : 8px !important;
    margin-right : 8px !important;

    .button-text {
        cursor : pointer;
        line-height : 22px;
        text-align : center;
        color : currentColor;
        white-space : nowrap;
        text-transform : uppercase;
        font-weight : 600;
        font-size : 15px;
        font-style : inherit;
        font-variant : inherit;
        font-family: 'Roboto', sans serif;
        letter-spacing: .01em;
    }
`

const useStyles = makeStyles((theme) => ({
  appBar: {
    top: 'auto',
    bottom: 0,
    height : '100px',
    backgroundColor : '#fff',
    boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
  },
}));


const StyledAppBarContainer = styled.div`
    .container {
        display : flex;
        flex-direction : column;
        justify-content : flex-start
        margin-right : auto;
        margin-left : auto;
        padding-top : 5px;

        @media screen and (min-width: 1200px) {
            width : 1170px;
        }
        @media screen and (min-width: 992px) and (max-width : 1199px){
            width : 970px;
        }
        @media screen and (min-width: 768px) and (max-width : 991px) {
            width : 750px;
            padding : 0 1em 1em 1em;
        }

        .botoes {
            display : flex;
            align-items : center;
            @media screen and (max-width: 768px) {
                justify-content : center !important;
            }
        }

        .MuiFormControlLabel-root {
            @media screen and (max-width: 768px) {
                margin-left : 0 !important;
            }
        }
    }
`

// {/*<CardActions style={{justifyContent:"center", padding:"25px", borderTop : "2px solid #dadada"}}>
// <div>
// <div style={{fontSize:"14px"}}>
// <LabeledCheckbox label={<Styledspan>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
// <div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
// <Button disabled = {unavailableButton}
// style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
// onClick={handleAgreement}
// >
// <StyledSpanContinuar  style={unavailableButton ? {color:"#666666"} : {}}>
// Continuar
// </StyledSpanContinuar>
// </Button>
// <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
// <Styledspan style={{color:"rgb(102, 102, 102)"}}>
// Cancelar
// </Styledspan>
// </Button>
// </div>
// </div>
// </div>
// </CardActions>*/}