Login screen (#497)

* fix: removed email to password redirect
* fix: added password into initial login page

backend/views/core/auth/login.py

@@ -40,55 +40,50 @@ def login_initial_page(request: HttpRequest):
 
 @not_authenticated
 @require_POST
-def login_manual(request: HtmxAnyHttpRequest):  # HTMX POST
-    if not request.htmx:
-        return redirect("auth:login")
+def login_manual(request: HttpRequest):
     email = request.POST.get("email")
     password = request.POST.get("password")
-    page = str(request.POST.get("page"))
     redirect_url = request.POST.get("next", "")
 
-    if not page or page == "1":
-        return render(
-            request,
-            "pages/auth/login.html",
-            context={"email": email, "next": redirect_url, "magic_links_enabled": ARE_EMAILS_ENABLED},
-        )
-
     if not email:
-        return render_error_toast_message(request, "Please enter an email")
+        messages.error(request, "Please enter an email")
+        return redirect_to_login("", redirect_url)
 
     try:
         validate_email(email)
     except ValidationError:
-        return render_error_toast_message(request, "Please enter a valid email")
+        messages.error(request, "Please enter a valid email")
+        return redirect_to_login("", redirect_url)
 
     if not password:
-        return render_error_toast_message(request, "Please enter a password")
+        messages.error(request, "Please enter a password")
+        return redirect_to_login(email, redirect_url)
 
     user = authenticate(request, username=email, password=password)
 
     if not user:
-        return render_error_toast_message(request, "Incorrect email or password")
+        messages.error(request, "Incorrect email or password")
+        return redirect_to_login(email, redirect_url)
 
     if user.awaiting_email_verification and ARE_EMAILS_ENABLED:  # type: ignore[attr-defined]
-        return render_error_toast_message(request, "You must verify your email before logging in.")
+        messages.error(request, "You must verify your email before logging in.")
+        return redirect_to_login(email, redirect_url)
 
     login(request, user)
 
-    response = HttpResponse(status=200)
-
     if user.require_change_password:  # type: ignore[attr-defined]
         messages.warning(request, "You have been requested by an administrator to change your account password.")
-        response["HX-Redirect"] = reverse("settings:change_password")
-    else:
-        try:
-            resolve(redirect_url)
-            response["HX-Redirect"] = redirect_url
-        except Resolver404:
-            response["HX-Redirect"] = "/dashboard/"
+        return redirect("settings:change_password")
+
+    try:
+        resolve(redirect_url)
+        return redirect(redirect_url)
+    except Resolver404:
+        return redirect("dashboard")
+
 
-    return response
+def redirect_to_login(email: str, redirect_url: str):
+    return redirect(f"{reverse('auth:login')}?email={email}&next={redirect_url}")
 
 
 def render_error_toast_message(request: HttpRequest, message: str) -> HttpResponse:

frontend/templates/pages/auth/login_initial.html

@@ -65,13 +65,12 @@
             color: inherit;
         }
 
+        .btn-loading {
+            background: url(https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/preview/90-ring-with-bg-white-36.svg) no repeat 50% 50%;
+        }
 
     </style>
-    <form method="post"
-          class="slide-transition"
-          hx-swap="none"
-          hx-post="{% url 'auth:login manual' %}"
-          action="{% url 'auth:login manual' %}">
+    <form id="login-form" method="post" action="{% url 'auth:login manual' %}">
         {% csrf_token %}
         <noscript>
             <div data-theme="dim"
@@ -90,29 +89,51 @@ <h2 class="text-2xl font-bold text-center">
                 </div>
             </div>
         </noscript>
-        <div data-swap="form_fields">
-            <div class="form-control w-full mt-4">
-                <label class="label">
-                    <span class="label-text text-base-content undefined">Email Address</span>
-                </label>
-                <input required
-                       type="email"
-                       name="email"
-                       pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
-                       placeholder="[email protected]"
-                       class="peer input input-bordered w-full"
-                       value="{{ attempted_email|default_if_none:'' }}">
-                <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
-                    <span class="label-text-alt text-error">Please enter a valid email.</span>
-                </label>
-                <input type="hidden" name="page" value="1">
-                <input type="hidden" name="next" value="{{ request.GET.next }}">
-            </div>
-            <button hx-swap="none" hx-target="form" class="btn mt-6 w-full btn-primary">
-                Next
-                <i class="fa-solid fa-arrow-right"></i>
-            </button>
+        <div class="form-control w-full mt-4">
+            <label class="label">
+                <span class="label-text text-base-content undefined">Email Address</span>
+            </label>
+            <input required
+                   type="email"
+                   name="email"
+                   pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
+                   placeholder="[email protected]"
+                   class="peer input input-bordered w-full"
+                   value="{{ request.GET.email|default_if_none:'' }}">
+            <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
+                <span class="label-text-alt text-error">Please enter a valid email.</span>
+            </label>
+            <input type="hidden" name="next" value="{{ request.GET.next }}">
         </div>
+        <div class="form-control w-full mt-4">
+            <label class="label">
+                <span class="label-text text-base-content undefined">Password</span>
+            </label>
+            <input required
+                   autofocus
+                   type="password"
+                   name="password"
+                   placeholder="********"
+                   class="input input-bordered w-full">
+        </div>
+        <button id="login-btn"
+                class="btn btn-primary loading-htmx mt-5 w-full"
+                data-hx-loading="save"
+                type="submit">
+            <span class="loading-htmx-text">Login</span>
+            <span id="currency_save_loading"
+                  class="loading loading-spinner loading-htmx-loader"></span>
+        </button>
+        <div class="divider mt-8">OR</div>
+        {% if magic_links_enabled %}
+            <button type="button"
+                    hx-post="{% url 'auth:login magic_link request' %}"
+                    hx-vals='{"email": "{{ email }}", "next": "{{ next }}"}'
+                    class="btn-large-card flex flex-col items-center">
+                <span>Login with email magic link</span>
+                <span class="text-xs text-center">This sends an email to your address, all you need to do is press the link and you're in!</span>
+            </button>
+        {% endif %}
         <div class="text-center mt-3">
             Don't have an account yet?
             <a href="{% url 'auth:login create_account' %}"
@@ -136,4 +157,14 @@ <h2 class="text-2xl font-bold text-center">
             </a>
         {% endif %}
     </form>
+    <script>
+        // Displays loader and disables button when form is submitted
+        const form = document.getElementById("login-form");
+        form.addEventListener("submit", (event) => {
+            const button = document.getElementById("login-btn");
+            const loader = document.getElementById("currency_save_loading");
+            button.setAttribute("disabled", "");
+            loader.style.display = "inline-block";
+        })
+    </script>
 {% endblock %}