awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style changes to login

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-05-09 20:45:59 -07:00
parent 4c434555a4
commit 4e7145dfe5
10 changed files with 186 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/login/InitialLoginStep.tsx
View File

@@ -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 <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='lg:w-1/5 w-1/3 bg-primary text-center p-3 rounded-md'>
<button type='button' className='text-black' onClick={() => {
window.open('/api/v1/oauth/redirect/google')
}}>
<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"
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')}
</button>
</Button>
</div>
<div className='lg:w-1/5 w-1/3 bg-chicago-900 text-center p-3 rounded-md mt-4'>
<button type='button' className='text-white' onClick={() => {
setIsLoginWithEmail(true);
}}>
{t('login:continue-with-email')}
</button>
<div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
<Button
colorSchema="primary"
variant="outline_bg"
onClick={() => {
setIsLoginWithEmail(true);
}}
isFullWidth
className="h-14 w-full mx-0"
>
{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>
</Link>
</div>
<Link href="/signup">
<button type="button" className='text-white mt-8 underline'>
{t('login:create-account')}
</button>
</Link>
</div>
}