Localize group and sign up settings

frontend/src/components/Admin/ManageUsers/GroupCard.vue

@@ -2,8 +2,8 @@
   <div>
     <Confirmation
       ref="deleteGroupConfirm"
-      title="Confirm Group Deletion"
+      :title="$t('user.confirm-group-deletion')"
-      :message="`Are you sure you want to delete <b>${group.name}<b/>`"
+      :message="$t('user.are-you-sure-you-want-to-delete-the-group', { groupName:group.name })"
       icon="mdi-alert"
       @confirm="deleteGroup"
       :width="450"
@@ -13,7 +13,7 @@
       <v-list dense>
         <v-card-title class="py-1">{{ group.name }}</v-card-title>
         <v-divider></v-divider>
-        <v-subheader>Group ID: {{ group.id }}</v-subheader>
+        <v-subheader>{{ $t('user.group-id-with-value', { groupID: group.id }) }}</v-subheader>
         <v-list-item-group color="primary">
           <v-list-item v-for="property in groupProps" :key="property.text">
             <v-list-item-icon>
@@ -36,11 +36,11 @@
           @click="confirmDelete"
           :disabled="ableToDelete"
         >
-          Delete
+          {{ $t('general.delete') }}
         </v-btn>
         <!-- Coming Soon! -->
         <v-btn small color="success" disabled>
