feat: better friend code validation on add friend modal

src/locales/en/translation.json

@@ -515,7 +515,8 @@
     "earned_points": "Earned points",
     "show_achievements_on_profile": "Show your achievements on your profile",
     "show_points_on_profile": "Show your earned points on your profile",
-    "error_adding_friend": "Could not send friend request. Please check friend code"
+    "error_adding_friend": "Could not send friend request. Please check friend code",
+    "friend_code_length_error": "Friend code must have 8 characters"
   },
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",

src/locales/pt-BR/translation.json

@@ -508,7 +508,8 @@
     "earned_points": "Pontos ganhos",
     "show_achievements_on_profile": "Exiba suas conquistas no perfil",
     "show_points_on_profile": "Exiba seus pontos ganhos no perfil",
-    "error_adding_friend": "Não foi possível enviar o pedido de amizade. Verifique o código de amizade inserido"
+    "error_adding_friend": "Não foi possível enviar o pedido de amizade. Verifique o código de amizade inserido",
+    "friend_code_length_error": "Código de amigo deve ter 8 caracteres"
   },
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",

src/renderer/src/components/text-field/text-field.scss

@@ -74,6 +74,6 @@
   }
 
   &__error-label {
-    color: globals.$danger-color;
+    color: globals.$error-color;
   }
 }

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx

@@ -51,6 +51,14 @@ export const UserFriendModalAddFriend = ({
     }
   };
 
+  const validateFriendCode = (callback: () => void) => {
+    if (friendCode.length === 8) {
+      return callback();
+    }
+
+    showErrorToast(t("friend_code_length_error"));
+  };
+
   const handleCancelFriendRequest = (userId: string) => {
     updateFriendRequestState(userId, "CANCEL").catch(() => {
       showErrorToast(t("try_again"));
@@ -91,13 +99,13 @@ export const UserFriendModalAddFriend = ({
           disabled={isAddingFriend}
           className="user-friend-modal-add-friend__button"
           type="button"
-          onClick={handleClickAddFriend}
+          onClick={() => validateFriendCode(handleClickAddFriend)}
         >
           {isAddingFriend ? t("sending") : t("add")}
         </Button>
 
         <Button
-          onClick={handleClickSeeProfile}
+          onClick={() => validateFriendCode(handleClickSeeProfile)}
           disabled={isAddingFriend}
           className="user-friend-modal-add-friend__button"
           type="button"

src/renderer/src/scss/globals.scss

@@ -7,6 +7,7 @@ $body-color: #8e919b;
 $border-color: rgba(255, 255, 255, 0.15);
 $success-color: #1c9749;
 $danger-color: #801d1e;
+$error-color: #e11d48;
 $warning-color: #ffc107;
 
 $brand-teal: #16b195;