Add a Remeber me checkbox to login that extend session time. (#3926)

Fixes #3897

"Remember me" is only available when logging in with password. I see
this as an "advanced" feature. The passwordless login flow is easy so
not a big hassle to do it once a day.

Organisation that wants to can set `SESSION_COOKIE_AGE` to a custom
value, e.g. set it to two weeks to reagin the old behaviour.

To disable "Remember me" set `SESSION_COOKIE_AGE` to the same value as
`SESSION_COOKIE_AGE_LONG`

This PR also:

* removes unused code is_public_site
* removes unused code register_extra_text
* removes all use of link-button* classes. Buttons are now only handled
by the button class.
* add a tiny border radius to all buttons (this is something we
implement on all elements in Hypha)

docs/setup/administrators/configuration.md

@@ -62,10 +62,15 @@ Seconds to enter password on password page while email change/2FA change (defaul
 
 The age of session cookies, in seconds.
 
-This determines the length of time for which the user will remain logged in. The default value is 2 weeks.
+This determines the length of time for which the user will remain logged in. The default value is 12 hours.
 
-    SESSION_COOKIE_AGE = env.int('SESSION_COOKIE_AGE', 60 * 60 * 24 * 7 * 2)
+    SSESSION_COOKIE_AGE = env.int("SESSION_COOKIE_AGE", 60 * 60 * 12)
 
+The age of session cookies when users check "Remember me" etc., in seconds. The default value is 2 weeks.
+
+    SESSION_COOKIE_AGE_LONG = env.int("SESSION_COOKIE_AGE_LONG", 60 * 60 * 24 * 7 * 2)
+
+If both session value are equal the "Remember me" feature are disabled.
 
 ## Hypha custom settings
 

hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html

@@ -17,7 +17,7 @@ <h2 class="text-center font-light">{% trans "My tasks" %}</h2>
                         </span>
                     {% endif %}
                 </div>
-                <a class="button button-primary" href="{{ task.url }}">{% trans "View" %}</a>
+                <a class="button button--primary" href="{{ task.url }}">{% trans "View" %}</a>
             </div>
         {% endfor %}
     </div>

hypha/apply/review/templates/review/review_detail.html

@@ -60,7 +60,7 @@ <h5>{% trans "Score" %}</h5>
                 <p class="text-xs">
                     * {% trans "Review was not against the latest version" %}<br>
                 </p>
-                <a class="button button-primary" href="{{ review.get_compare_url }}">{% trans "Compare" %}</a>
+                <a class="button button--primary" href="{{ review.get_compare_url }}">{% trans "Compare" %}</a>
             </div>
         {% comment %} {% endif %} {% endcomment %}
         </div>

hypha/apply/templates/forms/includes/multi_input_field.html

@@ -11,7 +11,7 @@
 
 {% if field.field.multi_input_add_button %}
     <button
-        class="link link--button link--button--narrow multi-input-add-btn mt-2{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}"
+        class="button button--primary button--narrow multi-input-add-btn my-2{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}"
         type="button" data-multi-field-id="{{ field.field.multi_input_id }}"
         data-multi-visibility-index="{{ field.field.visibility_index }}"
         data-multi-max-index="{{ field.field.max_index }}"

hypha/apply/users/forms.py

@@ -1,4 +1,5 @@
 from django import forms
+from django.conf import settings
 from django.contrib.auth import get_user_model
 from django.contrib.auth.forms import AuthenticationForm
 from django.template.defaultfilters import mark_safe
@@ -12,6 +13,24 @@
 
 
 class CustomAuthenticationForm(AuthenticationForm):
+    """Form to collect the email and password for login.
+
+    Add "Remember me" checkbox that extends session time.
+
+    Adds login extra text and user content to the form, if configured in the
+    wagtail auth settings.
+    """
+
+    if settings.SESSION_COOKIE_AGE <= settings.SESSION_COOKIE_AGE_LONG:
+        remember_me = forms.BooleanField(
+            label=_("Remember me"),
+            help_text=_(
+                "On trusted devices only, keeps you logged in for a longer period."
+            ),
+            required=False,
+            widget=forms.CheckboxInput(),
+        )
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.user_settings = AuthSettings.load(request_or_site=self.request)
@@ -25,7 +44,7 @@ def __init__(self, *args, **kwargs):
 
 
 class PasswordlessAuthForm(forms.Form):
-    """Form to collect the email for passwordless login or signup (if enabled)
+    """Form to collect the email for passwordless login or signup (if enabled).
 
     Adds login extra text and user content to the form, if configured in the
     wagtail auth settings.

hypha/apply/users/migrations/0025_remove_authsettings_register_extra_text.py

@@ -0,0 +1,16 @@
+# Generated by Django 4.2.11 on 2024-05-14 12:51
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("users", "0024_update_is_staff"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="authsettings",
+            name="register_extra_text",
+        ),
+    ]

hypha/apply/users/models.py

@@ -349,9 +349,6 @@ class Meta:
         blank=True,
         help_text=_("Displayed along side login form"),
     )
