Add Identity components from downstream

FabricLabs · Mar 15, 2022 · fc1df2a · fc1df2a
1 parent 006a7ac
commit fc1df2a
Show file tree

Hide file tree

Showing 4 changed files with 432 additions and 0 deletions.
diff --git a/components/FabricIdentity.js b/components/FabricIdentity.js
@@ -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;
diff --git a/components/FabricIdentityManager.js b/components/FabricIdentityManager.js
@@ -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;
diff --git a/components/IdentityPicker.js b/components/IdentityPicker.js
@@ -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;