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

initial commit

Browse Source
This commit is contained in:
Naor Peled
2022-12-24 03:28:58 +02:00
parent 5324355006
commit 71a7497ea7
4 changed files with 317 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/basic/InputField.tsx
+1
View File
@@ -96,6 +96,7 @@ const InputField = (
/> />
{props.label?.includes('Password') && ( {props.label?.includes('Password') && (
<button <button
type="button"
onClick={() => { onClick={() => {
setPasswordVisible(!passwordVisible); setPasswordVisible(!passwordVisible);
}} }}
frontend/components/basic/buttons/Button.tsx
+3 -1
View File
@@ -1,4 +1,4 @@
import React from "react"; import React, { ButtonHTMLAttributes } from "react";
import Image from "next/image"; import Image from "next/image";
import { IconProp } from "@fortawesome/fontawesome-svg-core"; import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { import {
@@ -18,6 +18,7 @@ type ButtonProps = {
active?: boolean; active?: boolean;
iconDisabled?: string; iconDisabled?: string;
textDisabled?: string; textDisabled?: string;
type?: ButtonHTMLAttributes<any>['type'];
}; };
/** /**
@@ -91,6 +92,7 @@ export default function Button(props: ButtonProps): JSX.Element {
const button = ( const button = (
<button <button
disabled={!activityStatus} disabled={!activityStatus}
type={props.type}
onClick={props.onButtonPressed} onClick={props.onButtonPressed}
className={styleButton} className={styleButton}
> >
frontend/pages/login.tsx
+63 -58
View File
@@ -45,7 +45,7 @@ export default function Login() {
setErrorLogin, setErrorLogin,
router, router,
false, false,
true true,
).then(() => { ).then(() => {
setTimeout(function () { setTimeout(function () {
setIsLoading(false); setIsLoading(false);
@@ -75,68 +75,73 @@ export default function Login() {
/> />
</div> </div>
</Link> </Link>
<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl"> <form onSubmit={(e)=>{
<p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6"> e.preventDefault()
Log in to your account }}>
</p> <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
<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"> <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
<InputField Log in to your account
label="Email" </p>
onChangeHandler={setEmail} <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">
type="email" <InputField
value={email} label="Email"
placeholder="" onChangeHandler={setEmail}
isRequired type="email"
autoComplete="username" value={email}
/> placeholder=""
</div> isRequired
<div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28"> autoComplete="username"
<InputField
label="Password"
onChangeHandler={setPassword}
type="password"
value={password}
placeholder=""
isRequired
autoComplete="current-password"
id="current-password"
/>
<div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
<Link href="/verify-email">Forgot password?</Link>
</div>
</div>
{errorLogin && <Error text="Your email and/or password are wrong." />}
<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="Log In"
onButtonPressed={loginCheck}
loading={isLoading}
size="lg"
/> />
</div> </div>
</div> <div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
{/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28"> <InputField
label="Password"
onChangeHandler={setPassword}
type="password"
value={password}
placeholder=""
isRequired
autoComplete="current-password"
id="current-password"
/>
<div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
<Link href="/verify-email">Forgot password?</Link>
</div>
</div>
{errorLogin && <Error text="Your email and/or password are wrong." />}
<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
type="submit"
text="Log In"
onButtonPressed={loginCheck}
loading={isLoading}
size="lg"
/>
</div>
</div>
{/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
<p className="text-gray-400">I may have <Link href="/login"><u className="text-sky-500 cursor-pointer">forgotten my password.</u></Link></p> <p className="text-gray-400">I may have <Link href="/login"><u className="text-sky-500 cursor-pointer">forgotten my password.</u></Link></p>
</div> */} </div> */}
</div>
{false && (
<div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
We are experiencing minor technical difficulties. We are working on
solving it right now. Please come back in a few minutes.
</div> </div>
)} {false && (
<div className="flex flex-row items-center justify-center md:pb-4 mt-4"> <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
<p className="text-sm flex justify-center text-gray-400 w-max"> <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
Need an Infisical account? We are experiencing minor technical difficulties. We are working on
</p> solving it right now. Please come back in a few minutes.
<Link href="/signup"> </div>
<button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5"> )}
Sign up here. <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
</button> <p className="text-sm flex justify-center text-gray-400 w-max">
</Link> Need an Infisical account?
</div> </p>
<Link href="/signup">
<button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
Sign up here.
</button>
</Link>
</div>
</form>
</div> </div>
); );
} }
frontend/pages/signup.tsx
+250 -241
View File
@@ -40,8 +40,8 @@ const props = {
backgroundColor: '#0d1117', backgroundColor: '#0d1117',
color: 'white', color: 'white',
border: '1px solid gray', border: '1px solid gray',
textAlign: 'center' textAlign: 'center',
} },
} as const; } as const;
const propsPhone = { const propsPhone = {
inputStyle: { inputStyle: {
@@ -56,8 +56,8 @@ const propsPhone = {
backgroundColor: '#0d1117', backgroundColor: '#0d1117',
color: 'white', color: 'white',
border: '1px solid gray', border: '1px solid gray',
textAlign: 'center' textAlign: 'center',
} },
} as const; } as const;
export default function SignUp() { export default function SignUp() {
@@ -148,7 +148,8 @@ export default function SignUp() {
} }
}; };
// Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the criteria. // Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the
// criteria.
const signupErrorCheck = async () => { const signupErrorCheck = async () => {
setIsLoading(true); setIsLoading(true);
let errorCheck = false; let errorCheck = false;
@@ -169,7 +170,7 @@ export default function SignUp() {
setPasswordErrorLength, setPasswordErrorLength,
setPasswordErrorNumber, setPasswordErrorNumber,
setPasswordErrorLowerCase, setPasswordErrorLowerCase,
currentErrorCheck: errorCheck currentErrorCheck: errorCheck,
}); });
if (!errorCheck) { if (!errorCheck) {
@@ -186,8 +187,8 @@ export default function SignUp() {
.slice(0, 32) .slice(0, 32)
.padStart( .padStart(
32 + (password.slice(0, 32).length - new Blob([password]).size), 32 + (password.slice(0, 32).length - new Blob([password]).size),
'0' '0',
) ),
}) as { ciphertext: string; iv: string; tag: string }; }) as { ciphertext: string; iv: string; tag: string };
localStorage.setItem('PRIVATE_KEY', PRIVATE_KEY); localStorage.setItem('PRIVATE_KEY', PRIVATE_KEY);
@@ -195,7 +196,7 @@ export default function SignUp() {
client.init( client.init(
{ {
username: email, username: email,
password: password password: password,
}, },
async () => { async () => {
client.createVerifier( client.createVerifier(
@@ -204,14 +205,14 @@ export default function SignUp() {
email, email,
firstName, firstName,
lastName, lastName,
organizationName: firstName + "'s organization", organizationName: firstName + '\'s organization',
publicKey: PUBLIC_KEY, publicKey: PUBLIC_KEY,
ciphertext, ciphertext,
iv, iv,
tag, tag,
salt: result.salt, salt: result.salt,
verifier: result.verifier, verifier: result.verifier,
token: verificationToken token: verificationToken,
}); });
// if everything works, go the main dashboard page. // if everything works, go the main dashboard page.
@@ -230,16 +231,16 @@ export default function SignUp() {
setErrorLogin, setErrorLogin,
router, router,
true, true,
false false,
); );
incrementStep(); incrementStep();
} catch (error) { } catch (error) {
setIsLoading(false); setIsLoading(false);
} }
} }
} },
); );
} },
); );
} else { } else {
setIsLoading(false); setIsLoading(false);
@@ -250,7 +251,7 @@ export default function SignUp() {
const step1 = ( const step1 = (
<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 mb-48 md:mb-16 rounded-xl drop-shadow-xl"> <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 mb-48 md:mb-16 rounded-xl drop-shadow-xl">
<p className="text-4xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary"> <p className="text-4xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
{"Let'"}s get started {'Let\''}s get started
</p> </p>
<div className="flex flex-col items-center justify-center w-full md:pb-2 max-h-24 max-w-md mx-auto pt-2"> <div className="flex flex-col items-center justify-center w-full md:pb-2 max-h-24 max-w-md mx-auto pt-2">
<Link href="/login"> <Link href="/login">
@@ -261,260 +262,267 @@ export default function SignUp() {
</button> </button>
</Link> </Link>
</div> </div>
<div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4"> <form onSubmit={(e) => {e.preventDefault();}}>
<InputField <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
label="Email" <InputField
onChangeHandler={setEmail} label="Email"
type="email" onChangeHandler={setEmail}
value={email} type="email"
placeholder="" value={email}
isRequired placeholder=""
error={emailError} isRequired
errorText={emailErrorMessage} error={emailError}
autoComplete="username" errorText={emailErrorMessage}
/> autoComplete="username"
</div> />
{/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'> </div>
{/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'>
<Checkbox className="mr-4"/> <Checkbox className="mr-4"/>
<p className='text-sm'>I do not want to receive emails about Infisical and its products.</p> <p className='text-sm'>I do not want to receive emails about Infisical and its products.</p>
</div> */} </div> */}
<div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left"> <div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
<p className="text-gray-400 mt-2 md:mx-0.5"> <p className="text-gray-400 mt-2 md:mx-0.5">
By creating an account, you agree to our Terms and have read and By creating an account, you agree to our Terms and have read and
acknowledged the Privacy Policy. acknowledged the Privacy Policy.
</p> </p>
<div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg"> <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
<Button text="Get Started" onButtonPressed={emailCheck} size="lg" /> <Button text="Get Started" type="submit" onButtonPressed={emailCheck} size="lg" />
</div>
</div> </div>
</div> </form>
</div> </div>
); );
// Step 2 of the signup process (enter the email verification code) // Step 2 of the signup process (enter the email verification code)
const step2 = ( const step2 = (
<div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16"> <form onSubmit={(e) => {e.preventDefault();}}>
<p className="text-l flex justify-center text-gray-400"> <div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
{"We've"} sent a verification email to{' '} <p className="text-l flex justify-center text-gray-400">
</p> {'We\'ve'} sent a verification email to{' '}
<p className="text-l flex justify-center font-semibold my-2 text-gray-400"> </p>
{email}{' '} <p className="text-l flex justify-center font-semibold my-2 text-gray-400">
</p> {email}{' '}
<div className="hidden md:block"> </p>
<ReactCodeInput <div className="hidden md:block">
name="" <ReactCodeInput
inputMode="tel" name=""
type="text" inputMode="tel"
fields={6} type="text"
onChange={setCode} fields={6}
{...props} onChange={setCode}
className="mt-6 mb-2" {...props}
/> className="mt-6 mb-2"
</div> />
<div className="block md:hidden"> </div>
<ReactCodeInput <div className="block md:hidden">
name="" <ReactCodeInput
inputMode="tel" name=""
type="text" inputMode="tel"
fields={6} type="text"
onChange={setCode} fields={6}
{...propsPhone} onChange={setCode}
className="mt-2 mb-6" {...propsPhone}
/> className="mt-2 mb-6"
</div> />
{codeError && ( </div>
<Error text="Oops. Your code is wrong. Please try again." /> {codeError && (
)} <Error text="Oops. Your code is wrong. Please try again." />
<div className="flex max-w-min 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="Verify" onButtonPressed={incrementStep} size="lg" /> <div className="flex max-w-min 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">
</div> <Button text="Verify" onButtonPressed={incrementStep} size="lg" />
<div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2"> </div>
{/* <Link href="/login"> <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
{/* <Link href="/login">
<button className="w-full hover:opacity-90 duration-200"> <button className="w-full hover:opacity-90 duration-200">
<u className="font-normal text-sm text-sky-700"> <u className="font-normal text-sm text-sky-700">
Not seeing an email? Resend Not seeing an email? Resend
</u> </u>
</button> </button>
</Link> */} </Link> */}
<p className="text-sm text-gray-500 pb-2"> <p className="text-sm text-gray-500 pb-2">
Make sure to check your spam inbox. Make sure to check your spam inbox.
</p> </p>
</div>
</div> </div>
</div> </form>
); );
// Step 3 of the signup process (enter the rest of the impformation) // Step 3 of the signup process (enter the rest of the impformation)
const step3 = ( const step3 = (
<div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16"> <form onSubmit={(e) => {e.preventDefault();}}>
<p className="text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary"> <div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
Almost there! <p className="text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
</p> Almost there!
<div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24"> </p>
<InputField <div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
label="First Name" <InputField
onChangeHandler={setFirstName} label="First Name"
type="name" onChangeHandler={setFirstName}
value={firstName} type="name"
isRequired value={firstName}
errorText="Please input your first name." isRequired
error={firstNameError} errorText="Please input your first name."
autoComplete="given-name" error={firstNameError}
/> autoComplete="given-name"
</div> />
<div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24"> </div>
<InputField <div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
label="Last Name" <InputField
onChangeHandler={setLastName} label="Last Name"
type="name" onChangeHandler={setLastName}
value={lastName} type="name"
isRequired value={lastName}
errorText="Please input your last name." isRequired
error={lastNameError} errorText="Please input your last name."
autoComplete="family-name" error={lastNameError}
/> autoComplete="family-name"
</div> />
<div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60"> </div>
<InputField <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
label="Password" <InputField
onChangeHandler={(password: string) => { label="Password"
setPassword(password); onChangeHandler={(password: string) => {
passwordCheck({ setPassword(password);
password, passwordCheck({
setPasswordErrorLength, password,
setPasswordErrorNumber, setPasswordErrorLength,
setPasswordErrorLowerCase, setPasswordErrorNumber,
currentErrorCheck: false setPasswordErrorLowerCase,
}); currentErrorCheck: false,
}} });
type="password" }}
value={password} type="password"
isRequired value={password}
error={ isRequired
passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase error={
} passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase
autoComplete="new-password" }
id="new-password" autoComplete="new-password"
/> id="new-password"
{passwordErrorLength || />
passwordErrorLowerCase || {passwordErrorLength ||
passwordErrorNumber ? ( passwordErrorLowerCase ||
<div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md"> passwordErrorNumber ? (
<div className={`text-gray-400 text-sm mb-1`}> <div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md">
Password should contain at least: <div className={`text-gray-400 text-sm mb-1`}>
</div> Password should contain at least:
<div className="flex flex-row justify-start items-center ml-1"> </div>
{passwordErrorLength ? ( <div className="flex flex-row justify-start items-center ml-1">
<FontAwesomeIcon {passwordErrorLength ? (
icon={faX} <FontAwesomeIcon
className="text-md text-red mr-2.5" icon={faX}
/> className="text-md text-red mr-2.5"
) : ( />
<FontAwesomeIcon ) : (
icon={faCheck} <FontAwesomeIcon
className="text-md text-primary mr-2" icon={faCheck}
/> className="text-md text-primary mr-2"
)} />
<div )}
className={`${ <div
passwordErrorLength ? 'text-gray-400' : 'text-gray-600' className={`${
} text-sm`} passwordErrorLength ? 'text-gray-400' : 'text-gray-600'
> } text-sm`}
14 characters >
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> </div>
<div className="flex flex-row justify-start items-center ml-1"> ) : (
{passwordErrorLowerCase ? ( <div className="py-2"></div>
<FontAwesomeIcon )}
icon={faX} </div>
className="text-md text-red mr-2.5" <div className="flex flex-col items-center justify-center md:p-2 max-h-48 max-w-max mx-auto text-lg px-2 py-3">
/> <Button
) : ( text="Sign Up"
<FontAwesomeIcon loading={isLoading}
icon={faCheck} onButtonPressed={signupErrorCheck}
className="text-md text-primary mr-2" size="lg"
/> />
)} </div>
<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> </div>
<div className="flex flex-col items-center justify-center md:p-2 max-h-48 max-w-max mx-auto text-lg px-2 py-3"> </form>
<Button
text="Sign Up"
loading={isLoading}
onButtonPressed={signupErrorCheck}
size="lg"
/>
</div>
</div>
); );
// Step 4 of the sign up process (download the emergency kit pdf) // Step 4 of the sign up process (download the emergency kit pdf)
const step4 = ( const step4 = (
<div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl"> <form onSubmit={(e) => {e.preventDefault();}}>
<p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary"> <div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
Save your Emergency Kit <p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
</p> Save your Emergency Kit
<div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2"> </p>
<div> <div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
If you get locked out of your account, your Emergency Kit is the only <div>
way to sign in. If you get locked out of your account, your Emergency Kit is the only
way to sign in.
</div>
<div className="mt-3">
We recommend you download it and keep it somewhere safe.
</div>
</div> </div>
<div className="mt-3"> <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
We recommend you download it and keep it somewhere safe. <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
It contains your Secret Key which we cannot access or recover for you if
you lose it.
</div> </div>
</div> <div className="flex flex-row items-center justify-center w-3/4 md:w-full md:p-2 max-h-28 max-w-max mx-auto mt-6 py-1 md:mt-4 text-lg text-center md:text-left">
<div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4"> <Button
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" /> text="Download PDF"
It contains your Secret Key which we cannot access or recover for you if onButtonPressed={async () => {
you lose it. await issueBackupKey({
</div> email,
<div className="flex flex-row items-center justify-center w-3/4 md:w-full md:p-2 max-h-28 max-w-max mx-auto mt-6 py-1 md:mt-4 text-lg text-center md:text-left"> password,
<Button personalName: firstName + ' ' + lastName,
text="Download PDF" setBackupKeyError,
onButtonPressed={async () => { setBackupKeyIssued,
await issueBackupKey({ });
email, const userWorkspaces = await getWorkspaces();
password, const userWorkspace = userWorkspaces[0]._id;
personalName: firstName + ' ' + lastName, router.push('/home/' + userWorkspace);
setBackupKeyError, }}
setBackupKeyIssued size="lg"
}); />
const userWorkspaces = await getWorkspaces(); {/* <div
const userWorkspace = userWorkspaces[0]._id;
router.push('/home/' + userWorkspace);
}}
size="lg"
/>
{/* <div
className="text-l mt-4 text-lg text-gray-400 hover:text-gray-300 duration-200 bg-white/5 px-8 hover:bg-white/10 py-3 rounded-md cursor-pointer" className="text-l mt-4 text-lg text-gray-400 hover:text-gray-300 duration-200 bg-white/5 px-8 hover:bg-white/10 py-3 rounded-md cursor-pointer"
onClick={() => { onClick={() => {
if (localStorage.getItem("projectData.id")) { if (localStorage.getItem("projectData.id")) {
@@ -526,8 +534,9 @@ export default function SignUp() {
> >
Later Later
</div> */} </div> */}
</div>
</div> </div>
</div> </form>
); );
return ( return (