From 89f110f60a7756f0c27f4e248fc27011b55cd28e Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 27 Jan 2020 22:27:11 +0000 Subject: [PATCH] Add separate component for post-auth security flows Instead of twisting `AuthBody`, this adds a new component for the different styling of post-auth security flows. This also makes them fixed width and adjusts padding to match designs. --- res/css/_components.scss | 3 +- .../structures/auth/_CompleteSecurity.scss | 2 +- res/css/views/auth/_AuthBody.scss | 14 ++----- res/css/views/auth/_CompleteSecurityBody.scss | 42 +++++++++++++++++++ .../structures/auth/CompleteSecurity.js | 6 +-- src/components/structures/auth/E2eSetup.js | 6 +-- src/components/views/auth/AuthBody.js | 21 +--------- .../views/auth/CompleteSecurityBody.js | 27 ++++++++++++ 8 files changed, 83 insertions(+), 38 deletions(-) create mode 100644 res/css/views/auth/_CompleteSecurityBody.scss create mode 100644 src/components/views/auth/CompleteSecurityBody.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 07e92bdc7b..a2cfc94c79 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -36,6 +36,7 @@ @import "./views/auth/_AuthHeader.scss"; @import "./views/auth/_AuthHeaderLogo.scss"; @import "./views/auth/_AuthPage.scss"; +@import "./views/auth/_CompleteSecurityBody.scss"; @import "./views/auth/_CountryDropdown.scss"; @import "./views/auth/_InteractiveAuthEntryComponents.scss"; @import "./views/auth/_LanguageSelector.scss"; @@ -148,10 +149,10 @@ @import "./views/rooms/_AuxPanel.scss"; @import "./views/rooms/_BasicMessageComposer.scss"; @import "./views/rooms/_E2EIcon.scss"; -@import "./views/rooms/_InviteOnlyIcon.scss"; @import "./views/rooms/_EditMessageComposer.scss"; @import "./views/rooms/_EntityTile.scss"; @import "./views/rooms/_EventTile.scss"; +@import "./views/rooms/_InviteOnlyIcon.scss"; @import "./views/rooms/_JumpToBottomButton.scss"; @import "./views/rooms/_LinkPreviewWidget.scss"; @import "./views/rooms/_MemberDeviceInfo.scss"; diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss index c258ce4ec7..2bf51d9574 100644 --- a/res/css/structures/auth/_CompleteSecurity.scss +++ b/res/css/structures/auth/_CompleteSecurity.scss @@ -22,7 +22,7 @@ limitations under the License. .mx_CompleteSecurity_headerIcon { width: 24px; height: 24px; - margin: 0 4px; + margin-right: 4px; position: relative; } diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 51b9775811..7c5b008535 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -1,5 +1,6 @@ /* Copyright 2019 New Vector Ltd +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. @@ -15,6 +16,9 @@ limitations under the License. */ .mx_AuthBody { + width: 500px; + font-size: 12px; + color: $authpage-secondary-color; background-color: $authpage-body-bg-color; border-radius: 0 4px 4px 0; padding: 25px 60px; @@ -92,16 +96,6 @@ limitations under the License. } } -.mx_AuthBody_noHeader { - border-radius: 4px; -} - -.mx_AuthBody_loginRegister { - width: 500px; - font-size: 12px; - color: $authpage-secondary-color; -} - .mx_AuthBody_editServerDetails { padding-left: 1em; font-size: 12px; diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.scss new file mode 100644 index 0000000000..c7860fbe74 --- /dev/null +++ b/res/css/views/auth/_CompleteSecurityBody.scss @@ -0,0 +1,42 @@ +/* +Copyright 2019 New Vector Ltd +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. +*/ + +.mx_CompleteSecurityBody { + width: 600px; + color: $authpage-primary-color; + background-color: $authpage-body-bg-color; + border-radius: 4px; + padding: 20px; + box-sizing: border-box; + + h2 { + font-size: 24px; + font-weight: 600; + margin-top: 0; + } + + h3 { + font-size: 14px; + font-weight: 600; + } + + a:link, + a:hover, + a:visited { + @mixin mx_Dialog_link; + } +} diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js index 206cdb743e..29d8207d0a 100644 --- a/src/components/structures/auth/CompleteSecurity.js +++ b/src/components/structures/auth/CompleteSecurity.js @@ -112,7 +112,7 @@ export default class CompleteSecurity extends React.Component { render() { const AuthPage = sdk.getComponent("auth.AuthPage"); - const AuthBody = sdk.getComponent("auth.AuthBody"); + const CompleteSecurityBody = sdk.getComponent("auth.CompleteSecurityBody"); const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); const { @@ -204,7 +204,7 @@ export default class CompleteSecurity extends React.Component { return ( - +

{icon} {title} @@ -212,7 +212,7 @@ export default class CompleteSecurity extends React.Component {
{body}
- + ); } diff --git a/src/components/structures/auth/E2eSetup.js b/src/components/structures/auth/E2eSetup.js index 29b4345761..9b390d24cc 100644 --- a/src/components/structures/auth/E2eSetup.js +++ b/src/components/structures/auth/E2eSetup.js @@ -34,16 +34,16 @@ export default class E2eSetup extends React.Component { render() { const AuthPage = sdk.getComponent("auth.AuthPage"); - const AuthBody = sdk.getComponent("auth.AuthBody"); + const CompleteSecurityBody = sdk.getComponent("auth.CompleteSecurityBody"); return ( - + - + ); } diff --git a/src/components/views/auth/AuthBody.js b/src/components/views/auth/AuthBody.js index b74b7d866a..9a078efb52 100644 --- a/src/components/views/auth/AuthBody.js +++ b/src/components/views/auth/AuthBody.js @@ -17,29 +17,10 @@ limitations under the License. 'use strict'; import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; export default class AuthBody extends React.PureComponent { - static PropTypes = { - header: PropTypes.bool, - }; - - static defaultProps = { - header: true, - }; - render() { - const classes = { - 'mx_AuthBody': true, - 'mx_AuthBody_noHeader': !this.props.header, - // XXX The login pages all use a smaller fonts size but we don't want this - // for subsequent auth screens like the e2e setup. Doing this a terrible way - // for now. - 'mx_AuthBody_loginRegister': this.props.header, - }; - - return
+ return
{ this.props.children }
; } diff --git a/src/components/views/auth/CompleteSecurityBody.js b/src/components/views/auth/CompleteSecurityBody.js new file mode 100644 index 0000000000..d757de9fe0 --- /dev/null +++ b/src/components/views/auth/CompleteSecurityBody.js @@ -0,0 +1,27 @@ +/* +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. +*/ + +'use strict'; + +import React from 'react'; + +export default class CompleteSecurityBody extends React.PureComponent { + render() { + return
+ { this.props.children } +
; + } +}