Feature/user management

web/.eslintrc.js

@@ -47,5 +47,33 @@ module.exports = {
     "react/jsx-props-no-spreading": 0,
     "react-hooks/exhaustive-deps": "off",
     "@typescript-eslint/no-non-null-assertion": 0,
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type",
+        ],
+        pathGroups: [
+          {
+            pattern: "react",
+            group: "external",
+            position: "before",
+          },
+        ],
+        pathGroupsExcludedImportTypes: ["react"],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
   },
-};
+};

web/config-overrides.js

@@ -4,7 +4,7 @@ module.exports = function override(config) {
     ...config.resolve,
     alias: {
       ...config.alias,
-"@components": path.resolve(__dirname, "src/components"),
+      "@components": path.resolve(__dirname, "src/components"),
       "@consts": path.resolve(__dirname, "src/consts"),
       "@interfaces": path.resolve(__dirname, "src/interfaces"),
       "@janush-types": path.resolve(__dirname, "src/types"),
@@ -13,6 +13,7 @@ module.exports = function override(config) {
       "@layouts": path.resolve(__dirname, "src/layouts"),
       "@routing": path.resolve(__dirname, "src/routing"),
       "@themes": path.resolve(__dirname, "src/themes"),
+      "@validations": path.resolve(__dirname, "src/validations"),
     },
   };
   return config;

web/package.json

@@ -10,13 +10,14 @@
     "@mui/icons-material": "^5.0.0-rc.1",
     "@mui/material": "^5.0.0-rc.1",
     "@mui/styles": "^5.0.0-rc.1",
+    "@mui/x-data-grid": "^5.10.0",
     "aws-amplify": "^4.2.10",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.15.4",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.9"
@@ -103,4 +104,4 @@
       "html"
     ]
   }
-}
+}

web/src/App.test.tsx

@@ -1,4 +1,5 @@
 import { render } from "@testing-library/react";
