style: update login pages

2025-10-29 12:01:35 +13:00
parent b7e1dac66a
commit 15809a4ccf
12 changed files with 431 additions and 176 deletions
--- a/epdb/views.py
+++ b/epdb/views.py
@ -135,9 +135,12 @@ def register(request):
    context = get_base_context(request)

    if request.method == "GET":
-        context["title"] = "enviPath"
-        context["next"] = request.GET.get("next", "")
-        return render(request, "static/register.html", context)
+        # Redirect to unified login page with signup tab
+        next_url = request.GET.get("next", "")
+        redirect_url = reverse("login") + "#signup"
+        if next_url:
+            redirect_url += f"?next={next_url}"
+        return redirect(redirect_url)
    elif request.method == "POST":
        context["title"] = "enviPath"
        if next := request.POST.get("next"):
--- a/templates/framework.html
+++ b/templates/framework.html
@ -162,8 +162,7 @@
                </li>
                {% if meta.user.username == 'anonymous' %}
                    <li>
-                        <a href="#signup" id="loginButton" data-toggle="modal" data-target="#signupmodal"
-                           style="margin-right:10px">Login</a>
+                        <a href="{% url 'login' %}" id="loginButton" style="margin-right:10px">Login</a>
                    </li>
                {% else %}
                    <li class="dropdown">
--- a/templates/includes/footer.html
+++ b/templates/includes/footer.html
@ -7,14 +7,15 @@
            <a class="link link-hover" href="/">Predict</a>
            <a class="link link-hover" href="/search">Search</a>
            <a class="link link-hover" href="/package">Browse</a>
-            <a class="link link-hover" href="/model">Modelling</a>
+            {% if user.is_authenticated %}
+            <a class="link link-hover" href="/model">Your Collections</a>
+            {% endif %}
            <a href="https://wiki.envipath.org/" target="_blank" class="link link-hover">Documentation</a>
    </nav>
    <nav>
      <h6 class="footer-title">Company</h6>
      <a class="link link-hover" href="/about">About us</a>
-      <a class="link link-hover" href="/contact">Support</a>
-      <a class="link link-hover" href="/contact">Contact</a>
+      <a class="link link-hover" href="/contact">Contact us</a>
      <a class="link link-hover" href="/jobs">Jobs</a>
    </nav>
    <nav>
--- a/templates/includes/navbar.html
+++ b/templates/includes/navbar.html
@ -34,7 +34,7 @@
        <ul class="menu menu-horizontal px-1">
            <button type="button" class="inline-flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8 dark:bg-white/5 dark:inset-ring-white/2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&amp;]:block">⌘K</kbd><kbd class="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&amp;]:block dark:text-gray-400">Ctrl&nbsp;K</kbd></button>
            {% if meta.user.username == 'anonymous' %}
-                <li><a href="#signup" id="loginButton">Login</a></li>
+                <li><a href="{% url 'login' %}" id="loginButton">Login</a></li>
            {% else %}
                <li>
                    <details>
