Add sudo mode for admins

app/components/header.hbs

@@ -21,15 +21,32 @@
       {{#if this.session.currentUser}}
         <Dropdown data-test-user-menu as |dd|>
           <dd.Trigger local-class="dropdown-button" data-test-toggle>
+            {{#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>
 
-          <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}}

app/components/header.js

@@ -1,6 +1,21 @@
+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() {
+    this.session.setSudo(SUDO_SESSION_DURATION_MS);
+  }
+
+  @action
+  disableSudo() {
+    this.session.setSudo(0);
+  }
 }

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;
@@ -172,7 +176,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 +189,13 @@
         margin-right: var(--space-2xs);
     }
 }
+
+.sudo-menu-item {
+    flex-direction: column;
+
+    > .expires-in {
+        font-size: 80%;
+        font-style: italic;
+        padding-top: var(--space-3xs);
+    }
+}

app/components/privileged-action.hbs

@@ -0,0 +1,26 @@
+{{#if this.isPrivileged}}
+  <div>
+    {{yield}}
+  </div>
+{{else if this.canBePrivileged}}
+  {{#if (has-block 'placeholder')}}
+    <div>
+      {{yield to='placeholder'}}
+    </div>
+  {{else}}
+    <div local-class='placeholder'>
+      <fieldset disabled="disabled">
+        {{yield}}
+      </fieldset>
+      <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}}

app/components/privileged-action.js

@@ -0,0 +1,45 @@
+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;
+  }
+}

app/components/privileged-action.module.css

@@ -0,0 +1,25 @@
+.placeholder {
+    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;
+        }
+    }
+}

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>

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;
   }

app/services/session.js

@@ -1,6 +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';
 
@@ -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,34 @@ export default class SessionService extends Service {
     }
   }
 
+  get isAdmin() {
+    return this.currentUser?.is_admin === true;
+  }
+
+  get isSudoEnabled() {
+    return this.isAdmin && this.sudoTask.isRunning;
+  }
+
+  /**
+   * 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.isAdmin) {
+      if (duration_ms) {
+        // eslint-disable-next-line ember-concurrency/no-perform-without-catch
+        this.sudoTask.perform(Date.now() + duration_ms);
+      } else {
+        this.sudoTask.cancelAll();
+      }
+    }
+  }
+
   /**
    * 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 +196,49 @@ 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 {
+          // 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.
+        }
+      }
+    }
+
     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;
+    }
+  });
 }