From 7a17bef1ae49964d7b4e3ff0de8c6c0dd4fd9ea1 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Thu, 5 Oct 2023 17:21:22 -0300 Subject: [PATCH 01/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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"} >