fix: add Discord ID setting to general user settings page (#2406)

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
+import * as Yup from 'yup';
 import { UserSettingsGeneralResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import {
   availableLanguages,
@@ -46,6 +47,10 @@ const messages = defineMessages({
   enableOverride: 'Override Global Limit',
   applanguage: 'Display Language',
   languageDefault: 'Default ({language})',
+  discordId: 'Discord User ID',
+  discordIdTip:
+    'The <FindDiscordIdLink>multi-digit ID number</FindDiscordIdLink> associated with your Discord user account',
+  validationDiscordId: 'You must provide a valid Discord user ID',
 });
 
 const UserGeneralSettings: React.FC = () => {
@@ -72,6 +77,12 @@ const UserGeneralSettings: React.FC = () => {
     user ? `/api/v1/user/${user?.id}/settings/main` : null
   );
 
+  const UserGeneralSettingsSchema = Yup.object().shape({
+    discordId: Yup.string()
+      .nullable()
+      .matches(/^\d{17,18}$/, intl.formatMessage(messages.validationDiscordId)),
+  });
+
   useEffect(() => {
     setMovieQuotaEnabled(
       data?.movieQuotaLimit != undefined && data?.movieQuotaDays != undefined
@@ -104,8 +115,9 @@ const UserGeneralSettings: React.FC = () => {
       </div>
       <Formik
         initialValues={{
-          locale: data?.locale,
           displayName: data?.username,
+          discordId: data?.discordId,
+          locale: data?.locale,
           region: data?.region,
           originalLanguage: data?.originalLanguage,
           movieQuotaLimit: data?.movieQuotaLimit,
@@ -113,11 +125,14 @@ const UserGeneralSettings: React.FC = () => {
           tvQuotaLimit: data?.tvQuotaLimit,
           tvQuotaDays: data?.tvQuotaDays,
         }}
+        validationSchema={UserGeneralSettingsSchema}
         enableReinitialize
         onSubmit={async (values) => {
           try {
             await axios.post(`/api/v1/user/${user?.id}/settings/main`, {
               username: values.displayName,
+              discordId: values.discordId,
+              locale: values.locale,
               region: values.region,
               originalLanguage: values.originalLanguage,
               movieQuotaLimit: movieQuotaEnabled
@@ -126,7 +141,6 @@ const UserGeneralSettings: React.FC = () => {
               movieQuotaDays: movieQuotaEnabled ? values.movieQuotaDays : null,
               tvQuotaLimit: tvQuotaEnabled ? values.tvQuotaLimit : null,
               tvQuotaDays: tvQuotaEnabled ? values.tvQuotaDays : null,
-              locale: values.locale,
             });
 
             if (currentUser?.id === user?.id && setLocale) {
@@ -152,7 +166,14 @@ const UserGeneralSettings: React.FC = () => {
           }
         }}
       >
-        {({ errors, touched, isSubmitting, values, setFieldValue }) => {
+        {({
+          errors,
+          touched,
+          isSubmitting,
+          isValid,
+          values,
+          setFieldValue,
+        }) => {
           return (
             <Form className="section">
               <div className="form-row">
@@ -207,6 +228,36 @@ const UserGeneralSettings: React.FC = () => {
                   )}
                 </div>
               </div>
+              <div className="form-row">
+                <label htmlFor="discordId" className="text-label">
+                  {intl.formatMessage(messages.discordId)}
+                  {currentUser?.id === user?.id && (
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.discordIdTip, {
+                        FindDiscordIdLink: function FindDiscordIdLink(msg) {
+                          return (
+                            <a
+                              href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              {msg}
+                            </a>
+                          );
+                        },
+                      })}
+                    </span>
+                  )}
+                </label>
+                <div className="form-input">
+                  <div className="form-input-field">
+                    <Field id="discordId" name="discordId" type="text" />
+                  </div>
+                  {errors.discordId && touched.discordId && (
+                    <div className="error">{errors.discordId}</div>
+                  )}
+                </div>
+              </div>
               <div className="form-row">
                 <label htmlFor="locale" className="text-label">
                   {intl.formatMessage(messages.applanguage)}
@@ -364,7 +415,7 @@ const UserGeneralSettings: React.FC = () => {
                     <Button
                       buttonType="primary"
                       type="submit"
-                      disabled={isSubmitting}
+                      disabled={isSubmitting || !isValid}
                     >
                       <SaveIcon />
                       <span>

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx

@@ -19,7 +19,7 @@ const messages = defineMessages({
   discordsettingsfailed: 'Discord notification settings failed to save.',
   discordId: 'User ID',
   discordIdTip:
-    'The <FindDiscordIdLink>ID number</FindDiscordIdLink> for your user account',
+    'The <FindDiscordIdLink>multi-digit ID number</FindDiscordIdLink> associated with your user account',
   validationDiscordId: 'You must provide a valid user ID',
 });
 
@@ -28,6 +28,7 @@ const UserNotificationsDiscord: React.FC = () => {
   const { addToast } = useToasts();
   const router = useRouter();
   const { user } = useUser({ id: Number(router.query.userId) });
+  const { user: currentUser } = useUser();
   const {
     data,
     error,
@@ -107,21 +108,23 @@ const UserNotificationsDiscord: React.FC = () => {
                 {!!data?.discordEnabledTypes && (
                   <span className="label-required">*</span>
                 )}
-                <span className="label-tip">
-                  {intl.formatMessage(messages.discordIdTip, {
-                    FindDiscordIdLink: function FindDiscordIdLink(msg) {
-                      return (
-                        <a
-                          href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                          {msg}
-                        </a>
-                      );
-                    },
-                  })}
-                </span>
+                {currentUser?.id === user?.id && (
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.discordIdTip, {
+                      FindDiscordIdLink: function FindDiscordIdLink(msg) {
+                        return (
+                          <a
+                            href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {msg}
+                          </a>
+                        );
+                      },
+                    })}
+                  </span>
+                )}
               </label>
               <div className="form-input">
                 <div className="form-input-field">

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -65,6 +65,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       ),
       route: '/settings/notifications/discord',
       regex: /\/settings\/notifications\/discord/,
+      hidden: !data?.discordEnabled,
     },
     {
       text: 'Pushbullet',

src/components/UserProfile/UserSettings/index.tsx

@@ -67,7 +67,9 @@ const UserSettings: React.FC = ({ children }) => {
         ? '/settings/notifications/email'
         : data?.webPushEnabled
         ? '/settings/notifications/webpush'
-        : '/settings/notifications/discord',
+        : data?.discordEnabled
+        ? '/settings/notifications/discord'
+        : '/settings/notifications/pushbullet',
       regex: /\/settings\/notifications/,
     },
     {