Merge branch 'main' into signup

Signed-off-by: Sourabh Singh Rawat <[email protected]>
Bitbox-Connect · Nov 10, 2024 · 0f1a764 · 0f1a764
2 parents f448ee8 + 91d57a7
commit 0f1a764
Show file tree

Hide file tree

Showing 8 changed files with 318 additions and 276 deletions.
diff --git a/client/index.html b/client/index.html
diff --git a/client/src/App.css b/client/src/App.css
@@ -61,4 +61,4 @@ body {
 .alert-bar {
     width: max-content;
     box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
-}
+}
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -33,6 +33,7 @@ import NotFound from "./component/NotFound";
 import ProgressBar from "./component/ProgressBar/ProgressBar";
 import Cursor from './component/Cursor';
 import ReadMoreBlog from './component/ReadMoreBlog';
+import AI from "./component/AI";
 import AOS from "aos";
 import "aos/dist/aos.css";
 import Collab from "./component/Collab";
@@ -53,6 +54,7 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
         blog="Blogs"
         discussion="Discussion"
         contributors="Contributors"
+        ai="AI"
         Feedback="Feedback"
         showAlert={showAlert}
         mode={mode}
@@ -132,6 +134,7 @@ function App() {
               <Route exact path="/discussion" element={<Discussion mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path="/community" element={<Community mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               {/* <Route exact path="/ai" element={ <Ai mode={mode} setProgress={setProgress} showAlert={showAlert} /> } /> */}
+
               <Route exact path="/about" element={<About mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path="/feedback" element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path="/blog" element={<BlogPage mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
@@ -145,13 +148,12 @@ function App() {
               <Route exact path='/reset-password' element={<ResetPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/codeofconduct' element={<CodeOfConduct mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/contactus' element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-              {/* <Route exact path='/myprofile' element={<MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} /> */}
+
               <Route exact path='/feedback' element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/privacypolicy' element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/termofuse' element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/uploadProject' element={<UploadProject mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/createBlogPost' element={<CreateBlog />} />
-              {/* <Route exact path="/faq" element={ <Faq mode={mode} setProgress={setProgress} showAlert={showAlert} /> } /> */}
               <Route exact path='/read-more-blog/:id' element={<ReadMoreBlog mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/*' element={<NotFound />} />
             </Routes>

diff --git a/client/src/component/Ai.jsx b/client/src/component/Ai.jsx
@@ -38,7 +38,9 @@ const Ai = () => {
   };
 
   return (
-    <div className="p-6 min-h-screen text-black overflow-auto main-content">
+    <div className="p-6 min-h-screen flex flex-col justify-center text-black overflow-auto main-content">
+      {/* Heading */}
+      <h1 className="text-4xl font-semibold mb-4">AI Playground</h1>
       {/* API Key Input */}
       <div className="mb-4">
         <input

diff --git a/client/src/component/CreateBlog.jsx b/client/src/component/CreateBlog.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import './CreateBlog.css';
 import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
@@ -132,7 +132,7 @@ const CreateBlog = () => {
                         />
                     </div>
 
-                    <button type="submit" className="submit-button">Submit</button>
+                    <button disabled={loading} type="submit" className="submit-button">Submit</button>
                 </form>
                 {errors && <p className="error-message">{errors}</p>}
             </div>

diff --git a/client/src/component/GoogleTranslate.jsx b/client/src/component/GoogleTranslate.jsx
@@ -0,0 +1,42 @@
+// import { useEffect } from 'react';
+
+// const GoogleTranslate = () => {
+//     useEffect(() => {
+//         // Google Translate widget settings
+//         window.gtranslateSettings = {
+//             default_language: "en",
+//             detect_browser_language: true,
+//             wrapper_selector: ".gtranslate_wrapper",
+//         };
+
+//         // Add the Google Translate script
+//         const script = document.createElement("script");
+//         script.src = "https://cdn.gtranslate.net/widgets/latest/float.js";
+//         script.async = true;
+//         document.body.appendChild(script);
+
+//         // Clean up script on unmount
+//         return () => {
+//             document.body.removeChild(script);
+//         };
+//     }, []);
+
+//     return (
+//         <div
+//             className="gtranslate_wrapper"
+//             style={{
+//                 position: "fixed",
+//                 bottom: "10px",
+//                 right: "10px",
+//                 zIndex: 9999,
+//                 width: "120px",
+//                 height: "30px",
+//                 overflow: "hidden",
+//             }}
+//         >
+//             {/* Google Translate dropdown will load here */}
+//         </div>
+//     );
+// };
+
+// export default GoogleTranslate;
diff --git a/client/src/component/Navbar.jsx b/client/src/component/Navbar.jsx
@@ -17,6 +17,7 @@ function Navbar(props) {
   const location = useLocation();
 
   const { currentUser, userLoggedIn, setUserLoggedIn } = useAuth();
+  // eslint-disable-next-line
   const [isScrolled, setIsScrolled] = useState(false); // State to keep track of whether page has been scrolled
 
   // eslint-disable-next-line
@@ -164,7 +165,7 @@ function Navbar(props) {
               }`}
             id="navbarSupportedContent"
           >
-            <ul className="navbar-nav ml-[4.5rem] mb-2 mb-lg-0 gap-3 fw-medium menu2">
+            <ul className="navbar-nav mb-2 mb-lg-0 gap-2 fw-medium menu2">
               <li className="nav-item fs-6 fw-medium">
                 <Link
                   className={`nav-link ${location.pathname === "/" ? "active" : ""
@@ -195,6 +196,26 @@ function Navbar(props) {
                   {props.community}
                 </Link>
               </li>
+              <li className="nav-item fs-6">
+                <Link
+                  className={`nav-link ${location.pathname === "/myproject" ? "active" : ""
+                    }`}
+                  aria-current="page"
+                  to="/myproject"
+                >
+                  {props.projects}
+                </Link>
+              </li>
+              <li className="nav-item fs-6">
+                <Link
+                  className={`nav-link ${location.pathname === "/ai" ? "active" : ""
+                    }`}
+                  aria-current="page"
+                  to="/ai"
+                >
+                  {props.ai}
+                </Link>
+              </li>
               <li className="nav-item fs-6">
                 <Link
                   className={`nav-link ${location.pathname === "/discussion" ? "active" : ""
@@ -225,16 +246,6 @@ function Navbar(props) {
                   {props.contributors}
                 </Link>
               </li>
-              <li className="nav-item fs-6">
-                <Link
-                  className={`nav-link ${location.pathname === "/projects" ? "active" : ""
-                    }`}
-                  aria-current="page"
-                  to="/myproject"
-                >
-                  {props.projects}
-                </Link>
-              </li>
             </ul>
           </div>
 
@@ -288,8 +299,8 @@ function Navbar(props) {
                       >
                         <img
                           src={
-                            currentUser.photoURL ||
                             profileImage ||
+                            currentUser.photoURL ||
                             avatarDropdown
                           }
                           className="avatar img-circle"
@@ -301,46 +312,32 @@ function Navbar(props) {
                         className="dropdown-menu"
                         aria-labelledby="navbarScrollingDropdown"
                         style={{
-                          backgroundColor:
-                            props.mode === "dark" ? "black" : "white",
-                          borderBottom:
-                            props.mode === "dark"
-                              ? "1px solid white"
-                              : "1px solid black",
-                          outline:
-                            props.mode === "dark"
-                              ? "2px solid white"
-                              : "2px solid black",
+                          backgroundColor: props.mode === "dark" ? "black" : "white",
+                          borderBottom: props.mode === "dark"
+                            ? "1px solid white"
+                            : "1px solid black",
+                          outline: props.mode === "dark" ? "2px solid white" : "2px solid black",
                         }}
                       >
                         <li>
-                          <Link
-                            to="/myproject"
-                          >
+                          <Link to="/myproject">
                             <p>My Project</p>
                           </Link>
                         </li>
                         <li>
-                          <Link
-                            to="/editprofile"
-                          >
+                          <Link to="/editprofile">
                             <p>Edit Profile</p>
                           </Link>
                         </li>
                         <li>
                           <hr
                             className="dropdown-divider"
                             style={{
-                              backgroundColor:
-                                props.mode === "dark" ? "black" : "white",
-                              borderBottom:
-                                props.mode === "dark"
-                                  ? "1px solid white"
-                                  : "1px solid black",
-                              outline:
-                                props.mode === "dark"
-                                  ? "2px solid black"
-                                  : "2px solid white",
+                              backgroundColor: props.mode === "dark" ? "black" : "white",
+                              borderBottom: props.mode === "dark"
+                                ? "1px solid white"
+                                : "1px solid black",
+                              outline: props.mode === "dark" ? "2px solid black" : "2px solid white",
                             }}
                           />
                         </li>
@@ -358,10 +355,7 @@ function Navbar(props) {
                     </li>
                     {/* Menu Button */}
                     <li>
-                      <button
-                        className="sidebar-toggle"
-                        onClick={toggleSidebar}
-                      >
+                      <button className="sidebar-toggle" onClick={toggleSidebar}>
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
@@ -382,18 +376,18 @@ function Navbar(props) {
             ) : (
               // Login and Signup Button
               <div
-                className="flex justify-between items-center space-x-2 collapse"
+                className="flex justify-between items-center space-x-2"
                 style={{
                   display: "flex",
                   alignItems: "center",
-                  gap: "0.5rem", // add some space between the buttons
-                  flexWrap: "nowrap", // prevent wrapping
+                  gap: "0.5rem",
+                  flexWrap: "nowrap",
                 }}
               >
                 <Link
                   role="button"
                   to="/login"
-                  className="btn loginbtn mx-2  h-10 "
+                  className="flex items-center btn loginbtn mx-2 h-10"
                   style={{
                     height: "45px",
                     color: props.mode === "dark" ? "white" : "white",
@@ -404,7 +398,7 @@ function Navbar(props) {
                 <Link
                   role="button"
                   to="/signup"
-                  className="btn loginbtn mx-2  h-10 "
+                  className="flex items-center btn loginbtn mx-2 h-10"
                   style={{
                     height: "45px",
                     color: props.mode === "dark" ? "white" : "white",
@@ -434,9 +428,8 @@ function Navbar(props) {
                   <span className="fake-body"></span>
                 </div>
               </div>
-            )
-            }
-          </form >
+            )}
+          </form>
         </div >
 
         {/* Sidebar for Smaller devices */}
@@ -464,6 +457,16 @@ function Navbar(props) {
                 {props.community}
               </Link>
             </li>
+            <li>
+              <Link to="/myproject" onClick={() => setIsSidebarOpen(false)}>
+                {props.projects}
+              </Link>
+            </li>
+            <li>
+              <Link to="/ai" onClick={() => setIsSidebarOpen(false)}>
+                {props.ai}
+              </Link>
+            </li>
             <li>
               <Link to="/discussion" onClick={() => setIsSidebarOpen(false)}>
                 {props.discussion}
@@ -474,11 +477,6 @@ function Navbar(props) {
                 {props.blog}
               </Link>
             </li>
-            <li>
-              <Link to="/myproject" onClick={() => setIsSidebarOpen(false)}>
-                {props.projects}
-              </Link>
-            </li>
           </ul>
         </div >
       </nav >
@@ -496,7 +494,7 @@ Navbar.propTypes = {
   about: PropTypes.string,
   contributors: PropTypes.string,
   projects: PropTypes.string,
-  profile: PropTypes.string,
+  ai: PropTypes.string,
   mode: PropTypes.string,
   toggleMode: PropTypes.func,
   showAlert: PropTypes.func,

diff --git a/server/.env.sample b/server/.env.sample
@@ -1,30 +1,16 @@
-## FOR CLIENT
-VITE_CLIENT_PORT = ""
+# FOR CLIENT
+VITE_CLIENT_PORT=""
 
 # FOR SERVER
-VITE_SERVER_PORT = ""
-MONGO_URI = ""
-
-# YOUR_EMAIL
-EMAIL_USER = ""
-
-# To create a passkey on the phone or computer you’re on:
-
-# 1. Go to https://myaccount.google.com/signinoptions/passkeys.
-# 2. Tap Create a passkey and then Continue.(You'll be required to unlock your device.)
-# 3. A 16 character passkey is generated which you can use in below. 
-# 4. You can also use your password instead of passkey.
-# 5. If you are using password, you need to enable less secure apps in your google account settings.
-# 6. Go to https://myaccount.google.com/lesssecureapps and enable it.
-# 7. If you are using passkey, you don't need to enable less secure apps.
-# 8. If you are using passkey, you need to use the passkey in the EMAIL_PASS field.
-# 9. If you are using password, you need to use the password in the EMAIL_PASS field.
-
-EMAIL_PASS = ""
-GOOGLE_CLIENT_ID = ""
-JWT_SECRET = ""
+VITE_SERVER_PORT=""
+MONGO_URI=""
+EMAIL_USER=""
+EMAIL_PASS=""
+GOOGLE_CLIENT_ID=""
+GOOGLE_SECRET=""
+ADMIN_EMAIL_ID=""
+EMAIL_ID=""
+PASS_KEY=""
 TWILIO_ACCOUNT_SID=""
 TWILIO_AUTH_TOKEN=""
-EMAIL_ID= 
-PASS_KEY= 
-ADMIN_EMAIL_ID= 
+JWT_SECRET=""