developed new ui for new login and signup page

frontend/public/locales/en/login.json

@@ -6,5 +6,7 @@
   "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"
 }

frontend/public/locales/en/signup.json

@@ -1,4 +1,8 @@
 {
+  "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.",
   "title": "Sign Up",
   "og-title": "Replace .env files with 1 line of code. Sign Up for Infisical in 3 minutes.",
   "og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables. Works with Node.js, Next.js, Gatsby, Nest.js...",

frontend/src/components/login/InitialLoginStep.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+
+export default function InitialLoginStep({
+    setIsLoginWithEmail,
+}: {
+    setIsLoginWithEmail: (value: boolean) => void;
+}) {
+
+    const { t } = useTranslation();
+
+    return <div className='flex flex-col mx-auto w-full justify-center items-center'>
+        <h1 className=' text-white text-center mb-5' >Login to Infisical</h1>
+        <div className='w-1/5 bg-green text-center p-3 rounded-md'>
+            <button type='button' className='text-black' onClick={() => {
+                window.open('/api/v1/oauth/redirect/google')
+            }}>
+                {t('login:continue-with-google')}
+            </button>
+        </div>
+        <div className='w-1/5 bg-black text-center p-3 rounded-md mt-4'>
+            <button type='button' className='text-white' onClick={() => {
+                setIsLoginWithEmail(true);
+            }}>
+                {t('login:continue-with-email')}
+            </button>
+        </div>
+        <Link href="/signup">
+            <h2 className='text-white mt-8 underline'>{t('login:create-account')}</h2>
+        </Link>
+    </div>
+}
+
+export const getStaticProps = getTranslatedStaticProps(['login']);

frontend/src/components/login/PasswordInputStep.tsx

@@ -121,7 +121,7 @@ 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"
         >
-          Log in with other options.
+          Login with other option
         </button>
       </div>
     </form>

frontend/src/components/signup/InitialSignupStep.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next';
+import Link from 'next/link';
+
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+
+export default function InitialSignupStep({
+    setIsSignupWithEmail,
+}: {
+    setIsSignupWithEmail: (value: boolean) => void
+}) {
+    const { t } = useTranslation();
+
+    return <div className='flex flex-col mx-auto w-full justify-center items-center '>
+        <h1 className=' text-white text-center mb-5' >{t('signup:initial-title')}</h1>
+        <div className=' w-1/5 bg-green text-center p-3 rounded-md'>
+            <button type='button' className='text-black' onClick={() => {
+                window.open('/api/v1/oauth/redirect/google')
+            }}>
+                {t('signup:continue-with-google')}
+            </button>
+        </div>
+        <div className='w-1/5 bg-black text-center p-3 rounded-md mt-4'>
+            <button type='button' className='text-white' onClick={() => {
+                setIsSignupWithEmail(true);
+            }}>
+                {t('signup:continue-with-email')}
+            </button>
+        </div>
+        <span className='text-white w-1/6 text-xs mt-4 text-center'>{t('signup:create-policy')}</span>
+        <Link href="/login">
+            <h2 className='text-white mt-8 underline'>{t('signup:already-have-account')}</h2>
+        </Link>
+    </div>
+}
+
+export const getStaticProps = getTranslatedStaticProps(['signup']);

frontend/src/pages/login.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 
 import ListBox from '@app/components/basic/Listbox';
+import InitialLoginStep from '@app/components/login/InitialLoginStep';
 import LoginStep from '@app/components/login/LoginStep';
 import MFAStep from '@app/components/login/MFAStep';
 import PasswordInputStep from '@app/components/login/PasswordInputStep';
@@ -78,20 +79,7 @@ export default function Login() {
     }
 
     if (!isLoginWithEmail && loginStep === 1) {
-      return (
-        <>
-          <button type='button' className='text-white' onClick={() => {
-            window.open('/api/v1/oauth/redirect/google')
-          }}>
-            Continue with Google
-          </button>
-          <button type='button' className='text-white' onClick={() => {
-            setIsLoginWithEmail(true);
-          }}>
-            Continue with Email
-          </button>
-        </>
-      )
+      return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />
     }
 
     if (step === 2) {
@@ -105,7 +93,7 @@ export default function Login() {
   }
 
   return (
-    <div className="bg-bunker-800 h-screen flex flex-col justify-start px-6">
+    <div className="bg-bunker-800 h-screen flex flex-col justify-start px-6 ">
       <Head>
         <title>{t('common:head-title', { title: t('login:title') })}</title>
         <link rel="icon" href="/infisical.ico" />

frontend/src/pages/signup.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'next-i18next';
 import CodeInputStep from '@app/components/signup/CodeInputStep';
 import DownloadBackupPDF from '@app/components/signup/DonwloadBackupPDFStep';
 import EnterEmailStep from '@app/components/signup/EnterEmailStep';
+import InitialSignupStep from '@app/components/signup/InitialSignupStep';
 import TeamInviteStep from '@app/components/signup/TeamInviteStep';
 import UserInfoStep from '@app/components/signup/UserInfoStep';
 import SecurityClient from '@app/components/utilities/SecurityClient';
@@ -19,7 +20,6 @@ import { useProviderAuth } from '@app/hooks/useProviderAuth';
 import checkEmailVerificationCode from './api/auth/CheckEmailVerificationCode';
 import getWorkspaces from './api/workspace/getWorkspaces';
 
-
 /**
  * @returns the signup page
  */
@@ -96,20 +96,7 @@ export default function SignUp() {
     }
 
     if (!isSignupWithEmail && registerStep === 1) {
-      return (
-        <>
-          <button type='button' className='text-white' onClick={() => {
-            window.open('/api/v1/oauth/redirect/google')
-          }}>
-            Continue with Google
-          </button>
-          <button type='button' className='text-white' onClick={() => {
-            setIsSignupWithEmail(true);
-          }}>
-            Continue with Email
-          </button>
-        </>
-      )
+      return <InitialSignupStep setIsSignupWithEmail={setIsSignupWithEmail} />
     }
 
     if (registerStep === 2) {
@@ -158,7 +145,7 @@ export default function SignUp() {
   }
 
   return (
-    <div className="bg-bunker-800 h-screen flex flex-col items-center justify-center">
+    <div className="bg-bunker-800 h-screen flex flex-col justify-start px-6 ">
       <Head>
         <title>{t('common:head-title', { title: t('signup:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -166,16 +153,14 @@ export default function SignUp() {
         <meta property="og:title" content={t('signup:og-title') as string} />
         <meta name="og:description" content={t('signup:og-description') as string} />
       </Head>
-      <div className="flex flex-col justify-center items-center">
-        <Link href="/">
-          <div className="flex justify-center mb-2 md:mb-8 cursor-pointer">
-            <Image src="/images/biglogo.png" height={90} width={120} alt="Infisical Wide Logo" />
-          </div>
-        </Link>
-        <form onSubmit={(e) => e.preventDefault()}>
-          {renderView(step)}
-        </form>
-      </div>
+      <Link href="/">
+        <div className="flex justify-center mb-8 mt-20 cursor-pointer">
+          <Image src="/images/biglogo.png" height={90} width={120} alt="long logo" />
+        </div>
+      </Link>
+      <form onSubmit={(e) => e.preventDefault()}>
+        {renderView(step)}
+      </form>
     </div>
   );
 }