From ab03de3659d39fe67f566240dc3a2a6ac9ab9634 Mon Sep 17 00:00:00 2001
From: tanish35 <tanishmajumdar2912@gmail.com>
Date: Mon, 28 Oct 2024 11:07:31 +0530
Subject: [PATCH] Fix college names,change signup,fix line bug

---
 frontend/src/components/AddDetails.jsx        |   2 +-
 frontend/src/components/Register.jsx          | 335 ++++++++++--------
 frontend/src/components/SearchBar.jsx         |  35 +-
 frontend/src/components/data/collegeNames.jsx |  16 +-
 frontend/src/styles/register.css              | 202 +++++++++++
 5 files changed, 422 insertions(+), 168 deletions(-)
 create mode 100644 frontend/src/styles/register.css

diff --git a/frontend/src/components/AddDetails.jsx b/frontend/src/components/AddDetails.jsx
index 8d4da4e..ec78532 100644
--- a/frontend/src/components/AddDetails.jsx
+++ b/frontend/src/components/AddDetails.jsx
@@ -21,7 +21,7 @@ import { z } from "zod";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 
-import { collegeNames } from "./data/collegeNames";
+import collegeNames from "./data/collegeNames";
 import { courseNames } from "./data/courseName";
 import { location } from "./data/location";
 
diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
index 9f15972..23122b3 100644
--- a/frontend/src/components/Register.jsx
+++ b/frontend/src/components/Register.jsx
@@ -16,11 +16,12 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import { set, z } from "zod";
+import "../styles/register.css";
 
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 
-import { collegeNames } from "./data/collegeNames";
+import collegeNames from "./data/collegeNames";
 import { courseNames } from "./data/courseName";
 import { location } from "./data/location";
 
