Added deleted signUp and login files and fixed bug on login button on…

… hover
BeehiveCommunity · Oct 10, 2024 · 6c3abdd · 6c3abdd
1 parent 7c3ef69
commit 6c3abdd
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -65,12 +65,12 @@
 
                     </a>
                 </div>
-                <button class="btn-1">Sign up
+                <a class="btn-1" href="login.html">Login
                     <div class="arrow-wrapper">
                         <div class="arrow"></div>
                     </div>
-                </button>
-                <button class="btn-2">Get Started!</button>
+                  </a>
+                <a class="btn-2" href="signUp.html">Get Started!</a>
             </div>
         </div>
     </div>

diff --git a/login.html b/login.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="signUp.css" />
+    <title>Sign In</title>
+</head>
+<body>
+    <form id="signinForm">
+        <div class="container">
+            <h1>Sign In</h1>
+
+            <hr>
+
+
+           <div class="form">
+            <label for="email"><b>Email</b></label>
+            <input type="email" placeholder="Enter Email" autocomplete="email" id="email" required>
+
+            <label for="psw"><b>Password</b></label>
+            <input type="password" placeholder="Enter Password" autocomplete="new-password" id="psw" required>
+
+            <div class="buttons">
+                <button type="button" class="cancelbtn">Cancel</button>
+                <button type="submit" class="signinbtn">Sign In</button>
+            </div>
+           </div>
+        </div>
+    </form>
+
+    <script type="module">
+
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.0/firebase-app.js";
+        import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.14.0/firebase-analytics.js";
+        import { getFirestore, addDoc, collection,getDoc } from "https://www.gstatic.com/firebasejs/10.14.0/firebase-firestore.js"; // Correct import for Firestore
+        import { getAuth, createUserWithEmailAndPassword ,signInWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/10.14.0/firebase-auth.js";
+
+
+        const firebaseConfig = {
+            apiKey: "AIzaSyC7ihLRIl47Iu6nk6qh_Ak8i3pSYw3tO4A",
+            authDomain: "frontend-mentor-cceee.firebaseapp.com",
+            projectId: "frontend-mentor-cceee",
+            storageBucket: "frontend-mentor-cceee.appspot.com",
+            messagingSenderId: "51303965383",
+            appId: "1:51303965383:web:2f8c20fb952bd844dd94e2",
+            measurementId: "G-S2BV64K72R",
+            databaseURL: "https://frontend-mentor-cceee-default-rtdb.firebaseio.com"
+        };
+
+
+        const app = initializeApp(firebaseConfig);
+        const analytics = getAnalytics(app);
+
+
+        const db = getFirestore(app); 
+
+
+        const auth = getAuth();
+
+
+        const form = document.getElementById('signinForm');
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();  
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('psw').value;
+
+
+            signInWithEmailAndPassword(auth, email, password)
+  .then((userCredential) => {
+
+    const user = userCredential.user;
+const uid=user.uid;
+console.log(user);
+const displayName = user.displayName ? user.displayName : "User";
+            alert("Welcome, " + displayName);
+
+    // ...
+  })
+  .catch((error) => {
+    const errorCode = error.code;
+    const errorMessage = error.message;
+    console.log(errorCode, errorMessage);
+  });
+})
+
+    </script>
+</body>
+</html>
diff --git a/signUp.css b/signUp.css
@@ -0,0 +1,35 @@
+.container{
+    text-align: center;
+     border:2px solid black;
+     padding: 10px;
+
+
+
+ }
+ .buttons{
+     margin-top: 10px;
+ }
+ h1{
+     font-size: 1.2rem;
+ }
+ label{
+     font-size: 1rem;
+ }
+ .form{
+     display: flex;
+     flex-direction: column;
+     gap:2px;
+     align-items: center;
+
+
+ }
+ input{
+     padding:2px;
+     margin-block: 5px;
+ }
+ button{
+     padding-block:8px;
+     padding-inline: 15px;
+     background: #fff;
+     border-radius: 20px;
+ }
diff --git a/signUp.html b/signUp.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="signUp.css" />
+    <title>Sign Up</title>
+</head>
+<body>
+    <form id="signupForm" >
+        <div class="container">
+            <h1>Sign Up</h1>
+
+            <hr>
+
+          <div class="form">
+            <label for="name"><b>Name</b></label>
+            <input type="text" placeholder="Enter Name" autocomplete="name" id="name" required>
+
+            <label for="email"><b>Email</b></label>
+            <input type="email" placeholder="Enter Email" autocomplete="email" id="email" required>
+
+            <label for="psw"><b>Password</b></label>
+            <input type="password" placeholder="Enter Password" autocomplete="new-password" id="psw" required>
+
+            <label for="psw-repeat"><b>Repeat Password</b></label>
+            <input type="password" placeholder="Repeat Password" id="psw-repeat" autocomplete="new-password" required>
+
+            <div class="buttons">
+                <button type="button" class="cancelbtn">Cancel</button>
+                <button type="submit" class="signupbtn">Sign Up</button>
+            </div>
+          </div>
+        </div>
+    </form>
+
+    <script type="module">
+
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.0/firebase-app.js";
+        import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.14.0/firebase-analytics.js";
+        import { getFirestore, addDoc, collection } from "https://www.gstatic.com/firebasejs/10.14.0/firebase-firestore.js"; // Correct import for Firestore
+        import { getAuth, createUserWithEmailAndPassword ,updateProfile} from "https://www.gstatic.com/firebasejs/10.14.0/firebase-auth.js";
+
+        const firebaseConfig = {
+            apiKey: "AIzaSyC7ihLRIl47Iu6nk6qh_Ak8i3pSYw3tO4A",
+            authDomain: "frontend-mentor-cceee.firebaseapp.com",
+            projectId: "frontend-mentor-cceee",
+            storageBucket: "frontend-mentor-cceee.appspot.com",
+            messagingSenderId: "51303965383",
+            appId: "1:51303965383:web:2f8c20fb952bd844dd94e2",
+            measurementId: "G-S2BV64K72R",
+            databaseURL: "https://frontend-mentor-cceee-default-rtdb.firebaseio.com"
+        };
+
+
+
+        const app = initializeApp(firebaseConfig);
+        const analytics = getAnalytics(app);
+
+
+        const db = getFirestore(app); 
+
+
+        const auth = getAuth();
+
+
+        const form = document.getElementById('signupForm');
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();  
+
+
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('psw').value;
+            const name = document.getElementById('name').value;
+
+            try {
+
+                const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+
+                const user = userCredential.user;
+                await updateProfile(user, { displayName: name });
+
+                await addDoc(collection(db, "users"), {  
+                    uid: user.uid,  
+                    name: name,
+                    email: email,
+                });
+
+                alert('Signed up successfully and data stored in Firestore!');
+
+            } catch (error) {
+                const errorMessage = error.message;
+                alert('Error: ' + errorMessage);
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -151,7 +151,8 @@
                 transition: 0.3s;
                 align-items: center;
                 gap: 0.6em;
-                /* font-weight: bold; */
+
+                /* font-weight:bolder; */
             }
 
             .btn-1 .arrow-wrapper {
@@ -185,6 +186,7 @@
 
             .btn-1:hover {
                 background-color: var(--hover-color);
+                color:var(--primary-color)
             }
 
             .btn-1:hover .arrow {