Fix publishing address wrongly demanding the alias be available (#7690) (#7693)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/elements/RoomAliasField.tsx

@@ -28,6 +28,8 @@ interface IProps {
     label?: string;
     placeholder?: string;
     disabled?: boolean;
+    // if roomId is passed then the entered alias is checked to point to this roomId, else must be unassigned
+    roomId?: string;
     onKeyDown?: KeyboardEventHandler;
     onChange?(value: string): void;
 }
@@ -165,7 +167,24 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
                 key: "required",
                 test: async ({ value, allowEmpty }) => allowEmpty || !!value,
                 invalid: () => _t("Please provide an address"),
-            }, {
+            }, this.props.roomId ? {
+                key: "matches",
+                final: true,
+                test: async ({ value }) => {
+                    if (!value) {
+                        return true;
+                    }
+                    const client = this.context;
+                    try {
+                        const result = await client.getRoomIdForAlias(this.asFullAlias(value));
+                        return result.room_id === this.props.roomId;
+                    } catch (err) {
+                        console.log(err);
+                        return false;
+                    }
+                },
+                invalid: () => _t("This address does not point at this room"),
+            } : {
                 key: "taken",
                 final: true,
                 test: async ({ value }) => {

src/components/views/room_settings/AliasSettings.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ChangeEvent, ContextType, createRef } from "react";
+import React, { ChangeEvent, ContextType, createRef, SyntheticEvent } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -32,13 +32,15 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import SettingsFieldset from "../settings/SettingsFieldset";
 
 interface IEditableAliasesListProps {
+    roomId?: string;
     domain?: string;
 }
 
 class EditableAliasesList extends EditableItemList<IEditableAliasesListProps> {
     private aliasField = createRef<RoomAliasField>();
 
-    private onAliasAdded = async () => {
+    private onAliasAdded = async (ev: SyntheticEvent) => {
+        ev.preventDefault();
         await this.aliasField.current.validate({ allowEmpty: false });
 
         if (this.aliasField.current.isValid) {
@@ -51,7 +53,7 @@ class EditableAliasesList extends EditableItemList<IEditableAliasesListProps> {
     };
 
     protected renderNewItemField() {
-        const onChange = (alias) => this.onNewItemChanged({ target: { value: alias } });
+        const onChange = (alias: string) => this.onNewItemChanged({ target: { value: alias } });
         return (
             <form
                 onSubmit={this.onAliasAdded}
@@ -63,7 +65,9 @@ class EditableAliasesList extends EditableItemList<IEditableAliasesListProps> {
                     ref={this.aliasField}
                     onChange={onChange}
                     value={this.props.newItem || ""}
-                    domain={this.props.domain} />
+                    domain={this.props.domain}
+                    roomId={this.props.roomId}
+                />
                 <AccessibleButton onClick={this.onAliasAdded} kind="primary">
                     { _t("Add") }
                 </AccessibleButton>
@@ -360,7 +364,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
             </Field>
         );
 
-        let localAliasesList;
+        let localAliasesList: JSX.Element;
         if (this.state.localAliasesLoading) {
             localAliasesList = <Spinner />;
         } else {
@@ -428,6 +432,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                         itemsLabel={_t('Other published addresses:')}
                         noItemsLabel={_t('No other published addresses yet, add one below')}
                         placeholder={_t('New published address (e.g. #alias:server)')}
+                        roomId={this.props.roomId}
                     />
                 </SettingsFieldset>
                 <SettingsFieldset

src/components/views/settings/JoinRuleSettings.tsx

@@ -62,9 +62,9 @@ const JoinRuleSettings = ({ room, promptUpgrade, aliasWarning, onError, beforeCh
         onError,
     );
 
-    const { join_rule: joinRule } = content;
+    const { join_rule: joinRule = JoinRule.Invite } = content || {};
     const restrictedAllowRoomIds = joinRule === JoinRule.Restricted
-        ? content.allow.filter(o => o.type === RestrictedAllowType.RoomMembership).map(o => o.room_id)
+        ? content.allow?.filter(o => o.type === RestrictedAllowType.RoomMembership).map(o => o.room_id)
         : undefined;
 
     const editRestrictedRoomIds = async (): Promise<string[] | undefined> => {

src/i18n/strings/en_EN.json

@@ -2310,6 +2310,7 @@
     "Missing room name or separator e.g. (my-room:domain.org)": "Missing room name or separator e.g. (my-room:domain.org)",
     "Some characters not allowed": "Some characters not allowed",
     "Please provide an address": "Please provide an address",
+    "This address does not point at this room": "This address does not point at this room",
     "This address is available to use": "This address is available to use",
     "This address is already in use": "This address is already in use",
     "This address had invalid server or is already in use": "This address had invalid server or is already in use",