Break down Connect on many smaller components

3 files changed, 115 insertions, 0 deletions

diff --git a/gui/packages/components/src/ClipboardLabel.tsx b/gui/packages/components/src/ClipboardLabel.tsx
new file mode 100644
index 0000000000..9cabe96ffd
--- /dev/null
+++ b/gui/packages/components/src/ClipboardLabel.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Clipboard, Component, Text, Types } from 'reactxp';
+
+interface IProps {
+  value: string;
+  delay: number;
+  message: string;
+  style?: Types.TextStyleRuleSet;
+}
+
+interface IState {
+  showsMessage: boolean;
+}
+
+export default class ClipboardLabel extends Component<IProps, IState> {
+  public static defaultProps: Partial<IProps> = {
+    delay: 3000,
+    message: 'Copied!',
+  };
+
+  public state: IState = {
+    showsMessage: false,
+  };
+
+  private timer: NodeJS.Timer | null = null;
+
+  public componentWillUnmount() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  }
+
+  public render() {
+    return (
+      <Text style={this.props.style} onPress={this.handlePress}>
+        {this.state.showsMessage ? this.props.message : this.props.value}
+      </Text>
+    );
+  }
+
+  private handlePress = () => {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+
+    this.timer = setTimeout(() => this.setState({ showsMessage: false }), this.props.delay);
+    this.setState({ showsMessage: true });
+
+    Clipboard.setText(this.props.value);
+  };
+}
diff --git a/gui/packages/components/src/SecuredLabel.tsx b/gui/packages/components/src/SecuredLabel.tsx
new file mode 100644
index 0000000000..9bf9ce0cdc
--- /dev/null
+++ b/gui/packages/components/src/SecuredLabel.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Clipboard, Component, Styles, Text, Types } from 'reactxp';
+
+export enum SecuredDisplayStyle {
+  secured,
+  blocked,
+  securing,
+  unsecured,
+}
+
+interface IProps {
+  displayStyle: SecuredDisplayStyle;
+  style: Types.TextStyleRuleSet;
+}
+
+const styles = {
+  securing: Styles.createTextStyle({
+    color: 'rgb(255, 255, 255)', // white
+  }),
+  secured: Styles.createTextStyle({
+    color: 'rgb(68, 173, 77)', // green
+  }),
+  unsecured: Styles.createTextStyle({
+    color: 'rgb(208, 2, 27)', // red
+  }),
+};
+
+export default class SecuredLabel extends Component<IProps> {
+  public render() {
+    return <Text style={[this.props.style, this.getTextStyle()]}>{this.getText()}</Text>;
+  }
+
+  private getText() {
+    switch (this.props.displayStyle) {
+      case SecuredDisplayStyle.secured:
+        return 'SECURE CONNECTION';
+
+      case SecuredDisplayStyle.blocked:
+        return 'BLOCKED CONNECTION';
+
+      case SecuredDisplayStyle.securing:
+        return 'CREATING SECURE CONNECTION';
+
+      case SecuredDisplayStyle.unsecured:
+        return 'UNSECURED CONNECTION';
+    }
+  }
+
+  private getTextStyle() {
+    switch (this.props.displayStyle) {
+      case SecuredDisplayStyle.secured:
+      case SecuredDisplayStyle.blocked:
+        return styles.secured;
+
+      case SecuredDisplayStyle.securing:
+        return styles.securing;
+
+      case SecuredDisplayStyle.unsecured:
+        return styles.unsecured;
+    }
+  }
+}
diff --git a/gui/packages/components/src/index.ts b/gui/packages/components/src/index.ts
index 2a416a4f1d..7d5ad156f0 100644
--- a/gui/packages/components/src/index.ts
+++ b/gui/packages/components/src/index.ts
@@ -1 +1,3 @@
 export { default as Accordion } from './Accordion';
+export { default as ClipboardLabel } from './ClipboardLabel';
+export { default as SecuredLabel, SecuredDisplayStyle } from './SecuredLabel';