diff --git a/src/components/Gratulation.jsx b/src/components/Gratulation.jsx index 0544331..53e99e8 100644 --- a/src/components/Gratulation.jsx +++ b/src/components/Gratulation.jsx @@ -8,8 +8,9 @@ import Title from './Title' import Paragraph from './Paragraph' import { Link } from 'react-router-dom' import { keyframes } from '@emotion/react'; - -import trophy from '../assets/trophy-icon.svg' +import { getToken } from '../api/usuarioApi'; +import trophy from '../assets/trophy-icon.svg'; +import Header from './header/Header'; const trophyAnimation = keyframes` 0% { @@ -29,96 +30,125 @@ const Gratulation = () => { const lingua = localStorage.getItem("lingua"); const linguaTexto = lingua === 'portugues' ? 'português' : 'alemão'; - return ( - - - <Paragraph - text={`Você viu todas as páginas em ${linguaTexto}! Você pode realizar a Leseolympiade mais uma vez ou finalizar sua participação retornando ao site da Lemmbra. Caso deseje realizar em outro momento, solicitamos que nos informe o seu mesmo e-mail. Agradecemos sua participação!`} - maxWidth={'sm'} - mx={0} - textAlign={'justify'} - color='#ffffff' - /> + const handleLogin = async (lingua) => { + const email = localStorage.getItem('usuarioEmail') + try { + const token = await getToken(email).catch((error) => { + throw error; + }); + lingua = lingua === 'português' ? 'alemao' : 'portugues'; + localStorage.setItem('usuarioToken', token.access_token); + localStorage.setItem('lingua', lingua); + window.location.href = `/leseolympiade`; + } + catch (error) { + alert('Falha ao logar\n' + error); + } + }; - {/* Trophy icon with animation */} - <Box - sx={{ - mt: 2, - animation: `${trophyAnimation} 1.5s ease-out`, - mb: 3 - }} + return ( + <> + <Header/> + <Stack + component='section' + direction="column" + justifyContent='center' + alignItems='center' + sx={{ + py: 10, + px: 2, + backgroundColor: 'orange', + color: '#fff', + }} > - <img src={trophy} alt="Trophy" style={{ width: 300, height: 300 }} /> - </Box> - - <Box sx={{ mt: 1, py: 2 }}> - <Box> - <Button - component={Link} - variant='contained' - to={'/'} + <Title + text={'Parabéns por completar a Leseolympiade!'} + textAlign={'center'} + /> + {linguaTexto === 'português' ? ( + <Paragraph + text={`Você viu todas as páginas em português! Agora, você pode realizar a Leseolympiade em alemão ou finalizar sua participação retornando a Olimpíadas lemmbra. Caso deseje realizar em outro momento, solicitamos que nos informe o seu mesmo e-mail. Agradecemos sua participação!`} + maxWidth={'sm'} + mx={0} + textAlign={'justify'} + color='#ffffff' + /> + ) : + ( + <Paragraph + text={`Você viu todas as páginas em alemão! Agora, você pode realizar a Leseolympiade em português ou finalizar sua participação retornando a a Olimpíadas lemmbra. Caso deseje realizar em outro momento, solicitamos que nos informe o seu mesmo e-mail. Agradecemos sua participação!`} + maxWidth={'sm'} + mx={0} + textAlign={'justify'} + color='#ffffff' + /> + )} + {/* Trophy icon with animation */} + <Box sx={{ - mr: 2, - px: 4, - py: 1, - fontSize: '0.9rem', - textTransform: 'uppercase', - borderRadius: 0, - borderColor: '#14192d', - color: '#fff', - backgroundColor: '#14192d', - "&&:hover": { - backgroundColor: "#343a55" - }, - "&&:focus": { - backgroundColor: "#343a55" - } + mt: 2, + animation: `${trophyAnimation} 1.5s ease-out`, + mb: 3 }} - > - Realizar Novamente - </Button> - <Button - component={Link} - to={'https://olimpiadaslemmbra.com.br/'} - variant='outlined' - sx={{ - px: 4, - py: 1, - fontSize:'0.9rem', - textTransform: 'uppercase', - borderRadius: 0, - color: '#fff', - backgroundColor: 'transparent', - borderColor: '#fff', - "&&:hover": { - color: '#343a55', - borderColor: '#343a55', - }, - "&&:focus": { - color: '#343a55', - borderColor: '#343a55', - } - }} - > - Retornar a Lemmbra - </Button> + > + <img src={trophy} alt="Trophy" style={{ width: 300, height: 300 }} /> + </Box> + + <Box sx={{ mt: 1, py: 2 }}> + <Box> + <Button + component={Link} + variant='contained' + onClick={() => handleLogin(linguaTexto)} + sx={{ + mr: 2, + px: 4, + py: 1, + fontSize: '0.9rem', + textTransform: 'uppercase', + borderRadius: 0, + borderColor: '#14192d', + color: '#fff', + backgroundColor: '#14192d', + "&&:hover": { + backgroundColor: "#343a55" + }, + "&&:focus": { + backgroundColor: "#343a55" + } + }} + > + Realizar Novamente + </Button> + <Button + component={Link} + to={"https://olimpiadas-lemmbra.webflow.io/#faq-row-3"} + variant='outlined' + sx={{ + px: 4, + py: 1, + fontSize:'0.9rem', + textTransform: 'uppercase', + borderRadius: 0, + color: '#fff', + backgroundColor: 'transparent', + borderColor: '#fff', + "&&:hover": { + color: '#343a55', + borderColor: '#343a55', + }, + "&&:focus": { + color: '#343a55', + borderColor: '#343a55', + } + }} + > + Retornar a Olimpíadas lemmbra + </Button> + </Box> </Box> - </Box> - </Stack> + </Stack> + </> ) } diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index c6be5ae..44b2fb3 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -42,7 +42,9 @@ const Header = () => { return ( <HeaderContainer> - <LogoBox> + <LogoBox + title="Voltar a Olimpíadas lemmbra" + > {/* <IconButton onClick={() => window.location.href = "https://olimpiadas-lemmbra.webflow.io/#faq-row-3"} style={{ color: 'white', fontSize: '2rem' }} // Increased size