Merge pull request #11 from Mayank-704/master

Login Page

src/components/LoginForm/LoginPage.module.css

@@ -0,0 +1,151 @@
+/* Overall container styling */
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  /* Navbar styling */
+  .navbar {
+    width: 100%;
+    padding: 20px 40px;
+    background-color: white;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+  }
+
+  .logo {
+    font-size: 28px;
+    font-weight: bold;
+    color: #000;
+  }
+
+  /* Role toggle button styling */
+  .roleToggle {
+    margin-top: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    gap: 20px;
+    border-radius: 50px;
+    border: 1px solid #F1A02F;
+  }
+
+  .toggleButton {
+    width: 160px;
+    height: 45px;
+    border-radius: 25px;
+    font-weight: bold;
+    font-size: 16px;
+    border: 1px solid white;
+    transition: background-color 0.3s, border-color 0.3s;
+  }
+
+  .toggleButton:hover {
+    border-color: #f08c00;
+  }
+
+  /* Form container styling */
+  .formContainer {
+    display: flex;
+    justify-content: space-evenly;
+    gap: rem(80px);
+    align-items: center;
+    margin-top: 40px;
+    padding: 40px 20px;
+    background-color: white;
+    border-radius: 10px;
+    border: 2px solid #948166;
+    @media (max-width: $mantine-breakpoint-md) {
+        flex-direction: column;
+       }
+  }
+  .formContainerReverse {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    gap: rem(80px);
+    margin-top: 40px;
+    padding: 40px 20px;
+    background-color: white;
+    border-radius: 10px;
+    border: 2px solid #948166;
+    @media (max-width: $mantine-breakpoint-md) {
+        flex-direction: column-reverse;
+       }
+  }
+
+
+
+  /* Welcome message box styling */
+  .infoBox {
+    max-width: 350px;
+
+  }
+
+  .welcomeText {
+    font-size: 28px;
+    font-weight: 700;
+    color: #333;
+    margin-bottom: 16px;
+  }
+
+  .descriptionText {
+    font-size: 18px;
+    color: #666;
+    line-height: 1.5;
+  }
+
+  /* Login form styling */
+  .loginBox {
+    max-width: 300px;
+    width: 100%;
+    background-color: #FFF9F1;
+    padding-block: rem(20px);
+    padding-inline: rem(24px);
+  }
+
+  .input {
+    margin-bottom: 20px;
+  }
+
+  .loginButton {
+    background-color: #f08c00;
+    color: white;
+    width: 100%;
+    height: 45px;
+    font-size: 16px;
+    border-radius: 8px;
+    margin-top: 10px;
+    transition: background-color 0.3s;
+  }
+
+  .loginButton:hover {
+    background-color: #d97b00;
+  }
+
+  .googleButton {
+    margin-top: 20px;
+    height: 45px;
+    border-radius: 8px;
+  }
+
+  .googleButton:hover {
+    background-color: #f5f5f5;
+  }
+
+  .signUp {
+    cursor: pointer;
+    font-weight: 600;
+    color: #007bff;
+  }
+
+  .signUp:hover {
+    text-decoration: underline;
+  }
+

src/components/LoginForm/LoginPage.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Container, Button,  Group, Text, Box } from '@mantine/core';
+import styles from './LoginPage.module.css';
+import { OrganizerLogin } from './Organizerlogin';
+import { UserLogin } from './UserLogin';
+interface LoginFormProps {
+    setpage: (page: 'Signup' | 'Login' ) => void;
+  }
+function LoginPage ({setpage}:LoginFormProps) {
+  const [isOrganizer, setIsOrganizer] = useState<boolean>(false);
+
+  const toggleRole = () => {
+    setIsOrganizer((prev) => !prev);
+  };
+
+  return (
+    <Container className={styles.container}>
+      <Box className={styles.navbar}>
+        <Text className={styles.logo}>Maidan</Text>
+      </Box>
+
+      <Group variant='outline' className={styles.roleToggle}>
+        <Button
+          variant={isOrganizer ? "filled" : "outline"}
+          className={styles.toggleButton}
+          color='#F1A02F'
+          onClick={toggleRole}
+        >
+          For Organizer
+        </Button>
+        <Button
+          variant={!isOrganizer ? "filled" : "outline"}
+          className={styles.toggleButton}
+           color='#F1A02F'
+          onClick={toggleRole}
+        >
+          For Players
+        </Button>
+      </Group>
+{isOrganizer?<OrganizerLogin setpage={setpage}/>:<UserLogin setpage={setpage}/>}
+
+    </Container>
+  );
+};
+
+export default LoginPage;

