login/signup styling fixes

2026-01-10 07:58:15 -05:00 · 2023-06-06 19:41:02 -07:00
parent 77d47e071b
commit 6b9aa200b5
9 changed files with 113 additions and 44 deletions
--- a/frontend/src/components/login/InitialLoginStep.tsx
+++ b/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" 
-                variant="solid"
-                onClick={() => {
-                    setIsLoginWithEmail(true);
-                }} 
+                onClick={async () => handleLogin()}
+                size="sm"
                isFullWidth
-                className="h-14 w-full mx-0"
-            > 
-                {t('login.continue-with-email')} 
-            </Button>
+                className='h-12'
+                colorSchema="primary"
+                variant="solid"
+                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>
--- a/frontend/src/components/login/MFAStep.tsx
+++ b/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">
--- a/frontend/src/components/signup/CodeInputStep.tsx
+++ b/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">
--- a/frontend/src/components/signup/DonwloadBackupPDFStep.tsx
+++ b/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>
--- a/frontend/src/components/signup/InitialSignupStep.tsx
+++ b/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'>
--- a/frontend/src/components/signup/UserInfoStep.tsx
+++ b/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
--- a/frontend/src/pages/login.tsx
+++ b/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) {
-      return (
-        <LoginStep
-          email={email}
-          setEmail={setEmail}
-          password={password}
-          setPassword={setPassword}
-          setStep={setStep}
-        />
-      );
-    }
-
-    if (!isLoginWithEmail && loginStep === 1) {
-      return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />;
+    if (loginStep === 1) {
+      return <InitialLoginStep 
+        setStep={setStep}
+        email={email}
+        setEmail={setEmail}
+        password={password}
+        setPassword={setPassword}
+      />;
    }

    if (step === 2) {
--- a/frontend/src/pages/saml-sso.tsx
+++ b/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"
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/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>