+
 import App from "./App";
 
 describe("<App />", () => {

web/src/App.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
 import { Providers } from "@features/Providers/Providers";
-import { Routes } from "@routing/Routes";
+import { Router } from "@routing/Routes";
 
 const App: React.VFC = () => (
   <Providers>
-    <Routes />
+    <Router />
   </Providers>
 );
 

web/src/components/AuthBottomBar/AuthBottomBar.test.tsx

@@ -1,7 +1,6 @@
-import { MemoryRouter } from "react-router-dom";
-import { render } from "@testing-library/react";
-
 import { AuthBottomBar } from "@components/AuthBottomBar/AuthBottomBar";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
 
 describe("<AuthBottomBar />", () => {
   it("should render properly", () => {

web/src/components/AuthBottomBar/AuthBottomBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Box, Button, Grid, Typography } from "@mui/material";
 
 import { Link } from "@components/Link/Link";
+import { Box, Button, Grid, Typography } from "@mui/material";
 
 interface Props {
   buttonText: string;

web/src/components/Button/Button.tsx

@@ -0,0 +1,38 @@
+import { FC } from "react";
+
+import { Button as MuiButton, Theme, ButtonProps } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { rgbaColors } from "@themes/palette";
+
+export const Button: FC<ButtonProps> = ({ children, ...buttonProps }) => {
+  const theme = useTheme<Theme>();
+
+  return (
+    <MuiButton
+      {...buttonProps}
+      variant="contained"
+      sx={{
+        borderRadius: "4px",
+        py: 1.25,
+        px: 2,
+        lineHeight: theme.spacing(2),
+        color: "common.white",
+        borderColor: theme.palette.secondary.main,
+        textDecoration: "none",
+        ":hover": {
+          textDecoration: "none",
+          borderColor: theme.palette.secondary.main,
+        },
+        "&.Mui-disabled": {
+          color: rgbaColors.grey.main,
+          border: `1px solid ${rgbaColors.grey.lighter}`,
+          background: "none",
+          py: 1.125,
+        },
+        ...buttonProps.sx,
+      }}
+    >
+      {children}
+    </MuiButton>
+  );
+};

web/src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -0,0 +1,85 @@
+import { FC, ReactNode } from "react";
+
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Theme,
+  Button,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+interface Props {
+  children: ReactNode;
+  isOpen: boolean;
+  onSubmit: () => void;
+  onCancelClick: () => void;
+  submitButtonTitle: string;
+}
+
+const ConfirmationDialogTitle: FC = ({ children }) => {
+  const theme = useTheme<Theme>();
+
+  return (
+    <DialogTitle
+      sx={{ fontSize: 24, lineHeight: theme.spacing(3), pt: 2.5, pb: 1.75 }}
+    >
+      {children}
+    </DialogTitle>
+  );
+};
+
+const ConfirmationDialogContent: FC = ({ children }) => {
+  const theme = useTheme<Theme>();
+
+  return (
+    <DialogContent sx={{ pb: 7.5, color: theme.palette.secondary.dark }}>
+      {children}
+    </DialogContent>
+  );
+};
+
+export const ConfirmationDialog = ({
+  children,
+  isOpen,
+  onSubmit,
+  onCancelClick,
+  submitButtonTitle,
+}: Props) => {
+  const theme = useTheme<Theme>();
+
+  return (
+    <Dialog
+      onClose={onCancelClick}
+      open={isOpen}
+      sx={{
+        "& .MuiPaper-root": {
+          // TODO: Static width need to be removed while implementing RWD
+          width: "560px",
+        },
+      }}
+    >
+      {children}
+      <DialogActions sx={{ px: 1, pb: 1 }}>
+        <Button
+          sx={{ lineHeight: theme.spacing(2), p: 1 }}
+          variant="text"
+          onClick={onCancelClick}
+        >
+          Cancel
+        </Button>
+        <Button
+          sx={{ lineHeight: theme.spacing(2), p: 1 }}
+          variant="text"
+          onClick={onSubmit}
+        >
+          {submitButtonTitle}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+ConfirmationDialog.Title = ConfirmationDialogTitle;
+ConfirmationDialog.Content = ConfirmationDialogContent;

web/src/components/EmailField/EmailField.tsx

@@ -1,8 +1,7 @@
+import { TextField } from "@components/TextField/TextField";
 import { Mail } from "@mui/icons-material";
 import { InputAdornment, StandardTextFieldProps } from "@mui/material";
 
-import { TextField } from "@components/TextField/TextField";
-
 interface Props extends StandardTextFieldProps {
   errorMessage?: string | undefined;
 }

web/src/components/ErrorNotification/ErrorNotification.tsx

@@ -0,0 +1,37 @@
+import { VFC } from "react";
+
+import { Theme, Snackbar, Alert } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+interface Props {
+  content?: string;
+  show: boolean;
+  onClose: () => void;
+}
+
+export const ErrorNotification: VFC<Props> = ({ content, show, onClose }) => {
+  const theme = useTheme<Theme>();
+
+  return (
+    <Snackbar
+      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      open={show}
+      onClose={onClose}
+      // TODO: Static width need to be removed while implementing RWD
+      sx={{ width: "764px", "& .MuiPaper-root": { py: 0.75 } }}
+    >
+      <Alert
+        onClose={onClose}
+        severity="error"
+        sx={{
+          width: "100%",
+          backgroundColor: theme.palette.error.main,
+          color: "common.white",
+        }}
+        icon={false}
+      >
+        {content || "Something went wrong. Please try again."}
+      </Alert>
+    </Snackbar>
+  );
+};

web/src/components/FormInput/FormInput.tsx

@@ -0,0 +1,20 @@
+import { VFC } from "react";
+
+import { TextField, StandardTextFieldProps } from "@mui/material";
+
+interface Props extends StandardTextFieldProps {
+  errorMessage?: string | undefined;
+}
+
+export const FormInput: VFC<Props> = ({
+  errorMessage,
+  ...restProps
+}: Props) => (
+  <TextField
+    fullWidth
+    error={Boolean(errorMessage)}
+    helperText={errorMessage}
+    variant="filled"
+    {...restProps}
+  />
+);

web/src/components/Link/Link.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Link as RouterLink } from "react-router-dom";
+
 import { Link as MuiLink, LinkProps } from "@mui/material";
+import { Link as RouterLink } from "react-router-dom";
 
 type Props = Omit<LinkProps, "component" | "href"> & {
   to: string;

web/src/components/ListElement/ListElement.tsx

@@ -0,0 +1,29 @@
+import { VFC } from "react";
+
+import { Box, Typography, Theme } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+interface Props {
+  label: string;
+  value: string;
+}
+
+export const ListElement: VFC<Props> = ({ label, value }) => {
+  const theme = useTheme<Theme>();
+
+  return (
+    <Box display="flex">
+      <Typography
+        width="120px"
+        color={theme.palette.secondary.dark}
+        fontSize={14}
+        lineHeight={theme.spacing(3)}
+      >
+        {label}
+      </Typography>
+      <Typography fontSize={14} fontWeight={600}>
+        {value}
+      </Typography>
+    </Box>
+  );
+};

web/src/components/PasswordField/PasswordField.test.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+
+import { ThemeProvider } from "@features/ThemeProvider/ThemeProvider";
 import { fireEvent, render } from "@testing-library/react";
 import { useForm } from "react-hook-form";
 
-import { ThemeProvider } from "@features/ThemeProvider/ThemeProvider";
 import { PasswordField } from "./PasswordField";
 
 const setup = () => {

web/src/components/PasswordField/PasswordField.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+
+import { TextField } from "@components/TextField/TextField";
 import { Lock, Visibility, VisibilityOff } from "@mui/icons-material";
 import {
   StandardTextFieldProps,
@@ -8,8 +10,6 @@ import {
   Tooltip,
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-
-import { TextField } from "@components/TextField/TextField";
 import { formDataTestId } from "@utils/formDataTestId/formDataTestId";
 
 interface Props extends StandardTextFieldProps {