Fixed Sprig errors

- removed sprig script - updated success and error checking conditonals
CraftQuest · Jun 14, 2024 · a5a8c48 · a5a8c48
1 parent 8ae1cc0
commit a5a8c48
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 43 deletions.
diff --git a/templates/_components/forgot-password-form.twig b/templates/_components/forgot-password-form.twig
@@ -7,36 +7,44 @@
                     Your Account Email Address
                 </label>
                 <div class="mt-1">
-                    <input id="email" name="loginName" type="email" autocomplete="email"  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="">
+                    <input id="email" name="loginName" type="email" autocomplete="email"
+                           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">
+                <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 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>
                     Request Password Reset
                 </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) }}
+                {% if sprig.isError %}
+                    {% 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>
-                    </div>
-
+                    {% endif %}
                 {% endif %}
 
-                {% if success is defined and success %}
+                {% if sprig.isSuccess %}
                     <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">
-                                    We just sent an email to your account email address. Use the link in the email to reset your password.
+                                    We just sent an email to your account email address. Use the link in the email to
+                                    reset your password.
                                 </p>
                             </div>
                         </div>

diff --git a/templates/_components/register-form.twig b/templates/_components/register-form.twig
@@ -9,7 +9,9 @@
                     First Name
                 </label>
                 <div class="mt-1">
-                    <input id="first-name" name="firstName" type="text" autocomplete="first-name" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 sm:text-sm" required value="{{ user.firstName ?? null }}">
+                    <input id="first-name" name="firstName" type="text" autocomplete="first-name"
+                           class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 sm:text-sm"
+                           required value="{{ user.firstName ?? null }}">
                 </div>
                 {{ user ? forms.errorsList(user.getErrors('firstName')) }}
             </div>
@@ -18,7 +20,9 @@
                     Last Name
                 </label>
                 <div class="mt-1">
-                    <input id="last-name" name="lastName" type="text" autocomplete="last-name" 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="{{ user.lastName ?? null }}">
+                    <input id="last-name" name="lastName" type="text" autocomplete="last-name"
+                           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="{{ user.lastName ?? null }}">
                 </div>
                 {{ user ? forms.errorsList(user.getErrors('lastName')) }}
             </div>
@@ -27,7 +31,9 @@
                     Email
                 </label>
                 <div class="mt-1">
-                    <input id="email" name="email" type="email" autocomplete="email"  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="{{ user.email ?? null }}">
+                    <input id="email" name="email" type="email" autocomplete="email"
+                           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="{{ user.email ?? null }}">
                 </div>
                 {{ user ? forms.errorsList(user.getErrors('email')) }}
             </div>
@@ -37,26 +43,42 @@
                     Password
                 </label>
                 <div class="mt-1">
-                    <input id="password" name="password" type="password" autocomplete="current-password" required 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">
+                    <input id="password" name="password" type="password" autocomplete="current-password" required
+                           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">
                 </div>
                 {{ user ? forms.errorsList(user.getErrors('password')) }}
             </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">
+                <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 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>
                     Register
                 </button>
-                {% if success is defined and success %}
+                {% if sprig.isSuccess %}
                     <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">
-                                    We created your account! Please check your email to verify your email address before logging in.
+                                    We created your account! Please check your email to verify your email address before
+                                    logging in.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                {% elseif sprig.isError %}
+                    <div class="rounded-lg bg-red-50 p-4 mt-4 border-2 border-green-100">
+                        <div class="flex">
+                            <div class="ml-3">
+                                <p class="text-sm font-medium text-red-800">
+                                    Oh, no! There was a problem creating your account.
                                 </p>
                             </div>
                         </div>

diff --git a/templates/_components/set-password-form.twig b/templates/_components/set-password-form.twig
@@ -29,6 +29,7 @@
                     </div>
                     Submit New Password
                 </button>
+                {% if sprig.isError %}
                 {% if errors is defined %}
                     <div class="rounded-lg bg-red-50 p-4 mt-4 border-2 border-red-100">
                         <div class="flex">
@@ -37,18 +38,18 @@
                             </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 class="rounded-lg bg-green-50 p-4 mt-4 border-2 border-green-100">
+                    {% endif %}
+                    {% if sprig.isSuccess %}
+                    <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>

diff --git a/templates/dashboard/index.twig b/templates/dashboard/index.twig
@@ -6,7 +6,7 @@
             <div class="flex flex-col w-64">
                 <div class="flex flex-col flex-grow bg-gray-900 pt-5 pb-4 overflow-y-auto">
                     <div class="flex items-center flex-shrink-0 px-4">
-                        <img class="h-8 w-auto" src="https://craftquest.io/img/logo.svg" alt="CraftQuest"">
+                        <img class="h-8 w-auto" src="https://craftquest.io/img/logo.svg" alt="CraftQuest">
                     </div>
                     <nav class="mt-5 flex-1 flex flex-col divide-y divide-black overflow-y-auto" aria-label="Sidebar">
                         <div class="px-2 space-y-1">

diff --git a/templates/forgot-password.twig b/templates/forgot-password.twig
@@ -1,8 +1,5 @@
 {% extends "_layout" %}
 {% if currentUser %} {% redirect "/dashboard" %} {% endif %}
-{% block headJs %}
-    {{ sprig.script }}
-{% endblock %}
 {% block headCss %}
     <style>
         .htmx-indicator { display: none; }

diff --git a/templates/register.twig b/templates/register.twig
@@ -1,8 +1,5 @@
 {% extends "_layout" %}
 {% if currentUser %} {% redirect "/dashboard" %} {% endif %}
-{% block headJs %}
-    {{ sprig.script }}
-{% endblock %}
 {% block headCss %}
     <style>
         .htmx-indicator { display: none; }

diff --git a/templates/setpassword.twig b/templates/setpassword.twig
@@ -1,7 +1,4 @@
 {% extends "_layout" %}
-{% block headJs %}
-    {{ sprig.script }}
-{% endblock %}
 {% block headCss %}
     <style>
         .htmx-indicator { display: none; }