updated ending templates for password reset

CraftQuest · Sep 9, 2021 · 8ae1cc0 · 8ae1cc0
1 parent 7c66c6e
commit 8ae1cc0
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 61 deletions.
diff --git a/templates/_components/forgot-password-form.twig b/templates/_components/forgot-password-form.twig
@@ -2,7 +2,6 @@
 <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
     <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
         <form sprig s-method="post" s-action="users/send-password-reset-email" s-indicator="#spinner" class="space-y-6">
-            {{ csrfInput() }}
             <div>
                 <label for="email" class="block text-sm font-medium text-gray-700">
                     Your Account Email Address

diff --git a/templates/_components/set-password-form.twig b/templates/_components/set-password-form.twig
@@ -0,0 +1,56 @@
+{% import '_macros/forms' as forms %}
+<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+    <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+        <form sprig s-method="post" s-action="users/set-password" s-indicator="#spinner" class="space-y-6">
+            {{ csrfInput() }}
+            {{ hiddenInput('code', code) }}
+            {{ hiddenInput('id', id) }}
+            <div>
+                <label for="newPassword" class="block text-sm font-medium text-gray-700">
+                    Your New Password
+                </label>
+                <div class="mt-1">
+                    <input id="newPassword" name="newPassword" type="password"
+                           class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none sm:text-sm"
+                           required value="">
+                </div>
+            </div>
+            <div>
+                <button type="submit"
+                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 focus:outline-none">
+                    <div id="spinner" class="htmx-indicator pr-4">
+                        <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
+                             fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                    stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor"
+                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                    </div>
+                    Submit New Password
+                </button>
+                {% if errors is defined %}
+                    <div class="rounded-lg bg-red-50 p-4 mt-4 border-2 border-red-100">
+                        <div class="flex">
+                            <div class="ml-3">
+                                {{ forms.errorsList(errors) }}
+                            </div>
+                        </div>
+                    </div>
+
+                {% endif %}
+
+                {% if success is defined and success %}
+                    <div class="rounded-lg bg-green-50 p-4 mt-4 border-2 border-green-100">
+                        <div class="flex">
+                            <div class="ml-3">
+                                <p class="text-sm font-medium text-green-800">
+                                    Your password was reset and you're logged in! <a class="underline" href="/dashboard">Access the dashboard</a> to continue with your account.                                </p>
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        </form>
+    </div>
+</div>
diff --git a/templates/setpassword.twig b/templates/setpassword.twig
@@ -1,11 +1,13 @@
 {% extends "_layout" %}
-{% if currentUser %} {% redirect "/dashboard" %} {% endif %}
 {% block headJs %}
     {{ sprig.script }}
 {% endblock %}
 {% block headCss %}
+    <style>
+        .htmx-indicator { display: none; }
+        .htmx-request.htmx-indicator { display: block; }
+    </style>
 {% endblock %}
-
 {% block content %}
     <div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
@@ -14,63 +16,6 @@
                 Create New Password
             </h2>
         </div>
-        {% import '_macros/forms' as forms %}
-        <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-            <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-                <form method="post" class="space-y-6">
-                    {{ actionInput("users/set-password") }}
-                    {{ hiddenInput('code', code) }}
-                    {{ hiddenInput('id', id) }}
-                    {{ csrfInput() }}
-                    <div>
-                        <label for="newPassword" class="block text-sm font-medium text-gray-700">
-                            Your New Password
-                        </label>
-                        <div class="mt-1">
-                            <input id="newPassword" name="newPassword" type="password"
-                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none sm:text-sm"
-                                   required value="">
-                        </div>
-                    </div>
-                    <div>
-                        <button type="submit"
-                                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 focus:outline-none">
-                            <div id="spinner" class="htmx-indicator pr-4">
-                                <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
-                                     fill="none" viewBox="0 0 24 24">
-                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
-                                            stroke-width="4"></circle>
-                                    <path class="opacity-75" fill="currentColor"
-                                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                </svg>
-                            </div>
-                            Submit New Password
-                        </button>
-                        {% if errors is defined %}
-                            <div class="rounded-lg bg-red-50 p-4 mt-4 border-2 border-red-100">
-                                <div class="flex">
-                                    <div class="ml-3">
-                                        {{ forms.errorsList(errors) }}
-                                    </div>
-                                </div>
-                            </div>
-
-                        {% endif %}
-
-                        {% if success is defined and success %}
-                            <div class="rounded-lg bg-green-50 p-4 mt-4 border-2 border-green-100">
-                                <div class="flex">
-                                    <div class="ml-3">
-                                        <p class="text-sm font-medium text-green-800">
-                                            Your password was reset.
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        {% endif %}
-                    </div>
-                </form>
-            </div>
-        </div>
+        {{ sprig('_components/set-password-form') }}
     </div>
 {% endblock %}