#16 Implement Password reset

3 files changed, 118 insertions, 0 deletions

diff --git a/resources/views/dashboard/forgotPassword.edge b/resources/views/dashboard/forgotPassword.edge
new file mode 100644
index 0000000..755c300
--- /dev/null
+++ b/resources/views/dashboard/forgotPassword.edge
@@ -0,0 +1,49 @@
+@layout('layouts.v2')
+
+@section('content')
+<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="/user/forgot" method="POST">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">
+      Forgot Password?
+    </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="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
+    </div>
+    @endif
+
+    {{ csrfField() }}
+    <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>
+    
+    <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">
+      Reset password
+    </button>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="/user/login">
+        Login instead
+      </a>
+    </div>
+</form>
+</div>
+@endsection
diff --git a/resources/views/dashboard/login.edge b/resources/views/dashboard/login.edge
index 9b4b52a..dce7360 100644
--- a/resources/views/dashboard/login.edge
+++ b/resources/views/dashboard/login.edge
@@ -55,6 +55,11 @@
       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="/user/forgot">
+        Forgot my Password
+      </a>
+    </div>
+    <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>
diff --git a/resources/views/dashboard/resetPassword.edge b/resources/views/dashboard/resetPassword.edge
new file mode 100644
index 0000000..d663020
--- /dev/null
+++ b/resources/views/dashboard/resetPassword.edge
@@ -0,0 +1,64 @@
+@layout('layouts.v2')
+
+@section('content')
+<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="/user/reset" method="POST">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">
+      Reset Your Password
+    </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="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
+    </div>
+    @endif
+
+    {{ csrfField() }}
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        New Password
+      </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="password"
+        name="password"
+        type="password"
+        placeholder="New Password"
+        value="{{ old('password', '') }}"
+        required>
+    </div>
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password_confirmation">
+        Confirm Password
+      </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="password_confirmation"
+        name="password_confirmation"
+        type="password"
+        placeholder="Confirm Password"
+        value="{{ old('password_confirmation', '') }}"
+        required>
+    </div>
+
+    <input type="hidden" name="token" value="{{ token }}">
+    
+    <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">
+      Reset password
+    </button>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="/user/login">
+        Login instead
+      </a>
+    </div>
+</form>
+</div>
+@endsection