Update auth pages visually by sanne-san · Pull Request #6479 · plausible/analytics

sanne-san · 2026-07-02T12:24:26Z

Changes

Create new auth layout context that looks visually cleaner, and hides the header and footer
Transform all auth pages to use the new context. This includes:
- Login page
- Signup page
- Password reset page
- Password reset request page
- Password reset request success page
- Password reset error page
- Activate account page
- Verify 2FA page
- Verify 2FA recovery code page
- SSO login page
- SSO provision notice page
- SSO provision issue page
- Invitation expired page
Tighten copy across auth pages to be more consistent and concise
Remove password conformation field from signup page
Extract password field to a new component with visibility toggle
Extract Plausible logo to a new component
Ensure first field on any page is in focus

Tests

Automated tests have been added

Changelog

Entry has been added to changelog

Documentation

Docs have been updated

Dark mode

The UI has been tested both in dark and light mode

github-actions · 2026-07-02T12:24:46Z

Preview environment👷🏼‍♀️🏗️
PR-6479

- Create new auth layout context that looks visually cleaner, and hides the header and footer - Transform all auth pages to use the new context. This includes: - Login page - Signup page - Password reset page - Password reset request page - Password reset request success page - Password reset error page - Activate account page - Verify 2FA page - Verify 2FA recovery code page - SSO login page - SSO provision notice page - SSO provision issue page - Invitation expired page - Tighten copy across auth pages to be more consistent and concise - Remove password conformation field from signup page - Extract password field to a new component with visibility toggle - Extract Plausible logo to a new component

apata · 2026-07-06T13:39:22Z

+    oninput_js =
+      "this.value=this.value.replace(/[^0-9]/g, '');" <>
+        if assigns.autosubmit? do
+          " if (this.value.length >= #{assigns.length}) this.form.requestSubmit();"
+        else
+          ""
+        end


nitpick, non-blocking: With the autosubmit feature in Activate account feature, it's quite easy to hit the rate limiter, which leads to a frustrating "Rate limited. Go to homepage (actually lands you back on Activate account feature)" experience. Can we treat autosubmitting activation codes as a separate extra feature from the bulk of the changes?

@apata I reverted to the original behaviour, and I also changed the flow to an inline message instead of a separate page for a less frustrating experience:

… across auth pages

aerosol · 2026-07-07T05:11:08Z

          post(conn, "/login", email: user.email, password: "wrong")
        end)

-      assert logs =~ "[warning] [login] wrong password for #{user.email}"


Is this necessary?

aerosol · 2026-07-07T05:41:35Z

        )

-      assert html_response(response, 429) =~ "Too many activation attempts"
+      assert html_response(response, 200) =~


What's the reason for changing from 429 to 200?

@aerosol we switched the rate-limit from a full-page 429 error to an inline error on the /activate page itself for better UX (see this convo). Since inline errors are rendered as a normal form render rather than an error page, I thought the status is 200 instead of 429. Would you prefer if we keep 429 instead?

aerosol · 2026-07-07T05:47:48Z

-          end
-        }
-        onclick="this.select();"
+    <div class={[@class, "flex flex-col gap-y-6 items-center"]}>


This produces broken input length in settings

aerosol · 2026-07-07T06:29:08Z

-        render(conn, "activate.html",
-          error: "Incorrect activation code",
+        render_auth_page(conn, "activate.html",
+          error: "That code didn't work. Please try again.",


This is a bit inconsistent - we're rendering wrong activation code error inline, under the input, but now wrong 2FA code at login is indicated by the flash. Same with wrong recovery code.

aerosol · 2026-07-07T06:37:02Z

-  </:footer>
-</.focus_box>
+      <% else %>
+        <.styled_link method="delete" href="/me?redirect=/register">change email</.styled_link>


are we deliberately dropping the confirmation dialog?

Yeah deliberate, at this point in the flow it's not really a destructive action. Clicking 'change email' and then being asked 'Deleting your account cannot be reversed. Are you sure?' sounds quite alarming for what's essentially 'let me fix a typo/use a different email'.

RobertJoonas

Nice work! 👏 Happy to see much less classname duplication and more extracted reusable components :)

RobertJoonas · 2026-07-07T07:05:49Z

    else
      {:error, :wrong_password} ->
-        Auth.log_failed_login_attempt("wrong password for #{email}")
+        Auth.log_failed_login_attempt("Incorrect password for #{email}")


This message is not exposed to the user so I would revert this change. There might be a Grafana graph somewhere that depends on the word "wrong".

RobertJoonas · 2026-07-07T07:57:53Z

+        <%= if ee?() do %>
+          <%= on_ee do %>


I think the outer if block can be removed here.

RobertJoonas · 2026-07-07T08:29:33Z

+    scope alias: Live,
+          assigns: %{
+            connect_live_socket: true,
+            hide_header?: true,
+            hide_footer?: true,
+            disable_global_notices?: true
+          } do


Since the new AuthLayoutContext is responsible for putting the :auth layout, what do you think if we move these layout-related assigns there too?

def on_mount(_arg, _params, _session, socket) do socket = assign(socket, hide_header?: true, hide_footer?: true, disable_global_notices?: true ) {:cont, socket, layout: {PlausibleWeb.LayoutView, :auth}} end

RobertJoonas · 2026-07-07T08:31:52Z

        end)

-      assert logs =~ "[warning] [login] wrong password for #{user.email}"
+      assert logs =~ "[warning] [login] Incorrect password for #{user.email}"


Ditto: this log is for internal use. Best to revert.

sanne-san added the preview label Jul 2, 2026

sanne-san force-pushed the sanne-auth-pages branch from 4319128 to 081c808 Compare July 2, 2026 15:14

Fix test failures

f94c97d

sanne-san requested a review from a team July 6, 2026 09:10

apata reviewed Jul 6, 2026

View reviewed changes

Comment thread lib/plausible_web/templates/auth/activate.html.heex

apata reviewed Jul 6, 2026

View reviewed changes

Comment thread lib/plausible_web/templates/auth/password_reset_request_form.html.heex Outdated

sanne-san added 3 commits July 6, 2026 16:14

Render flash messages on auth pages by decoupling them from team notices

e92a85c

Extract auth_container component to remove duplicated wrapper classes…

bfd38d8

… across auth pages

Drop autosubmit on /activate and show rate-limit errors inline

dcecf9d

sanne-san requested review from aerosol and apata July 6, 2026 15:35

aerosol reviewed Jul 7, 2026

View reviewed changes

RobertJoonas reviewed Jul 7, 2026

View reviewed changes

Incorporated feedback

4746caa

Uh oh!

Uh oh!

Conversation

sanne-san commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Tests

Changelog

Documentation

Dark mode

Uh oh!

github-actions Bot commented Jul 2, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sanne-san Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sanne-san Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RobertJoonas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sanne-san commented Jul 2, 2026 •

edited

Loading

sanne-san Jul 8, 2026 •

edited

Loading

sanne-san Jul 8, 2026 •

edited

Loading