[LOCKLITE-112 & LOCKLITE-131] Create login page

src/app/ui/layout.tsx

@@ -3,7 +3,6 @@ import type { JSX } from 'react';
 import React from 'react';
 import ThemeRegistry from '@ui/providers/ThemeRegistry';
 import { AppBar, Container, Toolbar, Typography } from '@mui/material';
-import PageContainer from '@ui/components/common/PageContainer';
 import type { SharedLayoutProps } from '@shared/props/SharedLayoutProps';
 
 export const metadata: Metadata = {
@@ -28,9 +27,7 @@ export default function RootLayout({
               <Typography variant="h6">Locklite</Typography>
             </Toolbar>
           </AppBar>
-          <Container component="main">
-            <PageContainer>{children}</PageContainer>
-          </Container>
+          <Container component="main">{children}</Container>
         </ThemeRegistry>
       </body>
     </html>

src/app/ui/login/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import React from 'react';
+import type { JSX } from 'react';
+import PageContainer from '@ui/components/common/PageContainer';
+import { SessionProvider } from 'next-auth/react';
+import { SignInForm } from '@ui/components/auth/molecules/SignInForm';
+
+export default function SignInPage(): JSX.Element {
+  return (
+    <PageContainer title={'Login'}>
+      <SessionProvider>
+        <SignInForm />
+      </SessionProvider>
+    </PageContainer>
+  );
+}

src/app/ui/page.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
 import { redirect } from 'next/navigation';
+import { RoutesEnum } from '@ui/router/routes.enum';
 
 export default function HomePage(): JSX.Element {
-  redirect('/ui/workspace');
+  redirect(RoutesEnum.LOGIN);
 }

src/app/ui/workspace/page.tsx

@@ -3,23 +3,13 @@
 import 'reflect-metadata';
 import React from 'react';
 import type { JSX } from 'react';
-import DynamicVaultsList from '@ui/components/vaults/templates/DynamicVaultsList';
-import { Container, Typography } from '@mui/material';
+import DynamicVaultsList from '@ui/components/vaults/organisms/DynamicVaultsList';
+import PageContainer from '@ui/components/common/PageContainer';
 
 export default function WorkspacePage(): JSX.Element {
   return (
-    <Container
-      sx={{
-        padding: '2rem',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '3rem',
-      }}
-    >
-      <Typography variant={'h3'} textAlign={'left'}>
-        My vaults
-      </Typography>
+    <PageContainer title={'My vaults'}>
       <DynamicVaultsList />
-    </Container>
+    </PageContainer>
   );
 }

src/lib/auth.ts

@@ -4,6 +4,7 @@ import { PrismaAdapter } from '@next-auth/prisma-adapter';
 import prisma from '@lib/prisma';
 import { compare } from 'bcrypt';
 import type { User } from '@prisma/generated';
+import { RoutesEnum } from '@ui/router/routes.enum';
 
 export const authOptions: NextAuthOptions = {
   adapter: PrismaAdapter(prisma),
@@ -30,6 +31,9 @@ export const authOptions: NextAuthOptions = {
       },
     }),
   ],
-  pages: { signIn: '/login' },
+  pages: {
+    signIn: RoutesEnum.LOGIN,
+    signOut: RoutesEnum.LOGIN,
+  },
   secret: process.env.NEXTAUTH_SECRET,
 };

src/modules/shared/auth/session-status.enum.ts

@@ -0,0 +1,5 @@
+export enum SessionStatus {
+  AUTHENTICATED = 'authenticated',
+  LOADING = 'loading',
+  UNAUTHENTICATED = 'unauthenticated',
+}

