imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/experimental' into dbkr/delint_compatpage_loggedinview

Browse source
This commit is contained in:
David Baker 2019-01-22 10:13:27 +00:00
commit ba1aa2037d
37 changed files with 270 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/structures/InteractiveAuth.js
View file

@ -20,7 +20,7 @@ const InteractiveAuth = Matrix.InteractiveAuth;
import React from 'react';
import PropTypes from 'prop-types';
import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
export default React.createClass({
displayName: 'InteractiveAuth',

10
src/components/structures/MatrixChat.js
View file

@ -183,7 +183,7 @@ export default React.createClass({
register_is_url: null,
register_id_sid: null,
// Parameters used for setting up the login/registration views
// Parameters used for setting up the authentication views
defaultServerName: this.props.config.default_server_name,
defaultHsUrl: this.props.config.default_hs_url,
defaultIsUrl: this.props.config.default_is_url,
@ -1851,7 +1851,7 @@ export default React.createClass({
// needs to be before normal PageTypes as you are logged in technically
if (this.state.view === VIEWS.POST_REGISTRATION) {
const PostRegistration = sdk.getComponent('structures.login.PostRegistration');
const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
return (
<PostRegistration
onComplete={this.onFinishPostRegistration} />
@ -1906,7 +1906,7 @@ export default React.createClass({
}
if (this.state.view === VIEWS.REGISTER) {
const Registration = sdk.getComponent('structures.login.Registration');
const Registration = sdk.getComponent('structures.auth.Registration');
return (
<Registration
clientSecret={this.state.register_client_secret}
@ -1935,7 +1935,7 @@ export default React.createClass({
if (this.state.view === VIEWS.FORGOT_PASSWORD) {
const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
const ForgotPassword = sdk.getComponent('structures.auth.ForgotPassword');
return (
<ForgotPassword
defaultServerName={this.getDefaultServerName()}
@ -1951,7 +1951,7 @@ export default React.createClass({
}
if (this.state.view === VIEWS.LOGIN) {
const Login = sdk.getComponent('structures.login.Login');
const Login = sdk.getComponent('structures.auth.Login');
return (
<Login
onLoggedIn={Lifecycle.setLoggedIn}

4
src/components/structures/RoomView.js
View file

@ -1757,8 +1757,8 @@ module.exports = React.createClass({
}
if (MatrixClientPeg.get().isGuest()) {
const LoginBox = sdk.getComponent('structures.LoginBox');
messageComposer = <LoginBox />;
const AuthButtons = sdk.getComponent('views.auth.AuthButtons');
messageComposer = <AuthButtons />;
}
// TODO: Why aren't we storing the term/scope/count in this format

22
src/components/structures/login/ForgotPassword.js → src/components/structures/auth/ForgotPassword.js
View file

@ -183,10 +183,10 @@ 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");
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");
let resetPasswordJsx;
@ -234,7 +234,7 @@ module.exports = React.createClass({
errorText = <div className="mx_Login_error">{ err }</div>;
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
resetPasswordJsx = (
<div>
@ -272,7 +272,7 @@ module.exports = React.createClass({
{ _t('Create an account') }
</a>
<LanguageSelector />
<LoginFooter />
<AuthFooter />
</div>
</div>
);
@ -280,12 +280,10 @@ module.exports = React.createClass({
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
{ resetPasswordJsx }
</div>
</LoginPage>
<AuthPage>
<AuthHeader />
{ resetPasswordJsx }
</AuthPage>
);
},
});

0
src/components/structures/login/LanguageSelector.js → src/components/structures/auth/LanguageSelector.js
View file

56
src/components/structures/login/Login.js → src/components/structures/auth/Login.js
View file

@ -1,7 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Copyright 2018, 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.
@ -24,7 +24,6 @@ import { _t, _td } from '../../../languageHandler';
import sdk from '../../../index';
import Login from '../../../Login';
import SdkConfig from '../../../SdkConfig';
import SettingsStore from "../../../settings/SettingsStore";
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
import { AutoDiscovery } from "matrix-js-sdk";
@ -487,7 +486,7 @@ module.exports = React.createClass({
},
_renderPasswordStep: function() {
const PasswordLogin = sdk.getComponent('login.PasswordLogin');
const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
return (
<PasswordLogin
onSubmit={this.onPasswordLogin}
@ -516,10 +515,10 @@ module.exports = React.createClass({
render: function() {
const Loader = sdk.getComponent("elements.Spinner");
const LoginPage = sdk.getComponent("login.LoginPage");
const LoginHeader = sdk.getComponent("login.LoginHeader");
const LoginFooter = sdk.getComponent("login.LoginFooter");
const ServerConfig = sdk.getComponent("login.ServerConfig");
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 ? <div className="mx_Login_loader"><Loader /></div> : null;
const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@ -533,7 +532,6 @@ module.exports = React.createClass({
}
let serverConfig;
let header;
if (!SdkConfig.get()['disable_custom_urls']) {
serverConfig = <ServerConfig ref="serverConfig"
@ -546,15 +544,7 @@ module.exports = React.createClass({
delayTimeMs={1000} />;
}
// FIXME: remove status.im theme tweaks
const theme = SettingsStore.getValue("theme");
if (theme !== "status") {
header = <h2>{ _t('Sign in') } { loader }</h2>;
} else {
if (!errorText) {
header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
}
}
const header = <h2>{ _t('Sign in') } { loader }</h2>;
let errorTextSection;
if (errorText) {
@ -565,26 +555,24 @@ module.exports = React.createClass({
);
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
<div>
{ header }
{ errorTextSection }
{ this.componentForStep(this.state.currentFlow) }
{ serverConfig }
<a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
{ _t('Create an account') }
</a>
{ loginAsGuestJsx }
<LanguageSelector />
<LoginFooter />
</div>
<AuthPage>
<AuthHeader />
<div>
{ header }
{ errorTextSection }
{ this.componentForStep(this.state.currentFlow) }
{ serverConfig }
<a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
{ _t('Create an account') }
</a>
{ loginAsGuestJsx }
<LanguageSelector />
<AuthFooter />
</div>
</LoginPage>
</AuthPage>
);
},
});

28
src/components/structures/login/PostRegistration.js → src/components/structures/auth/PostRegistration.js
View file

@ -60,23 +60,21 @@ 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');
const AuthPage = sdk.getComponent('auth.AuthPage');
const AuthHeader = sdk.getComponent('auth.AuthHeader');
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader />
<div className="mx_Login_profile">
{ _t('Set a display name:') }
<ChangeDisplayName />
{ _t('Upload an avatar:') }
<ChangeAvatar
initialAvatarUrl={this.state.avatarUrl} />
<button onClick={this.props.onComplete}>{ _t('Continue') }</button>
{ this.state.errorString }
</div>
<AuthPage>
<AuthHeader />
<div className="mx_Login_profile">
{ _t('Set a display name:') }
<ChangeDisplayName />
{ _t('Upload an avatar:') }
<ChangeAvatar
initialAvatarUrl={this.state.avatarUrl} />
<button onClick={this.props.onComplete}>{ _t('Continue') }</button>
{ this.state.errorString }
</div>
</LoginPage>
</AuthPage>
);
},
});

61
src/components/structures/login/Registration.js → src/components/structures/auth/Registration.js
View file

@ -1,7 +1,7 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Copyright 2018, 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.
@ -24,11 +24,10 @@ import PropTypes from 'prop-types';
import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg';
import RegistrationForm from '../../views/login/RegistrationForm';
import RegistrationForm from '../../views/auth/RegistrationForm';
import RtsClient from '../../../RtsClient';
import { _t, _td } from '../../../languageHandler';
import SdkConfig from '../../../SdkConfig';
import SettingsStore from "../../../settings/SettingsStore";
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
const MIN_PASSWORD_LENGTH = 6;
@ -397,14 +396,12 @@ 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 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.login.ServerConfig');
const theme = SettingsStore.getValue("theme");
const ServerConfig = sdk.getComponent('views.auth.ServerConfig');
let registerBody;
if (this.state.doingUIAuth) {
@ -458,47 +455,39 @@ module.exports = React.createClass({
);
}
let header;
let errorText;
// FIXME: remove hardcoded Status team tweaks at some point
const err = this.state.errorText || this.props.defaultServerDiscoveryError;
if (theme === 'status' && err) {
header = <div className="mx_Login_error">{ err }</div>;
} else {
header = <h2>{ _t('Create an account') }</h2>;
if (err) {
errorText = <div className="mx_Login_error">{ err }</div>;
}
const header = <h2>{ _t('Create an account') }</h2>;
if (err) {
errorText = <div className="mx_Login_error">{ err }</div>;
}
let signIn;
if (!this.state.doingUIAuth) {
signIn = (
<a className="mx_Login_create" onClick={this.onLoginClick} href="#">
{ theme === 'status' ? _t('Sign in') : _t('I already have an account') }
{ _t('I already have an account') }
</a>
);
}
const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<LoginPage>
<div className="mx_Login_box">
<LoginHeader
icon={this.state.teamSelected ?
this.props.teamServerConfig.teamServerURL + "/static/common/" +
this.state.teamSelected.domain + "/icon.png" :
null}
/>
{ header }
{ registerBody }
{ signIn }
{ errorText }
<LanguageSelector />
<LoginFooter />
</div>
</LoginPage>
<AuthPage>
<AuthHeader
icon={this.state.teamSelected ?
this.props.teamServerConfig.teamServerURL + "/static/common/" +
this.state.teamSelected.domain + "/icon.png" :
null}
/>
{ header }
{ registerBody }
{ signIn }
{ errorText }
<LanguageSelector />
<AuthFooter />
</AuthPage>
);
},
});

18
src/components/structures/LoginBox.js → src/components/views/auth/AuthButtons.js
View file

@ -1,6 +1,6 @@
/*
Copyright 2017 Vector Creations Ltd
Copyright 2018 New Vector Ltd
Copyright 2018, 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.
@ -18,12 +18,12 @@ limitations under the License.
'use strict';
const React = require('react');
import { _t } from '../../languageHandler';
const dis = require('../../dispatcher');
const AccessibleButton = require('../../components/views/elements/AccessibleButton');
import { _t } from '../../../languageHandler';
const dis = require('../../../dispatcher');
const AccessibleButton = require('../elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'LoginBox',
displayName: 'AuthButtons',
propTypes: {
},
@ -38,18 +38,18 @@ module.exports = React.createClass({
render: function() {
const loginButton = (
<div className="mx_LoginBox_loginButton_wrapper">
<AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
<div className="mx_AuthButtons_loginButton_wrapper">
<AccessibleButton className="mx_AuthButtons_loginButton" element="button" onClick={this.onLoginClick}>
{ _t("Login") }
</AccessibleButton>
<AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
<AccessibleButton className="mx_AuthButtons_registerButton" element="button" onClick={this.onRegisterClick}>
{ _t("Register") }
</AccessibleButton>
</div>
);
return (
<div className="mx_LoginBox">
<div className="mx_AuthButtons">
{ loginButton }
</div>
);

5
src/components/views/login/LoginFooter.js → src/components/views/auth/AuthFooter.js
View file

@ -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 (
<div className="mx_Login_links">
<div className="mx_AuthFooter">
<a href="https://matrix.org">{ _t("powered by Matrix") }</a>
</div>
);

9
src/components/views/login/LoginHeader.js → src/components/views/auth/AuthHeader.js
View file

@ -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 (
<div className="mx_Login_logo">
Matrix
<div className="mx_AuthHeader">
<div className="mx_AuthHeader_logo">
Matrix
</div>
</div>
);
},

34
src/components/views/auth/AuthPage.js Normal file
View file

@ -0,0 +1,34 @@
/*
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.
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';
const React = require('react');
module.exports = React.createClass({
displayName: 'AuthPage',
render: function() {
return (
<div className="mx_AuthPage">
<div className="mx_AuthPage_modal">
{ this.props.children }
</div>
</div>
);
},
});

0
src/components/views/login/CaptchaForm.js → src/components/views/auth/CaptchaForm.js
View file

0
src/components/views/login/CountryDropdown.js → src/components/views/auth/CountryDropdown.js
View file

0
src/components/views/login/CustomServerDialog.js → src/components/views/auth/CustomServerDialog.js
View file

2
src/components/views/login/InteractiveAuthEntryComponents.js → src/components/views/auth/InteractiveAuthEntryComponents.js
View file

@ -187,7 +187,7 @@ export const RecaptchaAuthEntry = React.createClass({
return <Loader />;
}
const CaptchaForm = sdk.getComponent("views.login.CaptchaForm");
const CaptchaForm = sdk.getComponent("views.auth.CaptchaForm");
const sitePublicKey = this.props.stageParams.public_key;
let errorSection;

2
src/components/views/login/PasswordLogin.js → src/components/views/auth/PasswordLogin.js
View file

@ -201,7 +201,7 @@ class PasswordLogin extends React.Component {
disabled={disabled}
/>;
case PasswordLogin.LOGIN_FIELD_PHONE: {
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
classes.mx_Login_phoneNumberField = true;
classes.mx_Login_field_has_prefix = true;
classes.error = this.props.loginIncorrect && !this.state.phoneNumber;

2
src/components/views/login/RegistrationForm.js → src/components/views/auth/RegistrationForm.js
View file

@ -323,7 +323,7 @@ module.exports = React.createClass({
}
}
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
let phoneSection;
if (!SdkConfig.get().disable_3pid_login) {
const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ? _t("Mobile phone number") : _t("Mobile phone number (optional)");

2
src/components/views/login/ServerConfig.js → src/components/views/auth/ServerConfig.js
View file

@ -138,7 +138,7 @@ module.exports = React.createClass({
},
showHelpPopup: function() {
const CustomServerDialog = sdk.getComponent('login.CustomServerDialog');
const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
},

59
src/components/views/login/LoginPage.js
View file

@ -1,59 +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 SettingsStore from "../../../settings/SettingsStore";
const React = require('react');
module.exports = React.createClass({
displayName: 'LoginPage',
render: function() {
// FIXME: this should be turned into a proper skin with a StatusLoginPage component
if (SettingsStore.getValue("theme") === '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="https://t.me/StatusNetworkChat" target="_blank" className="mx_StatusLogin_footer_cta">Join Telegram Chat</a></p>
</div>
</div>
</div>
);
} else {
return (
<div className="mx_Login">
{ this.props.children }
</div>
);
}
},
});

2
src/components/views/settings/AddPhoneNumber.js
View file

@ -141,7 +141,7 @@ export default withMatrixClient(React.createClass({
return <div />;
}
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
// XXX: This CSS relies on the CSS surrounding it in UserSettings as its in
// a tabular format to align the submit buttons
return (

1
src/i18n/strings/en_EN.json
View file

@ -1328,7 +1328,6 @@
"Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
"Sign in with single sign-on": "Sign in with single sign-on",
"Try the app first": "Try the app first",
"Sign in to get started": "Sign in to get started",
"Failed to fetch avatar URL": "Failed to fetch avatar URL",
"Set a display name:": "Set a display name:",
"Upload an avatar:": "Upload an avatar:",

4
src/stores/LifecycleStore.js
View file

@ -22,8 +22,8 @@ const INITIAL_STATE = {
};
/**
* A class for storing application state to do with login/registration. This is a simple
* flux store that listens for actions and updates its state accordingly, informing any
* A class for storing application state to do with authentication. This is a simple flux
* store that listens for actions and updates its state accordingly, informing any
* listeners (views) of state changes.
*/
class LifecycleStore extends Store {