@@ -182,202 +183,238 @@ const RegisterForm = () => {
   };
 
   return (
-    <Box w="100%" maxW="500px" mx="auto" mt="5">
-      <FormLabel fontSize="5xl" textAlign="center">
-        Register
-      </FormLabel>
+    <Box className="container">
       {/* <Navbar btnName="Login"/> */}
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="form_area">
+        <FormLabel className="title" textAlign="center">
+          Register
+        </FormLabel>
         <VStack spacing={4}>
-          <FormControl id="email" isRequired>
-            <FormLabel>Email</FormLabel>
+          <FormControl id="email" isRequired className="form_group">
+            <FormLabel className="input-label">Email</FormLabel>
             <Input
               type="email"
               name="email"
               value={formData.email}
               onChange={handleChange}
               placeholder="Enter your email"
+              className="form_style"
             />
             {errors.email && <Box color="red">{errors.email}</Box>}
           </FormControl>
 
-          <FormControl id="username" isRequired>
-            <FormLabel>Username</FormLabel>
+          <FormControl id="username" isRequired className="form_group">
+            <FormLabel className="input-label">Username</FormLabel>
             <Input
               type="text"
               name="username"
               value={formData.username}
               onChange={handleChange}
               placeholder="Enter your username"
+              className="form_style"
             />
             {errors.username && <Box color="red">{errors.username}</Box>}
           </FormControl>
 
-          <FormControl id="password" isRequired>
-            <FormLabel>Password</FormLabel>
+          <FormControl id="password" isRequired className="form_group">
+            <FormLabel className="input-label"> Password</FormLabel>
             <Input
               type="password"
               name="password"
               value={formData.password}
               onChange={handleChange}
               placeholder="Enter your password"
+              className="form_style"
             />
             {errors.password && <Box color="red">{errors.password}</Box>}
           </FormControl>
 
-          <FormControl id="collegeName">
-            <FormLabel>College Name</FormLabel>
-            <Autosuggest
-              suggestions={suggestionsCollege}
-              onSuggestionsFetchRequested={onSuggestionsFetchRequestedCollege}
-              onSuggestionsClearRequested={onSuggestionsClearRequestedCollege}
-              getSuggestionValue={getSuggestionValue}
-              renderSuggestion={renderSuggestion}
-              inputProps={{
-                placeholder: "Search colleges...",
-                value: formData.collegeName,
-                onChange: (_, { newValue }) =>
-                  setFormData({ ...formData, collegeName: newValue }),
-              }}
-              renderInputComponent={(inputProps) => (
-                <Input
-                  {...inputProps}
-                  border="2px solid"
-                  borderColor="gray.300"
-                  padding={4}
-                  borderRadius="md"
-                  mb={3}
-                  _focus={{
-                    borderColor: "blue.500",
-                    boxShadow: "0 0 0 1px #3182CE",
-                  }}
-                />
-              )}
-              renderSuggestionsContainer={({ containerProps, children }) => (
-                <Box
-                  {...containerProps}
-                  bg="white"
-                  boxShadow="md"
-                  borderRadius="md"
-                  mt={2}
-                  maxHeight="300px"
-                  overflowY="auto"
-                  border="1px solid"
-                  borderColor="gray.200"
-                >
-                  <List>{children}</List>
-                </Box>
-              )}
-            />
+          <FormControl id="collegeName" className="form_group">
+            <FormLabel className="input-label">College Name</FormLabel>
+            <Box className="autosuggest_container">
+              <Autosuggest
+                suggestions={suggestionsCollege}
+                onSuggestionsFetchRequested={onSuggestionsFetchRequestedCollege}
+                onSuggestionsClearRequested={onSuggestionsClearRequestedCollege}
+                getSuggestionValue={getSuggestionValue}
+                renderSuggestion={renderSuggestion}
+                inputProps={{
+                  placeholder: "Search colleges...",
+                  value: formData.collegeName,
+                  onChange: (_, { newValue }) =>
+                    setFormData({ ...formData, collegeName: newValue }),
+                }}
+                renderInputComponent={(inputProps) => (
+                  <Input
+                    {...inputProps}
+                    border="2px solid"
+                    borderColor="gray.300"
+                    padding={4}
+                    borderRadius="md"
+                    mb={3}
+                    _focus={{
+                      borderColor: "blue.500",
+                      boxShadow: "0 0 0 1px #3182CE",
+                    }}
+                    className="autosuggest_input"
+                  />
+                )}
+                renderSuggestionsContainer={({ containerProps, children }) => {
+                  const hasSuggestions = React.Children.count(children) > 0;
+
+                  return hasSuggestions ? (
+                    <Box
+                      {...containerProps}
+                      bg="white"
+                      boxShadow="md"
+                      borderRadius="md"
+                      mt={2}
+                      maxHeight="300px"
+                      overflowY="auto"
+                      border="1px solid"
+                      borderColor="gray.200"
+                      className="autosuggest_list"
+                    >
+                      <List>{children}</List>
+                    </Box>
+                  ) : null;
+                }}
+              />
+            </Box>
           </FormControl>
 
-          <FormControl id="courseName">
-            <FormLabel>Course Name</FormLabel>
-            <Autosuggest
-              suggestions={suggestionsCourse}
-              onSuggestionsFetchRequested={onSuggestionsFetchRequestedCourse}
-              onSuggestionsClearRequested={onSuggestionsClearRequestedCourse}
-              getSuggestionValue={getSuggestionValue}
-              renderSuggestion={renderSuggestion}
-              inputProps={{
-                placeholder: "Search courses...",
-                value: formData.courseName,
-                onChange: (_, { newValue }) =>
-                  setFormData({ ...formData, courseName: newValue }),
-              }}
-              renderInputComponent={(inputProps) => (
-                <Input
-                  {...inputProps}
-                  border="2px solid"
-                  borderColor="gray.300"
-                  padding={4}
-                  borderRadius="md"
-                  mb={3}
-                  _focus={{
-                    borderColor: "blue.500",
-                    boxShadow: "0 0 0 1px #3182CE",
-                  }}
-                />
-              )}
-              renderSuggestionsContainer={({ containerProps, children }) => (
-                <Box
-                  {...containerProps}
-                  bg="white"
-                  boxShadow="md"
-                  borderRadius="md"
-                  mt={2}
-                  maxHeight="300px"
-                  overflowY="auto"
-                  border="1px solid"
-                  borderColor="gray.200"
-                >
-                  <List>{children}</List>
-                </Box>
-              )}
-            />
+          <FormControl id="courseName" className="form_group">
+            <FormLabel className="input-label">Course Name</FormLabel>
+            <Box className="autosuggest_container">
+              <Autosuggest
+                suggestions={suggestionsCourse}
+                onSuggestionsFetchRequested={onSuggestionsFetchRequestedCourse}
+                onSuggestionsClearRequested={onSuggestionsClearRequestedCourse}
+                getSuggestionValue={getSuggestionValue}
+                renderSuggestion={renderSuggestion}
+                inputProps={{
+                  placeholder: "Search courses...",
+                  value: formData.courseName,
+                  onChange: (_, { newValue }) =>
+                    setFormData({ ...formData, courseName: newValue }),
+                }}
+                renderInputComponent={(inputProps) => (
+                  <Input
+                    {...inputProps}
+                    borderColor="gray.300"
+                    padding={4}
+                    borderRadius="md"
+                    mb={3}
+                    _focus={{
+                      borderColor: "blue.500",
+                      boxShadow: "0 0 0 1px #3182CE",
+                    }}
+                    className="autosuggest_input"
+                  />
+                )}
+                renderSuggestionsContainer={({ containerProps, children }) => {
+                  const hasSuggestions = React.Children.count(children) > 0;
+
+                  return hasSuggestions ? (
+                    <Box
+                      {...containerProps}
+                      bg="white"
+                      boxShadow="md"
+                      borderRadius="md"
+                      mt={2}
+                      maxHeight="300px"
+                      overflowY="auto"
+                      border="1px solid"
+                      borderColor="gray.200"
+                      className="autosuggest_list"
+                    >
+                      <List>{children}</List>
+                    </Box>
+                  ) : null;
+                }}
+              />
+            </Box>
           </FormControl>
 
-          <FormControl id="location">
-            <FormLabel>Location</FormLabel>
-            <Autosuggest
-              suggestions={suggestionsLocation}
-              onSuggestionsFetchRequested={onSuggestionsFetchRequestedLocation}
-              onSuggestionsClearRequested={onSuggestionsClearRequestedLocation}
-              getSuggestionValue={getSuggestionValue}
-              renderSuggestion={renderSuggestion}
-              inputProps={{
-                placeholder: "Search location...",
-                value: formData.location,
-                onChange: (_, { newValue }) =>
-                  setFormData({ ...formData, location: newValue }),
-              }}
-              renderInputComponent={(inputProps) => (
-                <Input
-                  {...inputProps}
-                  border="2px solid"
-                  borderColor="gray.300"
-                  padding={4}
-                  borderRadius="md"
-                  mb={3}
-                  _focus={{
-                    borderColor: "blue.500",
-                    boxShadow: "0 0 0 1px #3182CE",
-                  }}
-                />
-              )}
-              renderSuggestionsContainer={({ containerProps, children }) => (
-                <Box
-                  {...containerProps}
-                  bg="white"
-                  boxShadow="md"
-                  borderRadius="md"
-                  mt={2}
-                  maxHeight="300px"
-                  overflowY="auto"
-                  border="1px solid"
-                  borderColor="gray.200"
-                >
-                  <List>{children}</List>
-                </Box>
-              )}
-            />
+          <FormControl id="location" className="form_group">
+            <FormLabel className="input-label">Location</FormLabel>
+            <Box className="autosuggest_container">
+              <Autosuggest
+                suggestions={suggestionsLocation}
+                onSuggestionsFetchRequested={
+                  onSuggestionsFetchRequestedLocation
+                }
+                onSuggestionsClearRequested={
+                  onSuggestionsClearRequestedLocation
+                }
+                getSuggestionValue={getSuggestionValue}
+                renderSuggestion={renderSuggestion}
+                inputProps={{
+                  placeholder: "Search location...",
+                  value: formData.location,
+                  onChange: (_, { newValue }) =>
+                    setFormData({ ...formData, location: newValue }),
+                }}
+                renderInputComponent={(inputProps) => (
+                  <Input
+                    {...inputProps}
+                    border="2px solid"
+                    borderColor="gray.300"
+                    padding={4}
+                    borderRadius="md"
+                    mb={3}
+                    _focus={{
+                      borderColor: "blue.500",
+                      boxShadow: "0 0 0 1px #3182CE",
+                    }}
+                    className="autosuggest_input"
+                  />
+                )}
+                renderSuggestionsContainer={({ containerProps, children }) => {
+                  const hasSuggestions = React.Children.count(children) > 0;
+
+                  return hasSuggestions ? (
+                    <Box
+                      {...containerProps}
+                      bg="white"
+                      boxShadow="md"
+                      borderRadius="md"
+                      mt={2}
+                      maxHeight="300px"
+                      overflowY="auto"
+                      border="1px solid"
+                      borderColor="gray.200"
+                      className="autosuggest_list"
+                    >
+                      <List>{children}</List>
+                    </Box>
+                  ) : null;
+                }}
+              />
+            </Box>
           </FormControl>
 
-          <FormControl as="fieldset" id="isOnline">
-            <FormLabel as="legend">Is Online?</FormLabel>
+          <FormControl as="fieldset" id="isOnline" className="radio_group">
+            <FormLabel as="legend" className="radio_label">
+              Is Online?
+            </FormLabel>
             <RadioGroup
               name="isOnline"
               value={formData.isOnline.toString()}
               onChange={handleRadioChange}
             >
               <Stack direction="row">
-                <Radio value="true">Yes</Radio>
-                <Radio value="false">No</Radio>
+                <Radio value="true" className="radio_button">
+                  Yes
+                </Radio>
+                <Radio value="false" className="radio_button">
+                  No
+                </Radio>
               </Stack>
             </RadioGroup>
           </FormControl>
 
-          <Button type="submit" colorScheme="blue" width="full">
+          <Button type="submit" colorScheme="blue" width="full" className="btn">
             Register
           </Button>
         </VStack>
diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx
index c2d5a63..2673e41 100644
--- a/frontend/src/components/SearchBar.jsx
+++ b/frontend/src/components/SearchBar.jsx
@@ -112,21 +112,26 @@ const SearchBar = () => {
             }}
           />
         )}
