i18n and html form validation

src/locales/en/translation.json

@@ -228,13 +228,18 @@
   "user_profile": {
     "amount_hours": "{{amount}} hours",
     "amount_minutes": "{{amount}} minutes",
-    "play_time": "Played for {{amount}}",
     "last_time_played": "Last played {{period}}",
     "sign_out": "Sign out",
     "activity": "Recent activity",
     "library": "Library",
     "total_play_time": "Total playtime: {{amount}}",
     "no_recent_activity_title": "Hmmm… nothing here",
-    "no_recent_activity_description": "You haven't played any games recently. It's time to change that!"
+    "no_recent_activity_description": "You haven't played any games recently. It's time to change that!",
+    "display_name": "Display name",
+    "saving": "Saving",
+    "save": "Save",
+    "edit_profile": "Edit Profile",
+    "saved_successfully": "Saved successfully",
+    "try_again": "Please, try again"
   }
 }

src/locales/pt/translation.json

@@ -229,13 +229,18 @@
   "user_profile": {
     "amount_hours": "{{amount}} horas",
     "amount_minutes": "{{amount}} minutos",
-    "play_time": "Jogado por {{amount}}",
     "last_time_played": "Jogou {{period}}",
     "sign_out": "Sair da conta",
     "activity": "Atividade recente",
     "library": "Biblioteca",
     "total_play_time": "Tempo total de jogo: {{amount}}",
     "no_recent_activity_title": "Hmmm… nada por aqui",
-    "no_recent_activity_description": "Parece que você não jogou nada recentemente. Que tal começar agora?"
+    "no_recent_activity_description": "Parece que você não jogou nada recentemente. Que tal começar agora?",
+    "display_name": "Nome de exibição",
+    "saving": "Salvando…",
+    "save": "Salvar",
+    "edit_profile": "Editar Perfil",
+    "saved_successfully": "Salvo com sucesso",
+    "try_again": "Por favor, tente novamente"
   }
 }

src/renderer/src/pages/user/user-edit-modal.tsx

@@ -5,6 +5,7 @@ import { DeviceCameraIcon, PersonIcon } from "@primer/octicons-react";
 import { SPACING_UNIT } from "@renderer/theme.css";
 import { useEffect, useMemo, useState } from "react";
 import { useToast, useUserDetails } from "@renderer/hooks";
+import { useTranslation } from "react-i18next";
 
 export interface UserEditProfileModalProps {
   userProfile: UserProfile;
@@ -19,6 +20,8 @@ export const UserEditProfileModal = ({
   onClose,
   updateUserProfile,
 }: UserEditProfileModalProps) => {
+  const { t } = useTranslation("user_profile");
+
   const [displayName, setDisplayName] = useState("");
   const [newImagePath, setNewImagePath] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
@@ -36,8 +39,8 @@ export const UserEditProfileModal = ({
       properties: ["openFile"],
       filters: [
         {
-          name: "Profile image",
-          extensions: ["jpg", "png", "gif", "webp", "jpeg"],
+          name: "Image",
+          extensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"],
         },
       ],
     });
@@ -58,11 +61,11 @@ export const UserEditProfileModal = ({
     patchUser(displayName, newImagePath)
       .then(async () => {
         await updateUserProfile();
-        showSuccessToast("Salvo com sucesso");
+        showSuccessToast(t("saved_successfully"));
         cleanFormAndClose();
       })
       .catch(() => {
-        showErrorToast("Tente novamente");
+        showErrorToast(t("try_again"));
       })
       .finally(() => {
         setIsSaving(false);
@@ -89,7 +92,7 @@ export const UserEditProfileModal = ({
     <>
       <Modal
         visible={visible}
-        title="Editar Perfil"
+        title={t("edit_profile")}
         onClose={cleanFormAndClose}
       >
         <form
@@ -123,8 +126,10 @@ export const UserEditProfileModal = ({
           </button>
 
           <TextField
-            label="Nome de exibição"
+            label={t("display_name")}
             value={displayName}
+            required
+            minLength={3}
             containerProps={{ style: { width: "100%" } }}
             onChange={(e) => setDisplayName(e.target.value)}
           />
@@ -133,7 +138,7 @@ export const UserEditProfileModal = ({
             style={{ alignSelf: "end" }}
             type="submit"
           >
-            {isSaving ? "Salvando…" : "Salvar"}
+            {isSaving ? t("saving") : t("save")}
           </Button>
         </form>
       </Modal>