From 350c24c503fd611f5d03176d86eeac62ef9e764e Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 25 Jan 2019 10:42:45 -0600 Subject: [PATCH] Initial wiring of server type selector --- src/components/structures/auth/Login.js | 66 ++++++++++++++----- .../views/auth/ServerTypeSelector.js | 56 ++++++++++------ 2 files changed, 87 insertions(+), 35 deletions(-) diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js index 85baab6dbf..b380d431f9 100644 --- a/src/components/structures/auth/Login.js +++ b/src/components/structures/auth/Login.js @@ -26,6 +26,7 @@ import Login from '../../../Login'; import SdkConfig from '../../../SdkConfig'; import { messageForResourceLimitError } from '../../../utils/ErrorUtils'; import { AutoDiscovery } from "matrix-js-sdk"; +import * as ServerType from '../../views/auth/ServerTypeSelector'; // For validating phone numbers without country codes const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/; @@ -80,6 +81,8 @@ module.exports = React.createClass({ busy: false, errorText: null, loginIncorrect: false, + + serverType: null, enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl, enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl, @@ -299,6 +302,12 @@ module.exports = React.createClass({ }); }, + onServerTypeChange(type) { + this.setState({ + serverType: type, + }); + }, + onRegisterClick: function(ev) { ev.preventDefault(); ev.stopPropagation(); @@ -475,7 +484,45 @@ module.exports = React.createClass({ return errorText; }, - componentForStep: function(step) { + serverComponentForStep() { + const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector"); + const ServerConfig = sdk.getComponent("auth.ServerConfig"); + + // TODO: May need to adjust the behavior of this config option + if (SdkConfig.get()['disable_custom_urls']) { + return null; + } + + let serverDetails = null; + switch (this.state.serverType) { + case ServerType.FREE: + break; + case ServerType.PREMIUM: + break; + case ServerType.ADVANCED: + serverDetails = ; + break; + } + + return
+ + {serverDetails} +
; + }, + + loginComponentForStep() { + const step = this.state.currentFlow; + if (!step) { return null; } @@ -530,7 +577,6 @@ module.exports = React.createClass({ const AuthPage = sdk.getComponent("auth.AuthPage"); const AuthHeader = sdk.getComponent("auth.AuthHeader"); const AuthBody = sdk.getComponent("auth.AuthBody"); - const ServerConfig = sdk.getComponent("auth.ServerConfig"); const loader = this.state.busy ?
: null; const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText; @@ -543,18 +589,6 @@ module.exports = React.createClass({ ; } - let serverConfig; - - if (!SdkConfig.get()['disable_custom_urls']) { - serverConfig = ; - } - let errorTextSection; if (errorText) { errorTextSection = ( @@ -573,8 +607,8 @@ module.exports = React.createClass({ {loader} { errorTextSection } - { this.componentForStep(this.state.currentFlow) } - { serverConfig } + { this.serverComponentForStep() } + { this.loginComponentForStep() } { _t('Create account') } diff --git a/src/components/views/auth/ServerTypeSelector.js b/src/components/views/auth/ServerTypeSelector.js index 0640bad6d0..765cc58280 100644 --- a/src/components/views/auth/ServerTypeSelector.js +++ b/src/components/views/auth/ServerTypeSelector.js @@ -22,15 +22,21 @@ import classnames from 'classnames'; const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication'; +export const FREE = 'Free'; +export const PREMIUM = 'Premium'; +export const ADVANCED = 'Advanced'; + +const MATRIX_ORG_HS = 'https://matrix.org'; + const TYPES = [ { - id: 'Free', + id: FREE, label: () => _t('Free'), logo: () => , description: () => _t('Join millions for free on the largest public server'), }, { - id: 'Premium', + id: PREMIUM, label: () => _t('Premium'), logo: () => , description: () => _t('Premium hosting for organisations Learn more', {}, { @@ -40,7 +46,7 @@ const TYPES = [ }), }, { - id: 'Advanced', + id: ADVANCED, label: () => _t('Advanced'), logo: () =>
@@ -50,10 +56,24 @@ const TYPES = [ }, ]; +function getDefaultType(defaultHsUrl) { + if (!defaultHsUrl) { + return null; + } else if (defaultHsUrl === MATRIX_ORG_HS) { + return FREE; + } else if (new URL(defaultHsUrl).hostname.endsWith('.modular.im')) { + // TODO: Use a Riot config parameter to detect Modular-ness. + // https://github.com/vector-im/riot-web/issues/8253 + return PREMIUM; + } else { + return ADVANCED; + } +} + export default class ServerTypeSelector extends React.PureComponent { static propTypes = { - // ID of the initial type to show as selected or null for none. - selected: PropTypes.string, + // The default HS URL as another way to set the initially selected type. + defaultHsUrl: PropTypes.string, // Handler called when the selected type changes. onChange: PropTypes.func.isRequired, } @@ -61,30 +81,28 @@ export default class ServerTypeSelector extends React.PureComponent { constructor(props) { super(props); + const { defaultHsUrl } = props; this.state = { - selected: null, + selected: getDefaultType(defaultHsUrl), }; } - componentWillReceiveProps(props) { - const { selected } = props; + updateSelectedType(type) { + if (this.state.selected === type) { + return; + } this.setState({ - selected, + selected: type, }); + if (this.props.onChange) { + this.props.onChange(type); + } } onClick = (e) => { e.stopPropagation(); - const id = e.currentTarget.dataset.id; - if (this.state.selected === id) { - return; - } - this.setState({ - selected: id, - }); - if (this.props.onChange) { - this.props.onChange(id); - } + const type = e.currentTarget.dataset.id; + this.updateSelectedType(type); } render() {