feat(email): add sendername to email notification (#506)

* feat(email): add sendername to email notification

* feat(email): add sendername to api + move field in form

Co-authored-by: Jakob Ankarhem <jakob.ankarhem@jetshop.se>

overseerr-api.yml

@@ -886,6 +886,9 @@ components:
             emailFrom:
               type: string
               example: no-reply@example.com
+            senderName:
+              type: string
+              example: Overseerr
             smtpHost:
               type: string
               example: 127.0.0.1

server/lib/notifications/agents/email.ts

@@ -60,7 +60,10 @@ class EmailAgent
     const settings = this.getSettings();
     return new Email({
       message: {
-        from: settings.options.emailFrom,
+        from: {
+          name: settings.options.senderName,
+          address: settings.options.emailFrom,
+        },
       },
       send: true,
       transport: this.getSmtpTransport(),

server/lib/settings.ts

@@ -81,6 +81,7 @@ export interface NotificationAgentEmail extends NotificationAgentConfig {
     authUser?: string;
     authPass?: string;
     allowSelfSigned: boolean;
+    senderName: string;
   };
 }
 
@@ -148,6 +149,7 @@ class Settings {
               smtpPort: 587,
               secure: false,
               allowSelfSigned: false,
+              senderName: 'Overseerr',
             },
           },
           discord: {

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -28,6 +28,7 @@ const messages = defineMessages({
   allowselfsigned: 'Allow Self-Signed Certificates',
   ssldisabletip:
     'SSL should be disabled on standard TLS connections (Port 587)',
+  senderName: 'Sender Name',
 });
 
 const NotificationsEmail: React.FC = () => {
@@ -65,6 +66,7 @@ const NotificationsEmail: React.FC = () => {
         authUser: data.options.authUser,
         authPass: data.options.authPass,
         allowSelfSigned: data.options.allowSelfSigned,
+        senderName: data.options.senderName,
       }}
       validationSchema={NotificationsEmailSchema}
       onSubmit={async (values) => {
@@ -80,6 +82,7 @@ const NotificationsEmail: React.FC = () => {
               authUser: values.authUser,
               authPass: values.authPass,
               allowSelfSigned: values.allowSelfSigned,
+              senderName: values.senderName,
             },
           });
           addToast(intl.formatMessage(messages.emailsettingssaved), {
@@ -108,6 +111,7 @@ const NotificationsEmail: React.FC = () => {
               secure: values.secure,
               authUser: values.authUser,
               authPass: values.authPass,
+              senderName: values.senderName,
             },
           });
 
@@ -157,6 +161,25 @@ const NotificationsEmail: React.FC = () => {
                 )}
               </div>
             </div>
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+              <label
+                htmlFor="senderName"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+              >
+                {intl.formatMessage(messages.senderName)}
+              </label>
+              <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="flex max-w-lg rounded-md shadow-sm">
+                  <Field
+                    id="senderName"
+                    name="senderName"
+                    placeholder="Overseerr"
+                    type="text"
+                    className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                  />
+                </div>
+              </div>
+            </div>
             <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
               <label
                 htmlFor="smtpHost"

src/i18n/locale/en.json

@@ -132,6 +132,7 @@
   "components.Settings.Notifications.saving": "Saving…",
   "components.Settings.Notifications.settinguptelegram": "Setting up Telegram Notifications",
   "components.Settings.Notifications.settinguptelegramDescription": "To setup Telegram you need to <CreateBotLink>create a bot</CreateBotLink> and get the bot API key.    Additionally, you need the chat id for the chat you want the bot to send notifications to.    You can do this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat or group chat.",
+  "components.Settings.Notifications.senderName": "Sender Name",
   "components.Settings.Notifications.smtpHost": "SMTP Host",
   "components.Settings.Notifications.smtpPort": "SMTP Port",
   "components.Settings.Notifications.ssldisabletip": "SSL should be disabled on standard TLS connections (Port 587)",