Develop

.dockerignore

@@ -0,0 +1,21 @@
+# Ignorar dependencias locales
+# node_modules se utilizará para mandarse desde github actions
+
+# Ignorar config de Git
+.git
+.gitignore
+
+# Archivos temporales o de sistema
+.DS_Store
+*.log
+
+# Archivos de desarrollo
+.vscode
+.idea
+
+# Otros archivos que no deben ir al contenedor
+.env
+*.env.local
+tests
+coverage
+README.md

.github/workflows/develop-CD.yml

@@ -0,0 +1,50 @@
+name: Deploy Frontend-Develop to GCP VM
+
+on:
+  pull_request:
+    types: [closed]
+    branches: [develop]
+
+jobs:
+  deploy:
+    if: github.event.pull_request.merged == true
+    name: 🚀🛠 Deploy DEVELOP Next.js to GCP
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: develop
+
+      # 👉 Build la imagen Docker
+      - name: Build Docker image
+        run: docker build -f Dockerfile.prod -t ${{ secrets.DOCKER_USERNAME }}/frontend-dev:stage-${{ github.sha }} .
+
+      # 👉 Log in to DockerHub
+      - name: DockerHub Login
+        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
+
+      # 👉 Push la imagen
+      - name: Push Docker image to DockerHub
+        run: docker push ${{ secrets.DOCKER_USERNAME }}/frontend-dev:stage-${{ github.sha }}
+
+      # 👉 Add VM to known_hosts
+      - name: Add VM to known_hosts
+        run: |
+          mkdir -p ~/.ssh
+          ssh-keyscan ${{ secrets.GCP_VM_IP }} >> ~/.ssh/known_hosts
+
+      # 👉 Desplegar en la VM
+      - name: Deploy on GCP VM
+        uses: appleboy/ssh-action@v0.1.4
+        with:
+          host: ${{ secrets.GCP_VM_IP }}
+          username: ${{ secrets.GCP_VM_USER }}
+          key: ${{ secrets.GCP_SSH_KEY }}
+          script: |
+            cd /home/proyectosdanils/
+            docker compose down frontend-dev
+            docker pull ${{ secrets.DOCKER_USERNAME }}/frontend-dev:stage-${{ github.sha }}
+            export DOCKER_IMAGE_FRONTEND_DEV=${{ secrets.DOCKER_USERNAME }}/frontend-dev:stage-${{ github.sha }}
+            docker compose up -d frontend-dev

.github/workflows/master-CD.yml

@@ -0,0 +1,51 @@
+name: Deploy Frontend to GCP VM
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types: [closed] # (mergeado)
+    branches: [master]
+
+jobs:
+  deploy:
+    if: github.event.pull_request.merged == true # Solo si se hizo merge
+    name: 🚀 PRODUCTION Deploy Next.js to GCP
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # 👉 Build la imagen Docker
+      - name: Build Docker image
+        run: docker build -f Dockerfile.prod -t ${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }} .
+
+      # 👉 Log in to DockerHub
+      - name: DockerHub Login
+        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
+
+      # 👉 Push la imagen
+      - name: Push Docker image to DockerHub
+        run: docker push ${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }}
+
+      # 👉 Add VM to known_hosts
+      - name: Add VM to known_hosts
+        run: |
+          mkdir -p ~/.ssh
+          ssh-keyscan ${{ secrets.GCP_VM_IP }} >> ~/.ssh/known_hosts
+
+      # 👉 Desplegar en la VM
+      - name: Deploy on GCP VM
+        uses: appleboy/ssh-action@v0.1.4
+        with:
+          host: ${{ secrets.GCP_VM_IP }}
+          username: ${{ secrets.GCP_VM_USER }}
+          key: ${{ secrets.GCP_SSH_KEY }}
+          script: |
+            cd /home/proyectosdanils/
+            docker compose down frontend-prod
+            docker pull ${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }}
+            export DOCKER_IMAGE_FRONTEND_PROD=${{ secrets.DOCKER_USERNAME }}/frontend-prod:${{ github.sha }}
+            docker compose up -d frontend-prod

Dockerfile.prod

@@ -0,0 +1,16 @@
+FROM node:22-alpine
+
+RUN mkdir -p /home/frontend-prod
+
+WORKDIR /home/frontend-prod
+
+COPY package.json package-lock.json ./
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+EXPOSE 3000
+
+CMD ["npm", "run", "start"]

app/(auth)/layout.tsx

