Rename LoginPage, Header, Footer views to Auth*

This commit is contained in:
J. Ryan Stinnett 2019-01-21 18:33:17 -06:00
parent c7354f483b
commit 3bd765f63f
12 changed files with 126 additions and 73 deletions

View file

@ -24,6 +24,9 @@
@import "./structures/_ViewSource.scss"; @import "./structures/_ViewSource.scss";
@import "./structures/auth/_Login.scss"; @import "./structures/auth/_Login.scss";
@import "./views/auth/_AuthButtons.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/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_ServerConfig.scss"; @import "./views/auth/_ServerConfig.scss";
@import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_BaseAvatar.scss";

View file

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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. 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 { .mx_Login_box {
width: 300px; width: 300px;
min-height: 450px; min-height: 450px;
@ -39,16 +23,6 @@ limitations under the License.
margin: auto; margin: auto;
} }
.mx_Login_logo {
text-align: center;
height: 150px;
margin-bottom: 45px;
}
.mx_Login_logo img {
max-height: 100%
}
.mx_Login_support { .mx_Login_support {
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
@ -115,19 +89,6 @@ limitations under the License.
color: $primary-fg-color; 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 { .mx_Login_prompt {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;

View file

@ -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;
}

View file

@ -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%
}

View file

@ -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;
}

View file

@ -183,9 +183,9 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
const LoginPage = sdk.getComponent("auth.LoginPage"); const AuthPage = sdk.getComponent("auth.AuthPage");
const LoginHeader = sdk.getComponent("auth.LoginHeader"); const AuthHeader = sdk.getComponent("auth.AuthHeader");
const LoginFooter = sdk.getComponent("auth.LoginFooter"); const AuthFooter = sdk.getComponent("auth.AuthFooter");
const ServerConfig = sdk.getComponent("auth.ServerConfig"); const ServerConfig = sdk.getComponent("auth.ServerConfig");
const Spinner = sdk.getComponent("elements.Spinner"); const Spinner = sdk.getComponent("elements.Spinner");
@ -272,7 +272,7 @@ module.exports = React.createClass({
{ _t('Create an account') } { _t('Create an account') }
</a> </a>
<LanguageSelector /> <LanguageSelector />
<LoginFooter /> <AuthFooter />
</div> </div>
</div> </div>
); );
@ -280,12 +280,12 @@ module.exports = React.createClass({
return ( return (
<LoginPage> <AuthPage>
<div className="mx_Login_box"> <div className="mx_Login_box">
<LoginHeader /> <AuthHeader />
{ resetPasswordJsx } { resetPasswordJsx }
</div> </div>
</LoginPage> </AuthPage>
); );
}, },
}); });

View file

@ -515,9 +515,9 @@ module.exports = React.createClass({
render: function() { render: function() {
const Loader = sdk.getComponent("elements.Spinner"); const Loader = sdk.getComponent("elements.Spinner");
const LoginPage = sdk.getComponent("auth.LoginPage"); const AuthPage = sdk.getComponent("auth.AuthPage");
const LoginHeader = sdk.getComponent("auth.LoginHeader"); const AuthHeader = sdk.getComponent("auth.AuthHeader");
const LoginFooter = sdk.getComponent("auth.LoginFooter"); const AuthFooter = sdk.getComponent("auth.AuthFooter");
const ServerConfig = sdk.getComponent("auth.ServerConfig"); const ServerConfig = sdk.getComponent("auth.ServerConfig");
const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null; const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
@ -558,9 +558,9 @@ module.exports = React.createClass({
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector'); const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return ( return (
<LoginPage> <AuthPage>
<div className="mx_Login_box"> <div className="mx_Login_box">
<LoginHeader /> <AuthHeader />
<div> <div>
{ header } { header }
{ errorTextSection } { errorTextSection }
@ -571,10 +571,10 @@ module.exports = React.createClass({
</a> </a>
{ loginAsGuestJsx } { loginAsGuestJsx }
<LanguageSelector /> <LanguageSelector />
<LoginFooter /> <AuthFooter />
</div> </div>
</div> </div>
</LoginPage> </AuthPage>
); );
}, },
}); });

