feat: working on it

easyflow-software · Jul 23, 2024 · 29237dd · 29237dd
1 parent 14e9ad3
commit 29237dd
Show file tree

Hide file tree

Showing 26 changed files with 967 additions and 803 deletions.
diff --git a/.github/workflows/builder.yml b/.github/workflows/builder.yml
@@ -3,15 +3,15 @@
 
 name: Builder
 
-on: [push, pull_request]
+on: [push]
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v22.4.0
+v22
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,40 +13,40 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@nextui-org/react": "2.4.2",
-    "@phosphor-icons/react": "^2.1.7",
+    "@nextui-org/react": "2.4.6",
+    "@phosphor-icons/react": "2.1.7",
     "axios": "1.7.2",
-    "formik": "^2.4.6",
-    "framer-motion": "11.3.2",
-    "i18next": "23.12.1",
+    "formik": "2.4.6",
+    "framer-motion": "11.3.8",
+    "i18next": "23.12.2",
     "i18next-resources-to-backend": "1.2.1",
     "next": "14.2.5",
     "next-connect": "1.0.0",
     "next-i18n-router": "5.5.1",
     "next-themes": "0.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-i18next": "14.1.2",
+    "react-i18next": "15.0.0",
     "yup": "1.4.0"
   },
   "devDependencies": {
-    "@types/node": "20.14.10",
+    "@types/node": "20.14.11",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/eslint-plugin": "7.16.1",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "husky": "9.0.11",
+    "eslint-plugin-prettier": "5.2.1",
+    "husky": "9.1.1",
     "lint-staged": "15.2.7",
     "postcss": "8.4.39",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-preset-env": "9.6.0",
     "prettier": "3.3.3",
     "prettier-plugin-sort-json": "4.0.0",
     "prettier-plugin-tailwindcss": "0.6.5",
-    "tailwindcss": "3.4.4",
-    "typescript": "5"
+    "tailwindcss": "3.4.6",
+    "typescript": "5.5.3"
   }
 }
