adding secret copy button for token

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"

client/components/shared/SecretCopy/SecretCopy.module.scss

@@ -0,0 +1,6 @@
+.buttons {
+  margin-top: 12px;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}

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;