awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-04 17:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use dropdown instead of switch

Browse Source
This commit is contained in:
ShubhamPalriwala
2024-05-31 09:24:39 +05:30
parent 89eff65124
commit 862e0437e7
3 changed files with 89 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/images/platform/secret-sharing/new-time-bound-secret.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 131 KiB

After

Width:  |  Height:  |  Size: 114 KiB

docs/images/platform/secret-sharing/new-view-bound-secret.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 110 KiB

frontend/src/views/ShareSecretPage/components/AddShareSecretModal.tsx
+89 -77
View File
@@ -21,7 +21,6 @@ import {
SecretInput, SecretInput,
Select, Select,
SelectItem, SelectItem,
Switch
} from "@app/components/v2"; } from "@app/components/v2";
import { useOrganization } from "@app/context"; import { useOrganization } from "@app/context";
import { useTimedReset } from "@app/hooks"; import { useTimedReset } from "@app/hooks";
@@ -62,7 +61,8 @@ const expirationUnitsAndActions = [
]; ];
const schema = yup.object({ const schema = yup.object({
value: yup.string().max(1000).required().label("Shared Secret Value"), value: yup.string().max(10000).required().label("Shared Secret Value"),
expiryOption: yup.string().optional().label("Expiration Option").default("Time"),
expiresAfterViews: yup.number().min(1).optional().label("Expires After Views"), expiresAfterViews: yup.number().min(1).optional().label("Expires After Views"),
expiresInValue: yup.number().min(1).optional().label("Expiration Value"), expiresInValue: yup.number().min(1).optional().label("Expiration Value"),
expiresInUnit: yup.string().optional().label("Expiration Unit") expiresInUnit: yup.string().optional().label("Expiration Unit")
@@ -90,7 +90,7 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
const createSharedSecret = useCreateSharedSecret(); const createSharedSecret = useCreateSharedSecret();
const { currentOrg } = useOrganization(); const { currentOrg } = useOrganization();
const [newSharedSecret, setnewSharedSecret] = useState(""); const [newSharedSecret, setnewSharedSecret] = useState("");
const [expiryOption, setExpiryOption] = useState<"time" | "views">("time"); const [expiryOption, setExpiryOption] = useState<"Time" | "Views">("Time");
const hasSharedSecret = Boolean(newSharedSecret); const hasSharedSecret = Boolean(newSharedSecret);
const [isUrlCopied, , setIsUrlCopied] = useTimedReset<boolean>({ const [isUrlCopied, , setIsUrlCopied] = useTimedReset<boolean>({
initialState: false initialState: false
@@ -134,8 +134,8 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
iv, iv,
tag, tag,
hashedHex, hashedHex,
expiresAt: expiryOption === "time" ? expiresAt : undefined, expiresAt: expiryOption === "Time" ? expiresAt : undefined,
expiresAfterViews: expiryOption === "views" ? expiresAfterViews : undefined expiresAfterViews: expiryOption === "Views" ? expiresAfterViews : undefined
}); });
setnewSharedSecret( setnewSharedSecret(
`${window.location.origin}/shared/secret/${id}?key=${encodeURIComponent( `${window.location.origin}/shared/secret/${id}?key=${encodeURIComponent(
@@ -197,88 +197,100 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
</FormControl> </FormControl>
)} )}
/> />
<div> <div className="flex w-full flex-row">
<p className="mb-2 flex items-center text-sm font-normal text-mineshaft-400"> <div className="flex w-1/5">
Set Expiry Based On
</p>
<div className="mb-4 flex w-full flex-row justify-start">
<p className="mb-0.5 mr-1 flex items-center text-sm font-normal text-mineshaft-400">
Time
</p>
<Switch
id="expiryOption"
onCheckedChange={(value) => setExpiryOption(value ? "views" : "time")}
isChecked={expiryOption === "views"}
/>
<p className="mb-0.5 ml-3 flex items-center text-sm font-normal text-mineshaft-400">
Views
</p>
</div>
</div>
<div>
{expiryOption === "views" ? (
<Controller <Controller
control={control} control={control}
name="expiresAfterViews" name="expiryOption"
defaultValue={1} defaultValue="Time"
render={({ field, fieldState: { error } }) => ( render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl <FormControl
className="mb-4 w-full" label="Expire On"
label="Expires After Views"
isError={Boolean(error)}
errorText={error?.message} errorText={error?.message}
isError={Boolean(error)}
> >
<Input {...field} type="number" min={1} /> <Select
defaultValue={field.value}
{...field}
onValueChange={(e: "Time" | "Views") => setExpiryOption(e)}
value={expiryOption}
className="w-full"
>
{["Time", "Views"].map((unit) => (
<SelectItem value={unit} key={unit}>
{unit}
</SelectItem>
))}
</Select>
</FormControl> </FormControl>
)} )}
/> />
) : ( </div>
<div className="flex w-full flex-row justify-end"> <div className="flex w-4/5">
<div className="w-3/5"> {expiryOption === "Views" ? (
<Controller <Controller
control={control} control={control}
name="expiresInValue" name="expiresAfterViews"
defaultValue={1} defaultValue={1}
render={({ field, fieldState: { error } }) => ( render={({ field, fieldState: { error } }) => (
<FormControl <FormControl
label="Expiration Value" className="mb-4 w-full"
isError={Boolean(error)} label="Expires After Views"
errorText={error?.message} isError={Boolean(error)}
> errorText={error?.message}
<Input {...field} type="number" min={0} /> >
</FormControl> <Input {...field} type="number" min={1} />
)} </FormControl>
/> )}
</div> />
<div className="w-2/5 pl-4"> ) : (
<Controller <div className="flex w-full">
control={control} <div className="w-3/5">
name="expiresInUnit" <Controller
defaultValue={expirationUnitsAndActions[0].unit} control={control}
render={({ field: { onChange, ...field }, fieldState: { error } }) => ( name="expiresInValue"
<FormControl defaultValue={1}
label="Expiration Unit" render={({ field, fieldState: { error } }) => (
errorText={error?.message} <FormControl
isError={Boolean(error)} label="Expiration Value"
> isError={Boolean(error)}
<Select errorText={error?.message}
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
> >
{expirationUnitsAndActions.map(({ unit }) => ( <Input {...field} type="number" min={0} />
<SelectItem value={unit} key={unit}> </FormControl>
{unit} )}
</SelectItem> />
))} </div>
</Select> <div className="w-2/5 pl-4">
</FormControl> <Controller
)} control={control}
/> name="expiresInUnit"
defaultValue={expirationUnitsAndActions[0].unit}
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Expiration Unit"
errorText={error?.message}
isError={Boolean(error)}
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
{expirationUnitsAndActions.map(({ unit }) => (
<SelectItem value={unit} key={unit}>
{unit}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
</div>
</div> </div>
</div> )}
)} </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<Button <Button