From e63367e84e382607d372dd5f14f3dd13da0426de Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 26 Feb 2021 19:20:19 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8refined=20Register=20component=20for?=
 =?UTF-8?q?=20basic=20requirements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Register.vue | 187 ++++++++++++++++++++++++------------
 1 file changed, 123 insertions(+), 64 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index ef0c89a..e8c2ad4 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -1,72 +1,131 @@
 <template>
   <div class="min-h-screen flex items-center justify-center">
     <div class="max-w-md w-full py-12 px-6">
-      <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>
+      <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>
       <p
         class="mx-auto leading-relaxed text-base text-center"
-      >Bitte anmelden...</p>
-      <div class="mt-5">
-        <div class="rounded-md shadow-sm">
-          <div>
-            <input
-              aria-label="E-Mail Adresse"
-              name="email"
-              type="email"
-              required
-              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"
-              placeholder="E-Mail Adresse"
-              v-model="mail"
-            />
+      >Jetzt für den Lauf für Kaya! 2021 registrieren.</p>
+      <div class="mt-4">
+        <label for="first_name" class="block text-sm font-medium">
+          Vorname
+          <span class="font-bold">(*)</span>
+        </label>
+        <input
+          name="firstname"
+          id="first_name"
+          autocomplete="off"
+          placeholder="Vorname"
+          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 class="-mt-px relative">
-            <input
-              aria-label="Passwort"
-              name="password"
-              type="password"
-              required
-              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="Passwort"
-            />
-            <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm">
-              <a href="./reset" class="text-gray-900 underline">Passwort vergessen?</a>
+          <div class="col-span-6">
+            <div class="col-span-6">
+              <label for="street" class="block text-sm font-medium">Straße</label>
+              <input
+                type="text"
+                name="street"
+                placeholder="Straße"
+                id="street"
+                autocomplete="street-address"
+                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-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 class="mt-5">
-          <button
-            v-if="loading === false"
-            @click="login"
-            type="submit"
-            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"
-          >
-            <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>
-            Log in
-          </button>
-          <button
-            v-if="loading === true"
-            type="submit"
-            class="relative block w-full py-2 px-3 border border-transparent rounded-md font-semibold bg-yellow-500 sm:text-sm text-black"
-          >
-            <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 class="flex items-start mt-12">
+          <div class="flex items-center h-5">
+            <input
+              id="agb_accepted"
+              name="agb_accepted"
+              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="agb_accepted"
+              class="font-medium text-gray-400"
+            >Ich habe die AGBs gelesen und akzeptiert.</label>
+          </div>
+        </div>
+        <div class="mt-6">
+          <a
+            href="./login"
+            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</a>
         </div>
       </div>
       <div class="mt-6">
@@ -75,14 +134,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 noch keinen Account?</span>
+            <span class="px-2 bg-white dark:bg-gray-900">Sie haben bereits einen Account?</span>
           </div>
         </div>
         <div class="mt-6">
           <a
-            href="./register"
-            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"
-          >Account erstellen</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>
         </div>
       </div>
     </div>