⚖️ feat: Terms and Conditions Dialog (danny-avila#3712)

* Added UI for Terms and Conditions Modal Dialogue

* Handled the logout on not accepting

* Added logic for terms acceptance

* Add terms and conditions modal

* Fixed bug on terms and conditions modal, clicking out of it won't close it now

* Added acceptance of Terms to Database

* Removed unnecessary api endpoints from index.js

* Added NPM script to reset terms acceptance

* Added translations, markdown terms and samples

* Merged terms and conditions modal feature

* feat/Modal Terms and Conditions Dialog

* Amendments as requested by maintainers

* Reset package-lock (again)

Author: maxesse

api/models/schema/userSchema.js

@@ -122,7 +122,12 @@ const userSchema = mongoose.Schema(
       type: Date,
       expires: 604800, // 7 days in seconds
     },
+    termsAccepted: {
+      type: Boolean,
+      default: false,
+    },
   },
+
   { timestamps: true },
 );
 

api/server/controllers/UserController.js

@@ -8,6 +8,7 @@ const {
   deleteMessages,
   deleteUserById,
 } = require('~/models');
+const User = require('~/models/User');
 const { updateUserPluginAuth, deleteUserPluginAuth } = require('~/server/services/PluginService');
 const { updateUserPluginsService, deleteUserKey } = require('~/server/services/UserService');
 const { verifyEmail, resendVerificationEmail } = require('~/server/services/AuthService');
@@ -20,6 +21,32 @@ const getUserController = async (req, res) => {
   res.status(200).send(req.user);
 };
 
+const getTermsStatusController = async (req, res) => {
+  try {
+    const user = await User.findById(req.user.id);
+    if (!user) {
+      return res.status(404).json({ message: 'User not found' });
+    }
+    res.status(200).json({ termsAccepted: !!user.termsAccepted });
+  } catch (error) {
+    logger.error('Error fetching terms acceptance status:', error);
+    res.status(500).json({ message: 'Error fetching terms acceptance status' });
+  }
+};
+
+const acceptTermsController = async (req, res) => {
+  try {
+    const user = await User.findByIdAndUpdate(req.user.id, { termsAccepted: true }, { new: true });
+    if (!user) {
+      return res.status(404).json({ message: 'User not found' });
+    }
+    res.status(200).json({ message: 'Terms accepted successfully' });
+  } catch (error) {
+    logger.error('Error accepting terms:', error);
+    res.status(500).json({ message: 'Error accepting terms' });
+  }
+};
+
 const deleteUserFiles = async (req) => {
   try {
     const userFiles = await getFiles({ user: req.user.id });
@@ -135,6 +162,8 @@ const resendVerificationController = async (req, res) => {
 
 module.exports = {
   getUserController,
+  getTermsStatusController,
+  acceptTermsController,
   deleteUserController,
   verifyEmailController,
   updateUserPluginsController,

api/server/routes/user.js

@@ -6,11 +6,15 @@ const {
   verifyEmailController,
   updateUserPluginsController,
   resendVerificationController,
+  getTermsStatusController,
+  acceptTermsController,
 } = require('~/server/controllers/UserController');
 
 const router = express.Router();
 
 router.get('/', requireJwtAuth, getUserController);
+router.get('/terms', requireJwtAuth, getTermsStatusController);
+router.post('/terms/accept', requireJwtAuth, acceptTermsController);
 router.post('/plugins', requireJwtAuth, updateUserPluginsController);
 router.delete('/delete', requireJwtAuth, canDeleteAccount, deleteUserController);
 router.post('/verify', verifyEmailController);

client/src/components/ui/TermsAndConditionsModal.tsx

@@ -0,0 +1,92 @@
+import { useLocalize } from '~/hooks';
+import { OGDialog } from '~/components/ui';
+import DialogTemplate from '~/components/ui/DialogTemplate';
+import { useAuthContext } from '~/hooks';
+import Markdown from '~/components/Chat/Messages/Content/Markdown';
+import { useToastContext } from '~/Providers';
+import { useAcceptTermsMutation } from '~/data-provider';
+
+const TermsAndConditionsModal = ({
+  open,
+  onOpenChange,
+  onAccept,
+  onDecline,
+  title,
+  modalContent,
+}: {
+  open: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onAccept: () => void;
+  onDecline: () => void;
+  title?: string;
+  contentUrl?: string;
+  modalContent?: string;
+}) => {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const acceptTermsMutation = useAcceptTermsMutation({
+    onSuccess: () => {
+      onAccept();
+      onOpenChange(false);
+    },
+    onError: () => {
+      showToast({ message: 'Failed to accept terms' });
+    },
+  });
+
+  const handleAccept = () => {
+    acceptTermsMutation.mutate();
+  };
+
+  const handleDecline = () => {
+    onDecline();
+    onOpenChange(false);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (open && !isOpen) {
+      return;
+    }
+    onOpenChange(isOpen);
+  };
+
+  return (
+    <OGDialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTemplate
+        title={title ?? localize('com_ui_terms_and_conditions')}
+        className="w-11/12 max-w-3xl sm:w-3/4 md:w-1/2 lg:w-2/5"
+        showCloseButton={false}
+        showCancelButton={false}
+        main={
+          <div className="max-h-[60vh] overflow-y-auto p-4">
+            <div className="prose dark:prose-invert w-full max-w-none !text-black dark:!text-white">
+              {modalContent ? (
+                <Markdown content={modalContent} isLatestMessage={false} />
+              ) : (
+                <p>{localize('com_ui_no_terms_content')}</p>
+              )}
+            </div>
+          </div>
+        }
+        buttons={
+          <>
+            <button
+              onClick={handleDecline}
+              className="border-border-none bg-surface-500 dark:hover:bg-surface-600 inline-flex h-10 items-center justify-center rounded-lg px-4 py-2 text-sm text-white hover:bg-gray-600"
+            >
+              {localize('com_ui_decline')}
+            </button>
+            <button
+              onClick={handleAccept}
+              className="border-border-none bg-surface-500 inline-flex h-10 items-center justify-center rounded-lg px-4 py-2 text-sm text-white hover:bg-green-600 dark:hover:bg-green-600"
+            >
+              {localize('com_ui_accept')}
+            </button>
+          </>
+        }
+      />
+    </OGDialog>
+  );
+};
+
+export default TermsAndConditionsModal;

client/src/data-provider/mutations.ts

@@ -1128,3 +1128,19 @@ export const useResendVerificationEmail = (
     ...(options || {}),
   });
 };
+
+export const useAcceptTermsMutation = (
+  options?: t.AcceptTermsMutationOptions,
+): UseMutationResult<t.TAcceptTermsResponse, unknown, void, unknown> => {
+  const queryClient = useQueryClient();
+  return useMutation(() => dataService.acceptTerms(), {
+    onSuccess: (data, variables, context) => {
+      queryClient.setQueryData<t.TUserTermsResponse>([QueryKeys.userTerms], {
+        termsAccepted: true,
+      });
+      options?.onSuccess?.(data, variables, context);
+    },
+    onError: options?.onError,
+    onMutate: options?.onMutate,
+  });
+};

client/src/data-provider/queries.ts

@@ -28,6 +28,8 @@ import type {
   TCheckUserKeyResponse,
   SharedLinkListParams,
   SharedLinksResponse,
+  TUserTermsResponse,
+  TAcceptTermsResponse,
 } from 'librechat-data-provider';
 import { findPageForConversation, addFileToCache } from '~/utils';
 
@@ -564,3 +566,14 @@ export const useGetRandomPrompts = (
     },
   );
 };
