Merge branch 'main' of https://github.com/Infisical/infisical

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,23 +7,23 @@ assignees: ''
 
 ---
 
-**Describe the bug**
+### Describe the bug
 A clear and concise description of what the bug is.
 
-**To Reproduce**
+### To Reproduce
 Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+### Expected behavior
 A clear and concise description of what you expected to happen.
 
-**Screenshots**
+### Screenshots
 If applicable, add screenshots to help explain your problem.
 
-**Platform you are having the issue on:
+### Platform you are having the issue on:
 
-**Additional context**
+### Additional context
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature Request
+about: Let us now what feature you would want to have in Infisical
+title: ''
+labels: 'feature request'
+assignees: ''
+
+---
+
+### Feature description
+A clear and concise description of what the the feature should be.
+
+### Why would it be useful?
+Why would this feature be useful for Infisical users? 
+
+### Additional context
+Add any other context about the problem here.

README.md

@@ -7,6 +7,7 @@
 </p>
 
 <h4 align="center">
+  <a href="https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g">Slack</a> |
   <a href="https://infisical.com/signup">Infisical Cloud</a> |
   <a href="https://infisical.com/docs/self-hosting/overview">Self-Hosting</a> |
   <a href="https://infisical.com/docs/gettingStarted">Docs</a> |
@@ -20,7 +21,7 @@
   <a href="https://github.com/infisical/infisical/blob/main/CONTRIBUTING.md">
     <img src="https://img.shields.io/badge/PRs-Welcome-brightgreen" alt="PRs welcome!" />
   </a>
-  <a href="https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA">
+  <a href="https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g">
     <img src="https://img.shields.io/badge/chat-on%20Slack-blueviolet" alt="Slack community channel" />
   </a>
 </h4>
@@ -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](https://github.com/Infisical/infisical/blob/main/.github/images/star-infisical.gif?raw=true)
+
 ## What's cool about this?
 
 Infisical is simple, E2EE, and (soon to be) complete.

docs/mint.json

@@ -30,7 +30,7 @@
     {
       "name": "Blog",
       "icon": "newspaper",
-      "url": "https://infisical.com/blog"
+      "url": "https://blog.infisical.com/"
     }
   ],
   "navigation": [

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) {
+/**
+ * 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 (
-			<div className="flex flex-col my-2 md:my-4 justify-center w-full max-w-md">
-				<p className="text-sm font-semibold text-gray-400 mb-0.5">
-					{label}
-				</p>
-				{text && (
-					<p className="text-xs text-gray-400 mb-2">{text}</p>
-				)}
-				<input
-					onChange={(e) => 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
-				/>
+			<div className="flex-col w-full">
+				<div
+					className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
+				>
+					<input
+						onChange={(e) => onChangeHandler(e.target.value, index)}
+						type={type}
+						value={value}
+						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"
+					/>
+				</div>
 			</div>
 		);
-	} else {
+	} else if (type === "value") {
 		return (
 			<div className="flex-col w-full">
 				<div
-					className={`group flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
+					className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
 				>
 					<input
 						onChange={(e) => 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"
+								? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
 								: ""
-						} 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`}
+						} 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"
 					/>
+					<div 
+						className={`${
+							blurred
+								? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
+								: ""
+						} flex flex-row font-mono absolute z-0 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-100`}
+					>
+						{findReferences(value).map((text, id) => 
+							id % 2 == 0 || text.length <= 2
+							? <span className="ph-no-capture">{text}</span> 
+							: <span className="ph-no-capture text-yellow">
+								{text.slice(0, 2)}
+								<span className="ph-no-capture text-yellow-200/80">
+									{text.slice(2, text.length - 1)}
+								</span>
+								{text.slice(text.length - 1, text.length) == "}" 
+								? <span className="ph-no-capture text-yellow">{text.slice(text.length - 1, text.length)} </span> 
+								: <span className="ph-no-capture text-yellow-400">{text.slice(text.length - 1, text.length)} </span>}
+							</span>)}
+					</div>
 					{blurred && (
-						<div className="peer pr-24 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
+						<div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
 							<p className="ml-2"></p>
 							{value
 								.split("")

frontend/components/navigation/NavBarDashboard.js

@@ -31,7 +31,7 @@ const supportOptions = [
 	[
 		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faBook} />,
 		"Read Docs",
-		"https://infisical.com/docs/gettingStarted",
+		"https://infisical.com/docs/getting-started/introduction",
 	],
 	[
 		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faGithub} />,

frontend/pages/dashboard/[id].js

@@ -45,26 +45,20 @@ const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility,
 				<div className="min-w-xl w-96">
 					<div className="flex items-center md:px-1 rounded-lg mt-4 md:mt-0 max-h-10">
 						<DashboardInputField
-							label=""
 							onChangeHandler={modifyKey}
 							type="varName"
 							index={keyPair[1]}
 							value={keyPair[2]}
-							placeholder=""
-							isRequired
 						/>
 					</div>
 				</div>
 				<div className="w-full min-w-5xl">
 					<div className="flex min-w-7xl items-center pl-1 pr-1.5 rounded-lg mt-4 md:mt-0 max-h-10 ">
 						<DashboardInputField
-							label=""
 							onChangeHandler={modifyValue}
 							type="value"
 							index={keyPair[1]}
 							value={keyPair[3]}
-							placeholder=""
-							isRequired
 							blurred={isBlurred}
 						/>
 					</div>
@@ -381,7 +375,7 @@ export default function Dashboard() {
 					{checkDocsPopUpVisible && 
 						<BottonRightPopup 
 							buttonText="Check Docs" 
-							buttonLink="https://www.infisical.com/docs/gettingStarted"
+							buttonLink="https://infisical.com/docs/getting-started/introduction"
 							titleText="Good job!" 
 							emoji="🎉" 
 							textLine1="Congrats on adding more secrets." 

frontend/pages/settings/project/[id].js

@@ -158,7 +158,7 @@ export default function SettingsBasic() {
 										snipets for various languages and
 										frameworks, see{" "}
 										<a
-											href="https://infisical.com/docs/gettingStarted"
+											href="https://infisical.com/docs/getting-started/introduction"
 											target="_blank"
 											rel="noopener"
 											className="text-primary hover:opacity-80 duration-200"