chore(frontend): added rule to seperate out @app imports and linted

frontend/.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
           ],
           // Packages `react` related packages
           ['^react', '^next', '^@?\\w'],
+          ['^@app'],
           // Internal packages.
           ['^~(/.*|$)'],
           // Relative imports

frontend/src/components/RouteGuard.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+
 import { publicPaths } from '@app/const';
 import checkAuth from '@app/pages/api/auth/CheckAuth';
 

frontend/src/components/basic/Layout.tsx

@@ -7,14 +7,6 @@ import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import getOrganizations from '@app/pages/api/organization/getOrgs';
-import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
-import getOrganizationUsers from '@app/pages/api/organization/GetOrgUsers';
-import getUser from '@app/pages/api/user/getUser';
-import addUserToWorkspace from '@app/pages/api/workspace/addUserToWorkspace';
-import createWorkspace from '@app/pages/api/workspace/createWorkspace';
-import getWorkspaces from '@app/pages/api/workspace/getWorkspaces';
-import uploadKeys from '@app/pages/api/workspace/uploadKeys';
 import {
   faBookOpen,
   faFileLines,
@@ -27,6 +19,15 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import getOrganizations from '@app/pages/api/organization/getOrgs';
+import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
+import getOrganizationUsers from '@app/pages/api/organization/GetOrgUsers';
+import getUser from '@app/pages/api/user/getUser';
+import addUserToWorkspace from '@app/pages/api/workspace/addUserToWorkspace';
+import createWorkspace from '@app/pages/api/workspace/createWorkspace';
+import getWorkspaces from '@app/pages/api/workspace/getWorkspaces';
+import uploadKeys from '@app/pages/api/workspace/uploadKeys';
+
 import NavBarDashboard from '../navigation/NavBarDashboard';
 import onboardingCheck from '../utilities/checks/OnboardingCheck';
 import { tempLocalStorage } from '../utilities/checks/tempLocalStorage';

frontend/src/components/basic/dialog/AddApiKeyDialog.tsx

@@ -1,10 +1,11 @@
 import { Fragment, useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import addAPIKey from '@app/pages/api/apiKey/addAPIKey';
 import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dialog, Transition } from '@headlessui/react';
 
+import addAPIKey from '@app/pages/api/apiKey/addAPIKey';
+
 import Button from '../buttons/Button';
 import InputField from '../InputField';
 import ListBox from '../Listbox';

frontend/src/components/basic/dialog/AddIncidentContactDialog.tsx

@@ -1,8 +1,9 @@
 import { Fragment, useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import addIncidentContact from '@app/pages/api/organization/addIncidentContact';
 import { Dialog, Transition } from '@headlessui/react';
 
+import addIncidentContact from '@app/pages/api/organization/addIncidentContact';
+
 import Button from '../buttons/Button';
 import InputField from '../InputField';
 

frontend/src/components/basic/dialog/AddServiceTokenDialog.tsx

@@ -2,12 +2,13 @@ import crypto from 'crypto';
 
 import { Fragment, useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import addServiceToken from '@app/pages/api/serviceToken/addServiceToken';
-import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dialog, Transition } from '@headlessui/react';
 
+import addServiceToken from '@app/pages/api/serviceToken/addServiceToken';
+import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
+
 import {
   decryptAssymmetric,
   encryptSymmetric,

frontend/src/components/basic/table/ApiKeyTable.tsx

@@ -1,6 +1,7 @@
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+
 import deleteAPIKey from '../../../pages/api/apiKey/deleteAPIKey';
 import guidGenerator from '../../utilities/randomId';
 import Button from '../buttons/Button';

frontend/src/components/basic/table/ServiceTokenTable.tsx

@@ -1,6 +1,7 @@
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+
 import deleteServiceToken from '../../../pages/api/serviceToken/deleteServiceToken';
 import guidGenerator from '../../utilities/randomId';
 import Button from '../buttons/Button';

frontend/src/components/basic/table/UserTable.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+
 import deleteUserFromOrganization from '@app/pages/api/organization/deleteUserFromOrganization';
 import changeUserRoleInWorkspace from '@app/pages/api/workspace/changeUserRoleInWorkspace';
 import deleteUserFromWorkspace from '@app/pages/api/workspace/deleteUserFromWorkspace';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 import uploadKeys from '@app/pages/api/workspace/uploadKeys';
-import { faX } from '@fortawesome/free-solid-svg-icons';
 
 import { decryptAssymmetric, encryptAssymmetric } from '../../utilities/cryptography/crypto';
 import guidGenerator from '../../utilities/randomId';

frontend/src/components/billing/Plan.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import StripeRedirect from '@app/pages/api/organization/StripeRedirect';
 
 import { tempLocalStorage } from '../utilities/checks/tempLocalStorage';

frontend/src/components/dashboard/SideBar.tsx

@@ -2,10 +2,11 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
-import SecretVersionList from '@app/ee/components/SecretVersionList';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import SecretVersionList from '@app/ee/components/SecretVersionList';
+
 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
 import CommentField from './CommentField';

frontend/src/components/integrations/Integration.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import Button from '@app/components/basic/buttons/Button';
-import ListBox from '@app/components/basic/Listbox';
 import { faArrowRight, faRotate, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // TODO: This needs to be moved from public folder
 import { contextNetlifyMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
 
+import Button from '@app/components/basic/buttons/Button';
+import ListBox from '@app/components/basic/Listbox';
+
 import deleteIntegration from '../../pages/api/integrations/DeleteIntegration';
 import getIntegrationApps from '../../pages/api/integrations/GetIntegrationApps';
 import updateIntegration from '../../pages/api/integrations/updateIntegration';

frontend/src/components/navigation/NavBarDashboard.tsx

@@ -4,7 +4,6 @@ import { Fragment, useEffect, useMemo, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { TFunction, useTranslation } from 'next-i18next';
-import logout from '@app/pages/api/auth/Logout';
 import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons';
 import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
 import {
@@ -19,6 +18,8 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition } from '@headlessui/react';
 
+import logout from '@app/pages/api/auth/Logout';
+
 import getOrganization from '../../pages/api/organization/GetOrg';
 import getOrganizations from '../../pages/api/organization/getOrgs';
 import getUser from '../../pages/api/user/getUser';

frontend/src/components/navigation/NavHeader.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import getOrganization from '@app/pages/api/organization/GetOrg';
-import getProjectInfo from '@app/pages/api/workspace/getProjectInfo';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import getOrganization from '@app/pages/api/organization/GetOrg';
+import getProjectInfo from '@app/pages/api/workspace/getProjectInfo';
+
 /**
  * This is the component at the top of almost every page.
  * It shows how to navigate to a certain page.

frontend/src/components/signup/CodeInputStep.tsx

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import ReactCodeInput from 'react-code-input';
 import { useTranslation } from 'next-i18next';
+
 import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
 
 import Button from '../basic/buttons/Button';

frontend/src/components/signup/EnterEmailStep.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
+
 import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
 
 import Button from '../basic/buttons/Button';

frontend/src/components/signup/TeamInviteStep.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+
 import addUserToOrg from '@app/pages/api/organization/addUserToOrg';
 import getWorkspaces from '@app/pages/api/workspace/getWorkspaces';
 

frontend/src/components/signup/UserInfoStep.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import completeAccountInformationSignup from '@app/pages/api/auth/CompleteAccountInformationSignup';
 import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import jsrp from 'jsrp';
 import nacl from 'tweetnacl';
 import { encodeBase64 } from 'tweetnacl-util';
 
+import completeAccountInformationSignup from '@app/pages/api/auth/CompleteAccountInformationSignup';
+
 import Button from '../basic/buttons/Button';
 import InputField from '../basic/InputField';
 import attemptLogin from '../utilities/attemptLogin';

frontend/src/components/utilities/attemptLogin.ts

@@ -1,6 +1,9 @@
 /* eslint-disable prefer-destructuring */
 import crypto from 'crypto';
 
+import jsrp from 'jsrp';
+import { SecretDataProps } from 'public/data/frequentInterfaces';
+
 import Aes256Gcm from '@app/components/utilities/cryptography/aes-256-gcm';
 import login1 from '@app/pages/api/auth/Login1';
 import login2 from '@app/pages/api/auth/Login2';
@@ -9,8 +12,6 @@ import getOrganizations from '@app/pages/api/organization/getOrgs';
 import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
 import getUser from '@app/pages/api/user/getUser';
 import uploadKeys from '@app/pages/api/workspace/uploadKeys';
-import jsrp from 'jsrp';
-import { SecretDataProps } from 'public/data/frequentInterfaces';
 
 import { encryptAssymmetric } from './cryptography/crypto';
 import encryptSecrets from './secrets/encryptSecrets';

frontend/src/components/utilities/cryptography/changePassword.ts

@@ -1,7 +1,8 @@
 /* eslint-disable new-cap */
+import jsrp from 'jsrp';
+
 import changePassword2 from '@app/pages/api/auth/ChangePassword2';
 import SRP1 from '@app/pages/api/auth/SRP1';
-import jsrp from 'jsrp';
 
 import Aes256Gcm from './aes-256-gcm';
 

frontend/src/components/utilities/cryptography/issueBackupKey.ts

@@ -1,9 +1,10 @@
 /* eslint-disable new-cap */
 import crypto from 'crypto';
 
+import jsrp from 'jsrp';
+
 import issueBackupPrivateKey from '@app/pages/api/auth/IssueBackupPrivateKey';
 import SRP1 from '@app/pages/api/auth/SRP1';
-import jsrp from 'jsrp';
 
 import generateBackupPDF from '../generateBackupPDF';
 import Aes256Gcm from './aes-256-gcm';

frontend/src/components/utilities/secrets/encryptSecrets.ts

@@ -1,8 +1,9 @@
 import crypto from 'crypto';
 
-import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 import { SecretDataProps } from 'public/data/frequentInterfaces';
 
+import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
+
 import { decryptAssymmetric, encryptSymmetric } from '../cryptography/crypto';
 
 interface EncryptedSecretProps {

frontend/src/ee/components/ActivitySideBar.tsx

@@ -2,11 +2,12 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import getActionData from '@app/ee/api/secrets/GetActionData';
 import patienceDiff from '@app/ee/utilities/findTextDifferences';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
-import { faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import DashboardInputField from '../../components/dashboard/DashboardInputField';
 import {

frontend/src/ee/components/ActivityTable.tsx

@@ -2,10 +2,11 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
-import timeSince from '@app/ee/utilities/timeSince';
 import { faAngleDown, faAngleRight, faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import timeSince from '@app/ee/utilities/timeSince';
+
 import guidGenerator from '../../components/utilities/randomId';
 
 interface PayloadProps {

frontend/src/ee/components/PITRecoverySidebar.tsx

@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Button from '@app/components/basic/buttons/Button';
 import {
   decryptAssymmetric,
@@ -12,8 +15,6 @@ import getProjectSecretShanpshots from '@app/ee/api/secrets/GetProjectSercetShan
 import getSecretSnapshotData from '@app/ee/api/secrets/GetSecretSnapshotData';
 import timeSince from '@app/ee/utilities/timeSince';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
-import { faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface SecretDataProps {
   pos: number;

frontend/src/ee/components/SecretVersionList.tsx

@@ -2,14 +2,15 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import {
   decryptAssymmetric,
   decryptSymmetric
 } from '@app/components/utilities/cryptography/crypto';
 import getSecretVersions from '@app/ee/api/secrets/GetSecretVersions';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
-import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface DecryptedSecretVersionListProps {
   createdAt: string;

frontend/src/pages/_app.tsx

@@ -3,12 +3,13 @@ import { useEffect } from 'react';
 import { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 import { appWithTranslation } from 'next-i18next';
+import { config } from '@fortawesome/fontawesome-svg-core';
+
 import Layout from '@app/components/basic/Layout';
 import NotificationProvider from '@app/components/context/Notifications/NotificationProvider';
 import RouteGuard from '@app/components/RouteGuard';
 import Telemetry from '@app/components/utilities/telemetry/Telemetry';
 import { publicPaths } from '@app/const';
-import { config } from '@fortawesome/fontawesome-svg-core';
 
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import '../styles/globals.css';

frontend/src/pages/activity/[id].tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+
 import Button from '@app/components/basic/buttons/Button';
 import EventFilter from '@app/components/basic/EventFilter';
 import NavHeader from '@app/components/navigation/NavHeader';

frontend/src/pages/dashboard/[id].tsx

@@ -4,6 +4,20 @@ import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import {
+  faArrowDownAZ,
+  faArrowDownZA,
+  faArrowLeft,
+  faCheck,
+  faClockRotateLeft,
+  faEye,
+  faEyeSlash,
+  faFolderOpen,
+  faMagnifyingGlass,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Button from '@app/components/basic/buttons/Button';
 import ListBox from '@app/components/basic/Listbox';
 import BottonRightPopup from '@app/components/basic/popups/BottomRightPopup';
@@ -20,19 +34,6 @@ import { getTranslatedServerSideProps } from '@app/components/utilities/withTran
 import getProjectSercetSnapshotsCount from '@app/ee/api/secrets/GetProjectSercetSnapshotsCount';
 import performSecretRollback from '@app/ee/api/secrets/PerformSecretRollback';
 import PITRecoverySidebar from '@app/ee/components/PITRecoverySidebar';
-import {
-  faArrowDownAZ,
-  faArrowDownZA,
-  faArrowLeft,
-  faCheck,
-  faClockRotateLeft,
-  faEye,
-  faEyeSlash,
-  faFolderOpen,
-  faMagnifyingGlass,
-  faPlus
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import addSecrets from '../api/files/AddSecrets';
 import deleteSecrets from '../api/files/DeleteSecrets';

frontend/src/pages/home/[id].tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck';
-import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faSlack } from '@fortawesome/free-brands-svg-icons';
 import {
@@ -16,6 +14,9 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck';
+import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
+
 import registerUserAction from '../api/userActions/registerUserAction';
 
 type ItemProps = {

frontend/src/pages/integrations/[id].tsx

@@ -4,13 +4,14 @@ import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import frameworkIntegrationOptions from 'public/json/frameworkIntegrations.json';
+
 import ActivateBotDialog from '@app/components/basic/dialog/ActivateBotDialog';
 import CloudIntegrationSection from '@app/components/integrations/CloudIntegrationSection';
 import FrameworkIntegrationSection from '@app/components/integrations/FrameworkIntegrationSection';
 import IntegrationSection from '@app/components/integrations/IntegrationSection';
 import NavHeader from '@app/components/navigation/NavHeader';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-import frameworkIntegrationOptions from 'public/json/frameworkIntegrations.json';
 
 import {
   decryptAssymmetric,

frontend/src/pages/login.tsx

@@ -4,14 +4,15 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Button from '@app/components/basic/buttons/Button';
 import Error from '@app/components/basic/Error';
 import InputField from '@app/components/basic/InputField';
 import ListBox from '@app/components/basic/Listbox';
 import attemptLogin from '@app/components/utilities/attemptLogin';
 import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
-import { faWarning } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import getWorkspaces from './api/workspace/getWorkspaces';
 

frontend/src/pages/noprojects.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
+
 import Button from '@app/components/basic/buttons/Button';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
 

frontend/src/pages/password-reset.tsx

@@ -1,15 +1,16 @@
 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 '@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 EmailVerifyOnPasswordReset from './api/auth/EmailVerifyOnPasswordReset';
 import getBackupEncryptedPrivateKey from './api/auth/getBackupEncryptedPrivateKey';

frontend/src/pages/settings/billing/[id].tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useTranslation } from 'next-i18next';
+
 import Plan from '@app/components/billing/Plan';
 import NavHeader from '@app/components/navigation/NavHeader';
 import { STRIPE_PRODUCT_PRO, STRIPE_PRODUCT_STARTER } from '@app/components/utilities/config';

frontend/src/pages/settings/org/[id].tsx

@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faCheck, faMagnifyingGlass, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Button from '@app/components/basic/buttons/Button';
 import AddIncidentContactDialog from '@app/components/basic/dialog/AddIncidentContactDialog';
 import AddUserDialog from '@app/components/basic/dialog/AddUserDialog';
@@ -11,8 +14,6 @@ import UserTable from '@app/components/basic/table/UserTable';
 import NavHeader from '@app/components/navigation/NavHeader';
 import guidGenerator from '@app/components/utilities/randomId';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-import { faCheck, faMagnifyingGlass, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import addUserToOrg from '../../api/organization/addUserToOrg';
 import deleteIncidentContact from '../../api/organization/deleteIncidentContact';

frontend/src/pages/settings/personal/[id].tsx

@@ -2,6 +2,9 @@ import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faCheck, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Button from '@app/components/basic/buttons/Button';
 import InputField from '@app/components/basic/InputField';
 import ListBox from '@app/components/basic/Listbox';
@@ -11,8 +14,6 @@ import passwordCheck from '@app/components/utilities/checks/PasswordCheck';
 import changePassword from '@app/components/utilities/cryptography/changePassword';
 import issueBackupKey from '@app/components/utilities/cryptography/issueBackupKey';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-import { faCheck, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import AddApiKeyDialog from '../../../components/basic/dialog/AddApiKeyDialog';
 import getAPIKeys from '../../api/apiKey/getAPIKeys';

frontend/src/pages/settings/project/[id].tsx

@@ -2,6 +2,9 @@ import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faCheck, faCopy, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Button from '@app/components/basic/buttons/Button';
 import AddServiceTokenDialog from '@app/components/basic/dialog/AddServiceTokenDialog';
 import InputField from '@app/components/basic/InputField';
@@ -11,8 +14,6 @@ import NavHeader from '@app/components/navigation/NavHeader';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
 import deleteEnvironment from '@app/pages/api/environments/deleteEnvironment';
 import updateEnvironment from '@app/pages/api/environments/updateEnvironment';
-import { faCheck, faCopy, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import createEnvironment from '../../api/environments/createEnvironment';
 import getServiceTokens from '../../api/serviceToken/getServiceTokens';

frontend/src/pages/signup.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+
 import CodeInputStep from '@app/components/signup/CodeInputStep';
 import DownloadBackupPDF from '@app/components/signup/DonwloadBackupPDFStep';
 import EnterEmailStep from '@app/components/signup/EnterEmailStep';

frontend/src/pages/signupinvite.tsx

@@ -5,12 +5,6 @@ import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import Button from '@app/components/basic/buttons/Button';
-import InputField from '@app/components/basic/InputField';
-import attemptLogin from '@app/components/utilities/attemptLogin';
-import passwordCheck from '@app/components/utilities/checks/PasswordCheck';
-import Aes256Gcm from '@app/components/utilities/cryptography/aes-256-gcm';
-import issueBackupKey from '@app/components/utilities/cryptography/issueBackupKey';
 import { faCheck, faWarning, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import jsrp from 'jsrp';
@@ -18,6 +12,13 @@ import queryString from 'query-string';
 import nacl from 'tweetnacl';
 import { encodeBase64 } from 'tweetnacl-util';
 
+import Button from '@app/components/basic/buttons/Button';
+import InputField from '@app/components/basic/InputField';
+import attemptLogin from '@app/components/utilities/attemptLogin';
+import passwordCheck from '@app/components/utilities/checks/PasswordCheck';
+import Aes256Gcm from '@app/components/utilities/cryptography/aes-256-gcm';
+import issueBackupKey from '@app/components/utilities/cryptography/issueBackupKey';
+
 import completeAccountInformationSignupInvite from './api/auth/CompleteAccountInformationSignupInvite';
 import verifySignupInvite from './api/auth/VerifySignupInvite';
 

frontend/src/pages/users/[id].tsx

@@ -3,14 +3,15 @@ import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faMagnifyingGlass, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Button from '@app/components/basic/buttons/Button';
 import AddProjectMemberDialog from '@app/components/basic/dialog/AddProjectMemberDialog';
 import UserTable from '@app/components/basic/table/UserTable';
 import NavHeader from '@app/components/navigation/NavHeader';
 import guidGenerator from '@app/components/utilities/randomId';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-import { faMagnifyingGlass, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import {
   decryptAssymmetric,

frontend/src/pages/verify-email.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
+
 import Button from '@app/components/basic/buttons/Button';
 import InputField from '@app/components/basic/InputField';
 import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';