From e01a92dcfc907b6c4a2fa1852e3d3a42037b57b4 Mon Sep 17 00:00:00 2001 From: kartik3165 Date: Tue, 8 Oct 2024 17:02:31 +0530 Subject: [PATCH] working login-Signup using firebase --- Working_login/auth.html | 57 ++++++++++ Working_login/login.js | 59 ++++++++++ Working_login/signUp.js | 61 +++++++++++ Working_login/style.css | 224 ++++++++++++++++++++++++++++++++++++++ Working_login/userAuth.js | 11 ++ 5 files changed, 412 insertions(+) create mode 100644 Working_login/auth.html create mode 100644 Working_login/login.js create mode 100644 Working_login/signUp.js create mode 100644 Working_login/style.css create mode 100644 Working_login/userAuth.js diff --git a/Working_login/auth.html b/Working_login/auth.html new file mode 100644 index 0000000..1ff9e69 --- /dev/null +++ b/Working_login/auth.html @@ -0,0 +1,57 @@ + + + + + + Document + + + +
+
+ + +
+
+
+

Welcome Back!

+

To keep connected with us please login with your personal info

+ +
+
+

Hello, Friend!

+

Enter your personal details and start journey with us

+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Working_login/login.js b/Working_login/login.js new file mode 100644 index 0000000..c602d02 --- /dev/null +++ b/Working_login/login.js @@ -0,0 +1,59 @@ +import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js"; +import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-analytics.js"; +import { getDatabase, get, ref , child } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-database.js"; +import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js"; + +const firebaseConfig = { + apiKey: "-----API KEY-------", + authDomain: "", + databaseURL: "", + projectId: "", + storageBucket: "", + messagingSenderId: "79471128063", + appId: "", + measurementId: "" + }; + + const app = initializeApp(firebaseConfig); + const analytics = getAnalytics(app); + const db = getDatabase(); + const auth = getAuth(app); + const dbref = ref(db); + + let Email = document.getElementById('login-email'); + let Password = document.getElementById('login-password'); + let LoginForm = document.getElementById('loginForm'); + + let SignInUser = evt => { + evt.preventDefault(); + + // Log the value of Email to check if it's defined and capturing the correct value + console.log("Email value:", Email.value); + + signInWithEmailAndPassword(auth, Email.value, Password.value) + .then((Credential) =>{ + get(child(dbref, 'UserAuthList/' + Credential.user.uid)).then((snapshot) => { + if(snapshot.exists){ + sessionStorage.setItem("user-info", JSON.stringify({ + firstname : snapshot.val().firstname, + lastname : snapshot.val().lastname, + email : snapshot.val().email // Changed 'Email' to lowercase 'email' + })); + sessionStorage.setItem("user-creds", JSON.stringify(Credential.user)); + //window.location.href = '/html/index.html'; add your path after login + } else { + console.log("User data not found in the database."); + } + }).catch((error) => { + console.log("Error retrieving user data:", error); + }); + }) + .catch((error)=>{ + alert(error.message); + console.log(error.code); + console.log(error.message); + }); +} + + LoginForm.addEventListener('submit' , SignInUser ); + \ No newline at end of file diff --git a/Working_login/signUp.js b/Working_login/signUp.js new file mode 100644 index 0000000..77a73f5 --- /dev/null +++ b/Working_login/signUp.js @@ -0,0 +1,61 @@ +import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js"; +import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-analytics.js"; +import { getDatabase, set, ref } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-database.js"; +import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js"; + +// https://firebase.google.com/docs/web/setup#available-libraries + +const firebaseConfig = { + apiKey: "", + authDomain: "", + databaseURL: "", + projectId: "", + storageBucket: "", + messagingSenderId: "", + appId: "", + measurementId: "" +}; + +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); +const db = getDatabase(); +const auth = getAuth(app); +const signUpButton = document.getElementById('signUp'); +const signInButton = document.getElementById('signIn'); +const container = document.getElementById('container'); + + +let EmailInp = document.getElementById('emailInp'); +let PassInp = document.getElementById('passwordInp'); +let FnameInp = document.getElementById('fnameInp'); +let LnameInp = document.getElementById('lnameInp'); +let RegisterForm = document.getElementById('registerForm'); + +let RegisterUser = evt => { + evt.preventDefault(); + + createUserWithEmailAndPassword(auth, EmailInp.value, PassInp.value) + .then((Credential) =>{ + set(ref(db, 'UserAuthList/' + Credential.user.uid), { + firstname: FnameInp.value, + lastname: LnameInp.value, + email: EmailInp.value // Corrected to lowercase 'email' + }); + + sessionStorage.setItem("user-info", JSON.stringify({ + firstname: FnameInp.value, + lastname: LnameInp.value, + email: EmailInp.value + })); + + sessionStorage.setItem("user-creds", JSON.stringify(Credential.user)); + //window.location.href = '/html/index.html'; add your path after user signup + }) + .catch((error)=>{ + alert(error.message); + console.log(error.code); + console.log(error.message); + }) +} + +RegisterForm.addEventListener('submit' , RegisterUser); diff --git a/Working_login/style.css b/Working_login/style.css new file mode 100644 index 0000000..017937d --- /dev/null +++ b/Working_login/style.css @@ -0,0 +1,224 @@ + +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); + +* { + box-sizing: border-box; +} + +:root { + --bg-color : white; + --second-bg-color : #f0f8ff ; + --text-color : #73788d; + --main-color : #2467eb; + --heading-color : #02042e; + } + +body { + background: var(--heading-color); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: 'Montserrat', sans-serif; + height: 100vh; + margin: -20px 0 50px; +} + +h1 { + font-weight: bold; + margin: 0; +} + +h2 { + text-align: center; +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; +} + +span { + font-size: 12px; + margin: 5px; +} + +a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; +} + +button { + border-radius: 20px; + border: 1px solid var(--main-color); + background-color: var(--main-color); + color: var(--bg-color); + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; + margin: 8px; +} + +button:active { + transform: scale(0.95); +} + +button:focus { + outline: none; +} + +button.ghost { + background-color: transparent; + border-color: #FFFFFF; +} + +form { + background-color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: var(--second-bg-color); + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} + +.container { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 14px 28px rgba(0,0,0,0.25), + 0 10px 10px rgba(0,0,0,0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 480px; +} + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.sign-in-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .sign-in-container { + transform: translateX(100%); +} + +.sign-up-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.right-panel-active .sign-up-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + 0%, 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container{ + transform: translateX(-100%); +} + +.overlay { + background: var(--main-color); + background: -webkit-linear-gradient(to right, #2467eb, #80a9fc); + background: linear-gradient(to right, #2467eb, #85abf8); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #FFFFFF; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay-left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay-left { + transform: translateX(0); +} + +.overlay-right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay-right { + transform: translateX(20%); +} + + diff --git a/Working_login/userAuth.js b/Working_login/userAuth.js new file mode 100644 index 0000000..ee5c567 --- /dev/null +++ b/Working_login/userAuth.js @@ -0,0 +1,11 @@ +const signUpButton = document.getElementById('signUp'); +const signInButton = document.getElementById('signIn'); +const container = document.getElementById('container'); + +signUpButton.addEventListener('click', () => { + container.classList.add("right-panel-active"); +}); + +signInButton.addEventListener('click', () => { + container.classList.remove("right-panel-active"); +}); \ No newline at end of file