You've already forked joplin
mirror of
https://github.com/laurent22/joplin.git
synced 2025-10-31 00:07:48 +02:00
c63c6370b5
The goal is to make the command system more modular, so each command can be defined as a single object that includes a declaration (name, label, etc.) and a runtime (to execute the command, test if it should be enabled, etc.) Utility methods are provided to convert a command to a menu item or a toolbar button, thus reducing duplicated and boiler plate code across the codebase (often the menu item logic was duplicated in the toolbar button logic and vice versa). The goal is to make it easier to add new commands (and associated menu item and toolbar buttons) and to call them from anywhere. This is also useful for plugins, which can also easily define new commands. Could also allow creating a command palette.
63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
const React = require('react');
|
|
const { connect } = require('react-redux');
|
|
const { bridge } = require('electron').remote.require('./bridge');
|
|
const { Header } = require('./Header/Header.min.js');
|
|
const { themeStyle } = require('lib/theme');
|
|
const { _ } = require('lib/locale.js');
|
|
const Shared = require('lib/components/shared/dropbox-login-shared');
|
|
|
|
class DropboxLoginScreenComponent extends React.Component {
|
|
constructor() {
|
|
super();
|
|
|
|
this.shared_ = new Shared(this, msg => bridge().showInfoMessageBox(msg), msg => bridge().showErrorMessageBox(msg));
|
|
}
|
|
|
|
UNSAFE_componentWillMount() {
|
|
this.shared_.refreshUrl();
|
|
}
|
|
|
|
render() {
|
|
const style = this.props.style;
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
const headerStyle = Object.assign({}, theme.headerStyle, { width: style.width });
|
|
const containerStyle = Object.assign({}, theme.containerStyle, {
|
|
padding: theme.margin,
|
|
height: style.height - theme.headerHeight - theme.margin * 2,
|
|
});
|
|
|
|
const inputStyle = Object.assign({}, theme.inputStyle, { width: 500 });
|
|
|
|
return (
|
|
<div>
|
|
<Header style={headerStyle} />
|
|
<div style={containerStyle}>
|
|
<p style={theme.textStyle}>{_('To allow Joplin to synchronise with Dropbox, please follow the steps below:')}</p>
|
|
<p style={theme.textStyle}>{_('Step 1: Open this URL in your browser to authorise the application:')}</p>
|
|
<a style={theme.textStyle} href="#" onClick={this.shared_.loginUrl_click}>
|
|
{this.state.loginUrl}
|
|
</a>
|
|
<p style={theme.textStyle}>{_('Step 2: Enter the code provided by Dropbox:')}</p>
|
|
<p>
|
|
<input type="text" value={this.state.authCode} onChange={this.shared_.authCodeInput_change} style={inputStyle} />
|
|
</p>
|
|
<button disabled={this.state.checkingAuthToken} onClick={this.shared_.submit_click}>
|
|
{_('Submit')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = state => {
|
|
return {
|
|
theme: state.settings.theme,
|
|
};
|
|
};
|
|
|
|
const DropboxLoginScreen = connect(mapStateToProps)(DropboxLoginScreenComponent);
|
|
|
|
module.exports = { DropboxLoginScreen };
|