feat: navbar imporvements and singup and login are now working but do…

…ckerfile is broken

.dockerignore

@@ -2,12 +2,12 @@
 .husky
 .next
 .vscode
-dist
 node_modules
 .gitignore
 .lintstagedrc.cjs
 .nvmrc
 example.env
+.env
 next-env.d.ts
 nodemon.json
 README.md

Dockerfile

@@ -1,33 +1,30 @@
-FROM node:20-alpine as builder
-
-# Variables
-ARG NODE_AUTH_TOKEN
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 
-#Copy everything
+# Copy everything
 COPY . .
 
-#Install packages as in package-lock
+# Install packages as in package-lock
 RUN npm ci
 
-#Linting
+# Linting
 RUN npm run lint
 
-#Build
+# Build
 RUN npm run build
 
-#Remove packages
+# Remove packages
 RUN rm -rf node_modules
 
-#Install prod packages
+# Install prod packages
 RUN npm ci --omit=dev --omit=optional
 
-FROM node:20-alpine as production
+FROM node:22-alpine AS production
 
-# Variables
-ARG CLOUDFLARE_ORIGIN_CERTIFICATE
-ARG CLOUDFLARE_ORIGIN_CA_KEY
+# Secrets
+RUN --mount=type=secret,id=CLOUDFLARE_ORIGIN_CERTIFICATE
+RUN --mount=type=secret,id=CLOUDFLARE_ORIGIN_CA_KEY
 
 # Uninstall yarn and npm not needed in prod
 RUN npm uninstall -g yarn
@@ -39,7 +36,7 @@ RUN adduser -DH -s /sbin/nologin -u 2000 -G appgroup -S appuser
 
 WORKDIR /app
 
-#Copy needed files
+# Copy needed files
 COPY --chown=appuser:appgroup --from=builder /app/.next /app/.next
 COPY --chown=appuser:appgroup --from=builder /app/node_modules /app/node_modules
 COPY --chown=appuser:appgroup --from=builder /app/public /app/public
@@ -50,9 +47,10 @@ COPY --chown=appuser:appgroup --from=builder /app/nginx.conf /etc/nginx/nginx.co
 # Set type module
 RUN echo '{"type": "module"}' > /app/package.json
 
-# Create certificates
-RUN echo "${CLOUDFLARE_ORIGIN_CERTIFICATE}" > /etc/ssl/easyflow.pem
-RUN echo "${CLOUDFLARE_ORIGIN_CA_KEY}" > /etc/ssl/easyflow.key
+# Cloudflare origin certificate
+RUN mkdir -p /etc/ssl/
+RUN cat /run/secrets/CLOUDFLARE_ORIGIN_CERTIFICATE
+RUN cat /run/secrets/CLOUDFLARE_ORIGIN_CA_KEY
 RUN chown -R appuser:appgroup /etc/ssl/
 
 # add nginx

package.json

@@ -9,15 +9,14 @@
     "start": "next start",
     "lint": "next lint",
     "precommit": "npm run prettify && lint-staged --no-stash",
-    "prettify": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss}\"",
-    "prepare": "husky"
+    "prettify": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss}\""
   },
   "dependencies": {
     "@nextui-org/react": "2.4.6",
     "@phosphor-icons/react": "2.1.7",
     "axios": "1.7.2",
     "formik": "2.4.6",
-    "framer-motion": "11.3.12",
+    "framer-motion": "11.3.18",
     "i18next": "23.12.2",
     "i18next-resources-to-backend": "1.2.1",
     "next": "14.2.5",
@@ -38,15 +37,15 @@
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",
-    "husky": "9.1.1",
+    "husky": "9.1.3",
     "lint-staged": "15.2.7",
-    "postcss": "8.4.39",
+    "postcss": "8.4.40",
     "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.6",
+    "tailwindcss": "3.4.7",
     "typescript": "5.5.4"
   }
 }

public/locales/de/errors.json

@@ -0,0 +1,7 @@
+{
+  "ALREADY_EXISTS": "Ein Benutzer mit dieser E-Mail-Adresse existiert bereits.",
+  "API_ERROR": "Etwas ist schief gelaufen. Bitte versuche es später erneut.",
+  "NOT_ALLOWED": "Diese Operation ist nicht erlaubt.",
+  "NOT_FOUND": "Die angeforderte Ressource wurde nicht gefunden.",
+  "WRONG_CREDENTIALS": "Email oder Passwort sind falsch."
+}

public/locales/de/navbar.json

@@ -0,0 +1,13 @@
+{
+  "lang": {
+    "en": "Englisch",
+    "de": "Deutsch"
+  },
+  "menuLabels": {
+    "chat": "Chat",
+    "signup": "Registrieren",
+    "profile": "Profil",
+    "pricing": "Preise",
+    "login": "Anmelden"
+  }
+}

public/locales/de/signup.json

@@ -16,11 +16,14 @@
     "special": "Mindestens ein Sonderzeichen",
     "minLength": "Mindestens 12 Zeichen"
   },
