From 26e8b2c1b3af8d6a2b8559ec3b4644d18746b7c2 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 24 Oct 2017 23:37:26 +0100 Subject: [PATCH] switch to a LoginPage wrapper component as it's much nicer in the CSS to wrap the LoginBox as needed rather than have separate header & footer divs floating above and below it which need to be correctly vertically centered --- .../structures/login/ForgotPassword.js | 5 +- src/components/structures/login/Login.js | 9 +-- .../structures/login/PostRegistration.js | 5 +- .../structures/login/Registration.js | 5 +- src/components/views/login/LoginPage.js | 58 +++++++++++++++++++ src/components/views/login/LoginPageFooter.js | 30 ---------- src/components/views/login/LoginPageHeader.js | 47 --------------- 7 files changed, 70 insertions(+), 89 deletions(-) create mode 100644 src/components/views/login/LoginPage.js delete mode 100644 src/components/views/login/LoginPageFooter.js delete mode 100644 src/components/views/login/LoginPageHeader.js diff --git a/src/components/structures/login/ForgotPassword.js b/src/components/structures/login/ForgotPassword.js index 3e76291d20..f14d64528f 100644 --- a/src/components/structures/login/ForgotPassword.js +++ b/src/components/structures/login/ForgotPassword.js @@ -154,6 +154,7 @@ module.exports = React.createClass({ }, render: function() { + const LoginPage = sdk.getComponent("login.LoginPage"); const LoginHeader = sdk.getComponent("login.LoginHeader"); const LoginFooter = sdk.getComponent("login.LoginFooter"); const ServerConfig = sdk.getComponent("login.ServerConfig"); @@ -233,12 +234,12 @@ module.exports = React.createClass({ return ( -
+
{ resetPasswordJsx }
-
+ ); }, }); diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js index eb131989a8..f5f4f8cd69 100644 --- a/src/components/structures/login/Login.js +++ b/src/components/structures/login/Login.js @@ -329,8 +329,7 @@ module.exports = React.createClass({ render: function() { const Loader = sdk.getComponent("elements.Spinner"); - const LoginPageHeader = sdk.getComponent("login.LoginPageHeader"); - const LoginPageFooter = sdk.getComponent("login.LoginPageFooter"); + const LoginPage = sdk.getComponent("login.LoginPage"); const LoginHeader = sdk.getComponent("login.LoginHeader"); const LoginFooter = sdk.getComponent("login.LoginFooter"); const ServerConfig = sdk.getComponent("login.ServerConfig"); @@ -367,8 +366,7 @@ module.exports = React.createClass({ } return ( -
- +
@@ -389,8 +387,7 @@ module.exports = React.createClass({
- -
+ ); }, }); diff --git a/src/components/structures/login/PostRegistration.js b/src/components/structures/login/PostRegistration.js index 194995150c..184356e852 100644 --- a/src/components/structures/login/PostRegistration.js +++ b/src/components/structures/login/PostRegistration.js @@ -59,9 +59,10 @@ module.exports = React.createClass({ render: function() { const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName'); const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar'); + const LoginPage = sdk.getComponent('login.LoginPage'); const LoginHeader = sdk.getComponent('login.LoginHeader'); return ( -
+
@@ -74,7 +75,7 @@ module.exports = React.createClass({ { this.state.errorString }
-
+ ); }, }); diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js index db488ea237..8151c1e65c 100644 --- a/src/components/structures/login/Registration.js +++ b/src/components/structures/login/Registration.js @@ -322,6 +322,7 @@ module.exports = React.createClass({ render: function() { const LoginHeader = sdk.getComponent('login.LoginHeader'); const LoginFooter = sdk.getComponent('login.LoginFooter'); + const LoginPage = sdk.getComponent('login.LoginPage'); const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth'); const Spinner = sdk.getComponent("elements.Spinner"); const ServerConfig = sdk.getComponent('views.login.ServerConfig'); @@ -385,7 +386,7 @@ module.exports = React.createClass({ ); } return ( -
+
-
+ ); }, }); diff --git a/src/components/views/login/LoginPage.js b/src/components/views/login/LoginPage.js new file mode 100644 index 0000000000..a07997727b --- /dev/null +++ b/src/components/views/login/LoginPage.js @@ -0,0 +1,58 @@ +/* +Copyright 2015, 2016 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. +*/ + +'use strict'; + +import UserSettingsStore from '../../../UserSettingsStore'; + +const React = require('react'); + +module.exports = React.createClass({ + displayName: 'LoginPage', + + render: function() { + if (UserSettingsStore.getTheme() === 'status') { + return ( +
+
+ Status +
+
+
+

Status Community Chat

+
+ A safer, decentralised communication platform powered by Riot +
+
+ { this.props.children } +
+

This channel is for our development community.

+

Interested in SNT and discussions on the cryptocurrency market?

+

Join Telegram Chat

+
+
+
+ ); + } + else { + return ( +
+ { this.props.children } +
+ ); + } + }, +}); diff --git a/src/components/views/login/LoginPageFooter.js b/src/components/views/login/LoginPageFooter.js deleted file mode 100644 index e4eca9b8b3..0000000000 --- a/src/components/views/login/LoginPageFooter.js +++ /dev/null @@ -1,30 +0,0 @@ -/* -Copyright 2015, 2016 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. -*/ - -'use strict'; - -import { _t } from '../../../languageHandler'; -import React from 'react'; - -module.exports = React.createClass({ - displayName: 'LoginPageFooter', - - render: function() { - return ( -
- ); - }, -}); diff --git a/src/components/views/login/LoginPageHeader.js b/src/components/views/login/LoginPageHeader.js deleted file mode 100644 index bef7fa5e0b..0000000000 --- a/src/components/views/login/LoginPageHeader.js +++ /dev/null @@ -1,47 +0,0 @@ -/* -Copyright 2015, 2016 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. -*/ - -'use strict'; - -import UserSettingsStore from '../../../UserSettingsStore'; - -const React = require('react'); - -module.exports = React.createClass({ - displayName: 'LoginPageHeader', - - render: function() { - let themeBranding; - if (UserSettingsStore.getTheme() === 'status') { - themeBranding =
-
- Status -
-
-

Status Community Chat

-
- A safer, decentralised communication platform powered by Riot -
-
-
; - } - else { - themeBranding =
; - } - - return themeBranding; - }, -});