authorize iframe

extension/iframe.tsx

@@ -102,7 +102,7 @@ class Iframe extends React.Component {
 
 	componentDidMount () {
 		UtilRouter.init(history);
-		
+
 		/* @ts-ignore */
 		chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 			console.log('[Iframe]', msg, sender);
@@ -113,21 +113,18 @@ class Iframe extends React.Component {
 
 					Util.init(serverPort, gatewayPort);
 					Util.authorize(appKey, () => UtilRouter.go('/create', {}));
+
+					sendResponse({});
 					break;
 
 				case 'clickMenu': {
 					extensionStore.setHtml(msg.html);
+
+					sendResponse({});
 					break;
 				};
 
 			};
-
-			/*
-			let res = null;
-			if (res) {
-				sendResponse({ type: msg.type, ref: 'iframe' });
-			};
-			*/
 			return true;
 		});
 	};

extension/iframe/create.tsx

@@ -33,8 +33,6 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 		const children = blockStore.getChildren(ROOT_ID, ROOT_ID);
 		const length = children.length;
 
-		console.log(html, childrenIds, children, length);
-
 		return (
 			<div className="page pageIndex">
 				{isLoading ? <Loader type="loader" /> : ''}
@@ -72,7 +70,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 	init () {
 		const { html } = extensionStore;
 
-		if (html == this.html) {
+		if (!html || (html == this.html)) {
 			return;
 		};
 

extension/iframe/index.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { I } from 'Lib';
+import { extensionStore } from 'Store';
+import { I, C, UtilRouter, Storage } from 'Lib';
+
+import Util from '../lib/util';
 
 const Index = observer(class Index extends React.Component<I.PageComponent> {
 
@@ -10,6 +13,52 @@ const Index = observer(class Index extends React.Component<I.PageComponent> {
 		);
 	};
 
+	componentDidMount(): void {
+		this.getPorts();
+	};
+
+	getPorts (onError?: () => void): void {
+		Util.sendMessage({ type: 'getPorts' }, response => {
+			console.log('[Popup] getPorts', response);
+
+			if (!response.ports || !response.ports.length) {
+				this.setState({ error: 'Automatic pairing failed, please open the app' });
+
+				if (onError) {
+					onError();
+				};
+				return;
+			};
+
+			Util.init(response.ports[1], response.ports[2]);
+			this.login();
+		});
+	};
+
+	login () {
+		const appKey = Storage.get('appKey');
+
+		if (appKey) {
+			Util.authorize(appKey, () => UtilRouter.go('/create', {}), () => {
+				Storage.delete('appKey');
+				this.login();
+			});
+		} else {
+			/* @ts-ignore */
+			const manifest = chrome.runtime.getManifest();
+
+			C.AccountLocalLinkNewChallenge(manifest.name, (message: any) => {
+				if (message.error.code) {
+					this.setState({ error: message.error.description });
+					return;
+				};
+
+				extensionStore.challengeId = message.challengeId;
+				UtilRouter.go('/challenge', {});
+			});
+		};
+	};
+
 });
 
 export default Index;

extension/popup/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Label, Button, Error } from 'Component';
-import { I, C, UtilRouter, Storage, dispatcher } from 'Lib';
-import { authStore, commonStore, extensionStore } from 'Store';
+import { I, C, UtilRouter, Storage } from 'Lib';
+import { extensionStore } from 'Store';
 import Url from 'json/url.json';
 
 import Util from '../lib/util';