Added support for RenameProfileModal

Author: ebkr

src/components/profiles-modals/DeleteProfileModal.vue

@@ -54,7 +54,7 @@ async function removeProfile() {
                 :disabled="deletingInProgress"
                 class="button is-danger"
                 @click="removeProfile()">
-                {{ t('translations.pages.profileSelection.deleteProfileModal.action.delete') }}
+                {{ t('translations.pages.profileSelection.deleteProfileModal.actions.delete') }}
             </button>
         </template>
 

src/components/profiles-modals/RenameProfileModal.vue

@@ -5,8 +5,10 @@ import { useProfilesComposable } from '../composables/ProfilesComposable';
 import { computed, nextTick, ref, watchEffect } from 'vue';
 import { getStore } from '../../providers/generic/store/StoreProvider';
 import { State } from '../../store';
+import {useI18n} from "vue-i18n";
 
 const store = getStore<State>();
+const { t } = useI18n();
 
 const {
     doesProfileExist,
@@ -60,10 +62,14 @@ async function performRename() {
     <ModalCard id="rename-profile-modal" v-if="isOpen" :is-active="isOpen" @close-modal="closeModal">
 
         <template v-slot:header>
-            <h2 class="modal-title">Rename a profile</h2>
+            <h2 class="modal-title">
+                {{ t('translations.pages.profileSelection.renameProfileModal.title') }}
+            </h2>
         </template>
         <template v-slot:body>
-            <p>This profile will store its own mods independently from other profiles.</p>
+            <p>
+                {{ t('translations.pages.profileSelection.renameProfileModal.content') }}
+            </p>
 
             <input
                 v-model="newProfileName"
@@ -75,18 +81,22 @@ async function performRename() {
             />
 
             <span class="tag is-dark" v-if="newProfileName === '' || makeProfileNameSafe(newProfileName) === ''">
-                Profile name required
+                {{ t('translations.pages.profileSelection.renameProfileModal.tagStates.required') }}
             </span>
             <span class="tag is-success" v-else-if="!doesProfileExist(newProfileName)">
-                "{{makeProfileNameSafe(newProfileName)}}" is available
+                {{ t('translations.pages.profileSelection.renameProfileModal.tagStates.valid', { profileName: makeProfileNameSafe(newProfileName) }) }}
             </span>
             <span class="tag is-danger" v-else-if="doesProfileExist(newProfileName)">
-                "{{makeProfileNameSafe(newProfileName)}}" is either already in use, or contains invalid characters
+                {{ t('translations.pages.profileSelection.renameProfileModal.tagStates.error', { profileName: makeProfileNameSafe(newProfileName) }) }}
             </span>
         </template>
         <template v-slot:footer>
-            <button class="button is-danger" v-if="doesProfileExist(newProfileName)" disabled>Rename</button>
-            <button class="button is-info" @click="performRename()" :disabled="renamingInProgress" v-else>Rename</button>
+            <button class="button is-danger" v-if="doesProfileExist(newProfileName)" disabled>
+                {{ t('translations.pages.profileSelection.renameProfileModal.actions.rename') }}
+            </button>
+            <button class="button is-info" @click="performRename()" :disabled="renamingInProgress" v-else>
+                {{ t('translations.pages.profileSelection.renameProfileModal.actions.rename') }}
+            </button>
         </template>
 
     </ModalCard>

src/i18n/base/pages/ProfileSelectionMessageFormat.ts

@@ -34,11 +34,21 @@ export type ProfileSelectionMessageFormat = {
             preventAction: string;
             confirmation: string;
         },
-        action: {
+        actions: {
             delete: string;
         }
     },
     renameProfileModal: {
+        title: string;
+        content: string;
+        actions: {
+            rename: string;
+        },
+        tagStates: {
+            required: string;
+            valid: string;
+            error: string;
+        },
     },
     importProfileModal: {
     }

src/i18n/en/pages/ProfileSelectionTranslation.ts

@@ -36,11 +36,21 @@ export const ProfileSelectionTranslation: ProfileSelectionMessageFormat = {
             preventAction: 'If this was an accident, click either the darkened area, or the cross inside located in the top right.',
             confirmation: 'Are you sure you\'d like to delete this profile?',
         },
-        action: {
+        actions: {
             delete: 'Delete profile',
         }
     },
     renameProfileModal: {
+        title: 'Rename a profile',
+        content: 'This profile will store its own mods independently from other profiles.',
+        actions: {
+            rename: 'Rename',
+        },
+        tagStates: {
+            required: 'You must enter a profile name',
+            valid: '"{profileName}" is a valid profile name',
+            error: '"{profileName}" is either already in use or contains invalid characters'
+        },
     },
     importProfileModal: {
     }

src/i18n/fr/pages/ProfileSelectionTranslation.ts

@@ -36,11 +36,21 @@ export const ProfileSelectionTranslation: ProfileSelectionMessageFormat = {
             preventAction: 'Si c\'est une erreur, cliquez sur la zone assombrie ou sur la croix en haut à droite.',
             confirmation: 'Êtes-vous sûr de vouloir supprimer ce profil ?'
         },
-        action: {
+        actions: {
             delete: 'Supprimer le profil'
         }
     },
     renameProfileModal: {
+        title: 'Renommer un profil',
+        content: 'Ce profil stockera ses propres mods indépendamment des autres profils.',
+        actions: {
+            rename: 'Renommer',
+        },
+        tagStates: {
+            required: 'Vous devez entrer un nom de profil',
+            valid: '"{profileName}" est un nom de profil valide',
+            error: '"{profileName}" est déjà utilisé ou contient des caractères non valides'
+        },
     },
     importProfileModal: {
     }