@oneuptime/common 7.0.4066 → 7.0.4080

package/Server/API/StatusPageAPI.ts

@@ -79,6 +79,17 @@ import UptimePrecision from "../../Types/StatusPage/UptimePrecision";
 import { Green } from "../../Types/BrandColors";
 import UptimeUtil from "../../Utils/Uptime/UptimeUtil";
 import CaptureSpan from "../Utils/Telemetry/CaptureSpan";
+import URL from "Common/Types/API/URL";
+import SMS from "../../Types/SMS/SMS";
+import SmsService from "../Services/SmsService";
+import ProjectCallSMSConfigService from "../Services/ProjectCallSMSConfigService";
+import MailService from "../Services/MailService";
+import EmailTemplateType from "../../Types/Email/EmailTemplateType";
+import Hostname from "../../Types/API/Hostname";
+import Protocol from "../../Types/API/Protocol";
+import DatabaseConfig from "../DatabaseConfig";
+import { FileRoute } from "../../ServiceRoute";
+import ProjectSmtpConfigService from "../Services/ProjectSmtpConfigService";
 
 export default class StatusPageAPI extends BaseAPI<
   StatusPage,
@@ -87,6 +98,178 @@ export default class StatusPageAPI extends BaseAPI<
   public constructor() {
     super(StatusPage, StatusPageService);
 
+    // get title, description of the page.  This is used for SEO.
+    this.router.get(
+      `${new this.entityType().getCrudApiPath()?.toString()}/seo/:statusPageIdOrDomain`,
+      UserMiddleware.getUserMiddleware,
+      async (req: ExpressRequest, res: ExpressResponse) => {
+        const statusPageIdOrDomain: string = req.params[
+          "statusPageIdOrDomain"
+        ] as string;
+
+        let statusPageId: ObjectID | null = null;
+
+        if (statusPageIdOrDomain && statusPageIdOrDomain.includes(".")) {
+          // then this is a domain and not the status page id. We need to get the status page id from the domain.
+
+          const statusPageDomain: StatusPageDomain | null =
+            await StatusPageDomainService.findOneBy({
+              query: {
+                fullDomain: statusPageIdOrDomain,
+                domain: {
+                  isVerified: true,
+                } as any,
+              },
+              select: {
+                statusPageId: true,
+              },
+              props: {
+                isRoot: true,
+              },
+            });
+
+          if (!statusPageDomain || !statusPageDomain.statusPageId) {
+            return Response.sendErrorResponse(
+              req,
+              res,
+              new NotFoundException("Status Page not found"),
+            );
+          }
+
+          statusPageId = statusPageDomain.statusPageId;
+        } else {
+          // then this is a status page id. We need to get the status page id from the id.
+          try {
+            statusPageId = new ObjectID(statusPageIdOrDomain);
+          } catch (err) {
+            return Response.sendErrorResponse(
+              req,
+              res,
+              new NotFoundException("Status Page not found"),
+            );
+          }
+        }
+
+        const statusPage: StatusPage | null = await StatusPageService.findOneBy(
+          {
+            query: {
+              _id: statusPageId,
+            },
+            select: {
+              pageTitle: true,
+              pageDescription: true,
+              name: true,
+            },
+            props: {
+              isRoot: true,
+            },
+          },
+        );
+
+        if (!statusPage) {
+          return Response.sendErrorResponse(
+            req,
+            res,
+            new NotFoundException("Status Page not found"),
+          );
+        }
+
+        return Response.sendJsonObjectResponse(req, res, {
+          title: statusPage.pageTitle || statusPage.name,
+          description: statusPage.pageDescription,
+        });
+      },
+    );
+
+    // favicon api.
+    this.router.get(
+      `${new this.entityType().getCrudApiPath()?.toString()}/favicon/:statusPageIdOrDomain`,
+      async (req: ExpressRequest, res: ExpressResponse) => {
+        const statusPageIdOrDomain: string = req.params[
+          "statusPageIdOrDomain"
+        ] as string;
+
+        let statusPageId: ObjectID | null = null;
+
+        if (statusPageIdOrDomain && statusPageIdOrDomain.includes(".")) {
+          // then this is a domain and not the status page id. We need to get the status page id from the domain.
+
+          const statusPageDomain: StatusPageDomain | null =
+            await StatusPageDomainService.findOneBy({
+              query: {
+                fullDomain: statusPageIdOrDomain,
+                domain: {
+                  isVerified: true,
+                } as any,
+              },
+              select: {
+                statusPageId: true,
+              },
+              props: {
+                isRoot: true,
+              },
+            });
+
+          if (!statusPageDomain || !statusPageDomain.statusPageId) {
+            return Response.sendErrorResponse(
+              req,
+              res,
+              new NotFoundException("Status Page not found"),
+            );
+          }
+
+          statusPageId = statusPageDomain.statusPageId;
+        } else {
+          // then this is a status page id. We need to get the status page id from the id.
+          try {
+            statusPageId = new ObjectID(statusPageIdOrDomain);
+          } catch (err) {
+            return Response.sendErrorResponse(
+              req,
+              res,
+              new NotFoundException("Status Page not found"),
+            );
+          }
+        }
+
+        const statusPage: StatusPage | null = await StatusPageService.findOneBy(
+          {
+            query: {
+              _id: statusPageId,
+            },
+            select: {
+              faviconFile: {
+                file: true,
+                _id: true,
+                type: true,
+                name: true,
+              },
+            },
+            props: {
+              isRoot: true,
+            },
+          },
+        );
+
+        if (!statusPage || !statusPage.faviconFile) {
+          logger.debug("Favicon file not found. Returning default favicon.");
+
+          // return default favicon.
+          return Response.sendFileByPath(
+            req,
+            res,
+            `/usr/src/Common/UI/Images/favicon/status-green.png`,
+          );
+        }
+
+        logger.debug(
+          `Favicon file found. Sending file: ${statusPage.faviconFile.name}`,
+        );
+
+        return Response.sendFileResponse(req, res, statusPage.faviconFile!);
+      },
+    );
+
     // confirm subscription api
     this.router.get(
       `${new this.entityType()
@@ -1344,6 +1527,22 @@ export default class StatusPageAPI extends BaseAPI<
       },
     );
 
+    this.router.post(
+      `${new this.entityType()
+        .getCrudApiPath()
+        ?.toString()}/manage-subscription/:statusPageId`,
+      UserMiddleware.getUserMiddleware,
+      async (req: ExpressRequest, res: ExpressResponse, next: NextFunction) => {
+        try {
+          await this.manageExistingSubscription(req);
+
+          return Response.sendEmptySuccessResponse(req, res);
+        } catch (err) {
+          next(err);
+        }
+      },
+    );
+
     this.router.post(
       `${new this.entityType()
         .getCrudApiPath()
@@ -1941,6 +2140,233 @@ export default class StatusPageAPI extends BaseAPI<
     return response;
   }
 
+  @CaptureSpan()
+  public async manageExistingSubscription(req: ExpressRequest): Promise<void> {
+    const objectId: ObjectID = new ObjectID(
+      req.params["statusPageId"] as string,
+    );
+
+    logger.debug(`Managing Existing Subscription for Status Page: ${objectId}`);
+
+    if (
+      !(await this.service.hasReadAccess(
+        objectId,
+        await CommonAPI.getDatabaseCommonInteractionProps(req),
+        req,
+      ))
+    ) {
+      logger.debug(`No read access to status page with ID: ${objectId}`);
+      throw new NotAuthenticatedException(
+        "You are not authenticated to access this status page",
+      );
+    }
+
+    const statusPage: StatusPage | null = await StatusPageService.findOneBy({
+      query: {
+        _id: objectId.toString(),
+      },
+      select: {
+        _id: true,
+        projectId: true,
+        enableEmailSubscribers: true,
+        enableSmsSubscribers: true,
+        allowSubscribersToChooseResources: true,
+        allowSubscribersToChooseEventTypes: true,
+        showSubscriberPageOnStatusPage: true,
+      },
+      props: {
+        isRoot: true,
+      },
+    });
+
+    if (!statusPage) {
+      logger.debug(`Status page not found with ID: ${objectId}`);
+      throw new BadDataException("Status Page not found");
+    }
+
+    if (!statusPage.showSubscriberPageOnStatusPage) {
+      logger.debug(
+        `Subscriber page not enabled for status page with ID: ${objectId}`,
+      );
+      throw new BadDataException(
+        "Subscribes not enabled for this status page.",
+      );
+    }
+
+    logger.debug(`Status page found: ${JSON.stringify(statusPage)}`);
+
+    if (
+      req.body.data["subscriberEmail"] &&
+      !statusPage.enableEmailSubscribers
+    ) {
+      logger.debug(
+        `Email subscribers not enabled for status page with ID: ${objectId}`,
+      );
+      throw new BadDataException(
+        "Email subscribers not enabled for this status page.",
+      );
+    }
+
+    if (req.body.data["subscriberPhone"] && !statusPage.enableSmsSubscribers) {
+      logger.debug(
+        `SMS subscribers not enabled for status page with ID: ${objectId}`,
+      );
+      throw new BadDataException(
+        "SMS subscribers not enabled for this status page.",
+      );
+    }
+
+    // if no email or phone, throw error.
+
+    if (
+      !req.body.data["subscriberEmail"] &&
+      !req.body.data["subscriberPhone"]
+    ) {
+      logger.debug(
+        `No email or phone provided for subscription to status page with ID: ${objectId}`,
+      );
+      throw new BadDataException(
+        "Email or phone is required to subscribe to this status page.",
+      );
+    }
+
+    const email: Email | undefined = req.body.data["subscriberEmail"]
+      ? new Email(req.body.data["subscriberEmail"] as string)
+      : undefined;
+
+    const phone: Phone | undefined = req.body.data["subscriberPhone"]
+      ? new Phone(req.body.data["subscriberPhone"] as string)
+      : undefined;
+
+    let statusPageSubscriber: StatusPageSubscriber | null = null;
+
+    if (email) {
+      logger.debug(`Setting subscriber email: ${email}`);
+      statusPageSubscriber = await StatusPageSubscriberService.findOneBy({
+        query: {
+          subscriberEmail: email,
+          statusPageId: objectId,
+        },
+        select: {
+          _id: true,
+          subscriberEmail: true,
+        },
+        props: {
+          isRoot: true,
+        },
+      });
+    }
+
+    if (phone) {
+      logger.debug(`Setting subscriber phone: ${phone}`);
+      statusPageSubscriber = await StatusPageSubscriberService.findOneBy({
+        query: {
+          subscriberPhone: phone,
+          statusPageId: objectId,
+        },
+        select: {
+          _id: true,
+          subscriberPhone: true,
+        },
+        props: {
+          isRoot: true,
+        },
+      });
+    }
+
+    if (!statusPageSubscriber) {
+      // not found, return bad data
+      logger.debug(
+        `Subscriber not found for email: ${email} or phone: ${phone}`,
+      );
+
+      let emailOrPhone: string = "email";
+      if (phone) {
+        emailOrPhone = "phone";
+      }
+
+      throw new BadDataException(
+        `Subscription not found for this status page. Please make sure your ${emailOrPhone} is correct.`,
+      );
+    }
+
+    const statusPageURL: string =
+      await StatusPageService.getStatusPageURL(objectId);
+
+    const manageUrlink: string = StatusPageSubscriberService.getUnsubscribeLink(
+      URL.fromString(statusPageURL),
+      statusPageSubscriber.id!,
+    ).toString();
+
+    const statusPages: Array<StatusPage> =
+      await StatusPageSubscriberService.getStatusPagesToSendNotification([
+        objectId,
+      ]);
+
+    for (const statusPage of statusPages) {
+      // send email to subscriber or sms if phone is provided.
+
+      if (email) {
+        const host: Hostname = await DatabaseConfig.getHost();
+        const httpProtocol: Protocol = await DatabaseConfig.getHttpProtocol();
+
+        MailService.sendMail(
+          {
+            toEmail: email,
+            templateType:
+              EmailTemplateType.ManageExistingStatusPageSubscriberSubscription,
+            vars: {
+              statusPageName: statusPage.name || "Status Page",
+              statusPageUrl: statusPageURL,
+              logoUrl: statusPage.logoFileId
+                ? new URL(httpProtocol, host)
+                    .addRoute(FileRoute)
+                    .addRoute("/image/" + statusPage.logoFileId)
+                    .toString()
+                : "",
+              isPublicStatusPage: statusPage.isPublicStatusPage
+                ? "true"
+                : "false",
+              subscriberEmailNotificationFooterText:
+                statusPage.subscriberEmailNotificationFooterText || "",
+
+              manageSubscriptionUrl: manageUrlink,
+            },
+            subject:
+              "Manage your Subscription for" +
+              (statusPage.name || "Status Page"),
+          },
+          {
+            mailServer: ProjectSmtpConfigService.toEmailServer(
+              statusPage.smtpConfig,
+            ),
+            projectId: statusPage.projectId!,
+          },
+        );
+      }
+
+      if (phone) {
+        const sms: SMS = {
+          message: `You have selected to manage your subscription for the status page: ${statusPage.name}. You can manage your subscription here: ${manageUrlink}`,
+          to: phone,
+        };
+        // send sms here.
+        SmsService.sendSms(sms, {
+          projectId: statusPage.projectId,
+          customTwilioConfig: ProjectCallSMSConfigService.toTwilioConfig(
+            statusPage.callSmsConfig,
+          ),
+        }).catch((err: Error) => {
+          logger.error(err);
+        });
+      }
+
+      logger.debug(
+        `Subscription management link sent to subscriber with ID: ${statusPageSubscriber.id}`,
+      );
+    }
+  }
+
   @CaptureSpan()
   public async subscribeToStatusPage(req: ExpressRequest): Promise<void> {
     const objectId: ObjectID = new ObjectID(

package/Server/EnvironmentConfig.ts

@@ -3,6 +3,7 @@ import {
   AdminDashboardRoute,
   DashboardRoute,
   AppApiRoute,
+  StatusPageApiRoute,
 } from "Common/ServiceRoute";
 import BillingConfig from "./BillingConfig";
 import Hostname from "Common/Types/API/Hostname";
@@ -306,6 +307,12 @@ export const AdminDashboardClientURL: URL = new URL(
 
 export const AppApiClientUrl: URL = new URL(HttpProtocol, Host, AppApiRoute);
 
+export const StatusPageApiClientUrl: URL = new URL(
+  HttpProtocol,
+  Host,
+  StatusPageApiRoute,
+);
+
 export const DashboardClientUrl: URL = new URL(
   HttpProtocol,
   Host,

package/Server/Services/OnCallDutyPolicyScheduleService.ts

@@ -238,7 +238,7 @@ export class Service extends DatabaseService<OnCallDutyPolicySchedule> {
             onCallDutyPolicyFeedEventType:
               OnCallDutyPolicyFeedEventType.RosterHandoff,
             displayColor: Green500,
-            feedInfoInMarkdown: `📵 **${await UserService.getUserMarkdownString(
+            feedInfoInMarkdown: `🚫 **${await UserService.getUserMarkdownString(
               {
                 userId: sendEmailToUserId,
                 projectId: projectId!,

package/Server/Utils/StartServer.ts

@@ -142,6 +142,10 @@ export interface InitFuctionOptions {
   port?: Port | undefined;
   isFrontendApp?: boolean;
   statusOptions: StatusAPIOptions;
+  getVariablesToRenderIndexPage?: (
+    req: ExpressRequest,
+    res: ExpressResponse,
+  ) => Promise<JSONObject>;
 }
 
 type InitFunction = (
@@ -200,11 +204,36 @@ const init: InitFunction = async (
       },
     );
 
-    app.get("/*", (_req: ExpressRequest, res: ExpressResponse) => {
-      return res.render("/usr/src/app/views/index.ejs", {
-        enableGoogleTagManager: IsBillingEnabled || false,
-      });
-    });
+    app.get(
+      ["/*", `/${appName}/*`],
+      async (_req: ExpressRequest, res: ExpressResponse) => {
+        logger.debug("Rendering index page");
+
+        let variables: JSONObject = {};
+
+        if (data.getVariablesToRenderIndexPage) {
+          logger.debug("Getting variables to render index page");
+          try {
+            const variablesToRenderIndexPage: JSONObject =
+              await data.getVariablesToRenderIndexPage(_req, res);
+            variables = {
+              ...variables,
+              ...variablesToRenderIndexPage,
+            };
+          } catch (error) {
+            logger.error(error);
+          }
+        }
+
+        logger.debug("Rendering index page with variables: ");
+        logger.debug(variables);
+
+        return res.render("/usr/src/app/views/index.ejs", {
+          enableGoogleTagManager: IsBillingEnabled || false,
+          ...variables,
+        });
+      },
+    );
   }
 
   return app;

package/Types/Email/EmailTemplateType.ts

@@ -16,6 +16,7 @@ enum EmailTemplateType {
   SubscriberIncidentNoteCreated = "SubscriberIncidentNoteCreated.hbs",
   SubscriberIncidentStateChanged = "SubscriberIncidentStateChanged.hbs",
   SubscriberScheduledMaintenanceEventCreated = "SubscriberScheduledMaintenanceEventCreated.hbs",
+  ManageExistingStatusPageSubscriberSubscription = "ManageExistingStatusPageSubscriberSubscription.hbs",
   SubscriberScheduledMaintenanceEventStateChanged = "SubscriberScheduledMaintenanceEventStateChanged.hbs",
   StatusPageForgotPassword = "StatusPageForgotPassword.hbs",
   StatusPagePasswordChanged = "StatusPagePasswordChanged.hbs",

package/UI/Components/Button/DropdownButton.tsx

@@ -0,0 +1,93 @@
+import React, { ReactElement, useState } from "react";
+
+interface DropdownOption {
+  label: string;
+  onClick: () => void;
+}
+
+interface DropdownButtonProps {
+  title: string;
+  dropdownOptions: DropdownOption[];
+  onButtonClick: () => void;
+}
+
+export interface ComponentProps {
+  title: string;
+  dropdownOptions: DropdownOption[];
+  onButtonClick: () => void;
+}
+
+const DropdownButton: React.FC<DropdownButtonProps> = ({
+  title,
+  dropdownOptions,
+  onButtonClick,
+}: ComponentProps): ReactElement => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown: VoidFunction = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="inline-flex rounded-md shadow-sm">
+      <button
+        type="button"
+        className="relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+        onClick={onButtonClick}
+      >
+        {title}
+      </button>
+      <div className="relative -ml-px block">
+        <button
+          type="button"
+          className="relative inline-flex items-center rounded-r-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+          id="option-menu-button"
+          aria-expanded={isOpen}
+          aria-haspopup="true"
+          onClick={toggleDropdown}
+        >
+          <span className="sr-only">Open options</span>
+          <svg
+            className="size-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+
+        {isOpen && (
+          <div
+            className="absolute right-0 z-10 -mr-1 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="option-menu-button"
+          >
+            <div className="py-1" role="none">
+              {dropdownOptions.map((option: DropdownOption, index: number) => {
+                return (
+                  <a
+                    key={index}
+                    href="#"
+                    className="block px-4 py-2 text-sm text-gray-700"
+                    role="menuitem"
+                    onClick={option.onClick}
+                  >
+                    {option.label}
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DropdownButton;

package/UI/Components/Forms/BasicForm.tsx

@@ -60,7 +60,12 @@ export interface BaseComponentProps<T> {
   initialValues?: FormValues<T> | undefined;
   values?: FormValues<T> | undefined;
   onValidate?: undefined | ((values: FormValues<T>) => JSONObject);
-  onChange?: undefined | ((values: FormValues<T>) => void);
+  onChange?:
+    | undefined
+    | ((
+        values: FormValues<T>,
+        setNewFormValues: (newValues: FormValues<T>) => void,
+      ) => void);
   fields: Fields<T>;
   steps?: undefined | Array<FormStep<T>>;
   submitButtonText?: undefined | string;
@@ -352,7 +357,10 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       setCurrentValue(refCurrentValue.current);
 
       if (props.onChange && isInitialValuesSet.current) {
-        props.onChange(refCurrentValue.current);
+        props.onChange(refCurrentValue.current, (values: FormValues<T>) => {
+          refCurrentValue.current = values;
+          setCurrentValue(refCurrentValue.current);
+        });
       }
     };
 
@@ -657,6 +665,10 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                                   disableAutofocus={
                                     props.disableAutofocus || false
                                   }
+                                  setFormValues={(values: FormValues<T>) => {
+                                    refCurrentValue.current = values;
+                                    setCurrentValue(refCurrentValue.current);
+                                  }}
                                 />
                               }
                               {field.footerElement}