chore(frontend): fixed all eslint errors

frontend/src/pages/password-reset.tsx

@@ -1,21 +1,21 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
+import Button from '@app/components/basic/buttons/Button';
+import InputField from '@app/components/basic/InputField';
+import passwordCheck from '@app/components/utilities/checks/PasswordCheck';
+import Aes256Gcm from '@app/components/utilities/cryptography/aes-256-gcm';
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
 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';
 
+// eslint-disable-next-line new-cap
 const client = new jsrp.client();
 
 export default function PasswordReset() {
@@ -43,7 +43,7 @@ export default function PasswordReset() {
           ciphertext: result.encryptedPrivateKey,
           iv: result.iv,
           tag: result.tag,
-          secret: backupKey,
+          secret: backupKey
         })
       );
       setStep(3);
@@ -59,7 +59,7 @@ export default function PasswordReset() {
       setPasswordErrorLength,
       setPasswordErrorNumber,
       setPasswordErrorLowerCase,
-      errorCheck: false,
+      errorCheck: false
     });
 
     if (!errorCheck) {
@@ -68,36 +68,30 @@ export default function PasswordReset() {
         text: privateKey,
         secret: newPassword
           .slice(0, 32)
-          .padStart(
-            32 +
-              (newPassword.slice(0, 32).length - new Blob([newPassword]).size),
-            '0'
-          ),
+          .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,
+          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,
-              });
+          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');
-              }
+            // if everything works, go the main dashboard page.
+            if (response?.status === 200) {
+              router.push('/login');
             }
-          );
+          });
         }
       );
     }
@@ -105,25 +99,20 @@ export default function PasswordReset() {
 
   // 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'>
+    <div className="bg-bunker flex flex-col items-center w-full py-6 max-w-xs md:max-w-lg 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'>
+      <Image src="/images/envelope.svg" height={262} width={410} alt="verify email" />
+      <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'
+          text="Confirm Email"
           onButtonPressed={async () => {
             const response = await EmailVerifyOnPasswordReset({
               email,
-              code: token,
+              code: token
             });
-            if (response.status == 200) {
+            if (response.status === 200) {
               setVerificationToken((await response.json()).token);
               setStep(2);
             } else {
@@ -131,7 +120,7 @@ export default function PasswordReset() {
               router.push('/email-not-verified');
             }
           }}
-          size='lg'
+          size="lg"
         />
       </div>
     </div>
@@ -139,34 +128,33 @@ export default function PasswordReset() {
 
   // 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'>
+    <div className="bg-bunker flex flex-col items-center w-full pt-6 pb-3 max-w-xs md:max-w-lg 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.
+      <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'>
+      <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'
+          label="Backup Key"
           onChangeHandler={setBackupKey}
-          type='password'
+          type="password"
           value={backupKey}
-          placeholder=''
+          placeholder=""
           isRequired
           error={backupKeyError}
-          errorText='Something is wrong with the backup key'
+          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'>
+      <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'
+            text="Submit Backup Key"
             onButtonPressed={() => getEncryptedKeyHandler()}
-            size='lg'
+            size="lg"
           />
         </div>
       </div>
@@ -175,18 +163,18 @@ export default function PasswordReset() {
 
   // 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'>
+    <div className="bg-bunker flex flex-col items-center w-full pt-6 pb-3 max-w-xs md:max-w-lg 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'>
+      <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'>
+      <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'
+          label="New Password"
           onChangeHandler={(password) => {
             setNewPassword(password);
             passwordCheck({
@@ -194,85 +182,62 @@ export default function PasswordReset() {
               setPasswordErrorLength,
               setPasswordErrorNumber,
               setPasswordErrorLowerCase,
-              errorCheck: false,
+              errorCheck: false
             });
           }}
-          type='password'
+          type="password"
           value={newPassword}
           isRequired
-          error={
-            passwordErrorLength && passwordErrorLowerCase && passwordErrorNumber
-          }
-          autoComplete='new-password'
-          id='new-password'
+          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'>
+        <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={faX} className="text-md text-red mr-2.5" />
             ) : (
-              <FontAwesomeIcon
-                icon={faCheck}
-                className='text-md text-primary mr-2'
-              />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
             )}
-            <div
-              className={`${
-                passwordErrorLength ? 'text-gray-400' : 'text-gray-600'
-              } text-sm`}
-            >
+            <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'>
+          <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={faX} className="text-md text-red mr-2.5" />
             ) : (
-              <FontAwesomeIcon
-                icon={faCheck}
-                className='text-md text-primary mr-2'
-              />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
             )}
             <div
-              className={`${
-                passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'
-              } text-sm`}
+              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'>
+          <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={faX} className="text-md text-red mr-2.5" />
             ) : (
-              <FontAwesomeIcon
-                icon={faCheck}
-                className='text-md text-primary mr-2'
-              />
+              <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
             )}
-            <div
-              className={`${
-                passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'
-              } text-sm`}
-            >
+            <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 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'>
+      <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'
+            text="Submit New Password"
             onButtonPressed={() => resetPasswordHandler()}
-            size='lg'
+            size="lg"
           />
         </div>
       </div>
@@ -280,7 +245,7 @@ export default function PasswordReset() {
   );
 
   return (
-    <div className='bg-bunker-800 h-screen w-full flex flex-col items-center justify-center'>
+    <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}