resolved merge conflict issues and updated use of translations

frontend/public/locales/en/translations.json

@@ -131,7 +131,10 @@
     "need-account": "Need an Infisical account?",
     "create-account": "Create an account",
     "forgot-password": "Forgot your password?",
-    "error-login": "Wrong credentials."
+    "error-login": "Wrong credentials.",
+    "continue-with-google": "Continue with Google",
+    "continue-with-email": "Continue with Email",
+    "other-option": "Log in with other option"
   },
   "mfa": {
     "title": "Sign Up",
@@ -295,6 +298,10 @@
     "signup": "Sign Up",
     "already-have-account": "Have an account? Log in",
     "forgot-password": "Forgot your password?",
+    "initial-title": "Create your Infisical account",
+    "continue-with-google": "Continue with Google",
+    "continue-with-email": "Continue with Email",
+    "create-policy": "By signing up, you agree to our Terms of Service and Privacy Policy.",
     "verify": "Verify",
     "step1-start": "Let's get started",
     "step1-privacy": "By creating an account, you agree to our Terms and have read and acknowledged the Privacy Policy.",

frontend/src/components/login/InitialLoginStep.tsx

@@ -3,8 +3,6 @@ import Link from 'next/link';
 import { faGoogle } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
-
 import { Button } from '../v2';
 
 export default function InitialLoginStep({
@@ -19,37 +17,35 @@ export default function InitialLoginStep({
         <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
             <Button
-                colorSchema="primary" 
+                colorSchema="primary"
                 variant="solid"
                 onClick={() => {
                     window.open('/api/v1/oauth/redirect/google')
-                }} 
+                }}
                 leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
                 className="h-14 w-full mx-0"
-            > 
+            >
-                {t('login:continue-with-google')}
+                {t('login.continue-with-google')}
             </Button>
         </div>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
             <Button
-                colorSchema="primary" 
+                colorSchema="primary"
                 variant="outline_bg"
                 onClick={() => {
                     setIsLoginWithEmail(true);
-                }} 
+                }}
                 isFullWidth
                 className="h-14 w-full mx-0"
-            > 
+            >
-                {t('login:continue-with-email')} 
+                {t('login.continue-with-email')}
             </Button>
         </div>
         <div className="mt-4 text-bunker-400 text-sm flex flex-row">
             <span className="mr-1">Don&apos;t have an acount yet?</span>
             <Link href="/signup">
-                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('login:create-account')}</span>
+                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('login.create-account')}</span>
             </Link>
         </div>
     </div>
 }
-
-export const getStaticProps = getTranslatedStaticProps(['login']);

frontend/src/components/login/LoginStep.tsx

@@ -119,13 +119,13 @@ export default function LoginStep({
       </div>
       <div className="text-bunker-400 text-sm flex flex-row w-max mx-auto">
         <Link href="/verify-email">
-          <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('login:forgot-password')}</span>
+          <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('login.forgot-password')}</span>
         </Link>
       </div>
       {false && (
         <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
           <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
-          {t('common:maintenance-alert')}
+          {t('common.maintenance-alert')}
         </div>
       )}
     </form>

frontend/src/components/login/PasswordInputStep.tsx

@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useTranslation } from 'next-i18next';
 
 import Button from '@app/components/basic/buttons/Button';
 import Error from '@app/components/basic/Error';
 import InputField from '@app/components/basic/InputField';
 import attemptLogin from '@app/components/utilities/attemptLogin';
-import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
 
 import SecurityClient from '../utilities/SecurityClient';
 
