login/signup styling fixes

frontend/src/components/login/InitialLoginStep.tsx

@@ -1,19 +1,65 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
+import attemptLogin from '@app/components/utilities/attemptLogin';
+
+import Error from '../basic/Error';
 // import { faGoogle } from '@fortawesome/free-brands-svg-icons';
 // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from '../v2';
+import { Button, Input } from '../v2';
 
 export default function InitialLoginStep({
-    setIsLoginWithEmail,
+    setStep,
+    email,
+    setEmail,
+    password,
+    setPassword,
 }: {
-    setIsLoginWithEmail: (value: boolean) => void;
+    setStep: (step: number) => void;
+    email: string;
+    setEmail: (email: string) => void;
+    password: string;
+    setPassword: (password: string) => void;
 }) {
 
     const router = useRouter();
     const { t } = useTranslation();
+    const [isLoading, setIsLoading] = useState(false);
+    const [loginError, setLoginError] = useState(false);
+
+    const handleLogin = async () => {
+        try {
+          if (!email || !password) {
+            return;
+          }
+    
+          setIsLoading(true);
+          const isLoginSuccessful = await attemptLogin({
+            email,
+            password,
+          });
+          if (isLoginSuccessful && isLoginSuccessful.success) {
+            // case: login was successful
+    
+            if (isLoginSuccessful.mfaEnabled) {
+              // case: login requires MFA step
+              setStep(2);
+              setIsLoading(false);
+              return;
+            }
+    
+            // case: login does not require MFA step
+            router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
+          }
+    
+        } catch (err) {
+          setLoginError(true);
+        }
+    
+        setIsLoading(false);
+    }
 
     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' >Login to Infisical</h1>
@@ -30,18 +76,49 @@ export default function InitialLoginStep({
                 {t('login.continue-with-google')}
             </Button>
         </div> */}
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md'>
+        <div className="relative md:px-1.5 flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+            <div className="flex items-center justify-center w-full md:px-2 md:py-1 rounded-lg max-h-24 md:max-h-28">
+                <Input
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    type="email"
+                    placeholder="Enter your email..."
+                    isRequired
+                    autoComplete="username"
+                    className="h-12"
+                />
+            </div>
+        </div>
+        <div className="relative pt-2 md:pt-0 md:px-1.5 flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+          <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
+            <Input
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              type="password"
+              placeholder="Enter your password..."
+              isRequired
+              autoComplete="current-password"
+              id="current-password"
+              className="h-12 select:-webkit-autofill:focus"
+            />
+          </div>
+        </div>
+        {!isLoading && loginError && <Error text={t('login.error-login') ?? ''} />}
+        <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
             <Button
-                colorSchema="primary" 
+                onClick={async () => handleLogin()}
-                variant="solid"
+                size="sm"
-                onClick={() => {
-                    setIsLoginWithEmail(true);
-                }} 
                 isFullWidth
-                className="h-14 w-full mx-0"
+                className='h-12'
-            > 
+                colorSchema="primary"
-                {t('login.continue-with-email')} 
+                variant="solid"
-            </Button>
+                isLoading={isLoading}
+            > Login </Button>
+        </div>
+        <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center mt-4 py-2'>
+            <div className='w-1/2 border-t border-mineshaft-500'/>
+            <span className='px-4 text-sm text-bunker-400'>or</span>
+            <div className='w-1/2 border-t border-mineshaft-500'/>
         </div>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
             <Button
@@ -54,7 +131,7 @@ export default function InitialLoginStep({
                 Continue with SAML SSO
             </Button>
         </div>
-        <div className="mt-4 text-bunker-400 text-sm flex flex-row">
+        <div className="mt-6 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>

frontend/src/components/login/MFAStep.tsx

@@ -16,10 +16,10 @@ const props = {
     fontFamily: 'monospace',
     margin: '4px',
     MozAppearance: 'textfield',
-    width: '55px',
+    width: '48px',
     borderRadius: '5px',
     fontSize: '24px',
-    height: '55px',
+    height: '48px',
     paddingLeft: '7',
     backgroundColor: '#0d1117',
     color: 'white',
@@ -115,7 +115,7 @@ export default function MFAStep({
   };
 
   return (
-    <form className="mx-auto w-max px-8 pb-4 pt-4 md:mb-16">
+    <form className="mx-auto w-max md:px-8 pb-4 pt-4 md:mb-16">
       <p className="text-l flex justify-center text-bunker-300">{t('mfa.step2-message')}</p>
       <p className="text-l my-1 flex justify-center font-semibold text-bunker-300">{email} </p>
       <div className="hidden md:block w-max min-w-[20rem] mx-auto">

frontend/src/components/signup/CodeInputStep.tsx

@@ -85,7 +85,7 @@ export default function CodeInputStep({
   };
 
   return (
-    <div className="mx-auto h-full w-full pb-4 px-8">
+    <div className="mx-auto h-full w-full pb-4 md:px-8">
       <p className="text-md flex justify-center text-bunker-200">{t('signup.step2-message')}</p>
       <p className="text-md flex justify-center font-semibold my-1 text-bunker-200">{email} </p>
       <div className="hidden md:block w-max min-w-[20rem] mx-auto">

frontend/src/components/signup/DonwloadBackupPDFStep.tsx

@@ -34,7 +34,7 @@ export default function DonwloadBackupPDFStep({
       <p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
         <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />{t('signup.step4-message')}
       </p>
-      <div className="flex flex-col pb-2 bg-mineshaft-900 border border-mineshaft-700 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
+      <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
         <div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 lg:w-1/6 w-full md:min-w-[23rem] px-3 mx-auto">
           <span className='mb-2'>{t('signup.step4-description1')} {t('signup.step4-description3')}</span>
         </div>

frontend/src/components/signup/InitialSignupStep.tsx

@@ -39,7 +39,7 @@ export default function InitialSignupStep({
                 isFullWidth
                 className="h-14 w-full mx-0"
             >
-                {t('signup.continue-with-email')}
+                Sign Up with email
             </Button>
         </div>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>

frontend/src/components/signup/UserInfoStep.tsx

@@ -205,11 +205,11 @@ export default function UserInfoStep({
   };
 
   return (
-    <div className="h-full mx-auto mb-36 w-max rounded-xl px-8 md:mb-16">
+    <div className="h-full mx-auto mb-36 w-max rounded-xl md:px-8 md:mb-16">
       <p className="mx-8 mb-6 flex justify-center text-xl font-bold text-medium md:mx-16 text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
         {t('signup.step3-message')}
       </p>
-      <div className="h-full mx-auto mb-36 w-max rounded-xl py-6 px-8 md:mb-16 border border-mineshaft-600 bg-mineshaft-800">
+      <div className="h-full mx-auto mb-36 w-max rounded-xl py-6 md:px-8 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800">
         <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
           <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p>
           <Input

frontend/src/pages/login.tsx

@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 
 // 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';
 import { useProviderAuth } from '@app/hooks/useProviderAuth';
@@ -22,7 +21,6 @@ export default function Login() {
   const [step, setStep] = useState(1);
   const { t } = useTranslation();
   // const lang = router.locale ?? 'en';
-  const [isLoginWithEmail, setIsLoginWithEmail] = useState(false);
   const {
     providerAuthToken,
     email: providerEmail,
@@ -70,20 +68,14 @@ export default function Login() {
       );
     }
 
-    if (isLoginWithEmail && loginStep === 1) {
+    if (loginStep === 1) {
-      return (
+      return <InitialLoginStep 
-        <LoginStep
+        setStep={setStep}
-          email={email}
+        email={email}
-          setEmail={setEmail}
+        setEmail={setEmail}
-          password={password}
+        password={password}
-          setPassword={setPassword}
+        setPassword={setPassword}
-          setStep={setStep}
+      />;
-        />
-      );
-    }
-
-    if (!isLoginWithEmail && loginStep === 1) {
-      return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />;
     }
 
     if (step === 2) {

frontend/src/pages/saml-sso.tsx

@@ -46,16 +46,16 @@ export default function Login() {
           <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
         </div>
       </Link>
-      <div className="mx-auto w-full max-w-md px-6">
+      <div className="mx-auto w-full max-w-md md:px-6">
         <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
           What’s your email?
         </p>
-        <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+        <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
           <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
             <Input
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              type="password"
+              type="email"
               placeholder="Enter your email..."
               isRequired
               autoComplete="email"
@@ -64,7 +64,7 @@ export default function Login() {
             />
           </div>
         </div>
-        <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[22rem] text-center rounded-md mt-4'>
+        <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
           <Button
               colorSchema="primary" 
               variant="outline_bg"

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -717,9 +717,9 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                 isLoading={isSubmitting}
                 leftIcon={<FontAwesomeIcon icon={isRollbackMode ? faClockRotateLeft : faCheck} />}
                 onClick={handleSubmit(onSaveSecret)}
-                className="h-10"
+                className="h-10 text-black"
                 color="primary"
-                variant="star"
+                variant="solid"
               >
                 {isRollbackMode ? 'Rollback' : 'Save Changes'}
               </Button>