translate(frontend): dashboard page

frontend/components/dashboard/DropZone.js

@@ -9,6 +9,8 @@ import Image from "next/image";
 import parse from "../utilities/file";
 import Button from "../basic/buttons/Button";
 
+import useTranslation from "next-translate/useTranslation";
+
 const DropZone = ({
 	setData,
 	setErrorDragAndDrop,
@@ -17,8 +19,10 @@ const DropZone = ({
 	addPresetRow,
 	setButtonReady,
 	keysExist,
-	numCurrentRows
+	numCurrentRows,
 }) => {
+	const { t } = useTranslation();
+
 	const handleDragEnter = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -50,15 +54,14 @@ const DropZone = ({
 		var file = e.dataTransfer.files[0],
 			reader = new FileReader();
 		reader.onload = function (event) {
-			const keyPairs = parse(event.target.result)
+			const keyPairs = parse(event.target.result);
-			const newData = Object.keys(keyPairs)
+			const newData = Object.keys(keyPairs).map((key, index) => [
-				.map((key, index) => [
+				guidGenerator(),
-					guidGenerator(),
+				numCurrentRows + index,
-					numCurrentRows + index, 
+				key,
-					key,
+				keyPairs[key],
-					keyPairs[key],
+				"shared",
-					"shared",
+			]);
-				]);
 			setData(newData);
 			setButtonReady(true);
 		};
@@ -84,7 +87,7 @@ const DropZone = ({
 				.split("\n")
 				.map((line, index) => [
 					guidGenerator(),
-					numCurrentRows + index, 
+					numCurrentRows + index,
 					line.split("=")[0],
 					line.split("=").slice(1, line.split("=").length).join("="),
 					"shared",
@@ -130,7 +133,7 @@ const DropZone = ({
 					className="text-gray-300 text-3xl mr-6"
 				/>
 				<p className="text-gray-300 mt-1">
-					Drag and drop your .env file here to add more keys.
+					{t("common:drop-zone-keys")}
 				</p>
 			</div>
 			{errorDragAndDrop ? (
@@ -150,7 +153,7 @@ const DropZone = ({
 			onDrop={(e) => handleDrop(e)}
 		>
 			<FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
-			<p className="">Drag and drop your .env file here.</p>
+			<p className="">{t("common:drop-zone")}</p>
 			<input
 				id="fileSelect"
 				type="file"
@@ -166,7 +169,7 @@ const DropZone = ({
 			<div className="z-10 mb-6">
 				<Button
 					color="mineshaft"
-					text="Create a new .env file" 
+					text="Create a new .env file"
 					onButtonPressed={createNewFile}
 					size="md"
 				/>

frontend/i18n.js

@@ -4,5 +4,6 @@ module.exports = {
 	pages: {
 		"*": ["common", "nav"],
 		"reg:^/(login|signup)": ["auth"],
+		"/dashboard/[id]": ["dashboard"],
 	},
 };

frontend/locales/en-US/common.json

@@ -12,5 +12,10 @@
 	"password-validate-length": "14 characters",
 	"password-validate-case": "1 lowercase character",
 	"password-validate-number": "1 number",
-	"maintenance-alert": "We are experiencing minor technical difficulties. We are working on solving it right now. Please come back in a few minutes."
+	"maintenance-alert": "We are experiencing minor technical difficulties. We are working on solving it right now. Please come back in a few minutes.",
+	"click-to-copy": "Click to copy",
+	"project-id": "Project ID",
+	"save-changes": "Save Changes",
+	"drop-zone": "Drag and drop your .env file here.",
+	"drop-zone-keys": "Drag and drop your .env file here to add more keys."
 }

frontend/locales/en-US/dashboard.json

@@ -0,0 +1,10 @@
+{
+	"search-keys": "Search keys...",
+	"add-key": "Add Key",
+	"personal": "Personal",
+	"personal-description": "Personal keys are only visible to you",
+	"shared": "Shared",
+	"shared-description": "Shared keys are visible to your whole team",
+	"make-shared": "Make Shared",
+	"make-personal": "Make Personal"
+}

frontend/pages/dashboard/[id].js

@@ -26,7 +26,7 @@ import {
 	faCheck,
 	faCopy,
 	faCircleInfo,
-	faX
+	faX,
 } from "@fortawesome/free-solid-svg-icons";
 import ListBox from "../../components/basic/Listbox";
 import DropZone from "../../components/dashboard/DropZone";
@@ -37,8 +37,18 @@ import checkUserAction from "../api/userActions/checkUserAction";
 import registerUserAction from "../api/userActions/registerUserAction";
 import pushKeysIntegration from "../../components/utilities/pushKeysIntegration";
 import Button from "../../components/basic/buttons/Button";
+import useTranslation from "next-translate/useTranslation";
+
+const KeyPair = ({
+	keyPair,
+	deleteRow,
+	modifyKey,
+	modifyValue,
+	modifyVisibility,
+	isBlurred,
+}) => {
+	const { t } = useTranslation();
 
-const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility, isBlurred }) => {
 	return (
 		<div className="px-1 flex flex-col items-center ml-1">
 			<div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-10 my-1 items-center px-2">
@@ -86,9 +96,12 @@ const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility,
 						<Menu.Items className="absolute right-0 mt-0.5 w-44 origin-top-right rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-1 py-1">
 							<div
 								onClick={() =>
-									modifyVisibility(keyPair[4] == "personal"
+									modifyVisibility(
-									? "shared"
+										keyPair[4] == "personal"
-									: "personal", keyPair[1])
+											? "shared"
+											: "personal",
+										keyPair[1]
+									)
 								}
 								className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
 							>
@@ -102,8 +115,8 @@ const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility,
 								/>
 								<div className="text-sm">
 									{keyPair[4] == "personal"
-										? "Make Shared"
+										? t("dashboard:make-shared")
-										: "Make Personal"}
+										: t("dashboard:make-personal")}
 								</div>
 							</div>
 						</Menu.Items>
@@ -123,7 +136,6 @@ const KeyPair = ({ keyPair, deleteRow, modifyKey, modifyValue, modifyVisibility,
 	);
 };
 
-
 const envMapping = {
 	Development: "dev",
 	Staging: "staging",
@@ -153,6 +165,7 @@ export default function Dashboard() {
 	const [sortMethod, setSortMethod] = useState("alphabetical");
 	const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
 	const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
+	const { t } = useTranslation();
 
 	// #TODO: fix save message for changing reroutes
 	// const beforeRouteHandler = (url) => {
@@ -186,7 +199,6 @@ export default function Dashboard() {
 		};
 	}, [buttonReady]);
 
-
 	const reorderRows = () => {
 		setSortMethod(
 			sortMethod == "alphabetical" ? "-alphabetical" : "alphabetical"
@@ -218,21 +230,21 @@ export default function Dashboard() {
 				setFileState,
 				setIsKeyAvailable,
 				setData,
-				workspaceId: router.query.id
+				workspaceId: router.query.id,
-			})
+			});
 
 			const user = await getUser();
 			setIsNew(
-				(Date.parse(new Date()) -
+				(Date.parse(new Date()) - Date.parse(user.createdAt)) / 60000 <
-					Date.parse(user.createdAt)) /
-					60000 <
 					3
 					? true
 					: false
 			);
 
-			let userAction = await checkUserAction({action: "first_time_secrets_pushed"});
+			let userAction = await checkUserAction({
-			setHasUserEverPushed(userAction ? true : false)
+				action: "first_time_secrets_pushed",
+			});
+			setHasUserEverPushed(userAction ? true : false);
 		} catch (error) {
 			console.log("Error", error);
 			setData([]);
@@ -252,39 +264,38 @@ export default function Dashboard() {
 	const modifyValue = (value, id) => {
 		setData((oldData) => {
 			oldData[id][3] = value;
-			return [...oldData]
+			return [...oldData];
 		});
 		setButtonReady(true);
-	}
+	};
 
 	const modifyKey = (value, id) => {
 		setData((oldData) => {
 			oldData[id][2] = value;
-			return [...oldData]
+			return [...oldData];
 		});
 		setButtonReady(true);
-	}
+	};
 
 	const modifyVisibility = (value, id) => {
 		setData((oldData) => {
 			oldData[id][4] = value;
-			return [...oldData]
+			return [...oldData];
 		});
 		setButtonReady(true);
-	}
+	};
-
 
 	const listenChangeValue = useCallback((value, id) => {
-		modifyValue(value, id)
+		modifyValue(value, id);
-	}, [])
+	}, []);
 
 	const listenChangeKey = useCallback((value, id) => {
-		modifyKey(value, id)
+		modifyKey(value, id);
-	}, [])
+	}, []);
 
 	const listenChangeVisibility = useCallback((value, id) => {
-		modifyVisibility(value, id)
+		modifyVisibility(value, id);
-	}, [])
+	}, []);
 
 	const savePush = async () => {
 		let obj = Object.assign(
@@ -294,19 +305,28 @@ export default function Dashboard() {
 		setButtonReady(false);
 		pushKeys(obj, router.query.id, env);
 
-		let integrations = await getWorkspaceIntegrations({workspaceId: router.query.id});
+		let integrations = await getWorkspaceIntegrations({
+			workspaceId: router.query.id,
+		});
 		integrations.map(async (integration) => {
-			if (envMapping[env] == integration.environment && integration.isActive == true) {
+			if (
+				envMapping[env] == integration.environment &&
+				integration.isActive == true
+			) {
 				let objIntegration = Object.assign(
 					{},
 					...data.map((row) => ({ [row[2]]: row[3] }))
 				);
-				await pushKeysIntegration({obj: objIntegration, integrationId: integration._id});}
+				await pushKeysIntegration({
+					obj: objIntegration,
+					integrationId: integration._id,
+				});
+			}
 		});
 
 		if (!hasUserEverPushed) {
-			setCheckDocsPopUpVisible(true)
+			setCheckDocsPopUpVisible(true);
-			await registerUserAction({action: "first_time_secrets_pushed"});
+			await registerUserAction({ action: "first_time_secrets_pushed" });
 		}
 	};
 
@@ -339,20 +359,19 @@ export default function Dashboard() {
 	function copyToClipboard() {
 		// Get the text field
 		var copyText = document.getElementById("myInput");
-	  
+
 		// Select the text field
 		copyText.select();
 		copyText.setSelectionRange(0, 99999); // For mobile devices
-	  
+
-		 // Copy the text inside the text field
+		// Copy the text inside the text field
 		navigator.clipboard.writeText(copyText.value);
-	  
+
 		setProjectIdCopied(true);
 		setTimeout(() => setProjectIdCopied(false), 2000);
 		// Alert the copied text
 		// alert("Copied the text: " + copyText.value);
-	  }
+	}
-
 
 	return data ? (
 		<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
@@ -371,44 +390,64 @@ export default function Dashboard() {
 			</Head>
 			<div className="flex flex-row">
 				<div className="w-full max-h-96 pb-2">
-					<NavHeader pageName="Secrets" isProjectRelated={true}/>
+					<NavHeader pageName="Secrets" isProjectRelated={true} />
-					{checkDocsPopUpVisible && 
+					{checkDocsPopUpVisible && (
-						<BottonRightPopup 
+						<BottonRightPopup
-							buttonText="Check Docs" 
+							buttonText="Check Docs"
 							buttonLink="https://infisical.com/docs/getting-started/introduction"
-							titleText="Good job!" 
+							titleText="Good job!"
-							emoji="🎉" 
+							emoji="🎉"
-							textLine1="Congrats on adding more secrets." 
+							textLine1="Congrats on adding more secrets."
-							textLine2="Here is how to connect them to your codebase." 
+							textLine2="Here is how to connect them to your codebase."
 							setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
 						/>
-					}
+					)}
 					<div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
 						<div className="flex flex-row justify-start items-center text-3xl">
 							<p className="font-semibold mr-4 mt-1">Secrets</p>
-							{data?.length==0 && <ListBox
+							{data?.length == 0 && (
-								selected={env}
+								<ListBox
-								data={[
+									selected={env}
-									"Development",
+									data={[
-									"Staging",
+										"Development",
-									"Production",
+										"Staging",
-									"Testing",
+										"Production",
-								]}
+										"Testing",
-								// ref={useRef(123)}
+									]}
-								onChange={setEnv}
+									// ref={useRef(123)}
-								className="z-40"
+									onChange={setEnv}
-							/>}
+									className="z-40"
+								/>
+							)}
 						</div>
 						<div className="flex flex-row">
 							<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400">
-								<p className="mr-2 font-bold pl-4">Project ID:</p>
+								<p className="mr-2 font-bold pl-4">{`${t(
-								<input type="text" value={workspaceId} id="myInput" className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none" disabled></input>
+									"common:project-id"
+								)}:`}</p>
+								<input
+									type="text"
+									value={workspaceId}
+									id="myInput"
+									className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none"
+									disabled
+								></input>
 								<div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
-									<button onClick={copyToClipboard} className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200">
+									<button
-										{projectIdCopied ? <FontAwesomeIcon icon={faCheck} className="pr-0.5"/> : <FontAwesomeIcon icon={faCopy} />}
+										onClick={copyToClipboard}
+										className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
+									>
+										{projectIdCopied ? (
+											<FontAwesomeIcon
+												icon={faCheck}
+												className="pr-0.5"
+											/>
+										) : (
+											<FontAwesomeIcon icon={faCopy} />
+										)}
 									</button>
 									<span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-white/10 rounded-md text-center text-gray-400 text-sm">
-										Click to Copy
+										{t("common:click-to-copy")}
 									</span>
 								</div>
 							</div>
@@ -417,7 +456,7 @@ export default function Dashboard() {
 									className={`flex justify-start max-w-sm mt-2`}
 								>
 									<Button
-										text="Save Changes"
+										text={t("save-changes")}
 										onButtonPressed={savePush}
 										color="primary"
 										size="md"
@@ -455,9 +494,13 @@ export default function Dashboard() {
 												className="pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
 												value={searchKeys}
 												onChange={(e) =>
-													setSearchKeys(e.target.value)
+													setSearchKeys(
+														e.target.value
+													)
 												}
-												placeholder={"Search keys..."}
+												placeholder={t(
+													"dashboard:search-keys"
+												)}
 											/>
 										</div>
 										<div className="ml-2 min-w-max flex flex-row items-start justify-start">
@@ -465,7 +508,11 @@ export default function Dashboard() {
 												onButtonPressed={reorderRows}
 												color="mineshaft"
 												size="icon-md"
-												icon={sortMethod == "alphabetical" ? faArrowDownAZ : faArrowDownZA}
+												icon={
+													sortMethod == "alphabetical"
+														? faArrowDownAZ
+														: faArrowDownZA
+												}
 											/>
 										</div>
 										<div className="ml-2 min-w-max flex flex-row items-start justify-start">
@@ -481,12 +528,14 @@ export default function Dashboard() {
 												onButtonPressed={changeBlurred}
 												color="mineshaft"
 												size="icon-md"
-												icon={blurred ? faEye : faEyeSlash}
+												icon={
+													blurred ? faEye : faEyeSlash
+												}
 											/>
 										</div>
 										<div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
 											<Button
-												text="Add Key"
+												text={t("dashboard:add-key")}
 												onButtonPressed={addRow}
 												color="mineshaft"
 												icon={faPlus}
@@ -514,14 +563,18 @@ export default function Dashboard() {
 									<div className="rounded-t-md sticky top-0 z-20 bg-bunker flex flex-row pl-4 pr-6 pt-4 pb-2 items-center justify-between text-gray-300 font-bold">
 										{/* <FontAwesomeIcon icon={faAngleDown} /> */}
 										<div className="flex flex-row items-center">
-											<p className="pl-2 text-lg">Personal</p>
+											<p className="pl-2 text-lg">
+												{t("dashboard:personal")}
+											</p>
 											<div className="group font-normal group relative inline-block text-gray-300 underline hover:text-primary duration-200">
 												<FontAwesomeIcon
 													className="ml-3 mt-1 text-lg"
 													icon={faCircleInfo}
 												/>
 												<span className="absolute hidden group-hover:flex group-hover:animate-popdown duration-300 w-44 -left-16 -top-7 translate-y-full px-2 py-2 bg-gray-700 rounded-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-gray-700">
-													Personal keys are only visible to you
+													{t(
+														"dashboard:personal-description"
+													)}
 												</span>
 											</div>
 										</div>
@@ -534,7 +587,8 @@ export default function Dashboard() {
 														.toLowerCase()
 														.includes(
 															searchKeys.toLowerCase()
-														) && keyPair[4] == "personal"
+														) &&
+													keyPair[4] == "personal"
 											)
 											.sort((a, b) =>
 												sortMethod == "alphabetical"
@@ -546,9 +600,13 @@ export default function Dashboard() {
 													key={keyPair[0]}
 													keyPair={keyPair}
 													deleteRow={deleteCertainRow}
-													modifyValue={listenChangeValue}
+													modifyValue={
+														listenChangeValue
+													}
 													modifyKey={listenChangeKey}
-													modifyVisibility={listenChangeVisibility}
+													modifyVisibility={
+														listenChangeVisibility
+													}
 													isBlurred={blurred}
 												/>
 											))}
@@ -562,15 +620,18 @@ export default function Dashboard() {
 									<div className="sticky top-0 z-10 bg-bunker flex flex-row pl-4 pr-5 pt-4 pb-2 items-center justify-between text-gray-300 font-bold">
 										{/* <FontAwesomeIcon icon={faAngleDown} /> */}
 										<div className="flex flex-row items-center">
-											<p className="pl-2 text-lg">Shared</p>
+											<p className="pl-2 text-lg">
+												{t("dashboard:shared")}
+											</p>
 											<div className="group font-normal group relative inline-block text-gray-300 underline hover:text-primary duration-200">
 												<FontAwesomeIcon
 													className="ml-3 text-lg mt-1"
 													icon={faCircleInfo}
 												/>
 												<span className="absolute hidden group-hover:flex group-hover:animate-popdown duration-300 w-44 -left-16 -top-7 translate-y-full px-2 py-2 bg-gray-700 rounded-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-gray-700">
-													Shared keys are visible to your whole
+													{t(
-													team
+														"dashboard:shared-description"
+													)}
 												</span>
 											</div>
 										</div>
@@ -583,7 +644,8 @@ export default function Dashboard() {
 														.toLowerCase()
 														.includes(
 															searchKeys.toLowerCase()
-														) && keyPair[4] == "shared"
+														) &&
+													keyPair[4] == "shared"
 											)
 											.sort((a, b) =>
 												sortMethod == "alphabetical"
@@ -595,9 +657,13 @@ export default function Dashboard() {
 													key={keyPair[0]}
 													keyPair={keyPair}
 													deleteRow={deleteCertainRow}
-													modifyValue={listenChangeValue}
+													modifyValue={
+														listenChangeValue
+													}
 													modifyKey={listenChangeKey}
-													modifyVisibility={listenChangeVisibility}
+													modifyVisibility={
+														listenChangeVisibility
+													}
 													isBlurred={blurred}
 												/>
 											))}
@@ -606,7 +672,9 @@ export default function Dashboard() {
 								<div className="w-full max-w-5xl">
 									<DropZone
 										setData={addData}
-										setErrorDragAndDrop={setErrorDragAndDrop}
+										setErrorDragAndDrop={
+											setErrorDragAndDrop
+										}
 										createNewFile={addRow}
 										errorDragAndDrop={errorDragAndDrop}
 										setButtonReady={setButtonReady}
@@ -617,19 +685,23 @@ export default function Dashboard() {
 							</div>
 						) : (
 							<div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
-								{fileState.message != "There's nothing to pull" &&
+								{fileState.message !=
+									"There's nothing to pull" &&
 									fileState.message != undefined && (
 										<FontAwesomeIcon
 											className="text-7xl mb-8"
 											icon={faFolderOpen}
 										/>
 									)}
-								{(fileState.message == "There's nothing to pull" ||
+								{(fileState.message ==
+									"There's nothing to pull" ||
 									fileState.message == undefined) &&
 									isKeyAvailable && (
 										<DropZone
 											setData={setData}
-											setErrorDragAndDrop={setErrorDragAndDrop}
+											setErrorDragAndDrop={
+												setErrorDragAndDrop
+											}
 											createNewFile={addRow}
 											errorDragAndDrop={errorDragAndDrop}
 											setButtonReady={setButtonReady}
@@ -638,7 +710,10 @@ export default function Dashboard() {
 									)}
 								{fileState.message ==
 									"Failed membership validation for workspace" && (
-									<p>You are not authorized to view this project.</p>
+									<p>
+										You are not authorized to view this
+										project.
+									</p>
 								)}
 								{fileState.message ==
 									"Access needed to pull the latest file" ||
@@ -653,8 +728,8 @@ export default function Dashboard() {
 												administrator for permission.
 											</p>
 											<p className="mt-1">
-												They need to grant you access in the team
+												They need to grant you access in
-												tab.
+												the team tab.
 											</p>
 										</>
 									))}

frontend/pages/signup.js

@@ -270,7 +270,7 @@ export default function SignUp() {
 			</div>
 			<div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
 				<InputField
-					label={t("auth:email")}
+					label={t("common:email")}
 					onChangeHandler={setEmail}
 					type="email"
 					value={email}
@@ -365,33 +365,33 @@ export default function SignUp() {
 			</p>
 			<div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
 				<InputField
-					label={t("auth:first-name")}
+					label={t("common:first-name")}
 					onChangeHandler={setFirstName}
 					type="name"
 					value={firstName}
 					isRequired
-					errorText={t("auth:validate-required", {
+					errorText={t("common:validate-required", {
-						name: t("auth:first-name"),
+						name: t("common:first-name"),
 					})}
 					error={firstNameError}
 				/>
 			</div>
 			<div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
 				<InputField
-					label={t("auth:last-name")}
+					label={t("common:last-name")}
 					onChangeHandler={setLastName}
 					type="name"
 					value={lastName}
 					isRequired
-					errorText={t("auth:validate-required", {
+					errorText={t("common:validate-required", {
-						name: t("auth:last-name"),
+						name: t("common:last-name"),
 					})}
 					error={lastNameError}
 				/>
 			</div>
 			<div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
 				<InputField
-					label={t("auth:password")}
+					label={t("common:password")}
 					onChangeHandler={(password) => {
 						setPassword(password);
 						passwordCheck(