@oneuptime/common 7.0.3387 → 7.0.3392

package/Models/DatabaseModels/StatusPageSubscriber.ts

@@ -434,6 +434,63 @@ export default class StatusPageSubscriber extends BaseModel {
   })
   public deletedByUserId?: ObjectID = undefined;
 
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateStatusPageSubscriber,
+      Permission.Public,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadStatusPageSubscriber,
+    ],
+    update: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.EditStatusPageSubscriber,
+    ],
+  })
+  @TableColumn({
+    isDefaultValueColumn: true,
+    type: TableColumnType.Boolean,
+    title: "Is Subscription Confirmed",
+    description:
+      "Has subscriber confirmed their subscription? (for example, by clicking on a confirmation link in an email)",
+  })
+  @Column({
+    type: ColumnType.Boolean,
+    default: false,
+  })
+  public isSubscriptionConfirmed?: boolean = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateStatusPageSubscriber,
+    ],
+    read: [],
+    update: [],
+  })
+  @TableColumn({
+    isDefaultValueColumn: false,
+    type: TableColumnType.ShortText,
+    title: "Subscription Confirmation Token",
+    description:
+      "Token used to confirm subscription. This is a random token that is sent to the subscriber's email address to confirm their subscription.",
+  })
+  @Column({
+    type: ColumnType.ShortText,
+    nullable: true,
+  })
+  public subscriptionConfirmationToken?: string = undefined;
+
   @ColumnAccessControl({
     create: [
       Permission.ProjectOwner,

package/Server/API/StatusPageAPI.ts

@@ -82,6 +82,66 @@ export default class StatusPageAPI extends BaseAPI<
   public constructor() {
     super(StatusPage, StatusPageService);
 
+    // confirm subscription api
+    this.router.get(
+      `${new this.entityType()
+        .getCrudApiPath()
+        ?.toString()}/confirm-subscription/:statusPageSubscriberId`,
+      async (req: ExpressRequest, res: ExpressResponse) => {
+        const token: string = req.query["verification-token"] as string;
+
+        const statusPageSubscriberId: ObjectID = new ObjectID(
+          req.params["statusPageSubscriberId"] as string,
+        );
+
+        const subscriber: StatusPageSubscriber | null =
+          await StatusPageSubscriberService.findOneBy({
+            query: {
+              _id: statusPageSubscriberId,
+              subscriptionConfirmationToken: token,
+            },
+            select: {
+              isSubscriptionConfirmed: true,
+            },
+            props: {
+              isRoot: true,
+            },
+          });
+
+        if (!subscriber) {
+          return Response.sendErrorResponse(
+            req,
+            res,
+            new NotFoundException(
+              "Subscriber not found or confirmation token is invalid",
+            ),
+          );
+        }
+
+        // check if subscription confirmed already.
+
+        if (subscriber.isSubscriptionConfirmed) {
+          return Response.sendEmptySuccessResponse(req, res);
+        }
+
+        await StatusPageSubscriberService.updateOneById({
+          id: statusPageSubscriberId,
+          data: {
+            isSubscriptionConfirmed: true,
+          },
+          props: {
+            isRoot: true,
+          },
+        });
+
+        await StatusPageSubscriberService.sendYouHaveSubscribedEmail({
+          subscriberId: statusPageSubscriberId,
+        });
+
+        return Response.sendEmptySuccessResponse(req, res);
+      },
+    );
+
     // CNAME verification api
     this.router.get(
       `${new this.entityType()

package/Server/Infrastructure/Postgres/SchemaMigrations/1734435866602-MigrationName.ts

@@ -0,0 +1,23 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class MigrationName1734435866602 implements MigrationInterface {
+  public name = "MigrationName1734435866602";
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "StatusPageSubscriber" ADD "isSubscriptionConfirmed" boolean NOT NULL DEFAULT false`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "StatusPageSubscriber" ADD "subscriptionConfirmationToken" character varying`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "StatusPageSubscriber" DROP COLUMN "subscriptionConfirmationToken"`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "StatusPageSubscriber" DROP COLUMN "isSubscriptionConfirmed"`,
+    );
+  }
+}

package/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts

@@ -83,6 +83,7 @@ import { MigrationName1731433309124 } from "./1731433309124-MigrationName";
 import { MigrationName1731435267537 } from "./1731435267537-MigrationName";
 import { MigrationName1731435514287 } from "./1731435514287-MigrationName";
 import { MigrationName1732553444010 } from "./1732553444010-MigrationName";
+import { MigrationName1734435866602 } from "./1734435866602-MigrationName";
 
 export default [
   InitialMigration,
@@ -170,4 +171,5 @@ export default [
   MigrationName1731435267537,
   MigrationName1731435514287,
   MigrationName1732553444010,
+  MigrationName1734435866602,
 ];

package/Server/Services/StatusPageService.ts

@@ -454,8 +454,8 @@ export class Service extends DatabaseService<StatusPage> {
   }
 
   public async getStatusPageURL(statusPageId: ObjectID): Promise<string> {
-    const domains: Array<StatusPageDomain> =
-      await StatusPageDomainService.findBy({
+    const domain: StatusPageDomain | null =
+      await StatusPageDomainService.findOneBy({
         query: {
           statusPageId: statusPageId,
           isSslProvisioned: true,
@@ -463,21 +463,15 @@ export class Service extends DatabaseService<StatusPage> {
         select: {
           fullDomain: true,
         },
-        skip: 0,
-        limit: LIMIT_PER_PROJECT,
         props: {
           isRoot: true,
           ignoreHooks: true,
         },
       });
 
-    let statusPageURL: string = domains
-      .map((d: StatusPageDomain) => {
-        return d.fullDomain;
-      })
-      .join(", ");
+    let statusPageURL: string = domain?.fullDomain || "";
 
-    if (domains.length === 0) {
+    if (!statusPageURL) {
       const host: Hostname = await DatabaseConfig.getHost();
 
       const httpProtocol: Protocol = await DatabaseConfig.getHttpProtocol();

package/Server/Services/StatusPageSubscriberService.ts

@@ -29,6 +29,7 @@ import StatusPageResource from "Common/Models/DatabaseModels/StatusPageResource"
 import Model from "Common/Models/DatabaseModels/StatusPageSubscriber";
 import PositiveNumber from "../../Types/PositiveNumber";
 import StatusPageEventType from "../../Types/StatusPage/StatusPageEventType";
+import NumberUtil from "../../Utils/Number";
 
 export class Service extends DatabaseService<Model> {
   public constructor() {
@@ -160,6 +161,22 @@ export class Service extends DatabaseService<Model> {
 
     data.data.projectId = statuspage.projectId;
 
+    const isEmailSubscriber: boolean = Boolean(data.data.subscriberEmail);
+    const isSubscriptionConfirmed: boolean = Boolean(
+      data.data.isSubscriptionConfirmed,
+    );
+
+    if (isEmailSubscriber && !isSubscriptionConfirmed) {
+      data.data.isSubscriptionConfirmed = false;
+    } else {
+      data.data.isSubscriptionConfirmed = true; // if the subscriber is not email, then set it to true for SMS subscribers.
+    }
+
+    data.data.subscriptionConfirmationToken = NumberUtil.getRandomNumber(
+      100000,
+      999999,
+    ).toString();
+
     return { createBy: data, carryForward: statuspage };
   }
 
@@ -180,10 +197,6 @@ export class Service extends DatabaseService<Model> {
       onCreate.carryForward.name ||
       "Status Page";
 
-    const host: Hostname = await DatabaseConfig.getHost();
-
-    const httpProtocol: Protocol = await DatabaseConfig.getHttpProtocol();
-
     const unsubscribeLink: string = this.getUnsubscribeLink(
       URL.fromString(statusPageURL),
       createdItem.id!,
@@ -237,28 +250,235 @@ export class Service extends DatabaseService<Model> {
     if (
       createdItem.statusPageId &&
       createdItem.subscriberEmail &&
-      createdItem._id &&
-      createdItem.sendYouHaveSubscribedMessage
+      createdItem._id
     ) {
       // Call mail service and send an email.
 
       // get status page domain for this status page.
       // if the domain is not found, use the internal status page preview link.
 
+      const isSubcriptionConfirmed: boolean = Boolean(
+        createdItem.isSubscriptionConfirmed,
+      );
+
+      if (!isSubcriptionConfirmed) {
+        await this.sendConfirmSubscriptionEmail({
+          subscriberId: createdItem.id!,
+        });
+      }
+
+      if (isSubcriptionConfirmed && createdItem.sendYouHaveSubscribedMessage) {
+        await this.sendYouHaveSubscribedEmail({
+          subscriberId: createdItem.id!,
+        });
+      }
+    }
+
+    return createdItem;
+  }
+
+  public async sendConfirmSubscriptionEmail(data: {
+    subscriberId: ObjectID;
+  }): Promise<void> {
+    // get subscriber
+    const subscriber: Model | null = await this.findOneBy({
+      query: {
+        _id: data.subscriberId,
+      },
+      select: {
+        statusPageId: true,
+        subscriberEmail: true,
+        subscriberPhone: true,
+        projectId: true,
+        subscriptionConfirmationToken: true,
+        sendYouHaveSubscribedMessage: true,
+      },
+      props: {
+        isRoot: true,
+        ignoreHooks: true,
+      },
+    });
+
+    // get status page
+    if (!subscriber || !subscriber.statusPageId) {
+      return;
+    }
+
+    const statusPage: StatusPage | null = await StatusPageService.findOneBy({
+      query: {
+        _id: subscriber.statusPageId.toString(),
+      },
+      select: {
+        logoFileId: true,
+        isPublicStatusPage: true,
+        pageTitle: true,
+        name: true,
+        smtpConfig: {
+          _id: true,
+          hostname: true,
+          port: true,
+          username: true,
+          password: true,
+          fromEmail: true,
+          fromName: true,
+          secure: true,
+        },
+      },
+      props: {
+        isRoot: true,
+        ignoreHooks: true,
+      },
+    });
+
+    if (!statusPage || !statusPage.id) {
+      return;
+    }
+
+    const statusPageURL: string = await StatusPageService.getStatusPageURL(
+      statusPage.id,
+    );
+
+    const statusPageName: string =
+      statusPage.pageTitle || statusPage.name || "Status Page";
+
+    const host: Hostname = await DatabaseConfig.getHost();
+
+    const httpProtocol: Protocol = await DatabaseConfig.getHttpProtocol();
+
+    const confirmSubscriptionLink: string = this.getConfirmSubscriptionLink({
+      statusPageUrl: statusPageURL,
+      confirmationToken: subscriber.subscriptionConfirmationToken || "",
+      statusPageSubscriberId: subscriber.id!,
+    }).toString();
+
+    if (
+      subscriber.statusPageId &&
+      subscriber.subscriberEmail &&
+      subscriber._id
+    ) {
+      MailService.sendMail(
+        {
+          toEmail: subscriber.subscriberEmail,
+          templateType: EmailTemplateType.ConfirmStatusPageSubscription,
+          vars: {
+            statusPageName: statusPageName,
+            logoUrl: statusPage.logoFileId
+              ? new URL(httpProtocol, host)
+                  .addRoute(FileRoute)
+                  .addRoute("/image/" + statusPage.logoFileId)
+                  .toString()
+              : "",
+            statusPageUrl: statusPageURL,
+            isPublicStatusPage: statusPage.isPublicStatusPage
+              ? "true"
+              : "false",
+            confirmationUrl: confirmSubscriptionLink,
+          },
+          subject: "Confirm your subscription to " + statusPageName,
+        },
+        {
+          projectId: subscriber.projectId,
+          mailServer: ProjectSMTPConfigService.toEmailServer(
+            statusPage.smtpConfig,
+          ),
+        },
+      ).catch((err: Error) => {
+        logger.error(err);
+      });
+    }
+  }
+
+  public async sendYouHaveSubscribedEmail(data: {
+    subscriberId: ObjectID;
+  }): Promise<void> {
+    // get subscriber
+    const subscriber: Model | null = await this.findOneBy({
+      query: {
+        _id: data.subscriberId,
+      },
+      select: {
+        statusPageId: true,
+        subscriberEmail: true,
+        subscriberPhone: true,
+        projectId: true,
+        sendYouHaveSubscribedMessage: true,
+      },
+      props: {
+        isRoot: true,
+        ignoreHooks: true,
+      },
+    });
+
+    // get status page
+    if (!subscriber || !subscriber.statusPageId) {
+      return;
+    }
+
+    const statusPage: StatusPage | null = await StatusPageService.findOneBy({
+      query: {
+        _id: subscriber.statusPageId.toString(),
+      },
+      select: {
+        logoFileId: true,
+        isPublicStatusPage: true,
+        pageTitle: true,
+        name: true,
+        smtpConfig: {
+          _id: true,
+          hostname: true,
+          port: true,
+          username: true,
+          password: true,
+          fromEmail: true,
+          fromName: true,
+          secure: true,
+        },
+      },
+      props: {
+        isRoot: true,
+        ignoreHooks: true,
+      },
+    });
+
+    if (!statusPage || !statusPage.id) {
+      return;
+    }
+
+    const statusPageURL: string = await StatusPageService.getStatusPageURL(
+      statusPage.id,
+    );
+
+    const statusPageName: string =
+      statusPage.pageTitle || statusPage.name || "Status Page";
+
+    const host: Hostname = await DatabaseConfig.getHost();
+
+    const httpProtocol: Protocol = await DatabaseConfig.getHttpProtocol();
+
+    const unsubscribeLink: string = this.getUnsubscribeLink(
+      URL.fromString(statusPageURL),
+      subscriber.id!,
+    ).toString();
+
+    if (
+      subscriber.statusPageId &&
+      subscriber.subscriberEmail &&
+      subscriber._id
+    ) {
       MailService.sendMail(
         {
-          toEmail: createdItem.subscriberEmail,
+          toEmail: subscriber.subscriberEmail,
           templateType: EmailTemplateType.SubscribedToStatusPage,
           vars: {
             statusPageName: statusPageName,
-            logoUrl: onCreate.carryForward.logoFileId
+            logoUrl: statusPage.logoFileId
               ? new URL(httpProtocol, host)
                   .addRoute(FileRoute)
-                  .addRoute("/image/" + onCreate.carryForward.logoFileId)
+                  .addRoute("/image/" + statusPage.logoFileId)
                   .toString()
               : "",
             statusPageUrl: statusPageURL,
-            isPublicStatusPage: onCreate.carryForward.isPublicStatusPage
+            isPublicStatusPage: statusPage.isPublicStatusPage
               ? "true"
               : "false",
             unsubscribeUrl: unsubscribeLink,
@@ -266,17 +486,25 @@ export class Service extends DatabaseService<Model> {
           subject: "You have been subscribed to " + statusPageName,
         },
         {
-          projectId: createdItem.projectId,
+          projectId: subscriber.projectId,
           mailServer: ProjectSMTPConfigService.toEmailServer(
-            onCreate.carryForward.smtpConfig,
+            statusPage.smtpConfig,
           ),
         },
       ).catch((err: Error) => {
         logger.error(err);
       });
     }
+  }
 
-    return createdItem;
+  public getConfirmSubscriptionLink(data: {
+    statusPageUrl: string;
+    confirmationToken: string;
+    statusPageSubscriberId: ObjectID;
+  }): URL {
+    return URL.fromString(data.statusPageUrl).addRoute(
+      `/confirm-subscription/${data.statusPageSubscriberId.toString()}?verification-token=${data.confirmationToken}`,
+    );
   }
 
   public async getSubscribersByStatusPage(
@@ -287,6 +515,7 @@ export class Service extends DatabaseService<Model> {
       query: {
         statusPageId: statusPageId,
         isUnsubscribed: false,
+        isSubscriptionConfirmed: true,
       },
       select: {
         _id: true,

package/Types/Email/EmailTemplateType.ts

@@ -3,6 +3,7 @@ enum EmailTemplateType {
   ProbeOffline = "ProbeOffline.hbs",
   SignupWelcomeEmail = "SignupWelcomeEmail.hbs",
   ProbeConnectionStatusChange = "ProbeConnectionStatusChange.hbs",
+  ConfirmStatusPageSubscription = "ConfirmStatusPageSubscription.hbs",
   EmailVerified = "EmailVerified.hbs",
   PasswordChanged = "PasswordChanged.hbs",
   ProbeOwnerAdded = "ProbeOwnerAdded.hbs",

package/UI/Components/Pill/Pill.tsx

@@ -1,6 +1,8 @@
 import { Black } from "Common/Types/BrandColors";
 import Color from "Common/Types/Color";
 import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
+import Tooltip from "../Tooltip/Tooltip";
+import { GetReactElementFunction } from "../../Types/FunctionTypes";
 
 export enum PillSize {
   Small = "10px",
@@ -15,6 +17,7 @@ export interface ComponentProps {
   size?: PillSize | undefined;
   style?: CSSProperties;
   isMinimal?: boolean | undefined;
+  tooltip?: string | undefined;
 }
 
 const Pill: FunctionComponent<ComponentProps> = (
@@ -39,29 +42,38 @@ const Pill: FunctionComponent<ComponentProps> = (
       </span>
     );
   }
-  return (
-    <span
-      data-testid="pill"
-      className="rounded-full p-1 pl-3 pr-3"
-      style={{
-        // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
 
-        color:
-          props.style?.color || Color.shouldUseDarkText(props.color || Black)
-            ? "#000000"
-            : "#ffffff",
-        backgroundColor:
-          props.style?.backgroundColor || props.color
-            ? props.color.toString()
-            : Black.toString(),
-        fontSize: props.size ? props.size.toString() : PillSize.Normal,
-        ...props.style,
-      }}
-    >
-      {" "}
-      {props.text}{" "}
-    </span>
-  );
+  const getPillElement: GetReactElementFunction = (): ReactElement => {
+    return (
+      <span
+        data-testid="pill"
+        className="rounded-full p-1 pl-3 pr-3"
+        style={{
+          // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
+
+          color:
+            props.style?.color || Color.shouldUseDarkText(props.color || Black)
+              ? "#000000"
+              : "#ffffff",
+          backgroundColor:
+            props.style?.backgroundColor || props.color
+              ? props.color.toString()
+              : Black.toString(),
+          fontSize: props.size ? props.size.toString() : PillSize.Normal,
+          ...props.style,
+        }}
+      >
+        {" "}
+        {props.text}{" "}
+      </span>
+    );
+  };
+
+  if (props.tooltip) {
+    return <Tooltip text={props.tooltip}>{getPillElement()}</Tooltip>;
+  }
+
+  return getPillElement();
 };
 
 export default Pill;

package/build/dist/Models/DatabaseModels/StatusPageSubscriber.js

@@ -47,6 +47,8 @@ let StatusPageSubscriber = class StatusPageSubscriber extends BaseModel {
         this.createdByUserId = undefined;
         this.deletedByUser = undefined;
         this.deletedByUserId = undefined;
+        this.isSubscriptionConfirmed = undefined;
+        this.subscriptionConfirmationToken = undefined;
         this.isUnsubscribed = undefined;
         this.sendYouHaveSubscribedMessage = undefined;
         this.isSubscribedToAllResources = undefined;
@@ -400,6 +402,63 @@ __decorate([
     }),
     __metadata("design:type", ObjectID)
 ], StatusPageSubscriber.prototype, "deletedByUserId", void 0);
+__decorate([
+    ColumnAccessControl({
+        create: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.CreateStatusPageSubscriber,
+            Permission.Public,
+        ],
+        read: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.ReadStatusPageSubscriber,
+        ],
+        update: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.EditStatusPageSubscriber,
+        ],
+    }),
+    TableColumn({
+        isDefaultValueColumn: true,
+        type: TableColumnType.Boolean,
+        title: "Is Subscription Confirmed",
+        description: "Has subscriber confirmed their subscription? (for example, by clicking on a confirmation link in an email)",
+    }),
+    Column({
+        type: ColumnType.Boolean,
+        default: false,
+    }),
+    __metadata("design:type", Boolean)
+], StatusPageSubscriber.prototype, "isSubscriptionConfirmed", void 0);
+__decorate([
+    ColumnAccessControl({
+        create: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.CreateStatusPageSubscriber,
+        ],
+        read: [],
+        update: [],
+    }),
+    TableColumn({
+        isDefaultValueColumn: false,
+        type: TableColumnType.ShortText,
+        title: "Subscription Confirmation Token",
+        description: "Token used to confirm subscription. This is a random token that is sent to the subscriber's email address to confirm their subscription.",
+    }),
+    Column({
+        type: ColumnType.ShortText,
+        nullable: true,
+    }),
+    __metadata("design:type", String)
+], StatusPageSubscriber.prototype, "subscriptionConfirmationToken", void 0);
 __decorate([
     ColumnAccessControl({
         create: [