-  "recoveryCodeInformation": "Dein Wiederherstellungscode wurde erfolgreich generiert. Um den Datenschutz zu gewährleisten, speichern wir deinen Wiederherstellungscode <strong>nicht</strong>. Ohne diesen Wiederherstellungscode kannst du dein Konto im Falle eines Passwortverlustes nicht wiederherstellen. Du kannst deinen WWIederherstellungscode hier <CopyLink>kopieren</CopyLink> oder <DownloadLink>herunterladen</DownloadLink>.",
+  "recoveryCode": {
+    "title": "Hurra! Dein Wiederherstellungscode wurde generiert.",
+    "information": "Dein Wiederherstellungscode wurde erfolgreich generiert. Um den Datenschutz zu gewährleisten, speichern wir deinen Wiederherstellungscode <strong>nicht</strong>. Ohne diesen Wiederherstellungscode kannst du dein Konto im Falle eines Passwortverlustes nicht wiederherstellen. Du kannst deinen WIederherstellungscode hier <CopyLink>kopieren</CopyLink> oder <DownloadLink>herunterladen</DownloadLink>."
+  },
   "stepperTitles": {
     "enterInformation": "Informationen eingeben",
     "confirmEmail": "E-Mail bestätigen",
-    "recoveryCode": "Wiederherstellungscode"
+    "recoveryCode": "Recovery Code"
   },
   "title": "Registrieren",
   "validation": {

public/locales/en/errors.json

@@ -0,0 +1,7 @@
+{
+  "ALREADY_EXISTS": "A user with this email address already exists.",
+  "API_ERROR": "Something went wrong. Please try again later.",
+  "NOT_ALLOWED": "This operation is not allowed.",
+  "NOT_FOUND": "The requested resource was not found.",
+  "WRONG_CREDENTIALS": "Email or password is incorrect."
+}

public/locales/en/navbar.json

@@ -0,0 +1,13 @@
+{
+  "lang": {
+    "en": "Englisch",
+    "de": "Deutsch"
+  },
+  "menuLabels": {
+    "chat": "Chat",
+    "profile": "Profile",
+    "pricing": "Pricing",
+    "login": "Login",
+    "signup": "Signup"
+  }
+}

public/locales/en/signup.json

@@ -17,9 +17,9 @@
   },
   "recoveryCodeInformation": "We successfully generated your recovery code. To ensure proper data protection we do <strong>not</strong> store your recovery code and without that recovery code you cannot restore your account in case of a password loss. <CopyLink>Copy</CopyLink> or <DownloadLink>donwload</DownloadLink> your Recovery Code.",
   "stepperTitles": {
-    "enterInformation": "Enter Information",
-    "confirmEmail": "Confirm Email",
-    "recoveryCode": "Recovery Code"
+    "enterInformation": "Enter information",
+    "confirmEmail": "Confirm email",
+    "recoveryCode": "Recovery code"
   },
   "title": "Sign Up",
   "validation": {

src/app/[locale]/actions.ts

@@ -9,3 +9,10 @@ export const getUser = async (): Promise<RequestResponse<UserResponse>> => {
   });
   return res;
 };
+
+export const getProfilePicture = async (): Promise<RequestResponse<string>> => {
+  const res = await makeRequest<APIOperation.GET_PROFILE_PICTURE, string>({
+    op: APIOperation.GET_PROFILE_PICTURE,
+  });
+  return res;
+};

src/app/[locale]/chat/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Chat - EasyFlow',
+  description: 'Chat privatly with EasyFlow',
+};
+
+const RootLayout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+  params: { locale: string };
+}>): JSX.Element => {
+  return <main className="h-full w-screen">{children}</main>;
+};
+
+export default RootLayout;

src/app/[locale]/chat/page.tsx

@@ -0,0 +1,7 @@
+import { FunctionComponent, ReactElement } from 'react';
+
+const Chat: FunctionComponent = (): ReactElement => {
+  return <div>Chat</div>;
+};
+
+export default Chat;

src/app/[locale]/layout.tsx

@@ -1,10 +1,12 @@
-import Nav from '@/src/components/navbar/Navbar';
+import Nav from '@/src/components/nav/Nav';
 import { dir } from 'i18next';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import { FunctionComponent, PropsWithChildren, ReactElement } from 'react';
 import '../globals.css';
 import '../i18n';
 import Providers from '../providers';
+import NavWrapper from '@/src/components/nav/NavBarWrapper';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -13,18 +15,23 @@ export const metadata: Metadata = {
   description: 'Generated by create next app',
 };
 
-const RootLayout = ({
+interface RootLayoutProps {
+  params: {
+    locale: string;
+  };
+}
+
+const RootLayout: FunctionComponent<PropsWithChildren<RootLayoutProps>> = ({
   children,
   params: { locale },
-}: Readonly<{
-  children: React.ReactNode;
-  params: { locale: string };
-}>): JSX.Element => {
+}): ReactElement => {
   return (
     <html lang={locale} dir={dir(locale)}>
       <body className={'h-screen w-screen bg-background' + inter.className}>
         <Providers>
-          <Nav />
+          <NavWrapper params={{ locale }}>
+            <Nav params={{ locale }} />
+          </NavWrapper>
           <div className="h-[calc(100vh-64px)] overflow-y-auto">{children}</div>
         </Providers>
       </body>

src/app/[locale]/login/page.tsx

@@ -1,32 +1,35 @@
 import LoginForm from '@/src/components/login-form/LoginForm';
-import TranslationsProvider from '@/src/components/translation-provider/TranslationsProvider';
+import TranslationsProvider from '@/src/providers/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';
-import { redirect } from 'next/navigation';
 
 interface HomeProps {
   params: {
     locale: string;
   };
 }
 
-const i18nNamespaces = ['login'];
+const i18nNamespaces = ['login', 'errors'];
 
 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();
+  console.log(res);
   if (res.success) {
     redirect('/chat');
   }
 
   return (
     <TranslationsProvider resources={resources} locale={locale} namespaces={i18nNamespaces}>
       <Card className="w-[80%] max-w-[500px] p-5">
-        <CardHeader>{t('login:title')}</CardHeader>
+        <CardHeader>
+          <h3>{t('login:title')}</h3>
+        </CardHeader>
         <LoginForm />
       </Card>
     </TranslationsProvider>