mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-16 15:31:19 +00:00
292 lines
10 KiB
TypeScript
292 lines
10 KiB
TypeScript
import { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import { useRouter } from 'next/router';
|
|
import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import jsrp from 'jsrp';
|
|
import queryString from 'query-string';
|
|
|
|
import Button from '~/components/basic/buttons/Button';
|
|
import InputField from '~/components/basic/InputField';
|
|
import passwordCheck from '~/components/utilities/checks/PasswordCheck';
|
|
import Aes256Gcm from '~/components/utilities/cryptography/aes-256-gcm';
|
|
import { getTranslatedStaticProps } from '~/components/utilities/withTranslateProps';
|
|
|
|
import EmailVerifyOnPasswordReset from './api/auth/EmailVerifyOnPasswordReset';
|
|
import getBackupEncryptedPrivateKey from './api/auth/getBackupEncryptedPrivateKey';
|
|
import resetPasswordOnAccountRecovery from './api/auth/resetPasswordOnAccountRecovery';
|
|
|
|
const client = new jsrp.client();
|
|
|
|
export default function PasswordReset() {
|
|
const [verificationToken, setVerificationToken] = useState('');
|
|
const [step, setStep] = useState(1);
|
|
const [backupKey, setBackupKey] = useState('');
|
|
const [privateKey, setPrivateKey] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [backupKeyError, setBackupKeyError] = useState(false);
|
|
const [passwordErrorLength, setPasswordErrorLength] = useState(false);
|
|
const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
|
|
const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
|
|
|
|
const router = useRouter();
|
|
const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
|
|
const token = parsedUrl.token as string;
|
|
const email = (parsedUrl.to as string)?.replace(' ', '+').trim();
|
|
|
|
// Unencrypt the private key with a backup key
|
|
const getEncryptedKeyHandler = async () => {
|
|
try {
|
|
const result = await getBackupEncryptedPrivateKey({ verificationToken });
|
|
setPrivateKey(
|
|
Aes256Gcm.decrypt({
|
|
ciphertext: result.encryptedPrivateKey,
|
|
iv: result.iv,
|
|
tag: result.tag,
|
|
secret: backupKey,
|
|
})
|
|
);
|
|
setStep(3);
|
|
} catch {
|
|
setBackupKeyError(true);
|
|
}
|
|
};
|
|
|
|
// If everything is correct, reset the password
|
|
const resetPasswordHandler = async () => {
|
|
const errorCheck = passwordCheck({
|
|
password: newPassword,
|
|
setPasswordErrorLength,
|
|
setPasswordErrorNumber,
|
|
setPasswordErrorLowerCase,
|
|
errorCheck: false,
|
|
});
|
|
|
|
if (!errorCheck) {
|
|
// Generate a random pair of a public and a private key
|
|
const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
|
|
text: privateKey,
|
|
secret: newPassword
|
|
.slice(0, 32)
|
|
.padStart(
|
|
32 +
|
|
(newPassword.slice(0, 32).length - new Blob([newPassword]).size),
|
|
'0'
|
|
),
|
|
}) as { ciphertext: string; iv: string; tag: string };
|
|
|
|
client.init(
|
|
{
|
|
username: email,
|
|
password: newPassword,
|
|
},
|
|
async () => {
|
|
client.createVerifier(
|
|
async (err: any, result: { salt: string; verifier: string }) => {
|
|
const response = await resetPasswordOnAccountRecovery({
|
|
verificationToken,
|
|
encryptedPrivateKey: ciphertext,
|
|
iv,
|
|
tag,
|
|
salt: result.salt,
|
|
verifier: result.verifier,
|
|
});
|
|
|
|
// if everything works, go the main dashboard page.
|
|
if (response?.status === 200) {
|
|
router.push('/login');
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
// Click a button to confirm email
|
|
const stepConfirmEmail = (
|
|
<div className='bg-bunker flex flex-col items-center w-full py-6 max-w-xs md:max-w-lg mx-auto my-32 px-4 md:px-6 mx-1 rounded-xl drop-shadow-xl'>
|
|
<p className='text-4xl text-center font-semibold mb-8 flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary'>
|
|
Confirm your email
|
|
</p>
|
|
<Image
|
|
src='/images/envelope.svg'
|
|
height={262}
|
|
width={410}
|
|
alt='verify email'
|
|
></Image>
|
|
<div className='flex flex-col items-center justify-center md:p-2 max-h-24 max-w-md mx-auto text-lg px-4 mt-4 mb-2'>
|
|
<Button
|
|
text='Confirm Email'
|
|
onButtonPressed={async () => {
|
|
const response = await EmailVerifyOnPasswordReset({
|
|
email,
|
|
code: token,
|
|
});
|
|
if (response.status == 200) {
|
|
setVerificationToken((await response.json()).token);
|
|
setStep(2);
|
|
} else {
|
|
console.log('ERROR', response);
|
|
router.push('/email-not-verified');
|
|
}
|
|
}}
|
|
size='lg'
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Input backup key
|
|
const stepInputBackupKey = (
|
|
<div className='bg-bunker flex flex-col items-center w-full pt-6 pb-3 max-w-xs md:max-w-lg mx-auto my-32 px-4 md:px-6 mx-1 rounded-xl drop-shadow-xl'>
|
|
<p className='text-2xl md:text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-4'>
|
|
Enter your backup key
|
|
</p>
|
|
<div className='flex flex-row items-center justify-center md:pb-4 mt-4 md:mx-2'>
|
|
<p className='text-sm flex justify-center text-gray-400 w-max max-w-md'>
|
|
You can find it in your emrgency kit. You had to download the enrgency
|
|
kit during signup.
|
|
</p>
|
|
</div>
|
|
<div className='flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28'>
|
|
<InputField
|
|
label='Backup Key'
|
|
onChangeHandler={setBackupKey}
|
|
type='password'
|
|
value={backupKey}
|
|
placeholder=''
|
|
isRequired
|
|
error={backupKeyError}
|
|
errorText='Something is wrong with the backup key'
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm'>
|
|
<div className='text-l mt-6 m-8 px-8 py-3 text-lg'>
|
|
<Button
|
|
text='Submit Backup Key'
|
|
onButtonPressed={() => getEncryptedKeyHandler()}
|
|
size='lg'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Enter new password
|
|
const stepEnterNewPassword = (
|
|
<div className='bg-bunker flex flex-col items-center w-full pt-6 pb-3 max-w-xs md:max-w-lg mx-auto my-32 px-4 md:px-6 mx-1 rounded-xl drop-shadow-xl'>
|
|
<p className='text-2xl md:text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100'>
|
|
Enter new password
|
|
</p>
|
|
<div className='flex flex-row items-center justify-center md:pb-4 mt-1 md:mx-2'>
|
|
<p className='text-sm flex justify-center text-gray-400 w-max max-w-md'>
|
|
Make sure you save it somewhere save.
|
|
</p>
|
|
</div>
|
|
<div className='flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28'>
|
|
<InputField
|
|
label='New Password'
|
|
onChangeHandler={(password) => {
|
|
setNewPassword(password);
|
|
passwordCheck({
|
|
password,
|
|
setPasswordErrorLength,
|
|
setPasswordErrorNumber,
|
|
setPasswordErrorLowerCase,
|
|
errorCheck: false,
|
|
});
|
|
}}
|
|
type='password'
|
|
value={newPassword}
|
|
isRequired
|
|
error={
|
|
passwordErrorLength && passwordErrorLowerCase && passwordErrorNumber
|
|
}
|
|
autoComplete='new-password'
|
|
id='new-password'
|
|
/>
|
|
</div>
|
|
{passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber ? (
|
|
<div className='w-full mt-3 bg-white/5 px-2 mx-2 flex flex-col items-start py-2 rounded-md max-w-md mb-2'>
|
|
<div className={`text-gray-400 text-sm mb-1`}>
|
|
Password should contain at least:
|
|
</div>
|
|
<div className='flex flex-row justify-start items-center ml-1'>
|
|
{passwordErrorLength ? (
|
|
<FontAwesomeIcon icon={faX} className='text-md text-red mr-2.5' />
|
|
) : (
|
|
<FontAwesomeIcon
|
|
icon={faCheck}
|
|
className='text-md text-primary mr-2'
|
|
/>
|
|
)}
|
|
<div
|
|
className={`${
|
|
passwordErrorLength ? 'text-gray-400' : 'text-gray-600'
|
|
} text-sm`}
|
|
>
|
|
14 characters
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-row justify-start items-center ml-1'>
|
|
{passwordErrorLowerCase ? (
|
|
<FontAwesomeIcon icon={faX} className='text-md text-red mr-2.5' />
|
|
) : (
|
|
<FontAwesomeIcon
|
|
icon={faCheck}
|
|
className='text-md text-primary mr-2'
|
|
/>
|
|
)}
|
|
<div
|
|
className={`${
|
|
passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'
|
|
} text-sm`}
|
|
>
|
|
1 lowercase character
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-row justify-start items-center ml-1'>
|
|
{passwordErrorNumber ? (
|
|
<FontAwesomeIcon icon={faX} className='text-md text-red mr-2.5' />
|
|
) : (
|
|
<FontAwesomeIcon
|
|
icon={faCheck}
|
|
className='text-md text-primary mr-2'
|
|
/>
|
|
)}
|
|
<div
|
|
className={`${
|
|
passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'
|
|
} text-sm`}
|
|
>
|
|
1 number
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className='py-2'></div>
|
|
)}
|
|
<div className='flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm'>
|
|
<div className='text-l mt-6 m-8 px-8 py-3 text-lg'>
|
|
<Button
|
|
text='Submit New Password'
|
|
onButtonPressed={() => resetPasswordHandler()}
|
|
size='lg'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className='bg-bunker-800 h-screen w-full flex flex-col items-center justify-center'>
|
|
{step === 1 && stepConfirmEmail}
|
|
{step === 2 && stepInputBackupKey}
|
|
{step === 3 && stepEnterNewPassword}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const getServerSideProps = getTranslatedStaticProps([]);
|