@@ -0,0 +1,16 @@
+import Header from '../_components/Header';
+import Footer from '../_components/Footer';
+
+export default function NoLoggedLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="bg-darkblue text-white">
+      <Header />
+      <main className="px-5 lg:px-16">{children}</main>
+      <Footer />
+    </div>
+  );
+}

app/(nologged)/login-gest/page.tsx → app/(auth)/login-gest/page.tsx

@@ -2,8 +2,8 @@ import Link from 'next/link';
 
 export default function LoginGest() {
   return (
-    <main className="flex items-center justify-center min-h-screen w-full">
-      <section className="flex flex-col w-full mx-auto max-w-[600px] gap-20">
+    <section className="flex items-center justify-center min-h-screen w-full">
+      <div className="flex flex-col w-full mx-auto max-w-[600px] gap-20">
         <div className="flex flex-col items-center gap-5">
           <h1 className="font-extrabold text-purple text-4xl text-center">
             Entra como Invitado y Únete a la Conversación
@@ -36,7 +36,7 @@ export default function LoginGest() {
             </Link>
           </div>
         </div>
-      </section>
-    </main>
+      </div>
+    </section>
   );
 }

app/(auth)/login/_components/DesktopForm.tsx

@@ -0,0 +1,98 @@
+export default function DesktopForm({ setMode }: { setMode: (mode: string) => void }) {
+  return (
+    <div className="hidden lg:flex gap-10 justify-between w-full">
+      <section className="w-[100%] flex flex-col items-center gap-5 max-w-[600px] mx-auto">
+        <header className="flex flex-col items-center gap-1">
+          <h1 className="text-2xl font-extrabold text-center">
+            Mantente Comunicado en Cualquier Lugar
+          </h1>
+          <h2>Inicia sesión para acceder a tus salas</h2>
+        </header>
+        <form className="flex flex-col gap-5 w-[80%]">
+          <div className="flex flex-col gap-1">
+            <label htmlFor="email-login-desktop" className="font-bold">
+              Tu correo
+            </label>
+            <input
+              id="email-login-desktop"
+              type="text"
+              placeholder="Correo electrónico"
+              autoComplete="email"
+              className="w-full border-1 border-purple-300 p-2 rounded"
+            />
+          </div>
+          <div>
+            <label htmlFor="password-login-desktop" className="font-bold">
+              Tu contraseña
+            </label>
+            <input
+              id="password-login-desktop"
+              type="password"
+              placeholder="Contraseña"
+              className="w-full border-1 border-purple-300 p-2 rounded"
+              autoComplete="current-password"
+            />
+          </div>
+          <button className="bg-purple rounded p-2">Ingresar a la plataforma</button>
+        </form>
+        <div className="flex gap-1">
+          <p>¿Aún no tienes una cuenta?</p>
+          <button className="text-purple cursor-pointer" onClick={() => setMode('register')}>
+            Regístrate
+          </button>
+        </div>
+      </section>
+
+      <section className="w-[100%] flex flex-col items-center gap-5 max-w-[600px] mx-auto">
+        <header className="flex flex-col items-center gap-1">
+          <h1 className="text-2xl font-extrabold text-center">Regístrate y Conecta</h1>
+          <h2>Podrás guardar tus conversaciones y salas</h2>
+        </header>
+        <form className="flex flex-col gap-5 w-[80%]">
+          <div className="flex flex-col gap-1">
+            <label htmlFor="user-register-desktop" className="font-bold">
+              Tu ususuario
+            </label>
+            <input
+              id="user-register-desktop"
+              type="text"
+              placeholder="Correo electrónico"
+              className="w-full border-1 border-purple-300 p-2 rounded"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label htmlFor="email-register-desktop" className="font-bold">
+              Tu correo
+            </label>
+            <input
+              id="email-register-desktop"
+              type="text"
+              placeholder="Correo electrónico"
+              autoComplete="email"
+              className="w-full border-1 border-purple-300 p-2 rounded"
+            />
+          </div>
+          <div>
+            <label htmlFor="password-register-desktop" className="font-bold">
+              Tu contraseña
+            </label>
+            <input
+              id="password-register-desktop"
+              type="password"
+              placeholder="Contraseña"
+              className="w-full border-1 border-purple-300 p-2 rounded"
+              autoComplete="current-password"
+            />
+          </div>
+          <button className="bg-purple rounded p-2">Crear cuenta</button>
+        </form>
+        <div className="flex gap-1">
+          <p>¿Ya tienes una cuenta?</p>
+          <button className="text-purple cursor-pointer" onClick={() => setMode('login')}>
+            Inicia sesión
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}