From 3436dc2717f0592ba89d5ad8a057662117d549c7 Mon Sep 17 00:00:00 2001 From: Leonardo Marques <60831308+lwfe@users.noreply.github.com> Date: Fri, 10 May 2024 02:09:43 +0000 Subject: [PATCH 1/8] refactor: wrap terms and conditions checkbox into a FormControl --- pages/cadastro/index.public.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/pages/cadastro/index.public.js b/pages/cadastro/index.public.js index c69e9dba7..54d635cc9 100644 --- a/pages/cadastro/index.public.js +++ b/pages/cadastro/index.public.js @@ -12,7 +12,6 @@ import { Heading, Link, PasswordInput, - Text, TextInput, } from '@/TabNewsUI'; import { createErrorMessage, suggestEmail } from 'pages/interface'; @@ -188,12 +187,14 @@ function SignUpForm() { setErrorObject={setErrorObject} /> - - setIsTermsAccepted(!isTermsAccepted)} /> - - Li e estou de acordo com os - Termos de Uso. - + + + setIsTermsAccepted(!isTermsAccepted)} /> + + Li e estou de acordo com os + Termos de Uso. + + From c9401ff7ce2d2e93c82caebf9a4fc1dedcdab6dd Mon Sep 17 00:00:00 2001 From: Leonardo Marques <60831308+lwfe@users.noreply.github.com> Date: Fri, 10 May 2024 02:23:32 +0000 Subject: [PATCH 2/8] feat: add caption to signup username form field for better UX --- pages/cadastro/index.public.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/pages/cadastro/index.public.js b/pages/cadastro/index.public.js index 54d635cc9..2093d487b 100644 --- a/pages/cadastro/index.public.js +++ b/pages/cadastro/index.public.js @@ -128,6 +128,10 @@ function SignUpForm() { contrast sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} /> + {!(errorObject?.key === 'username') && ( + Assim que os outros verão você na plataforma. + )} + {errorObject?.key === 'username' && ( {errorObject.message} )} From 28fca93d71e9c93fc6b389540304aa7a299ea129 Mon Sep 17 00:00:00 2001 From: Leonardo Marques <60831308+lwfe@users.noreply.github.com> Date: Fri, 10 May 2024 02:49:22 +0000 Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20change=20'publica=C3=A7=C3=B5es?= =?UTF-8?q?'=20to=20'conte=C3=BAdos'=20in=20confirm=20change=20username=20?= =?UTF-8?q?modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/perfil/index.public.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/perfil/index.public.js b/pages/perfil/index.public.js index 35383cb77..da597820b 100644 --- a/pages/perfil/index.public.js +++ b/pages/perfil/index.public.js @@ -78,7 +78,7 @@ function EditProfileForm() { if (user.username !== username) { const confirmChangeUsername = await confirm({ title: `Você realmente deseja alterar seu nome de usuário?`, - content: `Isso irá quebrar todas as URLs das suas publicações e comentários.`, + content: `Isso irá quebrar todas as URLs dos seus conteúdos e comentários.`, cancelButtonContent: 'Cancelar', confirmButtonContent: 'Sim', }); From 8a9b43e53f58e5b0f1346ba24dacb19a84d72ed7 Mon Sep 17 00:00:00 2001 From: Leonardo Marques <60831308+lwfe@users.noreply.github.com> Date: Fri, 10 May 2024 02:50:37 +0000 Subject: [PATCH 4/8] feat: add caption to profile username form field --- pages/perfil/index.public.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/pages/perfil/index.public.js b/pages/perfil/index.public.js index da597820b..a2de2b724 100644 --- a/pages/perfil/index.public.js +++ b/pages/perfil/index.public.js @@ -198,6 +198,12 @@ function EditProfileForm() { contrast sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} /> + {!(errorObject?.key === 'username') && ( + + Alterar o nome de usuário irá quebrar todas as URLs dos seus conteúdos e comentários. + + )} + {errorObject?.key === 'username' && ( {errorObject.message} )} From 4d0456ccf3ea6ade9194d43777f35e0a34710852 Mon Sep 17 00:00:00 2001 From: Leonardo Marques <60831308+lwfe@users.noreply.github.com> Date: Fri, 10 May 2024 17:39:49 +0000 Subject: [PATCH 5/8] refactor: requested changes --- pages/cadastro/index.public.js | 18 ++++++++---------- pages/perfil/index.public.js | 9 ++++++--- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/pages/cadastro/index.public.js b/pages/cadastro/index.public.js index 2093d487b..88368f65e 100644 --- a/pages/cadastro/index.public.js +++ b/pages/cadastro/index.public.js @@ -128,7 +128,7 @@ function SignUpForm() { contrast sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} /> - {!(errorObject?.key === 'username') && ( + {errorObject?.key !== 'username' && ( Assim que os outros verão você na plataforma. )} @@ -191,15 +191,13 @@ function SignUpForm() { setErrorObject={setErrorObject} /> - - - setIsTermsAccepted(!isTermsAccepted)} /> - - Li e estou de acordo com os - Termos de Uso. - - - + + setIsTermsAccepted(!isTermsAccepted)} /> + + Li e estou de acordo com os + Termos de Uso. + + Criar cadastro diff --git a/pages/perfil/index.public.js b/pages/perfil/index.public.js index a2de2b724..752012298 100644 --- a/pages/perfil/index.public.js +++ b/pages/perfil/index.public.js @@ -44,6 +44,7 @@ function EditProfileForm() { const [errorObject, setErrorObject] = useState(undefined); const [emailDisabled, setEmailDisabled] = useState(false); const [description, setDescription] = useState(user?.description || ''); + const [showUsernameCaption, setShowUsernameCaption] = useState(false); useEffect(() => { if (router && !user && !userIsLoading) { @@ -78,7 +79,7 @@ function EditProfileForm() { if (user.username !== username) { const confirmChangeUsername = await confirm({ title: `Você realmente deseja alterar seu nome de usuário?`, - content: `Isso irá quebrar todas as URLs dos seus conteúdos e comentários.`, + content: `Isso irá quebrar todas as URLs das suas publicações e comentários.`, cancelButtonContent: 'Cancelar', confirmButtonContent: 'Sim', }); @@ -197,10 +198,12 @@ function EditProfileForm() { aria-label="Seu nome de usuário" contrast sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} + onFocus={() => setShowUsernameCaption(true)} + onBlur={() => setShowUsernameCaption(false)} /> - {!(errorObject?.key === 'username') && ( + {showUsernameCaption && ( - Alterar o nome de usuário irá quebrar todas as URLs dos seus conteúdos e comentários. + Alterar o nome de usuário irá quebrar todas as URLs das suas publicações e comentários. )} From 549967c02979d4a94bb5989dd2b1cdb143ce2848 Mon Sep 17 00:00:00 2001 From: Leonardo Marques <60831308+lwfe@users.noreply.github.com> Date: Mon, 13 May 2024 14:48:05 +0000 Subject: [PATCH 6/8] refactor: custom error message for username field --- pages/cadastro/index.public.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/pages/cadastro/index.public.js b/pages/cadastro/index.public.js index 88368f65e..3f5bccc14 100644 --- a/pages/cadastro/index.public.js +++ b/pages/cadastro/index.public.js @@ -128,17 +128,17 @@ function SignUpForm() { contrast sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} /> - {errorObject?.key !== 'username' && ( - Assim que os outros verão você na plataforma. + Este nome será exibido publicamente. + + {errorObject?.key === 'username' && errorObject?.type === 'string.alphanum' && ( + + Nome de usuário deve conter apenas letras e números. (ex: nomeSobrenome4) + )} {errorObject?.key === 'username' && ( {errorObject.message} )} - - {errorObject?.type === 'string.alphanum' && ( - Dica: use somente letras e números, por exemplo: nomeSobrenome4 - )} Email From 85308c74e863ea741478dad68a5c5d4cb7c578b8 Mon Sep 17 00:00:00 2001 From: Leonardo Marques <60831308+lwfe@users.noreply.github.com> Date: Mon, 13 May 2024 14:50:33 +0000 Subject: [PATCH 7/8] refactor: custom error message and shows caption if username differs from current --- pages/perfil/index.public.js | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/pages/perfil/index.public.js b/pages/perfil/index.public.js index 752012298..b57b45445 100644 --- a/pages/perfil/index.public.js +++ b/pages/perfil/index.public.js @@ -64,6 +64,12 @@ function EditProfileForm() { setGlobalMessageObject(undefined); } + function handleUsernameChange() { + const username = usernameRef.current.value; + const currentUser = user.username || ''; + setShowUsernameCaption(username.toLowerCase() !== currentUser.toLowerCase()); + } + async function handleSubmit(event) { event.preventDefault(); @@ -77,12 +83,14 @@ function EditProfileForm() { const payload = {}; if (user.username !== username) { - const confirmChangeUsername = await confirm({ - title: `Você realmente deseja alterar seu nome de usuário?`, - content: `Isso irá quebrar todas as URLs das suas publicações e comentários.`, - cancelButtonContent: 'Cancelar', - confirmButtonContent: 'Sim', - }); + const confirmChangeUsername = + user.username.toLowerCase() === username.toLowerCase() || + (await confirm({ + title: `Você realmente deseja alterar seu nome de usuário?`, + content: `Isso irá quebrar todas as URLs das suas publicações e comentários.`, + cancelButtonContent: 'Cancelar', + confirmButtonContent: 'Sim', + })); if (!confirmChangeUsername) { setIsLoading(false); @@ -156,6 +164,7 @@ function EditProfileForm() { } setIsLoading(false); + setShowUsernameCaption(false); return; } @@ -198,8 +207,7 @@ function EditProfileForm() { aria-label="Seu nome de usuário" contrast sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} - onFocus={() => setShowUsernameCaption(true)} - onBlur={() => setShowUsernameCaption(false)} + onChange={handleUsernameChange} /> {showUsernameCaption && ( @@ -207,12 +215,14 @@ function EditProfileForm() { )} - {errorObject?.key === 'username' && ( - {errorObject.message} + {errorObject?.key === 'username' && errorObject?.type === 'string.alphanum' && ( + + Nome de usuário deve conter apenas letras e números. (ex: nomeSobrenome4) + )} - {errorObject?.type === 'string.alphanum' && ( - Dica: use somente letras e números, por exemplo: nomeSobrenome4 + {errorObject?.key === 'username' && ( + {errorObject.message} )} From 06dffe7beb90a18f2a720d035061f9e4c331786a Mon Sep 17 00:00:00 2001 From: Leonardo Marques <60831308+lwfe@users.noreply.github.com> Date: Mon, 13 May 2024 17:03:46 +0000 Subject: [PATCH 8/8] refactor: requested changes --- pages/cadastro/index.public.js | 4 ++-- pages/perfil/index.public.js | 13 +++---------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/pages/cadastro/index.public.js b/pages/cadastro/index.public.js index 3f5bccc14..9420ebe72 100644 --- a/pages/cadastro/index.public.js +++ b/pages/cadastro/index.public.js @@ -128,11 +128,11 @@ function SignUpForm() { contrast sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} /> - Este nome será exibido publicamente. + Esse nome será exibido publicamente. {errorObject?.key === 'username' && errorObject?.type === 'string.alphanum' && ( - Nome de usuário deve conter apenas letras e números. (ex: nomeSobrenome4) + Nome de usuário deve conter apenas letras e números, por exemplo: "nomeSobrenome4". )} diff --git a/pages/perfil/index.public.js b/pages/perfil/index.public.js index b57b45445..c54b1c44b 100644 --- a/pages/perfil/index.public.js +++ b/pages/perfil/index.public.js @@ -64,12 +64,6 @@ function EditProfileForm() { setGlobalMessageObject(undefined); } - function handleUsernameChange() { - const username = usernameRef.current.value; - const currentUser = user.username || ''; - setShowUsernameCaption(username.toLowerCase() !== currentUser.toLowerCase()); - } - async function handleSubmit(event) { event.preventDefault(); @@ -164,7 +158,6 @@ function EditProfileForm() { } setIsLoading(false); - setShowUsernameCaption(false); return; } @@ -207,17 +200,17 @@ function EditProfileForm() { aria-label="Seu nome de usuário" contrast sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} - onChange={handleUsernameChange} + onChange={() => setShowUsernameCaption(true)} /> {showUsernameCaption && ( - Alterar o nome de usuário irá quebrar todas as URLs das suas publicações e comentários. + Alterar o nome de usuário pode quebrar todas as URLs das suas publicações e comentários. )} {errorObject?.key === 'username' && errorObject?.type === 'string.alphanum' && ( - Nome de usuário deve conter apenas letras e números. (ex: nomeSobrenome4) + Nome de usuário deve conter apenas letras e números, por exemplo: "nomeSobrenome4". )}