fix: check that application URL and email agent are configured for password reset/generation (#1724)

* fix: check that application URL and email agent are configured for password reset/generation

* refactor: reverse flex direction instead of conditionally changing justify

server/interfaces/api/settingsInterfaces.ts

@@ -22,6 +22,7 @@ export interface SettingsAboutResponse {
 export interface PublicSettingsResponse {
   initialized: boolean;
   applicationTitle: string;
+  applicationUrl: string;
   hideAvailable: boolean;
   localLogin: boolean;
   movie4kEnabled: boolean;
@@ -33,6 +34,7 @@ export interface PublicSettingsResponse {
   vapidPublic: string;
   enablePushRegistration: boolean;
   locale: string;
+  emailEnabled: boolean;
 }
 
 export interface CacheItem {

server/lib/settings.ts

@@ -98,6 +98,7 @@ interface PublicSettings {
 
 interface FullPublicSettings extends PublicSettings {
   applicationTitle: string;
+  applicationUrl: string;
   hideAvailable: boolean;
   localLogin: boolean;
   movie4kEnabled: boolean;
@@ -109,6 +110,7 @@ interface FullPublicSettings extends PublicSettings {
   vapidPublic: string;
   enablePushRegistration: boolean;
   locale: string;
+  emailEnabled: boolean;
 }
 
 export interface NotificationAgentConfig {
@@ -396,6 +398,7 @@ class Settings {
     return {
       ...this.data.public,
       applicationTitle: this.data.main.applicationTitle,
+      applicationUrl: this.data.main.applicationUrl,
       hideAvailable: this.data.main.hideAvailable,
       localLogin: this.data.main.localLogin,
       movie4kEnabled: this.data.radarr.some(
@@ -411,6 +414,7 @@ class Settings {
       vapidPublic: this.vapidPublic,
       enablePushRegistration: this.data.notifications.agents.webpush.enabled,
       locale: this.data.main.locale,
+      emailEnabled: this.data.notifications.agents.email.enabled,
     };
   }
 

src/components/Login/LocalLogin.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
+import useSettings from '../../hooks/useSettings';
 import Button from '../Common/Button';
 import SensitiveInput from '../Common/SensitiveInput';
 
@@ -25,6 +26,7 @@ interface LocalLoginProps {
 
 const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
   const intl = useIntl();
+  const settings = useSettings();
   const [loginError, setLoginError] = useState<string | null>(null);
 
   const LoginSchema = Yup.object().shape({
@@ -36,6 +38,10 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
     ),
   });
 
+  const passwordResetEnabled =
+    settings.currentSettings.applicationUrl &&
+    settings.currentSettings.emailEnabled;
+
   return (
     <Formik
       initialValues={{
@@ -60,7 +66,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
         return (
           <>
             <Form>
-              <div className="sm:border-t sm:border-gray-800">
+              <div>
                 <label htmlFor="email" className="text-label">
                   {intl.formatMessage(messages.email)}
                 </label>
@@ -101,17 +107,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                 )}
               </div>
               <div className="pt-5 mt-8 border-t border-gray-700">
-                <div className="flex justify-between">
-                  <span className="inline-flex rounded-md shadow-sm">
-                    <Link href="/resetpassword" passHref>
-                      <Button as="a" buttonType="ghost">
-                        <SupportIcon />
-                        <span>
-                          {intl.formatMessage(messages.forgotpassword)}
-                        </span>
-                      </Button>
-                    </Link>
-                  </span>
+                <div className="flex flex-row-reverse justify-between">
                   <span className="inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
@@ -126,6 +122,18 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                       </span>
                     </Button>
                   </span>
+                  {passwordResetEnabled && (
+                    <span className="inline-flex rounded-md shadow-sm">
+                      <Link href="/resetpassword" passHref>
+                        <Button as="a" buttonType="ghost">
+                          <SupportIcon />
+                          <span>
+                            {intl.formatMessage(messages.forgotpassword)}
+                          </span>
+                        </Button>
+                      </Link>
+                    </span>
+                  )}
                 </div>
               </div>
             </Form>

src/components/ResetPassword/RequestResetLink.tsx

@@ -94,7 +94,7 @@ const ResetPassword: React.FC = () => {
                 {({ errors, touched, isSubmitting, isValid }) => {
                   return (
                     <Form>
-                      <div className="sm:border-t sm:border-gray-800">
+                      <div>
                         <label
                           htmlFor="email"
                           className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"

src/components/ResetPassword/index.tsx

@@ -108,7 +108,7 @@ const ResetPassword: React.FC = () => {
                 {({ errors, touched, isSubmitting, isValid }) => {
                   return (
                     <Form>
-                      <div className="sm:border-t sm:border-gray-800">
+                      <div>
                         <label
                           htmlFor="password"
                           className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -3,7 +3,7 @@ import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
-import useSWR from 'swr';
+import useSWR, { mutate } from 'swr';
 import * as Yup from 'yup';
 import globalMessages from '../../../i18n/globalMessages';
 import Badge from '../../Common/Badge';
@@ -159,6 +159,7 @@ const NotificationsEmail: React.FC = () => {
               pgpPassword: values.pgpPassword,
             },
           });
+          mutate('/api/v1/settings/public');
 
           addToast(intl.formatMessage(messages.emailsettingssaved), {
             appearance: 'success',

src/components/UserList/index.tsx

@@ -15,7 +15,6 @@ 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 useSettings from '../../hooks/useSettings';
 import { useUpdateQueryParams } from '../../hooks/useUpdateQueryParams';
@@ -70,7 +69,7 @@ const messages = defineMessages({
   email: 'Email Address',
   password: 'Password',
   passwordinfodescription:
-    'Enable email notifications to allow automatic password generation.',
+    'Configure an application URL and enable email notifications to allow automatic password generation.',
   autogeneratepassword: 'Automatically Generate Password',
   autogeneratepasswordTip: 'Email a server-generated password to the user',
   validationEmail: 'You must provide a valid email address',
@@ -102,12 +101,6 @@ 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);
@@ -254,6 +247,10 @@ const UserList: React.FC = () => {
   const hasNextPage = data.pageInfo.pages > pageIndex + 1;
   const hasPrevPage = pageIndex > 0;
 
+  const passwordGenerationEnabled =
+    settings.currentSettings.applicationUrl &&
+    settings.currentSettings.emailEnabled;
+
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.users)} />
@@ -366,12 +363,15 @@ const UserList: React.FC = () => {
                     type="warning"
                   />
                 )}
-                {!notificationSettings?.emailEnabled && (
-                  <Alert
-                    title={intl.formatMessage(messages.passwordinfodescription)}
-                    type="info"
-                  />
-                )}
+                {currentHasPermission(Permission.MANAGE_SETTINGS) &&
+                  !passwordGenerationEnabled && (
+                    <Alert
+                      title={intl.formatMessage(
+                        messages.passwordinfodescription
+                      )}
+                      type="info"
+                    />
+                  )}
                 <Form className="section">
                   <div className="form-row">
                     <label htmlFor="displayName" className="text-label">
@@ -408,7 +408,7 @@ const UserList: React.FC = () => {
                   </div>
                   <div
                     className={`form-row ${
-                      notificationSettings?.emailEnabled ? '' : 'opacity-50'
+                      passwordGenerationEnabled ? '' : 'opacity-50'
                     }`}
                   >
                     <label htmlFor="genpassword" className="checkbox-label">
@@ -422,7 +422,7 @@ const UserList: React.FC = () => {
                         type="checkbox"
                         id="genpassword"
                         name="genpassword"
-                        disabled={!notificationSettings?.emailEnabled}
+                        disabled={!passwordGenerationEnabled}
                         onClick={() => setFieldValue('password', '')}
                       />
                     </div>

src/context/SettingsContext.tsx

@@ -9,6 +9,7 @@ export interface SettingsContextProps {
 const defaultSettings = {
   initialized: false,
   applicationTitle: 'Overseerr',
+  applicationUrl: '',
   hideAvailable: false,
   localLogin: true,
   movie4kEnabled: false,
@@ -20,6 +21,7 @@ const defaultSettings = {
   vapidPublic: '',
   enablePushRegistration: false,
   locale: 'en',
+  emailEnabled: false,
 };
 
 export const SettingsContext = React.createContext<SettingsContextProps>({

src/i18n/locale/en.json

@@ -723,7 +723,7 @@
   "components.UserList.nouserstoimport": "No new users to import from Plex.",
   "components.UserList.owner": "Owner",
   "components.UserList.password": "Password",
-  "components.UserList.passwordinfodescription": "Enable email notifications to allow automatic password generation.",
+  "components.UserList.passwordinfodescription": "Configure an application URL and enable email notifications to allow automatic password generation.",
   "components.UserList.plexuser": "Plex User",
   "components.UserList.role": "Role",
   "components.UserList.sortCreated": "Creation Date",

src/pages/_app.tsx

@@ -148,6 +148,7 @@ CoreApp.getInitialProps = async (initialProps) => {
   let currentSettings: PublicSettingsResponse = {
     initialized: false,
     applicationTitle: '',
+    applicationUrl: '',
     hideAvailable: false,
     movie4kEnabled: false,
     series4kEnabled: false,
@@ -159,6 +160,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     vapidPublic: '',
     enablePushRegistration: false,
     locale: 'en',
+    emailEnabled: false,
   };
 
   if (ctx.res) {