-    register_extra_text = RichTextField(
-        blank=True, help_text=_("Extra text to be displayed on register form")
-    )
 
     panels = [
         MultiFieldPanel(
@@ -368,12 +365,6 @@ class Meta:
             ],
             _("Login form customizations"),
         ),
-        MultiFieldPanel(
-            [
-                FieldPanel("register_extra_text"),
-            ],
-            _("Register form customizations"),
-        ),
     ]
 
 

hypha/apply/users/templates/users/login.html

@@ -61,7 +61,7 @@ <h2 class="text-2xl">{% blocktrans %}Log in to {{ ORG_SHORT_NAME }}{% endblocktr
                         {% endif %}
 
                         <div class="form__group max-w-sm flex items-center justify-between gap-4">
-                            <button class="link link--button link--button--login" type="submit">{% trans "Log in" %}</button>
+                            <button class="button button--primary button--login" type="submit">{% trans "Log in" %}</button>
                         </div>
 
                         <div class="flex items-center justify-center min-[465px]:justify-start relative mb-4">

hypha/apply/users/templates/users/partials/confirmation_code_sent.html

@@ -33,7 +33,7 @@
 
     <div>
         <button
-            class="button button-primary block mb-4"
+            class="button button--primary block mb-4"
             type="submit"
             hx-post="{% url 'users:elevate_check_code' %}{% if redirect_url %}?next={{ redirect_url }}{% endif %}"
             hx-validate="true"

hypha/apply/users/templates/users/password_reset/form.html

@@ -28,7 +28,7 @@ <h2 class="text-2xl">{% trans "Forgot password?" %}</h2>
                 <p>{{ form.email.label_tag }}</p>
                 <p>{{ form.email }}</p>
 
-                <button class="link link--button link--button--login" type="submit">{% trans "Send reset email" %}</button>
+                <button class="button button--primary button--login" type="submit">{% trans "Send reset email" %}</button>
             </form>
         </div>
     </section>

hypha/apply/users/templates/users/passwordless_login_signup.html

@@ -44,7 +44,7 @@ <h2 class="text-2xl">
                 {% endif %}
 
                 <div class="form__group">
-                    <button class="link link--button link--button--login" type="submit">{% trans "Next" %}</button>
+                    <button class="button button--primary button--login" type="submit">{% trans "Next" %}</button>
                 </div>
 
                 <div class="flex items-center justify-center min-[465px]:justify-start relative mb-4">

hypha/apply/users/views.py

@@ -50,7 +50,6 @@
 from wagtail.users.views.users import change_user_perm
 
 from hypha.core.mail import MarkdownMail
-from hypha.home.models import ApplyHomePage
 
 from .decorators import require_oauth_whitelist
 from .forms import (
@@ -94,17 +93,17 @@ class LoginView(TwoFactorLoginView):
 
     def get_context_data(self, form, **kwargs):
         context_data = super(LoginView, self).get_context_data(form, **kwargs)
-        context_data["is_public_site"] = True
         context_data["redirect_url"] = get_redirect_url(
             self.request, self.redirect_field_name
         )
-        if (
-            Site.find_for_request(self.request)
-            == ApplyHomePage.objects.first().get_site()
-        ):
-            context_data["is_public_site"] = False
         return context_data
 
+    def post(self, *args, **kwargs):
+        # Set longer session time if Remember me is checked.
+        if bool(self.request.POST.get("auth-remember_me", None) == "on"):
+            self.request.session.set_expiry(settings.SESSION_COOKIE_AGE_LONG)
+        return super().post(*args, **kwargs)
+
 
 @method_decorator(login_required, name="dispatch")
 class AccountView(UpdateView):

hypha/public/news/templates/news/news_index.html

@@ -19,7 +19,7 @@ <h4 class="heading heading--listings-introduction">{{ page.introduction|markdown
                     {% endfor %}
                 </select>
             </div>
-            <button class="link link--button link--button__stretch" type="submit">Filter</button>
+            <button class="button" type="submit">Filter</button>
         </form>
 
         {% if news %}

hypha/settings/base.py

@@ -494,8 +494,13 @@
 # Sessions
 # https://docs.djangoproject.com/en/stable/ref/settings/#sessions
 
-# The age of session cookies, in seconds.
-SESSION_COOKIE_AGE = env.int("SESSION_COOKIE_AGE", 60 * 60 * 24 * 7 * 2)  # 2 weeks
+# The default age of session cookies, in seconds.
+SESSION_COOKIE_AGE = env.int("SESSION_COOKIE_AGE", 60 * 60 * 12)  # 12 hours
+
+# The age of session cookies when users check "Remember me" etc., in seconds.
+SESSION_COOKIE_AGE_LONG = env.int(
+    "SESSION_COOKIE_AGE_LONG", 60 * 60 * 24 * 7 * 2
+)  # 2 weeks
 
 # This is used by Wagtail's email notifications for constructing absolute URLs.
 PRIMARY_HOST = env.str("PRIMARY_HOST", None)

hypha/static_src/javascript/submission-form-copy.js

@@ -95,7 +95,7 @@
         var $button = $("<button/>")
             .text("Copy questions to clipboard")
             .addClass(
-                "link link--button link--button--narrow js-clipboard-button"
+                "button button--primary button--narrow my-2 js-clipboard-button"
             )
             .attr(
                 "title",
@@ -106,9 +106,7 @@
             .clone()
             .css({ display: "block", "margin-left": "auto" })
             .insertBefore($application_form);
-        $button
-            .css({ "margin-left": "20px" })
-            .insertAfter($application_form.find("button").last());
+        $button.insertAfter($application_form.find("button").last());
 
         $(".js-clipboard-button").on("click", function (e) {
             e.preventDefault();

hypha/static_src/javascript/toggle-related.js

@@ -7,7 +7,7 @@
         .getBoundingClientRect().height;
 
     let button_show = document.createElement("button");
-    button_show.classList.add("link", "link--button", "link--button--narrow");
+    button_show.classList.add("button", "button--primary", "button--narrow");
     button_show.textContent = "Show";
 
     let button_wrapper = document.createElement("p");

hypha/static_src/sass/abstracts/_mixins.scss

@@ -40,17 +40,12 @@
 // Hide text
 @mixin hidden {
     position: absolute;
-    width: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
     height: 1px;
+    width: 1px;
     overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-}
-
-// iOS Native vertical scroll
-@mixin native-vertical-scroll {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
 }
 
 // Output a rem value for the given property
@@ -97,6 +92,7 @@
     justify-content: center;
 
     &:hover,
+    &:focus,
     &:active {
         cursor: pointer;
         background: $hover-bg;
@@ -181,12 +177,6 @@
     }
 }
 
-// used for the submission list items in the react app
-@mixin submission-list-item {
-    border-block-end: 2px solid $color--light-mid-grey;
-    border-inline-end: 2px solid $color--light-mid-grey;
-}
-
 @mixin table-ordering-styles {
     thead {
         th {

hypha/static_src/sass/abstracts/_variables.scss

@@ -99,6 +99,9 @@ $wrapper--small: 790px;
 // Text line length
 $max-text-line-length: 50em;
 
+// The custom width of 465px allow the buttons to scale with the input field
+$input-box-max-width: 465px;
+
 // Breakpoints
 $breakpoints: (
     "mob-portrait" "(min-width: 320px)",
@@ -131,3 +134,10 @@ $table-breakpoint: "tablet-landscape";
 
 // Dropdown height
 $dropdown-height: 45px;
+
+// Border radius
+$rounded-sm: 0.125rem;
+$rounded: 0.25rem;
+$rounded-md: 0.375rem;
+$rounded-lg: 0.5rem;
+$rounded-full: 9999px;

hypha/static_src/sass/components/_button.scss

@@ -5,6 +5,7 @@
     background-image: none;
     border: 0;
     box-shadow: none;
+    border-radius: $rounded-sm;
 
     &:hover {
         cursor: pointer;
@@ -16,8 +17,6 @@
         opacity: 0.5;
     }
 
-    &-default,
-    &-primary,
     &--primary {
         @include button($color--light-blue, $color--dark-blue);
         display: inline-block;
@@ -52,25 +51,36 @@
         }
     }
 
-    &--left-space {
-        margin-inline-start: 20px;
+    &--login {
+        /* stylelint-disable-next-line media-query-no-invalid */
+        @media (min-width: $input-box-max-width) {
+            width: 20rem;
+        }
     }
 
     &--transparent {
         @include button(transparent, $color--black);
-        @include button--narrow;
         color: $color--black;
         border: 1px solid $color--black;
 
-        &:focus {
-            color: $color--black;
-        }
-
+        &:active,
+        &:focus,
         &:hover {
             color: $color--white;
         }
     }
 
+    &--mobile-standout {
+        color: $color--white;
+        border-color: $color--white;
+        max-width: 250px;
+        margin: 1rem auto 0;
+
+        @include media-query(tablet-portrait) {
+            display: none;
+        }
+    }
+
     &--cookieconsent {
         @include button(transparent, $color--white);
         display: inline;
@@ -156,6 +166,18 @@
         }
     }
 
+    &--left-space {
+        margin-inline-start: 20px;
+    }
+
+    &--narrow {
+        @include button--narrow;
+    }
+
+    &--wide {
+        @include button--wide;
+    }
+
     &--full-width {
         width: 100%;
         text-align: center;
@@ -295,7 +317,7 @@
                 text-align: left;
                 line-height: 1rem;
                 border: 1px solid $color--white;
-                border-radius: 3px;
+                border-radius: $rounded-sm;
             }
 
             &::after {