NEXT-20 - added session related logic, added new components, added definition for new screens

Author: Melzar

.docker.env.development

@@ -1,4 +1,3 @@
 API_URL=http://mock-server:3001
 NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=vVBmyUox7Mw5BphENXnNeq+71zIc0Atxl+uxfMaLbSs=
-NODE_OPTIONS='--inspect'

.env.development

@@ -1,4 +1,3 @@
 API_URL=http://localhost:3001
 NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=vVBmyUox7Mw5BphENXnNeq+71zIc0Atxl+uxfMaLbSs=
-NODE_OPTIONS='--inspect'

.eslintrc.json

@@ -41,6 +41,8 @@
     "react/react-in-jsx-scope": "off",
     "react/jsx-uses-react": "off",
     "react/function-component-definition": "off",
+    "react/require-default-props": "off",
+    "react/button-has-type": "off",
     "no-useless-constructor": "off",
     "no-empty-function": "off",
     "lines-between-class-members": "off",

Dockerfile

@@ -15,7 +15,7 @@ FROM base as development
 ENV NODE_ENV=development
 RUN yarn install
 COPY . /app
-CMD yarn run dev
+CMD NODE_OPTIONS='--inspect' yarn install && yarn run dev
 
 FROM node:18.17.1 as base-mock
 RUN mkdir -p /app

clean-mock-server.json

@@ -31,12 +31,51 @@
           "filePath": "",
           "databucketID": "",
           "sendFileAsBody": false,
-          "rules": [],
+          "rules": [
+            {
+              "target": "body",
+              "modifier": "username",
+              "value": "[email protected]",
+              "invert": false,
+              "operator": "equals"
+            }
+          ],
           "rulesOperator": "OR",
           "disableTemplating": false,
           "fallbackTo404": false,
           "default": true,
           "crudKey": "id"
+        },
+        {
+          "uuid": "307e1b6b-a9d0-40b0-9c14-18662739b4dc",
+          "body": "{\n  \"id\": \"{{faker 'string.alphanumeric' 25}}\",\n  \"email\": \"{{faker 'internet.email' 25}}\",\n  \"token\": \"{{faker 'string.alphanumeric' 25}}\",\n  \"firstName\": \"{{faker 'person.firstName'}}\",\n  \"surname\": \"{{faker 'person.lastName'}}\",\n  \"role\": \"member\"\n}",
+          "latency": 0,
+          "statusCode": 200,
+          "label": "",
+          "headers": [
+            {
+              "key": "Content-Type",
+              "value": "application/json"
+            }
+          ],
+          "bodyType": "INLINE",
+          "filePath": "",
+          "databucketID": "",
+          "sendFileAsBody": false,
+          "rules": [
+            {
+              "target": "body",
+              "modifier": "username",
+              "value": "[email protected]",
+              "invert": false,
+              "operator": "equals"
+            }
+          ],
+          "rulesOperator": "OR",
+          "disableTemplating": false,
+          "fallbackTo404": false,
+          "default": false,
+          "crudKey": "id"
         }
       ],
       "enabled": true,

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "build-storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
@@ -31,7 +31,8 @@
     "next-auth": "^4.24.4",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
     "@cucumber/cucumber": "^10.0.1",
@@ -50,6 +51,7 @@
     "@stryker-mutator/jest-runner": "^7.3.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.0",
+    "@types/css-modules": "^1.0.5",
     "@types/jest": "^29.5.8",
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.37",

src/app/admin/clients/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { ClientsView } from 'ui/Clients/Admin/clients.view';
+
+export default function Clients() {
+  return <ClientsView />;
+}

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { DashboardView } from 'ui/Dashboard/Admin/dashboard.view';
+
+export default function Dashboard() {
+  return <DashboardView />;
+}

src/app/admin/packages/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { PackagesView } from 'ui/Packages/Admin/packages.view';
+
+export default function Packages() {
+  return <PackagesView />;
+}

src/app/dashboard/page.tsx

@@ -1,4 +1,4 @@
-import { DashboardView } from 'ui/Dashboard/dashboard.view';
+import { DashboardView } from 'ui/Dashboard/Member/dashboard.view';
 
 const Dashboard = () => {
   return <DashboardView />;

src/app/globals.scss

@@ -19,10 +19,10 @@
 }
 
 body {
-  background-color: $martinique;
+  background-color: $mirage;
   color: rgb(var(--foreground-rgb));
 }
 
 .dark body {
-  background-color: $martinique-dark;
+  background-color: $mirage;
 }

src/app/layout.tsx

@@ -1,18 +1,12 @@
 import { ReactNode } from 'react';
 
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 
-import { TopHeader } from 'ui/common/components/layout/TopHeader/TopHeader';
-import { TopNavigation } from 'ui/common/components/layout/TopNavigation/TopNavigation';
-
-import { ThemeProvider } from 'ui/common/providers/theme.provider';
-import { THEME } from 'ui/common/consts/theme';
-
-import './globals.scss';
 import { AuthenticationProvider } from 'ui/common/providers/authentication.provider';
+import { AppLayout } from 'ui/common/layouts/AppLayout/AppLayout';
+import { lato } from 'ui/common/assets/fonts/fonts';
 
-const inter = Inter({ subsets: ['latin'] });
+import './globals.scss';
 
 export const metadata: Metadata = {
   title: 'Clean Architecture Next.js React Boilerplate',
@@ -22,20 +16,9 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={lato.className}>
         <AuthenticationProvider>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme={THEME.DARK}
-            themes={[THEME.DARK, THEME.DARK]}
-            enableSystem
-            disableTransitionOnChange
-          >
-            <TopHeader>
-              <TopNavigation />
-            </TopHeader>
-            {children}
-          </ThemeProvider>
+          <AppLayout>{children}</AppLayout>
         </AuthenticationProvider>
       </body>
     </html>

src/app/page.module.scss

@@ -1,5 +1,5 @@
 @import 'src/ui/common/styles/colors.module';
 
 .container {
-  background-color: $martinique;
+  background-color: $port-gore;
 }

src/app/page.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export default function Home() {
   return (
     <main className="flex min-h-screen items-center justify-center p-24">

src/middleware.ts

@@ -1,10 +1,32 @@
 import { withAuth, NextRequestWithAuth } from 'next-auth/middleware';
 import { NextResponse } from 'next/server';
 
+import { APP_ADMIN_ROUTES, APP_ROUTES } from 'ui/common/navigation/routes';
+
 export default withAuth(
   function middleware(request: NextRequestWithAuth) {
+    if (request.nextUrl.pathname === '/' && !request.nextauth.token) {
+      return NextResponse.redirect(new URL(APP_ROUTES.LOGIN, request.url));
+    }
+
+    if (
+      request.nextUrl.pathname === '/' &&
+      request.nextauth.token?.role === 'member'
+    ) {
+      return NextResponse.redirect(new URL(APP_ROUTES.DASHBOARD, request.url));
+    }
+
+    if (
+      request.nextUrl.pathname === '/' &&
+      request.nextauth.token?.role === 'admin'
+    ) {
+      return NextResponse.redirect(
+        new URL(APP_ADMIN_ROUTES.DASHBOARD, request.url)
+      );
+    }
+
     if (
-      request.nextUrl.pathname.startsWith('/dashboard') &&
+      request.nextUrl.pathname.startsWith('/admin') &&
       request.nextauth.token?.role !== 'admin'
     ) {
       return NextResponse.redirect(new URL('/forbidden', request.url));
@@ -19,4 +41,4 @@ export default withAuth(
   }
 );
 
-export const config = { matcher: ['/dashboard'] };
+export const config = { matcher: ['/', '/admin/:path*'] };

src/ui/Clients/Admin/clients.module.scss

@@ -0,0 +1,14 @@
+.header {
+  flex: 0.3;
+  margin: 0 60px;
+}
+
+.container {
+  background: radial-gradient(100% 100% at 50% 0%, #374676, #1d243e);
+  border-radius: 10px;
+  box-shadow: rgb(0 0 0 / 15%) 0 -10px 15px 0;
+  display: flex;
+  flex: 1;
+  margin: 0 60px;
+  padding: 30px;
+}

src/ui/Clients/Admin/clients.view.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import styles from 'ui/Clients/Admin/clients.module.scss';
+
+import { PageHeader } from 'ui/common/components/typography/PageHeader/PageHeader';
+
+export const ClientsView = () => {
+  return (
+    <>
+      <div className={styles.header} />
+      <div className={styles.container}>
+        <PageHeader>Clients</PageHeader>
+      </div>
+    </>
+  );
+};

src/ui/Dashboard/Admin/dashboard.module.scss

@@ -0,0 +1,16 @@
+@import 'src/ui/common/styles/colors.module';
+
+.header {
+  flex: 0.3;
+  margin: 0 60px;
+}
+
+.container {
+  background: radial-gradient(100% 100% at 50% 0%, $san-juan, $mirage);
+  border-radius: 10px;
+  box-shadow: $box-shadow 0 -10px 15px 0;
+  display: flex;
+  flex: 1;
+  margin: 0 60px;
+  padding: 30px;
+}

src/ui/Dashboard/Admin/dashboard.view.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import React from 'react';
+
+import styles from 'ui/Dashboard/Admin/dashboard.module.scss';
+
+import { PageHeader } from 'ui/common/components/typography/PageHeader/PageHeader';
+
+export const DashboardView = () => {
+  return (
+    <>
+      <div className={styles.header} />
+      <div className={styles.container}>
+        <PageHeader>Dashboard</PageHeader>
+      </div>
+    </>
+  );
+};

src/ui/Dashboard/Member/dashboard.view.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import React from 'react';
+
+import { TopNavigation } from 'ui/common/components/layout/TopNavigation/TopNavigation';
+
+export const DashboardView = () => {
+  return (
+    <>
+      <TopNavigation />
+      <span>Dashboard</span>
+    </>
+  );
+};

src/ui/Dashboard/dashboard.view.tsx

@@ -1,18 +1,33 @@
-import { useTheme } from 'next-themes';
+import { useRouter } from 'next/navigation';
 
 import { useLoginData } from 'ui/Login/login.data';
+import { useAuthentication } from 'ui/shared/Application/Authentication/authentication.hooks';
 
 type UseLoginHook = {
-  theme: string | undefined;
+  onSubmit: (formData: FormData) => void;
 };
 
 export const useLogin = (): UseLoginHook => {
-  const { theme } = useTheme();
+  const { logIn } = useAuthentication();
+  const router = useRouter();
 
   // eslint-disable-next-line no-empty-pattern
   const {} = useLoginData();
 
+  const onSubmit = async (formData: FormData) => {
+    const email = (formData.get('login') as string) || '';
+    const password = (formData.get('password') as string) || '';
+
+    const result = await logIn({
+      email,
+      password,
+    });
+    if (result.ok) {
+      router.push('/');
+    }
+  };
+
   return {
-    theme,
+    onSubmit,
   };
 };

src/ui/Login/login.hooks.ts

@@ -1,9 +1,17 @@
 @import 'src/ui/common/styles/colors.module';
 
 .container {
-  background-color: $martinique;
+  background-color: $port-gore;
 }
 
 .dark.container {
-  background-color: $martinique-dark;
+  background-color: $port-gore;
+}
+
+.logo {
+  margin-bottom: 20px;
+}
+
+.signInButton {
+  margin-top: 20px;
 }