--- a/templates/modals/batch_predict_modal.html
+++ b/templates/modals/batch_predict_modal.html
@ -0,0 +1,4 @@
+<!--
+ Copyright 2025 Tobias Olenyi.
+ SPDX-License-Identifier: Apache-2.0
+-->
--- a/templates/static/login.html
+++ b/templates/static/login.html
@ -1,59 +1,183 @@
-{% extends "static/static_base.html" %}
+{% extends "static/login_base.html" %}
+
+{% block title %}enviPath - Sign In{% endblock %}
+
+{% block extra_styles %}
+/* Tab styling */
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+input[type="radio"].tab-radio {
+    display: none;
+}
+
+.tab-label {
+    cursor: pointer;
+    padding: 0.75rem 1.5rem;
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.tab-label:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+input[type="radio"].tab-radio:checked + .tab-label {
+    border-bottom-color: #3b82f6;
+    font-weight: 600;
+}
+{% endblock %}

 {% block content %}
-    {% if message %}
-        <div class="alert alert-danger" role="alert">
-            {{ message }}
+<!-- Tab Navigation -->
+<div class="border-b border-base-300 mb-6">
+    <div class="flex justify-start">
+        <input type="radio" name="auth-tab" id="tab-signin" class="tab-radio" checked>
+        <label for="tab-signin" class="tab-label">Sign In</label>
+
+        <input type="radio" name="auth-tab" id="tab-signup" class="tab-radio">
+        <label for="tab-signup" class="tab-label">Register</label>
    </div>
-    {% elif success_message %}
-        <div class="alert alert-success" role="alert">
-            {{ success_message }}
-        </div>
-    {% else %}
-        <div class="alert alert-success" role="alert">
-            Kia ora! We are running our closed beta tests at the moment. It would be great to get your help as tester,
-            you
-            can apply to become tester by registering for this page, just hit the button below. More information on the
-            beta
-            test is available in our <a href="https://community.envipath.org/t/apply-to-join-our-closed-beta/95">
-            community
-            form</a>
-        </div>
-    {% endif %}
-    <div class="modal-dialog" style="margin:30px auto; z-index:9999;">
-        <div class="modal-content">
-            <div class="modal-body">
-                <form class="form-horizontal" method="post" action="{% url 'login' %}">
+</div>
+
+<!-- Sign In Tab -->
+<div id="content-signin" class="tab-content active">
+    <form method="post" action="{% url 'login' %}" class="space-y-4">
        {% csrf_token %}
-                    <fieldset>
-                        <div class="control-group">
-                            <label class="control-label" for="username">Username</label>
-                            <div class="controls">
-                                <input required id="username" name="username" type="text"
-                                       class="form-control" placeholder="username" autocomplete="username">
+        <input type="hidden" name="login" value="true"/>
+
+        <div class="form-control">
+            <label class="label" for="username">
+                <span class="label-text">Username</span>
+            </label>
+            <input type="text" id="username" name="username" placeholder="username"
+                   class="input input-bordered w-full" required autocomplete="username">
        </div>
-                            <label class="control-label" for="passwordinput">Password:</label>
-                            <div class="controls">
-                                <input required id="passwordinput" name="password" class="form-control"
-                                       type="password" placeholder="********" autocomplete="current-password">
+
+        <div class="form-control">
+            <label class="label" for="passwordinput">
+                <span class="label-text">Password</span>
+            </label>
+            <input type="password" id="passwordinput" name="password" placeholder="••••••••"
+                   class="input input-bordered w-full" required autocomplete="current-password">
+        </div>
+
+        <div class="text-right">
+            <a href="{% url 'password_reset' %}" class="link link-primary text-sm">Forgot password?</a>
+        </div>
+
+        <input type="hidden" name="next" value="{{ next }}"/>
+
+        <button type="submit" name="signin" class="btn btn-primary w-full">Sign In</button>
+    </form>
+</div>
+
+<!-- Register Tab -->
+<div id="content-signup" class="tab-content">
+    <div class="alert alert-info mb-4 text-sm">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <div>
+            <div class="font-bold">Password Requirements</div>
+            <div class="text-xs mt-1">
+                • 8 to 30 characters<br>
+                • Upper and lower case letters<br>
+                • Digits and special characters (_, -, +)
            </div>
-                            <div class="form-group text-center" style="margin-top:15px;">
-                                <a href="{% url 'password_reset' %}">Forgot your password?</a>
        </div>
    </div>

-                        <div class="control-group">
-                            <label class="control-label" for="signin"></label>
-                            <div class="controls">
-                                <button id="signin" name="signin" class="btn btn-success pull-right">Sign In
-                                </button>
-                                <a class="btn btn-primary" href="{% url 'register' %}">Create an Account</a>
+    <form method="post" action="{% url 'login' %}" class="space-y-4">
+        {% csrf_token %}
+        <input type="hidden" name="register" value="true"/>
+
+        <div class="form-control">
+            <label class="label" for="userid">
+                <span class="label-text">Username</span>
+            </label>
+            <input type="text" id="userid" name="username" placeholder="username"
+                   class="input input-bordered w-full" required autocomplete="username">
        </div>
+
+        <div class="form-control">
+            <label class="label" for="email">
+                <span class="label-text">Email</span>
+            </label>
+            <input type="email" id="email" name="email" placeholder="user@envipath.org"
+                   class="input input-bordered w-full" required autocomplete="email">
        </div>
+
+        <div class="form-control">
+            <label class="label" for="password">
+                <span class="label-text">Password</span>
+            </label>
+            <input type="password" id="password" name="password" placeholder="••••••••"
+                   class="input input-bordered w-full" required autocomplete="new-password">
+        </div>
+
+        <div class="form-control">
+            <label class="label" for="rpassword">
+                <span class="label-text">Repeat Password</span>
+            </label>
+            <input type="password" id="rpassword" name="rpassword" placeholder="••••••••"
+                   class="input input-bordered w-full" required autocomplete="new-password">
+        </div>
+
        <input type="hidden" name="next" value="{{ next }}"/>
-                    </fieldset>
+
+        <button type="submit" name="confirmsignup" class="btn btn-success w-full">Sign Up</button>
    </form>
+
+    <!-- Why Register Section -->
+    <div class="mt-6 p-4 bg-base-200 rounded-lg">
+        <h3 class="font-semibold mb-2">Why register?</h3>
+        <p class="text-sm mb-2">Registration is required to run pathway predictions as they are computationally costly operations.</p>
+        <p class="text-sm mb-2">After you register, you also gain additional permissions:</p>
+        <ul class="text-sm space-y-1 ml-4">
+            <li>• Create your own packages</li>
+            <li>• Submit data for review</li>
+            <li>• Set access permissions to your data</li>
+        </ul>
+        <p class="text-sm mt-3">
+            Questions? Contact <a href="mailto:admin@envipath.org" class="link link-primary">admin@envipath.org</a>
+        </p>
    </div>
-        </div>
-    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+    // Tab switching functionality
+    document.querySelectorAll('input[name="auth-tab"]').forEach(radio => {
+        radio.addEventListener('change', function() {
+            // Hide all content
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+
+            // Show selected content
+            const contentId = 'content-' + this.id.replace('tab-', '');
+            document.getElementById(contentId).classList.add('active');
+        });
+    });
+
+    // Check for hash in URL to auto-select tab
+    window.addEventListener('DOMContentLoaded', function() {
+        const hash = window.location.hash.substring(1); // Remove the # symbol
+        if (hash === 'signup' || hash === 'signin') {
+            const tabRadio = document.getElementById('tab-' + hash);
+            if (tabRadio) {
+                tabRadio.checked = true;
+                // Trigger change event to show correct content
+                tabRadio.dispatchEvent(new Event('change'));
+            }
+        }
+    });
+</script>
 {% endblock %}
--- a/templates/static/login_base.html
+++ b/templates/static/login_base.html
@ -0,0 +1,68 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en" data-theme="envipath">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}enviPath{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
+
+    <!-- Tailwind CSS Output -->
+    <link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css"/>
+
+    <style>
+        {% block extra_styles %}{% endblock %}
+    </style>
+</head>
+<body class="bg-base-100">
+    <div class="flex h-screen">
+        <!-- Left side - Hero Image -->
+        <div class="hidden lg:flex lg:w-1/2 bg-cover bg-center bg-no-repeat items-center justify-center p-12"
+             style="background-image: linear-gradient(135deg, rgba(52, 152, 219, 0.3) 0%, rgba(41, 128, 185, 0.4) 100%), url('{% static "/images/hero.png" %}');">
+            <div class="text-left text-white space-y-6">
+                <svg class="h-16 w-auto fill-white" viewBox="0 0 104 26" role="img">
+                    <use href='{% static "/images/logo-name.svg" %}#ep-logo-name' />
+                </svg>
+                <p class="text-lg max-w-md mx-auto">
+                    Predict and explore microbial biotransformation pathways for environmental contaminants
+                </p>
+            </div>
+        </div>
+
+        <!-- Right side - Content -->
+        <div class="w-full lg:w-1/2 flex items-center justify-center p-8 overflow-y-auto">
+            <div class="w-full max-w-md">
+                <!-- Logo for mobile -->
+                <div class="lg:hidden text-center mb-8">
+                    <svg class="h-12 w-auto mx-auto fill-current" viewBox="0 0 104 26" role="img">
+                        <use href='{% static "/images/logo-name.svg" %}#ep-logo-name' />
+                    </svg>
+                </div>
+
+                <!-- Messages -->
+                {% if message %}
+                    <div class="alert alert-error mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <span>{{ message }}</span>
+                    </div>
+                {% elif success_message %}
+                    <div class="alert alert-success mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <span>{{ success_message }}</span>
+                    </div>
+                {% endif %}
+
+                {% block content %}{% endblock %}
+
+            </div>
+        </div>
+    </div>
+
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html>
--- a/templates/static/password_reset_complete.html
+++ b/templates/static/password_reset_complete.html
@ -1,5 +1,30 @@
-{% extends "static/static_base.html" %}
+{% extends "static/login_base.html" %}
+
+{% block title %}enviPath - Password Reset Complete{% endblock %}

 {% block content %}
-    <p>Your password has been reset successfully. <a href="{% url 'login' %}">Login</a></p>
+<!-- Success Icon -->
+<div class="flex justify-center mb-6">
+    <div class="rounded-full bg-success/20 p-6">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 stroke-success" fill="none" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    </div>
+</div>
+
+<!-- Title -->
+<div class="text-center mb-8">
+    <h2 class="text-3xl font-bold mb-4">Password Reset Complete!</h2>
+    <p class="text-base-content/70 mb-4">
+        Your password has been successfully reset.
+    </p>
+    <p class="text-sm text-base-content/60">
+        You can now sign in with your new password.
+    </p>
+</div>
+
+<!-- Actions -->
+<div class="space-y-4">
+    <a href="{% url 'login' %}" class="btn btn-primary w-full">Sign In</a>
+</div>
 {% endblock %}
--- a/templates/static/password_reset_confirm.html
+++ b/templates/static/password_reset_confirm.html
@ -1,31 +1,94 @@
-{% extends "static/static_base.html" %}
+{% extends "static/login_base.html" %}
+
+{% block title %}enviPath - Set New Password{% endblock %}

 {% block content %}
-    <div class="modal-dialog" style="margin:30px auto; z-index:9999;">
-        <div class="modal-content">
-            <div class="modal-body">
-                <h2>Enter new password</h2>
-                <form method="post">
+<!-- Title -->
+<div class="mb-8">
+    <h2 class="text-3xl font-bold mb-2">Set New Password</h2>
+    <p class="text-base-content/70">Please enter your new password below.</p>
+</div>
+
+<!-- Messages -->
+{% if validlink %}
+    <!-- Password Requirements Info -->
+    <div class="alert alert-info mb-4 text-sm">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <div>
+            <div class="font-bold">Password Requirements</div>
+            <div class="text-xs mt-1">
+                • 8 to 30 characters<br>
+                • Upper and lower case letters<br>
+                • Digits and special characters (_, -, +)
+            </div>
+        </div>
+    </div>
+
+    <!-- Reset Password Form -->
+    <form method="post" class="space-y-4">
        {% csrf_token %}
-                    <p>
-                        <label for="id_new_password1">New password:</label>
-                        <input type="password" class="form-control" name="new_password1" autocomplete="new-password"
-                               required=""
-                               aria-describedby="id_new_password1_helptext" id="id_new_password1">
-                        <span class="helptext" id="id_new_password1_helptext"></span></p>

-                    {{ form.new_password1.help_text|safe }}
+        <div class="form-control">
+            <label class="label" for="id_new_password1">
+                <span class="label-text">New Password</span>
+            </label>
+            <input type="password" id="id_new_password1" name="new_password1" placeholder="••••••••"
+                   class="input input-bordered w-full" required autocomplete="new-password">
+            {% if form.new_password1.help_text %}
+                <label class="label">
+                    <span class="label-text-alt text-base-content/60">{{ form.new_password1.help_text }}</span>
+                </label>
+            {% endif %}
+            {% if form.new_password1.errors %}
+                <label class="label">
+                    <span class="label-text-alt text-error">{{ form.new_password1.errors|join:", " }}</span>
+                </label>
+            {% endif %}
+        </div>

-                    <p>
-                        <label for="id_new_password2">New password confirmation:</label>
-                        <input type="password" class="form-control" name="new_password2" autocomplete="new-password"
-                               required=""
-                               aria-describedby="id_new_password2_helptext" id="id_new_password2">
-                        {{ form.new_password2.help_text|safe }}
-                    </p>
-                    <button class="btn btn-primary" type="submit">Reset Password</button>
+        <div class="form-control">
+            <label class="label" for="id_new_password2">
+                <span class="label-text">Confirm New Password</span>
+            </label>
+            <input type="password" id="id_new_password2" name="new_password2" placeholder="••••••••"
+                   class="input input-bordered w-full" required autocomplete="new-password">
+            {% if form.new_password2.help_text %}
+                <label class="label">
+                    <span class="label-text-alt text-base-content/60">{{ form.new_password2.help_text }}</span>
+                </label>
+            {% endif %}
+            {% if form.new_password2.errors %}
+                <label class="label">
+                    <span class="label-text-alt text-error">{{ form.new_password2.errors|join:", " }}</span>
+                </label>
+            {% endif %}
+        </div>
+
+        <button type="submit" class="btn btn-primary w-full">Reset Password</button>
    </form>
+{% else %}
+    <!-- Invalid Link -->
+    <div class="alert alert-error mb-6">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <div>
+            <div class="font-bold">Invalid Reset Link</div>
+            <div class="text-sm">This password reset link is invalid or has expired.</div>
        </div>
    </div>
+
+    <div class="space-y-4">
+        <a href="{% url 'password_reset' %}" class="btn btn-primary w-full">Request New Reset Link</a>
    </div>
+{% endif %}
+
+<!-- Back to Sign In -->
+<div class="mt-6 text-center text-sm text-base-content/70">
+    <p>Remember your password?
+        <a href="{% url 'login' %}" class="link link-primary">Sign in</a>
+    </p>
+</div>
 {% endblock %}
--- a/templates/static/password_reset_done.html
+++ b/templates/static/password_reset_done.html
@ -1,7 +1,30 @@
-{% extends "static/static_base.html" %}
+{% extends "static/login_base.html" %}
+
+{% block title %}enviPath - Reset Email Sent{% endblock %}

 {% block content %}
-    <div class="alert alert-success" role="alert">
-        An email has been sent with instructions to reset your password.
+<!-- Success Icon -->
+<div class="flex justify-center mb-6">
+    <div class="rounded-full bg-success/20 p-6">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 stroke-success" fill="none" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
+        </svg>
    </div>
+</div>
+
+<!-- Title -->
+<div class="text-center mb-8">
+    <h2 class="text-3xl font-bold mb-4">Check Your Email</h2>
+    <p class="text-base-content/70 mb-4">
+        We've sent an email with instructions to reset your password.
+    </p>
+    <p class="text-sm text-base-content/60">
+        If you don't see it in your inbox, please check your spam folder.
+    </p>
+</div>
+
+<!-- Actions -->
+<div class="space-y-4">
+    <a href="{% url 'login' %}" class="btn btn-primary w-full">Back to Sign In</a>
+</div>
 {% endblock %}
--- a/templates/static/password_reset_form.html
+++ b/templates/static/password_reset_form.html
@ -1,23 +1,33 @@
-{% extends "static/static_base.html" %}
+{% extends "static/login_base.html" %}
+
+{% block title %}enviPath - Reset Password{% endblock %}

 {% block content %}
-    <div class="modal-dialog" style="margin:30px auto; z-index:9999;">
-        <div class="modal-content">
-            <div class="modal-body">
-                <form method="post">
+<!-- Title -->
+<div class="mb-8">
+    <h2 class="text-3xl font-bold mb-2">Reset Password</h2>
+    <p class="text-base-content/70">Enter your email address and we'll send you a link to reset your password.</p>
+</div>
+
+<!-- Reset Password Form -->
+<form method="post" class="space-y-4">
    {% csrf_token %}
-                    <label class="control-label" for="username">Email:</label>
-                    <input type="email" name="email" class="form-control" maxlength="254"
-                           required="" id="id_email">
-                    <div class="control-group">
-                        <label class="control-label" for="signin"></label>
-                        <div class="controls">
-                            <button id="signin" name="signin" type="submit" class="btn btn-success">Send
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
+
+    <div class="form-control">
+        <label class="label" for="id_email">
+            <span class="label-text">Email</span>
+        </label>
+        <input type="email" id="id_email" name="email" placeholder="user@envipath.org"
+               class="input input-bordered w-full" required autocomplete="email">
    </div>
+
+    <button type="submit" class="btn btn-primary w-full">Send Reset Link</button>
+</form>
+
+<!-- Back to Sign In -->
+<div class="mt-6 text-center text-sm text-base-content/70">
+    <p>Remember your password?
+        <a href="{% url 'login' %}" class="link link-primary">Sign in</a>
+    </p>
+</div>
 {% endblock %}
--- a/templates/static/register.html
+++ b/templates/static/register.html
@ -1,65 +0,0 @@
-{% extends "static/static_base.html" %}
-
-{% block content %}
-    {% if message %}
-        <div class="alert alert-danger" role="alert">
-            {{ message }}
-        </div>
-    {% else %}
-        <div class="alert alert-success" role="alert">
-            Kia ora! We are running our closed beta tests at the moment. It would be great to get your help as tester,
-            you
-            can apply to become tester by registering for this page, just hit the button below. More information on the
-            beta
-            test is available in our <a href="https://community.envipath.org/t/apply-to-join-our-closed-beta/95">
-            community
-            form</a>
-        </div>
-    {% endif %}
-    <div class="modal-dialog" style="margin:30px auto; z-index:9999;">
-        <div class="modal-content">
-            <div class="modal-body">
-                <form class="form-horizontal" method="post" action="{% url 'register' %}">
-                    {% csrf_token %}
-                    <fieldset>
-                        <div class="control-group">
-                            <label class="control-label" for="username">Username</label>
-                            <div class="controls">
-                                <input required id="username" name="username" type="text"
-                                       class="form-control" placeholder="username" autocomplete="username">
-                            </div>
-                            <label class="control-label" for="email">Email</label>
-                            <div class="controls">
-                                <input required id="email" name="email" type="text"
-                                       class="form-control" placeholder="email" autocomplete="email">
-                            </div>
-                            <label class="control-label" for="passwordinput">Password:</label>
-                            <div class="controls">
-                                <input required id="passwordinput" name="password" class="form-control"
-                                       type="password" placeholder="********" autocomplete="current-password">
-                            </div>
-                            <label class="control-label" for="passwordinput2">Password:</label>
-                            <div class="controls">
-                                <input required id="passwordinput2" name="rpassword" class="form-control"
-                                       type="password" placeholder="********" autocomplete="current-password">
-                            </div>
-                            <div class="form-group text-center" style="margin-top:15px;">
-                                <a href="{% url 'password_reset' %}">Forgot your password?</a>
-                            </div>
-                        </div>
-
-                        <div class="control-group">
-                            <label class="control-label" for="signin"></label>
-                            <div class="controls">
-                                <button id="signin" name="signin" class="btn btn-success pull-right">Sign Up
-                                </button>
-                                <a class="btn btn-primary" href="{% url 'login' %}">Already have an Account?</a>
-                            </div>
-                        </div>
-                        <input type="hidden" name="next" value="{{ next }}"/>
-                    </fieldset>
-                </form>
-            </div>
-        </div>
-    </div>
-{% endblock %}