fix(notif/ui): Use custom application title in notifications & sign-in page (#849)

server/api/plexapi.ts

@@ -118,7 +118,7 @@ class PlexAPI {
       options: {
         identifier: settings.clientId,
         product: 'Overseerr',
-        deviceName: 'Overseerr',
+        deviceName: settings.main.applicationTitle,
         platform: 'Overseerr',
       },
     });

server/lib/notifications/agents/email.ts

@@ -36,7 +36,7 @@ class EmailAgent
 
   private async sendMediaRequestEmail(payload: NotificationPayload) {
     // This is getting main settings for the whole app
-    const applicationUrl = getSettings().main.applicationUrl;
+    const { applicationUrl, applicationTitle } = getSettings().main;
     try {
       const userRepository = getRepository(User);
       const users = await userRepository.find();
@@ -65,6 +65,7 @@ class EmailAgent
                 ? `${applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`
                 : undefined,
               applicationUrl,
+              applicationTitle,
               requestType: 'New Request',
             },
           });
@@ -81,7 +82,7 @@ class EmailAgent
 
   private async sendMediaFailedEmail(payload: NotificationPayload) {
     // This is getting main settings for the whole app
-    const applicationUrl = getSettings().main.applicationUrl;
+    const { applicationUrl, applicationTitle } = getSettings().main;
     try {
       const userRepository = getRepository(User);
       const users = await userRepository.find();
@@ -111,6 +112,7 @@ class EmailAgent
                 ? `${applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`
                 : undefined,
               applicationUrl,
+              applicationTitle,
               requestType: 'Failed Request',
             },
           });
@@ -127,7 +129,7 @@ class EmailAgent
 
   private async sendMediaApprovedEmail(payload: NotificationPayload) {
     // This is getting main settings for the whole app
-    const applicationUrl = getSettings().main.applicationUrl;
+    const { applicationUrl, applicationTitle } = getSettings().main;
     try {
       const email = new PreparedEmail();
 
@@ -149,6 +151,7 @@ class EmailAgent
             ? `${applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`
             : undefined,
           applicationUrl,
+          applicationTitle,
           requestType: 'Request Approved',
         },
       });
@@ -164,7 +167,7 @@ class EmailAgent
 
   private async sendMediaDeclinedEmail(payload: NotificationPayload) {
     // This is getting main settings for the whole app
-    const applicationUrl = getSettings().main.applicationUrl;
+    const { applicationUrl, applicationTitle } = getSettings().main;
     try {
       const email = new PreparedEmail();
 
@@ -186,6 +189,7 @@ class EmailAgent
             ? `${applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`
             : undefined,
           applicationUrl,
+          applicationTitle,
           requestType: 'Request Declined',
         },
       });
@@ -201,7 +205,7 @@ class EmailAgent
 
   private async sendMediaAvailableEmail(payload: NotificationPayload) {
     // This is getting main settings for the whole app
-    const applicationUrl = getSettings().main.applicationUrl;
+    const { applicationUrl, applicationTitle } = getSettings().main;
     try {
       const email = new PreparedEmail();
 
@@ -223,6 +227,7 @@ class EmailAgent
             ? `${applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`
             : undefined,
           applicationUrl,
+          applicationTitle,
           requestType: 'Now Available',
         },
       });
@@ -238,7 +243,7 @@ class EmailAgent
 
   private async sendTestEmail(payload: NotificationPayload) {
     // This is getting main settings for the whole app
-    const applicationUrl = getSettings().main.applicationUrl;
+    const { applicationUrl, applicationTitle } = getSettings().main;
     try {
       const email = new PreparedEmail();
 
@@ -250,6 +255,7 @@ class EmailAgent
         locals: {
           body: payload.message,
           applicationUrl,
+          applicationTitle,
         },
       });
       return true;

server/lib/notifications/agents/pushover.ts

