Merge branch 'SUGAM-ARORA:main' into master

SUGAM-ARORA · Jun 25, 2024 · de2c819 · de2c819
2 parents 164ba02 + 3f2b070
commit de2c819
Show file tree

Hide file tree

Showing 14 changed files with 2,034 additions and 323 deletions.
diff --git a/form/index.html b/form/index.html
@@ -33,6 +33,17 @@ <h2>Register</h2>
             <button type="submit" class="button">Submit</button>
         </form>
     </div>
+    <div id="google_element"></div>
+    <script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+
+    <script type="text/javascript">
+        function loadGoogleTranslate(){
+           new google.translate.TranslateElement(
+            "google_element");
+        }
+
+
+    </script>
     <script src="./script.js"></script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,9 +20,10 @@
     "@testing-library/user-event": "^14.5.2",
     "firebase": "^10.12.2",
     "lottie-react": "^2.4.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^5.2.1",
+    "react-intl": "^6.6.8",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "react-toastify": "^8.2.0",

diff --git a/public/index.html b/public/index.html
@@ -1,60 +1,102 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
-    <title>UniCollab</title>
-    <style>
-      @import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
+  <title>UniCollab</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 
-      body {
-        background-color: #ffffff;
-        background-image: url(https://www.transparenttextures.com/patterns/arches.png);
-        cursor: none;
-      }
+
+    body {
+      background-color: #343434 !important;
+      background-image: url(https://www.transparenttextures.com/patterns/arches.png);
+      cursor: none;
+    }
 
-      .dark-mode {
-        background-color: #343434;
-        background-image: url(https://www.transparenttextures.com/patterns/arches.png);
-      }
+    .dark-mode {
+      background-color: #343434 !important;
+      background-image: url(https://www.transparenttextures.com/patterns/arches.png);
+    }
 
-      .dark-mode p {
-        color: white;
-      }
+    .dark-mode h2, .dark-mode h3 {
+      color: #333 !important;
+    }
 
-      .dark-mode h2, .dark-mode h3 {
-        color: white;
-      }
+    .circle {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      pointer-events: none;
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+    }
 
-      .circle {
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        pointer-events: none;
-        transition: transform 0.1s, left 0.1s, top 0.1s;
-      }
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+    }
 
-      .circle-container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        z-index: 9999;
-      }
-    </style>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <div class="circle-container">
+    #google_element {
+      position: fixed;
+      top: 0px; /* Adjust as needed */
+      left: 50px; /* Adjust as needed */
+      color: #333 !important;
+    }
+
+    /* Change dropdown text color to black */
+    #google_element .goog-te-combo option {
+      color: #333 !important;
+    }
+
+    /* Optionally, you can change the background color of the dropdown */
+    #google_element .goog-te-combo {
+      background-color: #333 !important; /* Change background color */
+      color: #333 !important; /* Change text color to white */
+    }
+
+    /* Change the dropdown button background color */
+    #google_element .goog-te-combo-button {
+      background-color: #333 !important; /* Change button background color */
+      color: #333 !important; /* Change button text color */
+    }
+    .goog-te-banner-frame {
+  display: none !important;
+}
+  </style>
+</head>
+<body>
+  <div id="google_element"></div>
+  <!-- Load Google Translate script over HTTPS and handle errors -->
+  <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate" onerror="handleError(this)"></script>
+
+  <script type="text/javascript">
+    function loadGoogleTranslate(){
+      new google.translate.TranslateElement({
+        pageLanguage: 'en',
+        includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,fr,de,it',
+        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
+      }, 'google_element');
+    }
+
+    function handleError(error) {
+      console.error('Error loading Google Translate script:', error);
+    }
+  </script>
+
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <div class="circle-container">
       <div class="circle"></div>
       <div class="circle"></div>
       <div class="circle"></div>
@@ -68,5 +110,14 @@
       <div class="circle"></div>
       <div class="circle"></div>
     </div>
+    <div id="google_element"></div>
+    <script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+
+    <script type="text/javascript">
+        function loadGoogleTranslate(){
+           new google.translate.TranslateElement(
+            "google_element");
+        }
+    </script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -20,6 +20,10 @@ import Licensing from "./Components/footer_section/Legal/Licensing";
 import TermsConditions from "./Components/footer_section/Legal/TermsandConditions";
 import PrivacyPolicy from "./Components/footer_section/Legal/PrivacyPolicy";
 import Careers from "./Components/Careers/CareersPage";
