🌎 improved i18n for AddUserModal and UserDetail

ref #12

src/components/AddUserModal.svelte

@@ -136,11 +136,11 @@
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">First Name</label>
+                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder="First Name"
+                    placeholder={$_('first-name')}
                     class:border-red-500={!isFirstnameValid}
                     class:focus:border-red-500={!isFirstnameValid}
                     class:focus:ring-red-500={!isFirstnameValid}
@@ -152,17 +152,17 @@
                   {#if !isFirstnameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      First Name is required
+                      {$_('first-name-is-required')}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">Middle Name</label>
+                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
                   <input
                     autocomplete="off"
-                    placeholder="Middle Name"
+                    placeholder={$_('middle-name')}
                     bind:value={middlename_input_value}
                     bind:this={middlename_input}
                     type="text"
@@ -187,17 +187,17 @@
                   {#if !isLastnameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      Last Name is required
+                      {$_('last-name-is-required')}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="password"
-                    class="block text-sm font-medium text-gray-700">Password</label>
+                    class="block text-sm font-medium text-gray-700">{$_('password')}</label>
                   <input
                     autocomplete="off"
-                    placeholder="Password"
+                    placeholder={$_('password')}
                     class:border-red-500={!isPasswordValid}
                     class:focus:border-red-500={!isPasswordValid}
                     class:focus:ring-red-500={!isPasswordValid}
@@ -209,17 +209,17 @@
                   {#if !isPasswordValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      Password is required
+                      {$_('password-is-required')}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="email"
-                    class="block text-sm font-medium text-gray-700">E-Mail</label>
+                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
                   <input
                     autocomplete="off"
-                    placeholder="E-Mail"
+                    placeholder={$_('e-mail-adress')}
                     class:border-red-500={!isEmailValid}
                     class:focus:border-red-500={!isEmailValid}
                     class:focus:ring-red-500={!isEmailValid}
@@ -231,7 +231,7 @@
                   {#if !isEmailValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      valid email is required
+                      {$_('valid-email-is-required')}
                     </span>
                   {/if}
                 </div>
@@ -246,7 +246,7 @@
             on:click={submit}
             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">
-            Create
+            {$_('create')}
           </button>
           <button
             on:click={() => {
@@ -254,7 +254,7 @@
             }}
             type="button"
             class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            Cancel
+            {$_('cancel')}
           </button>
         </div>
       </div>

src/components/UserDetail.svelte

@@ -79,22 +79,20 @@
         <button
           class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm"
           data-userid="${user.id}"
-          onclick="user__delete_cancel()">Cancel</button>
+          onclick="user__delete_cancel()">{$_('cancel')}</button>
         <button
           class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm"
           data-userid="${user.id}"
-          onclick="user__delete_confirm()">Confirm Delete</button>
+          onclick="user__delete_confirm()">{$_('confirm-delete')}</button>
         <button
           type="button"
-          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Delete
+          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-user')}</button>
-          User</button>
         <button
           disabled={!changes_performed}
           class:opacity-50={!changes_performed}
           type="button"
           on:click={submit}
-          class="w-full 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">Save
+          class="w-full 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">{$_('save-changes')}</button>
-          Changes</button>
       </span>
     </div>
 
@@ -132,30 +130,36 @@
       <p class="text-gray-500">set the user active/ inactive</p>
     </div>
     <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700">First name</label>
+      <label
+        for="firstname"
+        class="font-medium text-gray-700">{$_('first-name')}</label>
       <input
         autocomplete="off"
-        placeholder="First name"
+        placeholder={$_('first-name')}
         type="text"
         bind:value={editable_userdata.firstname}
         name="firstname"
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
-      <label for="middlename" class="font-medium text-gray-700">Middle name</label>
+      <label
+        for="middlename"
+        class="font-medium text-gray-700">{$_('middle-name')}</label>
       <input
         autocomplete="off"
-        placeholder="Middle name"
+        placeholder={$_('middle-name')}
         type="text"
         bind:value={editable_userdata.middlename}
         name="middlename"
         class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
-      <label for="lastname" class="font-medium text-gray-700">Last name</label>
+      <label
+        for="lastname"
+        class="font-medium text-gray-700">{$_('last-name')}</label>
       <input
         autocomplete="off"
-        placeholder="Last name"
+        placeholder={$_('last-name')}
         type="text"
         bind:value={editable_userdata.lastname}
         name="lastname"

src/locales/en.json

@@ -7,11 +7,15 @@
     "application_name": "Lauf für Kaya! - Admin",
     "author": "Author",
     "by": "by",
+    "cancel": "Cancel",
     "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
     "changelog": "Changelog",
+    "confirm-delete": "Confirm Delete",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
+    "create": "Create",
     "create-a-new-track": "Create a new Track",
+    "create-user": "Create User",
     "credits": "Credits",
     "dashboard-greeting": "hello there",
     "dashboard-title": "Dashboard",
@@ -30,6 +34,7 @@
         "no_matching_records_found": "No matching records found",
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
+    "delete-user": "Delete User",
     "dependency_name": "Name",
     "dont-have-your-email-connected": "Don't have your email connected?",
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
@@ -37,6 +42,8 @@
     "email_address_or_username": "Email / username",
     "error_on_login": "Error on login",
     "faq": "FAQ",
+    "first-name": "First name",
+    "first-name-is-required": "First Name is required",
     "forgot_password?": "Forgot your password?",
     "general-stats": "General Stats",
     "general_promise_error": "😢 Error",
@@ -44,6 +51,8 @@
     "hallo": "hello",
     "installed-version": "Installed version",
     "invalid-mail-reset": "the provided email is invalid",
+    "last-name": "Last name",
+    "last-name-is-required": "Last Name is required",
     "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
     "license": "License",
     "log_in": "Log in",
@@ -51,12 +60,15 @@
     "login_is_checked": "Login is being checked...",
     "logout": "Logout",
     "mail-validation-in-progress": "mail validation in progress...",
+    "manage-admin-users": "manage admin users",
+    "middle-name": "Middle name",
     "minimum-lap-time-in-s": "minimum lap time in s",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
     "orgs": "Orgs",
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
     "password": "Password",
+    "password-is-required": "Password is required",
     "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
     "profile-picture": "Profile Picture",
     "read-license": "Read License",
@@ -64,6 +76,7 @@
     "repo_link": "Link",
     "reset-my-password": "Reset my password",
     "runners": "Runners",
+    "save-changes": "Save Changes",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "settings": "Settings",
     "signout": "Sign out",
@@ -80,8 +93,7 @@
     "track-name": "Track name",
     "tracks": "Tracks",
     "users": "Users",
+    "valid-email-is-required": "valid email is required",
     "welcome_wavinghand": "Welcome 👋",
-  "your_profile": "Your Profile",
+    "your_profile": "Your Profile"
-  "manage-admin-users": "manage admin users",
-  "create-user": "Create User"
 }