src/components/LoginForm/OrganizerLogin.tsx

@@ -0,0 +1,51 @@
+import {Box,Text,Group,Container,TextInput,PasswordInput,Divider,Button} from '@mantine/core'
+import classes from './LoginPage.module.css'
+import { GoogleIcon } from '@/components/SignupForm/GoogleIcon'
+interface OrganizerLoginProps {
+    setpage: (page: 'Signup' | 'Login' ) => void;
+  }
+export function OrganizerLogin({setpage}:OrganizerLoginProps){
+    return(
+        <Container className={classes.formContainer}>
+      <Box className={classes.infoBox}>
+          <Text className={classes.welcomeText}>
+             Welcome Organizer 
+          </Text>
+          <Text className={classes.descriptionText}>
+
+            Manage your tournaments, engage with players, and create unforgettable experiences.          </Text>
+        </Box>
+
+        <Box className={classes.loginBox}>
+          <TextInput
+            label="Email /Username"
+            placeholder="Enter your email address"
+            className={classes.input}
+          />
+          <PasswordInput
+            label="Password"
+            placeholder="Your Password"
+            required
+            className={classes.input}
+          />
+          <Button className={classes.loginButton}>Log in</Button>
+
+          <Divider my="sm" label="or" labelPosition="center" />
+
+          <Group grow mb="md" mt="md">
+          <Button variant="default" color="gray" fullWidth>
+            <Group p="center" m="xs">
+              <GoogleIcon />
+              <span>Log in with Google</span>
+            </Group>
+          </Button>
+        </Group>
+
+          <Group position="apart" mt="md">
+            <Text size="sm" color="dimmed">Don’t have an account</Text>
+            <Text size="sm" color="blue" className={classes.signUp} onClick={()=>setpage('Signup')}>Sign Up</Text>
+          </Group>
+        </Box>
+      </Container>
+    )
+}

src/components/LoginForm/UserLogin.tsx

@@ -0,0 +1,53 @@
+import {Box,Text,Group,Container,TextInput,PasswordInput,Divider,Button} from '@mantine/core'
+import classes from './LoginPage.module.css'
+import { GoogleIcon } from '@/components/SignupForm/GoogleIcon';
+interface UserLoginProps {
+    setpage: (page: 'Signup' | 'Login' ) => void;
+  }
+export function UserLogin({setpage}:UserLoginProps){
+    return(
+        <Container className={`${classes.formContainerReverse} `}>
+
+        <Box className={classes.loginBox}>
+          <TextInput
+            label="Email /Username"
+            placeholder="Enter your email address"
+            className={classes.input}
+          />
+          <PasswordInput
+            label="Password"
+            placeholder="Your Password"
+            required
+            className={classes.input}
+          />
+          <Button className={classes.loginButton}>Log in</Button>
+
+          <Divider my="sm" label="or" labelPosition="center" />
+
+          <Group grow mb="md" mt="md">
+          <Button variant="default" color="gray" fullWidth>
+            <Group p="center" m="xs">
+              <GoogleIcon />
+              <span>Log in with Google</span>
+            </Group>
+          </Button>
+        </Group>
+
+          <Group position="apart" mt="md">
+            <Text size="sm" color="dimmed">Don’t have an account</Text>
+            <Text size="sm" color="blue" className={classes.signUp} onClick={()=>setpage('Signup')}>Sign Up</Text>
+          </Group>
+        </Box>
+
+        <Box className={classes.infoBox}>
+          <Text className={classes.welcomeText}>
+             Welcome Champion
+          </Text>
+          <Text className={classes.descriptionText}>
+
+          Enter the arena and continue your journey towards greatness.          </Text>
+        </Box>
+
+      </Container>
+    )
+}