@@ -62,11 +61,11 @@ export default function PasswordInputStep({
     <form onSubmit={(e) => e.preventDefault()}>
       <div className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker py-4 px-6 pt-8 drop-shadow-xl">
         <p className="mx-auto mb-6 flex w-max justify-center text-3xl font-semibold text-bunker-100">
-          {t('login:login')}
+          {t('login.login')}
         </p>
         <div className="relative mt-6 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-2 md:max-h-28 md:p-2">
           <InputField
-            label={t('common:password')}
+            label={t('common.password')}
             onChangeHandler={setPassword}
             type="password"
             value={password}
@@ -81,17 +80,17 @@ export default function PasswordInputStep({
                 type="button"
                 className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
               >
-                {t('login:forgot-password')}
+                {t('login.forgot-password')}
               </button>
             </Link>
           </div>
         </div>
-        {!isLoading && loginError && <Error text={t('login:error-login') ?? ''} />}
+        {!isLoading && loginError && <Error text={t('login.error-login') ?? ''} />}
         <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
           <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
             <Button
               type="submit"
-              text={t('login:login') ?? ''}
+              text={t('login.login') ?? ''}
               onButtonPressed={async () => handleLogin()}
               loading={isLoading}
               size="lg"
@@ -100,13 +99,13 @@ export default function PasswordInputStep({
         </div>
       </div>
       <div className="mt-4 flex flex-row items-center justify-center md:pb-4">
-        <p className="flex w-max justify-center text-sm text-gray-400">{t('login:need-account')}</p>
+        <p className="flex w-max justify-center text-sm text-gray-400">{t('login.need-account')}</p>
         <Link href="/signup">
           <button
             type="button"
             className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
           >
-            {t('login:create-account')}
+            {t('login.create-account')}
           </button>
         </Link>
       </div>
@@ -121,11 +120,9 @@ export default function PasswordInputStep({
           type="button"
           className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
         >
-          {t('login:other-option')}
+          {t('login.other-option')}
         </button>
       </div>
     </form>
   );
 }
-
-export const getStaticProps = getTranslatedStaticProps(['auth', 'login']);

frontend/src/components/signup/InitialSignupStep.tsx

@@ -3,8 +3,6 @@ import Link from 'next/link';
 import { faGoogle } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
-
 import { Button } from '../v2';
 
 export default function InitialSignupStep({
@@ -15,42 +13,40 @@ export default function InitialSignupStep({
     const { t } = useTranslation();
 
     return <div className='flex flex-col mx-auto w-full justify-center items-center '>
-        <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >{t('signup:initial-title')}</h1>
+        <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >{t('signup.initial-title')}</h1>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
             <Button
-                colorSchema="primary" 
+                colorSchema="primary"
                 variant="solid"
                 onClick={() => {
                     window.open('/api/v1/oauth/redirect/google')
-                }} 
+                }}
                 leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
                 className="h-14 w-full mx-0"
-            > 
+            >
-                {t('signup:continue-with-google')}
+                {t('signup.continue-with-google')}
             </Button>
         </div>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
             <Button
-                colorSchema="primary" 
+                colorSchema="primary"
                 variant="outline_bg"
                 onClick={() => {
                     setIsSignupWithEmail(true);
-                }} 
+                }}
                 isFullWidth
                 className="h-14 w-full mx-0"
-            > 
+            >
-                {t('signup:continue-with-email')}
+                {t('signup.continue-with-email')}
             </Button>
         </div>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] px-8 text-center mt-6 text-xs text-bunker-400'>
-            {t('signup:create-policy')}
+            {t('signup.create-policy')}
         </div>
         <div className="mt-2 text-bunker-400 text-xs flex flex-row">
             <Link href="/login">
-                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('signup:already-have-account')}</span>
+                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('signup.already-have-account')}</span>
             </Link>
         </div>
     </div>
 }
-
-export const getStaticProps = getTranslatedStaticProps(['signup']);

frontend/src/pages/login.tsx

@@ -109,8 +109,8 @@ export default function Login() {
         <div className="flex justify-center mb-4 mt-20">
           <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
         </div>
-        {renderView(step)}
       </Link>
+      {renderView(step)}
       <div className="absolute right-4 top-0 mt-4 flex items-center justify-center">
         <div className="mx-auto w-48">
           <ListBox

frontend/src/pages/signup.tsx

@@ -29,7 +29,7 @@ export default function SignUp() {
   const [attributionSource, setAttributionSource] = useState('');
   const [code, setCode] = useState('123456');
   const [codeError, setCodeError] = useState(false);
-  const [step, setStep] = useState(5);
+  const [step, setStep] = useState(1);
   const router = useRouter();
   const { data: serverDetails } = useFetchServerStatus();
   const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
@@ -146,9 +146,9 @@ export default function SignUp() {
       )
     }
 
-    // if (serverDetails?.emailConfigured) {
+    if (serverDetails?.emailConfigured) {
-    return <TeamInviteStep />
+      return <TeamInviteStep />
-    // }
+    }
 
     return ""
   }
@@ -156,11 +156,11 @@ export default function SignUp() {
   return (
     <div className="bg-gradient-to-tr from-bunker-600 to-bunker-800 min-h-screen flex flex-col justify-center pb-28 px-6 ">
       <Head>
-        <title>{t('common:head-title', { title: t('signup:title') })}</title>
+        <title>{t('common.head-title', { title: t('signup.title') })}</title>
         <link rel="icon" href="/infisical.ico" />
         <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={t('signup:og-title') as string} />
+        <meta property="og:title" content={t('signup.og-title') as string} />
-        <meta name="og:description" content={t('signup:og-description') as string} />
+        <meta name="og:description" content={t('signup.og-description') as string} />
       </Head>
       <div className="flex justify-center mb-8 mt-20">
         <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />