Fixed merge conflicts with translations; updated starting secrets

frontend/components/utilities/attemptLogin.js

@@ -108,15 +108,16 @@ const attemptLogin = async (
           if (isSignUp) {
             await pushKeys({
               obj: {
-                DATABASE_URL: [
+                sDATABASE_URL: [
                   'mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net',
-                  'personal'
+                  'This is an example of secret referencing.'
                 ],
-                DB_USERNAME: ['user1234', 'personal'],
+                sDB_USERNAME: ['OVERRIDE_THIS', ''],
-                DB_PASSWORD: ['example_password', 'personal'],
+                sDB_PASSWORD: ['OVERRIDE_THIS', ''],
-                TWILIO_AUTH_TOKEN: ['example_twillion_token', 'shared'],
+                pDB_USERNAME: ['user1234', 'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need.'],
-                WEBSITE_URL: ['http://localhost:3000', 'shared'],
+                pDB_PASSWORD: ['example_password', 'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need.'],
-                STRIPE_SECRET_KEY: ['sk_test_7348oyho4hfq398HIUOH78', 'shared']
+                sTWILIO_AUTH_TOKEN: ['example_twillio_token', ''],
+                sWEBSITE_URL: ['http://localhost:3000', ''],
               },
               workspaceId: projectToLogin,
               env: 'Development'

frontend/pages/dashboard/[id].tsx

@@ -2,6 +2,7 @@ import { Fragment, useCallback, useEffect, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
+import { useTranslation } from "next-i18next";
 import {
   faArrowDownAZ,
   faArrowDownZA,
@@ -26,6 +27,7 @@ import SideBar from '~/components/dashboard/SideBar';
 import NavHeader from '~/components/navigation/NavHeader';
 import getSecretsForProject from '~/components/utilities/secrets/getSecretsForProject';
 import pushKeys from '~/components/utilities/secrets/pushKeys';
+import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
 import guidGenerator from '~/utilities/randomId';
 
 import { envMapping } from '../../public/data/frequentConstants';
@@ -91,6 +93,7 @@ export default function Dashboard() {
   const [sidebarSecretId, toggleSidebar] = useState("None");
   const [sharedToHide, setSharedToHide] = useState<string[]>([]);
 
+  const { t } = useTranslation();
   const { createNotification } = useNotificationContext();
 
   // #TODO: fix save message for changing reroutes
@@ -416,14 +419,11 @@ export default function Dashboard() {
   return data ? (
     <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
       <Head>
-        <title>Secrets</title>
+        <title>{t("common:head-title", { title: t("dashboard:title") })}</title>
         <link rel="icon" href="/infisical.ico" />
         <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content="Manage your .env files in seconds" />
+        <meta property="og:title" content={t("dashboard:og-title")} />
-        <meta
+        <meta name="og:description" content={t("dashboard:og-description")} />
-          name="og:description"
-          content="Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
-        />
       </Head>
       <div className="flex flex-row">
         {sidebarSecretId != "None" && <SideBar 
@@ -440,21 +440,21 @@ export default function Dashboard() {
           setSharedToHide={setSharedToHide}
         />}
         <div className="w-full max-h-96 pb-2">
-          <NavHeader pageName="Secrets" isProjectRelated={true} />
+          <NavHeader pageName={t("dashboard:title")} isProjectRelated={true} />
           {checkDocsPopUpVisible && (
             <BottonRightPopup
-              buttonText="Check Docs"
+              buttonText={t("dashboard:check-docs.button")}
               buttonLink="https://infisical.com/docs/getting-started/introduction"
-              titleText="Good job!"
+              titleText={t("dashboard:check-docs.title")}
               emoji="🎉"
-              textLine1="Congrats on adding more secrets."
+              textLine1={t("dashboard:check-docs.line1")}
-              textLine2="Here is how to connect them to your codebase."
+              textLine2={t("dashboard:check-docs.line2")}
               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>
+              <p className="font-semibold mr-4 mt-1">{t("dashboard:title")}</p>
               {data?.length == 0 && (
                 <ListBox
                   selected={env}
@@ -465,7 +465,9 @@ export default function Dashboard() {
             </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(
+                  "common:project-id"
+                )}:`}</p>
                 <input
                   type="text"
                   value={workspaceId}
@@ -485,20 +487,20 @@ export default function Dashboard() {
                     )}
                   </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>
               {(data?.length !== 0 || buttonReady) && (
                 <div className={`flex justify-start max-w-sm mt-2`}>
                   <Button
-                    text="Save Changes"
+                    text={t("common:save-changes")}
                     onButtonPressed={savePush}
                     color="primary"
                     size="md"
                     active={buttonReady}
                     iconDisabled={faCheck}
-                    textDisabled="Saved"
+                    textDisabled={t("common:saved")}
                   />
                 </div>
               )}
@@ -523,7 +525,7 @@ 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)}
-                        placeholder={'Search keys...'}
+                        placeholder={t("dashboard:search-keys")}
                       />
                     </div>
                     <div className="ml-2 min-w-max flex flex-row items-start justify-start">
@@ -556,7 +558,7 @@ export default function Dashboard() {
                     </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}
@@ -656,3 +658,5 @@ export default function Dashboard() {
 }
 
 Dashboard.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(["dashboard"]);

frontend/pages/login.tsx

@@ -10,11 +10,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Button from "~/components/basic/buttons/Button";
 import Error from "~/components/basic/Error";
 import InputField from "~/components/basic/InputField";
+import ListBox from "~/components/basic/Listbox";
 import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
 import attemptLogin from "~/utilities/attemptLogin";
 
 import getWorkspaces from "./api/workspace/getWorkspaces";
-import ListBox from "~/components/basic/Listbox";
 
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -155,7 +155,7 @@ export default function Login() {
           </Link>
         </div>
       </form>
-      <div className="mt-4 flex items-center justify-center w-full">
+      <div className="absolute right-4 top-0 mt-4 flex items-center justify-center">
         <div className="w-48 mx-auto">
           <ListBox
             selected={lang}

frontend/pages/signup.tsx

@@ -341,7 +341,7 @@ export default function SignUp() {
         />
       </div>
       {codeError && <Error text={t("signup:step2-code-error")} />}
-      <div className="flex max-w-min flex-col items-center justify-center md:p-2 max-h-24 max-w-md mx-auto text-lg px-4 mt-4 mb-2">
+      <div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
         <Button
           text={t("signup:verify") ?? ""}
           onButtonPressed={incrementStep}