awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: copy shared secret link to clipboard on generate

Browse Source
This commit is contained in:
Scott Wilson
2024-10-28 10:25:09 -07:00
parent 38ede687cd
commit b3cf43b46d
3 changed files with 90 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx
View File

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

160
frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx
View File

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

2
frontend/src/views/ViewSecretPublicPage/components/SecretContainer.tsx
View File

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