Spaces:

looda3131
/

wisperlink-app

Sleeping

App Files Files Community

looda3131 commited on Feb 15

Commit

94bfa98

1 Parent(s): 672c6be

جيد اضف تسجيل الدخول ب google

Browse files

Files changed (9) hide show

src/app/layout.tsx +9 -7
src/app/login/page.tsx +39 -44
src/app/page.tsx +11 -7
src/components/header.tsx +43 -2
src/contexts/ai-world-context.tsx +1 -3
src/contexts/auth-context.tsx +107 -0
src/firebase/client.ts +10 -0
src/firebase/config.ts +13 -0
src/lib/firebase.ts +2 -27

src/app/layout.tsx CHANGED Viewed

@@ -1,12 +1,12 @@
 "use client";
-import type { Metadata } from 'next';
 import { ThemeProvider } from '@/components/theme-provider';
 import { Toaster } from '@/components/ui/toaster';
-import { AIWorldProvider } from '@/contexts/ai-world-context'; // استيراد البروفايدر
 import './globals.css';
-// لا يمكن استخدام Metadata في ملف 'use client'، ولكن سنحتفظ بالهيكل العام
 // export const metadata: Metadata = {
 //   title: 'ProtoChat',
 //   description: 'An AI-powered chat application',
@@ -31,10 +31,12 @@ export default function RootLayout({
       </head>
       <body className="font-body antialiased">
         <ThemeProvider>
-          <AIWorldProvider> {/* تغليف التطبيق بالكامل */}
-            {children}
-            <Toaster />
-          </AIWorldProvider>
         </ThemeProvider>
       </body>
     </html>

 "use client";
 import { ThemeProvider } from '@/components/theme-provider';
 import { Toaster } from '@/components/ui/toaster';
+import { AIWorldProvider } from '@/contexts/ai-world-context';
+import { AuthProvider } from '@/contexts/auth-context';
 import './globals.css';
+// No Metadata for 'use client' components
 // export const metadata: Metadata = {
 //   title: 'ProtoChat',
 //   description: 'An AI-powered chat application',
       </head>
       <body className="font-body antialiased">
         <ThemeProvider>
+          <AuthProvider>
+            <AIWorldProvider>
+              {children}
+              <Toaster />
+            </AIWorldProvider>
+          </AuthProvider>
         </ThemeProvider>
       </body>
     </html>

src/app/login/page.tsx CHANGED Viewed

@@ -2,68 +2,63 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Header } from "@/components/header";
-import { useToast } from "@/hooks/use-toast";
-import Link from "next/link";
-import { LogIn } from "lucide-react";
 export default function LoginPage() {
-  const { toast } = useToast();
-  const handleLogin = (e: React.FormEvent) => {
-    e.preventDefault();
-    toast({
-      title: "قريباً",
-      description: "ميزة تسجيل الدخول قيد التطوير حاليًا.",
-    });
   };
   return (
     <div className="flex h-screen w-full flex-col bg-background">
       <Header title="تسجيل الدخول" />
       <div className="flex flex-1 items-center justify-center bg-muted/40">
         <Card className="mx-auto max-w-sm">
           <CardHeader>
-            <CardTitle className="text-2xl">تسجيل الدخول</CardTitle>
             <CardDescription>
-              أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <form onSubmit={handleLogin} className="grid gap-4">
-              <div className="grid gap-2">
-                <Label htmlFor="email">البريد الإلكتروني</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="m@example.com"
-                  required
-                />
-              </div>
-              <div className="grid gap-2">
-                <div className="flex items-center">
-                  <Label htmlFor="password">كلمة المرور</Label>
-                  <Link href="#" className="mr-auto inline-block text-sm underline">
-                    نسيت كلمة المرور؟
-                  </Link>
-                </div>
-                <Input id="password" type="password" required />
-              </div>
-              <Button type="submit" className="w-full">
-                <LogIn className="ml-2 h-4 w-4" />
-                تسجيل الدخول
-              </Button>
-              <Button variant="outline" className="w-full">
                 تسجيل الدخول باستخدام جوجل
               </Button>
-            </form>
-            <div className="mt-4 text-center text-sm">
-              ليس لديك حساب؟{" "}
-              <Link href="#" className="underline">
-                إنشاء حساب
-              </Link>
             </div>
           </CardContent>
         </Card>

 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Header } from "@/components/header";
+import { Loader2 } from "lucide-react";
+import { useAuth } from "@/contexts/auth-context";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 export default function LoginPage() {
+  const { user, loading, signInWithGoogle } = useAuth();
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const router = useRouter();
+  useEffect(() => {
+    if (!loading && user) {
+      router.push('/');
+    }
+  }, [user, loading, router]);
+  const handleGoogleLogin = async () => {
+    setIsSigningIn(true);
+    await signInWithGoogle();
+    // The context handles navigation and errors, but we can set loading state
+    setIsSigningIn(false);
   };
+  if (loading || user) {
+      return (
+      <div className="flex h-screen w-full flex-col bg-background">
+        <Header title="تسجيل الدخول" />
+        <div className="flex flex-1 items-center justify-center bg-background">
+        <Loader2 className="h-16 w-16 animate-spin text-primary" />
+        <p className="mr-4">يتم توجيهك...</p>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="flex h-screen w-full flex-col bg-background">
       <Header title="تسجيل الدخول" />
       <div className="flex flex-1 items-center justify-center bg-muted/40">
         <Card className="mx-auto max-w-sm">
           <CardHeader>
+            <CardTitle className="text-2xl">أهلاً بك</CardTitle>
             <CardDescription>
+              اختر طريقة تسجيل الدخول للمتابعة
             </CardDescription>
           </CardHeader>
           <CardContent>
+            <div className="grid gap-4">
+              <Button variant="outline" className="w-full" onClick={handleGoogleLogin} disabled={isSigningIn}>
+                {isSigningIn ? (
+                    <Loader2 className="ml-2 h-4 w-4 animate-spin" />
+                ) : (
+                    <svg className="ml-2 h-4 w-4" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 381.5 512 244 512 111.8 512 0 400.2 0 261.8 0 123.8 111.8 12.8 244 12.8c70.3 0 129.8 27.8 175.4 72.4l-66 66C314.6 114.5 282.8 96 244 96c-85.6 0-154.5 68.9-154.5 153.8s68.9 153.8 154.5 153.8c99.3 0 131.2-82.3 134.8-120.9H244V254h244v7.8z"></path></svg>
+                )}
                 تسجيل الدخول باستخدام جوجل
               </Button>
             </div>
           </CardContent>
         </Card>

src/app/page.tsx CHANGED Viewed

@@ -2,16 +2,18 @@
 import { Chat } from '@/components/chat/chat';
 import { useState, useContext } from 'react';
 import { Button } from '@/components/ui/button';
-import { Globe, MessageSquare, Users, Mic, LogIn } from 'lucide-react';
 import { AIWorldFeed } from '@/components/ai-world/ai-world-feed';
 import { AIWorldContext } from '@/contexts/ai-world-context';
 import Link from 'next/link';
 export default function Home() {
   const [showWorld, setShowWorld] = useState(false);
   // We can access the context here to show a loading spinner on the button
   // but for now, we'll keep it simple.
   const { isLoading } = useContext(AIWorldContext);
   if (showWorld) {
     // The AIWorldFeed component is self-contained and handles its own state
@@ -38,12 +40,14 @@ export default function Home() {
                 محادثة صوتية
             </Link>
         </Button>
-        <Button asChild variant="outline" size="lg" className="rounded-full">
-            <Link href="/login">
-                <LogIn className="ml-2 h-5 w-5" />
-                تسجيل الدخول
-            </Link>
-        </Button>
       </div>
     </div>
   );

 import { Chat } from '@/components/chat/chat';
 import { useState, useContext } from 'react';
 import { Button } from '@/components/ui/button';
+import { Globe, Users, Mic, LogIn } from 'lucide-react';
 import { AIWorldFeed } from '@/components/ai-world/ai-world-feed';
 import { AIWorldContext } from '@/contexts/ai-world-context';
 import Link from 'next/link';
+import { useAuth } from '@/contexts/auth-context';
 export default function Home() {
   const [showWorld, setShowWorld] = useState(false);
   // We can access the context here to show a loading spinner on the button
   // but for now, we'll keep it simple.
   const { isLoading } = useContext(AIWorldContext);
+  const { user } = useAuth();
   if (showWorld) {
     // The AIWorldFeed component is self-contained and handles its own state
                 محادثة صوتية
             </Link>
         </Button>
+        {!user && (
+            <Button asChild variant="outline" size="lg" className="rounded-full">
+                <Link href="/login">
+                    <LogIn className="ml-2 h-5 w-5" />
+                    تسجيل الدخول
+                </Link>
+            </Button>
+        )}
       </div>
     </div>
   );

src/components/header.tsx CHANGED Viewed

@@ -1,13 +1,27 @@
 import { ThemeToggle } from '@/components/theme-toggle';
-import { MessageSquare, Globe, Users, Mic, LogIn } from 'lucide-react';
 import Link from 'next/link';
 import { Button } from './ui/button';
 interface HeaderProps {
   title: string;
 }
 export function Header({ title }: HeaderProps) {
   const getIcon = () => {
     switch (title) {
         case 'بروتو شات':
@@ -33,7 +47,7 @@ export function Header({ title }: HeaderProps) {
         </div>
         <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
       </div>
-      <div className="flex items-center gap-2">
         <Button asChild variant="outline">
             <Link href="/">
               <MessageSquare className="ml-2 h-4 w-4" />
@@ -41,6 +55,33 @@ export function Header({ title }: HeaderProps) {
             </Link>
         </Button>
         <ThemeToggle />
       </div>
     </header>
   );

+'use client';
 import { ThemeToggle } from '@/components/theme-toggle';
+import { MessageSquare, Globe, Users, Mic, LogIn, LogOut } from 'lucide-react';
 import Link from 'next/link';
 import { Button } from './ui/button';
+import { useAuth } from '@/contexts/auth-context';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 interface HeaderProps {
   title: string;
 }
 export function Header({ title }: HeaderProps) {
+  const { user, signOut } = useAuth();
   const getIcon = () => {
     switch (title) {
         case 'بروتو شات':
         </div>
         <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
       </div>
+      <div className="flex items-center gap-4">
         <Button asChild variant="outline">
             <Link href="/">
               <MessageSquare className="ml-2 h-4 w-4" />
             </Link>
         </Button>
         <ThemeToggle />
+        {user && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+                    <Avatar className="h-9 w-9">
+                        <AvatarImage src={user.photoURL!} alt={user.displayName!} />
+                        <AvatarFallback>{user.displayName?.charAt(0)}</AvatarFallback>
+                    </Avatar>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="end" forceMount>
+                <DropdownMenuLabel className="font-normal">
+                    <div className="flex flex-col space-y-1">
+                        <p className="text-sm font-medium leading-none">{user.displayName}</p>
+                        <p className="text-xs leading-none text-muted-foreground">
+                        {user.email}
+                        </p>
+                    </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={signOut}>
+                    <LogOut className="ml-2 h-4 w-4" />
+                    <span>تسجيل الخروج</span>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
       </div>
     </header>
   );

src/contexts/ai-world-context.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import { aiUsers } from '@/lib/ai-world-data';
 import { allNames } from '@/lib/ai-world-names';
 import type { PostWithUIState, AIComment, AIUser } from '@/lib/types';
 import type { GeneratePostIdeasOutput } from '@/ai/flows/types';
-import { database } from '@/lib/firebase';
 import { ref, update, set, push, query, orderByKey, limitToFirst, startAt, get, onChildChanged } from 'firebase/database';
 import { checkConsumption, recordConsumption } from '@/lib/consumption';
 import { commentBank } from '@/lib/ai-world-comments';
@@ -553,5 +553,3 @@ export const AIWorldProvider: React.FC<{ children: React.ReactNode }> = ({ child
         </AIWorldContext.Provider>
     );
 };

 import { allNames } from '@/lib/ai-world-names';
 import type { PostWithUIState, AIComment, AIUser } from '@/lib/types';
 import type { GeneratePostIdeasOutput } from '@/ai/flows/types';
+import { database } from '@/firebase/client';
 import { ref, update, set, push, query, orderByKey, limitToFirst, startAt, get, onChildChanged } from 'firebase/database';
 import { checkConsumption, recordConsumption } from '@/lib/consumption';
 import { commentBank } from '@/lib/ai-world-comments';
         </AIWorldContext.Provider>
     );
 };

src/contexts/auth-context.tsx ADDED Viewed

	@@ -0,0 +1,107 @@

+'use client';
+import { useState, useEffect, createContext, useContext, type ReactNode } from 'react';
+import type { User } from 'firebase/auth';
+import { auth, database } from '@/firebase/client';
+import { onAuthStateChanged, signInWithPopup, GoogleAuthProvider, signOut as firebaseSignOut } from 'firebase/auth';
+import { ref, set, get } from 'firebase/database';
+import { useRouter } from 'next/navigation';
+import { useToast } from '@/hooks/use-toast';
+import { Loader2 } from 'lucide-react';
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  signInWithGoogle: () => Promise<void>;
+  signOut: () => Promise<void>;
+}
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+  const { toast } = useToast();
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setUser(user);
+      setLoading(false);
+    });
+    return () => unsubscribe();
+  }, []);
+  const signInWithGoogle = async () => {
+    const provider = new GoogleAuthProvider();
+    try {
+      const result = await signInWithPopup(auth, provider);
+      const user = result.user;
+      // Save user to Realtime Database
+      const userRef = ref(database, 'users/' + user.uid);
+      const snapshot = await get(userRef);
+      if (!snapshot.exists()) {
+        await set(userRef, {
+          displayName: user.displayName,
+          email: user.email,
+          photoURL: user.photoURL,
+          createdAt: new Date().toISOString(),
+        });
+      }
+      toast({
+        title: "تم تسجيل الدخول بنجاح",
+        description: `مرحباً بك مجدداً، ${user.displayName}!`,
+      });
+      router.push('/');
+    } catch (error: any) {
+      console.error("Error signing in with Google: ", error);
+      toast({
+        title: "خطأ في تسجيل الدخول",
+        description: "فشل تسجيل الدخول باستخدام جوجل. الرجاء المحاولة مرة أخرى.",
+        variant: "destructive",
+      });
+    }
+  };
+  const signOut = async () => {
+    try {
+      await firebaseSignOut(auth);
+      toast({
+        title: "تم تسجيل الخروج بنجاح",
+      });
+      router.push('/login');
+    } catch (error) {
+      console.error("Error signing out: ", error);
+        toast({
+        title: "خطأ في تسجيل الخروج",
+        description: "حدث خطأ أثناء تسجيل الخروج.",
+        variant: "destructive",
+      });
+    }
+  };
+  if (loading) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center bg-background">
+        <Loader2 className="h-16 w-16 animate-spin text-primary" />
+      </div>
+    );
+  }
+  return (
+    <AuthContext.Provider value={{ user, loading, signInWithGoogle, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

src/firebase/client.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import { initializeApp, getApp, getApps } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getDatabase } from "firebase/database";
+import { firebaseConfig } from "./config";
+const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
+const auth = getAuth(app);
+const database = getDatabase(app);
+export { app, auth, database };

src/firebase/config.ts ADDED Viewed

	@@ -0,0 +1,13 @@

+import type { FirebaseOptions } from "firebase/app";
+// Your web app's Firebase configuration
+export const firebaseConfig: FirebaseOptions = {
+  apiKey: "AIzaSyAOG4b86lnMDidl7UcbUEEyPEinyS4xD_g",
+  authDomain: "hhjij-be5c6.firebaseapp.com",
+  databaseURL: "https://hhjij-be5c6-default-rtdb.firebaseio.com",
+  projectId: "hhjij-be5c6",
+  storageBucket: "hhjij-be5c6.firebasestorage.app",
+  messagingSenderId: "56446735767",
+  appId: "1:56446735767:web:6fb56e6476489cba6760d2",
+  measurementId: "G-103FCK8LKB"
+};

src/lib/firebase.ts CHANGED Viewed

@@ -1,27 +1,2 @@
-// Import the functions you need from the SDKs you need
-import { initializeApp, getApp, type FirebaseOptions } from "firebase/app";
-import { getDatabase } from "firebase/database";
-// Your web app's Firebase configuration
-const firebaseConfig: FirebaseOptions = {
-  apiKey: "AIzaSyAOG4b86lnMDidl7UcbUEEyPEinyS4xD_g",
-  authDomain: "hhjij-be5c6.firebaseapp.com",
-  databaseURL: "https://hhjij-be5c6-default-rtdb.firebaseio.com",
-  projectId: "hhjij-be5c6",
-  storageBucket: "hhjij-be5c6.firebasestorage.app",
-  messagingSenderId: "56446735767",
-  appId: "1:56446735767:web:6fb56e6476489cba6760d2",
-  measurementId: "G-103FCK8LKB"
-};
-// Initialize Firebase
-function createFirebaseApp(config: FirebaseOptions) {
-    try {
-        return getApp();
-    } catch {
-        return initializeApp(config);
-    }
-}
-const firebaseApp = createFirebaseApp(firebaseConfig);
-export const database = getDatabase(firebaseApp);


1	+ // This file is deprecated. Firebase setup is now in /src/firebase/
2	+ // The database is exported from /src/firebase/client.ts