fix(ui): Add tip & validation for Discord ID input (#966)

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

@@ -10,11 +10,15 @@ import Error from '../../../../pages/_error';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
 import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import * as Yup from 'yup';
 
 const messages = defineMessages({
   notificationsettings: 'Notification Settings',
   enableNotifications: 'Enable Notifications',
-  discordId: 'Discord ID',
+  discordId: 'Discord User ID',
+  discordIdTip:
+    'The <FindDiscordIdLink>18-digit ID number</FindDiscordIdLink> for your Discord user account',
+  validationDiscordId: 'You must provide a valid Discord user ID',
   save: 'Save Changes',
   saving: 'Saving…',
   plexuser: 'Plex User',
@@ -32,6 +36,12 @@ const UserNotificationSettings: React.FC = () => {
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 
+  const UserNotificationSettingsSchema = Yup.object().shape({
+    discordId: Yup.string()
+      .optional()
+      .matches(/^\d{18}$/, intl.formatMessage(messages.validationDiscordId)),
+  });
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -52,6 +62,7 @@ const UserNotificationSettings: React.FC = () => {
           enableNotifications: data?.enableNotifications,
           discordId: data?.discordId,
         }}
+        validationSchema={UserNotificationSettingsSchema}
         enableReinitialize
         onSubmit={async (values) => {
           try {
@@ -97,7 +108,23 @@ const UserNotificationSettings: React.FC = () => {
               </div>
               <div className="form-row">
                 <label htmlFor="discordId" className="text-label">
-                  {intl.formatMessage(messages.discordId)}
+                  <span>{intl.formatMessage(messages.discordId)}</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"
+                            className="text-gray-100 underline transition duration-300 hover:text-white"
+                          >
+                            {msg}
+                          </a>
+                        );
+                      },
+                    })}
+                  </span>
                 </label>
                 <div className="form-input">
                   <div className="flex max-w-lg rounded-md shadow-sm">

src/i18n/locale/en.json

@@ -676,6 +676,7 @@
   "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsFailure": "Something went wrong while saving settings.",
   "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsSuccess": "Settings successfully saved!",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordId": "Discord ID",
+  "components.UserProfile.UserSettings.UserNotificationSettings.discordIdTip": "The <FindDiscordIdLink>18-digit ID number</FindDiscordIdLink> for your Discord user account",
   "components.UserProfile.UserSettings.UserNotificationSettings.enableNotifications": "Enable Notifications",
   "components.UserProfile.UserSettings.UserNotificationSettings.localuser": "Local User",
   "components.UserProfile.UserSettings.UserNotificationSettings.notificationsettings": "Notification Settings",
@@ -684,6 +685,7 @@
   "components.UserProfile.UserSettings.UserNotificationSettings.saving": "Saving…",
   "components.UserProfile.UserSettings.UserNotificationSettings.toastSettingsFailure": "Something went wrong while saving settings.",
   "components.UserProfile.UserSettings.UserNotificationSettings.toastSettingsSuccess": "Settings successfully saved!",
+  "components.UserProfile.UserSettings.UserNotificationSettings.validationDiscordId": "You must provide a valid Discord user ID",
   "components.UserProfile.UserSettings.UserPasswordChange.confirmpassword": "Confirm Password",
   "components.UserProfile.UserSettings.UserPasswordChange.currentpassword": "Current Password",
   "components.UserProfile.UserSettings.UserPasswordChange.newpassword": "New Password",