View file

@ -60,12 +60,12 @@ module.exports = React.createClass({
render: function() { render: function() {
const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName'); const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar'); const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
const LoginPage = sdk.getComponent('auth.LoginPage'); const AuthPage = sdk.getComponent('auth.AuthPage');
const LoginHeader = sdk.getComponent('auth.LoginHeader'); const AuthHeader = sdk.getComponent('auth.AuthHeader');
return ( return (
<LoginPage> <AuthPage>
<div className="mx_Login_box"> <div className="mx_Login_box">
<LoginHeader /> <AuthHeader />
<div className="mx_Login_profile"> <div className="mx_Login_profile">
{ _t('Set a display name:') } { _t('Set a display name:') }
<ChangeDisplayName /> <ChangeDisplayName />
@ -76,7 +76,7 @@ module.exports = React.createClass({
{ this.state.errorString } { this.state.errorString }
</div> </div>
</div> </div>
</LoginPage> </AuthPage>
); );
}, },
}); });

View file

@ -396,9 +396,9 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
const LoginHeader = sdk.getComponent('auth.LoginHeader'); const AuthHeader = sdk.getComponent('auth.AuthHeader');
const LoginFooter = sdk.getComponent('auth.LoginFooter'); const AuthFooter = sdk.getComponent('auth.AuthFooter');
const LoginPage = sdk.getComponent('auth.LoginPage'); const AuthPage = sdk.getComponent('auth.AuthPage');
const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth'); const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
const Spinner = sdk.getComponent("elements.Spinner"); const Spinner = sdk.getComponent("elements.Spinner");
const ServerConfig = sdk.getComponent('views.auth.ServerConfig'); const ServerConfig = sdk.getComponent('views.auth.ServerConfig');
@ -474,9 +474,9 @@ module.exports = React.createClass({
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector'); const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return ( return (
<LoginPage> <AuthPage>
<div className="mx_Login_box"> <div className="mx_Login_box">
<LoginHeader <AuthHeader
icon={this.state.teamSelected ? icon={this.state.teamSelected ?
this.props.teamServerConfig.teamServerURL + "/static/common/" + this.props.teamServerConfig.teamServerURL + "/static/common/" +
this.state.teamSelected.domain + "/icon.png" : this.state.teamSelected.domain + "/icon.png" :
@ -487,9 +487,9 @@ module.exports = React.createClass({
{ signIn } { signIn }
{ errorText } { errorText }
<LanguageSelector /> <LanguageSelector />
<LoginFooter /> <AuthFooter />
</div> </div>
</LoginPage> </AuthPage>
); );
}, },
}); });

View file

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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'; import React from 'react';
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'LoginFooter', displayName: 'AuthFooter',
render: function() { render: function() {
return ( return (
<div className="mx_Login_links"> <div className="mx_AuthFooter">
<a href="https://matrix.org">{ _t("powered by Matrix") }</a> <a href="https://matrix.org">{ _t("powered by Matrix") }</a>
</div> </div>
); );

View file

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -19,13 +20,15 @@ limitations under the License.
const React = require('react'); const React = require('react');
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'LoginHeader', displayName: 'AuthHeader',
render: function() { render: function() {
return ( return (
<div className="mx_Login_logo"> <div className="mx_AuthHeader">
<div className="mx_AuthHeader_logo">
Matrix Matrix
</div> </div>
</div>
); );
}, },
}); });

View file

@ -20,11 +20,11 @@ limitations under the License.
const React = require('react'); const React = require('react');
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'LoginPage', displayName: 'AuthPage',
render: function() { render: function() {
return ( return (
<div className="mx_Login"> <div className="mx_AuthPage">
{ this.props.children } { this.props.children }
</div> </div>
); );