-        renderSuggestionsContainer={({ containerProps, children }) => (
-          <Box
-            {...containerProps}
-            bg="white"
-            boxShadow="md"
-            borderRadius="md"
-            mt={2}
-            maxHeight="300px"
-            overflowY="auto"
-            border="1px solid"
-            borderColor="gray.200"
-          >
-            <List>{children}</List>
-          </Box>
-        )}
+        renderSuggestionsContainer={({ containerProps, children }) => {
+          const hasSuggestions = React.Children.count(children) > 0;
+
+          return hasSuggestions ? (
+            <Box
+              {...containerProps}
+              bg="white"
+              boxShadow="md"
+              borderRadius="md"
+              mt={2}
+              maxHeight="300px"
+              overflowY="auto"
+              border="1px solid"
+              borderColor="gray.200"
+              className="autosuggest_list"
+            >
+              <List>{children}</List>
+            </Box>
+          ) : null;
+        }}
       />
       {/* <Button onClick={handleSearchSubmit} colorScheme="blue" width="100%">
         Search
diff --git a/frontend/src/components/data/collegeNames.jsx b/frontend/src/components/data/collegeNames.jsx
index cbaa006..69cb108 100644
--- a/frontend/src/components/data/collegeNames.jsx
+++ b/frontend/src/components/data/collegeNames.jsx
@@ -1,4 +1,4 @@
-export const collegeNames = [
+const collegeNames = [
   "Acharya N.G. Ranga Agricultural University	Hyderabad",
   "Acharya Nagarjuna University	Guntur",
   "Acharya Narendra Deva University of Agriculture & Technology	Faizabad",
@@ -335,7 +335,7 @@ export const collegeNames = [
 "ITM University Raipur	Raipur",
 "ITM Vocational University	Waghodia",
 "J.C. Bose University of Science and Technology	Faridabad",
-"Jadavpur University	Kolkata",
+"Jadavpur University Kolkata",
 "Jagadguru Ramanandacharya Rajasthan Sanskrit University	Jaipur",
 "Jagadguru Rambhadracharya Handicapped University	Chitrakoot",
 "Jagan Nath University	Jhajjar",
@@ -888,4 +888,14 @@ export const collegeNames = [
     "YBN University, Ranchi",
     "Yenepoya University, Mangalore",
     "Yogi Vemana University, Kadapa"
-  ]  
\ No newline at end of file
+  ]  
+
+const cleanCollegeNames = (names) => {
+  return names.map(name => name.trim().replace(/\s+/g, ' '));
+};
+
+// Cleaned up college names
+const cleanedCollegeNames = cleanCollegeNames(collegeNames);
+
+// Export the cleaned array
+export default cleanedCollegeNames;
\ No newline at end of file
diff --git a/frontend/src/styles/register.css b/frontend/src/styles/register.css
new file mode 100644
index 0000000..0736f8b
--- /dev/null
+++ b/frontend/src/styles/register.css
@@ -0,0 +1,202 @@
+/* General container and form styles */
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  width: 100%;
+  padding: 20px;
+}
+
+.form_area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background: linear-gradient(135deg, #eddcd9, #f6c3b6) !important;
+  height: auto;
+  width: auto;
+  border: 2px solid #264143;
+  border-radius: 20px;
+  box-shadow: 3px 4px 0px 1px #e99f4c;
+  padding: 4em;
+}
+
+.title {
+  color: #264143;
+  font-weight: 900;
+  font-size: 3em !important;
+  margin-top: 5px !important;
+}
+
+/* Keyframes for the fade-in effect */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+    /* Slight upward movement */
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.input-label {
+  font-weight: 600;
+  color: #264143;
+  margin: 5px 0;
+}
+
+.form_group {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  margin: 10px;
+  width: 100%;
+}
+
+.form_style {
+  outline: none;
+  border: 2px solid #264143;
+  box-shadow: 3px 4px 0px 1px #e99f4c;
+  width: 35vw !important;
+  padding: 15px;
+  border-radius: 4px;
+  font-size: 16px;
+  min-width: 300px;
+  color: #264143;
+  /* Change this to a contrasting color */
+  background-color: #eddcd9;
+  /* Ensure the background matches */
+}
+
+@media (max-width: 600px) {
+  .form_style {
+    width: 60vw !important;
+  }
+}
+
+.form_style:focus {
+  transform: translateY(4px);
+  box-shadow: 1px 2px 0px 0px #e99f4c;
+}
+
+.autosuggest_container {
+  position: relative;
+  width: 100%;
+}
+
+.autosuggest_input {
+  width: 35vw !important;
+  /* border: 2px solid #264143; */
+  box-shadow: 3px 4px 0px 1px #e99f4c;
+  color: #264143;
+  padding: 15px;
+  border-radius: 4px;
+  font-size: 16px;
+  outline: none;
+}
+
+@media (max-width: 600px) {
+  .autosuggest_input {
+    width: 60vw !important;
+  }
+}
+
+.autosuggest_list {
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  background: #ffffff;
+  border: 2px solid #264143;
+  box-shadow: 3px 4px 0px 1px #e99f4c;
+  border-radius: 4px;
+  z-index: 1;
+}
+
+.autosuggest_item {
+  padding: 12px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.autosuggest_item:hover {
+  background-color: #e99f4c;
+}
+
+/* Radio buttons */
+.radio_group {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.radio_label {
+  font-weight: 600;
+  color: #264143;
+  font-size: 1.2em;
+  margin-bottom: 10px;
+  transition: color 0.3s ease;
+}
+
+.radio_label:hover {
+  color: #e99f4c;
+}
+
+.radio_button {
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  color: #264143;
+  width: 1.15em;
+  height: 1.15em;
+  border: 2px solid #264143;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  box-shadow: 3px 4px 0px 1px #e99f4c;
+}
+
+.radio_button:checked::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.25em;
+  left: 0.25em;
+  background-color: #264143;
+}
+
+.radio_button:focus {
+  transform: translateY(2px);
+  box-shadow: 1px 2px 0px 0px #e99f4c;
+}
+
+.btn {
+  padding: 15px;
+  margin: 25px 0px;
+  width: 100%;
+  font-size: 16px;
+  background: #de5499;
+  border-radius: 10px;
+  font-weight: 800;
+  box-shadow: 3px 3px 0px 0px #e99f4c;
+  cursor: pointer;
+}
+
+.btn:hover {
+  opacity: 0.9;
+}
+
+.input-label:hover {
+  color: #e99f4c;
+}