🌎 Profile - i18n compatibility

ref #5

src/components/Profile.vue

@@ -29,12 +29,13 @@
               <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
               <polyline points="7 10 12 15 17 10" />
               <line x1="12" y1="15" x2="12" y2="3" />
-            </svg> Urkunde herunterladen
+            </svg>
+            {{ $t('download_certificate') }}
           </button>
           <button
             type="button"
             class="inline-flex focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
-          >Änderungen speichern</button>
+          >{{ $t('save_changes') }}</button>
         </div>
       </div>
     </section>
@@ -48,7 +49,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Profil</button>
+              >{{ $t('profile') }}</button>
             </div>
             <div class="flex-none">
               <button
@@ -56,7 +57,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Rundenzeiten</button>
+              >{{ $t('lap_times') }}</button>
             </div>
             <div class="flex-none">
               <button
@@ -64,7 +65,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Spender</button>
+              >{{ $t('sponsoring') }}</button>
             </div>
           </div>
           <div v-if="(activetab === 'profile')" class="tab-content block">
@@ -73,48 +74,48 @@
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
-                      <div class="form-label">First name</div>
+                      <div class="form-label">{{ $t('vorname') }}</div>
                       <input
                         name="first-name"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         type="text"
-                        placeholder="first name"
+                        :placeholder="[[$t('vorname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">middle name</div>
+                      <div class="form-label">{{ $t('mittelname') }}</div>
                       <input
                         name="middle-name"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         type="text"
-                        placeholder="middle name"
+                        :placeholder="[[$t('mittelname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Last name</div>
+                      <div class="form-label">{{ $t('nachname') }}</div>
                       <input
                         name="last-name"
                         type="text"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="last name"
+                        :placeholder="[[$t('nachname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Email address</div>
+                      <div class="form-label">{{ $t('e_mail_adress') }}</div>
                       <input
                         name="email"
                         type="email"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="email address"
+                        :placeholder="[[$t('e_mail_adress')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">phone number</div>
+                      <div class="form-label">{{ $t('phone_number') }}</div>
                       <input
                         name="tel"
                         type="tel"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="phone number"
+                        :placeholder="[[$t('phone_number')]]"
                       />
                     </div>
                   </div>

src/locales/de.json

@@ -1,8 +1,10 @@
 {
     "already_have_an_account": "Sie haben bereits einen Account?",
     "apartment_suite_etc": "Addresszeile 2",
+    "download_certificate": "Urkunde herunterladen",
     "e_mail_adress": "E-Mail Adresse",
     "go_to_login": "Zum Login",
+    "lap_times": "Rundenzeiten",
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
     "mittelname": "Mittelname",
     "nachname": "Nachname",
@@ -11,12 +13,15 @@
     "please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
     "please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
     "plz": "PLZ",
+    "profile": "Profil",
     "provide_address": "Adresse angeben?",
     "register": {
         "register_now": "Jetzt für den Lauf für Kaya! 2021 registrieren."
     },
     "register_now": "Jetzt registrieren!",
     "registrieren": "Registrieren",
+    "save_changes": "Änderungen speichern",
+    "sponsoring": "Sponsoring",
     "strasse": "Straße",
     "this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
     "view_my_data": "Meine Läuferdaten einsehen",

src/locales/en.json

@@ -1,8 +1,10 @@
 {
     "already_have_an_account": "Already have an account?",
     "apartment_suite_etc": "Apartment, suite, etc.",
+    "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
+    "lap_times": "Lap times",
     "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
     "mittelname": "Middlename",
     "nachname": "Lastname",
@@ -11,12 +13,15 @@
     "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
     "please_provide_valid_mail": "Please provide a valid mail address.",
     "plz": "zipcode",
+    "profile": "Profile",
     "provide_address": "Provide a postal address?",
     "register": {
         "register_now": "Register now for Lauf für Kaya! 2021."
     },
     "register_now": "Register now!",
     "registrieren": "Register Now",
+    "save_changes": "Save changes",
+    "sponsoring": "Sponsoring",
     "strasse": "Street/ Block",
     "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
     "view_my_data": "View my data",