Desktop: Add Sync Wizard dialog

.eslintignore

@@ -573,6 +573,9 @@ packages/app-desktop/gui/Sidebar/styles/index.js.map
 packages/app-desktop/gui/StatusScreen/StatusScreen.d.ts
 packages/app-desktop/gui/StatusScreen/StatusScreen.js
 packages/app-desktop/gui/StatusScreen/StatusScreen.js.map
+packages/app-desktop/gui/SyncWizard/Dialog.d.ts
+packages/app-desktop/gui/SyncWizard/Dialog.js
+packages/app-desktop/gui/SyncWizard/Dialog.js.map
 packages/app-desktop/gui/TagList.d.ts
 packages/app-desktop/gui/TagList.js
 packages/app-desktop/gui/TagList.js.map
@@ -870,6 +873,9 @@ packages/lib/SyncTargetJoplinServer.js.map
 packages/lib/SyncTargetOneDrive.d.ts
 packages/lib/SyncTargetOneDrive.js
 packages/lib/SyncTargetOneDrive.js.map
+packages/lib/SyncTargetRegistry.d.ts
+packages/lib/SyncTargetRegistry.js
+packages/lib/SyncTargetRegistry.js.map
 packages/lib/Synchronizer.d.ts
 packages/lib/Synchronizer.js
 packages/lib/Synchronizer.js.map
@@ -927,6 +933,12 @@ packages/lib/fs-driver-node.js.map
 packages/lib/fsDriver.test.d.ts
 packages/lib/fsDriver.test.js
 packages/lib/fsDriver.test.js.map
+packages/lib/hooks/useElementSize.d.ts
+packages/lib/hooks/useElementSize.js
+packages/lib/hooks/useElementSize.js.map
+packages/lib/hooks/useEventListener.d.ts
+packages/lib/hooks/useEventListener.js
+packages/lib/hooks/useEventListener.js.map
 packages/lib/htmlUtils.d.ts
 packages/lib/htmlUtils.js
 packages/lib/htmlUtils.js.map

.gitignore

@@ -558,6 +558,9 @@ packages/app-desktop/gui/Sidebar/styles/index.js.map
 packages/app-desktop/gui/StatusScreen/StatusScreen.d.ts
 packages/app-desktop/gui/StatusScreen/StatusScreen.js
 packages/app-desktop/gui/StatusScreen/StatusScreen.js.map
+packages/app-desktop/gui/SyncWizard/Dialog.d.ts
+packages/app-desktop/gui/SyncWizard/Dialog.js
+packages/app-desktop/gui/SyncWizard/Dialog.js.map
 packages/app-desktop/gui/TagList.d.ts
 packages/app-desktop/gui/TagList.js
 packages/app-desktop/gui/TagList.js.map
@@ -855,6 +858,9 @@ packages/lib/SyncTargetJoplinServer.js.map
 packages/lib/SyncTargetOneDrive.d.ts
 packages/lib/SyncTargetOneDrive.js
 packages/lib/SyncTargetOneDrive.js.map
+packages/lib/SyncTargetRegistry.d.ts
+packages/lib/SyncTargetRegistry.js
+packages/lib/SyncTargetRegistry.js.map
 packages/lib/Synchronizer.d.ts
 packages/lib/Synchronizer.js
 packages/lib/Synchronizer.js.map
@@ -912,6 +918,12 @@ packages/lib/fs-driver-node.js.map
 packages/lib/fsDriver.test.d.ts
 packages/lib/fsDriver.test.js
 packages/lib/fsDriver.test.js.map
+packages/lib/hooks/useElementSize.d.ts
+packages/lib/hooks/useElementSize.js
+packages/lib/hooks/useElementSize.js.map
+packages/lib/hooks/useEventListener.d.ts
+packages/lib/hooks/useEventListener.js
+packages/lib/hooks/useEventListener.js.map
 packages/lib/htmlUtils.d.ts
 packages/lib/htmlUtils.js
 packages/lib/htmlUtils.js.map

packages/app-cli/app/command-sync.js

@@ -10,7 +10,7 @@ const { cliUtils } = require('./cli-utils.js');
 const md5 = require('md5');
 const locker = require('proper-lockfile');
 const fs = require('fs-extra');
