ref(frontend): update to absolute import

frontend/pages/signup.js

@@ -6,19 +6,19 @@ import Image from "next/image";
 import Link from "next/link";
 import dynamic from "next/dynamic";
 
-import InputField from "../components/basic/InputField";
-import Error from "../components/basic/Error";
-import Button from "../components/basic/buttons/Button";
+import InputField from "~/compoennts/basic/InputField";
+import Error from "~/compoennts/basic/Error";
+import Button from "~/compoennts/basic/buttons/Button";
 import sendVerificationEmail from "./api/auth/SendVerificationEmail";
 import checkEmailVerificationCode from "./api/auth/CheckEmailVerificationCode";
 import completeAccountInformationSignup from "./api/auth/CompleteAccountInformationSignup";
-import Aes256Gcm from "../components/aes-256-gcm";
-import passwordCheck from "../components/utilities/checks/PasswordCheck";
+import Aes256Gcm from "~/compoennts/aes-256-gcm";
+import passwordCheck from "~/compoennts/utilities/checks/PasswordCheck";
 import getWorkspaces from "./api/workspace/getWorkspaces";
-import attemptLogin from "../components/utilities/attemptLogin";
+import attemptLogin from "~/compoennts/utilities/attemptLogin";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faX, faWarning } from "@fortawesome/free-solid-svg-icons";
-import issueBackupKey from "../components/utilities/issueBackupKey";
+import issueBackupKey from "~/compoennts/utilities/issueBackupKey";
 
 const ReactCodeInput = dynamic(import("react-code-input"));
 const nacl = require("tweetnacl");
@@ -73,7 +73,8 @@ export default function SignUp() {
 	const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
 	const [passwordErrorUpperCase, setPasswordErrorUpperCase] = useState(false);
 	const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
-	const [passwordErrorSpecialChar, setPasswordErrorSpecialChar] = useState(false);
+	const [passwordErrorSpecialChar, setPasswordErrorSpecialChar] =
+		useState(false);
 	const [emailError, setEmailError] = useState(false);
 	const [emailErrorMessage, setEmailErrorMessage] = useState("");
 	const [step, setStep] = useState(1);
@@ -108,7 +109,7 @@ export default function SignUp() {
 			// Checking if the code matches the email.
 			const response = await checkEmailVerificationCode(email, code);
 			if (response.status == "200" || code == "111222") {
-				setVerificationToken((await response.json()).token)
+				setVerificationToken((await response.json()).token);
 				setStep(3);
 			} else {
 				setCodeError(true);
@@ -180,7 +181,14 @@ export default function SignUp() {
 
 			const { ciphertext, iv, tag } = Aes256Gcm.encrypt(
 				PRIVATE_KEY,
-				password.slice(0, 32).padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
+				password
+					.slice(0, 32)
+					.padStart(
+						32 +
+							(password.slice(0, 32).length -
+								new Blob([password]).size),
+						"0"
+					)
 			);
 			localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY);
 
@@ -191,19 +199,21 @@ export default function SignUp() {
 				},
 				async () => {
 					client.createVerifier(async (err, result) => {
-						const response = await completeAccountInformationSignup({
-							email,
-							firstName,
-							lastName,
-							organizationName: firstName + "'s organization",
-							publicKey: PUBLIC_KEY,
-							ciphertext,
-							iv,
-							tag,
-							salt: result.salt,
-							verifier: result.verifier,
-							token: verificationToken
-						});
+						const response = await completeAccountInformationSignup(
+							{
+								email,
+								firstName,
+								lastName,
+								organizationName: firstName + "'s organization",
+								publicKey: PUBLIC_KEY,
+								ciphertext,
+								iv,
+								tag,
+								salt: result.salt,
+								verifier: result.verifier,
+								token: verificationToken,
+							}
+						);
 
 						// if everything works, go the main dashboard page.
 						if (!errorCheck && response.status == "200") {
@@ -276,7 +286,11 @@ export default function SignUp() {
 					and acknowledged the Privacy Policy.
 				</p>
 				<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"
+						onButtonPressed={emailCheck}
+						size="lg"
+					/>
 				</div>
 			</div>
 		</div>
@@ -313,7 +327,11 @@ export default function SignUp() {
 				<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"/>
+				<Button
+					text="Verify"
+					onButtonPressed={incrementStep}
+					size="lg"
+				/>
 			</div>
 			<div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
 				{/* <Link href="/login">
@@ -374,37 +392,101 @@ export default function SignUp() {
 					type="password"
 					value={password}
 					isRequired
-					error={passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase}
+					error={
+						passwordErrorLength &&
+						passwordErrorNumber &&
+						passwordErrorLowerCase
+					}
 				/>
-				{(passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber) ? <div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md">
-					<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>
+				{passwordErrorLength ||
+				passwordErrorLowerCase ||
+				passwordErrorNumber ? (
+					<div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md">
+						<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="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="py-2"></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">
-				<Button text="Sign Up" loading={isLoading} onButtonPressed={signupErrorCheck} size="lg" />
+				<Button
+					text="Sign Up"
+					loading={isLoading}
+					onButtonPressed={signupErrorCheck}
+					size="lg"
+				/>
 			</div>
 		</div>
 	);
 
-
 	// Step 4 of the sign up process (download the emergency kit pdf)
 	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">
@@ -412,23 +494,32 @@ export default function SignUp() {
 				Save your Emergency Kit
 			</p>
 			<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">
-				<div>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>
+					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 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">
-				<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.
+				<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 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">
-				<Button 
-					text="Download PDF" 
+				<Button
+					text="Download PDF"
 					onButtonPressed={async () => {
 						await issueBackupKey({
-							email, 
-							password, 
-							personalName: (firstName + " " + lastName),
+							email,
+							password,
+							personalName: firstName + " " + lastName,
 							setBackupKeyError,
-							setBackupKeyIssued
+							setBackupKeyIssued,
 						});
 						router.push("/dashboard/");
 					}}
@@ -476,7 +567,13 @@ export default function SignUp() {
 						/>
 					</div>
 				</Link>
-				{step == 1 ? step1 : step == 2 ? step2 : step == 3 ? step3 : step4}
+				{step == 1
+					? step1
+					: step == 2
+					? step2
+					: step == 3
+					? step3
+					: step4}
 			</div>
 		</div>
 	);