@@ -66,7 +66,7 @@ class PushoverAgent
         message += `<b>Status</b>\nProcessing Request\n`;
         break;
       case Notification.MEDIA_AVAILABLE:
-        messageTitle = 'Now available!';
+        messageTitle = 'Now Available';
         message += `${title}\n\n`;
         message += `${plot}\n\n`;
         message += `<b>Requested By</b>\n${username}\n\n`;
@@ -81,7 +81,6 @@ class PushoverAgent
         break;
       case Notification.TEST_NOTIFICATION:
         messageTitle = 'Test Notification';
-        message += `${title}\n\n`;
         message += `${plot}\n\n`;
         message += `<b>Requested By</b>\n${username}\n`;
         break;
@@ -89,7 +88,7 @@ class PushoverAgent
 
     if (settings.main.applicationUrl && payload.media) {
       const actionUrl = `${settings.main.applicationUrl}/${payload.media.mediaType}/${payload.media.tmdbId}`;
-      message += `<a href="${actionUrl}">Open in Overseerr</a>`;
+      message += `<a href="${actionUrl}">Open in ${settings.main.applicationTitle}</a>`;
     }
 
     return { title: messageTitle, message };

server/lib/notifications/agents/slack.ts

@@ -191,7 +191,7 @@ class SlackAgent
             value: 'open_overseerr',
             text: {
               type: 'plain_text',
-              text: 'Open Overseerr',
+              text: `Open ${settings.main.applicationTitle}`,
             },
           },
         ],

server/lib/notifications/agents/telegram.ts

@@ -98,7 +98,7 @@ class TelegramAgent
 
     if (settings.main.applicationUrl && payload.media) {
       const actionUrl = `${settings.main.applicationUrl}/${payload.media.mediaType}/${payload.media.tmdbId}`;
-      message += `\[Open in Overseerr\]\(${actionUrl}\)`;
+      message += `\[Open in ${settings.main.applicationTitle}\]\(${actionUrl}\)`;
     }
     /* eslint-enable */
 

server/templates/email/media-request/html.pug

@@ -54,7 +54,7 @@ div(role='article' aria-roledescription='email' aria-label='' lang='en')
               color: #a8aaaf;\
               text-decoration: none;\
               ')
