lfk/selfservice
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

🌎 basic i18n keys for Register component

Browse Source
This commit is contained in:
Philipp Dormann
2021-02-27 14:08:21 +01:00
parent 63bb34ef99
commit 37b7ed75c5
4 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Register.vue
View File

@@ -5,12 +5,10 @@
<h1
class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center"
>Lauf für Kaya! - Registrieren</h1>
<p
class="mx-auto leading-relaxed text-base text-center"
>{{ $t('register.register_now') }}</p>
<p class="mx-auto leading-relaxed text-base text-center">{{ $t('register.register_now') }}</p>
<div class="mt-4">
<label for="first_name" class="block font-medium">
Vorname
{{ $t('vorname') }}
<span class="font-bold">*</span>
</label>
<input
@@ -18,22 +16,22 @@
name="firstname"
id="first_name"
autocomplete="off"
placeholder="Vorname"
:placeholder="[[$t('vorname')]]"
type="text"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
<label for="middle_name" class="block font-medium">Mittelname</label>
<label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label>
<input
v-model="userdetails.middlename"
name="middlename"
id="middle_name"
autocomplete="off"
placeholder="Mittelname"
:placeholder="[[$t('mittelname')]]"
type="text"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
<label for="last_name" class="block font-medium">
Nachname
{{ $t('nachname') }}
<span class="font-bold">*</span>
</label>
<input
@@ -41,7 +39,7 @@
name="lastname"
id="last_name"
autocomplete="off"
placeholder="Nachname"
:placeholder="[[$t('nachname')]]"
type="text"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
@@ -59,7 +57,7 @@
:class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-gray-300': (isEmail(userdetails.mail)) }"
class="dark:bg-gray-800 mt-1 block w-full shadow-sm rounded-l-md sm:text-sm border bg-gray-50 text-gray-100 rounded-md p-2"
/>
<p class="text-sm">Bitte geben Sie eine gültige E-Mail Adresse an</p>
<p class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
<div class="grid grid-cols-6 mt-6">
<div class="col-span-6"></div>
<div class="flex items-start col-span-6">
@@ -73,37 +71,40 @@
/>
</div>
<div class="ml-3 text-sm">
<label for="address_activated" class="font-medium text-gray-400">Adresse angeben?</label>
<label
for="address_activated"
class="font-medium text-gray-400"
>{{ $t('provide_address') }}</label>
</div>
</div>
<div v-if="provide_address === true" class="col-span-6">
<div class="col-span-6">
<label for="street" class="block font-medium">Straße</label>
<label for="street" class="block font-medium">{{ $t('strasse') }}</label>
<input
type="text"
name="street"
placeholder="Straße"
:placeholder="[[$t('strasse')]]"
id="street"
autocomplete="street-address"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
</div>
<div class="col-span-6 sm:col-span-6 lg:col-span-2">
<label for="city" class="block font-medium">Ort</label>
<label for="city" class="block font-medium">{{ $t('ort') }}</label>
<input
type="text"
name="city"
placeholder="Ort"
:placeholder="[[$t('ort')]]"
id="city"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
/>
</div>
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
<label for="postal_code" class="block font-medium">PLZ</label>
<label for="postal_code" class="block font-medium">{{ $t('plz') }}</label>
<input
type="text"
name="postal_code"
placeholder="PLZ"
:placeholder="[[$t('plz')]]"
id="postal_code"
autocomplete="postal-code"
class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
@@ -134,7 +135,7 @@
:disabled="(agb_accepted === false)"
:class="{ 'opacity-50': (agb_accepted === false), 'cursor-not-allowed': (agb_accepted === false) }"
class="text-white block w-full text-center py-2 px-3 border border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
>Registrieren</button>
>{{ $t('registrieren') }}</button>
</div>
</div>
<div class="mt-6">
@@ -143,14 +144,14 @@
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-900">Sie haben bereits einen Account?</span>
<span class="px-2 bg-white dark:bg-gray-900">{{ $t('already_have_an_account') }}</span>
</div>
</div>
<div class="mt-6">
<a
href="./login"
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
>Zum Login</a>
>{{ $t('go_to_login') }}</a>
</div>
</div>
</div>