-const SyncTargetRegistry = require('@joplin/lib/SyncTargetRegistry');
+const SyncTargetRegistry = require('@joplin/lib/SyncTargetRegistry').default;
 const MigrationHandler = require('@joplin/lib/services/synchronizer/MigrationHandler').default;
 
 class Command extends BaseCommand {

packages/app-desktop/app.ts

@@ -114,6 +114,10 @@ interface AppStateRoute {
 	props: any;
 }
 
+export interface AppStateDialog {
+	name: string;
+}
+
 export interface AppState extends State {
 	route: AppStateRoute;
 	navHistory: any[];
@@ -130,6 +134,7 @@ export interface AppState extends State {
 	// Extra reducer keys go here
 	watchedResources: any;
 	mainLayout: LayoutItem;
+	dialogs: AppStateDialog[];
 }
 
 const appDefaultState: AppState = {
@@ -150,6 +155,7 @@ const appDefaultState: AppState = {
 	layoutMoveMode: false,
 	mainLayout: null,
 	startupPluginsLoaded: false,
+	dialogs: [],
 	...resourceEditWatcherDefaultState,
 };
 
@@ -370,6 +376,30 @@ class Application extends BaseApplication {
 				}
 				break;
 
+			case 'DIALOG_OPEN':
+
+				{
+					newState = Object.assign({}, state);
+					const newDialogs = newState.dialogs.slice();
+
+					if (newDialogs.find(d => d.name === action.name)) throw new Error(`This dialog is already opened: ${action.name}`);
+
+					newDialogs.push({
+						name: action.name,
+					});
+					newState.dialogs = newDialogs;
+				}
+				break;
+
+			case 'DIALOG_CLOSE':
+
+				{
+					newState = Object.assign({}, state);
+					const newDialogs = newState.dialogs.slice().filter(d => d.name !== action.name);
+					newState.dialogs = newDialogs;
+				}
+				break;
+
 			case 'LAYOUT_MOVE_MODE_SET':
 
 				newState = {
@@ -834,6 +864,14 @@ class Application extends BaseApplication {
 		// 	});
 		// }, 5000);
 
+
+		// setTimeout(() => {
+		// 	this.dispatch({
+		// 		type: 'DIALOG_OPEN',
+		// 		name: 'syncWizard',
+		// 	});
+		// }, 2000);
+
 		return null;
 	}
 

packages/app-desktop/build/images/syncTargetLogos/Dropbox.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="43px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 40" version="1.1" height="40px">
+ <path d="m12.5 0l-12.5 8.1 8.7 7 12.5-7.8-8.7-7.3zm-12.5 21.9l12.5 8.2 8.7-7.3-12.5-7.7-8.7 6.8zm21.2 0.9l8.8 7.3 12.4-8.1-8.6-6.9-12.6 7.7zm21.2-14.7l-12.4-8.1-8.8 7.3 12.6 7.8 8.6-7zm-21.1 16.3l-8.8 7.3-3.7-2.5v2.8l12.5 7.5 12.5-7.5v-2.8l-3.8 2.5-8.7-7.3z" fill="#007EE5"/>
+</svg>

packages/app-desktop/build/images/syncTargetLogos/JoplinCloud.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 682.66669 682.66669" height="682.66669" width="682.66669" xml:space="preserve" id="svg2" version="1.1">
+  <defs id="defs6">
+    <linearGradient id="linearGradient26" spreadMethod="pad" gradientTransform="matrix(-4387.91,4387.91,4387.91,4387.91,4753.95,366.05)" gradientUnits="userSpaceOnUse" y2="0" x2="1" y1="0" x1="0">
+      <stop id="stop22" offset="0" style="stop-opacity:1;stop-color:#004caf"/>
+      <stop id="stop24" offset="1" style="stop-opacity:1;stop-color:#1f95f8"/>
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1.3333333,0,0,-1.3333333,0,682.66667)" id="g10">
+    <g transform="scale(0.1)" id="g12">
+      <g id="g14">
+        <g clip-path="url(#clipPath20)" id="g16">
+          <path id="path28" style="fill:url(#linearGradient26);fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 3873.89,0 H 1246.11 C 560.754,0 0,560.75 0,1246.11 V 3873.88 C 0,4559.25 560.754,5120 1246.11,5120 H 3873.89 C 4559.25,5120 5120,4559.25 5120,3873.88 V 1246.11 C 5120,560.75 4559.25,0 3873.89,0"/>
+        </g>
+      </g>
+      <path id="path30" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 3961.59,4435.23 H 2570.18 c -13.15,0 -23.78,-10.64 -23.78,-23.77 v -441.84 c 0,-14.87 12.04,-26.92 26.92,-26.92 h 190.77 c 77.16,0 139.73,-59.35 146.43,-134.77 V 3505 3336.23 1728.75 1717.36 h -0.05 c 0.48,-16.84 -0.19,-33.4 -1.83,-49.71 -0.18,-2.38 -0.5,-4.73 -0.79,-7.09 -1.1,-9.53 -2.32,-19.01 -4.17,-28.29 -1.01,-5.29 -2.44,-10.44 -3.71,-15.65 -1.71,-6.93 -3.09,-13.97 -5.22,-20.75 -12.58,-40.27 -32.47,-77.62 -59.98,-110.5 -1.01,-1.17 -2.26,-2.25 -3.26,-3.41 -8.39,-9.72 -17.2,-19.19 -26.95,-28.06 -9.84,-8.95 -20.26,-17.27 -31.21,-25 -77.84,-55.14 -182.61,-79.4 -299.67,-68.2 -149.26,14.03 -297.34,81.72 -417.03,190.62 -119.67,108.89 -194.08,243.62 -209.48,379.41 -13.85,121.48 22.55,228.38 102.42,301.05 0.21,0.16 0.4,0.31 0.56,0.48 3.09,2.77 6.49,5.2 9.67,7.87 57.16,47.89 131.67,76.91 216.7,84.91 0.96,0.09 1.88,0.24 2.79,0.32 8.95,0.79 18.07,1.15 27.27,1.49 4.81,0.16 9.56,0.5 14.44,0.54 1.62,0.02 3.16,0.19 4.78,0.19 2.9,0 5.91,-0.38 8.81,-0.42 13.4,-0.21 26.9,-0.76 40.67,-1.94 1.74,-0.14 3.4,-0.08 5.19,-0.24 1.27,-0.13 2.53,-0.41 3.8,-0.54 78,-7.82 155.23,-31.11 228.52,-66.4 1.53,-0.07 3.3,-0.54 5.51,-1.76 22.34,-12.34 26.62,0.9 27.28,9.65 v 382.24 282.82 c 0,19.05 -13.25,35.9 -31.83,39.99 -394.76,86.88 -782.08,-3.55 -1055.38,-252.34 -238.75,-217.18 -354.24,-530.58 -316.82,-859.79 33.39,-293.23 183.91,-574.94 423.88,-793.33 233.89,-212.79 531.69,-345.86 838.88,-374.801 42.33,-3.918 84.86,-5.938 126.36,-5.938 293.38,0 565.61,100.598 766.54,283.379 190.34,173.3 304.35,411.27 321.08,670.16 l 1.55,1697.91 h 0.17 v 453.97 h 0.06 v 7.92 c 1.72,80.12 67.05,144.58 147.61,144.58 h 190.77 c 14.86,0 26.92,12.05 26.92,26.92 v 441.84 c 0,13.13 -10.63,23.77 -23.78,23.77"/>
+    </g>
+  </g>
+</svg>

packages/app-desktop/build/images/syncTargetLogos/OneDrive.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1030.04 659.922"
+	 enable-background="new 0 0 1030.04 659.922" xml:space="preserve">
+<metadata>
+	<sfw  xmlns="&ns_sfw;">
+		<slices></slices>
+		<sliceSourceBounds  bottomLeftOrigin="true" height="659.922" width="1030.04" x="-490" y="-344.922"></sliceSourceBounds>
+	</sfw>
+</metadata>
+<g id="STYLE_COLOR_1_">
+	<path fill="#0364B8" d="M622.292,445.338l212.613-203.327C790.741,69.804,615.338-33.996,443.13,10.168
+		C365.58,30.056,298.224,78.13,254.209,145.005C257.5,144.922,622.292,445.338,622.292,445.338z"/>
+	<path fill="#0078D4" d="M392.776,183.283l-0.01,0.035c-40.626-25.162-87.479-38.462-135.267-38.397
+		c-1.104,0-2.189,0.07-3.291,0.083C112.064,146.765-1.74,263.423,0.02,405.567c0.638,51.562,16.749,101.743,46.244,144.04
+		l318.528-39.894l244.209-196.915L392.776,183.283z"/>
+	<path fill="#1490DF" d="M834.905,242.012c-4.674-0.312-9.371-0.528-14.123-0.528c-28.523-0.028-56.749,5.798-82.93,17.117
+		l-0.006-0.022l-128.844,54.22l142.041,175.456l253.934,61.728c54.799-101.732,16.752-228.625-84.98-283.424
+		c-26.287-14.16-55.301-22.529-85.091-24.546V242.012z"/>
+	<path fill="#28A8EA" d="M46.264,549.607C94.359,618.756,173.27,659.966,257.5,659.922h563.281
+		c76.946,0.022,147.691-42.202,184.195-109.937L609.001,312.798L46.264,549.607z"/>
+</g>
+</svg>

packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx

@@ -11,7 +11,7 @@ import EncryptionConfigScreen from '../EncryptionConfigScreen';
 const { connect } = require('react-redux');
 const { themeStyle } = require('@joplin/lib/theme');
 const pathUtils = require('@joplin/lib/path-utils');
-const SyncTargetRegistry = require('@joplin/lib/SyncTargetRegistry');
+import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 const shared = require('@joplin/lib/components/shared/config-shared.js');
 import ClipperConfigScreen from '../ClipperConfigScreen';
 const { KeymapConfigScreen } = require('../KeymapConfig/KeymapConfigScreen');
@@ -94,6 +94,11 @@ class ConfigScreenComponent extends React.Component<any, any> {
 			Setting.setValue('sync.startupOperation', SyncStartupOperation.ClearLocalData);
 			await Setting.saveAll();
 			bridge().restart();
+		} else if (key === 'sync.openSyncWizard') {
+			this.props.dispatch({
+				type: 'DIALOG_OPEN',
+				name: 'syncWizard',
+			});
 		} else {
 			throw new Error(`Unhandled key: ${key}`);
 		}
@@ -606,11 +611,15 @@ class ConfigScreenComponent extends React.Component<any, any> {
 				</div>
 			);
 		} else if (md.type === Setting.TYPE_BUTTON) {
-			return (
+			const labelComp = md.hideLabel ? null : (
-				<div key={key} style={rowStyle}>
 				<div style={labelStyle}>
 					<label>{md.label()}</label>
 				</div>
+			);
+
+			return (
+				<div key={key} style={rowStyle}>
+					{labelComp}
 					<Button level={ButtonLevel.Secondary} title={md.label()} onClick={md.onClick ? md.onClick : () => this.handleSettingButton(key)}/>
 					{descriptionComp}
 				</div>

packages/app-desktop/gui/Dialog.tsx

@@ -18,10 +18,11 @@ const DialogRoot = styled.div`
 	background-color: ${props => props.theme.backgroundColor};
 	padding: 16px;
 	box-shadow: 6px 6px 20px rgba(0,0,0,0.5);
-	margin-top: 20px;
+	margin: 20px;
 	min-height: fit-content;
 	display: flex;
 	flex-direction: column;
+	border-radius: 10px;
 `;
 
 interface Props {

packages/app-desktop/gui/DialogTitle.tsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 const Root = styled.div`
+	display: flex;
+	justify-content: ${props => props.justifyContent ? props.justifyContent : 'flex-start'};
 	font-family: ${props => props.theme.fontFamily};
 	font-size: ${props => props.theme.fontSize * 1.5}px;
 	line-height: 1.6em;
@@ -12,10 +14,11 @@ const Root = styled.div`
 
 interface Props {
 	title: string;
+	justifyContent?: string;
 }
 
 export default function DialogTitle(props: Props) {
 	return (
-		<Root>{props.title}</Root>
+		<Root justifyContent={props.justifyContent}>{props.title}</Root>
 	);
 }

packages/app-desktop/gui/Root.tsx

@@ -1,4 +1,4 @@
-import app from '../app';
+import app, { AppState, AppStateDialog } from '../app';
 import MainScreen from './MainScreen/MainScreen';
 import ConfigScreen from './ConfigScreen/ConfigScreen';
 import StatusScreen from './StatusScreen/StatusScreen';
@@ -10,7 +10,6 @@ import { Size } from './ResizableLayout/utils/types';
 import MenuBar from './MenuBar';
 import { _ } from '@joplin/lib/locale';
 const React = require('react');
-
 const { render } = require('react-dom');
 const { connect, Provider } = require('react-redux');
 import Setting from '@joplin/lib/models/Setting';
@@ -19,6 +18,7 @@ import ClipperServer from '@joplin/lib/ClipperServer';
 import DialogTitle from './DialogTitle';
 import DialogButtonRow, { ButtonSpec, ClickEvent, ClickEventHandler } from './DialogButtonRow';
 import Dialog from './Dialog';
+import SyncWizardDialog from './SyncWizard/Dialog';
 const { ImportScreen } = require('./ImportScreen.min.js');
 const { ResourceScreen } = require('./ResourceScreen.js');
 const { Navigator } = require('./Navigator.min.js');
@@ -33,6 +33,7 @@ interface Props {
 	size: Size;
 	zoomFactor: number;
 	needApiAuth: boolean;
+	dialogs: AppStateDialog;
 }
 
 interface ModalDialogProps {
@@ -42,6 +43,24 @@ interface ModalDialogProps {
 	onClick: ClickEventHandler;
 }
 
+interface RegisteredDialogProps {
+	themeId: number;
+	key: string;
+	dispatch: Function;
+}
+
+interface RegisteredDialog {
+	render: (props: RegisteredDialogProps)=> any;
+}
+
+const registeredDialogs: Record<string, RegisteredDialog> = {
+	syncWizard: {
+		render: (props: RegisteredDialogProps) => {
+			return <SyncWizardDialog key={props.key} dispatch={props.dispatch} themeId={props.themeId}/>;
+		},
+	},
+};
+
 const GlobalStyle = createGlobalStyle`
 	* {
 		box-sizing: border-box;
@@ -151,6 +170,22 @@ class RootComponent extends React.Component<Props, any> {
 		};
 	}
 
+	private renderDialogs() {
+		if (!this.props.dialogs.length) return null;
+
+		const output: any[] = [];
+		for (const dialog of this.props.dialogs) {
+			const md = registeredDialogs[dialog.name];
+			if (!md) throw new Error(`Unknown dialog: ${dialog.name}`);
+			output.push(md.render({
+				key: dialog.name,
+				themeId: this.props.themeId,
+				dispatch: this.props.dispatch,
+			}));
+		}
+		return output;
+	}
+
 	public render() {
 		const navigatorStyle = {
 			width: this.props.size.width / this.props.zoomFactor,
@@ -176,19 +211,21 @@ class RootComponent extends React.Component<Props, any> {
 					<GlobalStyle/>
 					<Navigator style={navigatorStyle} screens={screens} />
 					{this.renderModalMessage(this.modalDialogProps())}
+					{this.renderDialogs()}
 				</ThemeProvider>
 			</StyleSheetManager>
 		);
 	}
 }
 
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppState) => {
 	return {
 		size: state.windowContentSize,
 		zoomFactor: state.settings.windowContentZoomFactor / 100,
 		appState: state.appState,
 		themeId: state.settings.theme,
 		needApiAuth: state.needApiAuth,
+		dialogs: state.dialogs,
 	};
 };
 

packages/app-desktop/gui/SyncWizard/Dialog.tsx

@@ -0,0 +1,343 @@
+import * as React from 'react';
+import { useState, useRef, useCallback } from 'react';
+import { _ } from '@joplin/lib/locale';
+import DialogButtonRow from '../DialogButtonRow';
+import Dialog from '../Dialog';
+import styled from 'styled-components';
+import DialogTitle from '../DialogTitle';
+import SyncTargetRegistry, { SyncTargetInfo } from '@joplin/lib/SyncTargetRegistry';
+import useElementSize from '@joplin/lib/hooks/useElementSize';
+import Button, { ButtonLevel } from '../Button/Button';
+import bridge from '../../services/bridge';
+import StyledInput from '../style/StyledInput';
+import Setting from '../../../lib/models/Setting';
+import SyncTargetJoplinCloud from '../../../lib/SyncTargetJoplinCloud';
+import StyledLink from '../style/StyledLink';
+
+interface Props {
+	themeId: number;
+	dispatch: Function;
+}
+
+const StyledRoot = styled.div`
+	min-width: 500px;
+	max-width: 1200px;
+`;
+
+const SyncTargetDescription = styled.div`
+	${props => props.height ? `height: ${props.height}px` : ''};
+	margin-bottom: 1.3em;
+	line-height: ${props => props.theme.lineHeight};
+	font-size: 16px;
+`;
+
+const CreateAccountLink = styled(StyledLink)`
+	font-size: 16px;
+`;
+
+const ContentRoot = styled.div`
+	background-color: ${props => props.theme.backgroundColor3};
+	padding: 1em;
+	padding-right: 0;
+`;
+
+const SelfHostingMessage = styled.div`
+	color: ${props => props.theme.color};
+	padding-right: 1em;
+	font-style: italic;
+	margin-top: 1em;
+	opacity: 0.6;
+`;
+
+const SyncTargetBoxes = styled.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+`;
+
+const SyncTargetTitle = styled.p`
+	display: flex;
+	flex-direction: row;
+	font-weight: bold;
+	font-size: 1.7em;
+	align-items: center;
+	white-space: nowrap;
+`;
+
+const SyncTargetLogo = styled.img`
+	height: 1.3em;
+	margin-right: 0.4em;
+`;
+
+const SyncTargetBox = styled.div`
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	font-family: ${props => props.theme.fontFamily};
+	color: ${props => props.theme.color};
+	background-color: ${props => props.theme.backgroundColor};
+	border: 1px solid ${props => props.theme.dividerColor};
+	border-radius: 8px;
+	padding: 0.8em 2.2em 2em 2.2em;
+	margin-right: 1em;
+	max-width: 400px;
+	opacity: ${props => props.faded ? 0.5 : 1};
+`;
+
+const FeatureList = styled.div`
+	margin-bottom: 1em;
+`;
+
+const FeatureIcon = styled.i`
+	display: inline-flex;
+	width: 16px;
+	justify-content: center;
+	color: ${props => props.theme.color4};
+	position: absolute;
+`;
+
+const FeatureLine = styled.div`
+	margin-bottom: .5em;
+	opacity: ${props => props.enabled ? 1 : 0.5};
+	position: relative;
+	font-size: 16px;
+`;
+
+const FeatureLabel = styled.div`
+	margin-left: 24px;
+	line-height: ${props => props.theme.lineHeight};
+`;
+
+const SelectButton = styled(Button)`
+	padding: 10px 10px;
+    height: auto;
+    min-height: auto;
+    max-height: fit-content;
+    font-size: 1em;
+`;
+
+const JoplinCloudLoginForm = styled.div`
+	display: flex;
+	flex-direction: column;
+`;
+
+const FormLabel = styled.label`
+	font-weight: bold;
+	margin: 1em 0 0.6em 0;
+`;
+
+const syncTargetNames: string[] = [
+	'joplinCloud',
+	'dropbox',
+	'onedrive',
+	'nextcloud',
+	'webdav',
+	'amazon_s3',
+	'joplinServer',
+];
+
+
+const logosImageNames: Record<string, string> = {
+	'dropbox': 'Dropbox.svg',
+	'joplinCloud': 'JoplinCloud.svg',
+	'onedrive': 'OneDrive.svg',
+};
+
+export default function(props: Props) {
+	const [showJoplinCloudForm, setShowJoplinCloudForm] = useState(false);
+	const joplinCloudDescriptionRef = useRef(null);
+	const [joplinCloudEmail, setJoplinCloudEmail] = useState('');
+	const [joplinCloudPassword, setJoplinCloudPassword] = useState('');
+	const [joplinCloudLoginInProgress, setJoplinCloudLoginInProgress] = useState(false);
+
+	function closeDialog(dispatch: Function) {
+		dispatch({
+			type: 'DIALOG_CLOSE',
+			name: 'syncWizard',
+		});
+	}
+
+	const onButtonRowClick = useCallback(() => {
+		closeDialog(props.dispatch);
+	}, [props.dispatch]);
+
+	const { height: descriptionHeight } = useElementSize(joplinCloudDescriptionRef);
+
+	function renderFeature(enabled: boolean, label: string) {
+		const className = enabled ? 'fas fa-check' : 'fas fa-times';
+		return (
+			<FeatureLine enabled={enabled} key={label}><FeatureIcon className={className}></FeatureIcon> <FeatureLabel>{label}</FeatureLabel></FeatureLine>
+		);
+	}
+
+	function renderFeatures(name: string) {
+		return (
+			<FeatureList>
+				{[
+					renderFeature(true, _('Sync your notes')),
+					renderFeature(name === 'joplinCloud', _('Publish notes to the internet')),
+					renderFeature(name === 'joplinCloud', _('Collaborate on notebooks with others')),
+				]}
+			</FeatureList>
+		);
+	}
+
+	const onJoplinCloudEmailChange = useCallback((event: any) => {
+		setJoplinCloudEmail(event.target.value);
+	}, []);
+
+	const onJoplinCloudPasswordChange = useCallback((event: any) => {
+		setJoplinCloudPassword(event.target.value);
+	}, []);
+
+	const onJoplinCloudLoginClick = useCallback(async () => {
+		setJoplinCloudLoginInProgress(true);
+
+		try {
+			const result = await SyncTargetJoplinCloud.checkConfig({
+				password: () => joplinCloudPassword,
+				path: () => Setting.value('sync.10.path'),
+				userContentPath: () => Setting.value('sync.10.userContentPath'),
+				username: () => joplinCloudEmail,
+			});
+
+			if (result.ok) {
+				Setting.setValue('sync.target', 10);
+				Setting.setValue('sync.10.username', joplinCloudEmail);
+				Setting.setValue('sync.10.password', joplinCloudPassword);
+				await Setting.saveAll();
+
+				alert(_('Thank you! Your Joplin Cloud account is now setup and ready to use.'));
+
+				closeDialog(props.dispatch);
+
+				props.dispatch({
+					type: 'NAV_GO',
+					routeName: 'Main',
+				});
+			} else {
+				alert(_('There was an error setting up your Joplin Cloud account. Please verify your email and password and try again. Error was:\n\n%s', result.errorMessage));
+			}
+		} finally {
+			setJoplinCloudLoginInProgress(false);
+		}
+	}, [joplinCloudEmail, joplinCloudPassword, props.dispatch]);
+
+	const onJoplinCloudCreateAccountClick = useCallback(() => {
+		bridge().openExternal('https://joplinapp.org/plans/');
+	}, []);
+
+	function renderJoplinCloudLoginForm() {
+		return (
+			<JoplinCloudLoginForm>
+				<div>{_('Login below.')} <CreateAccountLink href="#" onClick={onJoplinCloudCreateAccountClick}>{_('Or create an account.')}</CreateAccountLink></div>
+				<FormLabel>Email</FormLabel>
+				<StyledInput type="email" onChange={onJoplinCloudEmailChange}/>
+				<FormLabel>Password</FormLabel>
+				<StyledInput type="password" onChange={onJoplinCloudPasswordChange}/>
+				<SelectButton mt="1.3em" disabled={joplinCloudLoginInProgress} level={ButtonLevel.Primary} title={_('Login')} onClick={onJoplinCloudLoginClick}/>
+			</JoplinCloudLoginForm>
+		);
+	}
+
+	const onSelectButtonClick = useCallback(async (name: string) => {
+		if (name === 'joplinCloud') {
+			setShowJoplinCloudForm(true);
+		} else {
+			Setting.setValue('sync.target', name === 'dropbox' ? 7 : 3);
+			await Setting.saveAll();
+			closeDialog(props.dispatch);
+			props.dispatch({
+				type: 'NAV_GO',
+				routeName: name === 'dropbox' ? 'DropboxLogin' : 'OneDriveLogin',
+			});
+		}
+	}, [props.dispatch]);
+
+	function renderSelectArea(info: SyncTargetInfo) {
+		if (info.name === 'joplinCloud' && showJoplinCloudForm) {
+			return renderJoplinCloudLoginForm();
+		} else {
+			return (
+				<SelectButton
+					level={ButtonLevel.Primary}
+					title={_('Select')}
+					onClick={() => onSelectButtonClick(info.name)}
+					disabled={joplinCloudLoginInProgress}
+				/>
+			);
+		}
+	}
+
+	function renderSyncTarget(info: SyncTargetInfo) {
+		const key = `syncTarget_${info.name}`;
+		const height = info.name !== 'joplinCloud' ? descriptionHeight : null;
+
+		const logoImageName = logosImageNames[info.name];
+		const logoImageSrc = logoImageName ? `${bridge().buildDir()}/images/syncTargetLogos/${logoImageName}` : '';
+		const logo = logoImageSrc ? <SyncTargetLogo src={logoImageSrc}/> : null;
+		const descriptionComp = <SyncTargetDescription height={height} ref={info.name === 'joplinCloud' ? joplinCloudDescriptionRef : null}>{info.description}</SyncTargetDescription>;
+		const featuresComp = showJoplinCloudForm && info.name === 'joplinCloud' ? null : renderFeatures(info.name);
+
+		return (
+			<SyncTargetBox id={key} key={key} faded={showJoplinCloudForm && info.name !== 'joplinCloud'}>
+				<SyncTargetTitle>{logo}{info.label}</SyncTargetTitle>
+				{descriptionComp}
+				{featuresComp}
+				{renderSelectArea(info)}
+			</SyncTargetBox>
+		);
+	}
+
+	const onSelfHostingClick = useCallback(() => {
+		closeDialog(props.dispatch);
+
+		props.dispatch({
+			type: 'NAV_GO',
+			routeName: 'Config',
+			props: {
+				defaultSection: 'sync',
+			},
+		});
+	}, [props.dispatch]);
+
+	function renderContent() {
+		const boxes: any[] = [];
+
+		for (const name of syncTargetNames) {
+			const info = SyncTargetRegistry.infoByName(name);
+			if (info.supportsSelfHosted) continue;
+			boxes.push(renderSyncTarget(info));
+		}
+
+		const selfHostingMessage = showJoplinCloudForm ? null : <SelfHostingMessage>Self-hosting? Joplin also supports various self-hosting options such as Nextcloud, WebDAV, AWS S3 and Joplin Server. <a href="#" onClick={onSelfHostingClick}>Click here to select one</a>.</SelfHostingMessage>;
+
+		return (
+			<ContentRoot>
+				<SyncTargetBoxes>
+					{boxes}
+				</SyncTargetBoxes>
+				{selfHostingMessage}
+			</ContentRoot>
+		);
+	}
+
+	function renderDialogWrapper() {
+		return (
+			<StyledRoot>
+				<DialogTitle title={_('Joplin can synchronise your notes using various providers. Select one from the list below.')} justifyContent="center"/>
+				{renderContent()}
+				<DialogButtonRow
+					themeId={props.themeId}
+					onClick={onButtonRowClick}
+					okButtonShow={false}
+					cancelButtonLabel={_('Close')}
+				/>
+			</StyledRoot>
+		);
+	}
+
+	return (
+		<Dialog renderContent={renderDialogWrapper}/>
+	);
+}

packages/app-mobile/components/screens/ConfigScreen.tsx

@@ -19,7 +19,7 @@ const { BaseScreenComponent } = require('../base-screen.js');
 const { Dropdown } = require('../Dropdown.js');
 const { themeStyle } = require('../global-style.js');
 const shared = require('@joplin/lib/components/shared/config-shared.js');
-const SyncTargetRegistry = require('@joplin/lib/SyncTargetRegistry');
+import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 const RNFS = require('react-native-fs');
 
 class ConfigScreenComponent extends BaseScreenComponent {

packages/app-mobile/root.tsx

@@ -78,7 +78,7 @@ import SearchEngine from '@joplin/lib/services/searchengine/SearchEngine';
 const WelcomeUtils = require('@joplin/lib/WelcomeUtils');
 const { themeStyle } = require('./components/global-style.js');
 
-const SyncTargetRegistry = require('@joplin/lib/SyncTargetRegistry.js');
+import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 const SyncTargetFilesystem = require('@joplin/lib/SyncTargetFilesystem.js');
 const SyncTargetNextcloud = require('@joplin/lib/SyncTargetNextcloud.js');
 const SyncTargetWebDAV = require('@joplin/lib/SyncTargetWebDAV.js');

packages/lib/BaseApplication.ts

@@ -30,7 +30,7 @@ const fs = require('fs-extra');
 import JoplinError from './JoplinError';
 const EventEmitter = require('events');
 const syswidecas = require('./vendor/syswide-cas');
-const SyncTargetRegistry = require('./SyncTargetRegistry.js');
+import SyncTargetRegistry from './SyncTargetRegistry';
 const SyncTargetFilesystem = require('./SyncTargetFilesystem.js');
 const SyncTargetNextcloud = require('./SyncTargetNextcloud.js');
 const SyncTargetWebDAV = require('./SyncTargetWebDAV.js');

packages/lib/BaseSyncTarget.ts

@@ -25,6 +25,14 @@ export default class BaseSyncTarget {
 		return false;
 	}
 
+	public static description(): string {
+		return '';
+	}
+
+	public static supportsSelfHosted(): boolean {
+		return true;
+	}
+
 	public option(name: string, defaultValue: any = null) {
 		return this.options_ && name in this.options_ ? this.options_[name] : defaultValue;
 	}

packages/lib/SyncTargetAmazonS3.js

@@ -28,6 +28,10 @@ class SyncTargetAmazonS3 extends BaseSyncTarget {
 		return `${_('AWS S3')} (Beta)`;
 	}
 
+	static description() {
+		return 'A service offered by Amazon Web Services (AWS) that provides object storage through a web service interface.';
+	}
+
 	async isAuthenticated() {
 		return true;
 	}

packages/lib/SyncTargetDropbox.js

@@ -25,6 +25,14 @@ class SyncTargetDropbox extends BaseSyncTarget {
 		return _('Dropbox');
 	}
 
+	static description() {
+		return 'A file hosting service that offers cloud storage and file synchronization';
+	}
+
+	static supportsSelfHosted() {
+		return false;
+	}
+
 	authRouteName() {
 		return 'DropboxLogin';
 	}

packages/lib/SyncTargetJoplinCloud.ts

@@ -30,6 +30,14 @@ export default class SyncTargetJoplinCloud extends BaseSyncTarget {
 		return _('Joplin Cloud');
 	}
 
+	public static description() {
+		return _('Joplin\'s own sync service. Also gives access to Joplin-specific features such as publishing notes or collaborating on notebooks with others.');
+	}
+
+	public static supportsSelfHosted(): boolean {
+		return false;
+	}
+
 	public async isAuthenticated() {
 		return true;
 	}

packages/lib/SyncTargetJoplinServer.ts

@@ -51,6 +51,10 @@ export default class SyncTargetJoplinServer extends BaseSyncTarget {
 		return 'joplinServer';
 	}
 
+	public static description() {
+		return 'Besides synchronisation and improved performances, Joplin Server also gives access to Joplin-specific sharing features.';
+	}
+
 	public static label() {
 		return `${_('Joplin Server')} (Beta)`;
 	}

packages/lib/SyncTargetNextcloud.js

@@ -25,6 +25,10 @@ class SyncTargetNextcloud extends BaseSyncTarget {
 		return _('Nextcloud');
 	}
 
+	static description() {
+		return 'A suite of client-server software for creating and using file hosting services.';
+	}
+
 	async isAuthenticated() {
 		return true;
 	}

packages/lib/SyncTargetOneDrive.ts

@@ -29,6 +29,14 @@ export default class SyncTargetOneDrive extends BaseSyncTarget {
 		return _('OneDrive');
 	}
 
+	public static description() {
+		return 'A file hosting service operated by Microsoft as part of its web version of Office.';
+	}
+
+	public static supportsSelfHosted(): boolean {
+		return false;
+	}
+
 	async isAuthenticated() {
 		return !!this.api().auth();
 	}

packages/lib/SyncTargetRegistry.ts

@@ -1,25 +1,47 @@
-class SyncTargetRegistry {
+export interface SyncTargetInfo {
-	static classById(syncTargetId) {
+	id: number;
+	name: string;
+	label: string;
+	supportsSelfHosted: boolean;
+	supportsConfigCheck: boolean;
+	description: string;
+	classRef: any;
+}
+
+export default class SyncTargetRegistry {
+
+	private static reg_: Record<number, SyncTargetInfo> = {};
+
+	public static classById(syncTargetId: number) {
 		const info = SyncTargetRegistry.reg_[syncTargetId];
 		if (!info) throw new Error(`Invalid id: ${syncTargetId}`);
 		return info.classRef;
 	}
 
-	static addClass(SyncTargetClass) {
+	public static infoByName(name: string): SyncTargetInfo {
+		for (const [, info] of Object.entries(this.reg_)) {
+			if (info.name === name) return info;
+		}
+		throw new Error(`Unknown name: ${name}`);
+	}
+
+	public static addClass(SyncTargetClass: any) {
 		this.reg_[SyncTargetClass.id()] = {
 			id: SyncTargetClass.id(),
 			name: SyncTargetClass.targetName(),
 			label: SyncTargetClass.label(),
 			classRef: SyncTargetClass,
+			description: SyncTargetClass.description(),
+			supportsSelfHosted: SyncTargetClass.supportsSelfHosted(),
 			supportsConfigCheck: SyncTargetClass.supportsConfigCheck(),
 		};
 	}
 
-	static allIds() {
+	public static allIds() {
 		return Object.keys(this.reg_);
 	}
 
-	static nameToId(name) {
+	public static nameToId(name: string) {
 		for (const n in this.reg_) {
 			if (!this.reg_.hasOwnProperty(n)) continue;
 			if (this.reg_[n].name === name) return this.reg_[n].id;
@@ -27,7 +49,7 @@ class SyncTargetRegistry {
 		throw new Error(`Name not found: ${name}. Was the sync target registered?`);
 	}
 
-	static idToMetadata(id) {
+	public static idToMetadata(id: number) {
 		for (const n in this.reg_) {
 			if (!this.reg_.hasOwnProperty(n)) continue;
 			if (this.reg_[n].id === id) return this.reg_[n];
@@ -35,12 +57,12 @@ class SyncTargetRegistry {
 		throw new Error(`ID not found: ${id}`);
 	}
 
-	static idToName(id) {
+	public static idToName(id: number) {
 		return this.idToMetadata(id).name;
 	}
 
-	static idAndLabelPlainObject(os) {
+	public static idAndLabelPlainObject(os: string) {
-		const output = {};
+		const output: Record<string, string> = {};
 		for (const n in this.reg_) {
 			if (!this.reg_.hasOwnProperty(n)) continue;
 			const info = this.reg_[n];
@@ -52,7 +74,3 @@ class SyncTargetRegistry {
 		return output;
 	}
 }
-
-SyncTargetRegistry.reg_ = {};
-
-module.exports = SyncTargetRegistry;

packages/lib/SyncTargetWebDAV.js

@@ -23,6 +23,10 @@ class SyncTargetWebDAV extends BaseSyncTarget {
 		return _('WebDAV');
 	}
 
+	static description() {
+		return 'The WebDAV protocol allows users to create, change and move documents on a server. There are many WebDAV compatible servers, including SeaFile, Nginx or Apache.';
+	}
+
 	async isAuthenticated() {
 		return true;
 	}

packages/lib/components/shared/config-shared.js

@@ -1,5 +1,5 @@
 const Setting = require('../../models/Setting').default;
-const SyncTargetRegistry = require('../../SyncTargetRegistry');
+const SyncTargetRegistry = require('../../SyncTargetRegistry').default;
 const ObjectUtils = require('../../ObjectUtils');
 const { _ } = require('../../locale');
 const { createSelector } = require('reselect');

packages/lib/components/shared/dropbox-login-shared.js

@@ -1,5 +1,5 @@
 const shim = require('../../shim').default;
-const SyncTargetRegistry = require('../../SyncTargetRegistry');
+const SyncTargetRegistry = require('../../SyncTargetRegistry').default;
 const { reg } = require('../../registry.js');
 const { _ } = require('../../locale');
 const Setting = require('../../models/Setting').default;

packages/lib/hooks/useElementSize.ts

@@ -0,0 +1,38 @@
+import shim from '../shim';
+const { useCallback, useEffect, useState } = shim.react();
+import useEventListener from './useEventListener';
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+function useElementSize(elementRef: any): Size {
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0,
+	});
+
+	// Prevent too many rendering using useCallback
+	const updateSize = useCallback(() => {
+		const node = elementRef?.current;
+		if (node) {
+			setSize({
+				width: node.offsetWidth || 0,
+				height: node.offsetHeight || 0,
+			});
+		}
+	}, [elementRef]);
+
+	// Initial size on mount
+	useEffect(() => {
+		updateSize();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	useEventListener('resize', updateSize);
+
+	return size;
+}
+
+export default useElementSize;

packages/lib/hooks/useEventListener.ts

@@ -0,0 +1,41 @@
+import shim from '../shim';
+const { useEffect, useRef } = shim.react();
+
+function useEventListener(
+	eventName: any,
+	handler: any,
+	element?: any
+) {
+	// Create a ref that stores handler
+	const savedHandler = useRef();
+
+	useEffect(() => {
+		// Define the listening target
+		const targetElement = element?.current || window;
+		if (!(targetElement && targetElement.addEventListener)) {
+			return null;
+		}
+
+		// Update saved handler if necessary
+		if (savedHandler.current !== handler) {
+			savedHandler.current = handler;
+		}
+
+		// Create event listener that calls handler function stored in ref
+		const eventListener = (event: Event) => {
+			// eslint-disable-next-line no-extra-boolean-cast
+			if (!!savedHandler?.current) {
+				savedHandler.current(event);
+			}
+		};
+
+		targetElement.addEventListener(eventName, eventListener);
+
+		// Remove event listener on cleanup
+		return () => {
+			targetElement.removeEventListener(eventName, eventListener);
+		};
+	}, [eventName, element, handler]);
+}
+
+export default useEventListener;

packages/lib/models/Setting.ts

@@ -3,7 +3,7 @@ import { _, supportedLocalesToLanguages, defaultLocale } from '../locale';
 import eventManager from '../eventManager';
 import BaseModel from '../BaseModel';
 import Database from '../database';
-const SyncTargetRegistry = require('../SyncTargetRegistry.js');
+import SyncTargetRegistry from '../SyncTargetRegistry';
 import time from '../time';
 import FileHandler, { SettingValues } from './settings/FileHandler';
 const { sprintf } = require('sprintf-js');
@@ -55,6 +55,7 @@ export interface SettingItem {
 	needRestart?: boolean;
 	autoSave?: boolean;
 	storage?: SettingStorage;
+	hideLabel?: boolean;
 }
 
 interface SettingItems {
@@ -306,6 +307,17 @@ class Setting extends BaseModel {
 				appTypes: [AppType.Desktop],
 				storage: SettingStorage.File,
 			},
+
+			'sync.openSyncWizard': {
+				value: null,
+				type: SettingItemType.Button,
+				public: true,
+				appTypes: [AppType.Desktop],
+				label: () => _('Open Sync Wizard...'),
+				hideLabel: true,
+				section: 'sync',
+			},
+
 			'sync.target': {
 				value: SyncTargetRegistry.nameToId('dropbox'),
 				type: SettingItemType.Int,

packages/lib/registry.ts

@@ -1,7 +1,7 @@
 import Logger from './Logger';
 import Setting from './models/Setting';
 import shim from './shim';
-const SyncTargetRegistry = require('./SyncTargetRegistry.js');
+import SyncTargetRegistry from './SyncTargetRegistry';
 
 class Registry {
 

packages/lib/services/synchronizer/tools.ts

@@ -2,7 +2,7 @@ import { SqlQuery } from '../../database';
 import JoplinDatabase from '../../JoplinDatabase';
 import BaseItem from '../../models/BaseItem';
 import Setting from '../../models/Setting';
-const SyncTargetRegistry = require('../../SyncTargetRegistry');
+import SyncTargetRegistry from '../../SyncTargetRegistry';
 
 async function clearSyncContext() {
 	const syncTargetIds = SyncTargetRegistry.allIds();

packages/lib/testing/test-utils.ts

@@ -35,7 +35,7 @@ const { FileApiDriverWebDav } = require('../file-api-driver-webdav.js');
 const { FileApiDriverDropbox } = require('../file-api-driver-dropbox.js');
 const { FileApiDriverOneDrive } = require('../file-api-driver-onedrive.js');
 const { FileApiDriverAmazonS3 } = require('../file-api-driver-amazon-s3.js');
-const SyncTargetRegistry = require('../SyncTargetRegistry.js');
+import SyncTargetRegistry from '../SyncTargetRegistry';
 const SyncTargetMemory = require('../SyncTargetMemory.js');
 const SyncTargetFilesystem = require('../SyncTargetFilesystem.js');
 const SyncTargetNextcloud = require('../SyncTargetNextcloud.js');