Prevent linkbots from consuming tokens in one time links (#4775)

Fixes #4535

OBS! `PASSWORD_RESET_TIMEOUT` have a new sane default of 15 minutes. A
new timeout setting `PASSWORD_ACTIVATION_TIMEOUT` was added that also
default to 15 minutes.

`PASSWORD_RESET_TIMEOUT` used to default to 3 days to allow new users
some time to activate their account. Organisation that still want the
old default for activation mails can set `PASSWORD_ACTIVATION_TIMEOUT =
259200`.

This is mainly a fix for MS Outlook mail system habit of doing a preview
of links in all e-mails. This preview expires the one time links so when
a user tries to login or reset their password it does not work.

The solution is to show an extra confirmation screen with a login
button, so users need to click one extra time. This solves the
MicrosoftPreview issue and should work for any similar issues as well.

During the work I found a number of inconsistencies in various login
related templates that I also attempted to fix. That is the reson so
many files are changes in this PR.

## Test Steps

- [ ] Use the signup and passwordless login and confirm that you by
clicking the link in the email come to a confirmation screen. Clicking
the button there log you in to the site.

Author: frjo

docs/setup/administrators/configuration.md

@@ -48,12 +48,18 @@ The corresponding locale dir is named: en, en_GB, en_US
 
 ----
 
-Number of seconds that password reset and account activation links are valid (default 259200, 3 days).
+Number of seconds that password reset links are valid (default 259200, 3 days).
 
     PASSWORD_RESET_TIMEOUT = env.int('PASSWORD_RESET_TIMEOUT', 259200)
 
 ----
 
+Number of seconds that account activation links are valid (default 900, 15 minutes).
+
+    PASSWORD_ACTIVATION_TIMEOUT = env.int("PASSWORD_ACTIVATION_TIMEOUT", 900)
+
+----
+
 Seconds to enter password on password page while email change/2FA change (default 120).
 
     PASSWORD_PAGE_TIMEOUT = env.int('PASSWORD_PAGE_TIMEOUT', 120)

hypha/apply/users/templates/two_factor/_base.html

@@ -28,6 +28,9 @@
     {{ block.super }}
     {# Focus the 2FA field. #}
     <script>
-        document.querySelector("#id_generator-token").focus();
+        const generatorToken = document.querySelector("#id_generator-token");
+        if (generatorToken) {
+            generatorToken.focus();
+        }
     </script>
 {% endblock %}

hypha/apply/users/templates/two_factor/core/backup_tokens.html

@@ -2,9 +2,9 @@
 {% load static i18n users_tags heroicons %}
 
 {% block content_inner %}
-    <h1 class="mb-2 font-semibold text-h2">
+    <h2 class="mb-2 font-semibold text-h2">
         {% block title %}{% trans "Backup Codes" %}{% endblock %}
-    </h1>
+    </h2>
 
     <p class="mb-2 print:!hidden">
         {% blocktrans %}You should now print these codes or copy them to your

hypha/apply/users/templates/two_factor/core/backup_tokens_password.html

@@ -2,7 +2,6 @@
 {% load i18n %}
 
 {% block content_inner %}
-
     <div class="mb-4 prose">
         <p>{% blocktrans trimmed %}Congratulations, you've successfully enabled two-factor
             authentication.{% endblocktrans %}</p>
@@ -31,5 +30,4 @@
             </a>
         {% endif %}
     </div>
-
 {% endblock %}

hypha/apply/users/templates/two_factor/core/setup_complete.html

@@ -2,8 +2,8 @@
 {% extends "two_factor/_base.html" %}
 {% load i18n %}
 
-{% block content %}
-    <h1>{% block title %}{% trans "Permission Denied" %}: {{ reason }}{% endblock %}</h1>
+{% block content_inner %}
+    <h2 class="mb-2 text-h2">{% block title %}{% trans "Permission Denied" %}: {{ reason }}{% endblock %}</h2>
 
     <div class="mb-4 prose">
         <p>

hypha/apply/users/templates/two_factor/core/two_factor_required.html

@@ -3,8 +3,8 @@
 
 {% block content_inner %}
 
-    <h1>{% block title %}{% trans "Disable Two-factor Authentication" %}{% endblock %}</h1>
-    <p class="mb-4">{% blocktrans trimmed %}Disabling Two-factor authentication weakens your account security.
+    <h1 class="mb-2 text-h1">{% block title %}{% trans "Disable Two-factor Authentication" %}{% endblock %}</h1>
+    <p class="mb-4 whitespace-normal label">{% blocktrans trimmed %}Disabling Two-factor authentication weakens your account security.
         We recommend reenabling it when you can.{% endblocktrans %}</p>
 
     <form class="form" action="" method="POST" novalidate>

hypha/apply/users/templates/two_factor/profile/disable.html

@@ -0,0 +1,50 @@
+{% extends "base-apply.html" %}
+{% load i18n heroicons %}
+
+{% block title %}{% if is_signup or is_activation %}{% trans "Confirm account creation" %}{% else %}{% trans "Confirm login" %}{% endif %}{% endblock %}
+{% block body_class %}bg-base-200{% endblock %}
+
+{% block content %}
+    <div class="flex flex-col justify-center items-center min-h-[60vh]">
+        <section class="w-full max-w-2xl card shadow-xs bg-base-100 md:card-lg">
+            <div class="items-center card-body">
+                <span class="flex justify-center items-center mb-4 rounded-full bg-primary/10">
+                    {% heroicon_outline "key" aria_hidden="true" size=64 %}
+                </span>
+
+                <h1 class="mb-4 font-semibold text-h0">
+                    {% if is_signup or is_activation %}
+                        {% trans "Complete your registration" %}
+                    {% else %}
+                        {% trans "Complete your login" %}
+                    {% endif %}
+                </h1>
+
+                <div class="mb-6 prose">
+                    {% if is_signup or is_activation %}
+                        <p>{% trans "Your activation link is valid. Click the button below to create your account." %}</p>
+                    {% else %}
+                        <p>{% trans "Your login link is valid. Click the button below to complete your login." %}</p>
+                    {% endif %}
+                </div>
+
+                <form method="post">
+                    {% csrf_token %}
+                    {% if remember_me %}
+                        <input type="hidden" name="remember_me" value="1">
+                    {% endif %}
+                    {% if next %}
+                        <input type="hidden" name="next" value="{{ next }}">
+                    {% endif %}
+                    <button type="submit" class="btn btn-primary btn-lg">
+                        {% if is_signup or is_activation %}
+                            {% trans "Create my account" %}
+                        {% else %}
+                            {% trans "Log in" %}
+                        {% endif %}
+                    </button>
+                </form>
+            </div>
+        </section>
+    </div>
+{% endblock %}

hypha/apply/users/templates/users/activation/confirm.html

@@ -5,14 +5,14 @@
 
 {% if site %}{{ site.root_url }}{% else %}{{ base_url }}{% endif %}{{ activation_path }}
 
-{% blocktrans %}This link can be used only once and will lead you to a page where you can set your password. It will remain active for {{ timeout_days }} days, so please set your password as soon as possible.{% endblocktrans %}
+{% blocktrans %}This link can be used only once and will lead you to a page where you can set your password. It will remain active for {{ timeout_minutes }} minutes, so please set your password as soon as possible.{% endblocktrans %}
 
 {% trans "After setting your password, you will be able to log in at" %}: {% if site %}{{ site.root_url }}{% else %}{{ base_url }}{% endif %} {% trans "in the future using" %}:
 
 {% trans "Username" %}: {{ username }}
 {% trans "Password" %}: {% trans "Your chosen password" %}
 
-{% blocktrans %}If you do not complete the activation process within {{ timeout_days }} days you can use the password reset form at{% endblocktrans %}: {% if site %}{{ site.root_url }}{% else %}{{ base_url }}{% endif %}{% url 'users:password_reset' %}
+{% blocktrans %}If you do not complete the activation process within {{ timeout_minutes }} minutes you can use the password reset form at{% endblocktrans %}: {% if site %}{{ site.root_url }}{% else %}{{ base_url }}{% endif %}{% url 'users:password_reset' %}
 
 {% blocktrans %}Kind Regards,
 The {{ ORG_SHORT_NAME }} Team{% endblocktrans %}

hypha/apply/users/templates/users/activation/email.txt

@@ -1,7 +1,7 @@
 {% extends "base-apply.html" %}
 {% load i18n heroicons %}
 
-{% block title %}{% trans "Activation link issue" %}{% endblock %}
+{% block title %}{% trans "One time link issue" %}{% endblock %}
 {% block body_class %}bg-base-200{% endblock %}
 
 {% block content %}
@@ -12,12 +12,12 @@
                     {% heroicon_outline "exclamation-triangle" class="w-14 h-14 text-warning" %}
                 </span>
 
-                <h2 class="mb-4 font-semibold text-h0">{% trans "We couldn't activate your account" %}</h2>
+                <h1 class="mb-4 font-semibold text-h0">{% trans "The one time link has expired" %}</h1>
 
                 <div class="prose">
                     {% url 'users:password_reset' as password_reset %}
 
-                    <p>{% trans "This usually happens because your activation link has expired, or your account is already activated." %}</p>
+                    <p>{% trans "This usually happens because your one time link has expired, or your account is already activated." %}</p>
 
                     <p>
                         {% blocktrans %}Try <a href="{{ password_reset }}">resetting your password</a> first. If you're still having trouble, contact us at {{ ORG_SHORT_NAME }}:{% endblocktrans %}