mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 20:38:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

switch to a LoginPage wrapper component

Browse source 
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
This commit is contained in:
Matthew Hodgson 2017-10-24 23:37:26 +01:00
parent f09fbccc19
commit 26e8b2c1b3
7 changed files with 70 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/structures/login/ForgotPassword.js
View file

@ -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 (
<div className="mx_Login">
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
{ resetPasswordJsx }
</div>
</div>
</LoginPage>
);
},
});

9
src/components/structures/login/Login.js
View file

@ -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 (
<div className="mx_Login">
<LoginPageHeader />
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
<div>
@ -389,8 +387,7 @@ module.exports = React.createClass({
<LoginFooter />
</div>
</div>
<LoginPageFooter />
</div>
</LoginPage>
);
},
});

5
src/components/structures/login/PostRegistration.js
View file

@ -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 (
<div className="mx_Login">
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
<div className="mx_Login_profile">
@ -74,7 +75,7 @@ module.exports = React.createClass({
{ this.state.errorString }
</div>
</div>
</div>
</LoginPage>
);
},
});

5
src/components/structures/login/Registration.js
View file

@ -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 (
<div className="mx_Login">
<LoginPage>
<div className="mx_Login_box">
<LoginHeader
icon={this.state.teamSelected ?
@ -401,7 +402,7 @@ module.exports = React.createClass({
{ returnToAppJsx }
<LoginFooter />
</div>
</div>
</LoginPage>
);
},
});

58
src/components/views/login/LoginPage.js Normal file
View file

@ -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 (
<div className="mx_StatusLogin">
<div className="mx_StatusLogin_brand">
<img src="themes/status/img/logo.svg" alt="Status" width="221" height="53"/>
</div>
<div className="mx_StatusLogin_content">
<div className="mx_StatusLogin_header">
<h1>Status Community Chat</h1>
<div className="mx_StatusLogin_subtitle">
A safer, decentralised communication platform <a href="https://riot.im">powered by Riot</a>
</div>
</div>
{ this.props.children }
<div className="mx_StatusLogin_footer">
<p>This channel is for our development community.</p>
<p>Interested in SNT and discussions on the cryptocurrency market?</p>
<p><a href="#" className="mx_StatusLogin_footer_cta">Join Telegram Chat</a></p>
</div>
</div>
</div>
);
}
else {
return (
<div className="mx_Login">
{ this.props.children }
</div>
);
}
},
});

30
src/components/views/login/LoginPageFooter.js
View file

@ -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 (
<div/>
);
},
});

47
src/components/views/login/LoginPageHeader.js
View file

@ -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 = <div>
<div className="mx_LoginPageHeader_brand">
<img src="themes/status/img/logo.svg" alt="Status" width="221" height="53"/>
</div>
<div className="mx_LoginPageHeader_title">
<h1>Status Community Chat</h1>
<div className="mx_LoginPageHeader_subtitle">
A safer, decentralised communication platform <a href="https://riot.im">powered by Riot</a>
</div>
</div>
</div>;
}
else {
themeBranding = <div/>;
}
return themeBranding;
},
});