Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Melhorando experiência do usuário nos formulários #1691

Merged
merged 9 commits into from
May 13, 2024
+35 −20
Merged

Melhorando experiência do usuário nos formulários #1691

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3436dc2
refactor: wrap terms and conditions checkbox into a FormControl
lwfe May 10, 2024
c9401ff
feat: add caption to signup username form field for better UX
lwfe May 10, 2024
28fca93
refactor: change 'publicações' to 'conteúdos' in confirm change usern…
lwfe May 10, 2024
8a9b43e
feat: add caption to profile username form field
lwfe May 10, 2024
ad28a08
Merge branch 'main' into refactor/forms-ux
lwfe May 10, 2024
4d0456c
refactor: requested changes
lwfe May 10, 2024
549967c
refactor: custom error message for username field
lwfe May 13, 2024
85308c7
refactor: custom error message and shows caption if username differs …
lwfe May 13, 2024
06dffe7
refactor: requested changes
lwfe May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions pages/cadastro/index.public.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
Heading,
Link,
PasswordInput,
Text,
TextInput,
} from '@/TabNewsUI';
import { createErrorMessage, suggestEmail } from 'pages/interface';
Expand Down Expand Up @@ -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>Este 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. (ex: nomeSobrenome4)
</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">
Expand Down Expand Up @@ -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>
Expand Down
39 changes: 29 additions & 10 deletions pages/perfil/index.public.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -63,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();

Expand All @@ -76,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);
Expand Down Expand Up @@ -155,6 +164,7 @@ function EditProfileForm() {
}

setIsLoading(false);
setShowUsernameCaption(false);
return;
}

Expand Down Expand Up @@ -197,13 +207,22 @@ function EditProfileForm() {
aria-label="Seu nome de usuário"
contrast
sx={{ px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }}
onChange={handleUsernameChange}
/>
{errorObject?.key === 'username' && (
<FormControl.Validation variant="error">{errorObject.message}</FormControl.Validation>
{showUsernameCaption && (
<FormControl.Caption>
Alterar o nome de usuário irá 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. (ex: nomeSobrenome4)
</FormControl.Validation>
)}

{errorObject?.key === 'username' && (
<FormControl.Validation variant="error">{errorObject.message}</FormControl.Validation>
)}
</FormControl>

Expand Down