fix: improved web push management (#3421)

refactor: organized placement of new button + added comments fix: added api routes for push registration fix: modified get request to confirm key identity fix: added back notification types to always show feat: added a manageable device list refactor: modified device list to make it mobile friendly fix: correct typo for enabling notifications
2025-12-26 16:27:17 +01:00 · 2025-02-27 20:07:46 -06:00
parent 443af15283
commit 48aa68511b
9 changed files with 14194 additions and 108 deletions
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
    "@svgr/webpack": "6.5.1",
    "@tanem/react-nprogress": "5.0.30",
    "@types/ua-parser-js": "^0.7.36",
-    "@types/wink-jaro-distance": "^2.0.2",
    "ace-builds": "1.15.2",
    "axios": "1.10.0",
    "axios-rate-limit": "1.3.0",
@@ -106,7 +105,6 @@
    "tailwind-merge": "^2.6.0",
    "typeorm": "0.3.12",
    "ua-parser-js": "^1.0.35",
-    "undici": "^7.3.0",
    "web-push": "3.5.0",
    "wink-jaro-distance": "^2.0.0",
    "winston": "3.8.2",
--- a/seerr-api.yml
+++ b/seerr-api.yml
@@ -4311,7 +4311,7 @@ paths:
                    type: string
                  userAgent:
                    type: string
-  /user/{userId}/pushSubscription/{endpoint}:
+  /user/{userId}/pushSubscription/{key}:
    get:
      summary: Get web push notification settings for a user
      description: |
@@ -4325,7 +4325,7 @@ paths:
          schema:
            type: number
        - in: path
-          name: endpoint
+          name: key
          required: true
          schema:
            type: string
@@ -4357,7 +4357,7 @@ paths:
          schema:
            type: number
        - in: path
-          name: endpoint
+          name: key
          required: true
          schema:
            type: string
--- a/server/1684249347630-datasource.ts
+++ b/server/1684249347630-datasource.ts
@@ -0,0 +1,51 @@
+import type { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class datasource1684249347630 implements MigrationInterface {
+  name = 'datasource1684249347630';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "temporary_user_push_subscription" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "endpoint" varchar NOT NULL, "p256dh" varchar NOT NULL, "auth" varchar NOT NULL, "userId" integer, "userAgent" varchar, "createdAt" datetime DEFAULT (datetime('now')), CONSTRAINT "UQ_95f313437ec4a8f8148d74a0ed8" UNIQUE ("auth"), CONSTRAINT "FK_03f7958328e311761b0de675fbe" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+    await queryRunner.query(
+      `INSERT INTO "temporary_user_push_subscription"("id", "endpoint", "p256dh", "auth", "userId", "userAgent", "createdAt") SELECT "id", "endpoint", "p256dh", "auth", "userId", "userAgent", "createdAt" FROM "user_push_subscription"`
+    );
+    await queryRunner.query(`DROP TABLE "user_push_subscription"`);
+    await queryRunner.query(
+      `ALTER TABLE "temporary_user_push_subscription" RENAME TO "user_push_subscription"`
+    );
+    await queryRunner.query(
+      `CREATE TABLE "temporary_user_push_subscription" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "endpoint" varchar NOT NULL, "p256dh" varchar NOT NULL, "auth" varchar NOT NULL, "userId" integer, "userAgent" varchar, "createdAt" datetime DEFAULT (datetime('now')), CONSTRAINT "UQ_95f313437ec4a8f8148d74a0ed8" UNIQUE ("auth"), CONSTRAINT "FK_03f7958328e311761b0de675fbe" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+    await queryRunner.query(
+      `INSERT INTO "temporary_user_push_subscription"("id", "endpoint", "p256dh", "auth", "userId", "userAgent", "createdAt") SELECT "id", "endpoint", "p256dh", "auth", "userId", "userAgent", "createdAt" FROM "user_push_subscription"`
+    );
+    await queryRunner.query(`DROP TABLE "user_push_subscription"`);
+    await queryRunner.query(
+      `ALTER TABLE "temporary_user_push_subscription" RENAME TO "user_push_subscription"`
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "user_push_subscription" RENAME TO "temporary_user_push_subscription"`
+    );
+    await queryRunner.query(
+      `CREATE TABLE "user_push_subscription" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "endpoint" varchar NOT NULL, "p256dh" varchar NOT NULL, "auth" varchar NOT NULL, "userId" integer, "userAgent" varchar, "createdAt" datetime DEFAULT (datetime('now')), CONSTRAINT "UQ_95f313437ec4a8f8148d74a0ed8" UNIQUE ("auth"), CONSTRAINT "FK_03f7958328e311761b0de675fbe" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+    await queryRunner.query(
+      `INSERT INTO "user_push_subscription"("id", "endpoint", "p256dh", "auth", "userId", "userAgent", "createdAt") SELECT "id", "endpoint", "p256dh", "auth", "userId", "userAgent", "createdAt" FROM "temporary_user_push_subscription"`
+    );
+    await queryRunner.query(`DROP TABLE "temporary_user_push_subscription"`);
+    await queryRunner.query(
+      `ALTER TABLE "user_push_subscription" RENAME TO "temporary_user_push_subscription"`
+    );
+    await queryRunner.query(
+      `CREATE TABLE "user_push_subscription" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "endpoint" varchar NOT NULL, "p256dh" varchar NOT NULL, "auth" varchar NOT NULL, "userId" integer, "userAgent" varchar, "createdAt" datetime DEFAULT (datetime('now')), CONSTRAINT "UQ_95f313437ec4a8f8148d74a0ed8" UNIQUE ("auth"), CONSTRAINT "FK_03f7958328e311761b0de675fbe" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+    await queryRunner.query(
+      `INSERT INTO "user_push_subscription"("id", "endpoint", "p256dh", "auth", "userId", "userAgent", "createdAt") SELECT "id", "endpoint", "p256dh", "auth", "userId", "userAgent", "createdAt" FROM "temporary_user_push_subscription"`
+    );
+    await queryRunner.query(`DROP TABLE "temporary_user_push_subscription"`);
+  }
+}
--- a/server/entity/UserPushSubscription.ts
+++ b/server/entity/UserPushSubscription.ts
@@ -1,5 +1,10 @@
-import { DbAwareColumn } from '@server/utils/DbColumnHelper';
-import { Column, Entity, ManyToOne, PrimaryGeneratedColumn } from 'typeorm';
+import {
+  Column,
+  CreateDateColumn,
+  Entity,
+  ManyToOne,
+  PrimaryGeneratedColumn,
+} from 'typeorm';
 import { User } from './User';

@Entity()
@@ -25,11 +30,7 @@ export class UserPushSubscription {
  @Column({ nullable: true })
  public userAgent: string;

-  @DbAwareColumn({
-    type: 'datetime',
-    default: () => 'CURRENT_TIMESTAMP',
-    nullable: true,
-  })
+  @CreateDateColumn({ nullable: true })
  public createdAt: Date;

  constructor(init?: Partial<UserPushSubscription>) {
--- a/server/routes/user/index.ts
+++ b/server/routes/user/index.ts
@@ -240,8 +240,8 @@ router.get<{ userId: number }>(
  }
 );

-router.get<{ userId: number; endpoint: string }>(
-  '/:userId/pushSubscription/:endpoint',
+router.get<{ userId: number; key: string }>(
+  '/:userId/pushSubscription/:key',
  async (req, res, next) => {
    try {
      const userPushSubRepository = getRepository(UserPushSubscription);
@@ -252,7 +252,7 @@ router.get<{ userId: number; endpoint: string }>(
        },
        where: {
          user: { id: req.params.userId },
-          endpoint: req.params.endpoint,
+          p256dh: req.params.key,
        },
      });

@@ -263,8 +263,8 @@ router.get<{ userId: number; endpoint: string }>(
  }
 );

-router.delete<{ userId: number; endpoint: string }>(
-  '/:userId/pushSubscription/:endpoint',
+router.delete<{ userId: number; key: string }>(
+  '/:userId/pushSubscription/:key',
  async (req, res, next) => {
    try {
      const userPushSubRepository = getRepository(UserPushSubscription);
@@ -275,7 +275,7 @@ router.delete<{ userId: number; endpoint: string }>(
        },
        where: {
          user: { id: req.params.userId },
-          endpoint: req.params.endpoint,
+          p256dh: req.params.key,
        },
      });

@@ -284,7 +284,7 @@ router.delete<{ userId: number; endpoint: string }>(
    } catch (e) {
      logger.error('Something went wrong deleting the user push subcription', {
        label: 'API',
-        endpoint: req.params.endpoint,
+        key: req.params.key,
        errorMessage: e.message,
      });
      return next({
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush/DeviceItem.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush/DeviceItem.tsx
@@ -1,12 +1,11 @@
 import ConfirmButton from '@app/components/Common/ConfirmButton';
 import globalMessages from '@app/i18n/globalMessages';
-import defineMessages from '@app/utils/defineMessages';
 import {
  ComputerDesktopIcon,
  DevicePhoneMobileIcon,
  TrashIcon,
 } from '@heroicons/react/24/solid';
-import { useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { UAParser } from 'ua-parser-js';

 interface DeviceItemProps {
@@ -20,27 +19,22 @@ interface DeviceItemProps {
  };
 }

-const messages = defineMessages(
-  'components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush',
-  {
-    operatingsystem: 'Operating System',
-    browser: 'Browser',
-    engine: 'Engine',
-    deletesubscription: 'Delete Subscription',
-    unknown: 'Unknown',
-  }
-);
+const messages = defineMessages({
+  operatingsystem: 'Operating System',
+  browser: 'Browser',
+  engine: 'Engine',
+  deletesubscription: 'Delete Subscription',
+});

 const DeviceItem = ({ disablePushNotifications, device }: DeviceItemProps) => {
  const intl = useIntl();
-  const parsedUserAgent = UAParser(device.userAgent);

  return (
    <div className="relative flex w-full flex-col justify-between overflow-hidden rounded-xl bg-gray-800 py-4 text-gray-400 shadow-md ring-1 ring-gray-700 xl:h-28 xl:flex-row">
      <div className="relative flex w-full flex-col justify-between overflow-hidden sm:flex-row">
        <div className="relative z-10 flex w-full items-center overflow-hidden pl-4 pr-4 sm:pr-0 xl:w-7/12 2xl:w-2/3">
          <div className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105">
-            {parsedUserAgent.device.type === 'mobile' ? (
+            {UAParser(device.userAgent).device.type === 'mobile' ? (
              <DevicePhoneMobileIcon />
            ) : (
              <ComputerDesktopIcon />
@@ -54,12 +48,12 @@ const DeviceItem = ({ disablePushNotifications, device }: DeviceItemProps) => {
                    month: 'long',
                    day: 'numeric',
                  })
-                : 'N/A'}
+                : 'Unknown'}
            </div>
            <div className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl">
-              {device.userAgent && parsedUserAgent.device.model
-                ? parsedUserAgent.device.model
-                : intl.formatMessage(messages.unknown)}
+              {device.userAgent
+                ? UAParser(device.userAgent).device.model
+                : 'Unknown'}
            </div>
          </div>
        </div>
@@ -69,7 +63,9 @@ const DeviceItem = ({ disablePushNotifications, device }: DeviceItemProps) => {
              {intl.formatMessage(messages.operatingsystem)}
            </span>
            <span className="flex truncate text-sm text-gray-300">
-              {device.userAgent ? parsedUserAgent.os.name : 'N/A'}
+              {device.userAgent
+                ? UAParser(device.userAgent).os.name
+                : 'Unknown'}
            </span>
          </div>
          <div className="card-field">
@@ -77,7 +73,9 @@ const DeviceItem = ({ disablePushNotifications, device }: DeviceItemProps) => {
              {intl.formatMessage(messages.browser)}
            </span>
            <span className="flex truncate text-sm text-gray-300">
-              {device.userAgent ? parsedUserAgent.browser.name : 'N/A'}
+              {device.userAgent
+                ? UAParser(device.userAgent).browser.name
+                : 'Unknown'}
            </span>
          </div>
          <div className="card-field">
@@ -85,14 +83,16 @@ const DeviceItem = ({ disablePushNotifications, device }: DeviceItemProps) => {
              {intl.formatMessage(messages.engine)}
            </span>
            <span className="flex truncate text-sm text-gray-300">
-              {device.userAgent ? parsedUserAgent.engine.name : 'N/A'}
+              {device.userAgent
+                ? UAParser(device.userAgent).engine.name
+                : 'Unknown'}
            </span>
          </div>
        </div>
      </div>
      <div className="z-10 mt-4 flex w-full flex-col justify-center space-y-2 pl-4 pr-4 xl:mt-0 xl:w-96 xl:items-end xl:pl-0">
        <ConfirmButton
-          onClick={() => disablePushNotifications(device.endpoint)}
+          onClick={() => disablePushNotifications(device.p256dh)}
          confirmText={intl.formatMessage(globalMessages.areyousure)}
          className="w-full"
        >
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush/index.tsx
@@ -8,7 +8,6 @@ import DeviceItem from '@app/components/UserProfile/UserSettings/UserNotificatio
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import defineMessages from '@app/utils/defineMessages';
 import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import {
  CloudArrowDownIcon,
@@ -20,31 +19,28 @@ import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';

-const messages = defineMessages(
-  'components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush',
-  {
-    webpushsettingssaved: 'Web push notification settings saved successfully!',
-    webpushsettingsfailed: 'Web push notification settings failed to save.',
-    enablewebpush: 'Enable web push',
-    disablewebpush: 'Disable web push',
-    managedevices: 'Manage Devices',
-    type: 'type',
-    created: 'Created',
-    device: 'Device',
-    subscriptiondeleted: 'Subscription deleted.',
-    subscriptiondeleteerror:
-      'Something went wrong while deleting the user subscription.',
-    nodevicestoshow: 'You have no web push subscriptions to show.',
-    webpushhasbeenenabled: 'Web push has been enabled.',
-    webpushhasbeendisabled: 'Web push has been disabled.',
-    enablingwebpusherror: 'Something went wrong while enabling web push.',
-    disablingwebpusherror: 'Something went wrong while disabling web push.',
-  }
-);
+const messages = defineMessages({
+  webpushsettingssaved: 'Web push notification settings saved successfully!',
+  webpushsettingsfailed: 'Web push notification settings failed to save.',
+  enablewebpush: 'Enable web push',
+  disablewebpush: 'Disable web push',
+  managedevices: 'Manage Devices',
+  type: 'type',
+  created: 'Created',
+  device: 'Device',
+  subscriptiondeleted: 'Subscription deleted.',
+  subscriptiondeleteerror:
+    'Something went wrong while deleting the user subscription.',
+  nodevicestoshow: 'You have no web push subscriptions to show.',
+  webpushhasbeenenabled: 'Web push has been enabled.',
+  webpushhasbeendisabled: 'Web push has been disabled.',
+  enablingwebpusherror: 'Something went wrong while enabling web push.',
+  disablingwebpusherror: 'Something went wrong while disabling web push.',
+});

 const UserWebPushSettings = () => {
  const intl = useIntl();
@@ -113,7 +109,7 @@ const UserWebPushSettings = () => {

  // Unsubscribes from the push manager
  // Deletes/disables corresponding push subscription from database
-  const disablePushNotifications = async (endpoint?: string) => {
+  const disablePushNotifications = async (p256dh?: string) => {
    if ('serviceWorker' in navigator && user?.id) {
      navigator.serviceWorker.getRegistration('/sw.js').then((registration) => {
        registration?.pushManager
@@ -122,21 +118,17 @@ const UserWebPushSettings = () => {
            const parsedSub = JSON.parse(JSON.stringify(subscription));

            await axios.delete(
-              `/api/v1/user/${user.id}/pushSubscription/${encodeURIComponent(
-                endpoint ?? parsedSub.endpoint
-              )}`
+              `/api/v1/user/${user?.id}/pushSubscription/${
+                p256dh ? p256dh : parsedSub.keys.p256dh
+              }`
            );
-
-            if (
-              subscription &&
-              (endpoint === parsedSub.endpoint || !endpoint)
-            ) {
+            if (subscription && (p256dh === parsedSub.keys.p256dh || !p256dh)) {
              subscription.unsubscribe();
              setWebPushEnabled(false);
            }
            addToast(
              intl.formatMessage(
-                endpoint
+                p256dh
                  ? messages.subscriptiondeleted
                  : messages.webpushhasbeendisabled
              ),
@@ -149,7 +141,7 @@ const UserWebPushSettings = () => {
          .catch(function () {
            addToast(
              intl.formatMessage(
-                endpoint
+                p256dh
                  ? messages.subscriptiondeleteerror
                  : messages.disablingwebpusherror
              ),
@@ -180,17 +172,12 @@ const UserWebPushSettings = () => {
                const parsedKey = JSON.parse(JSON.stringify(subscription));
                const currentUserPushSub =
                  await axios.get<UserPushSubscription>(
-                    `/api/v1/user/${
-                      user.id
-                    }/pushSubscription/${encodeURIComponent(
-                      parsedKey.endpoint
-                    )}`
+                    `/api/v1/user/${user.id}/pushSubscription/${parsedKey.keys.p256dh}`
                  );

-                if (currentUserPushSub.data.endpoint !== parsedKey.endpoint) {
+                if (currentUserPushSub.data.p256dh !== parsedKey.keys.p256dh) {
                  return;
                }
-
                setWebPushEnabled(true);
              } else {
                setWebPushEnabled(false);
@@ -325,21 +312,15 @@ const UserWebPushSettings = () => {
        </h3>
        <div className="section">
          {dataDevices?.length ? (
-            dataDevices
-              ?.sort((a, b) => {
-                const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
-                const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
-                return dateB - dateA;
-              })
-              .map((device, index) => (
-                <div className="py-2" key={`device-list-${index}`}>
-                  <DeviceItem
-                    key={index}
-                    disablePushNotifications={disablePushNotifications}
-                    device={device}
-                  />
-                </div>
-              ))
+            dataDevices?.map((device, index) => (
+              <div className="py-2" key={`device-list-${index}`}>
+                <DeviceItem
+                  key={index}
+                  disablePushNotifications={disablePushNotifications}
+                  device={device}
+                />
+              </div>
+            ))
          ) : (
            <>
              <Alert
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -1426,16 +1426,6 @@
  "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsSuccess": "Settings saved successfully!",
  "components.UserProfile.UserSettings.UserGeneralSettings.user": "User",
  "components.UserProfile.UserSettings.UserGeneralSettings.validationDiscordId": "You must provide a valid Discord user ID",
-  "components.UserProfile.UserSettings.UserGeneralSettings.validationemailformat": "Valid email required",
-  "components.UserProfile.UserSettings.UserGeneralSettings.validationemailrequired": "Email required",
-  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.deleteFailed": "Unable to delete linked account.",
-  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.errorUnknown": "An unknown error occurred",
-  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.linkedAccounts": "Linked Accounts",
-  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.linkedAccountsHint": "These external accounts are linked to your {applicationName} account.",
-  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.noLinkedAccounts": "You do not have any external accounts linked to your account.",
-  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.noPermissionDescription": "You do not have permission to modify this user's linked accounts.",
-  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.plexErrorExists": "This account is already linked to a Plex user",
-  "components.UserProfile.UserSettings.UserLinkedAccountsSettings.plexErrorUnauthorized": "Unable to connect to Plex using your credentials",
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.browser": "Browser",
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.created": "Created",
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.deletesubscription": "Delete Subscription",
@@ -1451,7 +1441,6 @@
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.subscriptiondeleted": "Subscription deleted.",
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.subscriptiondeleteerror": "Something went wrong while deleting the user subscription.",
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.type": "type",
-  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.unknown": "Unknown",
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.webpushhasbeendisabled": "Web push has been disabled.",
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.webpushhasbeenenabled": "Web push has been enabled.",
  "components.UserProfile.UserSettings.UserNotificationSettings.UserNotificationsWebPush.webpushsettingsfailed": "Web push notification settings failed to save.",
--- a/yarn.lock
+++ b/yarn.lock