From cfd6833356820d392a2dae3b7c3f96f6a8d30cb3 Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Mon, 2 Dec 2024 13:45:24 +0100
Subject: [PATCH] Use the JoinRuleSettings component for the guest link access
 prompt.

Co-authored-by: fkwp <fkwp@users.noreply.github.com>
---
 res/css/views/settings/_JoinRuleSettings.pcss | 12 ++++++
 .../rooms/RoomHeader/CallGuestLinkButton.tsx  | 42 +++++++++----------
 .../views/settings/JoinRuleSettings.tsx       | 30 +++++++++----
 src/i18n/strings/de_DE.json                   |  7 +++-
 src/i18n/strings/en_EN.json                   |  8 ++--
 5 files changed, 64 insertions(+), 35 deletions(-)

diff --git a/res/css/views/settings/_JoinRuleSettings.pcss b/res/css/views/settings/_JoinRuleSettings.pcss
index 965db9fb45f..82cb2e0d0f7 100644
--- a/res/css/views/settings/_JoinRuleSettings.pcss
+++ b/res/css/views/settings/_JoinRuleSettings.pcss
@@ -53,6 +53,14 @@ Please see LICENSE files in the repository root for full details.
         display: block;
     }
 
+    &.mx_StyledRadioButton_disabled {
+        opacity: 0.5;
+    }
+
+    &.mx_StyledRadioButton_disabled + span {
+        opacity: 0.5;
+    }
+
     & + span {
         display: inline-block;
         margin-left: 34px;
@@ -71,3 +79,7 @@ Please see LICENSE files in the repository root for full details.
     font: var(--cpd-font-body-md-regular);
     margin-top: var(--cpd-space-2x);
 }
+
+.mx_JoinRuleSettings_recommended {
+    color: $accent-1000;
+}
diff --git a/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx b/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx
index ae8e7be16bf..be3ed3176ea 100644
--- a/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx
+++ b/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx
@@ -14,10 +14,10 @@ import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
 import Modal from "../../../../Modal";
 import ShareDialog from "../../dialogs/ShareDialog";
 import { _t } from "../../../../languageHandler";
-import SettingsStore from "../../../../settings/SettingsStore";
 import { calculateRoomVia } from "../../../../utils/permalinks/Permalinks";
 import BaseDialog from "../../dialogs/BaseDialog";
 import { useGuestAccessInformation } from "../../../../hooks/room/useGuestAccessInformation";