-                | Overseerr
+                | #{applicationTitle}
           tr
             td(style='width: 100%' width='100%')
               table.sm-w-full(align='center' style='\
@@ -92,7 +92,7 @@ div(role='article' aria-roledescription='email' aria-label='' lang='en')
         margin-bottom: 20px;\
         color: #51545e;\
         ')
-          a(href=actionUrl style='color: #3869d4') Open Media in Overseerr
+          a(href=actionUrl style='color: #3869d4') Open in #{applicationTitle}
 tr
   td
     table.sm-w-full(align='center' style='\
@@ -111,4 +111,4 @@ tr
           text-align: center;\
           color: #a8aaaf;\
           ')
-            | Overseerr.
+            | #{applicationTitle}

server/templates/email/media-request/media-request.html

@@ -1,224 +0,0 @@
-<!DOCTYPE html>
-<html
-  lang="en"
-  xmlns:v="urn:schemas-microsoft-com:vml"
-  xmlns:o="urn:schemas-microsoft-com:office:office"
->
-  <head>
-    <meta charset="utf-8" />
-    <meta name="x-apple-disable-message-reformatting" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="format-detection"
-      content="telephone=no, date=no, address=no, email=no"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&amp;amp;display=swap"
-      rel="stylesheet"
-      media="screen"
-    />
-    <!--[if mso]>
-      <xml
-        ><o:OfficeDocumentSettings
-          ><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings
-        ></xml
-      >
-      <style>
-        td,
-        th,
-        div,
-        p,
-        a,
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          font-family: 'Segoe UI', sans-serif;
-          mso-line-height-rule: exactly;
-        }
-      </style>
-    <![endif]-->
-    <style>
-      @media (max-width: 600px) {
-        .sm-w-full {
-          width: 100% !important;
-        }
-      }
-    </style>
-  </head>
-
-  <body
-    style="
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      word-break: break-word;
-      -webkit-font-smoothing: antialiased;
-      background-color: #f2f4f6;
-    "
-  >
-    <div role="article" aria-roledescription="email" aria-label="" lang="en">
-      <table
-        style="
-          background-color: #f2f4f6;
-          font-family: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;
-          width: 100%;
-        "
-        width="100%"
-        bgcolor="#f2f4f6"
-        cellpadding="0"
-        cellspacing="0"
-        role="presentation"
-      >
-        <tr>
-          <td align="center">
-            <table
-              style="width: 100%"
-              width="100%"
-              cellpadding="0"
-              cellspacing="0"
-              role="presentation"
-            >
-              <tr>
-                <td
-                  align="center"
-                  style="
-                    font-size: 16px;
-                    padding-top: 25px;
-                    padding-bottom: 25px;
-                    text-align: center;
-                  "
-                >
-                  <a
-                    href="https://example.com"
-                    style="
-                      text-shadow: 0 1px 0 #ffffff;
-                      font-weight: 700;
-                      font-size: 16px;
-                      color: #a8aaaf;
-                      text-decoration: none;
-                    "
-                  >
-                    Overseerr
-                  </a>
-                </td>
-              </tr>
-              <tr>
-                <td style="width: 100%" width="100%">
-                  <table
-                    align="center"
-                    class="sm-w-full"
-                    style="
-                      background-color: #ffffff;
-                      margin-left: auto;
-                      margin-right: auto;
-                      width: 570px;
-                    "
-                    width="570"
-                    bgcolor="#ffffff"
-                    cellpadding="0"
-                    cellspacing="0"
-                    role="presentation"
-                  >
-                    <tr>
-                      <td style="padding: 45px">
-                        <div style="font-size: 16px">
-                          {{body}}
-                          <br />
-                          <br />
-                          <p style="margin-top: 4px; text-align: center">
-                            {{media_name}
-                          </p>
-                          <table
-                            cellpadding="0"
-                            cellspacing="0"
-                            role="presentation"
-                          >
-                            <tr>
-                              <td>
-                                <table
-                                  cellpadding="0"
-                                  cellspacing="0"
-                                  role="presentation"
-                                >
-                                  <img src="{{image_url}}" alt="" />
-                                  <p></p>
-                                </table>
-                              </td>
-                            </tr>
-                          </table>
-                        </div>
-                      </td>
-                    </tr>
-                  </table>
-                </td>
-              </tr>
-            </table>
-            <p
-              style="
-                font-size: 16px;
-                line-height: 24px;
-                margin-top: 6px;
-                margin-bottom: 20px;
-                color: #51545e;
-              "
-            >
-              Requested by {{requester_name}} at {{timestamp}}
-            </p>
-            <p
-              style="
-                font-size: 13px;
-                line-height: 24px;
-                margin-top: 6px;
-                margin-bottom: 20px;
-                color: #51545e;
-              "
-            >
-              <a href="{{action_url}}" style="color: #3869d4"
-                >Open detail page</a
-              >
-            </p>
-          </td>
-        </tr>
-      </table>
-    </div>
-    <tr>
-      <td>
-        <table
-          align="center"
-          class="sm-w-full"
-          style="
-            margin-left: auto;
-            margin-right: auto;
-            text-align: center;
-            width: 570px;
-          "
-          width="570"
-          cellpadding="0"
-          cellspacing="0"
-          role="presentation"
-        >
-          <tr>
-            <td align="center" style="font-size: 16px; padding: 45px">
-              <p
-                style="
-                  font-size: 13px;
-                  line-height: 24px;
-                  margin-top: 6px;
-                  margin-bottom: 20px;
-                  text-align: center;
-                  color: #a8aaaf;
-                "
-              >
-                Overseerr.
-              </p>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </body>
-</html>

server/templates/email/media-request/subject.pug

@@ -1 +1 @@
-= `${requestType}: ${mediaName} - Overseerr`
+= `${requestType}: ${mediaName} - ${applicationTitle}`

server/templates/email/password/html.pug

@@ -54,7 +54,7 @@ div(role='article' aria-roledescription='email' aria-label='' lang='en')
               color: #a8aaaf;\
               text-decoration: none;\
               ')
-                | Overseerr
+                | #{applicationTitle}
           tr
             td(style='width: 100%' width='100%')
               table.sm-w-full(align='center' style='\
@@ -76,7 +76,7 @@ div(role='article' aria-roledescription='email' aria-label='' lang='en')
         margin-bottom: 20px;\
         color: #51545e;\
         ')
-          a(href=applicationUrl style='color: #3869d4') Open Overseerr
+          a(href=applicationUrl style='color: #3869d4') Open #{applicationTitle}
 tr
   td
     table.sm-w-full(align='center' style='\
@@ -95,4 +95,4 @@ tr
           text-align: center;\
           color: #a8aaaf;\
           ')
-            | Overseerr.
+            | #{applicationTitle}

server/templates/email/password/subject.pug

@@ -1 +1 @@
-= `Password reset - Overseerr`
+= `Password Reset - ${applicationTitle}`

server/templates/email/test-email/html.pug

@@ -54,7 +54,7 @@ div(role='article' aria-roledescription='email' aria-label='' lang='en')
               color: #a8aaaf;\
               text-decoration: none;\
               ')
-                | Overseerr
+                | #{applicationTitle}
           tr
             td(style='width: 100%' width='100%')
               table.sm-w-full(align='center' style='\
@@ -74,7 +74,7 @@ div(role='article' aria-roledescription='email' aria-label='' lang='en')
         margin-bottom: 20px;\
         color: #51545e;\
         ')
-          a(href=applicationUrl style='color: #3869d4') Open Overseerr
+          a(href=applicationUrl style='color: #3869d4') Open #{applicationTitle}
 tr
   td
     table.sm-w-full(align='center' style='\
@@ -93,4 +93,4 @@ tr
           text-align: center;\
           color: #a8aaaf;\
           ')
-            | Overseerr.
+            | #{applicationTitle}

server/templates/email/test-email/subject.pug

@@ -1 +1 @@
-= `Test Notification - Overseerr`
+= `Test Notification - ${applicationTitle}`

src/components/Login/index.tsx

@@ -16,7 +16,7 @@ const messages = defineMessages({
   signin: 'Sign In',
   signinheader: 'Sign in to continue',
   signinwithplex: 'Use your Plex account',
-  signinwithoverseerr: 'Use your Overseerr account',
+  signinwithoverseerr: 'Use your {applicationTitle} account',
 });
 
 const Login: React.FC = () => {
@@ -154,7 +154,10 @@ const Login: React.FC = () => {
                         }`}
                         onClick={() => handleClick(1)}
                       >
-                        {intl.formatMessage(messages.signinwithoverseerr)}
+                        {intl.formatMessage(messages.signinwithoverseerr, {
+                          applicationTitle:
+                            settings.currentSettings.applicationTitle,
+                        })}
                       </button>
                       <AccordionContent isOpen={openIndexes.includes(1)}>
                         <div className="px-10 py-8">

src/i18n/locale/en.json

@@ -36,7 +36,7 @@
   "components.Login.signin": "Sign In",
   "components.Login.signingin": "Signing in…",
   "components.Login.signinheader": "Sign in to continue",
-  "components.Login.signinwithoverseerr": "Use your Overseerr account",
+  "components.Login.signinwithoverseerr": "Use your {applicationTitle} account",
   "components.Login.signinwithplex": "Use your Plex account",
   "components.Login.validationemailrequired": "Not a valid email address",
   "components.Login.validationpasswordrequired": "Password required",