+
+export const useUserTermsQuery = (
+  config?: UseQueryOptions<t.TUserTermsResponse>,
+): QueryObserverResult<t.TUserTermsResponse> => {
+  return useQuery<t.TUserTermsResponse>([QueryKeys.userTerms], () => dataService.getUserTerms(), {
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    ...config,
+  });
+};

client/src/localization/languages/Ar.ts

@@ -485,6 +485,10 @@ export default {
   com_ui_terms_of_service: 'شروط الخدمة',
   com_ui_min_tags: 'لا يمكن إزالة المزيد من القيم، الحد الأدنى المطلوب هو {0}.',
   com_ui_max_tags: 'الحد الأقصى المسموح به هو {0}، باستخدام أحدث القيم.',
+  com_ui_accept: 'أوافق',
+  com_ui_decline: 'لا أوافق',
+  com_ui_terms_and_conditions: 'شروط الخدمة',
+  com_ui_no_terms_content: 'لا يوجد محتوى لشروط الخدمة',
   com_auth_back_to_login: 'العودة إلى تسجيل الدخول',
   com_endpoint_message: 'رسالة',
   com_endpoint_message_not_appendable: 'عدّل رسالتك أو أعد إنشاءها.',

client/src/localization/languages/Br.ts

@@ -183,6 +183,10 @@ export default {
   com_ui_bookmarks_update_error: 'Houve um erro ao atualizar o favorito',
   com_ui_bookmarks_delete_error: 'Houve um erro ao excluir o favorito',
   com_ui_bookmarks_add_to_conversation: 'Adicionar à conversa atual',
+  com_ui_accept: 'Eu aceito',
+  com_ui_decline: 'Eu não aceito',
+  com_ui_terms_and_conditions: 'Termos e Condições',
+  com_ui_no_terms_content: 'Nenhum conteúdo de termos e condições para exibir',
   com_auth_error_login:
     'Não foi possível fazer login com as informações fornecidas. Por favor, verifique suas credenciais e tente novamente.',
   com_auth_error_login_rl:

client/src/localization/languages/De.ts

@@ -326,6 +326,10 @@ export default {
   com_ui_bookmarks_delete_error: 'Beim Löschen des Lesezeichens ist ein Fehler aufgetreten',
   com_ui_bookmarks_add_to_conversation: 'Zur aktuellen Konversation hinzufügen',
   com_ui_bookmarks_filter: 'Lesezeichen filtern...',
+  com_ui_accept: 'Ich akzeptiere',
+  com_ui_decline: 'Ich akzeptiere nicht',
+  com_ui_terms_and_conditions: 'Allgemeine Geschäftsbedingungen',
+  com_ui_no_terms_content: 'Keine Inhalte der Allgemeinen Geschäftsbedingungen zum Anzeigen',
   com_auth_error_login:
     'Anmeldung mit den angegebenen Informationen nicht möglich. Bitte überprüfe deine Anmeldedaten und versuche es erneut.',
   com_auth_error_login_rl:

client/src/localization/languages/Eng.ts

@@ -771,4 +771,8 @@ export default {
   com_nav_lang_indonesia: 'Indonesia',
   com_nav_lang_hebrew: 'עברית',
   com_nav_lang_finnish: 'Suomi',
+  com_ui_accept: 'I accept',
+  com_ui_decline: 'I do not accept',
+  com_ui_terms_and_conditions: 'Terms and Conditions',
+  com_ui_no_terms_content: 'No terms and conditions content to display',
 };