1 files changed, 54 insertions, 32 deletions

diff --git a/resources/views/dashboard/login.edge b/resources/views/dashboard/login.edge
index 16042b3..9b4b52a 100644
--- a/resources/views/dashboard/login.edge
+++ b/resources/views/dashboard/login.edge
@@ -1,42 +1,64 @@
-@layout('layouts.main')
+@layout('layouts.v2')
 
 @section('content')
-<h2>Login</h2>
-@if(flashMessage('error'))
-    <div class="alert">
-        {{ flashMessage('error') }} 
+<div class="w-screen h-screen bg-purple-200 flex items-center justify-center">
+<form class="w-full max-w-sm bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+  action="{{ route('login') }}" method="POST">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">
+      Login
+    </h1>
+
+    @if(flashMessage('error'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('error') }}
     </div>
-@endif
-@if(old('message'))
-    <div class="alert">
-        {{ old('message') }}
+    @endif
+    @if(old('message'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
     </div>
-@endif
-<form action="/user/login" method="POST">
+    @endif
+
     {{ csrfField() }}
-    <div>
-        <label>E-Mail</label>
-        <div>
-            <input type="email" value="{{ old('mail', '') }}" placeholder="E-Mail" name="mail">
-        </div>
-    </div>
-    <div>
-        <label>Password</label>
-        <div>
-            <input type="password" placeholder="*********" name="password">
-        </div>
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+        E-Mail
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="mail"
+        name="mail"
+        type="text"
+        placeholder="E-Mail"
+        value="{{ old('mail', '') }}"
+        required>
     </div>
-    <div>
-        <button>Login</button>
-        By logging in, you accept the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy policy</a>. This website uses cookies to log you in.
-
+    <div class="mb-6">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        Password
+      </label>
+      <input
+        class="shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+        id="password"
+        type="password"
+        name="password"
+        placeholder="*****"
+        autocomplete="current-password"
+        required>
     </div>
-    <div>
-        <p>Not a member yet? Register in the Ferdi app or <a href="../import">import your Franz account</a>.</p>
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+      type="submit">
+      Sign In
+    </button>
+    <p class="text-gray-600 text-sm text-center py-2">
+      By logging in, you accept the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy policy</a>. This website uses cookies to log you in.
+    </p>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="../import">
+        Import your Franz account
+      </a>
     </div>
 </form>
-<br />
-
 </div>
-
-@endsection
\ No newline at end of file
+@endsection