New Members Zone - big bang!

NickNiebling · Oct 21, 2024 · 7413918 · 7413918
1 parent 1cab41c
commit 7413918
Show file tree

Hide file tree

Showing 40 changed files with 3,547 additions and 153 deletions.
diff --git a/app/api/getevents/events.json b/app/api/getevents/events.json
@@ -0,0 +1,42 @@
+[
+  {
+    "id": 4546902,
+    "name": "DZR After Party Series",
+    "eventStart": "2024-10-17T15:15:00.000+0000"
+  },
+  {
+    "id": 4548972,
+    "name": "In the Zone 2 with DZR",
+    "eventStart": "2024-10-19T07:30:00.000+0000"
+  },
+  {
+    "id": 4549062,
+    "name": "In the Zone 2 with DZR",
+    "eventStart": "2024-10-19T12:30:00.000+0000"
+  },
+  {
+    "id": 4550504,
+    "name": "The Zwifty Fifty with DZR",
+    "eventStart": "2024-10-20T12:45:00.000+0000"
+  },
+  {
+    "id": 4544106,
+    "name": "STAGES by DZR - The iTT (1/4)",
+    "eventStart": "2024-10-22T17:20:00.000+0000"
+  },
+  {
+    "id": 4544110,
+    "name": "STAGES by DZR - The Sprint (2/4)",
+    "eventStart": "2024-10-22T17:45:00.000+0000"
+  },
+  {
+    "id": 4544115,
+    "name": "STAGES by DZR - The Break Away (3/4)",
+    "eventStart": "2024-10-29T18:20:00.000+0000"
+  },
+  {
+    "id": 4544116,
+    "name": "STAGES by DZR - The Hill (4/4)",
+    "eventStart": "2024-11-05T18:20:00.000+0000"
+  }
+]
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,29 +1,33 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import SidebarWithHeader from "@/components/Sidebar";
-import { Analytics } from "@vercel/analytics/react"
-import { SpeedInsights } from "@vercel/speed-insights/next"
+import { Analytics } from "@vercel/analytics/react";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { AuthProvider } from '@/components/auth/AuthContext';
 
 require('dotenv').config();
 
 // app/layout.tsx
