Merge pull request #2653 from scott-ray-wilson/fix-copy-shared-secret-link

Fix: Copy Shared Secret Link to Clipboard on Generate

frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx

@@ -85,18 +85,22 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
         accessType
       });
 
-      setSecretLink(`${window.location.origin}/shared/secret/${id}`);
+      const link = `${window.location.origin}/shared/secret/${id}`;
+
+      setSecretLink(link);
       reset();
 
+      navigator.clipboard.writeText(link);
       setCopyTextSecret("secret");
+
       createNotification({
-        text: "Successfully created a shared secret",
+        text: "Shared secret link copied to clipboard.",
         type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: "Failed to create a shared secret",
+        text: "Failed to create a shared secret.",
         type: "error"
       });
     }
@@ -226,7 +230,7 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
         isLoading={isSubmitting}
         isDisabled={isSubmitting}
       >
-        Create secret link
+        Create Secret Link
       </Button>
     </form>
   ) : (
@@ -253,7 +257,7 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
         onClick={() => setSecretLink("")}
         rightIcon={<FontAwesomeIcon icon={faRedo} className="pl-2" />}
       >
-        Share another secret
+        Share Another Secret
       </Button>
     </>
   );

frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx

@@ -1,80 +1,80 @@
-import { Controller, useForm } from "react-hook-form";
-import { faArrowRight, faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
-
-type Props = {
-  onPasswordSubmit: (val: any) => void;
-  isSubmitting?: boolean;
-  isInvalidCredential?: boolean;
-};
-
-const formSchema = z.object({
-  password: z.string()
-});
-
-export type FormData = z.infer<typeof formSchema>;
-
-export const PasswordContainer = ({
-  onPasswordSubmit,
-  isSubmitting,
-  isInvalidCredential
-}: Props) => {
-  const { control, handleSubmit } = useForm<FormData>({
-    resolver: zodResolver(formSchema)
-  });
-
-  const onFormSubmit = async ({ password }: FormData) => {
-    onPasswordSubmit(password);
-  };
-
-  return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
-      <form onSubmit={handleSubmit(onFormSubmit)}>
-        <Controller
-          control={control}
-          name="password"
-          defaultValue=""
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              isError={Boolean(error) || isInvalidCredential}
-              errorText={isInvalidCredential ? "Invalid credential" : error?.message}
-              isRequired
-              label="Password"
-            >
-              <div className="flex items-center justify-between gap-2 rounded-md">
-                <Input {...field} placeholder="Enter Password to view secret" type="password" />
-                <div className="flex">
-                  <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative"
-                    onClick={handleSubmit(onFormSubmit)}
-                  >
-                    <FontAwesomeIcon
-                      className={isSubmitting ? "fa-spin" : ""}
-                      icon={isSubmitting ? faSpinner : faArrowRight}
-                    />
-                  </IconButton>
-                </div>
-              </div>
-            </FormControl>
-          )}
-        />
-      </form>
-      <Button
-        className="w-full bg-mineshaft-700 py-3 text-bunker-200"
-        colorSchema="primary"
-        variant="outline_bg"
-        size="sm"
-        onClick={() => window.open("https://app.infisical.com/share-secret", "_blank")}
-        rightIcon={<FontAwesomeIcon icon={faArrowRight} className="pl-2" />}
-      >
-        Share your own secret
-      </Button>
-    </div>
-  );
-};
+import { Controller, useForm } from "react-hook-form";
+import { faArrowRight, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+
+type Props = {
+  onPasswordSubmit: (val: any) => void;
+  isSubmitting?: boolean;
+  isInvalidCredential?: boolean;
+};
+
+const formSchema = z.object({
+  password: z.string()
+});
+
+export type FormData = z.infer<typeof formSchema>;
+
+export const PasswordContainer = ({
+  onPasswordSubmit,
+  isSubmitting,
+  isInvalidCredential
+}: Props) => {
+  const { control, handleSubmit } = useForm<FormData>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const onFormSubmit = async ({ password }: FormData) => {
+    onPasswordSubmit(password);
+  };
+
+  return (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <form onSubmit={handleSubmit(onFormSubmit)}>
+        <Controller
+          control={control}
+          name="password"
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error) || isInvalidCredential}
+              errorText={isInvalidCredential ? "Invalid credential" : error?.message}
+              isRequired
+              label="Password"
+            >
+              <div className="flex items-center justify-between gap-2 rounded-md">
+                <Input {...field} placeholder="Enter Password to view secret" type="password" />
+                <div className="flex">
+                  <IconButton
+                    ariaLabel="copy icon"
+                    colorSchema="secondary"
+                    className="group relative"
+                    onClick={handleSubmit(onFormSubmit)}
+                  >
+                    <FontAwesomeIcon
+                      className={isSubmitting ? "fa-spin" : ""}
+                      icon={isSubmitting ? faSpinner : faArrowRight}
+                    />
+                  </IconButton>
+                </div>
+              </div>
+            </FormControl>
+          )}
+        />
+      </form>
+      <Button
+        className="w-full bg-mineshaft-700 py-3 text-bunker-200"
+        colorSchema="primary"
+        variant="outline_bg"
+        size="sm"
+        onClick={() => window.open("https://app.infisical.com/share-secret", "_blank")}
+        rightIcon={<FontAwesomeIcon icon={faArrowRight} className="pl-2" />}
+      >
+        Share Your Own Secret
+      </Button>
+    </div>
+  );
+};

frontend/src/views/ViewSecretPublicPage/components/SecretContainer.tsx

@@ -79,7 +79,7 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
         onClick={() => window.open("https://app.infisical.com/share-secret", "_blank")}
         rightIcon={<FontAwesomeIcon icon={faArrowRight} className="pl-2" />}
       >
-        Share your own secret
+        Share Your Own Secret
       </Button>
     </div>
   );