diff --git a/res/css/_components.scss b/res/css/_components.scss index 0603296ef5..a55cf2749a 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -33,6 +33,7 @@ @import "./views/auth/_InteractiveAuthEntryComponents.scss"; @import "./views/auth/_LanguageSelector.scss"; @import "./views/auth/_ServerConfig.scss"; +@import "./views/auth/_ServerTypeSelector.scss"; @import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/context_menus/_MessageContextMenu.scss"; diff --git a/res/css/views/auth/_ServerTypeSelector.scss b/res/css/views/auth/_ServerTypeSelector.scss new file mode 100644 index 0000000000..03f5386501 --- /dev/null +++ b/res/css/views/auth/_ServerTypeSelector.scss @@ -0,0 +1,69 @@ +/* +Copyright 2019 New Vector Ltd + +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. +*/ + +.mx_ServerTypeSelector { + display: flex; + margin-bottom: 28px; +} + +.mx_ServerTypeSelector_type { + margin: 0 5px; +} + +.mx_ServerTypeSelector_type:first-child { + margin-left: 0; +} + +.mx_ServerTypeSelector_type:last-child { + margin-right: 0; +} + +.mx_ServerTypeSelector_label { + text-align: center; + font-weight: 600; + color: $primary-fg-color; + margin: 8px 0; +} + +.mx_ServerTypeSelector_type .mx_AccessibleButton { + padding: 10px; + border: 1px solid $input-border-color; + border-radius: 4px; +} + +.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton { + border-color: $input-valid-border-color; +} + +.mx_ServerTypeSelector_logo { + display: flex; + justify-content: center; + height: 18px; + margin-bottom: 12px; + font-weight: 600; + color: $primary-fg-color; +} + +.mx_ServerTypeSelector_logo > div { + display: flex; + width: 70%; + align-items: center; + justify-content: space-evenly; +} + +.mx_ServerTypeSelector_description { + font-size: 10px; +} diff --git a/res/img/feather-icons/globe.svg b/res/img/feather-icons/globe.svg new file mode 100644 index 0000000000..8af7dc41dc --- /dev/null +++ b/res/img/feather-icons/globe.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/feather-icons/matrix-org-bw-logo.svg b/res/img/feather-icons/matrix-org-bw-logo.svg new file mode 100644 index 0000000000..a8c92c539a --- /dev/null +++ b/res/img/feather-icons/matrix-org-bw-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + .org + + diff --git a/res/img/feather-icons/modular-bw-logo.svg b/res/img/feather-icons/modular-bw-logo.svg new file mode 100644 index 0000000000..924a587805 --- /dev/null +++ b/res/img/feather-icons/modular-bw-logo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/views/auth/ServerTypeSelector.js b/src/components/views/auth/ServerTypeSelector.js new file mode 100644 index 0000000000..0640bad6d0 --- /dev/null +++ b/src/components/views/auth/ServerTypeSelector.js @@ -0,0 +1,122 @@ +/* +Copyright 2019 New Vector Ltd + +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 from 'react'; +import PropTypes from 'prop-types'; +import { _t } from '../../../languageHandler'; +import sdk from '../../../index'; +import classnames from 'classnames'; + +const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication'; + +const TYPES = [ + { + id: 'Free', + label: () => _t('Free'), + logo: () => , + description: () => _t('Join millions for free on the largest public server'), + }, + { + id: 'Premium', + label: () => _t('Premium'), + logo: () => , + description: () => _t('Premium hosting for organisations Learn more', {}, { + a: sub => + {sub} + , + }), + }, + { + id: 'Advanced', + label: () => _t('Advanced'), + logo: () =>
+ + {_t('Other')} +
, + description: () => _t('Find other public servers or use a custom server'), + }, +]; + +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, + // Handler called when the selected type changes. + onChange: PropTypes.func.isRequired, + } + + constructor(props) { + super(props); + + this.state = { + selected: null, + }; + } + + componentWillReceiveProps(props) { + const { selected } = props; + this.setState({ + selected, + }); + } + + 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); + } + } + + render() { + const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + + const serverTypes = TYPES.map(type => { + const { id, label, logo, description } = type; + const classes = classnames( + "mx_ServerTypeSelector_type", + `mx_ServerTypeSelector_type_${id}`, + { + "mx_ServerTypeSelector_type_selected": id === this.state.selected, + }, + ); + + return
+
+ {label()} +
+ +
+ {logo()} +
+
+ {description()} +
+ +
; + }); + + return
+ {serverTypes} +
; + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d8b8b12479..db157ba7b0 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1198,6 +1198,12 @@ "Home server URL": "Home server URL", "Identity server URL": "Identity server URL", "What does this mean?": "What does this mean?", + "Free": "Free", + "Join millions for free on the largest public server": "Join millions for free on the largest public server", + "Premium": "Premium", + "Premium hosting for organisations Learn more": "Premium hosting for organisations Learn more", + "Other": "Other", + "Find other public servers or use a custom server": "Find other public servers or use a custom server", "Sorry, your browser is not able to run Riot.": "Sorry, your browser is not able to run Riot.", "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.", "Please install Chrome or Firefox for the best experience.": "Please install Chrome or Firefox for the best experience.",