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

✨refined Register component for basic requirements

Browse Source
This commit is contained in:
Philipp Dormann 2021-02-26 19:20:19 +01:00
parent a661064f34
commit e63367e84e
1 changed files with 123 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
src/components/Register.vue
View File

@ -1,72 +1,131 @@
<template> <template>
<div class="min-h-screen flex items-center justify-center"> <div class="min-h-screen flex items-center justify-center">
<div class="max-w-md w-full py-12 px-6"> <div class="max-w-md w-full py-12 px-6">
<img class="mx-auto h-24 w-auto" src="/favicon.png" alt="" /> <img class="mx-auto h-24 w-auto" src="/favicon.png" alt />
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center">Lauf für Kaya! - Registrieren</h1> <h1
class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center"
>Lauf für Kaya! - Registrieren</h1>
<p <p
class="mx-auto leading-relaxed text-base text-center" class="mx-auto leading-relaxed text-base text-center"
>Bitte anmelden...</p> >Jetzt für den Lauf für Kaya! 2021 registrieren.</p>
<div class="mt-5"> <div class="mt-4">
<div class="rounded-md shadow-sm"> <label for="first_name" class="block text-sm font-medium">
<div> Vorname
<input <span class="font-bold">(*)</span>
aria-label="E-Mail Adresse" </label>
name="email" <input
type="email" name="firstname"
required id="first_name"
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm" autocomplete="off"
placeholder="E-Mail Adresse" placeholder="Vorname"
v-model="mail" type="text"
/> class="dark:bg-gray-800 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 rounded-md p-2"
/>
<label for="middle_name" class="block text-sm font-medium">Mittelname</label>
<input
name="middlename"
id="middle_name"
autocomplete="off"
placeholder="Mittelname"
type="text"
class="dark:bg-gray-800 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 rounded-md p-2"
/>
<label for="last_name" class="block text-sm font-medium">
Nachname
<span class="font-bold">(*)</span>
</label>
<input
name="lastname"
id="last_name"
autocomplete="off"
placeholder="Nachname"
type="text"
class="dark:bg-gray-800 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 rounded-md p-2"
/>
<label for="email_address" class="block text-sm font-medium">
E-Mail Adresse
<span class="font-bold">(*)</span>
</label>
<input
name="emailname"
id="email_name"
autocomplete="off"
placeholder="E-Mail Adresse"
type="text"
class="dark:bg-gray-800 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 rounded-md p-2"
/>
<div class="grid grid-cols-6 mt-6">
<div class="col-span-6"></div>
<div class="flex items-start col-span-6">
<div class="flex items-center h-5">
<input
id="address_activated"
name="address_activated"
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
/>
</div>
<div class="ml-3 text-sm">
<label for="address_activated" class="font-medium text-gray-400">Adresse angeben?</label>
</div>
</div> </div>
<div class="-mt-px relative"> <div class="col-span-6">
<input <div class="col-span-6">
aria-label="Passwort" <label for="street" class="block text-sm font-medium">Straße</label>
name="password" <input
type="password" type="text"
required name="street"
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm" placeholder="Straße"
placeholder="Passwort" id="street"
/> autocomplete="street-address"
<div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm"> class="dark:bg-gray-800 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 rounded-md p-2"
<a href="./reset" class="text-gray-900 underline">Passwort vergessen?</a> />
</div>
<div class="col-span-6 sm:col-span-6 lg:col-span-2">
<label for="city" class="block text-sm font-medium">Ort</label>
<input
type="text"
name="city"
placeholder="Ort"
id="city"
class="dark:bg-gray-800 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 rounded-md p-2"
/>
</div>
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
<label for="postal_code" class="block text-sm font-medium">PLZ</label>
<input
type="text"
name="postal_code"
placeholder="PLZ"
id="postal_code"
autocomplete="postal-code"
class="dark:bg-gray-800 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 rounded-md p-2"
/>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-5"> <!-- -->
<button <div class="flex items-start mt-12">
v-if="loading === false" <div class="flex items-center h-5">
@click="login" <input
type="submit" id="agb_accepted"
class="relative block w-full py-2 px-3 border border-transparent rounded-md font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm text-white" name="agb_accepted"
> type="checkbox"
<span class="absolute left-0 inset-y pl-3"> class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
<svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"> />
<path </div>
fill-rule="evenodd" <div class="ml-3 text-sm">
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" <label
clip-rule="evenodd" for="agb_accepted"
/> class="font-medium text-gray-400"
</svg> >Ich habe die AGBs gelesen und akzeptiert.</label>
</span> </div>
Log in </div>
</button> <div class="mt-6">
<button <a
v-if="loading === true" href="./login"
type="submit" 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"
class="relative block w-full py-2 px-3 border border-transparent rounded-md font-semibold bg-yellow-500 sm:text-sm text-black" >Registrieren</a>
>
<span class="absolute left-0 inset-y pl-3">
<svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
clip-rule="evenodd"
/>
</svg>
</span>
Logging in...
</button>
</div> </div>
</div> </div>
<div class="mt-6"> <div class="mt-6">
@ -75,14 +134,14 @@
<div class="w-full border-t border-gray-300"></div> <div class="w-full border-t border-gray-300"></div>
</div> </div>
<div class="relative flex justify-center text-sm"> <div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-900">Sie haben noch keinen Account?</span> <span class="px-2 bg-white dark:bg-gray-900">Sie haben bereits einen Account?</span>
</div> </div>
</div> </div>
<div class="mt-6"> <div class="mt-6">
<a <a
href="./register" href="./login"
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm" 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"
>Account erstellen</a> >Zum Login</a>
</div> </div>
</div> </div>
</div> </div>