diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js new file mode 100644 index 0000000000000000000000000000000000000000..43ff66284eca688e2582703fa8c988bcb6798027 --- /dev/null +++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js @@ -0,0 +1,219 @@ +/*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, {useContext, useState} from 'react'; +import {Store} from '../../../Store.js' +import { Button } from '@material-ui/core'; +import Modal from '@material-ui/core/Modal'; +import Backdrop from '@material-ui/core/Backdrop'; +import Fade from '@material-ui/core/Fade'; +import styled from 'styled-components' +import axios from 'axios' +import {apiUrl} from '../../../env.js' +import CloseIcon from '@material-ui/icons/Close'; +import ExcluirAvatar from '../../../img/Excluir.png' +import GreyButton from '../../GreyButton' +import FormInput from '../../FormInput' +import {Link} from 'react-router-dom' +import SnackbarComponent from '../../SnackbarComponent.js' +import {getAxiosConfig} from '../../HelperFunctions/getAxiosConfig' + +function CloseModalButton (props) { + return ( + <StyledCloseModalButton onClick={props.handleClose}> + <CloseIcon/> + </StyledCloseModalButton> + ) +} + +export default function ModalExcluirConta (props) { + const {state, dispatch} = useContext(Store) + + const [formEmail, setEmail] = useState( + { + key : false, + value : "", + } + ) + const handleChange = (e) => { + const userInput = e.target.value + let flag = !(userInput === state.currentUser.email) + + setEmail({...formEmail, + key : flag, + value : userInput + }) + } + + const [snackbarOpen, toggleSnackbar] = useState(false) + + const deletedAccountText = `A conta ${state.currentUser.email} foi deletada com sucesso` + + const deleteAccount = () => { + let config = getAxiosConfig() + + axios.delete( (`${apiUrl}/auth/`), config + ).then( (response) => { + console.log(response) + toggleSnackbar(true) + + dispatch({ + type: "USER_DELETED_ACCOUNT", + }); + + props.handleClose() + }, (error) => {console.log(error);}) + } + + return ( + <React.Fragment> + <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={deletedAccountText}/> + <StyledModal + aria-labelledby="transition-modal-title" + aria-describedby="transition-modal-description" + open={props.open} + centered="true" + onClose={props.handleClose} + closeAfterTransition + BackdropComponent={Backdrop} + BackdropProps={{ + timeout: 500, + }} + > + <Fade in={props.open}> + <Container> + <Header> + <span style={{width:"32px"}}/> + <h2>Excluir a Conta Definitivamente</h2> + <CloseModalButton handleClose={props.handleClose}/> + </Header> + <Content> + <div style={{display : "flex", flexDirection : "column", color : "#666", textAlign : "left"}}> + <div style={{display : "flex", flexDirection : "row", margin : "0 30px", justifyContent : "center", alignContent : "center"}}> + <div style={{height : "90px", position : "relative"}}> + <img src={ExcluirAvatar} alt="excluir-avatar" style={{height : "inherit", objectFit : "contain", verticalAlign : "middle"}}/> + </div> + <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato">Entre em contato.</StyledLink></p> + </div> + <p style={{marginTop : "20px"}}> + Saiba que a exclusão da conta removerá o seu perfil permanentemente. Se você publicou algum recurso, ele ainda ficará disponÃvel para os usuários da plataforma. + </p> + <p style={{marginTop : "20px"}}> + É necessário que você digite seu e-mail para confirmar a exclusão: + </p> + <FormInput + inputType={"text"} + name={"email"} + value={formEmail.value} + placeholder={"Digite seu e-mail de cadastro"} + handleChange={e => handleChange(e)} + required={true} + error = {formEmail.key} + help = {formEmail.key ? ( formEmail.value.length == 0 ? "Faltou preencher seu e-mail." : "O e-mail deve ser o mesmo no qual você cadastrou esta conta") : ""} + /> + <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}> + <GreyButton callback={props.handleClose} text={"Cancelar"}/> + <RedButton disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton> + </div> + </div> + </Content> + </Container> + </Fade> + </StyledModal> + </React.Fragment> + ) +} + +const RedButton = styled(Button)` + background-color : rgb(230,60,60) !important; + color : #fff !important; + font-weight : bolder; + box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; +` + +const Content = styled.div` + padding : 20px 30px; + +` + +const Header = styled.div` + display : flex; + flex-direction : row; + padding : 10px 26px 0 26px; + align-items : center; + justify-content : space-between; + height : 64px; + + h2 { + font-size : 26px; + font-weight : lighter; + color : #666 + } +` + +const StyledCloseModalButton = styled(Button)` + display : inline-block; + position : relative; + float : right !important; + margin-right : -8px !important; + background : transparent !important; + min-width: 0 !important; + width : 40px; +` + +const StyledModal = styled(Modal)` + .djXaxP{ + margin : 0 !important; + } + display : flex; + align-items: center; + justify-content : center; + text-align : center; + padding : 10px !important; + max-width : none; + max-height : none; +` + +const Container = styled.div` + box-sizing : border-box; + box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); + background-color : white; + align : center; + display : flex; + flex-direction : column; + min-width : 240px; + max-height : none; + position : relative; + padding : 10px; + border-radius : 4px; + + @media screen and (min-width : 700px) { + max-width : 600px; + max-height : 600px; + } + + @media screen and (max-width : 699px) { + overflow-y : scroll; + width : 100%; + height : 100%; + } +` +const StyledLink = styled(Link)` + text-decoration : none !important; + color : #00bcd4 !important; +`