Merge pull request #187 from universi-me/change#186/nome-sobrenome-21…

…-caracteres CHANGE #186: Limitar nome e sobrenome a 21 caracteres
universi-me · Oct 27, 2023 · 7bbe1ec · 7bbe1ec
2 parents 0d227c4 + 260d9ba
commit 7bbe1ec
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/src/pages/ManageProfile/ManageProfile.less b/src/pages/ManageProfile/ManageProfile.less
@@ -176,6 +176,18 @@
                     width: 100%;
                 }
             }
+
+            .counter-wrapper {
+                display: flex;
+                width: 100%;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: end;
+
+                .counter {
+                    font-size: .75em;
+                }
+            }
         }
 
         &#fieldset-bio {
@@ -187,11 +199,6 @@
 
                 .info-text {
                     font-size: .75em;
-
-                    &.full-bio {
-                        color: @wrong-invalid-color;
-                        font-weight: @font-weight-semibold;
-                    }
                 }
             }
 
@@ -335,6 +342,11 @@
             }
 
         }
+
+        .full-counter {
+            color: @wrong-invalid-color;
+            font-weight: @font-weight-semibold;
+        }
     }
 
 

diff --git a/src/pages/ManageProfile/ManageProfile.tsx b/src/pages/ManageProfile/ManageProfile.tsx
@@ -11,6 +11,8 @@ import * as SwalUtils from "@/utils/sweetalertUtils";
 import "./ManageProfile.less";
 
 const BIO_MAX_LENGTH = 140;
+const FIRST_NAME_MAX_LENGTH = 21;
+const LAST_NAME_MAX_LENGTH = 21;
 export function ManageProfilePage() {
     const navigate = useNavigate();
     const { genderOptions, links, profile, typeLinks } = useLoaderData() as ManageProfileLoaderResponse;
@@ -25,6 +27,8 @@ export function ManageProfilePage() {
         return <Navigate to="/login" />
 
     const isBioFull = (bio?.length ?? 0) >= BIO_MAX_LENGTH;
+    const isFirstnameFull = (firstname.length) >= FIRST_NAME_MAX_LENGTH;
+    const isLastnameFull = (lastname.length) >= LAST_NAME_MAX_LENGTH;
     const canSaveProfile = !!firstname && !!lastname;
 
     return <div id="manage-profile-page">
@@ -39,13 +43,20 @@ export function ManageProfilePage() {
                         <fieldset id="fieldset-name">
                             <legend>Altere seu nome</legend>
                             <label className="legend" htmlFor="firstname">
-                                <span className="required-input">Nome</span>
-                                <input type="text" name="firstname" id="firstname" defaultValue={profile.firstname ?? ""} onChange={setStateAsValue(setFirstname)} required maxLength={255} />
+                                <span className="counter-wrapper">
+                                    <span className="required-input">Nome</span>
+                                    <span className={`counter ${isFirstnameFull ? 'full-counter' : ''}`}>{firstname.length} / {FIRST_NAME_MAX_LENGTH}</span>
+                                </span>
+                                <input type="text" name="firstname" id="firstname" defaultValue={profile.firstname ?? ""} onChange={setStateAsValue(setFirstname)} required maxLength={FIRST_NAME_MAX_LENGTH} />
                             </label>
 
                             <label className="legend" htmlFor="lastname">
-                                <span className="required-input">Sobrenome</span>
-                                <input type="text" name="lastname" id="lastname" defaultValue={profile.lastname ?? ""} onChange={setStateAsValue(setLastname)} required maxLength={255} />
+                                <span className="counter-wrapper">
+                                    <span className="required-input">Sobrenome</span>
+                                    <span className={`counter ${isLastnameFull ? 'full-counter' : ''}`}>{lastname.length} / {LAST_NAME_MAX_LENGTH}</span>
+                                </span>
+
+                                <input type="text" name="lastname" id="lastname" defaultValue={profile.lastname ?? ""} onChange={setStateAsValue(setLastname)} required maxLength={LAST_NAME_MAX_LENGTH} />
                             </label>
                         </fieldset>
                     </div>
@@ -54,7 +65,7 @@ export function ManageProfilePage() {
                     <fieldset id="fieldset-bio">
                         <legend>
                             Biografia
-                            <span className={`info-text ${isBioFull ? 'full-bio' : ''}`}>{bio?.length ?? 0} / {BIO_MAX_LENGTH}</span>
+                            <span className={`info-text ${isBioFull ? 'full-counter' : ''}`}>{bio?.length ?? 0} / {BIO_MAX_LENGTH}</span>
                         </legend>
                         <textarea name="bio" id="bio" maxLength={BIO_MAX_LENGTH} defaultValue={bio} rows={6} onChange={setStateAsValue(setBio)} />
                     </fieldset>