Commit 35f71bec authored by zeroleak's avatar zeroleak
Browse files

initialize in 3 steps

parent 48b43142
......@@ -45,7 +45,7 @@ export default class WebcamPayloadModal extends AbstractModal {
};
renderTitle() {
return <span>Pairing Payload</span>;
return <span>Scan your pairing payload</span>;
}
renderButtons() {
......@@ -56,8 +56,7 @@ export default class WebcamPayloadModal extends AbstractModal {
return (
<div className="row">
<div className="col-sm-12">
Scan your <strong>pairing payload</strong> from Samourai Wallet, go to{' '}
<strong>Settings/Transactions/Experimental</strong>
Get your <strong>pairing payload</strong> from Samourai Wallet, go to <strong>Settings/Transactions/Experimental</strong>
<div className="text-center pt-4">
<Webcam
ref={this.webcamRef}
......
......@@ -12,7 +12,7 @@ import { CLI_CONFIG_FILENAME, DEFAULT_CLIPORT, IPC_CAMERA } from '../const';
import { cliLocalService } from '../services/cliLocalService';
import utils from '../services/utils';
const STEP_LAST = 2
const STEP_LAST = 3
const DEFAULT_CLIHOST = 'https://my-remote-CLI'
const DEFAULT_APIKEY = ''
const CLILOCAL_URL = 'https://localhost:'+DEFAULT_CLIPORT
......@@ -113,8 +113,6 @@ class InitPage extends Component<Props> {
{this.state.cliUrl && <div><FontAwesomeIcon icon={Icons.faCheck} color='green' /> Connected to whirlpool-cli: <strong>{this.state.cliLocal ? 'standalone' : this.state.cliUrl}</strong></div>}
{this.state.hasPairingPayload && <div><FontAwesomeIcon icon={Icons.faCheck} color='green' /> Ready to pair with Samourai Wallet</div>}
{this.state.step > 0 && this.state.hasPairingDojo && <div>{utils.checkedIcon(this.state.dojo)} DOJO is <strong>{this.state.dojo?'enabled':'disabled'}</strong></div>}
{this.state.step > 0 && <div>{utils.checkedIcon(this.state.tor)} Tor is <strong>{this.state.tor?'enabled':'disabled'}</strong></div>}
{this.state.step === STEP_LAST && <div><FontAwesomeIcon icon={Icons.faCheck} color='green' /> Configuration saved</div>}
<br/>
......@@ -126,14 +124,9 @@ class InitPage extends Component<Props> {
}}>
{this.state.step === 0 && this.step0()}
{(this.state.step === 1 || this.state.step === 2) &&
<div>
{this.state.step === 1 && this.step1()}
</div>
}
{this.state.step === STEP_LAST && this.step2()}
{this.state.step === 1 && this.step1()}
{this.state.step === 2 && this.step2()}
{this.state.step === STEP_LAST && this.step3()}
</form>
{this.state.pairingModal && this.state.cameraAccessGranted && (
<WebcamPayloadModal onClose={this.closePairingModal} onScan={(value) => this.onChangePairingPayload(value)} />
......@@ -292,6 +285,7 @@ class InitPage extends Component<Props> {
tor: isDojo,
pairingError: undefined
})
this.goNextStep()
} else {
// invalid payload
console.error('Invalid payload: '+payloadStr)
......@@ -330,10 +324,6 @@ class InitPage extends Component<Props> {
}
step1() {
const checked = e => {
return e.target.checked
}
const myThis = this
return <div>
<div className="form-group row">
<div className="col-sm-1 text-right">
......@@ -342,51 +332,74 @@ class InitPage extends Component<Props> {
<div className="col-sm-11">
<div className="row">
<div className="col-sm-12">
Get your <strong>pairing payload</strong> in Samourai Wallet, go to <strong>Settings/Transactions/Experimental</strong><br/>
Get your <strong>pairing payload</strong> from Samourai Wallet, go
to <strong>Settings/Transactions/Experimental</strong> then{' '}
<a onClick={(event) => {
event.preventDefault();
this.openPairingModal();
}} href="#">Scan your pairing payload</a> using webcam.<br /><br />
<input type="text" className='form-control form-control-lg' required autoFocus onChange={e => {
this.onChangePairingPayload(e.target.value)
}} onClick={e => {
e.target.value = ''
this.resetPairingPayload()
}} value={this.state.pairingPayload} id="pairingPayload" placeholder='Paste your pairing payload here'/>
}} href="#"><strong>scan it using webcam</strong></a>.<br/>
<br/>
<div className="row">
<div className="col-sm-10">
<input type="text" className='form-control form-control-lg' required autoFocus onChange={e => {
this.onChangePairingPayload(e.target.value)
}} onClick={e => {
e.target.value = ''
this.resetPairingPayload()
}} value={this.state.pairingPayload} id="pairingPayload"
placeholder='Scan or paste your pairing payload here'/>
</div>
<div className="col-sm-2 text-left">
<a title="Scan your pairing payload using webcam" onClick={(event) => {
event.preventDefault();
this.openPairingModal();
}} href="#"><FontAwesomeIcon icon={Icons.faQrcode} size='3x'/></a>
</div>
</div>
</div>
{this.state.pairingError && <div className="col-sm-12"><br/>
<Alert variant='danger'>{this.state.pairingError}</Alert>
</div>}
{this.state.cameraError && <div className="col-sm-12"><br/>
<Alert variant='danger'>{this.state.cameraError}</Alert>
</div>}
</div>
{this.state.pairingError && <div className="col-sm-12"><br/>
<Alert variant='danger'>{this.state.pairingError}</Alert>
</div>}
{this.state.cameraError && <div className="col-sm-12"><br/>
<Alert variant='danger'>{this.state.cameraError}</Alert>
</div>}
</div>
</div>
{this.state.hasPairingDojo && <div className="row">
<div className="col-sm-1"></div>
<div className="col-sm-11">
<div className='custom-control custom-switch' style={{paddingLeft:'1em'}}>
<input type="checkbox" className="custom-control-input" onChange={e => myThis.onChangeDojo(checked(e))} defaultChecked={myThis.state.dojo} id="dojo"/>
<label className="custom-control-label" htmlFor="dojo">Enable DOJO (wallet backend) <FontAwesomeIcon icon={Icons.faHdd}/></label>
</div>
</div>
</div>}
{this.navButtons(this.state.pairingPayload)}
</div>
}
step2() {
const checked = e => {
return e.target.checked
}
const myThis = this
return <div>
<div className="row">
<div className="col-sm-1"></div>
<div className="col-sm-11">
{!this.state.dojo && <div className='custom-control custom-switch' style={{paddingLeft:'1em'}}>
<input type="checkbox" className="custom-control-input" onChange={e => myThis.onChangeTor(checked(e))} defaultChecked={myThis.state.tor} id="tor"/>
<label className="custom-control-label" htmlFor="tor">Enable Tor {utils.torIcon()}</label>
<div className="col-sm-1 text-center">
{utils.torIcon('100%')}
</div>
<div className="col-sm-4">
{this.state.hasPairingDojo && <div>
<div className='custom-control custom-switch'>
<input type="checkbox" className="custom-control-input" onChange={e => myThis.onChangeDojo(checked(e))} defaultChecked={myThis.state.dojo} id="dojo"/>
<label className="custom-control-label" htmlFor="dojo">Use Dojo as wallet backend <FontAwesomeIcon icon={Icons.faHdd}/></label>
</div>
{this.state.dojo && <div>
<div className='custom-control custom-switch'>
<input type="checkbox" className="custom-control-input" defaultChecked={true} id="torDojo" disabled/>
<label className="custom-control-label" htmlFor="torDojo">Tor is required for Dojo</label>
</div>
</div>}
</div>}
{this.state.dojo && <div style={{paddingLeft:'1em'}}>
<label>Tor+DOJO enabled {utils.torIcon()}</label>
{!this.state.dojo && <div className='custom-control custom-switch'>
<input type="checkbox" className="custom-control-input" onChange={e => myThis.onChangeTor(checked(e))} defaultChecked={myThis.state.tor} id="tor"/>
<label className="custom-control-label" htmlFor="tor">Enable Tor</label>
</div>}
</div>
</div>
<div className="row">
<div className="col-sm-12 text-center">
{this.state.hasPairingPayload && <button type="button" className="btn btn-primary btn-lg" onClick={this.onSubmitInitialize}>Initialize GUI</button>}
<div className="col-sm-7">
<button type="button" className="btn btn-primary btn-lg" onClick={this.onSubmitInitialize}>Initialize GUI</button>
</div>
</div>
{this.state.cliInitError && <div className="row">
......@@ -398,7 +411,7 @@ class InitPage extends Component<Props> {
</div>
}
step2() {
step3() {
return <div>
<p>Success. <b>whirlpool-gui</b> is now configured.</p>
<p>Reconnecting to CLI...</p>
......
......@@ -201,8 +201,8 @@ class Utils {
return mixsTarget !== MIXSTARGET_UNLIMITED ? mixsTarget : ''
}
torIcon() {
return <svg width="20" height="20" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
torIcon(width=20) {
return <svg width={width} version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-58.12 -303.3)">
<path d="m77.15 303.3c-1.608 1.868-0.09027 2.972-0.9891 4.84 1.514-2.129 5.034-2.862 7.328-3.643-3.051 2.72-5.457 6.326-8.489 9.009l-1.975-0.8374c-0.4647-4.514-1.736-4.705 4.125-9.369z" fillRule="evenodd"/>
<path d="m74.04 313.1 2.932 0.9454c-0.615 2.034 0.3559 2.791 0.9472 3.123 1.324 0.7332 2.602 1.49 3.619 2.412 1.916 1.75 3.004 4.21 3.004 6.812 0 2.578-1.183 5.061-3.169 6.717-1.868 1.561-4.446 2.223-6.953 2.223-1.561 0-2.956-0.0708-4.47-0.5677-3.453-1.159-6.031-4.115-6.244-7.663-0.1893-2.767 0.4257-4.872 2.578-7.072 1.111-1.159 2.563-2.749 4.1-3.813 0.757-0.5204 1.119-1.191-0.4183-3.958l1.28-1.076 2.795 1.918-2.352-0.3007c0.1656 0.2366 1.189 0.7706 1.284 1.078 0.2128 0.8751-0.1911 1.771-0.3804 2.149-0.9696 1.75-1.86 2.275-3.066 3.268-2.129 1.75-4.27 2.836-4.01 7.637 0.1183 2.365 1.433 5.295 4.2 6.643 1.561 0.757 2.859 1.189 4.68 1.284 1.632 0.071 4.754-0.8988 6.457-2.318 1.821-1.514 2.838-3.808 2.838-6.149 0-2.365-0.9461-4.612-2.72-6.197-1.017-0.9223-2.696-2.034-3.737-2.625-1.041-0.5912-2.782-2.06-2.356-3.645z"/>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment