awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 14:27:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

More designed changes to login flow

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-05-10 12:55:08 -07:00
parent 0ef5779776
commit 967e520173
2 changed files with 110 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/signup/DonwloadBackupPDFStep.tsx
+5 -6
View File
@@ -30,16 +30,15 @@ export default function DonwloadBackupPDFStep({
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="flex flex-col items-center w-full h-full px-4 md:px-6 mx-auto mb-36 md:mb-16"> <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
<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"> <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">
{t('signup.step4-message')} <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />{t('signup.step4-message')}
</p> </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-1/4 min-w-[27rem] mt-4 md:mt-8 max-w-md text-bunker-300 text-md rounded-md"> <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="w-full px-3 pt-1 mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 w-1/4 min-w-[26rem] mx-auto"> <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">
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-5xl my-2" />
<span className='mb-2'>{t('signup.step4-description1')} {t('signup.step4-description3')}</span> <span className='mb-2'>{t('signup.step4-description1')} {t('signup.step4-description3')}</span>
</div> </div>
<div className="flex flex-col items-center justify-center mt-4 mb-4 lg:w-1/6 w-1/4 min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left"> <div className="flex flex-col items-center px-3 justify-center mt-0 md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
<div className="text-l py-1 text-lg w-full"> <div className="text-l py-1 text-lg w-full">
<Button <Button
onClick={async () => { onClick={async () => {
frontend/src/components/signup/UserInfoStep.tsx
+20 -14
View File
@@ -12,14 +12,13 @@ import completeAccountInformationSignup from '@app/pages/api/auth/CompleteAccoun
import getOrganizations from '@app/pages/api/organization/getOrgs'; import getOrganizations from '@app/pages/api/organization/getOrgs';
import ProjectService from '@app/services/ProjectService'; import ProjectService from '@app/services/ProjectService';
import Button from '../basic/buttons/Button';
import InputField from '../basic/InputField'; import InputField from '../basic/InputField';
import passwordCheck from '../utilities/checks/PasswordCheck'; import passwordCheck from '../utilities/checks/PasswordCheck';
import Aes256Gcm from '../utilities/cryptography/aes-256-gcm'; import Aes256Gcm from '../utilities/cryptography/aes-256-gcm';
import { deriveArgonKey } from '../utilities/cryptography/crypto'; import { deriveArgonKey } from '../utilities/cryptography/crypto';
import { saveTokenToLocalStorage } from '../utilities/saveTokenToLocalStorage'; import { saveTokenToLocalStorage } from '../utilities/saveTokenToLocalStorage';
import SecurityClient from '../utilities/SecurityClient'; import SecurityClient from '../utilities/SecurityClient';
import { Input } from '../v2'; import { Button, Input } from '../v2';
// eslint-disable-next-line new-cap // eslint-disable-next-line new-cap
const client = new jsrp.client(); const client = new jsrp.client();
@@ -205,11 +204,12 @@ export default function UserInfoStep({
}; };
return ( return (
<div className="h-7/12 mx-auto mb-36 w-max rounded-xl bg-bunker py-10 px-8 drop-shadow-xl md:mb-16"> <div className="h-full mx-auto mb-36 w-max rounded-xl px-8 md:mb-16">
<p className="mx-8 mb-6 flex justify-center text-4xl font-bold text-primary md:mx-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')} {t('signup.step3-message')}
</p> </p>
<div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24"> <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="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> <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p>
<Input <Input
placeholder="Jane Doe" placeholder="Jane Doe"
@@ -221,7 +221,7 @@ export default function UserInfoStep({
/> />
{nameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your name</p>} {nameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your name</p>}
</div> </div>
<div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24"> <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'>Organization Name</p> <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Organization Name</p>
<Input <Input
placeholder="Infisical" placeholder="Infisical"
@@ -232,7 +232,7 @@ export default function UserInfoStep({
/> />
{organizationNameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your organization name</p>} {organizationNameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your organization name</p>}
</div> </div>
<div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24"> <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'>Where did you hear about us? <span className="font-light">(optional)</span></p> <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Where did you hear about us? <span className="font-light">(optional)</span></p>
<Input <Input
placeholder="" placeholder=""
@@ -242,7 +242,7 @@ export default function UserInfoStep({
className="h-12" className="h-12"
/> />
</div> </div>
<div className="mt-2 flex max-h-60 w-full flex-col items-center justify-center rounded-lg md:p-2"> <div className="mt-2 flex lg:w-1/6 w-1/4 min-w-[20rem] max-h-60 w-full flex-col items-center justify-center rounded-lg py-2">
<InputField <InputField
label={t('section.password.password')} label={t('section.password.password')}
onChangeHandler={(pass: string) => { onChangeHandler={(pass: string) => {
@@ -302,13 +302,19 @@ export default function UserInfoStep({
<div className="py-2" /> <div className="py-2" />
)} )}
</div> </div>
<div className="mx-auto flex max-h-48 max-w-max flex-col items-center justify-center px-2 py-3 text-lg md:p-2"> <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
<div className="text-l py-1 text-lg w-full">
<Button <Button
text={t('signup.signup') ?? ''} onClick={signupErrorCheck}
loading={isLoading} size="sm"
onButtonPressed={signupErrorCheck} isFullWidth
size="lg" className='h-14'
/> colorSchema="primary"
variant="outline_bg"
isLoading={isLoading}
> {String(t('signup.signup'))} </Button>
</div>
</div>
</div> </div>
</div> </div>
); );