+import EmailVerification from "./Components/auth/resetPassword/EmailVerification";
+import OTPVerification from "./Components/auth/resetPassword/OTPVerification";
+import ResetPassword from "./Components/auth/resetPassword/ResetPassword";
+
 
 function App() {
   return (
@@ -46,6 +50,9 @@ function App() {
           <Route path="/new/project" element={<NewProject />} />
           <Route path="/profile" element={<Profile />} />
           <Route path="/careers" element={<Careers />} />
+          <Route path="/verifyEmail" element={<EmailVerification />} />
+          <Route path="/otpVerification/:email" element={<OTPVerification />} />
+          <Route path="/resetPassword/:email" element={<ResetPassword />} />
 
         </Routes>
         <Footer />

diff --git a/src/Components/Login.css b/src/Components/Login.css
@@ -19,13 +19,13 @@ input {
 .panels-container {
   position: relative;
   width: 100%;
-  background-color: #fff;
+  background-color: #121026 !important;
   min-height: 100vh;
   overflow: hidden;
 }
 
 .error-text {
-  color: darkturquoise; /* Default error text color */
+  color: darkturquoise !important; /* Default error text color */
   font-size: 1.1rem;
   margin-top: 5px;
 }
@@ -72,14 +72,14 @@ form.sign-in-form {
 
 .title {
   font-size: 2.2rem;
-  color: darkturquoise;
+  color: darkturquoise !important;
   margin-bottom: 10px;
 }
 
 .input-field {
   max-width: 380px;
   width: 100%;
-  background-color: #f0f0f0;
+  background-color: #f0f0f0 !important;
   margin: 10px 0;
   height: 55px;
   border-radius: 55px;
@@ -97,7 +97,7 @@ form.sign-in-form {
 .input-field i {
   text-align: center;
   line-height: 55px;
-  color: #acacac;
+  color: #acacac !important;
   transition: 0.5s;
   font-size: 1.1rem;
 }
@@ -109,11 +109,11 @@ form.sign-in-form {
   line-height: 1;
   font-weight: 600;
   font-size: 1.1rem;
-  color: darkturquoise;
+  color: darkturquoise !important;
 }
 
 .input-field input::placeholder {
-  color: #aaa;
+  color: #aaa !important;
   font-weight: 500;
 }
 
@@ -122,15 +122,15 @@ form.sign-in-form {
   border: none;
   cursor: pointer;
   font-size: 1.1rem;
-  color:darkturquoise;
+  color:darkturquoise !important;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .social-text {
   padding: 0.7rem 0;
   font-size: 1.2rem;
-  color: darkturquoise;
+  color: darkturquoise !important;
 }
 
 .social-media {
@@ -145,28 +145,28 @@ form.sign-in-form {
   justify-content: center;
   align-items: center;
   margin: 0 0.45rem;
-  color: #333;
+  color: #333 !important;
   border-radius: 50%;
-  border: 1px solid darkturquoise;
+  border: 1px solid darkturquoise !important;
   text-decoration: none;
   font-size: 1.1rem;
   transition: 0.3s;
 }
 
 .social-icon:hover {
   transform: scale(1.1); /* Slightly enlarges the icon */
-  box-shadow: 0 4px 8px darkturquoise; /* Adds a shadow on hover */
+  box-shadow: 0 4px 8px darkturquoise !important; /* Adds a shadow on hover */
 }
 
 .btn {
   width: 150px;
   text-align: center;
-  background-color: darkturquoise;;
-  border: solid 2px #121026;
+  background-color: darkturquoise !important;
+  border: solid 2px #121026 !important;
   outline: none;
   height: 32px;
   border-radius: 49px;
-  color: #fff;
+  color: #fff !important;
   text-transform: uppercase;
   font-weight: 600;
   margin: 10px 0;
@@ -221,7 +221,7 @@ form.sign-in-form {
   top: -10%;
   right: 48%;
   transform: translateY(-50%);
-  background-image: linear-gradient(-45deg, #121026 0%, #121026 100%);
+  background-image: linear-gradient(-45deg, darkturquoise 0%, darkturquoise 100%);
   transition: 1.8s ease-in-out;
   border-radius: 80%;
   z-index: 6;
@@ -260,21 +260,21 @@ form.sign-in-form {
   font-weight: 600;
   line-height: 1;
   font-size: 1.8rem;
-  color: darkturquoise;
+  color: white;
 }
 
 .panel p {
   font-size: 0.95rem;
   padding: 0.8rem 0;
-  color: darkturquoise;
+  color: white;
 }
 
 .btn.transparent {
   margin: 0;
   background: darkturquoise;
   border: 2px solid #fff;
   width: 140px;
-  height: 43px;
+  height: 48px;
   font-weight: 600;
   font-size: 0.8rem;
 }
@@ -320,6 +320,15 @@ form.sign-in-form {
 .container1.sign-up-mode .right-panel {
   pointer-events: all;
 }
+.reset-link {
+  display: inline-block;
+  color: #00ced1;
+  cursor: pointer;
+  margin: 15px 0;
+}
+.reset-link:hover {
+  text-decoration: underline;
+}
 
 @media (max-width: 870px) {
   .container {

diff --git a/src/Components/Login.js b/src/Components/Login.js
@@ -77,7 +77,8 @@ const LogIn = () => {
     setPassword('');
     setUsername('');
   };
-
+
+
   return (
     <div className={`container1 ${isSignUpMode ? 'sign-up-mode' : ''}`}>
       <div className="forms-container">
@@ -105,6 +106,7 @@ const LogIn = () => {
                 {showPassword ? <i className="fas fa-eye-slash"></i> : <i className="fas fa-eye"></i>}
               </button>
             </div>
+            <p><Link to="/verifyEmail" className='reset-link'>Forgot password?</Link></p>
             <input type="submit" value="Login" className="btn1 solid" />
             <p className="social-text">Connect with Social Magic</p>
             <div className="social-media">