src/modules/ui/components/auth/molecules/SignInForm.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import type { JSX } from 'react';
+import React, { useState, useEffect } from 'react';
+import type { SignInResponse } from 'next-auth/react';
+import { signIn, useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import { SessionStatus } from '@shared/auth/session-status.enum';
+import { RoutesEnum } from '@ui/router/routes.enum';
+import CircularLoader from '@ui/components/common/CircularLoader';
+import { Box } from '@mui/material';
+
+export function SignInForm(): JSX.Element | null {
+  const { data: session, status } = useSession();
+  const router: AppRouterInstance = useRouter();
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (status === SessionStatus.AUTHENTICATED) {
+      router.push(RoutesEnum.WORKSPACE);
+    }
+  }, [session, status, router]);
+
+  if (status === SessionStatus.LOADING) {
+    return <CircularLoader loading={true} />;
+  }
+
+  if (status === SessionStatus.AUTHENTICATED) {
+    return null;
+  }
+
+  async function handleSubmit(e: React.FormEvent): Promise<void> {
+    e.preventDefault();
+    setError(null);
+    const res: SignInResponse | undefined = await signIn('credentials', {
+      email,
+      password,
+      redirect: false,
+    });
+    if (res?.error) {
+      setError(new Error('Invalid credentials'));
+    } else {
+      router.push(RoutesEnum.WORKSPACE);
+    }
+  }
+
+  return (
+    // eslint-disable-next-line no-restricted-syntax
+    <form onSubmit={handleSubmit}>
+      <Box display="flex" flexDirection="column" width={500} gap={2}>
+        <Box display="flex" flexDirection="column" gap={2}>
+          <TextField
+            error={!!error}
+            helperText={error ? error.message : null}
+            label="Email"
+            type="email"
+            fullWidth
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+          />
+          <TextField
+            error={!!error}
+            helperText={error ? error.message : null}
+            label="Password"
+            type="password"
+            fullWidth
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+          />
+        </Box>
+        <Button
+          type="submit"
+          variant={'contained'}
+          sx={{ width: 'fit-content' }}
+        >
+          Sign in
+        </Button>
+      </Box>
+    </form>
+  );
+}

src/modules/ui/components/common/PageContainer.tsx

@@ -1,9 +1,13 @@
 import type { JSX } from 'react';
 import React from 'react';
-import { Container } from '@mui/material';
+import { Container, Typography } from '@mui/material';
 import type { SharedChildrenProps } from '@shared/props/SharedChildrenProps';
 
-export default function PageContainer(props: SharedChildrenProps): JSX.Element {
+type PageContainerProps = {
+  title: string;
+} & SharedChildrenProps;
+
+export default function PageContainer(props: PageContainerProps): JSX.Element {
   return (
     <Container
       sx={{
@@ -14,7 +18,19 @@ export default function PageContainer(props: SharedChildrenProps): JSX.Element {
         alignItems: 'center',
       }}
     >
-      {props.children}
+      <Container
+        sx={{
+          padding: '2rem',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '3rem',
+        }}
+      >
+        <Typography variant={'h3'} textAlign={'left'}>
+          {props.title}
+        </Typography>
+        {props.children}
+      </Container>
     </Container>
   );
 }

src/modules/ui/components/vaults/templates/DynamicVaultsList.tsx → src/modules/ui/components/vaults/organisms/DynamicVaultsList.tsx

@@ -1,11 +1,11 @@
 import { Box, Button } from '@mui/material';
 import ErrorMessage from '@ui/components/common/ErrorMessage';
 import SearchBar from '@ui/components/common/SearchBar';
-import AddVaultModal from '@ui/components/vaults/templates/AddVaultModal';
+import AddVaultModal from '@ui/components/vaults/organisms/AddVaultModal';
 import React, { useState } from 'react';
 import type { JSX } from 'react';
-import VaultsList from '../organisms/VaultsList';
-import { useVaults } from '@ui/hooks/useVaults';
+import VaultsList from './VaultsList';
+import { useVaults } from '@ui/hooks/api/fetch/useVaults';
 import type { VaultModelDto } from '@shared/dto/models/vault.model.dto';
 import AddIcon from '@mui/icons-material/Add';
 

src/modules/ui/router/routes.enum.ts

@@ -0,0 +1,5 @@
+export enum RoutesEnum {
+  HOMEPAGE = '/ui',
+  WORKSPACE = '/ui/workspace',
+  LOGIN = '/ui/login',
+}