-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Identity components from downstream
- Loading branch information
1 parent
006a7ac
commit fc1df2a
Showing
4 changed files
with
432 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
import * as defaults from '../settings/state'; | ||
|
||
import merge from 'lodash.merge'; | ||
import FabricComponent from '../types/component'; | ||
|
||
// Components | ||
import { | ||
Button, | ||
// Card, | ||
// Container, | ||
Icon, | ||
// Item, | ||
// Grid, | ||
Menu, | ||
Modal, | ||
// Segment | ||
} from 'semantic-ui-react'; | ||
|
||
import SeedEntryForm from './SeedEntryForm'; | ||
|
||
class FabricIdentity extends FabricComponent { | ||
constructor (props) { | ||
super(props); | ||
|
||
this.settings = merge({ | ||
explain: false, | ||
modalOpen: false, | ||
keys: [] | ||
}, props); | ||
|
||
// TODO: prepare Fabric | ||
// i.e., use _state here, then import from getter and apply properties | ||
// _from_ @react | ||
this.state = { | ||
explain: true, | ||
identity: null, | ||
integrity: 'sha256-deadbeefbabe', | ||
status: 'PAUSED' | ||
}; | ||
|
||
return this; | ||
} | ||
|
||
handleChange (e, v) { | ||
console.log('change:', e, v); | ||
// this.setState({ seed: e }); | ||
} | ||
|
||
handleClose () { | ||
this.setState({ modalOpen: false }); | ||
} | ||
|
||
render () { | ||
return ( | ||
<> | ||
<Menu.Item className='borderless'> | ||
<Button icon onClick={this._handleCardClick.bind(this)} labelPosition='left'> | ||
<span>{/*<strong>Identity:</strong> */}<code>{this.state.identity || 'anonymous'}</code></span> | ||
<Icon name='user' /> | ||
</Button> | ||
</Menu.Item> | ||
<Modal open={this.state.modalOpen} onClose={this.handleClose.bind(this)} closeIcon> | ||
<Modal.Header>Login</Modal.Header> | ||
<Modal.Content> | ||
<SeedEntryForm handleClose={this.handleClose.bind(this)} handleChange={this.handleChange.bind(this)} /> | ||
</Modal.Content> | ||
</Modal> | ||
</> | ||
); | ||
} | ||
|
||
isVisible () { | ||
if (this.state.explain) return true; | ||
return false; | ||
} | ||
|
||
_handleCardClick () { | ||
this.setState({ modalOpen: true }); | ||
} | ||
|
||
_handleRestoreButtonClick () { | ||
this.setState({ modalOpen: true }); | ||
} | ||
|
||
_handleGeneratorButtonClick () { | ||
this.setState({ modalOpen: true }); | ||
} | ||
|
||
_handleGenerateKeyPress (e) { | ||
if (e.charCode === 32 || e.charCode === 13) { | ||
// Prevent the default action to stop scrolling when space is pressed | ||
e.preventDefault(); | ||
console.log('Button received click with keyboard'); | ||
} | ||
} | ||
|
||
_handleRestoreKeyPress (e) { | ||
if (e.charCode === 32 || e.charCode === 13) { | ||
// Prevent the default action to stop scrolling when space is pressed | ||
e.preventDefault(); | ||
console.log('Button received click with keyboard'); | ||
} | ||
} | ||
} | ||
|
||
export default FabricIdentity; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,153 @@ | ||
// Dependencies | ||
import merge from 'lodash.merge'; | ||
import TrezorConnect from 'trezor-connect'; | ||
|
||
import FabricComponent from '../types/component'; | ||
|
||
// Components | ||
import { | ||
Button, | ||
Card, | ||
Form, | ||
// Container, | ||
Icon, | ||
// Grid, | ||
// Menu, | ||
// Segment | ||
} from 'semantic-ui-react'; | ||
|
||
import IdentityPicker from './IdentityPicker'; | ||
import SeedEntryForm from './SeedEntryForm'; | ||
|
||
class FabricIdentityManager extends FabricComponent { | ||
constructor (props) { | ||
super(props); | ||
|
||
this.settings = merge({ | ||
explain: false, | ||
keys: [] | ||
}, props); | ||
|
||
// TODO: prepare Fabric | ||
// i.e., use _state here, then import from getter and apply properties | ||
// _from_ @react | ||
this.state = { | ||
explain: true, | ||
hash: null, | ||
identities: [], | ||
integrity: 'sha256-deadbeefbabe', | ||
status: 'PAUSED', | ||
step: 1 | ||
}; | ||
|
||
return this; | ||
} | ||
|
||
handleChange = input => event => { | ||
this.setState({[input]: event.target.value}) | ||
} | ||
|
||
setStep () { | ||
const { step } = this.state; | ||
this.setState({ step }); | ||
} | ||
|
||
nextStep () { | ||
const { step } = this.state; | ||
this.setState({ | ||
step: step + 1 | ||
}); | ||
} | ||
|
||
previoustStep () { | ||
const { step } = this.state; | ||
this.setState({ | ||
step: step - 1 | ||
}); | ||
} | ||
|
||
start () { | ||
TrezorConnect.manifest({ | ||
email: 'labs@fabric.pub', | ||
appUrl: 'https://hub.fabric.pub' | ||
}); | ||
|
||
this.setState({ status: 'STARTED' }); | ||
return this; | ||
} | ||
|
||
render () { | ||
const { step } = this.state; | ||
const { firstName, lastName, email, age, city, country } = this.state; | ||
const values = { firstName, lastName, email, age, city, country }; | ||
|
||
let element = null; | ||
|
||
switch (step) { | ||
case 1: | ||
element = ( | ||
<IdentityPicker nextStep={this.nextStep.bind(this)} setStep={this.setStep.bind(this)} handleChange={this.handleChange.bind(this)} values={values} /> | ||
); | ||
break; | ||
case 2: | ||
element = ( | ||
<SeedEntryForm nextStep={this.nextStep.bind(this)} setStep={this.setStep.bind(this)} handleChange={this.handleChange.bind(this)} values={values} /> | ||
); | ||
break; | ||
case 3: | ||
element = ( | ||
<IdentityPicker nextStep={this.nextStep.bind(this)} setStep={this.setStep.bind(this)} handleChange={this.handleChange.bind(this)} values={values} /> | ||
); | ||
break; | ||
case 4: | ||
element = ( | ||
<IdentityPicker nextStep={this.nextStep.bind(this)} setStep={this.setStep.bind(this)} handleChange={this.handleChange.bind(this)} values={values} /> | ||
); | ||
break; | ||
} | ||
|
||
return ( | ||
<> | ||
<Card fluid> | ||
<Card.Content attached='top'> | ||
<Form> | ||
<Form.Group inline widths='equal'> | ||
<Form.Field> | ||
<Form.Input disabled value={this.state.hash} /> | ||
</Form.Field> | ||
<Form.Field> | ||
<Button.Group floated='right'> | ||
<Button><Icon name='history' /></Button> | ||
<Button><Icon name='refresh' /></Button> | ||
</Button.Group> | ||
{/* | ||
<Button.Group> | ||
<Button><Icon name='info' /></Button> | ||
<Button><Icon name='star' /></Button> | ||
</Button.Group> | ||
*/} | ||
</Form.Field> | ||
</Form.Group> | ||
</Form> | ||
</Card.Content> | ||
<Card.Content hidden={(!this.isVisible())}> | ||
<Card.Header>Identity Manager</Card.Header> | ||
<Card.Meta> | ||
<div><strong>Status:</strong> <pre>{this.state.status}</pre></div> | ||
<div><strong>State:</strong> <pre>{JSON.stringify(this.state, null, ' ')}</pre></div> | ||
</Card.Meta> | ||
<Card.Description>Get started by restoring from an existing seed phrase or generating a new one.</Card.Description> | ||
</Card.Content> | ||
<Card.Content extra attached='bottom'>{element}</Card.Content> | ||
</Card> | ||
</> | ||
); | ||
} | ||
|
||
isVisible () { | ||
if (this.state.explain) return true; | ||
return false; | ||
} | ||
} | ||
|
||
export default FabricIdentityManager; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import React, { Component } from 'react'; | ||
import { Icon, Form, Button } from 'semantic-ui-react'; | ||
|
||
class IdentityPicker extends Component { | ||
render () { | ||
const { values } = this.props; | ||
|
||
return ( | ||
<Form> | ||
<Button.Group fluid> | ||
<Button icon color='green' onClick={this._handleGeneratorButtonClick.bind(this)} onKeyPress={this._handleGenerateKeyPress.bind(this)} labelPosition='left'>Generate <Icon name='leaf' /></Button> | ||
<Button.Or /> | ||
<Button icon color='blue' onClick={this._handleRestoreButtonClick.bind(this)} onKeyPress={this._handleRestoreKeyPress.bind(this)} labelPosition='right'>Restore from Seed Phrase <Icon name='right chevron' /></Button> | ||
</Button.Group> | ||
<Button type='submit' onClick={this.saveAndContinue.bind(this)}>Save And Continue</Button> | ||
</Form> | ||
); | ||
} | ||
|
||
saveAndContinue (e) { | ||
e.preventDefault(); | ||
this.props.nextStep(); | ||
} | ||
|
||
_handleRestoreButtonClick () { | ||
this.setState({ step: 'SEED_RESTORE_START' }); | ||
} | ||
|
||
_handleGeneratorButtonClick () { | ||
this.setState({ step: 'SEED_GENERATE_START' }); | ||
} | ||
|
||
_handleGenerateClick () { | ||
console.log('generate request click'); | ||
} | ||
|
||
_handleGenerateKeyPress (e) { | ||
if (e.charCode === 32 || e.charCode === 13) { | ||
// Prevent the default action to stop scrolling when space is pressed | ||
e.preventDefault(); | ||
console.log('Button received click with keyboard'); | ||
} | ||
} | ||
|
||
_handleRestoreKeyPress (e) { | ||
if (e.charCode === 32 || e.charCode === 13) { | ||
// Prevent the default action to stop scrolling when space is pressed | ||
e.preventDefault(); | ||
console.log('Button received click with keyboard'); | ||
} | ||
} | ||
} | ||
|
||
export default IdentityPicker; |
Oops, something went wrong.