From 7a17bef1ae49964d7b4e3ff0de8c6c0dd4fd9ea1 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Thu, 5 Oct 2023 17:21:22 -0300 Subject: [PATCH 01/19] wip menu user --- next/components/molecules/Menu.js | 139 +++++++++++++++++++++++------- next/pages/404.js | 3 +- next/pages/500.js | 3 +- 3 files changed, 112 insertions(+), 33 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 7eec80a2..09c329c6 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -6,7 +6,6 @@ import { DrawerOverlay, DrawerContent, useDisclosure, - Avatar, Text, Accordion, AccordionItem, @@ -15,16 +14,20 @@ import { AccordionIcon, useBoolean, Divider, + Image, + Menu, + MenuButton, + MenuList, + MenuItem } from "@chakra-ui/react"; import { useEffect, useRef, useState } from "react"; import { useRouter } from "next/router" -import { MenuDropdown } from "./MenuDropdown"; import cookies from "js-cookie"; +import { MenuDropdown } from "./MenuDropdown"; import { useCheckMobile } from "../../hooks/useCheckMobile.hook" import ControlledInput from "../atoms/ControlledInput"; import Link from "../atoms/Link"; import RoundedButton from "../atoms/RoundedButton"; -import SectionText from "../atoms/SectionText"; import BDLogoProImage from "../../public/img/logos/bd_logo_pro"; import BDLogoEduImage from "../../public/img/logos/bd_logo_edu"; @@ -123,6 +126,100 @@ function MenuDrawer({ isOpen, onClose, links }) { ); } +function MenuUser ({ userData }) { + const timerRef = useRef(); + const [isOpenMenu, setIsOpenMenu] = useState(false); + + const btnMouseEnterEvent = () => { + setIsOpenMenu(true) + } + const btnMouseLeaveEvent = () => { + timerRef.current = setTimeout(() => { + setIsOpenMenu(false) + }, 100) + } + const menuListMouseEnterEvent = () => { + clearTimeout(timerRef.current) + timerRef.current = undefined + setIsOpenMenu(true) + } + const menuListMouseLeaveEvent = () => { + setIsOpenMenu(false) + } + + if(useCheckMobile()) { + return ( + + + + ) + } else { + return ( + + + + + + + + +

+ {userData?.username} +

+

+ {userData?.email} +

+ + + + ) + } + +} + function SearchInput ({ status }) { const router = useRouter() const { query } = router @@ -321,30 +418,17 @@ function DesktopLinks({ links, position = false, path }) { {!statusSearch && {userData ? ( - - - - {userData.username} - - + ) : ( <> Entrar - {/* + Cadastrar - */} + )} @@ -353,7 +437,7 @@ function DesktopLinks({ links, position = false, path }) { ); } -export default function Menu({}) { +export default function MenuNav({}) { const router = useRouter() const { route } = router const menuDisclosure = useDisclosure(); @@ -503,18 +587,11 @@ export default function Menu({}) { /> - + + {useCheckMobile() && userData && + + } diff --git a/next/pages/404.js b/next/pages/404.js index 7ab14cee..15765a65 100644 --- a/next/pages/404.js +++ b/next/pages/404.js @@ -1,10 +1,11 @@ import FourOrFourTemplate from "../components/templates/404"; +import { isMobileMod } from "../hooks/useCheckMobile.hook" import { MainPageTemplate } from "../components/templates/main"; export default function FourOFour() { return ( - + ) } \ No newline at end of file diff --git a/next/pages/500.js b/next/pages/500.js index a88a8def..58a025c6 100644 --- a/next/pages/500.js +++ b/next/pages/500.js @@ -1,10 +1,11 @@ import FiveHundredTemplate from "../components/templates/500"; +import { isMobileMod } from "../hooks/useCheckMobile.hook" import { MainPageTemplate } from "../components/templates/main"; export default function InternalServerError() { return ( - + ) } \ No newline at end of file From 56ef1650e2a8665d9bc7c98cc518a8a6d329b5c6 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Fri, 6 Oct 2023 20:14:27 -0300 Subject: [PATCH 02/19] wip page user --- next/pages/user/[username].js | 215 ++++++++++++++++++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 next/pages/user/[username].js diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js new file mode 100644 index 00000000..9d8336d3 --- /dev/null +++ b/next/pages/user/[username].js @@ -0,0 +1,215 @@ +import { + Stack, + Box, + Text, + Divider, + FormControl, + FormLabel, + FormErrorMessage, + Input, + Image, + Tooltip +} from "@chakra-ui/react"; +import { useState, useEffect } from "react"; +import { MainPageTemplate } from "../../components/templates/main"; +import { isMobileMod } from "../../hooks/useCheckMobile.hook"; +import BigTitle from "../../components/atoms/BigTitle"; +import SectionTitle from "../../components/atoms/SectionTitle"; + +import Exclamation from "../../public/img/icons/exclamationIcon"; +import PenIcon from "../../public/img/icons/penIcon"; + +export default function UserPage() { + const [sectionSelected, setSectionSelected] = useState(0) + const [formData, setFormData] = useState({ username: "", firstName: "" , lastName: "", picture: "" }) + const [errors, setErrors] = useState({ username: "", firstName: "" , lastName: "" }) + + const choices = [ + "Perfil público", + "Conta", + "Senha", + "Planos e pagamento", + "Acessos", + ] + + const LabelTextForm = ({ text, ...props }) => { + return ( + {text} + ) + } + + return ( + + + Configurações + + + + {choices.map((section, index) => ( + + setSectionSelected(index)} + > + {section} + + + ))} + + + + Perfil público + + + + + + + + + {errors.username} + + + + + + + + {errors.firstName} + + + + + + + + {errors.lastName} + + + + + + + + + + + + + + + + + + + + ) +} From 1b9477db851e286403b0ba39963057c629b374a0 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Tue, 10 Oct 2023 15:28:41 -0300 Subject: [PATCH 03/19] wip page user config --- next/pages/user/[username].js | 105 +++++++++++++++++++++++++++++++--- 1 file changed, 98 insertions(+), 7 deletions(-) diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 9d8336d3..d9959dc3 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -8,16 +8,21 @@ import { FormErrorMessage, Input, Image, - Tooltip + Tooltip, + HStack } from "@chakra-ui/react"; import { useState, useEffect } from "react"; import { MainPageTemplate } from "../../components/templates/main"; import { isMobileMod } from "../../hooks/useCheckMobile.hook"; import BigTitle from "../../components/atoms/BigTitle"; import SectionTitle from "../../components/atoms/SectionTitle"; +import RoundedButton from "../../components/atoms/RoundedButton"; import Exclamation from "../../public/img/icons/exclamationIcon"; import PenIcon from "../../public/img/icons/penIcon"; +import GithubIcon from "../../public/img/icons/githubIcon"; +import TwitterIcon from "../../public/img/icons/twitterIcon"; +import LinkedinIcon from "../../public/img/icons/linkedinIcon"; export default function UserPage() { const [sectionSelected, setSectionSelected] = useState(0) @@ -64,6 +69,7 @@ export default function UserPage() { justifyContent="space-between" spacing={0} gap="80px" + marginBottom="80px !important" > - - + + - + - + {errors.lastName} + + + + + + {errors.website} + + + + + + + + + + + + + + + + + + + + + + + + Ao preencher os campos desta página, você nos dá consentimento para compartilhar essas informações onde quer que o seu perfil de usuário apareça. + + + + Atualizar perfil + Date: Mon, 16 Oct 2023 13:09:52 -0300 Subject: [PATCH 04/19] add checkbox --- next/pages/user/[username].js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index d9959dc3..0a298d2d 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -9,7 +9,8 @@ import { Input, Image, Tooltip, - HStack + HStack, + Checkbox } from "@chakra-ui/react"; import { useState, useEffect } from "react"; import { MainPageTemplate } from "../../components/templates/main"; @@ -168,6 +169,20 @@ export default function UserPage() { + + + + Tornar o e-mail de acesso à sua conta visível para o público. + + + Date: Mon, 16 Oct 2023 19:53:50 -0300 Subject: [PATCH 05/19] wip user config page --- next/pages/user/[username].js | 597 +++++++++++++++++++++------------- 1 file changed, 371 insertions(+), 226 deletions(-) diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 0a298d2d..322eb318 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -10,7 +10,15 @@ import { Image, Tooltip, HStack, - Checkbox + Checkbox, + useDisclosure, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalCloseButton, + ModalBody, + ModalFooter } from "@chakra-ui/react"; import { useState, useEffect } from "react"; import { MainPageTemplate } from "../../components/templates/main"; @@ -18,6 +26,7 @@ import { isMobileMod } from "../../hooks/useCheckMobile.hook"; import BigTitle from "../../components/atoms/BigTitle"; import SectionTitle from "../../components/atoms/SectionTitle"; import RoundedButton from "../../components/atoms/RoundedButton"; +import Link from "../../components/atoms/Link"; import Exclamation from "../../public/img/icons/exclamationIcon"; import PenIcon from "../../public/img/icons/penIcon"; @@ -25,11 +34,362 @@ import GithubIcon from "../../public/img/icons/githubIcon"; import TwitterIcon from "../../public/img/icons/twitterIcon"; import LinkedinIcon from "../../public/img/icons/linkedinIcon"; -export default function UserPage() { - const [sectionSelected, setSectionSelected] = useState(0) +const LabelTextForm = ({ text, ...props }) => { + return ( + {text} + ) +} + +const TitleTextForm = ({ children, ...props }) => { + return ( + {children} + ) +} + +const ExtraInfoTextForm = ({children, ...props}) => { + return ( + {children} + ) +} + +const ModalGeneral = ({ + title, + children, + isOpen, + onClose +}) => { + return ( + + + + {title} + + + + {children[0]} + + + + {children[1]} + + + + ) +} + +const ProfileConfiguration = () => { const [formData, setFormData] = useState({ username: "", firstName: "" , lastName: "", picture: "" }) const [errors, setErrors] = useState({ username: "", firstName: "" , lastName: "" }) + return ( + + + + + + + {errors.username} + + + + + + + + {errors.firstName} + + + + + + + + {errors.lastName} + + + + + + + Tornar o e-mail de acesso à sua conta visível para o público. + + + + + + + + {errors.website} + + + + + + + + + + + + + + + + + + + + + + + + Ao preencher os campos desta página, você nos dá consentimento para compartilhar essas informações onde quer que o seu perfil de usuário apareça. + + + + Atualizar perfil + + + + + Foto de perfil + + + + + + + + + + + + + + ) +} + +const Account = () => { + const emailModal = useDisclosure() + const eraseModalAccount = useDisclosure() + + return ( + + + aaaaa + bbbbb + + + E-mail + meuemail@gmail.com + emailModal.onOpen()} + >Alterar e-mail + + + + Exportar dados da conta + Saiba como seus dados são armazenados em nossos Termos de Uso e Políticas de Privacidade.{!isMobileMod() &&
} Para exportar os dados da sua conta, entre em contato conosco. + Entre em contato + + + + Deletar conta + Após a exclusão, não será possível recuperar o acesso à sua conta. + Deletar minha conta + + + ) +} + +export default function UserPage() { + const [sectionSelected, setSectionSelected] = useState(1) + const choices = [ "Perfil público", "Conta", @@ -38,20 +398,6 @@ export default function UserPage() { "Acessos", ] - const LabelTextForm = ({ text, ...props }) => { - return ( - {text} - ) - } - return ( - Configurações + Configurações {choices.map((section, index) => ( @@ -104,215 +451,13 @@ export default function UserPage() { - Perfil público - - - - - - - - - {errors.username} - - - - - - - - {errors.firstName} - - - - - - - - {errors.lastName} - - - - - - - Tornar o e-mail de acesso à sua conta visível para o público. - - - - - - - - {errors.website} - - - - - + {choices[sectionSelected]} + - - - - - - - - - - - - - - - - - - Ao preencher os campos desta página, você nos dá consentimento para compartilhar essas informações onde quer que o seu perfil de usuário apareça. - - - - Atualizar perfil - - - - - - - - - - - - - - + {sectionSelected === 0 && } + {sectionSelected === 1 && } From 86c6ea2ace15fb78ba7d8b914ba18071d31bf17d Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Tue, 17 Oct 2023 17:12:09 -0300 Subject: [PATCH 06/19] add modal in conta section user page --- next/components/molecules/FormTable.js | 4 +- next/components/organisms/PostDatasetForm.js | 2 +- next/pages/precos.js | 2 +- next/pages/quem-somos.js | 1 + next/pages/user/[username].js | 255 ++++++++++++++++++- 5 files changed, 249 insertions(+), 15 deletions(-) diff --git a/next/components/molecules/FormTable.js b/next/components/molecules/FormTable.js index 1ac6b92d..c33bf77a 100644 --- a/next/components/molecules/FormTable.js +++ b/next/components/molecules/FormTable.js @@ -404,8 +404,8 @@ export default function FormTable({ - - + + Deletar table Você tem certeza em deletar esse table? Uma vez deletada, todas as informações dele e de Columns serão excluídas em consequência. diff --git a/next/components/organisms/PostDatasetForm.js b/next/components/organisms/PostDatasetForm.js index 35d8d4fb..8aa842f8 100644 --- a/next/components/organisms/PostDatasetForm.js +++ b/next/components/organisms/PostDatasetForm.js @@ -282,7 +282,7 @@ export default function PostDatasetForm({ - + Deletar dataset Você tem certeza em deletar esse dataset? Uma vez deletado, todas as informações dele e de Table e Columns serão excluídas em consequência. diff --git a/next/pages/precos.js b/next/pages/precos.js index 56fe7d22..9ae797f7 100644 --- a/next/pages/precos.js +++ b/next/pages/precos.js @@ -74,7 +74,7 @@ export default function Price() { scrollBehavior="inside" > - + Termos de serviço diff --git a/next/pages/quem-somos.js b/next/pages/quem-somos.js index 3ee4ec75..21cf74d6 100755 --- a/next/pages/quem-somos.js +++ b/next/pages/quem-somos.js @@ -94,6 +94,7 @@ const HistoryBox = ({ children, title, date, image }) => { marginBottom={isMobileMod() && "0"} background="transparent" maxWidth="1000px" + margin="24px" > {title} { return ( @@ -78,7 +83,6 @@ const ExtraInfoTextForm = ({children, ...props}) => { } const ModalGeneral = ({ - title, children, isOpen, onClose @@ -86,16 +90,23 @@ const ModalGeneral = ({ return ( - - {title} - - - + + {children[0]} - + - + {children[1]} + + + + {children[2]} @@ -330,17 +341,236 @@ const ProfileConfiguration = () => { const Account = () => { const emailModal = useDisclosure() const eraseModalAccount = useDisclosure() + const [emailSent, setEmailSent] = useState(false) + const [showPassword, setShowPassword] = useState(true) + const [formData, setFormData] = useState({ email: "", password: "" }) + const [errors, setErrors] = useState({ email: "", password: ""}) return ( - aaaaa - bbbbb + {emailSent ? + + setEmailSent(false)}> + + Voltar + + + { + setEmailSent(false) + emailModal.onClose() + }} + /> + + : + + Alterar e-mail + + + } + + {emailSent ? + + + + Confirme seu endereço de e-mail + Enviamos uma confirmação de e-mail para + dadinho@basedosdados.org + Confira sua caixa de entrada e siga as
+instruções enviadas no e-mail para completar a alteração. + + : + + + Insira o seu novo endereço de e-mail. Enviaremos as instruções para você completar a alteração. + + + + + + + {errors.email} + + + + + + + window.open("./password-recovery", "_self")} + >Esqueceu a senha? + + + + setShowPassword(!showPassword) + }} + elmRight={showPassword ? + + : + + } + /> + + {errors.password} + + + + } + + {emailSent ? + <> + : + setEmailSent(true)} + > + Enviar e-mail + + } + + + + + Tem certeza que deseja deletar sua conta? + + + + + + Após deletar sua conta, todos os dados serão permanentemente removidos e não poderão ser recuperados. + + + + + eraseModalAccount.onClose()} + > + Cancelar + + + + Deletar + + + E-mail { fontSize="16px" lineHeight="30px" letterSpacing="0.2px" + href="/contato" + target="_self" >Entre em contato @@ -381,6 +613,7 @@ const Account = () => { eraseModalAccount.onOpen()} >Deletar minha conta From ad96e8b9cfc13f0afa631457a75f4360e9f23bbd Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Tue, 17 Oct 2023 18:36:40 -0300 Subject: [PATCH 07/19] wip password section --- next/pages/user/[username].js | 360 ++++++++++++++++++++++++++++------ 1 file changed, 301 insertions(+), 59 deletions(-) diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 5475e91a..81357ed4 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -18,7 +18,9 @@ import { ModalHeader, ModalCloseButton, ModalBody, - ModalFooter + ModalFooter, + UnorderedList, + ListItem } from "@chakra-ui/react"; import { useState, useEffect } from "react"; import { MainPageTemplate } from "../../components/templates/main"; @@ -35,7 +37,7 @@ import PenIcon from "../../public/img/icons/penIcon"; import GithubIcon from "../../public/img/icons/githubIcon"; import TwitterIcon from "../../public/img/icons/twitterIcon"; import LinkedinIcon from "../../public/img/icons/linkedinIcon"; -import { EmailConfirmImage } from "../../public/img/emailImage"; +import { EmailConfirmImage, EmailRecoveryImage } from "../../public/img/emailImage"; import ChevronIcon from "../../public/img/icons/chevronIcon"; import { EyeIcon, EyeOffIcon } from "../../public/img/icons/eyeIcon"; @@ -446,63 +448,63 @@ instruções enviadas no e-mail para completar a alteração. - - - window.open("./password-recovery", "_self")} - >Esqueceu a senha? - - - - + + setShowPassword(!showPassword) - }} - elmRight={showPassword ? - - : - - } - /> - - {errors.password} - + justifyContent="end" + _hover={{opacity: "0.6"}} + onClick={() => window.open("./password-recovery", "_self")} + >Esqueceu a senha? + + + + setShowPassword(!showPassword) + }} + elmRight={showPassword ? + + : + + } + /> + + {errors.password} + } @@ -620,8 +622,247 @@ instruções enviadas no e-mail para completar a alteração. { + const newPasswordModal = useDisclosure() + const [formData, setFormData] = useState({ + password: "", + newPassword: "", + confirmPassword: "" + }) + const [errors, setErrors] = useState({ + password: "", + newPassword: "", + regexPassword: {}, + confirmPassword: "" + }) + const [showPassword, setShowPassword] = useState(true) + const [showNewPassword, setShowNewPassword] = useState(true) + const [showConfirmPassword, setShowConfirmPassword] = useState(true) + + return ( + + + + + + + + Sua senha foi alterada com sucesso + Agora você pode utilizar a nova senha para acessar sua
conta na Base dos Dados. + + + + eraseModalAccount.onClose()} + > + Continuar nas configurações + + + + Ir para a página inicial + + + + + + + window.open("./password-recovery", "_self")} + >Esqueceu a senha? + + + setShowPassword(!showPassword) + }} + elmRight={showPassword ? + + : + + } + /> + + {errors.password} + + + + + + setShowNewPassword(!showNewPassword) + }} + elmRight={showNewPassword ? + + : + + } + /> + 0 ? "#D93B3B" : "#7D7D7D"} + fontFamily= "Ubuntu" + fontSize= "12px" + fontWeight= "400" + lineHeight= "16px" + letterSpacing= "0.3px" + display="flex" + flexDirection="row" + gap="4px" + alignItems="flex-start" + > 0 ? "flex" : "none"}/> Certifique-se que a senha tenha no mínimo: + + Ter no mínimo 8 caracteres + Pelo menos uma letra maiúscula e minúscula + Um dígito + E um caractere especial + + + + + + setShowConfirmPassword(!showConfirmPassword) + }} + elmRight={showConfirmPassword ? + + : + + } + /> + + {errors.confirmPassword} + + + + newPasswordModal.onOpen()} + > + Atualizar senha + + + ) +} + export default function UserPage() { - const [sectionSelected, setSectionSelected] = useState(1) + const [sectionSelected, setSectionSelected] = useState(2) const choices = [ "Perfil público", @@ -691,6 +932,7 @@ export default function UserPage() { {sectionSelected === 0 && } {sectionSelected === 1 && } + {sectionSelected === 2 && } From 215f3a17e2af1cc56973e553efeee80aae7c5219 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Thu, 19 Oct 2023 20:01:52 -0300 Subject: [PATCH 08/19] add page Accesses and PlansAndPayment --- next/components/atoms/GreenTab.js | 1 + next/pages/user/[username].js | 355 +++++++++++++++++++++++++++++- 2 files changed, 345 insertions(+), 11 deletions(-) diff --git a/next/components/atoms/GreenTab.js b/next/components/atoms/GreenTab.js index cb3819e5..3a3eff03 100644 --- a/next/components/atoms/GreenTab.js +++ b/next/components/atoms/GreenTab.js @@ -4,6 +4,7 @@ import { Tab } from "@chakra-ui/tabs"; export default function GreenTab({ children, ...style }) { return ( { return ( @@ -271,7 +281,9 @@ const ProfileConfiguration = () => { Atualizar perfil @@ -679,7 +691,7 @@ const NewPassword = () => { color="#42B0FF" width={isMobileMod() ? "100%" : "fit-content"} _hover={{transform: "none", opacity: 0.8}} - onClick={() => eraseModalAccount.onClose()} + onClick={() => newPasswordModal.onClose()} > Continuar nas configurações @@ -688,6 +700,7 @@ const NewPassword = () => { borderRadius="30px" width={isMobileMod() ? "100%" : "fit-content"} _hover={{transform: "none", opacity: 0.8}} + onClick={() => window.open("/", "_self")} > Ir para a página inicial @@ -702,6 +715,7 @@ const NewPassword = () => { > { {errors.password} + window.open("./password-recovery", "_self")} + >Esqueceu a senha? + @@ -861,15 +886,321 @@ const NewPassword = () => { ) } +const PlansAndPayment = () => { + const TabContent = ({children}) => { + + return ( + + {children} + + ) + } + + return ( + + + + Planos + Pagamento + + + + + + + Plano atual + BD Grátis + + + Compare os planos + Faça o upgrade + + + + + + Inclui + + + Feature 1 + + + + + Feature 2 + + + + Feature 3 + + + + + Não inclui + + + Feature 1 + + + + + Feature 2 + + + + Feature 3 + + + + Veja tudo e compare os planos + + + + + + + + + + + + + ) +} + +const Accesses = () => { + + return ( + + + + + Adicionar usuário + + + + + + Usuário + Acesso + + + + + + + + Dadinho + dadinho@basedosdados.org + + + + + + + Administrador + + + + + + + ) +} + export default function UserPage() { - const [sectionSelected, setSectionSelected] = useState(2) + const [sectionSelected, setSectionSelected] = useState(4) const choices = [ - "Perfil público", - "Conta", - "Senha", - "Planos e pagamento", - "Acessos", + {bar: "Perfil público", title: "Perfil público"}, + {bar: "Conta", title: "Conta"}, + {bar: "Senha", title: "Alterar senha"}, + {bar: "Planos e pagamento", title: "Planos e pagamento"}, + {bar: "Acessos", title: "Gerenciar acessos"}, ] return ( @@ -916,7 +1247,7 @@ export default function UserPage() { width="100%" onClick={() => setSectionSelected(index)} > - {section} + {section.bar} ))} @@ -927,12 +1258,14 @@ export default function UserPage() { maxWidth="800px" spacing={0} > - {choices[sectionSelected]} + {choices[sectionSelected].title} {sectionSelected === 0 && } {sectionSelected === 1 && } {sectionSelected === 2 && } + {sectionSelected === 3 && } + {sectionSelected === 4 && } From 4833cc2130ba41674cb760991239ccdca89b1dec Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Fri, 20 Oct 2023 19:35:14 -0300 Subject: [PATCH 09/19] wip menu mobile user --- next/components/molecules/Menu.js | 66 ++++++++++++++++++++++++++++--- next/pages/user/[username].js | 2 +- 2 files changed, 62 insertions(+), 6 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 09c329c6..d00c3ae9 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -1,5 +1,6 @@ import { Box, + Stack, HStack, VStack, Drawer, @@ -126,9 +127,61 @@ function MenuDrawer({ isOpen, onClose, links }) { ); } -function MenuUser ({ userData }) { - const timerRef = useRef(); - const [isOpenMenu, setIsOpenMenu] = useState(false); +function MenuDrawerUser({ isOpen, onClose}) { + + return ( + + + + window.open("/", "_self")} + /> + + + + + + Dadinho + dadinho@basedosdados.org + + + + + + ) +} + +function MenuUser ({ userData, onOpen, onClose }) { + const timerRef = useRef() + const [isOpenMenu, setIsOpenMenu] = useState(false) const btnMouseEnterEvent = () => { setIsOpenMenu(true) @@ -158,6 +211,7 @@ function MenuUser ({ userData }) { borderRadius="50%" overflow="hidden" display={{ base: "flex", lg: "none" }} + onClick={() => onOpen()} > {useCheckMobile() && userData && - + } + diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 3a64bd6a..7018c098 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -1193,7 +1193,7 @@ const Accesses = () => { } export default function UserPage() { - const [sectionSelected, setSectionSelected] = useState(4) + const [sectionSelected, setSectionSelected] = useState(0) const choices = [ {bar: "Perfil público", title: "Perfil público"}, From 4e9fec74f3b01299b85081c1c2b58a2f553c35ac Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Mon, 23 Oct 2023 20:13:59 -0300 Subject: [PATCH 10/19] wip mobile and desktop menu user --- next/components/molecules/Menu.js | 140 +++++++++++++++++++++++--- next/pages/user/[username].js | 29 ++++-- next/public/img/icons/settingsIcon.js | 14 +++ 3 files changed, 164 insertions(+), 19 deletions(-) create mode 100644 next/public/img/icons/settingsIcon.js diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index d00c3ae9..24163e7b 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -37,6 +37,7 @@ import FarBarsIcon from "../../public/img/icons/farBarsIcon"; import SearchIcon from "../../public/img/icons/searchIcon"; import CrossIcon from "../../public/img/icons/crossIcon"; import RedirectIcon from "../../public/img/icons/redirectIcon"; +import SettingsIcon from "../../public/img/icons/settingsIcon"; function MenuDrawer({ isOpen, onClose, links }) { return ( @@ -128,6 +129,15 @@ function MenuDrawer({ isOpen, onClose, links }) { } function MenuDrawerUser({ isOpen, onClose}) { + const router = useRouter() + + const links = [ + {name: "Perfil público", value: "profile"}, + {name: "Conta", value: "account"}, + {name: "Senha", value: "new_password"}, + {name: "Planos e pagamento", value: "plans_and_payment"}, + {name: "Acessos", value: "accesses"}, + ] return ( @@ -140,12 +150,13 @@ function MenuDrawerUser({ isOpen, onClose}) { onClick={() => window.open("/", "_self")} /> - + dadinho@basedosdados.org - + + + + + + + Configurações + + + + + + {links.map((elm, index) => { + return ( + { + onClose() + router.push({pathname: "/user/dev", query: elm.value})} + } + >{elm.name} + ) + })} + + + ) @@ -226,25 +284,23 @@ function MenuUser ({ userData, onOpen, onClose }) { return ( @@ -252,20 +308,78 @@ function MenuUser ({ userData, onOpen, onClose }) { -

- {userData?.username} -

-

- {userData?.email} -

+ + + + + Dadinho + + + dadinho@basedosdados.org + + + + window.open("/user/dev", "_self")} + > + + + Configurações + diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 7018c098..6ccbc365 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -31,6 +31,7 @@ import { GridItem } from "@chakra-ui/react"; import { useState, useEffect } from "react"; +import { useRouter } from "next/router"; import { MainPageTemplate } from "../../components/templates/main"; import { isMobileMod } from "../../hooks/useCheckMobile.hook"; import BigTitle from "../../components/atoms/BigTitle"; @@ -1193,16 +1194,32 @@ const Accesses = () => { } export default function UserPage() { + const router = useRouter() + const { query } = router const [sectionSelected, setSectionSelected] = useState(0) const choices = [ - {bar: "Perfil público", title: "Perfil público"}, - {bar: "Conta", title: "Conta"}, - {bar: "Senha", title: "Alterar senha"}, - {bar: "Planos e pagamento", title: "Planos e pagamento"}, - {bar: "Acessos", title: "Gerenciar acessos"}, + {bar: "Perfil público", title: "Perfil público", value: "profile", index: 0}, + {bar: "Conta", title: "Conta", value: "account", index: 1}, + {bar: "Senha", title: "Alterar senha", value: "new_password", index: 2}, + {bar: "Planos e pagamento", title: "Planos e pagamento", value: "plans_and_payment", index: 3}, + {bar: "Acessos", title: "Gerenciar acessos", value: "accesses", index: 4}, ] + useEffect(() => { + const key = Object.keys(query) + const removeElem = key.indexOf("username") + if (removeElem !== -1) key.splice(removeElem, 1) + + if (key.length === 0) return + + for (const elements of choices) { + if (elements.value === key[0]) { + setSectionSelected(elements.index) + } + } + }, [query]) + return ( setSectionSelected(index)} + onClick={() => router.push({pathname: "/user/dev", query: section.value})} > {section.bar} diff --git a/next/public/img/icons/settingsIcon.js b/next/public/img/icons/settingsIcon.js new file mode 100644 index 00000000..c5345385 --- /dev/null +++ b/next/public/img/icons/settingsIcon.js @@ -0,0 +1,14 @@ +import { createIcon } from '@chakra-ui/icons'; + +const SettingsIcon = createIcon({ + displayName: "settings", + viewBox: "0 0 22 22", + path: ( + + ) +}) + +export default SettingsIcon From 0bdb67a84094e2e50a97fd6a69d0a302287b058c Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Wed, 25 Oct 2023 01:22:44 -0300 Subject: [PATCH 11/19] wip mobile mode in user page --- next/pages/precos.js | 619 +++++++++++++++++----------------- next/pages/user/[username].js | 103 +++++- 2 files changed, 413 insertions(+), 309 deletions(-) diff --git a/next/pages/precos.js b/next/pages/precos.js index 9ae797f7..b3266ac4 100644 --- a/next/pages/precos.js +++ b/next/pages/precos.js @@ -27,348 +27,352 @@ import CheckIcon from "../public/img/icons/checkIcon"; import CrossIcon from "../public/img/icons/crossIcon"; import InfoIcon from '../public/img/icons/infoIcon'; -export default function Price() { - const CardPrice = ({ - colorBanner, - title, - badge, - subTitle, - personConfig, - textResource, - resources = [], - button, - hasServiceTerms= false - }) => { - const { isOpen, onOpen, onClose } = useDisclosure() - const [nubmerOfPerson, setNubmerOfPerson] = useState(personConfig.person) - const [priceValue, setPriceValue] = useState(personConfig.price) - const [linkStripe, setLinkStripe] = useState("") +export const CardPrice = ({ + colorBanner, + title, + badge, + subTitle, + personConfig, + textResource, + resources = [], + button, + hasServiceTerms= false +}) => { + const { isOpen, onOpen, onClose } = useDisclosure() + const [nubmerOfPerson, setNubmerOfPerson] = useState(personConfig.person) + const [priceValue, setPriceValue] = useState(personConfig.price) + const [linkStripe, setLinkStripe] = useState("") - const addRemovePersonPrice = (action) => { - if(action === "add") { - const personAdd = nubmerOfPerson + 1 - setNubmerOfPerson(personAdd) - setPriceValue(150 + 50 * personAdd) - } - if(action === "remove") { - const personRemove = nubmerOfPerson - 1 - setNubmerOfPerson(personRemove) - setPriceValue(150 + 50 * personRemove) - } + const addRemovePersonPrice = (action) => { + if(action === "add") { + const personAdd = nubmerOfPerson + 1 + setNubmerOfPerson(personAdd) + setPriceValue(150 + 50 * personAdd) + } + if(action === "remove") { + const personRemove = nubmerOfPerson - 1 + setNubmerOfPerson(personRemove) + setPriceValue(150 + 50 * personRemove) } + } - return ( - + - - - - Termos de serviço - - - + + + Termos de serviço + + + - - + + Fechar + + {linkStripe !== "" && + { + onClose() + window.open(linkStripe, "_blank") + setLinkStripe("") + }} > - Fechar + Concordar - {linkStripe !== "" && - { - onClose() - window.open(linkStripe, "_blank") - setLinkStripe("") - }} - > - Concordar - - } - - - + } + + + + + - - - {title} - {badge && - {badge}} - + {title} + {badge && + {badge}} + - {subTitle} + {subTitle} - - R$ {priceValue} + + R$ {priceValue} + /mês + + {/* inclui {nubmerOfPerson} pessoa{nubmerOfPerson >= 2 && "s"} */} + + + {personConfig.text && + <> /mês - - {/* inclui {nubmerOfPerson} pessoa{nubmerOfPerson >= 2 && "s"} */} + textAlign="initial" + > + {personConfig.text} + - - {personConfig.text && - <> + + - {personConfig.text} - + lineHeight="24px" + letterSpacing="0.5px" + padding="7px 20px 9px" + >{nubmerOfPerson - personConfig.person} + + + + } + + + + + + + {textResource} + + {resources.map((elm, i) => { + return ( - - + {nubmerOfPerson - personConfig.person} - + > + {elm.name} + + {elm.tooltip && + + + + } - - } - + ) + })} - - - {textResource} - - - {resources.map((elm, i) => { - return ( - - - - {elm.name} - - {elm.tooltip && - - - - } - - ) - })} - + { + if(button?.noHasModal) return window.open(button.href, "_self") + onOpen() + setLinkStripe(button.href) + }} + border={button.color && `1px solid ${button.colorText}`} + > + {button.text} + - - { - onOpen() - setLinkStripe(button.href) - }} - border={button.color && `1px solid ${button.colorText}`} - > - {button.text} - - - - {hasServiceTerms && - Leia os - { - onOpen() - setLinkStripe("") - }} - >termos de serviço - . - - } - - + {hasServiceTerms && + Leia os + { + onOpen() + setLinkStripe("") + }} + >Termos de serviço + . + + } + - ) - } - + + ) +} + +export default function Price() { return ( @@ -406,18 +410,18 @@ export default function Price() { Para você descobrir o potencial da
plataforma de dados} + subTitle={Para você descobrir o potencial da plataforma de dados} personConfig={{ price: "0" }} @@ -435,6 +439,7 @@ export default function Price() { text: "Explorar recursos", href: "/dataset", target: "_self", + noHasModal: true, color: "#FFF", colorText: "#42B0FF" }} @@ -461,7 +466,7 @@ export default function Price() { Para sua empresa ganhar tempo
e qualidade em decisões} personConfig={{ diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 6ccbc365..ee8cbe38 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -40,6 +40,8 @@ import RoundedButton from "../../components/atoms/RoundedButton"; import ButtonSimple from "../../components/atoms/SimpleButton"; import InputForm from "../../components/atoms/SimpleInput" import Link from "../../components/atoms/Link"; +import BodyText from "../../components/atoms/BodyText"; +import { CardPrice } from "../precos" import Exclamation from "../../public/img/icons/exclamationIcon"; import PenIcon from "../../public/img/icons/penIcon"; @@ -98,7 +100,8 @@ const ExtraInfoTextForm = ({children, ...props}) => { const ModalGeneral = ({ children, isOpen, - onClose + onClose, + propsModalContent }) => { return ( @@ -109,6 +112,7 @@ const ModalGeneral = ({ boxSizing="content-box" padding="32px" borderRadius="20px" + {...propsModalContent} > {children[0]} @@ -888,8 +892,9 @@ const NewPassword = () => { } const PlansAndPayment = () => { - const TabContent = ({children}) => { + const PlansModal = useDisclosure() + const TabContent = ({children}) => { return ( { return ( + + + + Compare os planos + + + + + Para você descobrir o potencial da plataforma de dados} + personConfig={{ + price: "0" + }} + textResource="Recursos:" + resources={[ + {name: "Tabelas tratadas"}, + {name: "Dados integrados", tooltip: "Nossa metodologia de padronização e compatibilização de dados permite que você cruze tabelas de diferentes instituições e temas de maneira simplificada."}, + {name: "Acesso em nuvem"}, + {name: "Acesso via SQL, Python, R e Stata"}, + {name: "Integração com ferramentas BI"}, + {name: "Download até 200.000 linhas"}, + {name: "Até 1TB de processamento", tooltip: "Limite mensal gratuito oferecido pelo Google Cloud."} + ]} + button={{ + text: "Explorar recursos", + href: "/dataset", + target: "_self", + noHasModal: true, + color: "#FFF", + colorText: "#42B0FF" + }} + /> + + Para você ter acesso aos
dados mais atualizados} + personConfig={{ + price: "47" + }} + textResource="Todos os recursos da BD Grátis, mais:" + resources={[ + {name: "Dezenas de bases de alta frequência atualizadas"}, + ]} + button={{ + text: "Iniciar teste grátis", + href: "https://buy.stripe.com/8wM01TeVQ3kg0mIeV4?locale=pt" + }} + hasServiceTerms + /> + + Para sua empresa ganhar tempo
e qualidade em decisões} + personConfig={{ + price: "350" + }} + textResource="Todos os recursos da BD Pro, mais:" + resources={[ + {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"} + ]} + button={{ + text: "Assine já", + href: "https://buy.stripe.com/00g4i93d8f2Y5H24gr?locale=pt" + }} + hasServiceTerms + /> + + + { color="#42B0FF" width={isMobileMod() ? "100%" : "fit-content"} _hover={{transform: "none", opacity: 0.8}} + onClick={() => PlansModal.onOpen()} >Compare os planos { letterSpacing="0.3px" _hover={{opacity: 0.7}} marginTop="16px !important" + onClick={() => PlansModal.onOpen()} > Veja tudo e compare os planos From baeb6e99ccc1b1077b9f1f08b2d1447695efc3a5 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Wed, 25 Oct 2023 22:28:29 -0300 Subject: [PATCH 12/19] wip page acess in user --- next/pages/user/[username].js | 347 +++++++++++++++++++++------------- 1 file changed, 216 insertions(+), 131 deletions(-) diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index ee8cbe38..d62da19f 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -53,6 +53,7 @@ import ChevronIcon from "../../public/img/icons/chevronIcon"; import { EyeIcon, EyeOffIcon } from "../../public/img/icons/eyeIcon"; import CheckIcon from "../../public/img/icons/checkIcon"; import CrossIcon from "../../public/img/icons/crossIcon"; +import InfoIcon from "../../public/img/icons/infoIcon"; const LabelTextForm = ({ text, ...props }) => { return ( @@ -101,10 +102,11 @@ const ModalGeneral = ({ children, isOpen, onClose, + isCentered = true, propsModalContent }) => { return ( - + { const PlansAndPayment = () => { const PlansModal = useDisclosure() + const resources={ + "bdGratis" : [ + {name: "Tabelas tratadas"}, + {name: "Dados integrados", tooltip: "Nossa metodologia de padronização e compatibilização de dados permite que você cruze tabelas de diferentes instituições e temas de maneira simplificada."}, + {name: "Acesso em nuvem"}, + {name: "Acesso via SQL, Python, R e Stata"}, + {name: "Integração com ferramentas BI"}, + {name: "Download até 200.000 linhas"}, + {name: "Até 1TB de processamento", tooltip: "Limite mensal gratuito oferecido pelo Google Cloud."}], + "bdPro" : [ + {name: "Dezenas de bases de alta frequência atualizadas"} + ], + "bdEmpresas" : [ + {name: "Acesso para 10 contas"}, + {name: "Suporte prioritário via email e Discord"} + ] + } + const TabContent = ({children}) => { return ( { isOpen={PlansModal.isOpen} onClose={PlansModal.onClose} propsModalContent={{maxWidth: "fit-content"}} + isCentered={isMobileMod() ? false : true} > @@ -1023,8 +1044,13 @@ const PlansAndPayment = () => { - - + + { lineHeight="36px" >BD Grátis - + { - + { letterSpacing="0.2px" marginBottom="8px" >Inclui - - - Feature 1 - - - - - Feature 2 - - - - Feature 3 - + {resources.bdGratis.map((elm, index) => { + return ( + + + {elm.name} + {elm.tooltip && + + + + } + + ) + })} @@ -1120,40 +1152,70 @@ const PlansAndPayment = () => { letterSpacing="0.2px" marginBottom="8px" >Não inclui - - - Feature 1 - - - - - Feature 2 - - - - Feature 3 - + {resources.bdPro.map((elm, index) => { + return ( + + + {elm.name} + {elm.tooltip && + + + + } + + ) + })} + {resources.bdEmpresas.map((elm, index) => { + return ( + + + {elm.name} + {elm.tooltip && + + + + } + + ) + })} { Adicionar usuário - - Usuário - Acesso + + + Usuário + + + Acesso + - + - - Dadinho - dadinho@basedosdados.org - - - - - Dadinho + - Administrador - - + height="27px" + isTruncated + >dadinho@basedosdados.org + + + + Administrador + + ) @@ -1337,7 +1421,8 @@ export default function UserPage() { justifyContent="space-between" spacing={0} gap="80px" - marginBottom={isMobileMod() ? "" : "80px !important"} + width="100%" + marginBottom={isMobileMod() ? "0px" : "80px !important"} > Date: Wed, 25 Oct 2023 22:42:56 -0300 Subject: [PATCH 13/19] fix menu syntax err --- next/components/molecules/Menu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 6e388d0b..bcd4bf8a 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -589,7 +589,7 @@ function DesktopLinks({ links, position = false, path }) { ) : ( <> - {/* + Entrar @@ -765,5 +765,5 @@ export default function MenuNav({}) { - ); + ) } From b57889ba9cf9eaab5af5efd23df4b5b6305fa1d8 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Thu, 26 Oct 2023 17:24:54 -0300 Subject: [PATCH 14/19] wip att user page --- next/pages/precos.js | 4 ++-- next/pages/user/[username].js | 20 ++++++++++++++------ next/pages/user/password-recovery.js | 2 +- next/pages/user/register.js | 16 ++++++++++------ 4 files changed, 27 insertions(+), 15 deletions(-) diff --git a/next/pages/precos.js b/next/pages/precos.js index b3266ac4..b57bfa89 100644 --- a/next/pages/precos.js +++ b/next/pages/precos.js @@ -361,7 +361,7 @@ export const CardPrice = ({ onOpen() setLinkStripe("") }} - >Termos de serviço + >Termos de Serviços . } @@ -477,7 +477,7 @@ export default function Price() { {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"} ]} button={{ - text: "Assine já", + text: "Iniciar teste grátis", href: "https://buy.stripe.com/00g4i93d8f2Y5H24gr?locale=pt" }} hasServiceTerms diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index d62da19f..9d3a8c35 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -155,6 +155,7 @@ const ProfileConfiguration = () => { height="40px" fontSize="14px" borderRadius="16px" + _placeholder={{color: "#A3A3A3"}} _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} /> @@ -173,6 +174,7 @@ const ProfileConfiguration = () => { height="40px" fontSize="14px" borderRadius="16px" + _placeholder={{color: "#A3A3A3"}} _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} /> @@ -191,6 +193,7 @@ const ProfileConfiguration = () => { height="40px" fontSize="14px" borderRadius="16px" + _placeholder={{color: "#A3A3A3"}} _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} /> @@ -213,7 +216,7 @@ const ProfileConfiguration = () => { - + { height="40px" fontSize="14px" borderRadius="16px" + _placeholder={{color: "#A3A3A3"}} _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} /> @@ -244,6 +248,7 @@ const ProfileConfiguration = () => { height="40px" fontSize="14px" borderRadius="16px" + _placeholder={{color: "#A3A3A3"}} /> @@ -258,6 +263,7 @@ const ProfileConfiguration = () => { height="40px" fontSize="14px" borderRadius="16px" + _placeholder={{color: "#A3A3A3"}} /> @@ -267,11 +273,12 @@ const ProfileConfiguration = () => { id="linkedin" name="linkedin" value={formData.linkedin} - placeholder="Link para o perfil no Linkedin" + placeholder="Link para o perfil no LinkedIn" fontFamily="ubuntu" height="40px" fontSize="14px" borderRadius="16px" + _placeholder={{color: "#A3A3A3"}} /> @@ -833,10 +840,11 @@ const NewPassword = () => { alignItems="flex-start" > 0 ? "flex" : "none"}/> Certifique-se que a senha tenha no mínimo: - Ter no mínimo 8 caracteres - Pelo menos uma letra maiúscula e minúscula + 8 caracteres + Uma letra maiúscula + Uma letra minúscula Um dígito - E um caractere especial + Um caractere especial @@ -1026,7 +1034,7 @@ const PlansAndPayment = () => { {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"} ]} button={{ - text: "Assine já", + text: "Iniciar teste grátis", href: "https://buy.stripe.com/00g4i93d8f2Y5H24gr?locale=pt" }} hasServiceTerms diff --git a/next/pages/user/password-recovery.js b/next/pages/user/password-recovery.js index ad373461..4155aa89 100644 --- a/next/pages/user/password-recovery.js +++ b/next/pages/user/password-recovery.js @@ -64,7 +64,7 @@ export default function PasswordRecovery() { 0 ? "flex" : "none"}/> Certifique-se que a senha tenha no mínimo: - Ter no mínimo 8 caracteres - Pelo menos uma letra maiúscula e minúscula + 8 caracteres + Uma letra maiúscula + Uma letra minúscula Um dígito - E um caractere especial + Um caractere especial - + Date: Tue, 31 Oct 2023 14:06:33 -0300 Subject: [PATCH 15/19] ajust visual card Price --- next/pages/precos.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next/pages/precos.js b/next/pages/precos.js index b57bfa89..9857319c 100644 --- a/next/pages/precos.js +++ b/next/pages/precos.js @@ -361,7 +361,7 @@ export const CardPrice = ({ onOpen() setLinkStripe("") }} - >Termos de Serviços + >Termos de Serviço . } From 6717bda7948065905892ad02a15e514f5dde562f Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Tue, 31 Oct 2023 14:33:11 -0300 Subject: [PATCH 16/19] wip page user edit --- next/pages/api/user/registerAccount.js | 3 +- next/pages/user/[username].js | 124 +++++++++++++++++-------- 2 files changed, 86 insertions(+), 41 deletions(-) diff --git a/next/pages/api/user/registerAccount.js b/next/pages/api/user/registerAccount.js index 7ad2cc5e..0e78d73b 100644 --- a/next/pages/api/user/registerAccount.js +++ b/next/pages/api/user/registerAccount.js @@ -5,6 +5,7 @@ const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` export default async function registerAccount({ firstName, lastName = "", + username, email, password, }) { @@ -20,7 +21,7 @@ export default async function registerAccount({ mutation { CreateUpdateAccount (input: { - username : "${email}" + username : "${username}" email: "${email}" firstName: "${firstName}" lastName: "${lastName}" diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 9d3a8c35..22bd9660 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -133,8 +133,15 @@ const ModalGeneral = ({ } const ProfileConfiguration = () => { - const [formData, setFormData] = useState({ username: "", firstName: "" , lastName: "", picture: "" }) - const [errors, setErrors] = useState({ username: "", firstName: "" , lastName: "" }) + const [formData, setFormData] = useState({ firstName: "" , lastName: "", picture: "" }) + const [errors, setErrors] = useState({ firstName: "" , lastName: "" }) + + const handleInputChange = (e) => { + setFormData((prevState) => ({ + ...prevState, + [e.target.name]: e.target.value, + })) + } return ( { gap={isMobileMod() ? "40px" : "80px"} > - - - - - {errors.username} - - - { id="lastName" name="lastName" value={formData.lastName} + onChange={handleInputChange} placeholder="Insira seu sobrenome" fontFamily="ubuntu" height="40px" @@ -221,6 +211,7 @@ const ProfileConfiguration = () => { id="website" name="website" value={formData.website} + onChange={handleInputChange} placeholder="Insira seu endereço URL" fontFamily="ubuntu" height="40px" @@ -243,6 +234,7 @@ const ProfileConfiguration = () => { id="github" name="github" value={formData.github} + onChange={handleInputChange} placeholder="Link para o perfil no GitHub" fontFamily="ubuntu" height="40px" @@ -258,6 +250,7 @@ const ProfileConfiguration = () => { id="twitter" name="twitter" value={formData.twitter} + onChange={handleInputChange} placeholder="Link para o perfil no Twitter" fontFamily="ubuntu" height="40px" @@ -273,6 +266,7 @@ const ProfileConfiguration = () => { id="linkedin" name="linkedin" value={formData.linkedin} + onChange={handleInputChange} placeholder="Link para o perfil no LinkedIn" fontFamily="ubuntu" height="40px" @@ -297,7 +291,10 @@ const ProfileConfiguration = () => { Atualizar perfil @@ -330,13 +327,15 @@ const ProfileConfiguration = () => { alignItems="center" justifyContent="center" position="absolute" - cursor="pointer" + // cursor="pointer" + cursor="default" bottom="10px" left="10px" width="32px" height="32px" borderRadius="50%" - backgroundColor="#2B8C4D" + backgroundColor="#C4C4C4" + // backgroundColor="#2B8C4D" > { const [formData, setFormData] = useState({ email: "", password: "" }) const [errors, setErrors] = useState({ email: "", password: ""}) + const handleInputChange = (e) => { + setFormData((prevState) => ({ + ...prevState, + [e.target.name]: e.target.value, + })) + } + return ( {errors.email} - + Deletar @@ -620,6 +627,27 @@ instruções enviadas no e-mail para completar a alteração.Alterar e-mail + {/* + Nome de usuário + dadinho + emailModal.onOpen()} + >Alterar nome de usuário + */} + Exportar dados da conta Saiba como seus dados são armazenados em nossos Termos de Uso e Políticas de Privacidade.{!isMobileMod() &&
} Para exportar os dados da sua conta, entre em contato conosco. @@ -665,6 +693,13 @@ const NewPassword = () => { const [showNewPassword, setShowNewPassword] = useState(true) const [showConfirmPassword, setShowConfirmPassword] = useState(true) + const handleInputChange = (e) => { + setFormData((prevState) => ({ + ...prevState, + [e.target.name]: e.target.value, + })) + } + return ( { + { id="password" name="password" value={formData.password} - // onChange={handleInputChange} + onChange={handleInputChange} placeholder="Insira a senha atual" fontFamily="ubuntu" height="40px" @@ -794,10 +830,10 @@ const NewPassword = () => { { id="confirmPassword" name="confirmPassword" value={formData.confirmPassword} - // onChange={handleInputChange} + onChange={handleInputChange} placeholder="Insira a senha novamente" fontFamily="ubuntu" height="40px" @@ -922,7 +958,7 @@ const PlansAndPayment = () => { ] } - const TabContent = ({children}) => { + const TabContent = ({children, ...props}) => { return ( { borderBottom: "3px solid #2B8C4D", pointerEvents: "none" }} + {...props} > {children} @@ -1047,7 +1084,10 @@ const PlansAndPayment = () => { borderBottom= "2px solid #DEDFE0 !important" > Planos - Pagamento + Pagamento @@ -1096,7 +1136,10 @@ const PlansAndPayment = () => { Faça o upgrade @@ -1275,6 +1318,7 @@ const Accesses = () => { borderRadius="30px" width={isMobileMod() ? "100%" : "fit-content"} _hover={{transform: "none"}} + cursor="default" backgroundColor="#C4C4C4" >Adicionar usuário From c400fc1b9ef3d6ede02ec2da3650db8b5ddc2f0c Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Tue, 31 Oct 2023 15:17:38 -0300 Subject: [PATCH 17/19] add infos in Menu --- next/components/molecules/Menu.js | 16 +++++++++------- next/middlewares/authUser.js | 4 ++-- next/pages/user/login.js | 2 +- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index bcd4bf8a..ace29d29 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -130,6 +130,8 @@ function MenuDrawer({ isOpen, onClose, links }) { function MenuDrawerUser({ isOpen, onClose}) { const router = useRouter() + let userData = cookies.get("user") || null + if(userData !== null) userData = JSON.parse(cookies.get("user")) const links = [ {name: "Perfil público", value: "profile"}, @@ -163,7 +165,7 @@ function MenuDrawerUser({ isOpen, onClose}) { alt="" width="100%" height="100%" - src="https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png" + src={userData?.picture ? userData?.picture : "https://basedosdados-static.s3.us-east-2.amazonaws.com/equipe/sem_foto.png"} /> Dadinho + >{userData?.username ? userData?.username : "Dadinho"} dadinho@basedosdados.org + >{userData?.email ? userData?.email : "dadinho@basedosdados.org"} @@ -346,7 +348,7 @@ function MenuUser ({ userData, onOpen, onClose }) { lineHeight="16px" letterSpacing="0.3px" > - Dadinho + {userData?.username ? userData?.username : "dadinho"} - dadinho@basedosdados.org + {userData?.email ? userData?.email : "dadinho@basedosdados.org"} @@ -586,7 +588,7 @@ function DesktopLinks({ links, position = false, path }) { {!statusSearch && {userData ? ( - + ) : ( <> @@ -625,7 +627,7 @@ export default function MenuNav({}) { {icon: , name: "Dados exclusivos", href: "https://info.basedosdados.org/bd-pro"}, {icon: , name: "Curso de dados", href: "https://info.basedosdados.org/bd-edu"}, {}, - {name: "Serviços", href: "/servicos"}, + {name: "Serviço", href: "/servicos"}, {}, {name: "Estudos de caso", href: "/estudos-de-caso"} ], diff --git a/next/middlewares/authUser.js b/next/middlewares/authUser.js index 2c15a5e9..25082aeb 100644 --- a/next/middlewares/authUser.js +++ b/next/middlewares/authUser.js @@ -22,8 +22,8 @@ async function isJWTInvalid(token) { export default async function authUser(context, destiny) { const { req, res } = context - // const invalidToken = await isJWTInvalid(req.cookies.token) - const invalidToken = true + const invalidToken = await isJWTInvalid(req.cookies.token) + // const invalidToken = true if (invalidToken) { cookies.remove('user', { path: '/' }) diff --git a/next/pages/user/login.js b/next/pages/user/login.js index 822160e2..94608962 100644 --- a/next/pages/user/login.js +++ b/next/pages/user/login.js @@ -52,7 +52,7 @@ export default function Login() { } const fetchToken = async ({ email, password }) => { - const result = await getToken({email: "email", password: "password"}) + const result = await getToken({email: email, password: password}) if(result?.tokenAuth === null || result?.errors?.length > 0) return setErrors({login:"E-mail ou senha incorretos."}) From 4004c9022b13ca020ba47cd8ce9da12e0c31f60c Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Tue, 31 Oct 2023 16:48:09 -0300 Subject: [PATCH 18/19] wip login register menu mobile --- next/components/molecules/Menu.js | 29 ++++++++++++++++++++++++++++- next/content/FAQ.js | 2 +- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index ace29d29..7f971843 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -25,7 +25,7 @@ import { useEffect, useRef, useState } from "react"; import { useRouter } from "next/router" import cookies from "js-cookie"; import { MenuDropdown } from "./MenuDropdown"; -import { useCheckMobile } from "../../hooks/useCheckMobile.hook" +import { isMobileMod, useCheckMobile } from "../../hooks/useCheckMobile.hook" import ControlledInput from "../atoms/ControlledInput"; import Link from "../atoms/Link"; import RoundedButton from "../atoms/RoundedButton"; @@ -40,6 +40,8 @@ import RedirectIcon from "../../public/img/icons/redirectIcon"; import SettingsIcon from "../../public/img/icons/settingsIcon"; function MenuDrawer({ isOpen, onClose, links }) { + let userData = cookies.get("user") || null + return ( @@ -123,6 +125,31 @@ function MenuDrawer({ isOpen, onClose, links }) { } })} + + {userData ? + <> + : + + window.open("/user/login", "_self")} + > + Entrar + + window.open("/user/register", "_self")} + > + Cadastrar + + + } ); diff --git a/next/content/FAQ.js b/next/content/FAQ.js index 9af14ea5..25eeb031 100644 --- a/next/content/FAQ.js +++ b/next/content/FAQ.js @@ -347,7 +347,7 @@ export const QuestionFAQ = [

    -
  1. Acesse o Google Cloud. Caso for a sua primeira vez, aceite os Termos de Serviços.
    2. +
  2. Acesse o Google Cloud. Caso for a sua primeira vez, aceite os Termos de Serviço.
  3. Clique em Create Project/Criar Projeto. Escolha um nome bacana para o projeto.
  4. Clique em Create/Criar.
From fd89156f76b6a66aededcb440a8648d9a7ea4137 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Tue, 31 Oct 2023 20:30:57 -0300 Subject: [PATCH 19/19] update page login register and user page --- next/components/molecules/Footer.js | 6 +- next/components/molecules/Menu.js | 195 +++++++++++++++++++++++++-- next/components/templates/main.js | 6 +- next/pages/user/[username].js | 4 +- next/pages/user/login.js | 10 +- next/pages/user/password-recovery.js | 9 +- next/pages/user/register.js | 9 +- next/public/img/icons/signOutIcon.js | 14 ++ 8 files changed, 229 insertions(+), 24 deletions(-) create mode 100644 next/public/img/icons/signOutIcon.js diff --git a/next/components/molecules/Footer.js b/next/components/molecules/Footer.js index 18fdc355..b134d480 100644 --- a/next/components/molecules/Footer.js +++ b/next/components/molecules/Footer.js @@ -62,7 +62,7 @@ function FooterLink(props) { ) } -export default function Footer({ pages }) { +export default function Footer({ pages, ocult = false }) { const mobileCheck = useCheckMobile() const [isMobileMod, setIsMobileMod] = useState(false) @@ -70,8 +70,10 @@ export default function Footer({ pages }) { setIsMobileMod(mobileCheck) },[]) + if(ocult === true) return null + return ( - window.open(b.href, "_blank")} > {b.name} @@ -135,6 +137,7 @@ function MenuDrawer({ isOpen, onClose, links }) { border="2px solid #42B0FF" color="#42B0FF" height="38px" + borderRadius="30px" fontSize="20px" onClick={() => window.open("/user/login", "_self")} > @@ -143,6 +146,7 @@ function MenuDrawer({ isOpen, onClose, links }) { window.open("/user/register", "_self")} > @@ -261,6 +265,33 @@ function MenuDrawerUser({ isOpen, onClose}) { + + + + { + cookies.remove('user', { path: '/' }) + cookies.remove('token', { path: '/' }) + window.open("/", "_self") + }} + > + + + Sair + + ) @@ -297,11 +328,9 @@ function MenuUser ({ userData, onOpen, onClose }) { width="40px" borderRadius="50%" overflow="hidden" - display={{ base: "flex", lg: "none" }} onClick={() => onOpen()} > + + { + cookies.remove('user', { path: '/' }) + cookies.remove('token', { path: '/' }) + window.open("/", "_self")} + } + > + + + Sair + + ) @@ -492,7 +547,99 @@ function SearchInput ({ status }) { ) } -function DesktopLinks({ links, position = false, path }) { +function SearchInputUser () { + const [search, setSearch] = useState("") + const [showSearch, setShowSearch] = useState(false) + + function openSearchLink() { + window.open(`/dataset?q=${search}`, "_self") + } + + // if(isMobileMod()) return ( + // + // setShowSearch(true)} + // /> + // + // openSearchLink()} + // /> + // } + // /> + // + // + // ) + + if(isMobileMod()) return null + + return ( + + openSearchLink()} + /> + } + /> + + ) +} + +function DesktopLinks({ links, position = false, path, userTemplate = false }) { const [statusSearch, setStatusSearch] = useState(false) let userData = cookies.get("user") || null @@ -534,9 +681,9 @@ function DesktopLinks({ links, position = false, path }) { return ( - + {Object.entries(links).map(([k, v]) => { if (k === "Button") return v.map(b => ( @@ -557,6 +704,7 @@ function DesktopLinks({ links, position = false, path }) { minWidth="80px" height="35px" fontSize="15px" + borderRadius="30px" > {b.name} @@ -611,18 +759,34 @@ function DesktopLinks({ links, position = false, path }) { + {userTemplate && !isMobileMod() && } {!statusSearch && {userData ? ( - + + window.open("/precos", "_self")} + > + BD Pro + + + ) : ( <> Entrar - + Cadastrar @@ -634,7 +798,7 @@ function DesktopLinks({ links, position = false, path }) { ); } -export default function MenuNav({}) { +export default function MenuNav({ simpleTemplate = false, userTemplate = false }) { const router = useRouter() const { route } = router const menuDisclosure = useDisclosure() @@ -697,6 +861,7 @@ export default function MenuNav({}) { return ( <> - + - + {simpleTemplate ? + <> + : + + } + + {userTemplate && isMobileMod() && } {useCheckMobile() && userData && diff --git a/next/components/templates/main.js b/next/components/templates/main.js index 430a56ca..d43099dd 100644 --- a/next/components/templates/main.js +++ b/next/components/templates/main.js @@ -10,6 +10,8 @@ export function MainPageTemplate({ pages, children, backgroundColor = "#FFFFFF", + cleanTemplate = false, + userTemplate = false, ...style }) { @@ -18,11 +20,11 @@ export function MainPageTemplate({ - + {children} -