-          Edit
+          {{ $t('general.edit') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -94,22 +94,22 @@ export default {
     buildData() {
       this.groupProps = [
         {
-          text: "Total Users",
+          text: this.$t('user.total-users'),
           icon: "mdi-account",
           value: this.group.users.length,
         },
         {
-          text: "Total MealPlans",
+          text: this.$t('user.total-mealplans'),
           icon: "mdi-food",
           value: this.group.mealplans.length,
         },
         {
-          text: "Webhooks Enabled",
+          text: this.$t('user.webhooks-enabled'),
           icon: "mdi-webhook",
-          value: this.group.webhookEnable ? "True" : "False",
+          value: this.group.webhookEnable ? this.$t('general.yes') : this.$t('general.no'),
         },
         {
-          text: "Webhook Time",
+          text: this.$t('user.webhook-time'),
           icon: "mdi-clock-outline",
           value: this.group.webhookTime,
         },

frontend/src/components/Admin/ManageUsers/GroupDashboard.vue

@@ -9,7 +9,7 @@
             clearable
             class="mr-2 pt-0"
             append-icon="mdi-filter"
-            label="Filter"
+            :label="$t('general.filter')"
             single-line
             hide-details
           ></v-text-field>
@@ -24,7 +24,7 @@
               v-bind="attrs"
               v-on="on"
             >
-              Create Group
+              {{ $t('user.create-group') }}
             </v-btn>
           </template>
           <v-card>
@@ -34,7 +34,7 @@
               </v-icon>
 
               <v-toolbar-title class="headline">
-                Create Group
+                {{ $t('user.create-group') }}
               </v-toolbar-title>
 
               <v-spacer></v-spacer>
@@ -44,7 +44,7 @@
               <v-form ref="newGroup">
                 <v-text-field
                   v-model="newGroupName"
-                  label="Group Name"
+                  :label="$t('user.group-name')"
                   :rules="[existsRule]"
                 ></v-text-field>
               </v-form>
@@ -53,10 +53,10 @@
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn color="grey" text @click="groupDialog = false">
-                Cancel
+                {{ $t('general.cancel') }}
               </v-btn>
               <v-btn color="primary" @click="createGroup">
-                Create
+                {{ $t('general.create') }}
               </v-btn>
             </v-card-actions>
           </v-card>

frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue

@@ -2,8 +2,8 @@
   <v-card outlined class="mt-n1">
     <Confirmation
       ref="deleteUserDialog"
-      title="Confirm User Deletion"
+      :title="$t('user.confirm-link-deletion')"
-      :message="`Are you sure you want to delete the link <b>${activeName}<b/>`"
+      :message="$t('user.are-you-sure-you-want-to-delete-the-link', {link: activeName })"
       icon="mdi-alert"
       @confirm="deleteUser"
       :width="450"
@@ -14,14 +14,14 @@
         mdi-link-variant
       </v-icon>
       <v-toolbar-title class="headine">
-        Sign Up Links
+        {{ $t('user.sign-up-links') }}
       </v-toolbar-title>
 
       <v-spacer> </v-spacer>
       <v-dialog v-model="dialog" max-width="600px">
         <template v-slot:activator="{ on, attrs }">
           <v-btn small color="success" dark v-bind="attrs" v-on="on">
-            Create Link
+            {{ $t('user.create-link') }}
           </v-btn>
         </template>
         <v-card>
@@ -31,7 +31,7 @@
             </v-icon>
 
             <v-toolbar-title class="headline">
-              Create Link
+              {{ $t('user.create-link') }}
             </v-toolbar-title>
 
             <v-spacer></v-spacer>
@@ -43,13 +43,13 @@
                 <v-text-field
                   class="mr-2"
                   v-model="editedItem.name"
-                  label="Link Name"
+                  :label="$t('user.link-name')"
                   :rules="[existsRule]"
                   validate-on-blur
                 ></v-text-field>
                 <v-checkbox
                   v-model="editedItem.admin"
-                  label="Admin"
+                  :label="$t('user.admin')"
                 ></v-checkbox>
               </v-row>
             </v-form>
@@ -58,10 +58,10 @@
           <v-card-actions>
             <v-spacer></v-spacer>
             <v-btn color="grey" text @click="close">
-              Cancel
+              {{ $t('general.cancel') }}
             </v-btn>
             <v-btn color="primary" @click="save">
-              Save
+              {{ $t('general.save') }}
             </v-btn>
           </v-card-actions>
         </v-card>
@@ -90,7 +90,7 @@
             <v-icon small left>
               mdi-account-cog
             </v-icon>
-            {{ item.admin ? "Yes" : "No" }}
+            {{ item.admin ? $t('general.yes') : $t('general.no') }}
           </v-btn>
         </template>
         <template v-slot:item.actions="{ item }">
@@ -98,7 +98,7 @@
             <v-icon small left>
               mdi-delete
             </v-icon>
-            Delete
+            {{ $t('general.delete') }}
           </v-btn>
         </template>
       </v-data-table>
@@ -113,37 +113,39 @@ import { validators } from "@/mixins/validators";
 export default {
   components: { Confirmation },
   mixins: [validators],
-  data: () => ({
+  data() { 
-    dialog: false,
+    return {
-    activeId: null,
+      dialog: false,
-    activeName: null,
+      activeId: null,
-    headers: [
+      activeName: null,
-      {
+      headers: [
-        text: "Link ID",
+        {
-        align: "start",
+          text: this.$t('user.link-id'),
-        sortable: false,
+          align: "start",
-        value: "id",
+          sortable: false,
+          value: "id",
+        },
+        { text: this.$t('general.name'), value: "name" },
+        { text: this.$t('general.token'), value: "token" },
+        { text: this.$t('user.admin'), value: "admin", align: "center" },
+        { text: "", value: "actions", sortable: false, align: "center" },
+      ],
+      links: [],
+      editedIndex: -1,
+      editedItem: {
+        name: "",
+        admin: false,
+        token: "",
+        id: 0,
       },
-      { text: "Name", value: "name" },
+      defaultItem: {
-      { text: "Token", value: "token" },
+        name: "",
-      { text: "Admin", value: "admin", align: "center" },
+        token: "",
-      { text: "", value: "actions", sortable: false, align: "center" },
+        admin: false,
-    ],
+        id: 0,
-    links: [],
+      },
-    editedIndex: -1,
+    } 
-    editedItem: {
+  },
-      name: "",
-      admin: false,
-      token: "",
-      id: 0,
-    },
-    defaultItem: {
-      name: "",
-      token: "",
-      admin: false,
-      id: 0,
-    },
-  }),
 
   computed: {
     baseURL() {

frontend/src/components/Admin/ManageUsers/TheUserTable.vue

@@ -40,7 +40,7 @@
 
             <v-spacer></v-spacer>
             <v-toolbar-title class="headline">
-              {{$t('user.user-id')}} {{ editedItem.id }}
+              {{$t('user.user-id-with-value', {id: editedItem.id }) }}
             </v-toolbar-title>
           </v-app-bar>
 

frontend/src/locales/messages/en.json

@@ -40,7 +40,10 @@
     "recent": "Recent",
     "sort-alphabetically": "A-Z",
     "reset": "Reset",
-    "filter": "Filter"
+    "filter": "Filter",
+    "yes": "Yes",
+    "no": "No",
+    "token": "Token"
   },
   "page": {
     "home-page": "Home Page",
@@ -59,12 +62,28 @@
     "user-password": "User Password",
     "admin": "Admin",
     "user-id": "User ID",
+    "user-id-with-value": "User ID: {id}",
     "group": "Group",
     "new-user": "New User",
     "edit-user": "Edit User",
     "create-user": "Create User",
     "confirm-user-deletion": "Confirm User Deletion",
-    "are-you-sure-you-want-to-delete-the-user": "Are you sure you want to delete the user <b>{activeName} ID: {activeId}<b/>"
+    "are-you-sure-you-want-to-delete-the-user": "Are you sure you want to delete the user <b>{activeName} ID: {activeId}<b/>?",
+    "confirm-group-deletion": "Confirm Group Deletion",
+    "total-users": "Total Users",
+    "total-mealplans": "Total MealPlans",
+    "webhooks-enabled": "Webhooks Enabled",
+    "webhook-time": "Webhook Time",
+    "create-group": "Create Group",
+    "sign-up-links": "Sign Up Links",
+    "create-link": "Create Link",
+    "link-name": "Link Name",
+    "group-id-with-value": "Group ID: {groupID}",
+    "are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?",
+    "group-name": "Group Name",
+    "confirm-link-deletion": "Confirm Link Deletion",
+    "are-you-sure-you-want-to-delete-the-link": "Are you sure you want to delete the link <b>{link}<b/>?",
+    "link-id": "Link ID"
   },
   "meal-plan": {
     "shopping-list": "Shopping List",

frontend/src/locales/messages/fr.json

@@ -40,7 +40,10 @@
     "sort": "Trier",
     "sort-alphabetically": "A-Z",
     "reset": "Réinitialiser",
-    "filter": "Filtrer"
+    "filter": "Filtrer",
+    "no": "Non",
+    "yes": "Oui",
+    "token": "Jeton"
   },
   "page": {
     "home-page": "Accueil",
@@ -63,8 +66,24 @@
     "user-id": "ID utilisateur",
     "user-password": "Mot de passe de l'utilisateur",
     "create-user": "Créer utilisateur",
-    "are-you-sure-you-want-to-delete-the-user": "Êtes-vous sûr de vouloir supprimer l'utilisateur <b>{activeName} ID : {activeId}<b/>",
+    "are-you-sure-you-want-to-delete-the-user": "Êtes-vous sûr de vouloir supprimer l'utilisateur <b>{activeName} ID : {activeId}<b/> ?",
-    "confirm-user-deletion": "Confirmer la suppression"
+    "confirm-user-deletion": "Confirmer la suppression",
+    "confirm-group-deletion": "Confirmer la suppression du groupe",
+    "create-group": "Créer un groupe",
+    "create-link": "Créer un lien",
+    "group-id-with-value": "ID groupe : {groupID}",
+    "are-you-sure-you-want-to-delete-the-group": "Êtes-vous sûr de vouloir supprimer <b>{groupName}<b/> ?",
+    "link-name": "Nom du lien",
+    "sign-up-links": "Liens d'inscription",
+    "total-mealplans": "Nombre de repas planifiés",
+    "total-users": "Nombre d'utilisateurs",
+    "user-id-with-value": "ID utilisateur : {id}",
+    "webhook-time": "Heure du Webhook",
+    "webhooks-enabled": "Webhooks activés",
+    "are-you-sure-you-want-to-delete-the-link": "Êtes-vous sûr de vouloir supprimer le lien <b>{link}<b/> ?",
+    "confirm-link-deletion": "Confirmer la suppresion du lien",
+    "group-name": "Nom du groupe",
+    "link-id": "ID du lien"
   },
   "meal-plan": {
     "shopping-list": "Liste d'achats",