-import { Providers } from './providers'
+import { Providers } from './providers';
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode,
+  children: React.ReactNode;
 }) {
   return (
-    <html lang='en'>
+    <html lang="en">
       <body>
-        <Providers>
-          <SidebarWithHeader />
-          {children}
-          <Analytics />
-          <SpeedInsights />
-        </Providers>
+        {/* Wrap the app with AuthProvider to enable authentication */}
+        <AuthProvider>
+          <Providers>
+            <SidebarWithHeader />
+            {children}
+            <Analytics />
+            <SpeedInsights />
+          </Providers>
+        </AuthProvider>
       </body>
     </html>
-  )
-}
+  );
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -0,0 +1,82 @@
+// app/login/page.tsx
+
+'use client'; // This line is essential for client components
+
+import React, { useState, useContext } from 'react';
+import { AuthContext } from '@/components/auth/AuthContext';
+import { useRouter } from 'next/navigation';
+import {
+  Container,
+  Heading,
+  Text,
+  Grid,
+  InputGroup,
+  InputRightElement,
+  Input,
+  Stack,
+  Image,
+  Flex,
+  Button,
+} from '@chakra-ui/react';
+import ForgotPasswordModal from '@/components/auth/ForgotPasswordModel';
+import SignUpModal from '@/components/auth/SignUpModal'; // Adjust the path as necessary
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const { login } = useContext(AuthContext);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Login form submitted"); // Log form submission
+    try {
+      await login(email, password);
+      console.log("Redirecting to Members Zone...");
+      router.push('/members-zone'); // Redirect to members-zone
+    } catch (error) {
+      console.error("Login failed", error); // Log any errors during login
+    }
+  };
+
+  const [show, setShow] = useState(false);
+  const handleClick = () => setShow(!show);
+
+  const handleSignUpRedirect = () => {
+    router.push('/signup'); // Redirect to the signup page
+  };
+
+  return (
+    <Container maxW={'5xl'} centerContent bg="black" p={4} borderRadius="md" h="80vh" display="flex" flexDirection="column" justifyContent="center">
+      <Grid templateColumns="1fr" gap={4} justifyItems="left" alignItems="start">
+        <Flex alignItems="center">
+          <Image 
+            boxSize="50px" 
+            src="/general/DZR_logo.svg" 
+            alt="DZR logo" 
+            rounded="md"
+            mr={4} 
+          />
+          <Heading color="white">Members Login</Heading>
+        </Flex>
+
+        <InputGroup size='md'>
+          <Input width='xs' variant='filled' placeholder='Email' bg={'white'} color={'grey'} value={email} onChange={(e) => setEmail(e.target.value)} />
+        </InputGroup>
+        <InputGroup size='md'>
+          <Input width='xs' variant='filled' type={show ? 'text' : 'password'} placeholder='Password' bg={'white'} color={'grey'} value={password} onChange={(e) => setPassword(e.target.value)} />
+          <InputRightElement width='5.5rem'>
+            <Button h='1.75rem' size='sm' onClick={handleClick}>
+              {show ? 'Hide' : 'Show'}
+            </Button>
+          </InputRightElement>
+        </InputGroup>
+        <Flex gap={4}>
+          <Button type='submit' width='20' onClick={handleSubmit} background="rgba(173, 26, 45, 0.95)" color={'white'}>Login</Button>
+          <SignUpModal />
+        </Flex>
+        <ForgotPasswordModal /> {/* Include the modal here */}
+      </Grid>
+    </Container>
+  );
+}
diff --git a/app/members-zone/dzr-team-race/page.tsx b/app/members-zone/dzr-team-race/page.tsx
@@ -0,0 +1,49 @@
+// pages/coming-soon.tsx
+'use client';
+
+import ComingSoon from "@/components/ComingSoon";
+import { useContext, useEffect } from 'react';
+import { AuthContext } from '@/components/auth/AuthContext';
+import { useRouter } from 'next/navigation';
+import { signOut } from 'firebase/auth'; // Import signOut
+import { auth } from '@/app/utils/firebaseConfig'; // Adjust path if necessary
+import LoadingSpinnerMemb from '@/components/LoadingSpinnerMemb';
+
+import {
+  Container,
+  Heading,
+  Text,
+  Stack,
+  Button,
+  Center, // Import Button
+} from '@chakra-ui/react';
+
+const DZRTeamRace = () => {
+    const { currentUser, loading } = useContext(AuthContext);
+    const router = useRouter();
+
+    useEffect(() => {
+        if (!loading && !currentUser) {
+            router.push('/login'); // Redirect to login if not authenticated
+        }
+    }, [currentUser, loading, router]);
+
+    if (loading) {
+        return <LoadingSpinnerMemb/> // Show loading while checking auth
+    }
+
+    return (
+        <div>
+            {currentUser ? (
+              <div>
+                <ComingSoon/>
+              </div>
+            ) : (
+                <Text align='center' color='white'>You need to login.</Text>
+            )}
+
+            </div>
+    );
+};
+
+export default DZRTeamRace;
diff --git a/app/members-zone/page.tsx b/app/members-zone/page.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from '@/components/auth/AuthContext';
+import { useRouter } from 'next/navigation';
+import { signOut } from 'firebase/auth'; // Import signOut
+import { auth } from '@/app/utils/firebaseConfig'; // Adjust path if necessary
+import FeaturesMembers from "@/components/FeaturesMembers";
+import LoadingSpinnerMemb from '@/components/LoadingSpinnerMemb';
+import EditProfileModal from '@/components/auth/EditProfileModal'; 
+
+import {
+  Container,
+  Heading,
+  Text,
+  Stack,
+  Button,
+  Box,
+  Divider,
+  Center, // Import Button
+} from '@chakra-ui/react';
+
+const MembersZone = () => {
+    const { currentUser, loading } = useContext(AuthContext);
+    const router = useRouter();
+    const [isEditProfileModalOpen, setEditProfileModalOpen] = useState(false);
+
+    useEffect(() => {
+        if (!loading && !currentUser) {
+            router.push('/login'); // Redirect to login if not authenticated
+        }
+    }, [currentUser, loading, router]);
+
+    const handleLogout = async () => {
+      try {
+          await signOut(auth); // Sign out the user
+          router.push('/login'); // Redirect to login after logout
+      } catch (error: any) { // Use 'any' for general error type
+          console.error("Logout failed:", error.message); // Safely access error.message
+      }
+  };
+
+    if (loading) {
+        return  <LoadingSpinnerMemb/>; // Show loading while checking auth
+    }
+
+    return (
+    <div style={{backgroundColor:'black'}}>
+        <Container maxW={{base:'95vw', sm:'80vw', md:'70vw'}}  display="flex" flexDirection="column">
+
+            {currentUser ? (
+            <>
+                <Stack spacing={4} as={Container} maxW={'3xl'} textAlign={'center'}>
+                    <Heading color='white'>Members Zone</Heading>
+                    <Text color={'white'}>Welcome, {currentUser.displayName}</Text>
+                    <Center>
+                        <Button background="rgba(173, 26, 45, 0.95)" color={'white'} onClick={handleLogout}  >
+                            Log Out
+                        </Button>
+                        <Button background="rgba(0, 122, 255, 0.95)" color={'white'} onClick={() => setEditProfileModalOpen(true)} ml={4}>
+                            Edit Profile
+                        </Button>
+                    </Center>
+                    <Divider mb={4}/>
+                </Stack>
+                <FeaturesMembers/>
+
+                {/* Edit Profile Modal */}
+                <EditProfileModal 
+                isOpen={isEditProfileModalOpen} 
+                onClose={() => setEditProfileModalOpen(false)} 
+                />
+                </>
+                ) : (
+                <Text align='center' color='white'>You need to login.</Text>
+                )}
+                </Container>
+                    </div>
+                    );
+                };
+
+export default MembersZone;
diff --git a/app/members-zone/race-calendar/page.tsx b/app/members-zone/race-calendar/page.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useContext, useEffect } from 'react';
+import { AuthContext } from '@/components/auth/AuthContext';
+import { useRouter } from 'next/navigation';
+import { signOut } from 'firebase/auth'; // Import signOut
+import { auth } from '@/app/utils/firebaseConfig'; // Adjust path if necessary
+import LoadingSpinnerMemb from '@/components/LoadingSpinnerMemb';
+
+import GoogleCalendarEmbed from "@/components/GoogleCalendar";
+import {
+  Container,
+  Heading,
+  Text,
+  Stack,
+  Button,
+  Center, // Import Button
+} from '@chakra-ui/react';
+
+const RaceCalendar = () => {
+    const { currentUser, loading } = useContext(AuthContext);
+    const router = useRouter();
+
+    useEffect(() => {
+        if (!loading && !currentUser) {
+            router.push('/login'); // Redirect to login if not authenticated
+        }
+    }, [currentUser, loading, router]);
+
+    const handleLogout = async () => {
+      try {
+          await signOut(auth); // Sign out the user
+          router.push('/login'); // Redirect to login after logout
+      } catch (error: any) { // Use 'any' for general error type
+          console.error("Logout failed:", error.message); // Safely access error.message
+      }
+  };
+
+    if (loading) {
+        return <LoadingSpinnerMemb/>; // Show loading while checking auth
+    }
+
+    return (
+        <div>
+            {currentUser ? (
+              <div>
+                <GoogleCalendarEmbed calendarId="138f1219bfbe08c3493a0457232fc30de6b6811c7bdcbf43c4ea14b84627135d%40group.calendar.google.com&ctz=Europe%2FCopenhagen"/>
+                <Center>
+                <Button background="rgba(173, 26, 45, 0.95)" color={'white'} onClick={handleLogout} mt={4} mb={4}>
+                    Log Out
+                </Button>
+                </Center>
+              </div>
+            ) : (
+                <Text align='center' color='white'>You need to login.</Text>
+            )}
+
+            </div>
+    );
+};
+
+export default RaceCalendar;