refactor(web): use absolute imports with aliases (#2100)

* refactor(web): use absolute imports with aliases

Refactors all of the TS/JS frontend to utilise absolute imports along with import aliases.
Each of the paths within `src` are represented with their own alias:

* @assets
* @components
* @constants (new)
* @hooks
* @layouts
* @models
* @services
* @themes
* @utils
* @views

`Routes.ts` and `constant.ts` have been relocated to the constants directory for consistency.

web/.cracorc.js

@@ -1,5 +1,18 @@
+const isCoverage = process.env.COVERAGE === 'true'
+const babelPlugins = isCoverage ? [ "babel-plugin-istanbul" ] : []
+
 module.exports = {
     babel: {
-        plugins: [ "babel-plugin-istanbul" ]
+        plugins: babelPlugins,
-    }
+    },
+    plugins: [
+        {
+            plugin: require("craco-alias"),
+            options: {
+                source: "tsconfig",
+                baseUrl: "./src",
+                tsConfigPath: "./tsconfig.aliases.json",
+            }
+        }
+    ]
 };

web/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.1.2",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-regular-svg-icons": "5.15.3",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
@@ -46,10 +45,10 @@
   },
   "scripts": {
     "start": "craco start",
-    "build": "react-scripts build",
+    "build": "craco build",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --fix",
-    "coverage": "craco build",
+    "coverage": "COVERAGE=true craco build",
-    "test": "react-scripts test --coverage --no-cache",
+    "test": "craco test --coverage --no-cache",
     "report": "nyc report -r clover -r json -r lcov -r text",
     "eject": "react-scripts eject"
   },
@@ -72,6 +71,8 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^6.1.2",
+    "craco-alias": "^3.0.1",
     "eslint-formatter-rdjson": "1.0.5"
   }
 }

web/src/App.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { shallow } from "enzyme";
 
