Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into new/room-alias-in-permalink

src/components/views/dialogs/ConfirmRedactDialog.js

@@ -23,15 +23,17 @@ import { _t } from '../../../languageHandler';
  */
 export default class ConfirmRedactDialog extends React.Component {
     render() {
-        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
+        const TextInputDialog = sdk.getComponent('views.dialogs.TextInputDialog');
         return (
-            <QuestionDialog onFinished={this.props.onFinished}
+            <TextInputDialog onFinished={this.props.onFinished}
                 title={_t("Confirm Removal")}
                 description={
                     _t("Are you sure you wish to remove (delete) this event? " +
                        "Note that if you delete a room name or topic change, it could undo the change.")}
+                placeholder={_t("Reason (optional)")}
+                focus
                 button={_t("Remove")}>
-            </QuestionDialog>
+            </TextInputDialog>
         );
     }
 }

src/components/views/dialogs/InfoDialog.js

@@ -31,6 +31,7 @@ export default class InfoDialog extends React.Component {
         onFinished: PropTypes.func,
         hasCloseButton: PropTypes.bool,
         onKeyDown: PropTypes.func,
+        fixedWidth: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -54,6 +55,7 @@ export default class InfoDialog extends React.Component {
                 contentId='mx_Dialog_content'
                 hasCancel={this.props.hasCloseButton}
                 onKeyDown={this.props.onKeyDown}
+                fixedWidth={this.props.fixedWidth}
             >
                 <div className={classNames("mx_Dialog_content", this.props.className)} id="mx_Dialog_content">
                     { this.props.description }

src/components/views/dialogs/RegistrationEmailPromptDialog.tsx

@@ -0,0 +1,96 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from "./IDialogProps";
+import {useRef, useState} from "react";
+import Field from "../elements/Field";
+import CountlyAnalytics from "../../../CountlyAnalytics";
+import withValidation from "../elements/Validation";
+import * as Email from "../../../email";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+interface IProps extends IDialogProps {
+    onFinished(continued: boolean, email?: string): void;
+}
+
+const validation = withValidation({
+    rules: [
+        {
+            key: "email",
+            test: ({ value }) => !value || Email.looksValid(value),
+            invalid: () => _t("Doesn't look like a valid email address"),
+        },
+    ],
+});
+
+const RegistrationEmailPromptDialog: React.FC<IProps> = ({onFinished}) => {
+    const [email, setEmail] = useState("");
+    const fieldRef = useRef<Field>();
+
+    const onSubmit = async () => {
+        if (email) {
+            const valid = await fieldRef.current.validate({ allowEmpty: false });
+
+            if (!valid) {
+                fieldRef.current.focus();
+                fieldRef.current.validate({ allowEmpty: false, focused: true });
+                return;
+            }
+        }
+
+        onFinished(true, email);
+    };
+
+    return <BaseDialog
+        title={_t("Continuing without email")}
+        className="mx_RegistrationEmailPromptDialog"
+        contentId="mx_RegistrationEmailPromptDialog"
+        onFinished={() => onFinished(false)}
+        fixedWidth={false}
+    >
+        <div className="mx_Dialog_content" id="mx_RegistrationEmailPromptDialog">
+            <p>{_t("Just a heads up, if you don't add an email and forget your password, you could " +
+                "<b>permanently lose access to your account</b>.", {}, {
+                b: sub => <b>{sub}</b>,
+            })}</p>
+            <form onSubmit={onSubmit}>
+                <Field
+                    ref={fieldRef}
+                    type="text"
+                    label={_t("Email (optional)")}
+                    value={email}
+                    onChange={ev => {
+                        setEmail(ev.target.value);
+                    }}
+                    onValidate={async fieldState => await validation(fieldState)}
+                    onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_email2_focus")}
+                    onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_email2_blur")}
+                />
+            </form>
+        </div>
+        <DialogButtons
+            primaryButton={_t("Continue")}
+            onPrimaryButtonClick={onSubmit}
+            hasCancel={false}
+        />
+    </BaseDialog>;
+};
+
+export default RegistrationEmailPromptDialog;

src/components/views/dialogs/RoomSettingsDialog.js

@@ -53,9 +53,9 @@ export default class RoomSettingsDialog extends React.Component {
     }
 
     _onAction = (payload) => {
-        // When room changes below us, close the room settings
+        // When view changes below us, close the room settings
         // whilst the modal is open this can only be triggered when someone hits Leave Room
-        if (payload.action === 'view_next_room') {
+        if (payload.action === 'view_home_page') {
             this.props.onFinished();
         }
     };

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -0,0 +1,203 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {createRef} from 'react';
+
+import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import BaseDialog from './BaseDialog';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from "../elements/AccessibleButton";
+import SdkConfig from "../../../SdkConfig";
+import Field from "../elements/Field";
+import StyledRadioButton from "../elements/StyledRadioButton";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import withValidation, {IFieldState} from "../elements/Validation";
+
+interface IProps {
+    title?: string;
+    serverConfig: ValidatedServerConfig;
+    onFinished(config?: ValidatedServerConfig): void;
+}
+
+interface IState {
+    defaultChosen: boolean;
+    otherHomeserver: string;
+}
+
+export default class ServerPickerDialog extends React.PureComponent<IProps, IState> {
+    private readonly defaultServer: ValidatedServerConfig;
+    private readonly fieldRef = createRef<Field>();
+    private validatedConf: ValidatedServerConfig;
+
+    constructor(props) {
+        super(props);
+
+        const config = SdkConfig.get();
+        this.defaultServer = config["validated_server_config"] as ValidatedServerConfig;
+        this.state = {
+            defaultChosen: this.props.serverConfig.isDefault,
+            otherHomeserver: this.props.serverConfig.isDefault ? "" : this.props.serverConfig.hsUrl,
+        };
+    }
+
+    private onDefaultChosen = () => {
+        this.setState({ defaultChosen: true });
+    };
+
+    private onOtherChosen = () => {
+        this.setState({ defaultChosen: false });
+    };
+
+    private onHomeserverChange = (ev) => {
+        this.setState({ otherHomeserver: ev.target.value });
+    };
+
+    // TODO: Do we want to support .well-known lookups here?
+    // If for some reason someone enters "matrix.org" for a URL, we could do a lookup to
+    // find their homeserver without demanding they use "https://matrix.org"
+    private validate = withValidation<this, { error?: string }>({
+        deriveData: async ({ value: hsUrl }) => {
+            // Always try and use the defaults first
+            const defaultConfig: ValidatedServerConfig = SdkConfig.get()["validated_server_config"];
+            if (defaultConfig.hsUrl === hsUrl) return {};
+
+            try {
+                this.validatedConf = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl);
+                return {};
+            } catch (e) {
+                console.error(e);
+
+                const stateForError = AutoDiscoveryUtils.authComponentStateForError(e);
+                if (!stateForError.isFatalError) {
+                    // carry on anyway
+                    this.validatedConf = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, null, true);
+                    return {};
+                } else {
+                    let error = _t("Unable to validate homeserver/identity server");
+                    if (e.translatedMessage) {
+                        error = e.translatedMessage;
+                    }
+                    return { error };
+                }
+            }
+        },
+        rules: [
+            {
+                key: "required",
+                test: ({ value, allowEmpty }) => allowEmpty || !!value,
+                invalid: () => _t("Specify a homeserver"),
+            }, {
+                key: "valid",
+                test: async function({ value }, { error }) {
+                    if (!value) return true;
+                    return !error;
+                },
+                invalid: function({ error }) {
+                    return error;
+                },
+            },
+        ],
+    });
+
+    private onHomeserverValidate = (fieldState: IFieldState) => this.validate(fieldState);
+
+    private onSubmit = async (ev) => {
+        ev.preventDefault();
+
+        const valid = await this.fieldRef.current.validate({ allowEmpty: false });
+
+        if (!valid) {
+            this.fieldRef.current.focus();
+            this.fieldRef.current.validate({ allowEmpty: false, focused: true });
+            return;
+        }
+
+        this.props.onFinished(this.validatedConf);
+    };
+
+    public render() {
+        let text;
+        if (this.defaultServer.hsName === "matrix.org") {
+            text = _t("Matrix.org is the biggest public homeserver in the world, so it’s a good place for many.");
+        }
+
+        let defaultServerName = this.defaultServer.hsName;
+        if (this.defaultServer.hsNameIsDifferent) {
+            defaultServerName = (
+                <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={this.defaultServer.hsUrl}>
+                    {this.defaultServer.hsName}
+                </TextWithTooltip>
+            );
+        }
+
+        return <BaseDialog
+            title={this.props.title || _t("Sign into your homeserver")}
+            className="mx_ServerPickerDialog"
+            contentId="mx_ServerPickerDialog"
+            onFinished={this.props.onFinished}
+            fixedWidth={false}
+            hasCancel={true}
+        >
+            <form className="mx_Dialog_content" id="mx_ServerPickerDialog" onSubmit={this.onSubmit}>
+                <p>
+                    {_t("We call the places you where you can host your account ‘homeservers’.")} {text}
+                </p>
+
+                <StyledRadioButton
+                    name="defaultChosen"
+                    value="true"
+                    checked={this.state.defaultChosen}
+                    onChange={this.onDefaultChosen}
+                >
+                    {defaultServerName}
+                </StyledRadioButton>
+
+                <StyledRadioButton
+                    name="defaultChosen"
+                    value="false"
+                    className="mx_ServerPickerDialog_otherHomeserverRadio"
+                    checked={!this.state.defaultChosen}
+                    onChange={this.onOtherChosen}
+                >
+                    <Field
+                        type="text"
+                        className="mx_ServerPickerDialog_otherHomeserver"
+                        label={_t("Other homeserver")}
+                        onChange={this.onHomeserverChange}
+                        onClick={this.onOtherChosen}
+                        ref={this.fieldRef}
+                        onValidate={this.onHomeserverValidate}
+                        value={this.state.otherHomeserver}
+                        validateOnChange={false}
+                        validateOnFocus={false}
+                    />
+                </StyledRadioButton>
+                <p>
+                    {_t("Use your preferred Matrix homeserver if you have one, or host your own.")}
+                </p>
+
+                <AccessibleButton className="mx_ServerPickerDialog_continue" kind="primary" onClick={this.onSubmit}>
+                    {_t("Continue")}
+                </AccessibleButton>
+
+                <h4>{_t("Learn more")}</h4>
+                <a href="https://matrix.org/faq/#what-is-a-homeserver%3F" target="_blank" rel="noreferrer noopener">
+                    {_t("About homeservers")}
+                </a>
+            </form>
+        </BaseDialog>;
+    }
+}