Merge pull request #443 from jhaals/copy

Add secret copy button

website/public/locales/en.json

@@ -4,21 +4,21 @@
     "Secret message": "Secret message",
     "Encrypting message...": "Encrypting message...",
     "Encrypt Message": "Encrypt Message",
-    "One-time download":"One-time download",
+    "One-time download": "One-time download",
     "One Hour": "One Hour",
     "One Day": "One Day",
     "One Week": "One Week",
     "The encrypted message will be deleted automatically after": "The encrypted message will be deleted automatically after",
     "Fetching from database and decrypting in browser, please hold...": "Fetching from database and decrypting in browser, please hold...",
     "This secret might not be viewable again, make sure to save it now!": "This secret might not be viewable again, make sure to save it now!",
     "Downloading file and decrypting in browser, please hold...": "Downloading file and decrypting in browser, please hold...",
-    "Make sure to download the file since it is only available once":"Make sure to download the file since it is only available once",
+    "Make sure to download the file since it is only available once": "Make sure to download the file since it is only available once",
     "Share Secrets Securely With Ease": "Share Secrets Securely With Ease",
     "Yopass is created to reduce the amount of clear text passwords stored in email and chat conversations by encrypting and generating a short lived link which can only be viewed once.": "Yopass is created to reduce the amount of clear text passwords stored in email and chat conversations by encrypting and generating a short lived link which can only be viewed once.",
     "End-to-end Encryption": "End-to-end Encryption",
     "Encryption and decryption are being made locally in the browser. The key is never stored with yopass.": "Encryption and decryption are being made locally in the browser. The key is never stored with yopass.",
     "Self destruction": "Self destruction",
-    "Encrypted messages have a fixed lifetime and will be deleted automatically after expiration.":"Encrypted messages have a fixed lifetime and will be deleted automatically after expiration.",
+    "Encrypted messages have a fixed lifetime and will be deleted automatically after expiration.": "Encrypted messages have a fixed lifetime and will be deleted automatically after expiration.",
     "One-time downloads": "One-time downloads",
     "The encrypted message can only be downloaded once which reduces the risk of someone peaking your secrets.": "The encrypted message can only be downloaded once which reduces the risk of someone peaking your secrets.",
     "Simple Sharing": "Simple Sharing",
@@ -48,5 +48,6 @@
     "No secret last forever. All stored secrets will expires and self destruct automatically. Lifetime varies from one hour up to one week.": "No secret last forever. All stored secrets will expires and self destruct automatically. Lifetime varies from one hour up to one week.",
     "Decrypted Message": "Decrypted Message",
     "Created by": "Created by",
-    "Johan Haals": "Johan Haals"
-}
+    "Johan Haals": "Johan Haals",
+    "Copy": "Copy"
+}

website/src/App.scss

@@ -70,3 +70,14 @@ pre {
 li {
   list-style: none;
 }
+
+.copy-secret-button {
+  border-radius: 3px 3px 0px 0px;
+  display: block;
+  margin-right: auto;
+  margin-left: 0;
+
+  margin-bottom: -2px;
+  padding: 3px 8px;
+  font-size: 0.8em;
+}

website/src/DisplaySecret.tsx

@@ -5,6 +5,10 @@ import Error from './Error';
 import Form from './Form';
 import { decryptMessage } from './utils';
 import { useTranslation } from 'react-i18next';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'reactstrap';
+import Clipboard from 'clipboard';
 
 const DisplaySecret = () => {
   const [loading, setLoading] = useState(false);
@@ -45,7 +49,9 @@ const DisplaySecret = () => {
     <div>
       {loading && (
         <h3>
-          {t("Fetching from database and decrypting in browser, please hold...")}
+          {t(
+            'Fetching from database and decrypting in browser, please hold...',
+          )}
         </h3>
       )}
       <Error display={error} />
@@ -59,12 +65,18 @@ const Secret = (
   props: { readonly secret: string } & React.HTMLAttributes<HTMLElement>,
 ) => {
   const { t } = useTranslation();
+  new Clipboard('#copy-b', {
+    target: () => document.getElementById('pre') as Element,
+  });
 
   return props.secret ? (
     <div>
-      <h1>{t("Decrypted Message")}</h1>
-      {t("This secret might not be viewable again, make sure to save it now!")}
-      <pre>{props.secret}</pre>
+      <h1>{t('Decrypted Message')}</h1>
+      {t('This secret might not be viewable again, make sure to save it now!')}
+      <Button id="copy-b" color="primary" className="copy-secret-button">
+        <FontAwesomeIcon icon={faCopy} /> {t('Copy')}
+      </Button>
+      <pre id="pre">{props.secret}</pre>
     </div>
   ) : null;
 };

website/src/Result.tsx

@@ -20,15 +20,19 @@ const Result = (
 
   return (
     <div>
-      <h3>{t("Secret stored in database")}</h3>
+      <h3>{t('Secret stored in database')}</h3>
       <p>
-        {t("Remember that the secret can only be downloaded once so do not open the link yourself.")}
+        {t(
+          'Remember that the secret can only be downloaded once so do not open the link yourself.',
+        )}
         <br />
-        {t("The cautious should send the decryption key in a separate communication channel.")}
+        {t(
+          'The cautious should send the decryption key in a separate communication channel.',
+        )}
       </p>
-      <CopyField name="full" label={t("One-click link")} value={full} />
-      <CopyField name="short" label={t("Short link")} value={short} />
-      <CopyField name="dec" label={t("Decryption Key")} value={password} />
+      <CopyField name="full" label={t('One-click link')} value={full} />
+      <CopyField name="short" label={t('Short link')} value={short} />
+      <CopyField name="dec" label={t('Decryption Key')} value={password} />
     </div>
   );
 };