From 1c356a41f54a954afaa69ed524f62c1676f7bbee Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 10 Jan 2021 14:45:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=8E=20improved=20i18n=20for=20AddUserM?=
 =?UTF-8?q?odal=20and=20UserDetail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/AddUserModal.svelte |  28 ++---
 src/components/UserDetail.svelte   |  28 +++--
 src/locales/en.json                | 184 +++++++++++++++--------------
 3 files changed, 128 insertions(+), 112 deletions(-)

diff --git a/src/components/AddUserModal.svelte b/src/components/AddUserModal.svelte
index 6761df9e..8af83feb 100644
--- a/src/components/AddUserModal.svelte
+++ b/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>
diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 228ef9c8..99ff03ca 100644
--- a/src/components/UserDetail.svelte
+++ b/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
-          User</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-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
-          Changes</button>
+          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>
       </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"
diff --git a/src/locales/en.json b/src/locales/en.json
index 1b1a0a21..853b842c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,87 +1,99 @@
 {
-  "404message": "Sorry, the page you are looking for could not be found.",
-  "404title": "Error 404",
-  "about": "About",
-  "action": "Action",
-  "add-your-first-track": "Add your first track",
-  "application_name": "Lauf für Kaya! - Admin",
-  "author": "Author",
-  "by": "by",
-  "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
-  "changelog": "Changelog",
-  "count_organizations": "# Organizations",
-  "count_teams": "# Teams",
-  "create-a-new-track": "Create a new Track",
-  "credits": "Credits",
-  "dashboard-greeting": "hello there",
-  "dashboard-title": "Dashboard",
-  "datatable": {
-    "search": "🔍 Search...",
-    "sort_column_ascending": "Sort column ascending",
-    "sort_column_descending": "Sort column descending",
-    "previous": "Previous",
-    "next": "Next",
-    "page": "Page",
-    "showing": "Showing",
-    "records": "Records",
-    "of": "of",
-    "to": "to",
-    "loading": "Loading...",
-    "no_matching_records_found": "No matching records found",
-    "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
-  },
-  "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 ✌",
-  "e-mail-adress": "E-Mail Adress",
-  "email_address_or_username": "Email / username",
-  "error_on_login": "Error on login",
-  "faq": "FAQ",
-  "forgot_password?": "Forgot your password?",
-  "general-stats": "General Stats",
-  "general_promise_error": "😢 Error",
-  "goback": "Go Home",
-  "hallo": "hello",
-  "installed-version": "Installed version",
-  "invalid-mail-reset": "the provided email is invalid",
-  "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",
-  "log_in_to_your_account": "Log in to your account",
-  "login_is_checked": "Login is being checked...",
-  "logout": "Logout",
-  "mail-validation-in-progress": "mail validation in progress...",
-  "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",
-  "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",
-  "register": "Register",
-  "repo_link": "Link",
-  "reset-my-password": "Reset my password",
-  "runners": "Runners",
-  "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
-  "settings": "Settings",
-  "signout": "Sign out",
-  "stats-are-being-loaded": "stats are being loaded...",
-  "teams": "Teams",
-  "this-might-take-a-moment": "This might take a moment 👀",
-  "total-distance": "total distance",
-  "total-donations": "total donations",
-  "total-scans": "total scans",
-  "track-added": "Track added",
-  "track-data-is-being-loaded": "Track data is being loaded",
-  "track-is-being-added": "Track is being added...",
-  "track-length-in-m": "Track Length in m",
-  "track-name": "Track name",
-  "tracks": "Tracks",
-  "users": "Users",
-  "welcome_wavinghand": "Welcome 👋",
-  "your_profile": "Your Profile",
-  "manage-admin-users": "manage admin users",
-  "create-user": "Create User"
-}
+    "404message": "Sorry, the page you are looking for could not be found.",
+    "404title": "Error 404",
+    "about": "About",
+    "action": "Action",
+    "add-your-first-track": "Add your first track",
+    "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",
+    "datatable": {
+        "search": "🔍 Search...",
+        "sort_column_ascending": "Sort column ascending",
+        "sort_column_descending": "Sort column descending",
+        "previous": "Previous",
+        "next": "Next",
+        "page": "Page",
+        "showing": "Showing",
+        "records": "Records",
+        "of": "of",
+        "to": "to",
+        "loading": "Loading...",
+        "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 ✌",
+    "e-mail-adress": "E-Mail Adress",
+    "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",
+    "goback": "Go Home",
+    "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",
+    "log_in_to_your_account": "Log in to your account",
+    "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",
+    "register": "Register",
+    "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",
+    "stats-are-being-loaded": "stats are being loaded...",
+    "teams": "Teams",
+    "this-might-take-a-moment": "This might take a moment 👀",
+    "total-distance": "total distance",
+    "total-donations": "total donations",
+    "total-scans": "total scans",
+    "track-added": "Track added",
+    "track-data-is-being-loaded": "Track data is being loaded",
+    "track-is-being-added": "Track is being added...",
+    "track-length-in-m": "Track Length in m",
+    "track-name": "Track name",
+    "tracks": "Tracks",
+    "users": "Users",
+    "valid-email-is-required": "valid email is required",
+    "welcome_wavinghand": "Welcome 👋",
+    "your_profile": "Your Profile"
+}
\ No newline at end of file