Enhancement: Acceptance of Terms and Privacy Policy on First Login

[derhelge]

What features would you like to see added?

It would be beneficial to introduce an intermediate step upon the first login where users must accept the Terms of Service and Privacy Policy before they can use the service. This acceptance should be stored in the database. Also, the feature should be configurable via variables in the configuration file to allow optional activation.

More details

• Without accepting the Terms of Service and Privacy Policy, the user should not be able to access the main functionalities of the service.
• When a user account is deleted, the related acceptance entries must also be removed from the database.
• This feature would ensure that all users actively accept the Terms of Service and Privacy Policy, enhancing both compliance and user awareness.

Which components are impacted by your request?

General, UI

Pictures

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[maxesse]

I actually implemented this myself, but I don't feel ready to send a pull request because it's only using LocalStorage rather than the database as I didn't have time to add the routes to store it in Mongo. It works well though, if you don't accept it logs you out, otherwise you get to use it (until you change browser or device).

[danny-avila]

Maybe we can make this a more general feature to have popups on login/first time use/etc.?

[derhelge]

Aweseome @maxesse

@danny-avila a more general approach would be nice. Maybe it helps to have a first impression from @maxesse solution?

[maxesse]

Next week I'm gonna tidy it up, put the text in some .env variables, and see if I can add the route to store the acceptance in the db, and I'll do a pull request if you want. If @danny-avila prefers to take it over I can also just paste here the component.

[derhelge]

Awesome! Thank you all.

@maxesse @danny-avila Maybe i am wrong but the buttons in the modal are only colored while hover. Maybe samething like this?

diff --git a/client/src/components/ui/TermsAndConditionsModal.tsx b/client/src/components/ui/TermsAndConditionsModal.tsx
index c9bc7912..a15c41e2 100644
--- a/client/src/components/ui/TermsAndConditionsModal.tsx
+++ b/client/src/components/ui/TermsAndConditionsModal.tsx
@@ -72,13 +72,13 @@ const TermsAndConditionsModal = ({
           <>
             <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"
+              className="border-border-none inline-flex h-10 items-center justify-center rounded-lg px-4 py-2 text-sm text-white hover:bg-gray-700 bg-gray-500 dark:border-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"
+              className="border-border-none inline-flex h-10 items-center justify-center rounded-lg px-4 py-2 text-sm text-white hover:bg-green-700 dark:hover:bg-green-700 bg-green-500
"
             >
               {localize('com_ui_accept')}
             </button>

[maxesse]

You're right - I should have tested it in light mode, as I always use it in dark mode and I didn't spot the issue. @danny-avila are you happy to apply @derhelge fix or do you want a PR? It works fine with his change.