Skip to content

Commit

Permalink
redesign login page
Browse files Browse the repository at this point in the history
  • Loading branch information
Somnath-Chattaraj committed Oct 8, 2024
1 parent 5241bff commit 06d6c38
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 33 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
[![GitHub issues](https://img.shields.io/github/issues/tanish35/Campus-Chatter)](https://github.com/Somnath-Chattaraj/Campus-Chatter/issues)
[![GitHub forks](https://img.shields.io/github/forks/tanish35/Campus-Chatter)](https://github.com/Somnath-Chattaraj/Campus-Chatter/network)
[![GitHub stars](https://img.shields.io/github/stars/tanish35/Campus-Chatter)](https://github.com/Somnath-Chattaraj/Campus-Chatter/stargazers)
[![License: Royalty License](https://img.shields.io/badge/License-Royalty-blue)](https://github.com/Somnath-Chattaraj/Campus-Chatter/blob/master/LICENSE)
[![GitHub license](https://img.shields.io/github/license/tanish35/Campus-Chatter)](https://github.com/Somnath-Chattaraj/Campus-Chatter/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
[![code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)

Expand Down
14 changes: 10 additions & 4 deletions backend/src/controllers/userControllers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -425,11 +425,14 @@ const addUsername = asyncHandler(async (req: Request, res: Response) => {
if (!username) {
return res.status(400).json({ message: "Please provide all fields" });
}
const response = await prisma.user.findUnique({
const response = await prisma.user.findFirst({
where: {
username,
OR: [
{ username: username },
]
},
});

if (response) {
return res.status(409).json({ message: "Username already exists" });
}
Expand All @@ -451,11 +454,14 @@ const addDetailsToUser = asyncHandler(async (req: Request, res: Response) => {
if (!collegeName || !courseName || !location || isOnline === undefined) {
return res.status(400).json({ message: "Please provide all fields" });
}
const user = await prisma.user.findUnique({
const user = await prisma.user.findFirst({
where: {
username,
OR: [
{ username: username },
]
},
});

if (user) {
return res.status(409).json({ message: "Username already exists" });
}
Expand Down
71 changes: 43 additions & 28 deletions frontend/src/components/Login.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ import {
Stack,
useToast,
} from "@chakra-ui/react";
import { FcGoogle } from "react-icons/fc"; // Google icon
import { FaGithub } from "react-icons/fa"; // GitHub icon
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { auth, googleProvider } from "../firebase.js";
import { auth, googleProvider, githubProvider } from "../firebase.js";
import { signInWithPopup } from "firebase/auth";

const LoginPage = () => {
Expand All @@ -27,7 +29,6 @@ const LoginPage = () => {
try {
const result = await signInWithPopup(auth, googleProvider);
const user = result.user;
console.log("Google login result: ");
const response = await axios.post(
"/user/google",
{
Expand All @@ -36,6 +37,7 @@ const LoginPage = () => {
},
{ withCredentials: true }
);
// console.log(response.data.isCollegeEmail);
if (response.data.isCollegeEmail === true) {
toast({
title: "Signup successful.",
Expand All @@ -46,16 +48,6 @@ const LoginPage = () => {
});
navigate(`/addDetails/${response.data.userId}`);
return;
} else if (!response.data.username) {
toast({
title: "Signup successful.",
description: "You are being redirected to add username.",
status: "success",
duration: 3000,
isClosable: true,
});
navigate("/addusername");
return;
}
toast({
title: "Login successful.",
Expand Down Expand Up @@ -99,16 +91,6 @@ const LoginPage = () => {
});
navigate(`/addDetails/${response.data.userId}`);
return;
} else if (!response.data.username) {
toast({
title: "Signup successful.",
description: "You are being redirected to add username.",
status: "success",
duration: 3000,
isClosable: true,
});
navigate(`/addusername/${response.data.userId}`);
return;
}
toast({
title: "Login successful.",
Expand Down Expand Up @@ -160,10 +142,17 @@ const LoginPage = () => {
};

return (
<Flex minH="100vh" align="center" justify="center" bg="gray.50">
<Container maxW="md" bg="white" boxShadow="md" p={6} rounded="md">
<Flex minH="100vh" align="center" justify="center" bg="black">
<Container
maxW="md"
bg="gray.800"
boxShadow="md"
p={6}
rounded="md"
color="white"
>
<Stack spacing={4}>
<Heading as="h1" size="lg" textAlign="center">
<Heading as="h1" size="lg" textAlign="center" color="white">
Login
</Heading>
<FormControl id="email">
Expand All @@ -173,6 +162,8 @@ const LoginPage = () => {
value={email}
onChange={(e) => setEmail(e.target.value)}
required
bg="gray.700"
color="white"
/>
</FormControl>
<FormControl id="password">
Expand All @@ -182,18 +173,42 @@ const LoginPage = () => {
value={password}
onChange={(e) => setPassword(e.target.value)}
required
bg="gray.700"
color="white"
/>
</FormControl>
<Button colorScheme="teal" isLoading={loading} onClick={handleLogin}>
<Button
colorScheme="teal"
isLoading={loading}
onClick={handleLogin}
_hover={{ bg: "teal.500" }}
>
Login
</Button>
<Button colorScheme="red" onClick={handleGoogleLogin}>
<Button
leftIcon={<FcGoogle />}
colorScheme="gray"
onClick={handleGoogleLogin}
bg="white"
color="black"
_hover={{ bg: "gray.200" }}
>
Login with Google
</Button>
<Button
leftIcon={<FaGithub />}
colorScheme="gray"
onClick={handleGithubLogin}
bg="white"
color="black"
_hover={{ bg: "gray.200" }}
>
Login with Github
</Button>
</Stack>
</Container>
</Flex>
);
};

export default LoginPage;
export default LoginPage;
34 changes: 34 additions & 0 deletions frontend/src/hook/useUser.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import axios from "axios";
import { useEffect, useState } from "react";

export const useUser = () => {
const [loading, setLoading] = useState(true);
const [userDetails, setUserDetails] = useState(null);

async function getDetails() {
try {
const res = await axios.get('/', {
withCredentials: true,
});
setUserDetails(res.data);
setLoading(false); // Move setLoading inside try block to ensure it's always set
}
catch (err) {
console.log(err);
setLoading(false); // Set loading to false in case of error
}
}

useEffect(() => {
getDetails();
}, []); // Empty dependency array, so it runs only once on component mount

useEffect(() => {
if (userDetails) {

// console.log("User details:", userDetails);
}
}, [userDetails]); // Log userDetails whenever it changes

return { loading, userDetails };
};

0 comments on commit 06d6c38

Please sign in to comment.