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

feat: improved registration ui

Browse Source
This commit is contained in:
Philipp Dormann 2025-03-28 22:21:44 +01:00
parent 3a9cd95830
commit 4ccac8a0b8
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
3 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/locales/de.json
View File

@ -19,10 +19,14 @@
"e_mail_des_sponsors": "E-Mail des Sponsors",
"error_requesting_the_login_link": "Fehler beim Anfordern des Login-Links...",
"first_lap": "👏 erste Runde",
"geben_sie_ihre_handynummer_an": "Ihre Handynummer",
"hinweis": "Hinweis:",
"i_accept": "Ich habe die ",
"i_accept_end": "gelesen und akzeptiert.",
"if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "Wenn Sie der Systemadministrator sind, finden Sie Konfigurationsanweisungen in der offiziellen Produktdokumentation / README.",
"ihr_nachname": "Ihr Nachname",
"ihr_vorname": "Ihr Vorname",
"ihre_e_mail_adresse": "Ihre E-Mail Adresse",
"imprint": "Impressum",
"invalid_input_phone_number_should_be_international_format": "ungültige Eingabe... Die Telefonnummer sollte ein internationales Format haben",
"lap_time": "Rundenzeit",
@ -39,7 +43,7 @@
"not_registered_yet": "Noch nicht registriert?",
"organization": "Organisation",
"ort": "Ort",
"phone_number": "Telefonnummer",
"phone_number": "Handynummer (optional)",
"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",
@ -50,11 +54,11 @@
"profile": "Profil",
"provide_address": "Adresse angeben?",
"register": {
"register_now": "Jetzt für den Lauf für Kaya! 2025 registrieren."
"register_now": "Jetzt für den LfK! 2025 registrieren."
},
"register_now": "Jetzt registrieren!",
"register_now_small": "Jetzt registrieren",
"registration_local_phone_nr": "Wenn Sie eine Telefonnummer ohne Vorwahl angeben, wird Sie als deutsche Telefonnummer gewertet",
"registration_local_phone_nr": "Handynummern ohne Vorwahl werden als deutsche Telefonnummer gewertet",
"registration_running": "Registrierung läuft...",
"registrationcode": "Registrierungscode",
"registrieren": "Registrieren",

10
src/locales/en.json
View File

@ -19,10 +19,14 @@
"e_mail_des_sponsors": "E-Mail of the Sponsor",
"error_requesting_the_login_link": "Error requesting the login link...",
"first_lap": "👏 first lap",
"geben_sie_ihre_handynummer_an": "Your mobile number",
"hinweis": "Note:",
"i_accept": "I have read and accepted the ",
"i_accept_end": "",
"if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
"ihr_nachname": "Your last name",
"ihr_vorname": "Your first name",
"ihre_e_mail_adresse": "Your email address",
"imprint": "Imprint",
"invalid_input_phone_number_should_be_international_format": "invalid input... phone number should be international format",
"lap_time": "Lap time",
@ -39,7 +43,7 @@
"not_registered_yet": "Not registered yet?",
"organization": "Organization",
"ort": "City",
"phone_number": "Phone Number",
"phone_number": "mobile number (optional)",
"please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
"please_provide_valid_mail": "Please provide a valid mail address.",
"plz": "zipcode",
@ -50,11 +54,11 @@
"profile": "Profile",
"provide_address": "Provide a postal address?",
"register": {
"register_now": "Register now for Lauf für Kaya! 2025."
"register_now": "Register now for LfK! 2025."
},
"register_now": "Register now!",
"register_now_small": "Register now",
"registration_local_phone_nr": "If you enter a phone number without an country code, it will be treated as a German phone number",
"registration_local_phone_nr": "Mobile numbers without an area code are considered German phone numbers",
"registration_running": "registration is running...",
"registrationcode": "Registration Code",
"registrieren": "Register Now",