diff --git a/public/locales/de/signup.json b/public/locales/de/signup.json
@@ -1,12 +1,14 @@
 {
   "alreadyHaveAccount": "Bereits ein Konto? Melde dich <login>hier</login> an.",
+  "back": "Zurück",
   "form": {
     "name": { "label": "Name", "placeholder": "Name eingeben" },
     "email": { "label": "E-Mail", "placeholder": "Email eingeben" },
     "password": { "label": "Passwort", "placeholder": "Passwort eingeben" },
     "confirmPassword": { "label": "Passwort bestätigen", "placeholder": "Passwort bestätigen" }
   },
   "here": "hier",
+  "next": "Weiter",
   "passwordRequirements": {
     "lowerCase": "Mindestens ein Kleinbuchstabe",
     "upperCase": "Mindestens ein Grossbuchstaben",

diff --git a/public/locales/en/signup.json b/public/locales/en/signup.json
@@ -1,11 +1,13 @@
 {
   "alreadyHaveAccount": "Already have an account? Login <login>here</login>.",
+  "back": "Back",
   "form": {
     "name": { "label": "Name", "placeholder": "Enter name" },
     "email": { "label": "E-Mail", "placeholder": "Enter email" },
     "password": { "label": "Password", "placeholder": "Enter password" },
     "confirmPassword": { "label": "Confirm Password", "placeholder": "Confirm password" }
   },
+  "next": "Next",
   "passwordRequirements": {
     "lowerCase": "At least one lowercase letter",
     "upperCase": "At least one uppercase letter",

diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/[locale]/actions.ts b/src/app/[locale]/actions.ts
@@ -0,0 +1,11 @@
+import { APIOperation } from '@/src/services/api-services/common';
+import { makeRequest } from '@/src/services/api-services/request';
+import { RequestResponse } from '@/src/types/request-response.type';
+import { UserResponse } from '@/src/types/response.types';
+
+export const getUser = async (): Promise<RequestResponse<UserResponse>> => {
+  const res = await makeRequest<APIOperation.GET_USER, UserResponse>({
+    op: APIOperation.GET_USER,
+  });
+  return res;
+};
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,3 +1,4 @@
+import Nav from '@/src/components/navbar/Navbar';
 import { dir } from 'i18next';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
@@ -22,7 +23,10 @@ const RootLayout = ({
   return (
     <html lang={locale} dir={dir(locale)}>
       <body className={'h-screen w-screen bg-background' + inter.className}>
-        <Providers>{children}</Providers>
+        <Providers>
+          <Nav />
+          <div className="h-[calc(100vh-64px)] overflow-y-auto">{children}</div>
+        </Providers>
       </body>
     </html>
   );

diff --git a/src/app/[locale]/login/actions.ts b/src/app/[locale]/login/actions.ts
@@ -3,10 +3,10 @@
 import { APIOperation } from '@/src/services/api-services/common';
 import { makeRequest } from '@/src/services/api-services/request';
 import { RequestResponse } from '@/src/types/request-response.type';
-import { SignupResponse } from '@/src/types/response.types';
+import { UserResponse } from '@/src/types/response.types';
 
-export const login = async (email?: string, password?: string): Promise<RequestResponse<SignupResponse>> => {
-  const res = await makeRequest<APIOperation.LOGIN, SignupResponse>({
+export const login = async (email?: string, password?: string): Promise<RequestResponse<UserResponse>> => {
+  const res = await makeRequest<APIOperation.LOGIN, UserResponse>({
     op: APIOperation.LOGIN,
     payload: { email, password },
   });

diff --git a/src/app/[locale]/login/layout.tsx b/src/app/[locale]/login/layout.tsx
@@ -11,7 +11,7 @@ const RootLayout = ({
   children: React.ReactNode;
   params: { locale: string };
 }>): JSX.Element => {
-  return <main className="flex h-screen w-screen items-center justify-center">{children}</main>;
+  return <main className="flex h-full w-screen items-center justify-center">{children}</main>;
 };
 
 export default RootLayout;
diff --git a/src/app/[locale]/login/page.tsx b/src/app/[locale]/login/page.tsx
@@ -3,6 +3,8 @@ import TranslationsProvider from '@/src/components/translation-provider/Translat
 import initTranslations from '@i18n';
 import { Card, CardHeader } from '@nextui-org/react';
 import { FunctionComponent } from 'react';
+import { getUser } from '../actions';
+import { redirect } from 'next/navigation';
 
 interface HomeProps {
   params: {
@@ -15,6 +17,12 @@ const i18nNamespaces = ['login'];
 const Home: FunctionComponent<HomeProps> = async ({ params: { locale } }) => {
   const { t, resources } = await initTranslations(locale, i18nNamespaces);
 
+  // Check if user is already logged in
+  const res = await getUser();
+  if (res.success) {
+    redirect('/chat');
+  }
+
   return (
     <TranslationsProvider resources={resources} locale={locale} namespaces={i18nNamespaces}>
       <Card className="w-[80%] max-w-[500px] p-5">

diff --git a/src/app/[locale]/signup/layout.tsx b/src/app/[locale]/signup/layout.tsx
@@ -11,7 +11,7 @@ const RootLayout = ({
   children: React.ReactNode;
   params: { locale: string };
 }>): JSX.Element => {
-  return <main className="flex h-screen w-screen items-center justify-center">{children}</main>;
+  return <main className="flex h-full w-screen items-center justify-center">{children}</main>;
 };
 
 export default RootLayout;
diff --git a/src/app/[locale]/signup/page.tsx b/src/app/[locale]/signup/page.tsx
@@ -1,7 +1,10 @@
 import SignupForm from '@/src/components/signup-form/SignupForm';
 import TranslationsProvider from '@/src/components/translation-provider/TranslationsProvider';
 import initTranslations from '@i18n';
+import { Card, CardHeader } from '@nextui-org/react';
+import { redirect } from 'next/navigation';
 import { FunctionComponent } from 'react';
+import { getUser } from '../actions';
 
 interface HomeProps {
   params: {
@@ -14,11 +17,19 @@ const i18nNamespaces = ['signup'];
 const Home: FunctionComponent<HomeProps> = async ({ params: { locale } }) => {
   const { t, resources } = await initTranslations(locale, i18nNamespaces);
 
+  // Check if user is already logged in
+  const res = await getUser();
+  if (res.success) {
+    redirect('/chat');
+  }
+
   return (
     <TranslationsProvider resources={resources} locale={locale} namespaces={i18nNamespaces}>
       <div>
-        <h3>{t('signup:title')}</h3>
-        <SignupForm />
+        <Card className="w-[80vw] max-w-[500px] p-5">
+          <CardHeader>{t('signup:title')}</CardHeader>
+          <SignupForm />
+        </Card>
       </div>
     </TranslationsProvider>
   );

diff --git a/src/app/api/route.ts b/src/app/api/route.ts
diff --git a/src/components/link/Link.tsx b/src/components/link/Link.tsx
@@ -0,0 +1,15 @@
+import { Link as StyledLink, LinkProps as StyledLinkProps } from '@nextui-org/react';
+import { useRouter } from 'next/navigation';
+import { FunctionComponent, ReactElement } from 'react';
+
+interface LinkProps extends StyledLinkProps {
+  href: string;
+}
+
+const Link: FunctionComponent<LinkProps> = ({ href, ...props }): ReactElement => {
+  const router = useRouter();
+
+  return <StyledLink onClick={() => router.push(href)} {...props} />;
+};
+
+export default Link;
diff --git a/src/components/login-form/LoginForm.tsx b/src/components/login-form/LoginForm.tsx
@@ -1,10 +1,11 @@
 'use client';
 import { login } from '@/src/app/[locale]/login/actions';
 import { LoginType } from '@/src/types/login.type';
-import { Button, Input, Link } from '@nextui-org/react';
+import { Button, Input } from '@nextui-org/react';
 import { Form, Formik } from 'formik';
 import { FunctionComponent, ReactElement } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import Link from '../link/Link';
 import PasswordInput from '../password-input/PasswordInput';
 import createValidationSchema from './validation-schema';
 
@@ -72,7 +73,7 @@ const LoginForm: FunctionComponent = (): ReactElement => {
         <Trans
           i18nKey="login:noAccount"
           components={{
-            signup: <Link href="/signup" underline="hover" />,
+            signup: <Link className="hover:cursor-pointer" href="/signup" underline="hover" />,
           }}
         />
       </p>

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -0,0 +1,86 @@
+'use client';
+import {
+  Button,
+  Link,
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  NavbarMenu,
+  NavbarMenuItem,
+  NavbarMenuToggle,
+} from '@nextui-org/react';
+import Image from 'next/image';
+import { FunctionComponent, ReactElement, useState } from 'react';
+
+const Nav: FunctionComponent = (): ReactElement => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const menuItems = [
+    'Profile',
+    'Dashboard',
+    'Activity',
+    'Analytics',
+    'System',
+    'Deployments',
+    'My Settings',
+    'Team Settings',
+    'Help & Feedback',
+    'Log Out',
+  ];
+
+  return (
+    <Navbar onMenuOpenChange={setIsMenuOpen}>
+      <NavbarContent>
+        <NavbarMenuToggle aria-label={isMenuOpen ? 'Close menu' : 'Open menu'} className="sm:hidden" />
+        <NavbarBrand>
+          <Image src="/logo.svg" alt="Easyflow" width={40} height={40} />
+        </NavbarBrand>
+      </NavbarContent>
+
+      <NavbarContent className="hidden gap-4 sm:flex" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link href="#" aria-current="page">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarMenu>
+        {menuItems.map((item, index) => (
+          <NavbarMenuItem key={`${item}-${index}`}>
+            <Link
+              color={index === 2 ? 'primary' : index === menuItems.length - 1 ? 'danger' : 'foreground'}
+              className="w-full"
+              href="#"
+              size="lg"
+            >
+              {item}
+            </Link>
+          </NavbarMenuItem>
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  );
+};
+
+export default Nav;