awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 15:27:27 +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
+105 -99
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,110 +204,117 @@ 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">
<p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p> <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">
<Input <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p>
placeholder="Jane Doe" <Input
onChange={(e) => setName(e.target.value)} placeholder="Jane Doe"
value={name} onChange={(e) => setName(e.target.value)}
isRequired value={name}
autoComplete="given-name" isRequired
className="h-12" autoComplete="given-name"
/> className="h-12"
{nameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your name</p>} />
</div> {nameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your name</p>}
<div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24"> </div>
<p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Organization Name</p> <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">
<Input <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Organization Name</p>
placeholder="Infisical" <Input
onChange={(e) => setOrganizationName(e.target.value)} placeholder="Infisical"
value={organizationName} onChange={(e) => setOrganizationName(e.target.value)}
isRequired value={organizationName}
className="h-12" isRequired
/> className="h-12"
{organizationNameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your organization name</p>} />
</div> {organizationNameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your organization name</p>}
<div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24"> </div>
<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> <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">
<Input <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>
placeholder="" <Input
onChange={(e) => setAttributionSource(e.target.value)} placeholder=""
value={attributionSource} onChange={(e) => setAttributionSource(e.target.value)}
isRequired value={attributionSource}
className="h-12" isRequired
/> className="h-12"
</div> />
<div className="mt-2 flex max-h-60 w-full flex-col items-center justify-center rounded-lg md:p-2"> </div>
<InputField <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">
label={t('section.password.password')} <InputField
onChangeHandler={(pass: string) => { label={t('section.password.password')}
setPassword(pass); onChangeHandler={(pass: string) => {
passwordCheck({ setPassword(pass);
password: pass, passwordCheck({
setPasswordErrorLength, password: pass,
setPasswordErrorNumber, setPasswordErrorLength,
setPasswordErrorLowerCase, setPasswordErrorNumber,
errorCheck: false setPasswordErrorLowerCase,
}); errorCheck: false
}} });
type="password" }}
value={password} type="password"
isRequired value={password}
error={passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase} isRequired
autoComplete="new-password" error={passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase}
id="new-password" autoComplete="new-password"
/> id="new-password"
{passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber ? ( />
<div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2"> {passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber ? (
<div className="mb-1 text-sm text-gray-400">{t('section.password.validate-base')}</div> <div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2">
<div className="ml-1 flex flex-row items-center justify-start"> <div className="mb-1 text-sm text-gray-400">{t('section.password.validate-base')}</div>
{passwordErrorLength ? ( <div className="ml-1 flex flex-row items-center justify-start">
<FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" /> {passwordErrorLength ? (
) : ( <FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" /> ) : (
)} <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<div className={`${passwordErrorLength ? 'text-gray-400' : 'text-gray-600'} text-sm`}> )}
{t('section.password.validate-length')} <div className={`${passwordErrorLength ? 'text-gray-400' : 'text-gray-600'} text-sm`}>
{t('section.password.validate-length')}
</div>
</div> </div>
</div> <div className="ml-1 flex flex-row items-center justify-start">
<div className="ml-1 flex flex-row items-center justify-start"> {passwordErrorLowerCase ? (
{passwordErrorLowerCase ? ( <FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
<FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" /> ) : (
) : ( <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" /> )}
)} <div
<div className={`${passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'} text-sm`}
className={`${passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'} text-sm`} >
> {t('section.password.validate-case')}
{t('section.password.validate-case')} </div>
</div> </div>
</div> <div className="ml-1 flex flex-row items-center justify-start">
<div className="ml-1 flex flex-row items-center justify-start"> {passwordErrorNumber ? (
{passwordErrorNumber ? ( <FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
<FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" /> ) : (
) : ( <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" /> )}
)} <div className={`${passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'} text-sm`}>
<div className={`${passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'} text-sm`}> {t('section.password.validate-number')}
{t('section.password.validate-number')} </div>
</div> </div>
</div> </div>
) : (
<div className="py-2" />
)}
</div>
<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
onClick={signupErrorCheck}
size="sm"
isFullWidth
className='h-14'
colorSchema="primary"
variant="outline_bg"
isLoading={isLoading}
> {String(t('signup.signup'))} </Button>
</div> </div>
) : ( </div>
<div className="py-2" />
)}
</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">
<Button
text={t('signup.signup') ?? ''}
loading={isLoading}
onButtonPressed={signupErrorCheck}
size="lg"
/>
</div> </div>
</div> </div>
); );