+import JoinRuleSettings from "../../settings/JoinRuleSettings";
 
 /**
  * Display a button to open a dialog to share a link to the call using a element call guest spa url (`element_call:guest_spa_url` in the EW config).
@@ -99,7 +99,6 @@ export const JoinRuleDialog: React.FC<{
     room: Room;
     canInvite: boolean;
 }> = ({ onFinished, room, canInvite }) => {
-    const askToJoinEnabled = SettingsStore.getValue("feature_ask_to_join");
     const [isUpdating, setIsUpdating] = React.useState<undefined | JoinRule>(undefined);
     const changeJoinRule = useCallback(
         async (newRule: JoinRule) => {
@@ -120,27 +119,24 @@ export const JoinRuleDialog: React.FC<{
     );
     return (
         <BaseDialog title={_t("update_room_access_modal|title")} onFinished={onFinished} className="mx_JoinRuleDialog">
-            <p>{_t("update_room_access_modal|description")}</p>
-            <div className="mx_JoinRuleDialogButtons">
-                {askToJoinEnabled && canInvite && (
-                    <Button
-                        kind="secondary"
-                        className="mx_Dialog_nonDialogButton"
-                        disabled={isUpdating === JoinRule.Knock}
-                        onClick={() => changeJoinRule(JoinRule.Knock)}
-                    >
-                        {_t("action|ask_to_join")}
-                    </Button>
-                )}
-                <Button
-                    className="mx_Dialog_nonDialogButton"
-                    kind="destructive"
-                    disabled={isUpdating === JoinRule.Public}
-                    onClick={() => changeJoinRule(JoinRule.Public)}
-                >
-                    {_t("common|public")}
-                </Button>
-            </div>
+            <p>{_t("update_room_access_modal|description", {}, { b: (sub) => <strong>{sub}</strong> })}</p>
+            <p>
+                {_t("update_room_access_modal|revert_access_description", {}, { b: (sub) => <strong>{sub}</strong> })}
+            </p>
+            <JoinRuleSettings
+                recommendedOption={JoinRule.Knock}
+                room={room}
+                disabledOptions={new Set([JoinRule.Invite, JoinRule.Private, JoinRule.Restricted])}
+                hiddenOptions={new Set([JoinRule.Restricted])}
+                beforeChange={async (newRule) => {
+                    await changeJoinRule(newRule).catch(() => {
+                        return false;
+                    });
+                    return true;
+                }}
+                closeSettingsFn={() => {}}
+                onError={(error: unknown) => logger.error("Could not generate change access level:", error)}
+            />
             <p>{_t("update_room_access_modal|dont_change_description")}</p>
             <div className="mx_JoinRuleDialogButtons">
                 <Button
diff --git a/src/components/views/settings/JoinRuleSettings.tsx b/src/components/views/settings/JoinRuleSettings.tsx
index a6c1e91241c..62b00d01477 100644
--- a/src/components/views/settings/JoinRuleSettings.tsx
+++ b/src/components/views/settings/JoinRuleSettings.tsx
@@ -36,6 +36,9 @@ export interface JoinRuleSettingsProps {
     onError(error: unknown): void;
     beforeChange?(joinRule: JoinRule): Promise<boolean>; // if returns false then aborts the change
     aliasWarning?: ReactNode;
+    disabledOptions?: Set<JoinRule>;
+    hiddenOptions?: Set<JoinRule>;
+    recommendedOption?: JoinRule;
 }
 
 const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
@@ -45,6 +48,9 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
     onError,
     beforeChange,
     closeSettingsFn,
+    disabledOptions,
+    hiddenOptions,
+    recommendedOption,
 }) => {
     const cli = room.client;
 
@@ -147,7 +153,7 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
                     }
                 });
 
-                closeSettingsFn();
+                closeSettingsFn?.();
 
                 // switch to the new room in the background
                 dis.dispatch<ViewRoomPayload>({
@@ -170,18 +176,26 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
             {_t("room_settings|security|join_rule_upgrade_required")}
         </span>
     );
+    const withRecommendLabel = (label: string, rule: JoinRule): React.ReactNode =>
+        rule === recommendedOption ? (
+            <>
+                {label} (<span className="mx_JoinRuleSettings_recommended">{_t("common|recommended")}</span>)
+            </>
+        ) : (
+            label
+        );
 
     const definitions: IDefinition<JoinRule>[] = [
         {
             value: JoinRule.Invite,
-            label: _t("room_settings|security|join_rule_invite"),
+            label: withRecommendLabel(_t("room_settings|security|join_rule_invite"), JoinRule.Invite),
             description: _t("room_settings|security|join_rule_invite_description"),
             checked:
                 joinRule === JoinRule.Invite || (joinRule === JoinRule.Restricted && !restrictedAllowRoomIds?.length),
         },
         {
             value: JoinRule.Public,
-            label: _t("common|public"),
+            label: withRecommendLabel(_t("common|public"), JoinRule.Public),
             description: (
                 <>
                     {_t("room_settings|security|join_rule_public_description")}
@@ -292,7 +306,7 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
             value: JoinRule.Restricted,
             label: (
                 <>
-                    {_t("room_settings|security|join_rule_restricted")}
+                    {withRecommendLabel(_t("room_settings|security|join_rule_restricted"), JoinRule.Restricted)}
                     {preferredRestrictionVersion && upgradeRequiredPill}
                 </>
             ),
@@ -303,11 +317,11 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
     }
 
     if (askToJoinEnabled && (roomSupportsKnock || preferredKnockVersion)) {
-        definitions.push({
+        definitions.splice(Math.max(0, definitions.length - 1), 0, {
             value: JoinRule.Knock,
             label: (
                 <>
-                    {_t("room_settings|security|join_rule_knock")}
+                    {withRecommendLabel(_t("room_settings|security|join_rule_knock"), JoinRule.Knock)}
                     {preferredKnockVersion && upgradeRequiredPill}
                 </>
             ),
@@ -397,7 +411,9 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
             name="joinRule"
             value={joinRule}
             onChange={onChange}
-            definitions={definitions}
+            definitions={definitions
+                .map((d) => (disabledOptions?.has(d.value) ? { ...d, disabled: true } : d))
+                .filter((d) => !hiddenOptions?.has(d.value))}
             disabled={disabled}
             className="mx_JoinRuleSettings_radioButton"
         />
diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 65cb1d8660a..ed1f276ed15 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -3693,8 +3693,11 @@
         "unavailable": "Nicht verfügbar"
     },
     "update_room_access_modal": {
-        "no_change": "Ich möchte die Zugriffsebene nicht ändern.",
-        "title": "Ändern Sie die Zugriffsebene des Raums"
+        "description": "Um einen Konferenzlink zu erstellen, mache diesen Raum <b>öffentlich</b> oder aktiviere die Option, dass Benutzer eine <b>Beitrittsanfrage</b> stellen können. So können Gäste ohne direkte Einladung beitreten.",
+        "dont_change_description": "Wenn die Zugriffsrechte dieses Raums unverändert bleiben sollen, erstelle einen neuen Raum für die Element-Call Videokonferenz.",
+        "revert_access_description": "(In den Raum Einstellungen kann die Zutrittseinstellung zurückgesetzt werden: <b>Sicherheit</b> / <b>Zutritt</b>)",
+        "no_change": "Ich möchte die Raum Zutrittseinstellung nicht ändern.",
+        "title": "Erlaube Gastbenutzern, diesen Raum beizutreten"
     },
     "upload_failed_generic": "Die Datei „%(fileName)s“ konnte nicht hochgeladen werden.",
     "upload_failed_size": "Die Datei „%(fileName)s“ überschreitet das Hochladelimit deines Heim-Servers",
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 31a6c71c1ac..479c70e02c9 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -542,6 +542,7 @@
         "qr_code": "QR Code",
         "random": "Random",
         "reactions": "Reactions",
+        "recommended": "Recommended",
         "report_a_bug": "Report a bug",
         "room": "Room",
         "room_name": "Room name",
@@ -3718,10 +3719,11 @@
         "unavailable": "Unavailable"
     },
     "update_room_access_modal": {
-        "description": "To create a share link, you need to allow guests to join this room. This may make the room less secure. When you're done with the call, you can make the room private again.",
-        "dont_change_description": "Alternatively, you can hold the call in a separate room.",
+        "description": "To create a share link, make this room <b>public</b> or enable the option for users to <b>ask to join</b>. This allows guests to join without being invited.",
+        "dont_change_description": "If you don't want to change the access of this room, you can create a new room for the call link.",
         "no_change": "I don't want to change the access level.",
-        "title": "Change the room access level"
+        "revert_access_description": "(This can be reverted to the previous value in the Room Settings: <b>Security & Privacy</b> / <b>Access</b>)",
+        "title": "Allow guest users to join this room"
     },
     "upload_failed_generic": "The file '%(fileName)s' failed to upload.",
     "upload_failed_size": "The file '%(fileName)s' exceeds this homeserver's size limit for uploads",