Update Prod

.github/workflows/ci.yml

@@ -78,6 +78,15 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Set up environment variables
+        run: |
+          echo "🔧 Setting up environment variables for build..."
+          echo "NEXT_PUBLIC_API_URL=http://localhost:3000/api" >> .env.local
+          echo "NEXT_PUBLIC_APP_URL=http://localhost:3000" >> .env.local
+          echo "NEXTAUTH_SECRET=ci-test-secret-key" >> .env.local
+          echo "NEXTAUTH_URL=http://localhost:3000" >> .env.local
+          echo "DATABASE_URL=postgresql://test:test@localhost:5432/test_db" >> .env.local
+
       - name: Build application
         run: npm run build
 
@@ -191,6 +200,15 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Set up environment variables
+        run: |
+          echo "🔧 Setting up environment variables for build..."
+          echo "NEXT_PUBLIC_API_URL=http://localhost:3000/api" >> .env.local
+          echo "NEXT_PUBLIC_APP_URL=http://localhost:3000" >> .env.local
+          echo "NEXTAUTH_SECRET=ci-test-secret-key" >> .env.local
+          echo "NEXTAUTH_URL=http://localhost:3000" >> .env.local
+          echo "DATABASE_URL=postgresql://test:test@localhost:5432/test_db" >> .env.local
+
       - name: Build with bundle analysis
         run: |
           npm run build
@@ -223,6 +241,15 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Set up environment variables
+        run: |
+          echo "🔧 Setting up environment variables for build..."
+          echo "NEXT_PUBLIC_API_URL=http://localhost:3000/api" >> .env.local
+          echo "NEXT_PUBLIC_APP_URL=http://localhost:3000" >> .env.local
+          echo "NEXTAUTH_SECRET=ci-test-secret-key" >> .env.local
+          echo "NEXTAUTH_URL=http://localhost:3000" >> .env.local
+          echo "DATABASE_URL=postgresql://test:test@localhost:5432/test_db" >> .env.local
+
       - name: Build application
         run: npm run build
 
@@ -264,6 +291,15 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Set up environment variables
+        run: |
+          echo "🔧 Setting up environment variables for build..."
+          echo "NEXT_PUBLIC_API_URL=http://localhost:3000/api" >> .env.local
+          echo "NEXT_PUBLIC_APP_URL=http://localhost:3000" >> .env.local
+          echo "NEXTAUTH_SECRET=ci-test-secret-key" >> .env.local
+          echo "NEXTAUTH_URL=http://localhost:3000" >> .env.local
+          echo "DATABASE_URL=postgresql://test:test@localhost:5432/test_db" >> .env.local
+
       - name: Build application
         run: npm run build
 
@@ -295,6 +331,15 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Set up environment variables
+        run: |
+          echo "🔧 Setting up environment variables for build..."
+          echo "NEXT_PUBLIC_API_URL=http://localhost:3000/api" >> .env.local
+          echo "NEXT_PUBLIC_APP_URL=http://localhost:3000" >> .env.local
+          echo "NEXTAUTH_SECRET=ci-test-secret-key" >> .env.local
+          echo "NEXTAUTH_URL=http://localhost:3000" >> .env.local
+          echo "DATABASE_URL=postgresql://test:test@localhost:5432/test_db" >> .env.local
+
       - name: Build application
         run: npm run build
 

app/auth/forgot-password/page.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React, { useState } from 'react';
+import AuthLoadingState from '@/components/auth/AuthLoadingState';
+import ForgotPasswordWrapper from '@/components/auth/ForgotPasswordWrapper';
+
+const ForgotPassword = () => {
+  const [loadingState, setLoadingState] = useState(false);
+
+  return (
+    <>
+      {loadingState && <AuthLoadingState message='Sending reset link...' />}
+      <div className='relative z-10 flex min-h-screen items-center justify-center p-4'>
+        <div className='w-full max-w-[500px]'>
+          <div className='group relative rounded-2xl border border-white/20 bg-gradient-to-br from-white/10 via-white/5 to-transparent p-10 shadow-2xl backdrop-blur-xl transition-all duration-200 hover:border-2 hover:border-white/30 hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)]'>
+            <div className='pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
+            <div className='pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-30'></div>
+
+            <div className='relative z-10'>
+              <ForgotPasswordWrapper setLoadingState={setLoadingState} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ForgotPassword;

app/auth/page.tsx

@@ -3,9 +3,14 @@
 import { useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { AuthModeNav } from '@/components/auth/AuthModeNav';
+import LoginWrapper from '@/components/auth/LoginWrapper';
+import SignupWrapper from '@/components/auth/SignupWrapper';
+import AuthLoadingState from '@/components/auth/AuthLoadingState';
 
 export default function AuthPage() {
+  const [loadingState, setLoadingState] = useState(false);
   const searchParams = useSearchParams();
+
   const mode = searchParams.get('mode') || 'signin';
   const [currentMode, setCurrentMode] = useState<'signin' | 'signup'>(
     mode as 'signin' | 'signup'
@@ -16,17 +21,32 @@ export default function AuthPage() {
   };
 
   return (
-    <div className='relative z-10 flex min-h-screen items-center justify-center p-4'>
-      <div className='w-full max-w-md'>
-        <div className='rounded-2xl border border-white/10 bg-black/20 p-8 backdrop-blur-sm'>
-          <AuthModeNav
-            currentMode={currentMode}
-            onModeChange={handleModeChange}
-          />
-
-          <div className='mt-8'></div>
+    <>
+      {loadingState && <AuthLoadingState message='Signing in...' />}
+      <div className='relative z-10 flex min-h-screen items-center justify-center p-4'>
+        <div className='w-full max-w-[600px]'>
+          <div className='group relative rounded-2xl border border-white/20 bg-gradient-to-br from-white/10 via-white/5 to-transparent p-10 shadow-2xl backdrop-blur-xl transition-all duration-500 hover:border-2 hover:border-white/30 hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)]'>
+            <div className='pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
+
+            <div className='pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-30'></div>
+
+            <div className='relative z-10'>
+              <AuthModeNav
+                currentMode={currentMode}
+                onModeChange={handleModeChange}
+              />
+
+              <div className='mt-2'>
+                {currentMode === 'signin' ? (
+                  <LoginWrapper setLoadingState={setLoadingState} />
+                ) : (
+                  <SignupWrapper setLoadingState={setLoadingState} />
+                )}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

app/globals.css

@@ -447,3 +447,12 @@ input[type='number'] {
     background-image: url('/landing/about/Abstract_03md.png');
   }
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px your_desired_color inset !important;
+  -webkit-text-fill-color: white !important; /* Optional: Customize text color */
+  transition: background-color 5000s ease-in-out 0s; /* Optional: Smooth transition */
+}