account registration

Author: ra3orblade

package.json

@@ -56,6 +56,7 @@
 		"css-loader": "^3.2.0",
 		"electron": "^6.0.10",
 		"emoji-mart": "^2.11.1",
+		"file-type": "^12.3.0",
 		"fs": "0.0.1-security",
 		"history": "^4.10.1",
 		"jquery": "^3.4.1",
@@ -69,6 +70,7 @@
 		"react": "^16.9.0",
 		"react-dom": "^16.9.0",
 		"react-router-dom": "^5.0.1",
+		"read-chunk": "^3.2.0",
 		"readline": "^1.3.0",
 		"sass-loader": "^8.0.0",
 		"style-loader": "^1.0.0",

repo/.gitignore

@@ -0,0 +1 @@
+[^.]*

src/ts/component/page/auth/register.tsx

@@ -3,7 +3,12 @@ import * as ReactDOM from 'react-dom';
 import { RouteComponentProps } from 'react-router';
 import { Frame, Cover, Title, Label, Error, Input, Button, IconUser, HeaderAuth as Header, FooterAuth as Footer } from 'ts/component';
 import { observer, inject } from 'mobx-react';
-import { Util } from 'ts/lib';
+import { dispatcher, Util } from 'ts/lib';
+
+const { dialog } = window.require('electron').remote;
+const Err: any = {
+	FAILED_TO_SET_AVATAR: 103
+};
 
 interface Props extends RouteComponentProps<any> {
 	authStore?: any;
@@ -17,18 +22,17 @@ interface State {
 @observer
 class PageAuthRegister extends React.Component<Props, State> {
 
-	fileRef: any;
 	nameRef: any;
 
 	state = {
 		error: '',
-		preview: ''
+		preview: '',
 	};
 
 	constructor (props: any) {
-        super(props);
+		super(props);
 
-		this.onFileChange = this.onFileChange.bind(this);
+		this.onFileClick = this.onFileClick.bind(this);
 		this.onNameChange = this.onNameChange.bind(this);
 		this.onSubmit = this.onSubmit.bind(this);
 	};
@@ -37,7 +41,7 @@ class PageAuthRegister extends React.Component<Props, State> {
 		const { error, preview } = this.state;
 		const { authStore } = this.props;
 
-        return (
+		return (
 			<div>
 				<Cover num={3} />
 				<Header />
@@ -47,28 +51,33 @@ class PageAuthRegister extends React.Component<Props, State> {
 					<Title text="Add name and profile picture" />
 					<Error text={error} />
 
-					<div className="fileWrap">
+					<div className="fileWrap" onMouseDown={this.onFileClick}>
 						<IconUser icon={preview} className={preview ? 'active' : ''} />
-						<Input ref={(ref: any) => this.fileRef = ref} id="file" type="file" onChange={this.onFileChange} />
 					</div>
 
 					<Input ref={(ref: any) => this.nameRef = ref} placeHolder="Type your name" value={name} onKeyUp={this.onNameChange} />
 					<Button text="Create profile" className="orange" onClick={this.onSubmit} />
 				</Frame>
 			</div>
 		);
-    };
+	};
 
-	onFileChange (e: any) {
-		if (!e.target.files.length) {
-			return;
-		};
-		
-		let icon = e.target.files[0];
+	onFileClick (e: any) {
+		const { authStore } = this.props;
 
-		Util.loadPreviewBase64(icon, {}, (image: string, param: any) => {
-			this.setState({ preview: image });
-		});
+		dialog.showOpenDialog({ properties: [ 'openFile' ] }, (files: any) => {
+			if ((files == undefined) || !files.length) {
+				return;
+			};
+
+			let path = files[0];
+			let file = Util.makeFileFromPath(path);
+			
+			authStore.iconSet(path);
+			Util.loadPreviewBase64(file, {}, (image: string, param: any) => {
+				this.setState({ preview: image });
+			});
+	    });
 	};
 
 	onNameChange (e: any) {
@@ -77,9 +86,40 @@ class PageAuthRegister extends React.Component<Props, State> {
 	};
 
 	onSubmit (e: any) {
+		const { authStore } = this.props;
 		e.preventDefault();
 
-		this.props.history.push('/auth/pin-select/register');
+		let request = { 
+			username: authStore.name, 
+			avatarLocalPath: authStore.icon 
+		};
+		
+		dispatcher.call('accountCreate', request, (message: any) => {
+			if (message.error.code) {
+				let error = '';
+				switch (message.error.code) {
+					case Err.FAILED_TO_SET_AVATAR:
+						error = 'Please select profile picture';
+						break; 
+					default:
+						error = message.error.desc;
+						break;
+				};
+				if (error) {
+					this.setState({ error: error });
+				};
+			} else {
+				let account = message.account;
+				
+				authStore.accountSet({
+					id: account.id,
+					name: account.name,
+					icon: account.avatar,
+				});
+				
+				this.props.history.push('/auth/pin-select/register');				
+			};
+		});
 	};
 
 };

src/ts/component/page/auth/setup.tsx

@@ -53,7 +53,11 @@ class PageAuthSetup extends React.Component<Props, State> {
 		}, 1000);
 
 		if (match.params.id == 'register') {
-			dispatcher.call('walletCreate', { pin: 'test' }, (message: any) => {
+			let request = { 
+				rootPath: './repo', 
+				pin: 'test' 
+			};
+			dispatcher.call('walletCreate', request, (message: any) => {
 				this.props.history.push('/auth/register');
 			});
 		};

src/ts/lib/util.tsx

@@ -1,11 +1,24 @@
-const loadImage = require('blueimp-load-image');
+const loadImage = window.require('blueimp-load-image');
+const fs = window.require('fs');
+const readChunk = window.require('read-chunk');
+const fileType = window.require('file-type');
 
 class Util {
 
 	toCamelCase (str: string) {
 		return str[0].toUpperCase() + str.slice(1, str.length);
 	};
 
+	makeFileFromPath (path: string) {
+		let fn = path.split('/');
+		let stat = fs.statSync(path);
+		let buffer = readChunk.sync(path, 0, stat.size);
+		let type = fileType(buffer);
+		let file = new File([ new Blob([ buffer ]) ], fn[fn.length - 1], { type: type.mime });
+		
+		return file;
+	};
+	
 	loadPreviewCanvas (file: any, param: any, success?: (canvas: any) => void) {
 		if (!file) {
 			return;

src/ts/store/auth.tsx

@@ -9,6 +9,7 @@ export interface AccountInterface {
 
 class AuthStore {
 	@observable public pin: string = '';
+	@observable public account: AccountInterface = null;
 	@observable public accountList: AccountInterface[] = [];
 	@observable public icon: string = '';
 	@observable public name: string = '';
@@ -28,6 +29,11 @@ class AuthStore {
 		this.accountList.push(account);
 	};
 
+	@action
+	accountSet (account: AccountInterface) {
+		this.account = account as AccountInterface;
+	};
+	
 	@action
 	iconSet (v: string) {
 		this.icon = v;