From 271fedd1e9779f74fda812e1fb8adb74907b0c89 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 9 Mar 2017 10:58:58 +0000 Subject: [PATCH] Support for phone number registration / signin (#3381) * WIP msisdn signin (css) * Changed how highlights are done to support keyboard based navigation * Support for new InteractiveAuth registration * CSS for msisdn auth entry component * CSS tweaks for msisdn login * Fix tests --- src/skins/vector/css/_components.scss | 2 + .../structures/login/_Login.scss | 17 ++++ .../views/elements/_Dropdown.scss | 93 +++++++++++++++++++ .../_InteractiveAuthEntryComponents.scss | 42 +++++++++ test/app-tests/loading.js | 6 +- 5 files changed, 158 insertions(+), 2 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss create mode 100644 src/skins/vector/css/matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 6a1fefb0..63109377 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -21,9 +21,11 @@ @import "./matrix-react-sdk/views/elements/_AddressSelector.scss"; @import "./matrix-react-sdk/views/elements/_AddressTile.scss"; @import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss"; +@import "./matrix-react-sdk/views/elements/_Dropdown.scss"; @import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss"; @import "./matrix-react-sdk/views/elements/_ProgressBar.scss"; @import "./matrix-react-sdk/views/elements/_RichText.scss"; +@import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss"; @import "./matrix-react-sdk/views/login/_ServerConfig.scss"; @import "./matrix-react-sdk/views/messages/_MImageBody.scss"; @import "./matrix-react-sdk/views/messages/_MNoticeBody.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index a359627a..f21bb169 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -66,6 +66,10 @@ limitations under the License. margin-bottom: 14px; } +.mx_Login_username { + margin-bottom: 0px; +} + .mx_Login_fieldLabel { margin-top: -10px; margin-left: 8px; @@ -163,3 +167,16 @@ limitations under the License. margin-bottom: 12px; } +.mx_Login_phoneSection { + display: table; +} + +.mx_Login_phoneCountry { + display: table-cell; + width: 70px; +} + +.mx_Login_phoneNumberField { + width: 210px; + margin-left: 3px; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss new file mode 100644 index 00000000..b96290bd --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss @@ -0,0 +1,93 @@ +/* +Copyright 2017 OpenMarket 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_Dropdown { + position: relative; +} + +.mx_Dropdown_input { + position: relative; + border-radius: 3px; + border: 1px solid $strong-input-border-color; + font-weight: 300; + font-size: 13px; + user-select: none; +} + +.mx_Dropdown_arrow { + border-color: $primary-fg-color transparent transparent; + border-style: solid; + border-width: 5px 5px 0; + display: block; + height: 0; + position: absolute; + right: 10px; + top: 14px; + width: 0 +} + +.mx_Dropdown_option { + height: 35px; + line-height: 35px; + padding-left: 8px; + padding-right: 8px; +} + +.mx_Dropdown_option img { + margin: 5px; + width: 25px; + vertical-align: middle; +} + +input.mx_Dropdown_option, input.mx_Dropdown_option:focus { + border: 0; + padding-top: 0; + padding-bottom: 0; + // XXX: hack to prevent text box being too big and pushing + // its parent out / overlapping the dropdown arrow. Only really + // works in the Country dropdown. + width: 60%; +} + +.mx_Dropdown_menu { + position: absolute; + left: -1px; + right: -1px; + top: 100%; + z-index: 2; + margin: 0; + padding: 0px; + border-radius: 3px; + border: 1px solid $accent-color; + background-color: $primary-bg-color; + max-height: 200px; + overflow-y: scroll; +} + +.mx_Dropdown_menu .mx_Dropdown_option_highlight { + background-color: $focus-bg-color; +} + +.mx_Dropdown_menu { + font-weight: bold; +} + +.mx_Dropdown_searchPrompt { + font-weight: normal; + margin-left: 5px; + margin-bottom: 5px; +} + diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss b/src/skins/vector/css/matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss new file mode 100644 index 00000000..183b5cd2 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss @@ -0,0 +1,42 @@ +/* +Copyright 2017 Vector Creations 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_InteractiveAuthEntryComponents_msisdnWrapper { + text-align: center; +} + +.mx_InteractiveAuthEntryComponents_msisdnEntry { + font-size: 200%; + font-weight: bold; + border: 1px solid $strong-input-border-color; + border-radius: 3px; + width: 6em; +} + +.mx_InteractiveAuthEntryComponents_msisdnEntry:focus { + border: 1px solid $accent-color; +} + +.mx_InteractiveAuthEntryComponents_msisdnSubmit { + margin-top: 4px; + margin-bottom: 5px; +} + +// XXX: This should be a common button class +.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled { + background-color: $light-fg-color; + cursor: default; +} diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js index d2cb78d0..ef555830 100644 --- a/test/app-tests/loading.js +++ b/test/app-tests/loading.js @@ -188,15 +188,17 @@ describe('loading:', function () { let login = ReactTestUtils.findRenderedComponentWithType( matrixChat, sdk.getComponent('structures.login.Login')); httpBackend.when('POST', '/login').check(function(req) { + console.log(req); expect(req.data.type).toEqual('m.login.password'); - expect(req.data.user).toEqual('user'); + expect(req.data.identifier.type).toEqual('m.id.user'); + expect(req.data.identifier.user).toEqual('user'); expect(req.data.password).toEqual('pass'); }).respond(200, { user_id: '@user:id', device_id: 'DEVICE_ID', access_token: 'access_token', }); - login.onPasswordLogin("user", "pass") + login.onPasswordLogin("user", undefined, undefined, "pass") return httpBackend.flush(); }).then(() => { // Wait for another trip around the event loop for the UI to update