src/components/SignupForm/GoogleButton.tsx

@@ -11,6 +11,5 @@ export const GoogleButton: React.FC<ButtonProps> = (props) => (
     fullWidth
     {...props}
   >
-    Sign up with Google
   </Button>
 );

src/components/SignupForm/SignupForm.tsx

@@ -3,7 +3,10 @@ import {TextInput,PasswordInput,Paper,Title,Text,Container,Button,Divider,Group,
 import { useForm } from '@mantine/form';
 import { GoogleIcon } from './GoogleIcon';
 import classes from './SignupForm.module.css'
-export const SignupForm: React.FC = () => {
+export interface SignupFormProps {
+  setpage: (page: 'Signup' | 'Login' ) => void;
+}
+export function SignupForm({setpage}:SignupFormProps) {
   const form = useForm({
     initialValues: {
       email: '',
@@ -77,7 +80,7 @@ export const SignupForm: React.FC = () => {
         </Group>
 
         <Text ta="center" mt="md" className={classes.HaveanAccount}>
-          Already have an Account? <a href="#" style={{textDecoration:'none', color:'black'}}>Log in</a>
+          Already have an Account? <a href="#" style={{textDecoration:'none', color:'black'}} onClick={() => setpage('Login')}>Log in</a>
         </Text>
       </Paper>
     </Container>

src/components/Tournaments/Tournaments.tsx

@@ -12,28 +12,28 @@ const Tournaments: React.FC = () => {
     <Container size="lg" className={classes.container}>
       <Text className={classes.heading}>Ongoing</Text>
       <Grid>
-      <Grid.Col span={6} >
+      <Grid.Col span={{ base: 12, md: 12, lg: 6 }}>
       <NavLink to={"/Tournament/Details"}className={classes.Link}><Tcard/></NavLink>
       </Grid.Col>
-      <Grid.Col span={6}>
+      <Grid.Col span={{ base: 12, md: 12, lg: 6 }} >
         <Tcard/>
       </Grid.Col>   
       </Grid>
 
       <Grid>
-      <Grid.Col span={6}>
+      <Grid.Col span={{ base: 12, md: 12, lg: 6 }}>
       <Tcard/>
       </Grid.Col>
-      <Grid.Col span={6}>
+      <Grid.Col span={{ base: 12, md: 12, lg: 6 }}>
         <Tcard/>
       </Grid.Col>
       </Grid>
 
       <Grid>
-      <Grid.Col span={6}>
+      <Grid.Col span={{ base: 12, md: 12, lg: 6 }}>
       <Tcard/>
       </Grid.Col>
-      <Grid.Col span={6}>
+      <Grid.Col span={{ base: 12, md: 12, lg: 6 }}>
         <Tcard/>
       </Grid.Col>
       </Grid>

src/pages/SignUpPage.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import React,{useState} from 'react';
 import { SignupForm } from '../components/SignupForm/SignupForm';
+import LoginPage from '@/components/LoginForm/LoginPage';
 
 const SignUpPage: React.FC = () => {
+  const [subPage, setSubPage] = useState('Signup');
   return (
     <div>
-      <SignupForm />
+      {subPage==='Signup' && <SignupForm setpage={setSubPage} />}
+      {subPage==='Login' && <LoginPage setpage={setSubPage} />}
     </div>
   );
 };