From 0d5467968f85f8919e493432aae6562550f38720 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Wed, 28 Feb 2024 18:05:30 -0800
Subject: [PATCH 01/12] session: add a concept of sudo mode

This introduces "sudo mode", whereby an admin can enter a privileged
mode for a certain period of time. The session tracks this in the
browser's local storage.
---
 app/services/session.js | 54 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/app/services/session.js b/app/services/session.js
index 55a456ceb5e..f8e0af0de93 100644
--- a/app/services/session.js
+++ b/app/services/session.js
@@ -1,4 +1,5 @@
 import Service, { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 import { dropTask, race, rawTimeout, task, waitForEvent } from 'ember-concurrency';
 import window from 'ember-window-mock';
@@ -15,6 +16,15 @@ export default class SessionService extends Service {
 
   savedTransition = null;
 
+  /**
+   * The timestamp (in milliseconds since the UNIX epoch, as returned by
+   * {@link Date.now()}) that the user has sudo enabled until.
+   *
+   * @type {number | null}
+   */
+  @tracked sudoEnabledUntil = null;
+
+  /** @type {import("../models/user").default | null} */
   @alias('loadUserTask.last.value.currentUser') currentUser;
   @alias('loadUserTask.last.value.ownedCrates') ownedCrates;
 
@@ -30,6 +40,36 @@ export default class SessionService extends Service {
     }
   }
 
+  get isAdmin() {
+    return this.currentUser?.is_admin === true;
+  }
+
+  get isSudoEnabled() {
+    return this.currentUser?.is_admin === true && this.sudoEnabledUntil !== null && this.sudoEnabledUntil >= Date.now();
+  }
+
+  /**
+   * Enables or disables sudo mode based on the `duration_ms` parameter.
+   *
+   * If the user is not an admin, nothing happens, successfully.
+   *
+   * @param {number} duration_ms If non-zero, enables sudo mode for this
+   *                             length of time. If zero, disables sudo mode
+   *                             immediately.
+   */
+  setSudo(duration_ms) {
+    if (this.currentUser?.is_admin) {
+      if (duration_ms) {
+        const expiry = Date.now() + duration_ms;
+        localStorage.setItem('sudo', expiry);
+        this.sudoEnabledUntil = expiry;
+      } else {
+        localStorage.removeItem('sudo');
+        this.sudoEnabledUntil = null;
+      }
+    }
+  }
+
   /**
    * This task will open a popup window, query the `/api/private/session/begin` API
    * endpoint and then navigate the popup window to the received URL.
@@ -158,6 +198,20 @@ export default class SessionService extends Service {
     let { id } = currentUser;
     this.sentry.setUser({ id });
 
+    // If the user is an admin, we need to look up whether they have enabled
+    // sudo mode.
+    if (currentUser?.is_admin) {
+      const expiry = localStorage.getItem('sudo');
+      if (expiry !== null) {
+        try {
+          this.sudoEnabledUntil = +expiry;
+        } catch {
+          // It doesn't really matter if this fails; any invalid value will just
+          // be treated as the user not being in sudo mode.
+        }
+      }
+    }
+
     return { currentUser, ownedCrates };
   });
 }

From 4455ac82e32523ecd32c3e3c09fa7c94d7fe376d Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Wed, 28 Feb 2024 18:08:17 -0800
Subject: [PATCH 02/12] header: add a menu item for admins to enter and leave
 sudo mode

If the user is in sudo mode, the expiry time is also displayed in the
menu.
---
 app/components/header.hbs        | 24 +++++++++++++++++++-----
 app/components/header.js         | 13 +++++++++++++
 app/components/header.module.css | 13 ++++++++++++-
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/app/components/header.hbs b/app/components/header.hbs
index 9c1368d7761..e781b5b2c38 100644
--- a/app/components/header.hbs
+++ b/app/components/header.hbs
@@ -25,11 +25,25 @@
             {{ this.session.currentUser.name }}
           </dd.Trigger>
 
-          <dd.Menu local-class="current-user-links" as |menu|>
-            <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="settings" data-test-settings>Account Settings</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
-            <menu.Item local-class="menu-item-with-separator">
+          <dd.Menu local-class='current-user-links' as |menu|>
+            <menu.Item><LinkTo @route='dashboard'>Dashboard</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route='settings' data-test-settings>Account Settings</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route='me.pending-invites'>Owner Invites</LinkTo></menu.Item>
+            {{#if this.session.isAdmin}}
+              <menu.Item local-class='sudo'>
+                {{#if this.session.isSudoEnabled}}
+                  <button local-class='sudo-menu-item' type='button' {{on 'click' this.disableSudo}}>
+                    Disable admin actions
+                    <div local-class='expires-in'>expires at {{date-format this.session.sudoEnabledUntil 'HH:mm'}}</div>
+                  </button>
+                {{else}}
+                  <button local-class='sudo-menu-item' type='button' {{on 'click' this.enableSudo}}>
+                    Enable admin actions
+                  </button>
+                {{/if}}
+              </menu.Item>
+            {{/if}}
+            <menu.Item local-class='menu-item-with-separator'>
               <button
                 type="button"
                 disabled={{this.session.logoutTask.isRunning}}
diff --git a/app/components/header.js b/app/components/header.js
index 6b8dd900ca4..2712a672987 100644
--- a/app/components/header.js
+++ b/app/components/header.js
@@ -1,6 +1,19 @@
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 
 export default class Header extends Component {
+  /** @type {import("../services/session").default} */
   @service session;
+
+  @action
+  enableSudo() {
+    // FIXME: hard coded six hour duration.
+    this.session.setSudo(6 * 60 * 60 * 1000);
+  }
+
+  @action
+  disableSudo() {
+    this.session.setSudo(0);
+  }
 }
