diff --git a/.github/images/star-infisical.gif b/.github/images/star-infisical.gif new file mode 100644 index 000000000..bb0752cb7 Binary files /dev/null and b/.github/images/star-infisical.gif differ diff --git a/README.md b/README.md index 56ebbea71..4004d4f15 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@

+ Slack | Infisical Cloud | Self-Hosting | Docs | @@ -20,7 +21,7 @@ PRs welcome! - + Slack community channel

@@ -48,6 +49,12 @@ And more. To quickly get started, visit our [get started guide](https://infisical.com/docs/getting-started/introduction). +## Stay Up-to-Date + +Infisical officially launched as v.1.0 on November 21st, 2022. However, a lot of new features are coming very quickly. Watch **releases** of this repository to be notified about future updates: + +![infisical-star-github]() + ## What's cool about this? Infisical is simple, E2EE, and (soon to be) complete. diff --git a/frontend/components/dashboard/DashboardInputField.js b/frontend/components/dashboard/DashboardInputField.js index 06fad422e..465d2d9a6 100644 --- a/frontend/components/dashboard/DashboardInputField.js +++ b/frontend/components/dashboard/DashboardInputField.js @@ -4,48 +4,90 @@ import { faCircle } from "@fortawesome/free-solid-svg-icons"; import guidGenerator from "../utilities/randomId"; -const DashboardInputField = ({label, index, onChangeHandler, type, value, placeholder, isRequired, blurred, isStatic}) => { - if (isStatic === true) { - return ( -
-

- {label} -

- {text && ( -

{text}

- )} - console.log(e.target.value, index)} - type={type} - placeholder={placeholder} - value={value} - required={isRequired} - className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none" - readOnly - /> -
- ); - } else { +/** + * This function splits the input of a dashboard field into the parts that are inside and outside of ${...} + * @param {*} text - the value of the input in the Dashboard Input Field + * @returns + */ +const findReferences = (text) => { + var splitText = text.split('${'); + let textArray = [splitText[0]]; + for (var i = 1; i < splitText.length; i++) { + let insideBrackets = "${" + splitText[i].split('}')[0] + if (splitText[i].includes('}')) { + insideBrackets += "}" + } + textArray.push(insideBrackets) + textArray.push(splitText[i].split('}')[1]) + } + return textArray; +} + +/** + * This component renders the input fields on the dashboard + * @param {*} index - the order number of a keyPair + * @param {*} onChangeHandler - what happens when the input is modified + * @param {*} type - whether the input field is for a Key Name or for a Key Value + * @param {*} value - value of the InputField + * @param {*} blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard + * @returns + */ +const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) => { + if (type === "varName") { return (
onChangeHandler(e.target.value, index)} type={type} - placeholder={placeholder} value={value} - required={isRequired} - className={`${ - blurred - ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400" - : "" - } peer ph-no-capture bg-bunker-800 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200`} + className="asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200" spellCheck="false" /> +
+
+ ); + } else if (type === "value") { + return ( +
+
+ onChangeHandler(e.target.value, index)} + type={type} + value={value} + className={`${ + blurred + ? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent" + : "" + } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200`} + spellCheck="false" + /> +
+ {findReferences(value).map((text, id) => + id % 2 == 0 || text.length <= 2 + ? {text} + : + {text.slice(0, 2)} + + {text.slice(2, text.length - 1)} + + {text.slice(text.length - 1, text.length) == "}" + ? {text.slice(text.length - 1, text.length)} + : {text.slice(text.length - 1, text.length)} } + )} +
{blurred && ( -
+

{value .split("") diff --git a/frontend/components/utilities/generateBackupPDF.js b/frontend/components/utilities/generateBackupPDF.js index 39b8b8a02..788d80ad5 100644 --- a/frontend/components/utilities/generateBackupPDF.js +++ b/frontend/components/utilities/generateBackupPDF.js @@ -111,7 +111,7 @@ function generateBackupPDF(personalName, personalEmail, generatedKey) { doc.text( 180, 420, - "https://infisical.com/login" + "https://app.infisical.com/login" ); doc.text( 180, diff --git a/frontend/pages/dashboard/[id].js b/frontend/pages/dashboard/[id].js index aeffacb5e..42f1f81d3 100644 --- a/frontend/pages/dashboard/[id].js +++ b/frontend/pages/dashboard/[id].js @@ -45,26 +45,20 @@ const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility,