From 70ac5cfd7e9e10e52456807967d230db9664a177 Mon Sep 17 00:00:00 2001
From: Nick Grato <nickgrato@ngrato-27545.local>
Date: Wed, 27 Sep 2023 15:42:14 -0700
Subject: [PATCH] adding secret copy button for token

---
 .../modules/hubs/HubFormCard/HubFormCard.tsx  |  9 ++++-
 .../shared/SecretCopy/SecretCopy.module.scss  |  6 +++
 .../shared/SecretCopy/SecretCopy.tsx          | 40 +++++++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 client/components/shared/SecretCopy/SecretCopy.module.scss
 create mode 100644 client/components/shared/SecretCopy/SecretCopy.tsx

diff --git a/client/components/modules/hubs/HubFormCard/HubFormCard.tsx b/client/components/modules/hubs/HubFormCard/HubFormCard.tsx
index 27cdf6d9..9a2be9f1 100644
--- a/client/components/modules/hubs/HubFormCard/HubFormCard.tsx
+++ b/client/components/modules/hubs/HubFormCard/HubFormCard.tsx
@@ -15,6 +15,9 @@ import validate, { FormValues } from './validate';
 import { useIsProfessional } from 'hooks/usePlans';
 import Hub from 'classes/Hub';
 import { HubT } from 'types/General';
+import SecretCopy from '@Shared/SecretCopy/SecretCopy';
+import { CookiesE } from 'types/Cookies';
+import { getCookie } from 'cookies-next';
 
 type HubFormCardPropsT = {
   hub: HubT;
@@ -303,6 +306,11 @@ const HubFormCard = ({ hub: _hub, classProp = '' }: HubFormCardPropsT) => {
                 troubleshooting custom domains.
               </p>
 
+              <SecretCopy
+                secret={getCookie(CookiesE.TurkeyAuthToken) as string}
+                classProp="mb-24"
+              />
+
               <div className="mb-20 youtube-video">
                 <iframe
                   src="https://www.youtube.com/embed/0PTmHNKdZB0"
@@ -321,7 +329,6 @@ const HubFormCard = ({ hub: _hub, classProp = '' }: HubFormCardPropsT) => {
               </a>
             </section>
           )}
-
           <section className={styles.actions_wrapper}>
             <Button
               label="cancel"
diff --git a/client/components/shared/SecretCopy/SecretCopy.module.scss b/client/components/shared/SecretCopy/SecretCopy.module.scss
new file mode 100644
index 00000000..d79e8374
--- /dev/null
+++ b/client/components/shared/SecretCopy/SecretCopy.module.scss
@@ -0,0 +1,6 @@
+.buttons {
+  margin-top: 12px;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
diff --git a/client/components/shared/SecretCopy/SecretCopy.tsx b/client/components/shared/SecretCopy/SecretCopy.tsx
new file mode 100644
index 00000000..b81e9808
--- /dev/null
+++ b/client/components/shared/SecretCopy/SecretCopy.tsx
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { Button, CopyButton, Input, ToolTip } from '@mozilla/lilypad-ui';
+import styles from './SecretCopy.module.scss';
+
+type SecretCopyPropsT = {
+  secret: string;
+  classProp?: string;
+};
+
+const SecretCopy = ({ secret, classProp = '' }: SecretCopyPropsT) => {
+  const [isVisible, seIsVisible] = useState(false);
+
+  return (
+    <div className={`flex ${classProp}`}>
+      <Input
+        readOnly={true}
+        type={isVisible ? 'text' : 'password'}
+        label="Get turkeyauthtoken"
+        value={secret}
+        placeholder="Token"
+        name="Token"
+      />
+      <div className={styles.buttons}>
+        <Button
+          icon={isVisible ? 'eye-off' : 'eye'}
+          category="primary_outline"
+          size="small"
+          classProp="mx-12"
+          onClick={() => seIsVisible((state) => !state)}
+        />
+
+        <ToolTip description="Copy token to clipboard." location="left">
+          <CopyButton value={secret} />
+        </ToolTip>
+      </div>
+    </div>
+  );
+};
+
+export default SecretCopy;