fix(ui): hide alert when email notifs are already configured (#1335)

* fix(ui): hide alert when email notifs are already configured

* fix(ui): disable instead of hide checkbox

* fix: determine if email notifications are enabled via user settings endpoint

src/components/UserList/index.tsx

@@ -8,6 +8,7 @@ import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
 import type { UserResultsResponse } from '../../../server/interfaces/api/userInterfaces';
+import { UserSettingsNotificationsResponse } from '../../../server/interfaces/api/userSettingsInterfaces';
 import { hasPermission } from '../../../server/lib/permissions';
 import AddUserIcon from '../../assets/useradd.svg';
 import { useUpdateQueryParams } from '../../hooks/useUpdateQueryParams';
@@ -46,7 +47,7 @@ const messages = defineMessages({
   userdeleted: 'User deleted successfully!',
   userdeleteerror: 'Something went wrong while deleting the user.',
   deleteconfirm:
-    'Are you sure you want to delete this user? All existing request data from this user will be removed.',
+    'Are you sure you want to delete this user? All of their request data will be permanently removed.',
   localuser: 'Local User',
   createlocaluser: 'Create Local User',
   createuser: 'Create User',
@@ -59,8 +60,8 @@ const messages = defineMessages({
   email: 'Email Address',
   password: 'Password',
   passwordinfodescription:
-    'Email notifications need to be configured and enabled in order to automatically generate passwords.',
-  autogeneratepassword: 'Automatically generate password',
+    'Enable email notifications to allow automatic password generation.',
+  autogeneratepassword: 'Automatically Generate Password',
   validationEmail: 'You must provide a valid email address',
   sortCreated: 'Creation Date',
   sortUpdated: 'Last Updated',
@@ -74,6 +75,7 @@ const UserList: React.FC = () => {
   const intl = useIntl();
   const router = useRouter();
   const { addToast } = useToasts();
+  const { user: currentUser, hasPermission: currentHasPermission } = useUser();
   const [currentSort, setCurrentSort] = useState<Sort>('created');
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
 
@@ -86,6 +88,13 @@ const UserList: React.FC = () => {
       pageIndex * currentPageSize
     }&sort=${currentSort}`
   );
+  const {
+    data: notificationSettings,
+  } = useSWR<UserSettingsNotificationsResponse>(
+    currentUser
+      ? `/api/v1/user/${currentUser?.id}/settings/notifications`
+      : null
+  );
 
   const [isDeleting, setDeleting] = useState(false);
   const [isImporting, setImporting] = useState(false);
@@ -102,7 +111,6 @@ const UserList: React.FC = () => {
   });
   const [showBulkEditModal, setShowBulkEditModal] = useState(false);
   const [selectedUsers, setSelectedUsers] = useState<number[]>([]);
-  const { user: currentUser, hasPermission: currentHasPermission } = useUser();
 
   useEffect(() => {
     const filterString = window.localStorage.getItem('ul-filter-settings');
@@ -290,7 +298,7 @@ const UserList: React.FC = () => {
           initialValues={{
             email: '',
             password: '',
-            genpassword: true,
+            genpassword: false,
           }}
           validationSchema={CreateUserSchema}
           onSubmit={async (values) => {
@@ -337,9 +345,12 @@ const UserList: React.FC = () => {
                 okButtonType="primary"
                 onCancel={() => setCreateModal({ isOpen: false })}
               >
-                <Alert
-                  title={intl.formatMessage(messages.passwordinfodescription)}
-                />
+                {!notificationSettings?.emailEnabled && (
+                  <Alert
+                    title={intl.formatMessage(messages.passwordinfodescription)}
+                    type="info"
+                  />
+                )}
                 <Form className="section">
                   <div className="form-row">
                     <label htmlFor="email" className="text-label">
@@ -359,7 +370,11 @@ const UserList: React.FC = () => {
                       )}
                     </div>
                   </div>
-                  <div className="form-row">
+                  <div
+                    className={`form-row ${
+                      !notificationSettings?.emailEnabled && 'opacity-50'
+                    }`}
+                  >
                     <label htmlFor="genpassword" className="checkbox-label">
                       {intl.formatMessage(messages.autogeneratepassword)}
                     </label>
@@ -368,6 +383,7 @@ const UserList: React.FC = () => {
                         type="checkbox"
                         id="genpassword"
                         name="genpassword"
+                        disabled={!notificationSettings?.emailEnabled}
                         onClick={() => setFieldValue('password', '')}
                       />
                     </div>

src/i18n/locale/en.json

@@ -645,14 +645,14 @@
   "components.TvDetails.watchtrailer": "Watch Trailer",
   "components.UserList.accounttype": "Account Type",
   "components.UserList.admin": "Admin",
-  "components.UserList.autogeneratepassword": "Automatically generate password",
+  "components.UserList.autogeneratepassword": "Automatically Generate Password",
   "components.UserList.bulkedit": "Bulk Edit",
   "components.UserList.create": "Create",
   "components.UserList.created": "Created",
   "components.UserList.createlocaluser": "Create Local User",
   "components.UserList.createuser": "Create User",
   "components.UserList.creating": "Creating…",
-  "components.UserList.deleteconfirm": "Are you sure you want to delete this user? All existing request data from this user will be removed.",
+  "components.UserList.deleteconfirm": "Are you sure you want to delete this user? All of their request data will be permanently removed.",
   "components.UserList.deleteuser": "Delete User",
   "components.UserList.edituser": "Edit User Permissions",
   "components.UserList.email": "Email Address",
@@ -664,7 +664,7 @@
   "components.UserList.nouserstoimport": "No new users to import from Plex.",
   "components.UserList.owner": "Owner",
   "components.UserList.password": "Password",
-  "components.UserList.passwordinfodescription": "Email notifications need to be configured and enabled in order to automatically generate passwords.",
+  "components.UserList.passwordinfodescription": "Enable email notifications to allow automatic password generation.",
   "components.UserList.plexuser": "Plex User",
   "components.UserList.role": "Role",
   "components.UserList.sortCreated": "Creation Date",