From bc968c6e4391e08ad3d9060f668577ba8b4311d6 Mon Sep 17 00:00:00 2001
From: Okke Harsta <oharsta@zilverline.com>
Date: Thu, 28 Sep 2023 11:51:48 +0200
Subject: [PATCH] Override setting allowed, checkboxes not readonly

---
 client/src/pages/InvitationForm.js | 6 ++++--
 client/src/tabs/Roles.scss         | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/InvitationForm.js b/client/src/pages/InvitationForm.js
index 584a0515..7f64fca5 100644
--- a/client/src/pages/InvitationForm.js
+++ b/client/src/pages/InvitationForm.js
@@ -265,15 +265,17 @@ export const InvitationForm = () => {
 
                         <Checkbox name={I18n.t("invitations.enforceEmailEquality")}
                                   value={invitation.enforceEmailEquality || false}
+                                  onChange={e => setInvitation({...invitation, enforceEmailEquality: e.target.checked})}
                                   info={I18n.t("invitations.enforceEmailEquality")}
-                                  readOnly={true}
+                                  readOnly={selectedRoles.some(role => !role.overrideSettingsAllowed )}
                                   tooltip={I18n.t("tooltips.enforceEmailEqualityTooltip")}
                         />
 
                         <Checkbox name={I18n.t("invitations.eduIDOnly")}
                                   value={invitation.eduIDOnly || false}
+                                  onChange={e => setInvitation({...invitation, eduIDOnly: e.target.checked})}
                                   info={I18n.t("invitations.eduIDOnly")}
-                                  readOnly={true}
+                                  readOnly={selectedRoles.some(role => !role.overrideSettingsAllowed )}
                                   tooltip={I18n.t("tooltips.eduIDOnlyTooltip")}
                         />
 
diff --git a/client/src/tabs/Roles.scss b/client/src/tabs/Roles.scss
index 12665729..3082a188 100644
--- a/client/src/tabs/Roles.scss
+++ b/client/src/tabs/Roles.scss
@@ -7,6 +7,11 @@ div.mod-roles {
         align-items: center;
         flex-direction: column;
         margin-top: 25px;
+
+        @media (max-width: $medium) {
+            padding: 0 15px;
+        }
+
         svg {
             width: 240px;
             height: auto