54
src/views/Register.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="min-h-screen flex items-center justify-center" v-if="registrationState === 'registered'">
<div class="max-w-md w-full py-12 px-6">
<div class="max-w-md w-full py-6 px-6">
<img class="mx-auto h-24 w-auto" src="/favicon-lfk.png" alt />
<h1 class="sm:text-3xl text-2xl font-semibold title-font mb-4 text-center">
Lauf für Kaya! - {{ $t('registriert') }}
@ -12,12 +12,12 @@
</div>
</div>
<div class="min-h-screen flex items-center justify-center" v-else>
<div class="max-w-md w-full py-12 px-6">
<div class="max-w-md w-full py-6 px-6">
<img class="mx-auto h-24 w-auto" src="/favicon-lfk.png" alt />
<h1 class="sm:text-3xl text-2xl font-semibold title-font mb-4 text-center">
Lauf für Kaya! - {{ $t("registrieren") }}
<h1 class="sm:text-3xl text-2xl font-semibold title-font text-center">
Lauf für Kaya!
</h1>
<p class="mx-auto leading-relaxed text-base text-center font-medium">
<p class="mx-auto leading-relaxed text-lg text-center font-medium mb-4">
{{ $t("register.register_now") }}
</p>
<p v-if="state.org_name !== ''" class="mx-auto leading-relaxed text-base text-center font-medium">
@ -56,8 +56,8 @@
<span class="font-bold">*</span>
</label>
<input v-model="userdetails.firstname" name="firstname" id="first_name" autocomplete="off"
:placeholder="[[$t('vorname')]]" type="text" :class="{
'border-red-500': !userdetails.firstname.trim(),
:placeholder="[[$t('ihr_vorname')]]" type="text" :class="{
'': !userdetails.firstname.trim(),
'border-green-300': userdetails.firstname.trim(),
}" class="
dark:bg-gray-800
@ -65,7 +65,7 @@
w-full
shadow-sm
sm:text-sm
border-gray-300 border-2
border-2 placeholder:text-gray-800
bg-gray-50
text-gray-500
rounded-md
@ -77,8 +77,8 @@
<span class="font-bold">*</span>
</label>
<input v-model="userdetails.lastname" name="lastname" id="last_name" autocomplete="off"
:placeholder="[[$t('nachname')]]" type="text" :class="{
'border-red-500': !userdetails.lastname.trim(),
:placeholder="[[$t('ihr_nachname')]]" type="text" :class="{
'': !userdetails.lastname.trim(),
'border-green-300': userdetails.lastname.trim(),
}" class="
dark:bg-gray-800
@ -86,7 +86,7 @@
w-full
shadow-sm
sm:text-sm
border-gray-300 border-2
border-2 placeholder:text-gray-800
bg-gray-50
text-gray-500
rounded-md
@ -98,8 +98,8 @@
<span class="font-bold">*</span>
</label>
<input v-model="userdetails.mail" name="email_address" id="email_address" autocomplete="off"
:placeholder="[[$t('e_mail_adress')]]" type="email" :class="{
'border-red-500': !isEmail(userdetails.mail),
:placeholder="[[$t('ihre_e_mail_adresse')]]" type="email" :class="{
'': !isEmail(userdetails.mail),
'border-green-300': isEmail(userdetails.mail),
}" class="
dark:bg-gray-800
@ -107,13 +107,13 @@
w-full
shadow-sm
sm:text-sm
border-2
border-2 placeholder:text-gray-800
bg-gray-50
text-gray-500
rounded-md
p-2
" />
<p v-if="!isEmail(userdetails.mail)" class="text-sm">
<p v-if="userdetails.mail !== '' && !isEmail(userdetails.mail)" class="text-sm">
{{ $t("please_provide_valid_mail") }}
</p>
<!-- -->
@ -144,24 +144,24 @@
</div>
</div>
<input v-model="userdetails.phone" name="phone" id="phone" autocomplete="off"
:placeholder="[[$t('phone_number')]]" type="text" :class="{
'border-red-500':
!isPhoneOkay(userdetails.phone),
'border-green-300':
isPhoneOkay(userdetails.phone),
:placeholder="[[$t('geben_sie_ihre_handynummer_an')]]" type="text" :class="{
'':
userdetails.phone === '',
'border-red-300':
!isPhoneOkay(),
}" class="
dark:bg-gray-800
block
w-full
shadow-sm
sm:text-sm
border-2
border-2 placeholder:text-gray-800
bg-gray-50
text-gray-500
rounded-md
p-2
" />
<p v-if="!isPhoneOkay(userdetails.phone)" class="text-sm">
<p v-if="!isPhoneOkay()" class="text-sm">
{{ $t("this_is_not_a_valid_international_phone_number") }}
</p>
<!-- -->
@ -193,7 +193,7 @@
w-full
shadow-sm
sm:text-sm
border-gray-300 border-2
border-2 placeholder:text-gray-800
bg-gray-50
text-gray-500
rounded-md
@ -211,7 +211,7 @@
w-full
shadow-sm
sm:text-sm
border-gray-300 border-2
border-2 placeholder:text-gray-800
bg-gray-50
text-gray-500
rounded-md
@ -233,7 +233,7 @@
w-full
shadow-sm
sm:text-sm
border-gray-300 border-2
border-2 placeholder:text-gray-800
bg-gray-50
text-gray-500
rounded-md
@ -261,7 +261,7 @@
w-full
shadow-sm
sm:text-sm
border-gray-300 border-2
border-2 placeholder:text-gray-800
bg-gray-50
text-gray-500
rounded-md
@ -311,7 +311,7 @@
text-center
py-2
px-3
border-2 border-gray-300
border-2 placeholder:text-gray-800 border-gray-300
rounded-md
p-1
bg-blue-800