feat: password reset

templates/bare.html.twig

@@ -17,6 +17,10 @@
         <h1 class="px-4 py-4 text-3xl font-extrabold text-orange-500">Torsearch</h1>
         <div class="flex flex-col justify-center items-center">
             {% block body %}{% endblock %}
+            <div class="mt-2 inline-flex gap-4 justify-between text-white">
+                <a class="text-sm" href="{{ path('app_login') }}">Sign In</a>
+                <span class="text-sm">v{{ version }}</span>
+            </div>
         </div>
     </body>
 </html>

templates/user/login.html.twig

@@ -40,14 +40,22 @@
             </label>
             <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" data-controller="csrf-protection">
 
-            <div class="mb-2">
-                <input type="checkbox" name="_remember_me" id="_remember_me">
-                <label for="_remember_me">Remember me</label>
-            </div>
+
+                <div class="mb-2 flex flex-row justify-between">
+                    <div>
+                        <input type="checkbox" name="_remember_me" id="_remember_me">
+                        <label for="_remember_me">Remember me</label>
+                    </div>
+                </div>
+
 
             <button type="submit" class="bg-green-600/40 px-1.5 py-1 w-full rounded-md text-gray-50 backdrop-filter backdrop-blur-sm border-2 border-green-500 hover:bg-green-700/40">
                 Sign in
             </button>
+
+            <div class="flex">
+                <a href="{{ path('app_forgot_password_request') }}">Forgot password?</a>
+            </div>
         </form>
     </div>
 {% endblock %}

templates/user/reset_password/check_email.html.twig

@@ -0,0 +1,21 @@
+{% extends 'bare.html.twig' %}
+
+{% block title %}Password Reset Email Sent{% endblock %}
+
+{% block body %}
+    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 max-w-[420px] border-orange-500 border-2 text-gray-50">
+        <h2 class="text-xl font-bold">Head over to your email</h2>
+
+        <div class="mb-3 flex flex-col gap-4">
+            <p>
+                If an account matching your email exists, then an email was just sent that contains a
+                link that you can use to reset your password. This link will expire in
+                {{ resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle') }}.
+            </p>
+            <p>
+                If you don't receive an email please check your spam folder or
+                <a href="{{ path('app_forgot_password_request') }}">try again</a>.
+            </p>
+        </div>
+    </div>
+{% endblock %}

templates/user/reset_password/email.html.twig

@@ -0,0 +1,9 @@
+<h1>Hi!</h1>
+
+<p>To reset your password, please visit the following link</p>
+
+<a href="{{ url('app_reset_password', {token: resetToken.token}) }}">{{ url('app_reset_password', {token: resetToken.token}) }}</a>
+
+<p>This link will expire in {{ resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle') }}.</p>
+
+<p>Cheers!</p>

templates/user/reset_password/request.html.twig

@@ -0,0 +1,32 @@
+{% extends 'bare.html.twig' %}
+
+{% block title %}Reset your password — Torsearch{% endblock %}
+
+{% block body %}
+    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 max-w-[420px] border-orange-500 border-2 text-gray-50">
+        <h2 class="text-xl font-bold">Reset your password</h2>
+
+        <div class="mb-3">
+            Enter your email address, and we'll send you a link to reset your password.
+        </div>
+
+        <form name="reset_password_request_form" method="post" class="flex flex-col gap-2">
+            {% for flash_error in app.flashes('reset_password_error') %}
+                <div class="mb-3 p-2 bg-rose-500 text-black text-semibold rounded-md" role="alert">{{ flash_error }}</div>
+            {% endfor %}
+
+            <label for="reset_password_request_form_email" class="required flex flex-col mb-2">
+                Email
+                <input type="email"
+                       class="text-input"
+                       id="reset_password_request_form_email"
+                       name="reset_password_request_form[email]"
+                       required="required" autocomplete="email">
+            </label>
+
+            <input type="hidden" id="reset_password_request_form__token" name="reset_password_request_form[_token]" data-controller="csrf-protection" value="csrf-token">
+
+            <button class="submit-button">Send password reset email</button>
+        </form>
+    </div>
+{% endblock %}

templates/user/reset_password/reset.html.twig

@@ -0,0 +1,18 @@
+{% extends 'bare.html.twig' %}
+
+{% block title %}Reset your password — Torsearch{% endblock %}
+
+{% block body %}
+    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 min-w-96 border-orange-500 border-2 text-gray-50">
+        <h2 class="text-xl font-bold text-white">Reset your password</h2>
+
+        <div class="mb-2">
+            Enter a new password for your account.
+        </div>
+
+        {{ form_start(resetForm) }}
+        {{ form_row(resetForm.plainPassword) }}
+        <button class="submit-button">Reset password</button>
+        {{ form_end(resetForm) }}
+    </div>
+{% endblock %}