Rename LoginPage, Header, Footer views to Auth*
This commit is contained in:
parent
c7354f483b
commit
3bd765f63f
12 changed files with 126 additions and 73 deletions
|
@ -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";
|
||||||
|
|
|
@ -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;
|
||||||
|
|
28
res/css/views/auth/_AuthFooter.scss
Normal file
28
res/css/views/auth/_AuthFooter.scss
Normal 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;
|
||||||
|
}
|
25
res/css/views/auth/_AuthHeader.scss
Normal file
25
res/css/views/auth/_AuthHeader.scss
Normal 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%
|
||||||
|
}
|
32
res/css/views/auth/_AuthPage.scss
Normal file
32
res/css/views/auth/_AuthPage.scss
Normal 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;
|
||||||
|
}
|
|
@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
|
@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
|
@ -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>
|
||||||
);
|
);
|
Loading…
Reference in a new issue