Added translation keyz

ref #48

src/components/groups/AddGroupModal.svelte

@@ -33,7 +33,7 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: "Group is being added...",
+        text: $_('group-is-being-added'),
         duration: -1,
       }).showToast();
       let postdata = {
@@ -47,7 +47,7 @@
           modal_open = false;
           //
           Toastify({
-            text: "Group added",
+            text: $_('group-added'),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -105,23 +105,22 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Create a new user group
+                {$_('create-a-new-user-group')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Please provide the required information for creating a new
-                  user group.
+                  {$_('please-provide-the-required-information-for-creating-a-new-user-group')}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">Name</label>
+                    class="block text-sm font-medium text-gray-700">{$_('name')}</label>
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder="Name"
+                    placeholder="{$_('name')}"
                     class:border-red-500={!isNameValid}
                     class:focus:border-red-500={!isNameValid}
                     class:focus:ring-red-500={!isNameValid}
@@ -132,17 +131,17 @@
                   {#if !isNameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      Name is required
+                      {$_('name-is-required')}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">Description(optional)</label>
+                    class="block text-sm font-medium text-gray-700">{$_('description-optional')}</label>
                   <input
                     autocomplete="off"
-                    placeholder="Something about the group.."
+                    placeholder="{$_('something-about-the-group')}"
                     bind:value={description_input_value}
                     type="text"
                     name="trackname"

src/components/groups/GroupDetail.svelte

@@ -175,7 +175,7 @@
       {#if !isGroupnameValid}
         <span
           class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          Group name is required
+          {$_('group-name-is-required')}
         </span>
       {/if}
     </div>

src/components/groups/GroupPermissions.svelte

@@ -26,7 +26,7 @@ UserGroupService,
   });
   function submit() {
     Toastify({
-      text: "updating permissions...",
+      text: $_('updating-permissions'),
       duration: 2500,
     }).showToast();
     to_delete.forEach((d) => {
@@ -160,7 +160,7 @@ UserGroupService,
         {$_('verfuegbare')}
       </div>
       <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-        granted
+        {$_('granted')}
       </div>
     </div>
     <!--  -->

src/components/groups/Groups.svelte

@@ -9,7 +9,7 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    User Groups
+    {$_('user-groups')}
     {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
       <button
         on:click={() => {
@@ -17,7 +17,7 @@
         }}
         type="button"
         class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        Add User Group
+        {$_('add-user-group')}
       </button>
     {/if}
   </span>

src/components/groups/UserGroupsEmptyState.svelte

@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={groups_empty} alt="" />
-    <span class="font-bold">There are no groups yet.</span><br />
-    <span>Add your first group</span>
+    <span class="font-bold">{$_('there-are-no-groups-yet')}.</span><br />
+    <span>{$_('add-your-first-group')}</span>
   </p>
 </div>

src/components/groups/UserGroupsOverview.svelte

@@ -78,8 +78,7 @@
                           active_deletes[group.id] = false;
                         }}
                         tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
-                        Delete</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                       <button
                         on:click={() => {
                           UserGroupService.userGroupControllerRemove(group.id, true)