2018-05-25 14:30:27 +02:00
const React = require ( 'react' ) ;
const { connect } = require ( 'react-redux' ) ;
const { bridge } = require ( 'electron' ) . remote . require ( './bridge' ) ;
const { themeStyle } = require ( '../theme.js' ) ;
const { _ } = require ( 'lib/locale.js' ) ;
const ClipperServer = require ( 'lib/ClipperServer' ) ;
const Setting = require ( 'lib/models/Setting' ) ;
2018-09-28 20:24:57 +02:00
const { clipboard } = require ( 'electron' ) ;
2019-09-11 01:53:01 +02:00
const ExtensionBadge = require ( './ExtensionBadge.min' ) ;
2018-05-25 14:30:27 +02:00
class ClipperConfigScreenComponent extends React . Component {
2018-09-28 20:24:57 +02:00
constructor ( ) {
super ( ) ;
this . copyToken _click = this . copyToken _click . bind ( this ) ;
}
2018-05-25 14:30:27 +02:00
disableClipperServer _click ( ) {
Setting . setValue ( 'clipperServer.autoStart' , false ) ;
ClipperServer . instance ( ) . stop ( ) ;
}
enableClipperServer _click ( ) {
Setting . setValue ( 'clipperServer.autoStart' , true ) ;
ClipperServer . instance ( ) . start ( ) ;
}
chromeButton _click ( ) {
2019-07-29 14:13:23 +02:00
bridge ( ) . openExternal ( 'https://chrome.google.com/webstore/detail/joplin-web-clipper/alofnhikmmkdbbbgpnglcpdollgjjfek' ) ;
2018-05-25 14:30:27 +02:00
}
firefoxButton _click ( ) {
2019-07-29 14:13:23 +02:00
bridge ( ) . openExternal ( 'https://addons.mozilla.org/en-US/firefox/addon/joplin-web-clipper/' ) ;
2018-05-25 14:30:27 +02:00
}
2018-09-28 20:24:57 +02:00
copyToken _click ( ) {
clipboard . writeText ( this . props . apiToken ) ;
alert ( _ ( 'Token has been copied to the clipboard!' ) ) ;
}
2018-05-25 14:30:27 +02:00
render ( ) {
const theme = themeStyle ( this . props . theme ) ;
2018-11-08 00:37:13 +02:00
const containerStyle = Object . assign ( { } , theme . containerStyle , {
overflowY : 'scroll' ,
} ) ;
const buttonStyle = Object . assign ( { } , theme . buttonStyle , { marginRight : 10 } ) ;
2018-05-25 14:30:27 +02:00
const stepBoxStyle = {
2019-09-11 01:53:01 +02:00
border : '1px solid' ,
borderColor : theme . dividerColor ,
2018-05-25 14:30:27 +02:00
padding : 15 ,
paddingTop : 0 ,
marginBottom : 15 ,
2018-11-08 00:37:13 +02:00
backgroundColor : theme . backgroundColor ,
2018-05-25 14:30:27 +02:00
} ;
let webClipperStatusComps = [ ] ;
if ( this . props . clipperServerAutoStart ) {
2019-07-29 14:13:23 +02:00
webClipperStatusComps . push (
< p key = "text_1" style = { theme . textStyle } >
< b > { _ ( 'The web clipper service is enabled and set to auto-start.' ) } < / b >
< / p >
) ;
2018-05-25 14:30:27 +02:00
if ( this . props . clipperServer . startState === 'started' ) {
2019-07-29 14:13:23 +02:00
webClipperStatusComps . push (
< p key = "text_2" style = { theme . textStyle } >
{ _ ( 'Status: Started on port %d' , this . props . clipperServer . port ) }
< / p >
) ;
2018-05-25 14:30:27 +02:00
} else {
2019-07-29 14:13:23 +02:00
webClipperStatusComps . push (
< p key = "text_3" style = { theme . textStyle } >
{ _ ( 'Status: %s' , this . props . clipperServer . startState ) }
< / p >
) ;
2018-05-25 14:30:27 +02:00
}
2019-07-29 14:13:23 +02:00
webClipperStatusComps . push (
2019-09-11 01:53:01 +02:00
< button key = "disable_button" style = { buttonStyle } onClick = { this . disableClipperServer _click } >
2019-07-29 14:13:23 +02:00
{ _ ( 'Disable Web Clipper Service' ) }
< / button >
) ;
2018-05-25 14:30:27 +02:00
} else {
2019-07-29 14:13:23 +02:00
webClipperStatusComps . push (
< p key = "text_4" style = { theme . textStyle } >
{ _ ( 'The web clipper service is not enabled.' ) }
< / p >
) ;
webClipperStatusComps . push (
< button key = "enable_button" style = { buttonStyle } onClick = { this . enableClipperServer _click } >
{ _ ( 'Enable Web Clipper Service' ) }
< / button >
) ;
2018-05-25 14:30:27 +02:00
}
2018-09-28 20:24:57 +02:00
const apiTokenStyle = Object . assign ( { } , theme . textStyle , {
color : theme . colorFaded ,
wordBreak : 'break-all' ,
paddingTop : 10 ,
paddingBottom : 10 ,
} ) ;
2018-05-25 14:30:27 +02:00
return (
< div >
2018-11-08 00:37:13 +02:00
< div style = { containerStyle } >
2019-07-29 14:13:23 +02:00
< div style = { { padding : theme . margin } } >
2018-09-28 20:24:57 +02:00
< p style = { theme . textStyle } > { _ ( 'Joplin Web Clipper allows saving web pages and screenshots from your browser to Joplin.' ) } < / p >
< p style = { theme . textStyle } > { _ ( 'In order to use the web clipper, you need to do the following:' ) } < / p >
< div style = { stepBoxStyle } >
< p style = { theme . h1Style } > { _ ( 'Step 1: Enable the clipper service' ) } < / p >
< p style = { theme . textStyle } > { _ ( 'This service allows the browser extension to communicate with Joplin. When enabling it your firewall may ask you to give permission to Joplin to listen to a particular port.' ) } < / p >
2019-07-29 14:13:23 +02:00
< div > { webClipperStatusComps } < / div >
2018-09-28 20:24:57 +02:00
< / div >
< div style = { stepBoxStyle } >
< p style = { theme . h1Style } > { _ ( 'Step 2: Install the extension' ) } < / p >
< p style = { theme . textStyle } > { _ ( 'Download and install the relevant extension for your browser:' ) } < / p >
2019-09-11 01:53:01 +02:00
< div style = { { display : 'flex' , flexDirection : 'row' } } >
< ExtensionBadge theme = { this . props . theme } type = "firefox" url = "https://addons.mozilla.org/en-US/firefox/addon/joplin-web-clipper/" / >
< ExtensionBadge style = { { marginLeft : 10 } } theme = { this . props . theme } type = "chrome" url = "https://chrome.google.com/webstore/detail/joplin-web-clipper/alofnhikmmkdbbbgpnglcpdollgjjfek" / >
2018-09-28 20:24:57 +02:00
< / div >
2018-05-25 14:30:27 +02:00
< / div >
2018-09-28 20:24:57 +02:00
< div style = { stepBoxStyle } >
< p style = { theme . h1Style } > { _ ( 'Advanced options' ) } < / p >
< p style = { theme . textStyle } > { _ ( 'Authorisation token:' ) } < / p >
2019-07-29 14:13:23 +02:00
< p style = { apiTokenStyle } >
{ this . props . apiToken } { ' ' }
< a style = { theme . urlStyle } href = "#" onClick = { this . copyToken _click } >
{ _ ( 'Copy token' ) }
< / a >
< / p >
2018-09-28 20:24:57 +02:00
< p style = { theme . textStyle } > { _ ( 'This authorisation token is only needed to allow third-party applications to access Joplin.' ) } < / p >
2018-05-25 14:30:27 +02:00
< / div >
< / div >
< / div >
< / div >
) ;
}
}
2019-07-29 14:13:23 +02:00
const mapStateToProps = state => {
2018-05-25 14:30:27 +02:00
return {
theme : state . settings . theme ,
clipperServer : state . clipperServer ,
clipperServerAutoStart : state . settings [ 'clipperServer.autoStart' ] ,
2018-09-28 20:24:57 +02:00
apiToken : state . settings [ 'api.token' ] ,
2018-05-25 14:30:27 +02:00
} ;
} ;
const ClipperConfigScreen = connect ( mapStateToProps ) ( ClipperConfigScreenComponent ) ;
2018-11-08 00:37:13 +02:00
module . exports = { ClipperConfigScreen } ;