feat(userforms): improves UX in form interactions (#1691)

* refactor: wrap terms and conditions checkbox into a FormControl * feat: add caption to signup username form field for better UX * refactor: change 'publicações' to 'conteúdos' in confirm change username modal * feat: add caption to profile username form field * refactor: requested changes * refactor: custom error message for username field * refactor: custom error message and shows caption if username differs from current * refactor: requested changes
filipedeschamps · May 13, 2024 · 9bb3210 · 9bb3210
1 parent 2655261
commit 9bb3210
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git 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';
@@ -129,12 +128,16 @@ function SignUpForm() {
             contrast
             sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }}
           />
-          {errorObject?.key === 'username' && (
-            <FormControl.Validation variant="error">{errorObject.message}</FormControl.Validation>
+          <FormControl.Caption>Esse nome será exibido publicamente.</FormControl.Caption>
+
+          {errorObject?.key === 'username' && errorObject?.type === 'string.alphanum' && (
+            <FormControl.Validation variant="error">
+              Nome de usuário deve conter apenas letras e números, por exemplo: &quot;nomeSobrenome4&quot;.
+            </FormControl.Validation>
           )}
 
-          {errorObject?.type === 'string.alphanum' && (
-            <FormControl.Caption>Dica: use somente letras e números, por exemplo: nomeSobrenome4 </FormControl.Caption>
+          {errorObject?.key === 'username' && (
+            <FormControl.Validation variant="error">{errorObject.message}</FormControl.Validation>
           )}
         </FormControl>
         <FormControl id="email">
@@ -188,13 +191,13 @@ function SignUpForm() {
           setErrorObject={setErrorObject}
         />
 
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
-          <Checkbox checked={isTermsAccepted} onClick={() => setIsTermsAccepted(!isTermsAccepted)} />
-          <Text>
+        <FormControl>
+          <Checkbox checked={isTermsAccepted} onChange={() => setIsTermsAccepted(!isTermsAccepted)} />
+          <FormControl.Label>
             Li e estou de acordo com os
             <Link href="/termos-de-uso"> Termos de Uso.</Link>
-          </Text>
-        </Box>
+          </FormControl.Label>
+        </FormControl>
 
         <FormControl>
           <FormControl.Label visuallyHidden>Criar cadastro</FormControl.Label>

diff --git 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) {
@@ -76,12 +77,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);
@@ -197,13 +200,22 @@ function EditProfileForm() {
             aria-label="Seu nome de usuário"
             contrast
             sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }}
+            onChange={() => setShowUsernameCaption(true)}
           />
-          {errorObject?.key === 'username' && (
-            <FormControl.Validation variant="error">{errorObject.message}</FormControl.Validation>
+          {showUsernameCaption && (
+            <FormControl.Caption>
+              Alterar o nome de usuário pode quebrar todas as URLs das suas publicações e comentários.
+            </FormControl.Caption>
           )}
 
-          {errorObject?.type === 'string.alphanum' && (
-            <FormControl.Caption>Dica: use somente letras e números, por exemplo: nomeSobrenome4 </FormControl.Caption>
+          {errorObject?.key === 'username' && errorObject?.type === 'string.alphanum' && (
+            <FormControl.Validation variant="error">
+              Nome de usuário deve conter apenas letras e números, por exemplo: &quot;nomeSobrenome4&quot;.
+            </FormControl.Validation>
+          )}
+
+          {errorObject?.key === 'username' && (
+            <FormControl.Validation variant="error">{errorObject.message}</FormControl.Validation>
           )}
         </FormControl>