diff --git a/app/components/header.module.css b/app/components/header.module.css
index afed697c00f..39cbb58469a 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -172,7 +172,8 @@
 }
 
 .login-menu-item,
-.logout-menu-item {
+.logout-menu-item,
+.sudo-menu-item {
     composes: button-reset from '../styles/shared/buttons.module.css';
     cursor: pointer;
 
@@ -184,3 +185,13 @@
         margin-right: var(--space-2xs);
     }
 }
+
+.sudo > button {
+    flex-direction: column !important;
+
+    > .expires-in {
+        font-size: 80%;
+        font-style: italic;
+        padding-top: var(--space-3xs);
+    }
+}

From 185bf3e1b3943de1fbce23e4bf628a7acac6a80e Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Wed, 28 Feb 2024 18:11:15 -0800
Subject: [PATCH 03/12] user-avatar: add a `sudo` argument that displays a
 wizard hat

We probably actually want something different to be displayed, but it
does successfully indicate that something is different about the current
user session.
---
 app/components/header.hbs             | 2 +-
 app/components/user-avatar.hbs        | 5 ++++-
 app/components/user-avatar.js         | 5 +++++
 app/components/user-avatar.module.css | 3 +++
 4 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 app/components/user-avatar.module.css

diff --git a/app/components/header.hbs b/app/components/header.hbs
index e781b5b2c38..fbdffe2f995 100644
--- a/app/components/header.hbs
+++ b/app/components/header.hbs
@@ -21,7 +21,7 @@
       {{#if this.session.currentUser}}
         <Dropdown data-test-user-menu as |dd|>
           <dd.Trigger local-class="dropdown-button" data-test-toggle>
-            <UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
+            <UserAvatar @user={{this.session.currentUser}} @size="small" @sudo={{this.session.isSudoEnabled}} local-class="avatar" data-test-avatar />
             {{ this.session.currentUser.name }}
           </dd.Trigger>
 
diff --git a/app/components/user-avatar.hbs b/app/components/user-avatar.hbs
index da95f458898..8a718381699 100644
--- a/app/components/user-avatar.hbs
+++ b/app/components/user-avatar.hbs
@@ -6,4 +6,7 @@
   title={{this.title}}
   decoding="async"
   ...attributes
-/>
\ No newline at end of file
+/>
+{{#if this.sudo}}
+  🧙
+{{/if}}
\ No newline at end of file
diff --git a/app/components/user-avatar.js b/app/components/user-avatar.js
index 37012f4738d..e779fd49cba 100644
--- a/app/components/user-avatar.js
+++ b/app/components/user-avatar.js
@@ -32,4 +32,9 @@ export default class UserAvatar extends Component {
   get src() {
     return `${this.args.user.avatar}&s=${this.size * 2}`;
   }
+
+  /** @return {boolean} */
+  get sudo() {
+    return this.args.sudo;
+  }
 }
diff --git a/app/components/user-avatar.module.css b/app/components/user-avatar.module.css
new file mode 100644
index 00000000000..7adab0402ae
--- /dev/null
+++ b/app/components/user-avatar.module.css
@@ -0,0 +1,3 @@
+.sudo {
+    margin-right: var(--space-2xs);
+}

From 1e85bd0469e95e9bf3663ded9200ee1020ad66be Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Wed, 28 Feb 2024 18:13:07 -0800
Subject: [PATCH 04/12] components: add a `PrivilegedAction` component

This component wraps controls that can be used by either an owning user
or by an admin. The `@userAuthorised` argument is used to indicate that
the current user is allowed to perform the action wrapped by the
component, while the admin status is extracted from the current session.

If an admin is logged in, but sudo mode is disabled, then a disabled
version of the control(s) will be shown by default. This can be
customised by specifying the `:placeholder` block.
---
 app/components/privileged-action.hbs        |  24 ++++
 app/components/privileged-action.js         |  55 ++++++++
 app/components/privileged-action.module.css |   5 +
 tests/components/privileged-action-test.js  | 139 ++++++++++++++++++++
 4 files changed, 223 insertions(+)
 create mode 100644 app/components/privileged-action.hbs
 create mode 100644 app/components/privileged-action.js
 create mode 100644 app/components/privileged-action.module.css
 create mode 100644 tests/components/privileged-action-test.js

diff --git a/app/components/privileged-action.hbs b/app/components/privileged-action.hbs
new file mode 100644
index 00000000000..5ca3d180e70
--- /dev/null
+++ b/app/components/privileged-action.hbs
@@ -0,0 +1,24 @@
+{{#if this.isPrivileged}}
+  <div>
+    {{yield}}
+  </div>
+{{else if this.canBePrivileged}}
+  {{#if (has-block 'placeholder')}}
+    <div>
+      {{yield to='placeholder'}}
+    </div>
+  {{else}}
+    <div local-class='placeholder' {{did-insert this.disableComponents}}>
+      {{yield}}
+      <EmberTooltip>
+        You must enable admin actions before you can perform this operation.
+      </EmberTooltip>
+    </div>
+  {{/if}}
+{{else}}
+  <div>
+    {{#if (has-block 'unprivileged')}}
+      {{yield to='unprivileged'}}
+    {{/if}}
+  </div>
+{{/if}}
\ No newline at end of file
diff --git a/app/components/privileged-action.js b/app/components/privileged-action.js
new file mode 100644
index 00000000000..64b0f33011a
--- /dev/null
+++ b/app/components/privileged-action.js
@@ -0,0 +1,55 @@
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+/**
+ * A component that wraps elements (probably mostly buttons in practice) that
+ * can be used to perform potentially privileged actions.
+ *
+ * This component requires a `userAuthorised` property, which must be a
+ * `boolean` indicating whether the user is authorised for this action. Admin
+ * rights need not be taken into account.
+ *
+ * If the current user is an admin and they have enabled sudo mode, then they
+ * are always allowed to perform the action, regardless of the return value of
+ * `userAuthorised`.
+ *
+ * There are three content blocks supported by this component:
+ *
+ * - `default`: required; this is displayed when the user is authorised to
+ *              perform the action.
+ * - `placeholder`: this is displayed when the user _could_ be authorised to
+ *                  perform the action (that is, they're an admin but have not
+ *                  enabled sudo mode), but currently cannot perform the action.
+ *                  If omitted, the `default` block is used with all form
+ *                  controls disabled and a tooltip added.
+ * - `unprivileged`: this is displayed when the user is not able to perform this
+ *                   action, and cannot be authorised to do so. If omitted, an
+ *                   empty block will be used.
+ *
+ * Note that all blocks will be output with a wrapping `<div>` for technical
+ * reasons, so be sure to style accordingly if necessary.
+ */
+export default class PrivilegedAction extends Component {
+  /** @type {import("../services/session").default} */
+  @service session;
+
+  /** @return {boolean} */
+  get isPrivileged() {
+    return this.session.isSudoEnabled || this.args.userAuthorised;
+  }
+
+  /** @return {boolean} */
+  get canBePrivileged() {
+    return !this.args.userAuthorised && this.session.currentUser?.is_admin && !this.session.isSudoEnabled;
+  }
+
+  /**
+   * @param {Element} element
+   * @return {void}
+   */
+  disableComponents(element) {
+    [...element.querySelectorAll('input, select, textarea, button')].forEach(control => {
+      control.setAttribute('disabled', 'disabled');
+    });
+  }
+}
diff --git a/app/components/privileged-action.module.css b/app/components/privileged-action.module.css
new file mode 100644
index 00000000000..03534a6d429
--- /dev/null
+++ b/app/components/privileged-action.module.css
@@ -0,0 +1,5 @@
+.placeholder {
+    [disabled] {
+        cursor: not-allowed;
+    }
+}
diff --git a/tests/components/privileged-action-test.js b/tests/components/privileged-action-test.js
new file mode 100644
index 00000000000..39fff18cbed
--- /dev/null
+++ b/tests/components/privileged-action-test.js
@@ -0,0 +1,139 @@
+import { render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { hbs } from 'ember-cli-htmlbars';
+
+import { setupRenderingTest } from 'crates-io/tests/helpers';
+
+import setupMirage from '../helpers/setup-mirage';
+
+module('Component | PrivilegedAction', hooks => {
+  setupRenderingTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(function () {
+    // Adds a utility function that renders a PrivilegedAction with all the
+    // possible content blocks.
+    this.renderComponent = async function (userAuthorised) {
+      this.userAuthorised = userAuthorised;
+      await render(hbs`
+      <PrivilegedAction @userAuthorised={{this.userAuthorised}}>
+        <:default><div data-test-privileged>privileged</div></:default>
+        <:placeholder><div data-test-placeholder>placeholder</div></:placeholder>
+        <:unprivileged><div data-test-unprivileged>unprivileged</div></:unprivileged>
+      </PrivilegedAction>
+    `);
+    };
+  });
+
+  test('unprivileged block is shown to logged out users', async function (assert) {
+    await this.renderComponent(false);
+    assert.dom('[data-test-privileged]').doesNotExist();
+    assert.dom('[data-test-placeholder]').doesNotExist();
+    assert.dom('[data-test-unprivileged]').exists();
+  });
+
+  test('unprivileged block is shown to a logged in user without access', async function (assert) {
+    const user = this.server.create('user');
+    this.authenticateAs(user);
+
+    await this.renderComponent(false);
+    assert.dom('[data-test-privileged]').doesNotExist();
+    assert.dom('[data-test-placeholder]').doesNotExist();
+    assert.dom('[data-test-unprivileged]').exists();
+  });
+
+  test('privileged block is shown to a logged in user with access', async function (assert) {
+    const user = this.server.create('user');
+    this.authenticateAs(user);
+
+    await this.renderComponent(true);
+    assert.dom('[data-test-privileged]').exists();
+    assert.dom('[data-test-placeholder]').doesNotExist();
+    assert.dom('[data-test-unprivileged]').doesNotExist();
+  });
+
+  test('placeholder block is shown to a logged in admin without sudo', async function (assert) {
+    const user = this.server.create('user', { isAdmin: true });
+    this.authenticateAs(user);
+
+    const session = this.owner.lookup('service:session');
+    let { currentUser } = await session.loadUserTask.perform();
+    assert.true(currentUser.is_admin);
+    assert.false(session.isSudoEnabled);
+
+    await this.renderComponent(false);
+    assert.dom('[data-test-privileged]').doesNotExist();
+    assert.dom('[data-test-placeholder]').exists();
+    assert.dom('[data-test-unprivileged]').doesNotExist();
+  });
+
+  test('privileged block is shown to a logged in admin without sudo with access', async function (assert) {
+    const user = this.server.create('user', { isAdmin: true });
+    this.authenticateAs(user);
+
+    const session = this.owner.lookup('service:session');
+    let { currentUser } = await session.loadUserTask.perform();
+    assert.true(currentUser.is_admin);
+    assert.false(session.isSudoEnabled);
+
+    await this.renderComponent(true);
+    assert.dom('[data-test-privileged]').exists();
+    assert.dom('[data-test-placeholder]').doesNotExist();
+    assert.dom('[data-test-unprivileged]').doesNotExist();
+  });
+
+  test('privileged block is shown to a logged in admin with sudo', async function (assert) {
+    const user = this.server.create('user', { isAdmin: true });
+    this.authenticateAs(user);
+
+    const session = this.owner.lookup('service:session');
+    let { currentUser } = await session.loadUserTask.perform();
+    assert.true(currentUser.is_admin);
+    session.setSudo(86_400_000);
+    assert.true(session.isSudoEnabled);
+
+    await this.renderComponent(false);
+    assert.dom('[data-test-privileged]').exists();
+    assert.dom('[data-test-placeholder]').doesNotExist();
+    assert.dom('[data-test-unprivileged]').doesNotExist();
+  });
+
+  test('automatic placeholder block', async function (assert) {
+    const user = this.server.create('user', { isAdmin: true });
+    this.authenticateAs(user);
+
+    const session = this.owner.lookup('service:session');
+    let { currentUser } = await session.loadUserTask.perform();
+    assert.true(currentUser.is_admin);
+    assert.false(session.isSudoEnabled);
+
+    // We're trying to confirm that all the form controls are automatically
+    // disabled.
+    await render(hbs`
+      <PrivilegedAction @userAuthorised={{false}}>
+        <div data-test-content>
+          <button data-test-control type="button">Click me maybe?</button>
+          <label for="input">Input: </label><input data-test-control type="text" id="input" />
+          <label for="select">Select: </label><select data-test-control id="select"><option>foo</option></select>
+          <label for="textarea">Textarea: </label><textarea data-test-control id="textarea" />
+        </div>
+      </PrivilegedAction>
+    `);
+    assert.dom('[data-test-content] [data-test-control]').exists().isDisabled();
+  });
+
+  test('automatic unprivileged block', async function (assert) {
+    // We're testing that the default block content isn't shown, and that the
+    // automatically generated div has no content.
+    await render(hbs`
+      <div data-test-container>
+        <PrivilegedAction @userAuthorised={{false}}>
+          <div data-test-content>should not be shown</div>
+        </PrivilegedAction>
+      </div>
+    `);
+    assert.dom('[data-test-content]').doesNotExist();
+    assert.dom('[data-test-container] > div').exists().hasNoText();
+  });
+});

From 2891f1bb0592eee95458313a5278f0bd52c424ff Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Wed, 28 Feb 2024 18:16:11 -0800
Subject: [PATCH 05/12] version-list: use the new `PrivilegedAction` component

---
 app/components/version-list/row.hbs | 4 ++--
 app/components/version-list/row.js  | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index c9a555fcf9b..a55b946f625 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -109,7 +109,7 @@
     {{/if}}
   </div>
 
-  {{#if this.canYank}}
+  <PrivilegedAction @userAuthorised={{this.isOwner}}>
     <YankButton @version={{@version}} local-class="yank-button" />
-  {{/if}}
+  </PrivilegedAction>
 </div>
\ No newline at end of file
diff --git a/app/components/version-list/row.js b/app/components/version-list/row.js
index cfef78683a2..e94e17aafa1 100644
--- a/app/components/version-list/row.js
+++ b/app/components/version-list/row.js
@@ -51,10 +51,6 @@ export default class VersionRow extends Component {
     return this.args.version.crate?.owner_user?.findBy('id', this.session.currentUser?.id);
   }
 
-  get canYank() {
-    return this.isOwner || this.session.currentUser?.is_admin;
-  }
-
   @action setFocused(value) {
     this.focused = value;
   }

From 662dd315e027808dabab67ceef5a5dfb850738a5 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Thu, 29 Feb 2024 14:28:07 -0800
Subject: [PATCH 06/12] header: use a constant for the sudo session duration

---
 app/components/header.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/header.js b/app/components/header.js
index 2712a672987..5e90c975ee0 100644
--- a/app/components/header.js
+++ b/app/components/header.js
@@ -2,14 +2,16 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 
+// Six hours.
+const SUDO_SESSION_DURATION_MS = 6 * 60 * 60 * 1000;
+
 export default class Header extends Component {
   /** @type {import("../services/session").default} */
   @service session;
 
   @action
   enableSudo() {
-    // FIXME: hard coded six hour duration.
-    this.session.setSudo(6 * 60 * 60 * 1000);
+    this.session.setSudo(SUDO_SESSION_DURATION_MS);
   }
 
   @action

From e9d51bd06a32046e0048c8e5f52ac4883f8a531b Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Thu, 29 Feb 2024 14:34:19 -0800
Subject: [PATCH 07/12] header: remove `!important` and fix up selector

---
 app/components/header.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/header.module.css b/app/components/header.module.css
index 39cbb58469a..346ca24de9c 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -186,8 +186,8 @@
     }
 }
 
-.sudo > button {
-    flex-direction: column !important;
+.sudo-menu-item {
+    flex-direction: column;
 
     > .expires-in {
         font-size: 80%;

From 173c32efe63ec01809c1443df53e81014efb96ed Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Thu, 29 Feb 2024 14:35:27 -0800
Subject: [PATCH 08/12] session: migrate sudo tracking to a task

---
 app/services/session.js | 45 ++++++++++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/app/services/session.js b/app/services/session.js
index f8e0af0de93..5028bc4811f 100644
--- a/app/services/session.js
+++ b/app/services/session.js
@@ -1,7 +1,7 @@
 import Service, { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
-import { dropTask, race, rawTimeout, task, waitForEvent } from 'ember-concurrency';
+import { dropTask, race, rawTimeout, restartableTask, task, waitForEvent } from 'ember-concurrency';
 import window from 'ember-window-mock';
 import { alias } from 'macro-decorators';
 
@@ -45,7 +45,7 @@ export default class SessionService extends Service {
   }
 
   get isSudoEnabled() {
-    return this.currentUser?.is_admin === true && this.sudoEnabledUntil !== null && this.sudoEnabledUntil >= Date.now();
+    return this.currentUser?.is_admin === true && this.sudoTask.isRunning;
   }
 
   /**
@@ -58,14 +58,12 @@ export default class SessionService extends Service {
    *                             immediately.
    */
   setSudo(duration_ms) {
-    if (this.currentUser?.is_admin) {
+    if (this.isAdmin) {
       if (duration_ms) {
-        const expiry = Date.now() + duration_ms;
-        localStorage.setItem('sudo', expiry);
-        this.sudoEnabledUntil = expiry;
+        // eslint-disable-next-line ember-concurrency/no-perform-without-catch
+        this.sudoTask.perform(Date.now() + duration_ms);
       } else {
-        localStorage.removeItem('sudo');
-        this.sudoEnabledUntil = null;
+        this.sudoTask.cancelAll();
       }
     }
   }
@@ -204,7 +202,10 @@ export default class SessionService extends Service {
       const expiry = localStorage.getItem('sudo');
       if (expiry !== null) {
         try {
-          this.sudoEnabledUntil = +expiry;
+          // Trigger sudoTask, but without waiting for it to complete.
+          //
+          // eslint-disable-next-line ember-concurrency/no-perform-without-catch
+          this.sudoTask.perform(+expiry);
         } catch {
           // It doesn't really matter if this fails; any invalid value will just
           // be treated as the user not being in sudo mode.
@@ -214,4 +215,30 @@ export default class SessionService extends Service {
 
     return { currentUser, ownedCrates };
   });
+
+  sudoTask = restartableTask(async until => {
+    try {
+      const now = Date.now();
+
+      if (until > now) {
+        // Since this task will replace any running task, we should update local
+        // storage.
+        localStorage.setItem('sudo', until.toString());
+
+        // We'll also surface the expiry as a property on the session service,
+        // since that can be tracked and updated by other components.
+        this.sudoEnabledUntil = until;
+
+        // Now we sleep until sudo mode has expired.
+        await rawTimeout(until - now);
+      }
+    } finally {
+      // Clear the local storage, since we're no longer in sudo mode, regardless
+      // of whether the await finished or the task was cancelled.
+      localStorage.removeItem('sudo');
+
+      // Again, update the session service property.
+      this.sudoEnabledUntil = null;
+    }
+  });
 }

From 80b4a8d5054c38f30175616a9152178ad4cfae03 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Thu, 29 Feb 2024 14:37:05 -0800
Subject: [PATCH 09/12] user-avatar: revert back to `main`

---
 app/components/user-avatar.hbs        | 5 +----
 app/components/user-avatar.js         | 5 -----
 app/components/user-avatar.module.css | 3 ---
 3 files changed, 1 insertion(+), 12 deletions(-)
 delete mode 100644 app/components/user-avatar.module.css

diff --git a/app/components/user-avatar.hbs b/app/components/user-avatar.hbs
index 8a718381699..da95f458898 100644
--- a/app/components/user-avatar.hbs
+++ b/app/components/user-avatar.hbs
@@ -6,7 +6,4 @@
   title={{this.title}}
   decoding="async"
   ...attributes
-/>
-{{#if this.sudo}}
-  🧙
-{{/if}}
\ No newline at end of file
+/>
\ No newline at end of file
diff --git a/app/components/user-avatar.js b/app/components/user-avatar.js
index e779fd49cba..37012f4738d 100644
--- a/app/components/user-avatar.js
+++ b/app/components/user-avatar.js
@@ -32,9 +32,4 @@ export default class UserAvatar extends Component {
   get src() {
     return `${this.args.user.avatar}&s=${this.size * 2}`;
   }
-
-  /** @return {boolean} */
-  get sudo() {
-    return this.args.sudo;
-  }
 }
diff --git a/app/components/user-avatar.module.css b/app/components/user-avatar.module.css
deleted file mode 100644
index 7adab0402ae..00000000000
--- a/app/components/user-avatar.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.sudo {
-    margin-right: var(--space-2xs);
-}

From 620cdb68dc71ea844d78ab3b9901f54d8c7926cc Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Thu, 29 Feb 2024 14:48:35 -0800
Subject: [PATCH 10/12] header: add sudo indicator

---
 app/components/header.hbs        | 5 ++++-
 app/components/header.module.css | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/components/header.hbs b/app/components/header.hbs
index fbdffe2f995..ccf0a2f9afc 100644
--- a/app/components/header.hbs
+++ b/app/components/header.hbs
@@ -21,7 +21,10 @@
       {{#if this.session.currentUser}}
         <Dropdown data-test-user-menu as |dd|>
           <dd.Trigger local-class="dropdown-button" data-test-toggle>
-            <UserAvatar @user={{this.session.currentUser}} @size="small" @sudo={{this.session.isSudoEnabled}} local-class="avatar" data-test-avatar />
+            {{#if this.session.isSudoEnabled}}
+              <div local-class="wizard-hat">🧙</div>
+            {{/if}}
+            <UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
             {{ this.session.currentUser.name }}
           </dd.Trigger>
 
diff --git a/app/components/header.module.css b/app/components/header.module.css
index 346ca24de9c..505e04a0f25 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -154,6 +154,10 @@
     margin-right: var(--space-2xs);
 }
 
+.wizard-hat {
+    margin-right: var(--space-3xs);
+}
+
 .current-user-links {
     left: auto;
     right: 0;

From 78c0f77208b29bfa7f23502a8f3808fc87446be2 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Thu, 29 Feb 2024 15:06:30 -0800
Subject: [PATCH 11/12] session: use isAdmin

---
 app/services/session.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/services/session.js b/app/services/session.js
index 5028bc4811f..3088aafe73a 100644
--- a/app/services/session.js
+++ b/app/services/session.js
@@ -45,7 +45,7 @@ export default class SessionService extends Service {
   }
 
   get isSudoEnabled() {
-    return this.currentUser?.is_admin === true && this.sudoTask.isRunning;
+    return this.isAdmin && this.sudoTask.isRunning;
   }
 
   /**

From a5c33873608dc8b5ef1aebc78ad345be3eb50cee Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam@adamharvey.name>
Date: Fri, 1 Mar 2024 13:31:29 -0800
Subject: [PATCH 12/12] privileged-action: use a fieldset instead of JS to
 disable children

---
 app/components/privileged-action.hbs        |  6 ++++--
 app/components/privileged-action.js         | 10 ----------
 app/components/privileged-action.module.css | 22 ++++++++++++++++++++-
 tests/components/privileged-action-test.js  | 11 ++++++-----
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/app/components/privileged-action.hbs b/app/components/privileged-action.hbs
index 5ca3d180e70..6ae2746c1f2 100644
--- a/app/components/privileged-action.hbs
+++ b/app/components/privileged-action.hbs
@@ -8,8 +8,10 @@
       {{yield to='placeholder'}}
     </div>
   {{else}}
-    <div local-class='placeholder' {{did-insert this.disableComponents}}>
-      {{yield}}
+    <div local-class='placeholder'>
+      <fieldset disabled="disabled">
+        {{yield}}
+      </fieldset>
       <EmberTooltip>
         You must enable admin actions before you can perform this operation.
       </EmberTooltip>
diff --git a/app/components/privileged-action.js b/app/components/privileged-action.js
index 64b0f33011a..6af78ade122 100644
--- a/app/components/privileged-action.js
+++ b/app/components/privileged-action.js
@@ -42,14 +42,4 @@ export default class PrivilegedAction extends Component {
   get canBePrivileged() {
     return !this.args.userAuthorised && this.session.currentUser?.is_admin && !this.session.isSudoEnabled;
   }
-
-  /**
-   * @param {Element} element
-   * @return {void}
-   */
-  disableComponents(element) {
-    [...element.querySelectorAll('input, select, textarea, button')].forEach(control => {
-      control.setAttribute('disabled', 'disabled');
-    });
-  }
 }
diff --git a/app/components/privileged-action.module.css b/app/components/privileged-action.module.css
index 03534a6d429..cfda971812d 100644
--- a/app/components/privileged-action.module.css
+++ b/app/components/privileged-action.module.css
@@ -1,5 +1,25 @@
 .placeholder {
-    [disabled] {
+    fieldset {
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    fieldset[disabled] {
         cursor: not-allowed;
+
+        [disabled] {
+            cursor: not-allowed;
+        }
+
+        button,
+        .yellow-button,
+        .tan-button {
+            /* This duplicates the styles in .button[disabled] as there's no
+             * obvious way to compose them, given the target selectors. */
+            background: linear-gradient(to bottom, var(--bg-color-top-light) 0%, var(--bg-color-bottom-light) 100%);
+            color: var(--disabled-text-color);
+            cursor: not-allowed;
+        }
     }
 }
diff --git a/tests/components/privileged-action-test.js b/tests/components/privileged-action-test.js
index 39fff18cbed..38d2d7d49fd 100644
--- a/tests/components/privileged-action-test.js
+++ b/tests/components/privileged-action-test.js
@@ -111,16 +111,17 @@ module('Component | PrivilegedAction', hooks => {
     // We're trying to confirm that all the form controls are automatically
     // disabled.
     await render(hbs`
-      <PrivilegedAction @userAuthorised={{false}}>
-        <div data-test-content>
+      <div data-test-content>
+        <PrivilegedAction @userAuthorised={{false}}>
           <button data-test-control type="button">Click me maybe?</button>
           <label for="input">Input: </label><input data-test-control type="text" id="input" />
           <label for="select">Select: </label><select data-test-control id="select"><option>foo</option></select>
           <label for="textarea">Textarea: </label><textarea data-test-control id="textarea" />
-        </div>
-      </PrivilegedAction>
+        </PrivilegedAction>
+      </div>
     `);
-    assert.dom('[data-test-content] [data-test-control]').exists().isDisabled();
+    assert.dom('[data-test-content] fieldset').exists().isDisabled();
+    assert.dom('[data-test-content] fieldset [data-test-control]').exists();
   });
 
   test('automatic unprivileged block', async function (assert) {