diff --git a/res/css/_components.scss b/res/css/_components.scss index 998e1754c8..92070483f5 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -24,6 +24,9 @@ @import "./structures/_ViewSource.scss"; @import "./structures/auth/_Login.scss"; @import "./views/auth/_AuthButtons.scss"; +@import "./views/auth/_AuthFooter.scss"; +@import "./views/auth/_AuthHeader.scss"; +@import "./views/auth/_AuthPage.scss"; @import "./views/auth/_InteractiveAuthEntryComponents.scss"; @import "./views/auth/_ServerConfig.scss"; @import "./views/avatars/_BaseAvatar.scss"; diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss index 1264d2a30f..a5f62089d6 100644 --- a/res/css/structures/auth/_Login.scss +++ b/res/css/structures/auth/_Login.scss @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +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. @@ -14,23 +15,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_Login { - width: 100%; - height: 100%; - - display: flex; - align-items: center; - justify-content: center; - - overflow: auto; -} - -.mx_Login h2 { - font-weight: 300; - margin-top: 32px; - margin-bottom: 20px; -} - .mx_Login_box { width: 300px; min-height: 450px; @@ -39,16 +23,6 @@ limitations under the License. margin: auto; } -.mx_Login_logo { - text-align: center; - height: 150px; - margin-bottom: 45px; -} - -.mx_Login_logo img { - max-height: 100% -} - .mx_Login_support { text-align: center; font-size: 13px; @@ -115,19 +89,6 @@ limitations under the License. color: $primary-fg-color; } -.mx_Login_links { - display: block; - text-align: center; - margin-top: 15px; - width: 100%; - font-size: 13px; - opacity: 0.8; -} - -.mx_Login_links a:link { - color: $primary-fg-color; -} - .mx_Login_prompt { padding-top: 15px; padding-bottom: 15px; diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.scss new file mode 100644 index 0000000000..4737513125 --- /dev/null +++ b/res/css/views/auth/_AuthFooter.scss @@ -0,0 +1,28 @@ +/* +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_AuthFooter { + display: block; + text-align: center; + margin-top: 15px; + width: 100%; + font-size: 13px; + opacity: 0.8; +} + +.mx_AuthFooter a:link { + color: $primary-fg-color; +} diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss new file mode 100644 index 0000000000..58df178aa9 --- /dev/null +++ b/res/css/views/auth/_AuthHeader.scss @@ -0,0 +1,25 @@ +/* +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_AuthHeader_logo { + text-align: center; + height: 150px; + margin-bottom: 45px; +} + +.mx_AuthHeader_logo img { + max-height: 100% +} diff --git a/res/css/views/auth/_AuthPage.scss b/res/css/views/auth/_AuthPage.scss new file mode 100644 index 0000000000..d87a906275 --- /dev/null +++ b/res/css/views/auth/_AuthPage.scss @@ -0,0 +1,32 @@ +/* +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_AuthPage { + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; + + overflow: auto; +} + +.mx_AuthPage h2 { + font-weight: 300; + margin-top: 32px; + margin-bottom: 20px; +} diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js index 6d5da4f2b7..7c763b0c77 100644 --- a/src/components/structures/auth/ForgotPassword.js +++ b/src/components/structures/auth/ForgotPassword.js @@ -183,9 +183,9 @@ module.exports = React.createClass({ }, render: function() { - const LoginPage = sdk.getComponent("auth.LoginPage"); - const LoginHeader = sdk.getComponent("auth.LoginHeader"); - const LoginFooter = sdk.getComponent("auth.LoginFooter"); + const AuthPage = sdk.getComponent("auth.AuthPage"); + const AuthHeader = sdk.getComponent("auth.AuthHeader"); + const AuthFooter = sdk.getComponent("auth.AuthFooter"); const ServerConfig = sdk.getComponent("auth.ServerConfig"); const Spinner = sdk.getComponent("elements.Spinner"); @@ -272,7 +272,7 @@ module.exports = React.createClass({ { _t('Create an account') } - + ); @@ -280,12 +280,12 @@ module.exports = React.createClass({ return ( - +
- + { resetPasswordJsx }
-
+ ); }, }); diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js index a1f0327835..069e3aebb6 100644 --- a/src/components/structures/auth/Login.js +++ b/src/components/structures/auth/Login.js @@ -515,9 +515,9 @@ module.exports = React.createClass({ render: function() { const Loader = sdk.getComponent("elements.Spinner"); - const LoginPage = sdk.getComponent("auth.LoginPage"); - const LoginHeader = sdk.getComponent("auth.LoginHeader"); - const LoginFooter = sdk.getComponent("auth.LoginFooter"); + const AuthPage = sdk.getComponent("auth.AuthPage"); + const AuthHeader = sdk.getComponent("auth.AuthHeader"); + const AuthFooter = sdk.getComponent("auth.AuthFooter"); const ServerConfig = sdk.getComponent("auth.ServerConfig"); const loader = this.state.busy ?
: null; @@ -558,9 +558,9 @@ module.exports = React.createClass({ const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector'); return ( - +
- +
{ header } { errorTextSection } @@ -571,10 +571,10 @@ module.exports = React.createClass({ { loginAsGuestJsx } - +
-
+ ); }, }); diff --git a/src/components/structures/auth/PostRegistration.js b/src/components/structures/auth/PostRegistration.js index 826db89b93..78622695cf 100644 --- a/src/components/structures/auth/PostRegistration.js +++ b/src/components/structures/auth/PostRegistration.js @@ -60,12 +60,12 @@ module.exports = React.createClass({ render: function() { const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName'); const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar'); - const LoginPage = sdk.getComponent('auth.LoginPage'); - const LoginHeader = sdk.getComponent('auth.LoginHeader'); + const AuthPage = sdk.getComponent('auth.AuthPage'); + const AuthHeader = sdk.getComponent('auth.AuthHeader'); return ( - +
- +
{ _t('Set a display name:') } @@ -76,7 +76,7 @@ module.exports = React.createClass({ { this.state.errorString }
-
+ ); }, }); diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js index 617c9d6983..bd5a3a3fda 100644 --- a/src/components/structures/auth/Registration.js +++ b/src/components/structures/auth/Registration.js @@ -396,9 +396,9 @@ module.exports = React.createClass({ }, render: function() { - const LoginHeader = sdk.getComponent('auth.LoginHeader'); - const LoginFooter = sdk.getComponent('auth.LoginFooter'); - const LoginPage = sdk.getComponent('auth.LoginPage'); + const AuthHeader = sdk.getComponent('auth.AuthHeader'); + const AuthFooter = sdk.getComponent('auth.AuthFooter'); + const AuthPage = sdk.getComponent('auth.AuthPage'); const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth'); const Spinner = sdk.getComponent("elements.Spinner"); const ServerConfig = sdk.getComponent('views.auth.ServerConfig'); @@ -474,9 +474,9 @@ module.exports = React.createClass({ const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector'); return ( - +
- - +
-
+ ); }, }); diff --git a/src/components/views/auth/LoginFooter.js b/src/components/views/auth/AuthFooter.js similarity index 89% rename from src/components/views/auth/LoginFooter.js rename to src/components/views/auth/AuthFooter.js index 392d36e288..ea43bf322c 100644 --- a/src/components/views/auth/LoginFooter.js +++ b/src/components/views/auth/AuthFooter.js @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +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. @@ -20,11 +21,11 @@ import { _t } from '../../../languageHandler'; import React from 'react'; module.exports = React.createClass({ - displayName: 'LoginFooter', + displayName: 'AuthFooter', render: function() { return ( -
+
{ _t("powered by Matrix") }
); diff --git a/src/components/views/auth/LoginHeader.js b/src/components/views/auth/AuthHeader.js similarity index 77% rename from src/components/views/auth/LoginHeader.js rename to src/components/views/auth/AuthHeader.js index cd1f9c6a28..08c9ad41c9 100644 --- a/src/components/views/auth/LoginHeader.js +++ b/src/components/views/auth/AuthHeader.js @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +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. @@ -19,12 +20,14 @@ limitations under the License. const React = require('react'); module.exports = React.createClass({ - displayName: 'LoginHeader', + displayName: 'AuthHeader', render: function() { return ( -
- Matrix +
+
+ Matrix +
); }, diff --git a/src/components/views/auth/LoginPage.js b/src/components/views/auth/AuthPage.js similarity index 91% rename from src/components/views/auth/LoginPage.js rename to src/components/views/auth/AuthPage.js index 83da8fa60b..09540885c6 100644 --- a/src/components/views/auth/LoginPage.js +++ b/src/components/views/auth/AuthPage.js @@ -20,11 +20,11 @@ limitations under the License. const React = require('react'); module.exports = React.createClass({ - displayName: 'LoginPage', + displayName: 'AuthPage', render: function() { return ( -
+
{ this.props.children }
);