frontend/settings: Add "Publish Notifications" checkbox

Author: Turbo87

app/controllers/settings/profile.js

@@ -0,0 +1,26 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+import { task } from 'ember-concurrency';
+
+export default class extends Controller {
+  @service notifications;
+
+  @tracked publishNotifications;
+
+  @action handleNotificationsChange(event) {
+    this.publishNotifications = event.target.checked;
+  }
+
+  updateNotificationSettings = task(async () => {
+    try {
+      await this.model.user.updatePublishNotifications(this.publishNotifications);
+    } catch {
+      this.notifications.error(
+        'Something went wrong while updating your notification settings. Please try again later!',
+      );
+    }
+  });
+}

app/models/user.js

@@ -16,6 +16,7 @@ export default class User extends Model {
   @attr avatar;
   @attr url;
   @attr kind;
+  @attr publish_notifications;
 
   async stats() {
     return await waitForPromise(apiAction(this, { method: 'GET', path: 'stats' }));
@@ -34,6 +35,17 @@ export default class User extends Model {
     });
   }
 
+  async updatePublishNotifications(enabled) {
+    await waitForPromise(apiAction(this, { method: 'PUT', data: { user: { publish_notifications: enabled } } }));
+
+    this.store.pushPayload({
+      user: {
+        id: this.id,
+        publish_notifications: enabled,
+      },
+    });
+  }
+
   async resendVerificationEmail() {
     return await waitForPromise(apiAction(this, { method: 'PUT', path: 'resend' }));
   }

app/routes/settings/profile.js

@@ -8,4 +8,9 @@ export default class ProfileSettingsRoute extends AuthenticatedRoute {
   async model() {
     return { user: this.session.currentUser };
   }
+
+  setupController(controller, model) {
+    super.setupController(...arguments);
+    controller.publishNotifications = model.user.publish_notifications;
+  }
 }

app/styles/settings/profile.module.css

@@ -34,7 +34,43 @@
 }
 
 .me-email {
-    margin-bottom: var(--space-s);
+    margin-bottom: var(--space-m);
     display: flex;
     flex-direction: column;
 }
+
+.notifications {
+    margin-bottom: var(--space-s);
+}
+
+.checkbox-input {
+    display: grid;
+    grid-template:
+        "checkbox label" auto
+        "- note" auto /
+        auto 1fr;
+    row-gap: var(--space-3xs);
+    column-gap: var(--space-xs);
+}
+
+.label {
+    grid-area: label;
+    font-weight: bold;
+}
+
+.note {
+    grid-area: note;
+    display: block;
+    font-size: 85%;
+}
+
+.buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    margin-top: var(--space-s);
+}
+
+.update-prefs-button {
+    composes: yellow-button small from '../shared/buttons.module.css';
+}

app/templates/settings/profile.hbs

@@ -31,4 +31,37 @@
       data-test-email-input
     />
   </div>
