Forgot Password and Dashboard UI

README.md

@@ -1,6 +1,6 @@
-Zabaan
+Zaban
 
-Zabaan is a SaaS platform offering AI-powered APIs for Text-to-Speech (TTS), Speech-to-Text (STT), Translation, and Transliteration. Users can sign up, generate API keys, and integrate these capabilities into their apps with minimal friction.
+Zaban is a SaaS platform offering AI-powered APIs for Text-to-Speech (TTS), Speech-to-Text (STT), Translation, and Transliteration. Users can sign up, generate API keys, and integrate these capabilities into their apps with minimal friction.
 
 Think of it like an easy-to-integrate alternative to similar AI platforms, with a focus on developer experience.
 

frontend/.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Local environment variables
+.env*.local

frontend/CLEANUP_SUMMARY.md

@@ -0,0 +1,119 @@
+# 🧹 Cleanup Summary
+
+## ✅ What Was Done
+
+### 1. **Removed Debug Files**
+- ❌ Deleted `app/debug-oauth/page.tsx`
+- ❌ Deleted `app/diagnose/page.tsx`
+- ❌ Deleted `app/test-env/page.tsx`
+- ❌ Deleted `app/test-callback/page.tsx`
+
+### 2. **Removed All Console Logs**
+- ✅ Cleaned `app/lib/auth.ts`
+- ✅ Cleaned `app/auth/callback/page.tsx`
+- ✅ Cleaned `app/callback/page.tsx`
+- ✅ Cleaned `app/login/page.tsx`
+- ✅ Cleaned `app/signup/page.tsx`
+
+### 3. **Fixed Security Issues - Removed Hardcoded Secrets**
+- ✅ Removed Google Client ID from `app/lib/config.ts`
+- ✅ Removed Google Client Secret from `app/lib/config.ts`
+- ✅ Config now only reads from environment variables
+
+### 4. **Created Proper Environment Setup**
+- ✅ Created `.env.example` (safe to commit - no secrets)
+- ✅ Created `.env.local` (gitignored - contains your actual secrets)
+- ✅ Added `.env*.local` to `.gitignore`
+- ✅ Created `ENV_SETUP.md` documentation
+
+---
+
+## 🔒 Security Status
+
+### ✅ SAFE TO COMMIT:
+- `app/lib/config.ts` - No secrets, only reads from env
+- `.env.example` - Template with placeholders
+- `.gitignore` - Includes `.env*.local`
+- `ENV_SETUP.md` - Documentation
+- All other source files
+
+### ❌ NEVER COMMIT:
+- `.env.local` - Contains actual secrets (already gitignored)
+
+---
+
+## 📁 Current Structure
+
+```
+frontend/
+├── .env.example          ✅ Safe (template)
+├── .env.local            ❌ Gitignored (secrets)
+├── .gitignore            ✅ Updated
+├── ENV_SETUP.md          ✅ New documentation
+├── CLEANUP_SUMMARY.md    ✅ This file
+└── app/
+    ├── lib/
+    │   └── config.ts     ✅ No hardcoded secrets
+    ├── auth/
+    │   └── callback/     ✅ Clean (no console logs)
+    ├── login/            ✅ Clean
+    ├── signup/           ✅ Clean
+    ├── dashboard/        ✅ Exists
+    └── page.tsx          ✅ New landing page
+```
+
+---
+
+## 🚀 Next Steps
+
+### For Development:
+
+1. **Your `.env.local` is already created** with your credentials
+2. **Restart your dev server** to load the new env vars:
+   ```bash
+   npm run dev
+   ```
+3. Test at: http://localhost:3000
+
+### For Team Members:
+
+1. Copy `.env.example` to `.env.local`:
+   ```bash
+   cp .env.example .env.local
+   ```
+2. Fill in their own credentials in `.env.local`
+3. Never commit `.env.local`
+
+### Before Committing:
+
+Run this to verify nothing secret is being committed:
+```bash
+git diff app/lib/config.ts
+# Should show NO client_id or client_secret values
+```
+
+---
+
+## ✅ Verification Checklist
+
+- [x] No console.log statements in production code
+- [x] No debug/test pages
+- [x] No hardcoded secrets in config
+- [x] .env.local is gitignored
+- [x] .env.example is created
+- [x] Documentation is updated
+- [x] All linting passes
+
+---
+
+## 🎯 Summary
+
+Your codebase is now **clean and secure**! 
+
+- All debugging code removed
+- All console logs removed  
+- All secrets moved to environment variables
+- Ready to commit safely to version control
+
+**You can now commit without worrying about exposing secrets!** 🎉
+

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/auth/callback/page.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { exchangeGoogleCode } from '../../lib/auth';
+import { motion } from 'framer-motion';
+
+export default function AuthCallbackPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [error, setError] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(true);
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      const code = searchParams.get('code');
+      const errorParam = searchParams.get('error');
+
+      if (errorParam) {
+        setError('Authentication failed. Please try again.');
+        setIsProcessing(false);
+        setTimeout(() => router.push('/login'), 3000);
+        return;
+      }
+
+      if (!code) {
+        setError('No authorization code received.');
+        setIsProcessing(false);
+        setTimeout(() => router.push('/login'), 3000);
+        return;
+      }
+
+      try {
+        await exchangeGoogleCode(code);
+        // Successfully authenticated, redirect to dashboard
+        router.push('/dashboard');
+      } catch {
+        setError('Failed to complete authentication. Please try again.');
+        setIsProcessing(false);
+        setTimeout(() => router.push('/login'), 3000);
+      }
+    };
+
+    handleCallback();
+  }, [searchParams, router]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-orange-600 to-orange-400">
+      <motion.div
+        className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full text-center"
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.3 }}
+      >
+        {isProcessing && !error ? (
+          <>
+            <motion.div
+              className="w-16 h-16 border-4 border-orange-500 border-t-transparent rounded-full mx-auto mb-4"
+              animate={{ rotate: 360 }}
+              transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+            />
+            <h2 className="text-2xl font-bold text-gray-800 mb-2">
+              Authenticating...
+            </h2>
+            <p className="text-gray-600">
+              Please wait while we complete your sign-in
+            </p>
+            <p className="text-sm text-gray-500 mt-4">
+              You'll be redirected to the dashboard shortly
+            </p>
+          </>
+        ) : error ? (
+          <>
+            <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <svg
+                className="w-8 h-8 text-red-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </div>
+            <h2 className="text-2xl font-bold text-gray-800 mb-2">
+              Authentication Failed
+            </h2>
+            <p className="text-gray-600 mb-4">{error}</p>
+            <p className="text-sm text-gray-500">
+              Redirecting to login page...
+            </p>
+          </>
+        ) : null}
+      </motion.div>
+    </div>
+  );
+}
+