feat: added a new component to handle secrets

Added a new component that enables to 'blur' the text and show the text
content if clicked

src/application/ApplicationDetail/SenderAPI.tsx

@@ -22,6 +22,7 @@ import { snippet as java_snippet } from './snippets/sender/java';
 import { snippet as node_snippet } from './snippets/sender/node';
 import { snippet as curl_snippet } from './snippets/sender/curl';
 import { links } from '../../links';
+import { Secret } from '../../common/Secret';
 
 interface State {
   refreshSecret: boolean;
@@ -80,7 +81,7 @@ export class SenderAPI extends Component<Props, State> {
               Master Secret:
             </TextListItem>
             <TextListItem component={TextListItemVariants.dd}>
-              {this.props.app.masterSecret}
+              <Secret text={this.props.app.masterSecret} />
             </TextListItem>
 
             <TextListItem component={TextListItemVariants.dd}>

src/application/ApplicationDetail/panels/VariantDetails.tsx

@@ -24,6 +24,7 @@ import { IOSCertVariantDetails } from './ios_cert/iOSCertVariantDetails';
 import { IOSCertCodeSnippets } from './ios_cert/iOSCertCodeSnippets';
 import { WebPushVariantDetails } from './web_push/WebPushVariantDetails';
 import { WebPushCodeSnippets } from './web_push/WebPushCodeSnippets';
+import { Secret } from '../../../common/Secret';
 
 interface Props {
   app: PushApplication;
@@ -138,7 +139,7 @@ export class VariantDetails extends Component<Props, State> {
               Variant Secret:
             </TextListItem>
             <TextListItem component={TextListItemVariants.dd}>
-              {this.props.variant.secret}
+              <Secret text={this.props.variant.secret} />
             </TextListItem>
 
             <TextListItem component={TextListItemVariants.dd}>

src/common/Secret.tsx

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import { Text, TextVariants, Tooltip } from '@patternfly/react-core';
+import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
+
+interface State {
+  visible: boolean;
+}
+
+interface Props {
+  text: string;
+}
+
+const hidden = {
+  color: 'transparent',
+  textShadow: '0 0 5px rgba(0,0,0,0.5)',
+};
+
+const visible = {
+  color: 'black',
+};
+
+export class Secret extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  render = () => {
+    const icon = () => {
+      if (this.state.visible) {
+        return (
+          <EyeSlashIcon
+            style={{
+              color: 'black',
+              verticalAlign: 'middle',
+              paddingBottom: 3,
+            }}
+            onClick={() => this.setState({ visible: false })}
+          />
+        );
+      } else {
+        return (
+          <EyeIcon
+            style={{
+              color: 'black',
+              verticalAlign: 'middle',
+              paddingBottom: 3,
+            }}
+            onClick={() => this.setState({ visible: true })}
+          />
+        );
+      }
+    };
+
+    return (
+      <Text
+        style={this.state.visible ? visible : hidden}
+        component={TextVariants.small}
+      >
+        {this.props.text}&nbsp;{icon()}
+      </Text>
+    );
+  };
+}