diff --git a/frontend/public/images/gradientLogo.svg b/frontend/public/images/gradientLogo.svg new file mode 100644 index 000000000..7698d8e90 --- /dev/null +++ b/frontend/public/images/gradientLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/login/InitialLoginStep.tsx b/frontend/src/components/login/InitialLoginStep.tsx index 5ec56ec11..ff343e574 100644 --- a/frontend/src/components/login/InitialLoginStep.tsx +++ b/frontend/src/components/login/InitialLoginStep.tsx @@ -1,8 +1,12 @@ import { useTranslation } from 'react-i18next'; 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({ setIsLoginWithEmail, }: { @@ -12,26 +16,39 @@ export default function InitialLoginStep({ const { t } = useTranslation(); return
-

Login to Infisical

-
- +
-
- +
+ +
+
+ Don't have an acount yet? + + {t('login:create-account')} +
- - -
} diff --git a/frontend/src/components/login/LoginStep.tsx b/frontend/src/components/login/LoginStep.tsx index a45ebe3e5..dc8a6f155 100644 --- a/frontend/src/components/login/LoginStep.tsx +++ b/frontend/src/components/login/LoginStep.tsx @@ -5,12 +5,12 @@ import { useTranslation } from 'next-i18next'; import { faWarning } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -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 { Button, Input } from '../v2'; + /** * 1st step of login - user enters their username and password * @param {Object} obj @@ -74,55 +74,54 @@ export default function LoginStep ({ return (
e.preventDefault()}> -
-

- {t('login:login')} -

-
- +
+

+ Enter your email and password +

+
+ setEmail(e.target.value)} + type="email" + placeholder="Enter your email..." + isRequired + autoComplete="username" + className="h-12" + /> +
+
+
+ setPassword(e.target.value)} + type="password" + placeholder="Enter your password..." + isRequired + autoComplete="current-password" + id="current-password" + className="h-12" + /> +
+
+ {!isLoading && loginError && } +
+
+ +
+
-
- -
+
- + {t('login:forgot-password')} -
-
- {!isLoading && loginError && } -
-
-
-
{false && (
@@ -130,19 +129,6 @@ export default function LoginStep ({ {t('common:maintenance-alert')}
)} -
-

- {t('login:need-account')} -

- - - -
); } diff --git a/frontend/src/components/signup/CodeInputStep.tsx b/frontend/src/components/signup/CodeInputStep.tsx index 67b4e530c..340389259 100644 --- a/frontend/src/components/signup/CodeInputStep.tsx +++ b/frontend/src/components/signup/CodeInputStep.tsx @@ -5,8 +5,8 @@ import { useTranslation } from 'next-i18next'; import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail'; -import Button from '../basic/buttons/Button'; import Error from '../basic/Error'; +import { Button } from '../v2'; // The style for the verification code input const props = { @@ -83,10 +83,10 @@ export default function CodeInputStep({ }; return ( -
-

{t('signup:step2-message')}

-

{email}

-
+
+

{t('signup:step2-message')}

+

{email}

+
-
+
{codeError && } -
- +
{t('signup:step2-resend-alert')} - +
- +

{t('signup:step2-spam-alert')}

diff --git a/frontend/src/components/signup/EnterEmailStep.tsx b/frontend/src/components/signup/EnterEmailStep.tsx index e4c5e8f79..2b412d301 100644 --- a/frontend/src/components/signup/EnterEmailStep.tsx +++ b/frontend/src/components/signup/EnterEmailStep.tsx @@ -1,11 +1,9 @@ import React, { useState } from 'react'; -import Link from 'next/link'; import { useTranslation } from 'next-i18next'; import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail'; -import Button from '../basic/buttons/Button'; -import InputField from '../basic/InputField'; +import { Button, Input } from '../v2'; interface DownloadBackupPDFStepProps { incrementStep: () => void; @@ -27,7 +25,6 @@ export default function EnterEmailStep({ incrementStep }: DownloadBackupPDFStepProps): JSX.Element { const [emailError, setEmailError] = useState(false); - const [emailErrorMessage, setEmailErrorMessage] = useState(''); const { t } = useTranslation(); /** @@ -37,11 +34,9 @@ export default function EnterEmailStep({ let emailCheckBool = false; if (!email) { setEmailError(true); - setEmailErrorMessage('Please enter your email.'); emailCheckBool = true; } else if (!email.includes('@') || !email.includes('.') || !/[a-z]/.test(email)) { setEmailError(true); - setEmailErrorMessage('Please enter a valid email.'); emailCheckBool = true; } else { setEmailError(false); @@ -56,44 +51,36 @@ export default function EnterEmailStep({ return (
-
-

- {t('signup:step1-start')} +

+

+ {t('signup:initial-title')}

-
- + setEmail(e.target.value)} value={email} - placeholder="" isRequired - error={emailError} - errorText={emailErrorMessage} + // error={emailError} + // errorText={emailErrorMessage} autoComplete="username" + className="h-12" /> + {emailError &&

Please enter a valid email.

}
-
-

{t('signup:step1-privacy')}

-
+
+
-
- - - -
); } diff --git a/frontend/src/components/signup/InitialSignupStep.tsx b/frontend/src/components/signup/InitialSignupStep.tsx index cb15a6514..f3e4fee86 100644 --- a/frontend/src/components/signup/InitialSignupStep.tsx +++ b/frontend/src/components/signup/InitialSignupStep.tsx @@ -1,8 +1,12 @@ import { useTranslation } from 'react-i18next'; 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({ setIsSignupWithEmail, }: { @@ -11,27 +15,41 @@ export default function InitialSignupStep({ const { t } = useTranslation(); return
-

{t('signup:initial-title')}

-
- +
-
- + +
+
+ {t('signup:create-policy')} +
+
+ + {t('signup:already-have-account')} +
- {t('signup:create-policy')} - - -
} diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx index 17ae7b867..8d4294e44 100644 --- a/frontend/src/components/v2/Button/Button.tsx +++ b/frontend/src/components/v2/Button/Button.tsx @@ -63,6 +63,11 @@ const buttonVariants = cva( variant: 'star', className: 'hover:bg-primary hover:text-black' }, + { + colorSchema: 'primary', + variant: 'solid', + className: 'bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black' + }, { colorSchema: 'primary', variant: 'selected', @@ -71,7 +76,7 @@ const buttonVariants = cva( { colorSchema: 'primary', variant: 'outline_bg', - className: 'bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200' + className: 'bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200' }, { colorSchema: 'secondary', diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx index 98784cdc0..cc912e7db 100644 --- a/frontend/src/components/v2/Input/Input.tsx +++ b/frontend/src/components/v2/Input/Input.tsx @@ -13,7 +13,7 @@ type Props = { }; const inputVariants = cva( - 'input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2', + 'input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-[0.05rem] hover:ring-bunker-400/60 duration-100', { variants: { size: { @@ -27,13 +27,13 @@ const inputVariants = cva( false: '' }, variant: { - filled: ['bg-bunker-800', 'text-gray-400'], + filled: ['bg-mineshaft-900', 'text-gray-400'], outline: ['bg-transparent'], plain: 'bg-transparent outline-none' }, isError: { true: 'focus:ring-red/50 placeholder-red-300', - false: 'focus:ring-primary/50' + false: 'focus:ring-primary-400/50 focus:ring-1' } }, compoundVariants: [] diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx index 01fe98675..6559a2fd3 100644 --- a/frontend/src/pages/login.tsx +++ b/frontend/src/pages/login.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from 'react'; import Head from 'next/head'; import Image from 'next/image'; -import Link from 'next/link'; import { useRouter } from 'next/router'; import { useTranslation } from 'next-i18next'; @@ -98,7 +97,7 @@ export default function Login() { } return ( -
+
{t('common:head-title', { title: t('login:title') })} @@ -106,11 +105,9 @@ export default function Login() { - -
- long logo -
- +
+ Infisical logo +
{renderView(step)}
diff --git a/frontend/src/pages/signup.tsx b/frontend/src/pages/signup.tsx index d47044599..de85be8bc 100644 --- a/frontend/src/pages/signup.tsx +++ b/frontend/src/pages/signup.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'; import Head from 'next/head'; import Image from 'next/image'; -import Link from 'next/link'; import { useRouter } from 'next/router'; import { useTranslation } from 'next-i18next'; @@ -153,7 +152,7 @@ export default function SignUp() { } return ( -
+
{t('common:head-title', { title: t('signup:title') })} @@ -161,11 +160,9 @@ export default function SignUp() { - -
- long logo -
- +
+ Infisical Logo +
e.preventDefault()}> {renderView(step)}