+
+  <div local-class="notifications" data-test-notifications>
+    <h2>Notification Settings</h2>
+
+    <label local-class="checkbox-input">
+      <Input
+        @type="checkbox"
+        @checked={{this.publishNotifications}}
+        disabled={{this.updateNotificationSettings.isRunning}}
+        {{on "change" this.handleNotificationsChange}}
+      />
+      <span local-class="label">Publish Notifications</span>
+      <span local-class="note">
+        Publish notifications are sent to your email address whenever new
+        versions of a crate that you own are published. These can be useful to
+        quickly detect compromised accounts or API tokens.
+      </span>
+    </label>
+
+    <div local-class="buttons">
+      <button
+        type="button"
+        local-class="update-prefs-button"
+        disabled={{this.updateNotificationSettings.isRunning}}
+        {{on "click" (perform this.updateNotificationSettings)}}
+      >
+        Update preferences
+      </button>
+      {{#if this.updateNotificationSettings.isRunning}}
+        <LoadingSpinner local-class="spinner" data-test-spinner />
+      {{/if}}
+    </div>
+  </div>
 </SettingsPage>

e2e/acceptance/publish-notifications.spec.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@/e2e/helper';
+
+test.describe('Acceptance | publish notifications', { tag: '@acceptance' }, () => {
+  test('unsubscribe and resubscribe', async ({ page, mirage }) => {
+    await mirage.addHook(server => {
+      let user = server.create('user');
+      globalThis.user = user;
+      authenticateAs(user);
+    });
+
+    await page.goto('/settings/profile');
+    await expect(page).toHaveURL('/settings/profile');
+    await expect(page.locator('[data-test-notifications] input[type=checkbox]')).toBeChecked();
+
+    await page.click('[data-test-notifications] input[type=checkbox]');
+    await expect(page.locator('[data-test-notifications] input[type=checkbox]')).not.toBeChecked();
+
+    await page.click('[data-test-notifications] button');
+    await page.waitForFunction(() => globalThis.user.reload().publishNotifications === false);
+
+    await page.click('[data-test-notifications] input[type=checkbox]');
+    await expect(page.locator('[data-test-notifications] input[type=checkbox]')).toBeChecked();
+
+    await page.click('[data-test-notifications] button');
+    await page.waitForFunction(() => globalThis.user.reload().publishNotifications === true);
+  });
+
+  test('loading state', async ({ page, mirage }) => {
+    await mirage.addHook(server => {
+      let user = server.create('user');
+      authenticateAs(user);
+      globalThis.user = user;
+
+      globalThis.deferred = require('rsvp').defer();
+      server.put('/api/v1/users/:user_id', globalThis.deferred.promise);
+    });
+
+    await page.goto('/settings/profile');
+    await expect(page).toHaveURL('/settings/profile');
+
+    await page.click('[data-test-notifications] input[type=checkbox]');
+    await page.click('[data-test-notifications] button');
+    await expect(page.locator('[data-test-notifications] [data-test-spinner]')).toBeVisible();
+    await expect(page.locator('[data-test-notifications] input[type=checkbox]')).toBeDisabled();
+    await expect(page.locator('[data-test-notifications] button')).toBeDisabled();
+
+    await page.evaluate(async () => globalThis.deferred.resolve());
+    await expect(page.locator('[data-test-notifications] [data-test-spinner]')).not.toBeVisible();
+    await expect(page.locator('[data-test-notification-message="error"]')).not.toBeVisible();
+  });
+
+  test('error state', async ({ page, mirage }) => {
+    await mirage.addHook(server => {
+      server.logging = true;
+      let user = server.create('user');
+      authenticateAs(user);
+      globalThis.user = user;
+
+      server.put('/api/v1/users/:user_id', '', 500);
+    });
+
+    await page.goto('/settings/profile');
+    await expect(page).toHaveURL('/settings/profile');
+
+    await page.click('[data-test-notifications] input[type=checkbox]');
+    await page.click('[data-test-notifications] button');
+    await expect(page.locator('[data-test-notifications] [data-test-spinner]')).not.toBeVisible();
+    await expect(page.locator('[data-test-notification-message="error"]')).toHaveText(
+      'Something went wrong while updating your notification settings. Please try again later!',
+    );
+  });
+});

tests/acceptance/publish-notifications-test.js

@@ -0,0 +1,62 @@
+import { click, currentURL, visit, waitFor } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { defer } from 'rsvp';
+
+import { Response } from 'miragejs';
+
+import { setupApplicationTest } from 'crates-io/tests/helpers';
+
+module('Acceptance | publish notifications', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('unsubscribe and resubscribe', async function (assert) {
+    let user = this.server.create('user');
+
+    this.authenticateAs(user);
+    assert.true(user.publishNotifications);
+
+    await visit('/settings/profile');
+    assert.strictEqual(currentURL(), '/settings/profile');
+    assert.dom('[data-test-notifications] input[type=checkbox]').isChecked();
+
+    await click('[data-test-notifications] input[type=checkbox]');
+    assert.dom('[data-test-notifications] input[type=checkbox]').isNotChecked();
+
+    await click('[data-test-notifications] button');
+    assert.false(user.reload().publishNotifications);
+
+    await click('[data-test-notifications] input[type=checkbox]');
+    assert.dom('[data-test-notifications] input[type=checkbox]').isChecked();
+
+    await click('[data-test-notifications] button');
+    assert.true(user.reload().publishNotifications);
+  });
+
+  test('loading and error state', async function (assert) {
+    let user = this.server.create('user');
+
+    let deferred = defer();
+    this.server.put('/api/v1/users/:user_id', deferred.promise);
+
+    this.authenticateAs(user);
+    assert.true(user.publishNotifications);
+
+    await visit('/settings/profile');
+    assert.strictEqual(currentURL(), '/settings/profile');
+
+    await click('[data-test-notifications] input[type=checkbox]');
+
+    let clickPromise = click('[data-test-notifications] button');
+    await waitFor('[data-test-notifications] [data-test-spinner]');
+    assert.dom('[data-test-notifications] input[type=checkbox]').isDisabled();
+    assert.dom('[data-test-notifications] button').isDisabled();
+
+    deferred.resolve(new Response(500));
+    await clickPromise;
+
+    assert
+      .dom('[data-test-notification-message="error"]')
+      .hasText('Something went wrong while updating your notification settings. Please try again later!');
+  });
+});