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"