-import App from "./App";
+import App from "@root/App";
 
 it("renders without crashing", () => {
     shallow(<App />);

web/src/App.tsx

@@ -4,9 +4,7 @@ import { config as faConfig } from "@fortawesome/fontawesome-svg-core";
 import { CssBaseline, ThemeProvider } from "@material-ui/core";
 import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
 
-import NotificationBar from "./components/NotificationBar";
+import NotificationBar from "@components/NotificationBar";
-import NotificationsContext from "./hooks/NotificationsContext";
-import { Notification } from "./models/Notifications";
 import {
     FirstFactorRoute,
     ResetPasswordStep2Route,
@@ -15,17 +13,19 @@ import {
     RegisterOneTimePasswordRoute,
     LogoutRoute,
     ConsentRoute,
-} from "./Routes";
+} from "@constants/Routes";
-import * as themes from "./themes";
+import NotificationsContext from "@hooks/NotificationsContext";
-import { getBasePath } from "./utils/BasePath";
+import { Notification } from "@models/Notifications";
-import { getRememberMe, getResetPassword, getTheme } from "./utils/Configuration";
+import * as themes from "@themes/index";
-import RegisterOneTimePassword from "./views/DeviceRegistration/RegisterOneTimePassword";
+import { getBasePath } from "@utils/BasePath";
-import RegisterSecurityKey from "./views/DeviceRegistration/RegisterSecurityKey";
+import { getRememberMe, getResetPassword, getTheme } from "@utils/Configuration";
-import ConsentView from "./views/LoginPortal/ConsentView/ConsentView";
+import RegisterOneTimePassword from "@views/DeviceRegistration/RegisterOneTimePassword";
-import LoginPortal from "./views/LoginPortal/LoginPortal";
+import RegisterSecurityKey from "@views/DeviceRegistration/RegisterSecurityKey";
-import SignOut from "./views/LoginPortal/SignOut/SignOut";
+import ConsentView from "@views/LoginPortal/ConsentView/ConsentView";
-import ResetPasswordStep1 from "./views/ResetPassword/ResetPasswordStep1";
+import LoginPortal from "@views/LoginPortal/LoginPortal";
-import ResetPasswordStep2 from "./views/ResetPassword/ResetPasswordStep2";
+import SignOut from "@views/LoginPortal/SignOut/SignOut";
+import ResetPasswordStep1 from "@views/ResetPassword/ResetPasswordStep1";
+import ResetPasswordStep2 from "@views/ResetPassword/ResetPasswordStep2";
 
 import "@fortawesome/fontawesome-svg-core/styles.css";
 

web/src/components/AppStoreBadges.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import ReactDOM from "react-dom";
 
-import AppStoreBadges from "./AppStoreBadges";
+import AppStoreBadges from "@components/AppStoreBadges";
 
 it("renders without crashing", () => {
     const div = document.createElement("div");

web/src/components/AppStoreBadges.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 import { Link } from "@material-ui/core";
 
-import AppleStore from "../assets/images/applestore-badge.svg";
+import AppleStore from "@assets/images/applestore-badge.svg";
-import GooglePlay from "../assets/images/googleplay-badge.svg";
+import GooglePlay from "@assets/images/googleplay-badge.svg";
 
 export interface Props {
     iconSize: number;

web/src/components/ColoredSnackbarContent.test.tsx

@@ -5,7 +5,7 @@ import { expect } from "chai";
 import { mount, shallow } from "enzyme";
 import ReactDOM from "react-dom";
 
-import ColoredSnackbarContent from "./ColoredSnackbarContent";
+import ColoredSnackbarContent from "@components/ColoredSnackbarContent";
 
 it("renders without crashing", () => {
     const div = document.createElement("div");

web/src/components/FailureIcon.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import FailureIcon from "./FailureIcon";
+import FailureIcon from "@components/FailureIcon";
 
 it("renders without crashing", () => {
     mount(<FailureIcon />);

web/src/components/FingerTouchIcon.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import FingerTouchIcon from "./FingerTouchIcon";
+import FingerTouchIcon from "@components/FingerTouchIcon";
 
 it("renders without crashing", () => {
     mount(<FingerTouchIcon size={32} />);

web/src/components/FingerTouchIcon.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import classnames from "classnames";
 
-import style from "./FingerTouchIcon.module.css";
+import style from "@components/FingerTouchIcon.module.css";
 
 export interface Props {
     size: number;

web/src/components/FixedTextField.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import FixedTextField from "./FixedTextField";
+import FixedTextField from "@components/FixedTextField";
 
 it("renders without crashing", () => {
     mount(<FixedTextField />);

web/src/components/InformationIcon.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import InformationIcon from "./InformationIcon";
+import InformationIcon from "@components/InformationIcon";
 
 it("renders without crashing", () => {
     mount(<InformationIcon />);

web/src/components/LinearProgressBar.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import LinearProgressBar from "./LinearProgressBar";
+import LinearProgressBar from "@components/LinearProgressBar";
 
 it("renders without crashing", () => {
     mount(<LinearProgressBar value={40} />);

web/src/components/NotificationBar.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import NotificationBar from "./NotificationBar";
+import NotificationBar from "@components/NotificationBar";
 
 it("renders without crashing", () => {
     mount(<NotificationBar onClose={() => {}} />);

web/src/components/NotificationBar.tsx

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from "react";
 
 import { Snackbar } from "@material-ui/core";
 
-import { useNotifications } from "../hooks/NotificationsContext";
+import ColoredSnackbarContent from "@components/ColoredSnackbarContent";
-import { Notification } from "../models/Notifications";
+import { useNotifications } from "@hooks/NotificationsContext";
-import ColoredSnackbarContent from "./ColoredSnackbarContent";
+import { Notification } from "@models/Notifications";
 
 export interface Props {
     onClose: () => void;

web/src/components/PieChartIcon.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import PieChartIcon from "./PieChartIcon";
+import PieChartIcon from "@components/PieChartIcon";
 
 it("renders without crashing", () => {
     mount(<PieChartIcon progress={40} />);

web/src/components/PushNotificationIcon.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import PushNotificationIcon from "./PushNotificationIcon";
+import PushNotificationIcon from "@components/PushNotificationIcon";
 
 it("renders without crashing", () => {
     mount(<PushNotificationIcon width={32} height={32} />);

web/src/components/PushNotificationIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { useIntermittentClass } from "../hooks/IntermittentClass";
+import style from "@components/PushNotificationIcon.module.css";
-import style from "./PushNotificationIcon.module.css";
+import { useIntermittentClass } from "@hooks/IntermittentClass";
 
 export interface Props {
     width: number;

web/src/components/SuccessIcon.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import SuccessIcon from "./SuccessIcon";
+import SuccessIcon from "@components/SuccessIcon";
 
 it("renders without crashing", () => {
     mount(<SuccessIcon />);

web/src/components/TimerIcon.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { mount } from "enzyme";
 
-import TimerIcon from "./TimerIcon";
+import TimerIcon from "@components/TimerIcon";
 
 it("renders without crashing", () => {
     mount(<TimerIcon width={32} height={32} />);

web/src/components/TimerIcon.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-import PieChartIcon from "./PieChartIcon";
+import PieChartIcon from "@components/PieChartIcon";
 
 export interface Props {
     width: number;

web/src/hooks/Configuration.ts

@@ -1,5 +1,5 @@
-import { getConfiguration } from "../services/Configuration";
+import { useRemoteCall } from "@hooks/RemoteCall";
-import { useRemoteCall } from "./RemoteCall";
+import { getConfiguration } from "@services/Configuration";
 
 export function useConfiguration() {
     return useRemoteCall(getConfiguration, []);

web/src/hooks/Consent.ts

@@ -1,5 +1,5 @@
-import { getRequestedScopes } from "../services/Consent";
+import { useRemoteCall } from "@hooks/RemoteCall";
-import { useRemoteCall } from "./RemoteCall";
+import { getRequestedScopes } from "@services/Consent";
 
 export function useRequestedScopes() {
     return useRemoteCall(getRequestedScopes, []);

web/src/hooks/NotificationsContext.ts

@@ -1,7 +1,7 @@
 import { useCallback, createContext, useContext } from "react";
 
-import { Level } from "../components/ColoredSnackbarContent";
+import { Level } from "@components/ColoredSnackbarContent";
-import { Notification } from "../models/Notifications";
+import { Notification } from "@models/Notifications";
 
 const defaultOptions = {
     timeout: 5,

web/src/hooks/State.ts

@@ -1,5 +1,5 @@
-import { getState } from "../services/State";
+import { useRemoteCall } from "@hooks/RemoteCall";
-import { useRemoteCall } from "./RemoteCall";
+import { getState } from "@services/State";
 
 export function useAutheliaState() {
     return useRemoteCall(getState, []);

web/src/hooks/UserInfo.ts

@@ -1,5 +1,5 @@
-import { getUserPreferences } from "../services/UserPreferences";
+import { useRemoteCall } from "@hooks/RemoteCall";
-import { useRemoteCall } from "./RemoteCall";
+import { getUserPreferences } from "@services/UserPreferences";
 
 export function useUserPreferences() {
     return useRemoteCall(getUserPreferences, []);

web/src/index.tsx

@@ -1,12 +1,12 @@
-import "./utils/AssetPath";
+import "@utils/AssetPath";
 
 import React from "react";
 
 import ReactDOM from "react-dom";
 
-import "./index.css";
+import "@root/index.css";
-import App from "./App";
+import App from "@root/App";
-import * as serviceWorker from "./serviceWorker";
+import * as serviceWorker from "@root/serviceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));
 

web/src/layouts/LoginLayout.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from "react";
 import { Grid, makeStyles, Container, Typography, Link } from "@material-ui/core";
 import { grey } from "@material-ui/core/colors";
 
-import { ReactComponent as UserSvg } from "../assets/images/user.svg";
+import { ReactComponent as UserSvg } from "@assets/images/user.svg";
 
 export interface Props {
     id?: string;

web/src/models/Configuration.ts

@@ -1,4 +1,4 @@
-import { SecondFactorMethod } from "./Methods";
+import { SecondFactorMethod } from "@models/Methods";
 
 export interface Configuration {
     available_methods: Set<SecondFactorMethod>;

web/src/models/Notifications.ts

@@ -1,4 +1,4 @@
-import { Level } from "../components/ColoredSnackbarContent";
+import { Level } from "@components/ColoredSnackbarContent";
 
 export interface Notification {
     message: string;

web/src/models/UserInfo.ts

@@ -1,4 +1,4 @@
-import { SecondFactorMethod } from "./Methods";
+import { SecondFactorMethod } from "@models/Methods";
 
 export interface UserInfo {
     display_name: string;

web/src/services/Api.ts

@@ -1,6 +1,6 @@
 import { AxiosResponse } from "axios";
 
-import { getBasePath } from "../utils/BasePath";
+import { getBasePath } from "@utils/BasePath";
 
 const basePath = getBasePath();
 

web/src/services/Client.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-import { ServiceResponse, hasServiceError, toData } from "./Api";
+import { ServiceResponse, hasServiceError, toData } from "@services/Api";
 
 export async function PostWithOptionalResponse<T = undefined>(path: string, body?: any): Promise<T | undefined> {
     const res = await axios.post<ServiceResponse<T>>(path, body);

web/src/services/Configuration.ts

@@ -1,7 +1,7 @@
-import { Configuration } from "../models/Configuration";
+import { Configuration } from "@models/Configuration";
-import { ConfigurationPath } from "./Api";
+import { ConfigurationPath } from "@services/Api";
-import { Get } from "./Client";
+import { Get } from "@services/Client";
-import { toEnum, Method2FA } from "./UserPreferences";
+import { toEnum, Method2FA } from "@services/UserPreferences";
 
 interface ConfigurationPayload {
     available_methods: Method2FA[];

web/src/services/Consent.ts

@@ -1,5 +1,5 @@
-import { ConsentPath } from "./Api";
+import { ConsentPath } from "@services/Api";
-import { Post, Get } from "./Client";
+import { Post, Get } from "@services/Client";
 
 interface ConsentPostRequestBody {
     client_id: string;

web/src/services/FirstFactor.ts

@@ -1,6 +1,6 @@
-import { FirstFactorPath } from "./Api";
+import { FirstFactorPath } from "@services/Api";
-import { PostWithOptionalResponse } from "./Client";
+import { PostWithOptionalResponse } from "@services/Client";
-import { SignInResponse } from "./SignIn";
+import { SignInResponse } from "@services/SignIn";
 
 interface PostFirstFactorBody {
     username: string;

web/src/services/OneTimePassword.ts

@@ -1,6 +1,6 @@
-import { CompleteTOTPSignInPath } from "./Api";
+import { CompleteTOTPSignInPath } from "@services/Api";
-import { PostWithOptionalResponse } from "./Client";
+import { PostWithOptionalResponse } from "@services/Client";
-import { SignInResponse } from "./SignIn";
+import { SignInResponse } from "@services/SignIn";
 
 interface CompleteU2FSigninBody {
     token: string;

web/src/services/PushNotification.ts

@@ -1,6 +1,6 @@
-import { CompletePushNotificationSignInPath } from "./Api";
+import { CompletePushNotificationSignInPath } from "@services/Api";
-import { PostWithOptionalResponse } from "./Client";
+import { PostWithOptionalResponse } from "@services/Client";
-import { SignInResponse } from "./SignIn";
+import { SignInResponse } from "@services/SignIn";
 
 interface CompleteU2FSigninBody {
     targetURL?: string;

web/src/services/RegisterDevice.ts

@@ -6,8 +6,8 @@ import {
     InitiateU2FRegistrationPath,
     CompleteU2FRegistrationStep1Path,
     CompleteU2FRegistrationStep2Path,
-} from "./Api";
+} from "@services/Api";
-import { Post, PostWithOptionalResponse } from "./Client";
+import { Post, PostWithOptionalResponse } from "@services/Client";
 
 export async function initiateTOTPRegistrationProcess() {
     await PostWithOptionalResponse(InitiateTOTPRegistrationPath);

web/src/services/ResetPassword.ts

@@ -1,5 +1,5 @@
-import { InitiateResetPasswordPath, CompleteResetPasswordPath, ResetPasswordPath } from "./Api";
+import { InitiateResetPasswordPath, CompleteResetPasswordPath, ResetPasswordPath } from "@services/Api";
-import { PostWithOptionalResponse } from "./Client";
+import { PostWithOptionalResponse } from "@services/Client";
 
 export async function initiateResetPasswordProcess(username: string) {
     return PostWithOptionalResponse(InitiateResetPasswordPath, { username });

web/src/services/SecurityKey.ts

@@ -1,8 +1,8 @@
 import u2fApi from "u2f-api";
 
-import { InitiateU2FSignInPath, CompleteU2FSignInPath } from "./Api";
+import { InitiateU2FSignInPath, CompleteU2FSignInPath } from "@services/Api";
-import { Post, PostWithOptionalResponse } from "./Client";
+import { Post, PostWithOptionalResponse } from "@services/Client";
-import { SignInResponse } from "./SignIn";
+import { SignInResponse } from "@services/SignIn";
 
 interface InitiateU2FSigninResponse {
     appId: string;

web/src/services/SignOut.ts

@@ -1,5 +1,5 @@
-import { LogoutPath } from "./Api";
+import { LogoutPath } from "@services/Api";
-import { PostWithOptionalResponse } from "./Client";
+import { PostWithOptionalResponse } from "@services/Client";
 
 export type SignOutResponse = { safeTargetURL: boolean } | undefined;
 

web/src/services/State.ts

@@ -1,5 +1,5 @@
-import { StatePath } from "./Api";
+import { StatePath } from "@services/Api";
-import { Get } from "./Client";
+import { Get } from "@services/Client";
 
 export enum AuthenticationLevel {
     Unauthenticated = 0,

web/src/services/UserPreferences.ts

@@ -1,7 +1,7 @@
-import { SecondFactorMethod } from "../models/Methods";
+import { SecondFactorMethod } from "@models/Methods";
-import { UserInfo } from "../models/UserInfo";
+import { UserInfo } from "@models/UserInfo";
-import { UserInfoPath, UserInfo2FAMethodPath } from "./Api";
+import { UserInfoPath, UserInfo2FAMethodPath } from "@services/Api";
-import { Get, PostWithOptionalResponse } from "./Client";
+import { Get, PostWithOptionalResponse } from "@services/Client";
 
 export type Method2FA = "u2f" | "totp" | "mobile_push";
 

web/src/themes/index.ts

@@ -13,6 +13,6 @@ declare module "@material-ui/core/styles/createMuiTheme" {
     }
 }
 
-export { default as Light } from "./Light";
+export { default as Light } from "@themes/Light";
-export { default as Dark } from "./Dark";
+export { default as Dark } from "@themes/Dark";
-export { default as Grey } from "./Grey";
+export { default as Grey } from "@themes/Grey";

web/src/utils/AssetPath.ts

@@ -1,4 +1,4 @@
-import { getBasePath } from "./BasePath";
+import { getBasePath } from "@utils/BasePath";
 
 __webpack_public_path__ = "/";
 

web/src/utils/BasePath.ts

@@ -1,4 +1,4 @@
-import { getEmbeddedVariable } from "./Configuration";
+import { getEmbeddedVariable } from "@utils/Configuration";
 
 export function getBasePath() {
     return getEmbeddedVariable("basepath");

web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx

@@ -8,13 +8,13 @@ import classnames from "classnames";
 import QRCode from "qrcode.react";
 import { useHistory, useLocation } from "react-router";
 
-import AppStoreBadges from "../../components/AppStoreBadges";
+import AppStoreBadges from "@components/AppStoreBadges";
-import { GoogleAuthenticator } from "../../constants";
+import { GoogleAuthenticator } from "@constants/constants";
-import { useNotifications } from "../../hooks/NotificationsContext";
+import { FirstFactorRoute } from "@constants/Routes";
-import LoginLayout from "../../layouts/LoginLayout";
+import { useNotifications } from "@hooks/NotificationsContext";
-import { FirstFactorRoute } from "../../Routes";
+import LoginLayout from "@layouts/LoginLayout";
-import { completeTOTPRegistrationProcess } from "../../services/RegisterDevice";
+import { completeTOTPRegistrationProcess } from "@services/RegisterDevice";
-import { extractIdentityToken } from "../../utils/IdentityToken";
+import { extractIdentityToken } from "@utils/IdentityToken";
 
 const RegisterOneTimePassword = function () {
     const style = useStyles();

web/src/views/DeviceRegistration/RegisterSecurityKey.tsx

@@ -4,15 +4,12 @@ import { makeStyles, Typography, Button } from "@material-ui/core";
 import { useHistory, useLocation } from "react-router";
 import u2fApi from "u2f-api";
 
-import FingerTouchIcon from "../../components/FingerTouchIcon";
+import FingerTouchIcon from "@components/FingerTouchIcon";
-import { useNotifications } from "../../hooks/NotificationsContext";
+import { useNotifications } from "@hooks/NotificationsContext";
-import LoginLayout from "../../layouts/LoginLayout";
+import LoginLayout from "@layouts/LoginLayout";
-import { FirstFactorPath } from "../../services/Api";
+import { FirstFactorPath } from "@services/Api";
-import {
+import { completeU2FRegistrationProcessStep1, completeU2FRegistrationProcessStep2 } from "@services/RegisterDevice";
-    completeU2FRegistrationProcessStep1,
+import { extractIdentityToken } from "@utils/IdentityToken";
-    completeU2FRegistrationProcessStep2,
-} from "../../services/RegisterDevice";
-import { extractIdentityToken } from "../../utils/IdentityToken";
 
 const RegisterSecurityKey = function () {
     const style = useStyles();

web/src/views/LoginPortal/Authenticated.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Typography, makeStyles } from "@material-ui/core";
 
-import SuccessIcon from "../../components/SuccessIcon";
+import SuccessIcon from "@components/SuccessIcon";
 
 const Authenticated = function () {
     const classes = useStyles();

web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx

@@ -3,9 +3,9 @@ import React from "react";
 import { Grid, makeStyles, Button } from "@material-ui/core";
 import { useHistory } from "react-router";
 
-import LoginLayout from "../../../layouts/LoginLayout";
+import { LogoutRoute as SignOutRoute } from "@constants/Routes";
-import { LogoutRoute as SignOutRoute } from "../../../Routes";
+import LoginLayout from "@layouts/LoginLayout";
-import Authenticated from "../Authenticated";
+import Authenticated from "@views/LoginPortal/Authenticated";
 
 export interface Props {
     name: string;

web/src/views/LoginPortal/ConsentView/ConsentView.tsx

@@ -4,12 +4,12 @@ import { Button, Grid, List, ListItem, ListItemIcon, ListItemText, Tooltip, make
 import { AccountBox, CheckBox, Contacts, Drafts, Group } from "@material-ui/icons";
 import { useHistory } from "react-router-dom";
 
-import { useRequestedScopes } from "../../../hooks/Consent";
+import { useRequestedScopes } from "@hooks/Consent";
-import { useNotifications } from "../../../hooks/NotificationsContext";
+import { useNotifications } from "@hooks/NotificationsContext";
-import { useRedirector } from "../../../hooks/Redirector";
+import { useRedirector } from "@hooks/Redirector";
-import LoginLayout from "../../../layouts/LoginLayout";
+import LoginLayout from "@layouts/LoginLayout";
-import { acceptConsent, rejectConsent } from "../../../services/Consent";
+import { acceptConsent, rejectConsent } from "@services/Consent";
-import LoadingPage from "../../LoadingPage/LoadingPage";
+import LoadingPage from "@views/LoadingPage/LoadingPage";
 
 export interface Props {}
 

web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx

@@ -4,13 +4,13 @@ import { makeStyles, Grid, Button, FormControlLabel, Checkbox, Link } from "@mat
 import classnames from "classnames";
 import { useHistory } from "react-router";
 
-import FixedTextField from "../../../components/FixedTextField";
+import FixedTextField from "@components/FixedTextField";
-import { useNotifications } from "../../../hooks/NotificationsContext";
+import { ResetPasswordStep1Route } from "@constants/Routes";
-import { useRedirectionURL } from "../../../hooks/RedirectionURL";
+import { useNotifications } from "@hooks/NotificationsContext";
-import { useRequestMethod } from "../../../hooks/RequestMethod";
+import { useRedirectionURL } from "@hooks/RedirectionURL";
-import LoginLayout from "../../../layouts/LoginLayout";
+import { useRequestMethod } from "@hooks/RequestMethod";
-import { ResetPasswordStep1Route } from "../../../Routes";
+import LoginLayout from "@layouts/LoginLayout";
-import { postFirstFactor } from "../../../services/FirstFactor";
+import { postFirstFactor } from "@services/FirstFactor";
 
 export interface Props {
     disabled: boolean;

web/src/views/LoginPortal/LoginPortal.tsx

@@ -2,14 +2,6 @@ import React, { useEffect, Fragment, ReactNode, useState, useCallback } from "re
 
 import { Switch, Route, Redirect, useHistory, useLocation } from "react-router";
 
-import { useConfiguration } from "../../hooks/Configuration";
-import { useNotifications } from "../../hooks/NotificationsContext";
-import { useRedirectionURL } from "../../hooks/RedirectionURL";
-import { useRedirector } from "../../hooks/Redirector";
-import { useRequestMethod } from "../../hooks/RequestMethod";
-import { useAutheliaState } from "../../hooks/State";
-import { useUserPreferences as userUserInfo } from "../../hooks/UserInfo";
-import { SecondFactorMethod } from "../../models/Methods";
 import {
     FirstFactorRoute,
     SecondFactorRoute,
@@ -17,12 +9,20 @@ import {
     SecondFactorPushRoute,
     SecondFactorU2FRoute,
     AuthenticatedRoute,
-} from "../../Routes";
+} from "@constants/Routes";
-import { AuthenticationLevel } from "../../services/State";
+import { useConfiguration } from "@hooks/Configuration";
-import LoadingPage from "../LoadingPage/LoadingPage";
+import { useNotifications } from "@hooks/NotificationsContext";
-import AuthenticatedView from "./AuthenticatedView/AuthenticatedView";
+import { useRedirectionURL } from "@hooks/RedirectionURL";
-import FirstFactorForm from "./FirstFactor/FirstFactorForm";
+import { useRedirector } from "@hooks/Redirector";
-import SecondFactorForm from "./SecondFactor/SecondFactorForm";
+import { useRequestMethod } from "@hooks/RequestMethod";
+import { useAutheliaState } from "@hooks/State";
+import { useUserPreferences as userUserInfo } from "@hooks/UserInfo";
+import { SecondFactorMethod } from "@models/Methods";
+import { AuthenticationLevel } from "@services/State";
+import LoadingPage from "@views/LoadingPage/LoadingPage";
+import AuthenticatedView from "@views/LoginPortal/AuthenticatedView/AuthenticatedView";
+import FirstFactorForm from "@views/LoginPortal/FirstFactor/FirstFactorForm";
+import SecondFactorForm from "@views/LoginPortal/SecondFactor/SecondFactorForm";
 
 export interface Props {
     rememberMe: boolean;

web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx

@@ -3,8 +3,8 @@ import React, { ReactNode, Fragment } from "react";
 import { makeStyles, Typography, Link, useTheme } from "@material-ui/core";
 import classnames from "classnames";
 
-import InformationIcon from "../../../components/InformationIcon";
+import InformationIcon from "@components/InformationIcon";
-import Authenticated from "../Authenticated";
+import Authenticated from "@views/LoginPortal/Authenticated";
 
 export enum State {
     ALREADY_AUTHENTICATED = 1,

web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx

@@ -11,10 +11,10 @@ import {
     useTheme,
 } from "@material-ui/core";
 
-import FingerTouchIcon from "../../../components/FingerTouchIcon";
+import FingerTouchIcon from "@components/FingerTouchIcon";
-import PushNotificationIcon from "../../../components/PushNotificationIcon";
+import PushNotificationIcon from "@components/PushNotificationIcon";
-import TimerIcon from "../../../components/TimerIcon";
+import TimerIcon from "@components/TimerIcon";
-import { SecondFactorMethod } from "../../../models/Methods";
+import { SecondFactorMethod } from "@models/Methods";
 
 export interface Props {
     open: boolean;

web/src/views/LoginPortal/SecondFactor/OTPDial.tsx

@@ -4,10 +4,10 @@ import { makeStyles } from "@material-ui/core";
 import classnames from "classnames";
 import OtpInput from "react-otp-input";
 
-import SuccessIcon from "../../../components/SuccessIcon";
+import SuccessIcon from "@components/SuccessIcon";
-import TimerIcon from "../../../components/TimerIcon";
+import TimerIcon from "@components/TimerIcon";
-import IconWithContext from "./IconWithContext";
+import IconWithContext from "@views/LoginPortal/SecondFactor/IconWithContext";
-import { State } from "./OneTimePasswordMethod";
+import { State } from "@views/LoginPortal/SecondFactor/OneTimePasswordMethod";
 
 export interface Props {
     passcode: string;

web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useCallback } from "react";
 
-import { useRedirectionURL } from "../../../hooks/RedirectionURL";
+import { useRedirectionURL } from "@hooks/RedirectionURL";
-import { completeTOTPSignIn } from "../../../services/OneTimePassword";
+import { completeTOTPSignIn } from "@services/OneTimePassword";
-import { AuthenticationLevel } from "../../../services/State";
+import { AuthenticationLevel } from "@services/State";
-import MethodContainer, { State as MethodContainerState } from "./MethodContainer";
+import MethodContainer, { State as MethodContainerState } from "@views/LoginPortal/SecondFactor/MethodContainer";
-import OTPDial from "./OTPDial";
+import OTPDial from "@views/LoginPortal/SecondFactor/OTPDial";
 
 export enum State {
     Idle = 1,

web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx

@@ -2,14 +2,14 @@ import React, { useEffect, useCallback, useState, ReactNode } from "react";
 
 import { Button, makeStyles } from "@material-ui/core";
 
-import FailureIcon from "../../../components/FailureIcon";
+import FailureIcon from "@components/FailureIcon";
-import PushNotificationIcon from "../../../components/PushNotificationIcon";
+import PushNotificationIcon from "@components/PushNotificationIcon";
-import SuccessIcon from "../../../components/SuccessIcon";
+import SuccessIcon from "@components/SuccessIcon";
-import { useIsMountedRef } from "../../../hooks/Mounted";
+import { useIsMountedRef } from "@hooks/Mounted";
-import { useRedirectionURL } from "../../../hooks/RedirectionURL";
+import { useRedirectionURL } from "@hooks/RedirectionURL";
-import { completePushNotificationSignIn } from "../../../services/PushNotification";
+import { completePushNotificationSignIn } from "@services/PushNotification";
-import { AuthenticationLevel } from "../../../services/State";
+import { AuthenticationLevel } from "@services/State";
-import MethodContainer, { State as MethodContainerState } from "./MethodContainer";
+import MethodContainer, { State as MethodContainerState } from "@views/LoginPortal/SecondFactor/MethodContainer";
 
 export enum State {
     SignInInProgress = 1,

web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx

@@ -4,25 +4,25 @@ import { Grid, makeStyles, Button } from "@material-ui/core";
 import { useHistory, Switch, Route, Redirect } from "react-router";
 import u2fApi from "u2f-api";
 
-import { useNotifications } from "../../../hooks/NotificationsContext";
-import LoginLayout from "../../../layouts/LoginLayout";
-import { Configuration } from "../../../models/Configuration";
-import { SecondFactorMethod } from "../../../models/Methods";
-import { UserInfo } from "../../../models/UserInfo";
 import {
     LogoutRoute as SignOutRoute,
     SecondFactorTOTPRoute,
     SecondFactorPushRoute,
     SecondFactorU2FRoute,
     SecondFactorRoute,
-} from "../../../Routes";
+} from "@constants/Routes";
-import { initiateTOTPRegistrationProcess, initiateU2FRegistrationProcess } from "../../../services/RegisterDevice";
+import { useNotifications } from "@hooks/NotificationsContext";
-import { AuthenticationLevel } from "../../../services/State";
+import LoginLayout from "@layouts/LoginLayout";
-import { setPreferred2FAMethod } from "../../../services/UserPreferences";
+import { Configuration } from "@models/Configuration";
-import MethodSelectionDialog from "./MethodSelectionDialog";
+import { SecondFactorMethod } from "@models/Methods";
-import OneTimePasswordMethod from "./OneTimePasswordMethod";
+import { UserInfo } from "@models/UserInfo";
-import PushNotificationMethod from "./PushNotificationMethod";
+import { initiateTOTPRegistrationProcess, initiateU2FRegistrationProcess } from "@services/RegisterDevice";
-import SecurityKeyMethod from "./SecurityKeyMethod";
+import { AuthenticationLevel } from "@services/State";
+import { setPreferred2FAMethod } from "@services/UserPreferences";
+import MethodSelectionDialog from "@views/LoginPortal/SecondFactor/MethodSelectionDialog";
+import OneTimePasswordMethod from "@views/LoginPortal/SecondFactor/OneTimePasswordMethod";
+import PushNotificationMethod from "@views/LoginPortal/SecondFactor/PushNotificationMethod";
+import SecurityKeyMethod from "@views/LoginPortal/SecondFactor/SecurityKeyMethod";
 
 const EMAIL_SENT_NOTIFICATION = "An email has been sent to your address to complete the process.";
 

web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx

@@ -4,16 +4,16 @@ import { makeStyles, Button, useTheme } from "@material-ui/core";
 import { CSSProperties } from "@material-ui/styles";
 import u2fApi from "u2f-api";
 
-import FailureIcon from "../../../components/FailureIcon";
+import FailureIcon from "@components/FailureIcon";
-import FingerTouchIcon from "../../../components/FingerTouchIcon";
+import FingerTouchIcon from "@components/FingerTouchIcon";
-import LinearProgressBar from "../../../components/LinearProgressBar";
+import LinearProgressBar from "@components/LinearProgressBar";
-import { useIsMountedRef } from "../../../hooks/Mounted";
+import { useIsMountedRef } from "@hooks/Mounted";
-import { useRedirectionURL } from "../../../hooks/RedirectionURL";
+import { useRedirectionURL } from "@hooks/RedirectionURL";
-import { useTimer } from "../../../hooks/Timer";
+import { useTimer } from "@hooks/Timer";
-import { initiateU2FSignin, completeU2FSignin } from "../../../services/SecurityKey";
+import { initiateU2FSignin, completeU2FSignin } from "@services/SecurityKey";
-import { AuthenticationLevel } from "../../../services/State";
+import { AuthenticationLevel } from "@services/State";
-import IconWithContext from "./IconWithContext";
+import IconWithContext from "@views/LoginPortal/SecondFactor/IconWithContext";
-import MethodContainer, { State as MethodContainerState } from "./MethodContainer";
+import MethodContainer, { State as MethodContainerState } from "@views/LoginPortal/SecondFactor/MethodContainer";
 
 export enum State {
     WaitTouch = 1,

web/src/views/LoginPortal/SignOut/SignOut.tsx

@@ -3,13 +3,13 @@ import React, { useEffect, useCallback, useState } from "react";
 import { Typography, makeStyles } from "@material-ui/core";
 import { Redirect } from "react-router";
 
-import { useIsMountedRef } from "../../../hooks/Mounted";
+import { FirstFactorRoute } from "@constants/Routes";
-import { useNotifications } from "../../../hooks/NotificationsContext";
+import { useIsMountedRef } from "@hooks/Mounted";
-import { useRedirectionURL } from "../../../hooks/RedirectionURL";
+import { useNotifications } from "@hooks/NotificationsContext";
-import { useRedirector } from "../../../hooks/Redirector";
+import { useRedirectionURL } from "@hooks/RedirectionURL";
-import LoginLayout from "../../../layouts/LoginLayout";
+import { useRedirector } from "@hooks/Redirector";
-import { FirstFactorRoute } from "../../../Routes";
+import LoginLayout from "@layouts/LoginLayout";
-import { signOut } from "../../../services/SignOut";
+import { signOut } from "@services/SignOut";
 
 export interface Props {}
 

web/src/views/ResetPassword/ResetPasswordStep1.tsx

@@ -3,11 +3,11 @@ import React, { useState } from "react";
 import { Grid, Button, makeStyles } from "@material-ui/core";
 import { useHistory } from "react-router";
 
-import FixedTextField from "../../components/FixedTextField";
+import FixedTextField from "@components/FixedTextField";
-import { useNotifications } from "../../hooks/NotificationsContext";
+import { FirstFactorRoute } from "@constants/Routes";
-import LoginLayout from "../../layouts/LoginLayout";
+import { useNotifications } from "@hooks/NotificationsContext";
-import { FirstFactorRoute } from "../../Routes";
+import LoginLayout from "@layouts/LoginLayout";
-import { initiateResetPasswordProcess } from "../../services/ResetPassword";
+import { initiateResetPasswordProcess } from "@services/ResetPassword";
 
 const ResetPasswordStep1 = function () {
     const style = useStyles();

web/src/views/ResetPassword/ResetPasswordStep2.tsx

@@ -4,12 +4,12 @@ import { Grid, Button, makeStyles } from "@material-ui/core";
 import classnames from "classnames";
 import { useHistory, useLocation } from "react-router";
 
-import FixedTextField from "../../components/FixedTextField";
+import FixedTextField from "@components/FixedTextField";
-import { useNotifications } from "../../hooks/NotificationsContext";
+import { FirstFactorRoute } from "@constants/Routes";
-import LoginLayout from "../../layouts/LoginLayout";
+import { useNotifications } from "@hooks/NotificationsContext";
-import { FirstFactorRoute } from "../../Routes";
+import LoginLayout from "@layouts/LoginLayout";
-import { completeResetPasswordProcess, resetPassword } from "../../services/ResetPassword";
+import { completeResetPasswordProcess, resetPassword } from "@services/ResetPassword";
-import { extractIdentityToken } from "../../utils/IdentityToken";
+import { extractIdentityToken } from "@utils/IdentityToken";
 
 const ResetPasswordStep2 = function () {
     const style = useStyles();

web/tsconfig.aliases.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "jsx": "preserve",
+    "paths": {
+      "@root/*": ["./*"],
+      "@assets/*": ["assets/*"],
+      "@components/*": ["components/*"],
+      "@constants/*": ["constants/*"],
+      "@hooks/*": ["hooks/*"],
+      "@layouts/*": ["layouts/*"],
+      "@models/*": ["models/*"],
+      "@services/*": ["services/*"],
+      "@themes/*": ["themes/*"],
+      "@utils/*": ["utils/*"],
+      "@views/*": ["views/*"]
+    }
+  }
+}

web/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./tsconfig.aliases.json",
   "compilerOptions": {
     "target": "es5",
     "lib": [
@@ -24,5 +25,10 @@
     ".*.js",
     "src",
     "types"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "coverage"
   ]
 }

web/yarn.lock

@@ -1876,7 +1876,7 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@craco/craco@6.1.2":
+"@craco/craco@^6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.1.2.tgz#30e45288e4609ac6b8cf828085b34acebdc60e69"
   integrity sha512-GlQZn+g+yNlaDvIL5m6mcCoBGyFDwO4kkNx3fNFf98wuldkdWyBFoQbtOFOIb4gvkTh4VntOOxtJEoZfKs7XXw==
@@ -4563,6 +4563,11 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+craco-alias@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/craco-alias/-/craco-alias-3.0.1.tgz#45e5cb338b222a7f62d17e398b54aff7cf1572af"
+  integrity sha512-N+Qaf/Gr/f3o5ZH2TQjMu5NhR9PnT1ZYsfejpNvZPpB0ujdrhsSr4Ct6GVjnV5ostCVquhTKJpIVBKyL9qDQYA==
+
 create-ecdh@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"