EMPLOYEE LOGIN LOGOUT TIME CLOCK
EMPLOYEE LOGIN LOGOUT TIME CLOCK
this code records the time when user logged in and logged out
employee login logout time clock video :
sometimes a user can login multiple times ,even though he login multiple times this code records all his login and logout times in a day
this code doesnot creates a new user just logs in already created user ____ you have to add some more code to create a new user
to know how to create a new user , i already made a video , to watch it click on this link
but main drawback in this is
sometimes a user may close the window without logging out then logout time is not recorded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 100vh;background-color: aquamarine;
display: flex;
justify-content: center;align-items: center;
color: black;
}
#loginto , #loggedin{height: 150px; width: 200px;
border: 2px solid black;
word-wrap: break-word;}
button{
height: 30px;
}
</style>
</head>
<body>
<div id="loginto">
username : <input type="text" id="username"><br/>
password : <input type="password" id="password"><br/>
<button id="login">login</button>
</div>
<div id="loggedin">
<p>hi you are logged in as </p>
<span id="userid"></span>
<button id="logout">logout</button>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword,onAuthStateChanged
, signInWithEmailAndPassword,signOut } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-auth.js";
import {getFirestore, doc, getDoc , setDoc ,Timestamp,updateDoc
,arrayUnion } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-firestore.js";
//write your project configuration in place of mine
//also change "https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js" with yours
const firebaseConfig = {
apiKey: "***",
authDomain: "***",
databaseURL: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const date = new Date().getDate() + " : " + ((new Date().getMonth())-1) + " : " + new Date().getFullYear()
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
const uid = user.uid;
document.getElementById("loginto").style.display = "none";
document.getElementById("loggedin").style.display = "";
document.getElementById("userid").innerHTML = uid;
console.log("USER IN")
// ...
} else {
document.getElementById("loginto").style.display = "";
document.getElementById("loggedin").style.display = "none";
console.log("user out")
}
});
var username , password ;
document.getElementById("login").addEventListener('click' , function(){
username = document.getElementById("username").value;
password = document.getElementById("password").value;
signInWithEmailAndPassword(auth, username, password)
.then((userCredential) => {
const user = userCredential.user;
console.log("user loggedin")
readdocument();
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
})
//async is used as i will use await keyword in the function
async function readdocument(){
const docRef = doc(db, username, date);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
checkarray();
} else {
adddocument();
}
}
async function adddocument(){
await setDoc(doc(db, username, date), { array: [{"login" : Timestamp.fromDate(new Date())}] });
}
async function checkarray(){
class City {
constructor (array ) {
this.array = array;
}
toString() {
return this.array;
}
}
// Firestore data converter
const cityConverter = {
fromFirestore: (snapshot, options) => {
const data = snapshot.data(options);
return new City(data.array);
}
};const ref = doc(db, username, date).withConverter(cityConverter);
const docSnap = await getDoc(ref);
if (docSnap.data().toString() == "") {
adddocument();
} else {
addintoarray();
}
}
async function addintoarray(){ await updateDoc(doc(db, username, date), {array : arrayUnion({"login" : Timestamp.fromDate(new Date())})}); }
document.getElementById("logout").addEventListener('click' , function(){
signOut(auth).then(() => {
addlogout();
}).catch((error) => {
console.log(errorMessage)
});
})
async function addlogout(){ await updateDoc(doc(db, username, date), {array : arrayUnion({"logout" : Timestamp.fromDate(new Date())})}); }
</script>
</body>
</html>
Comments
Post a Comment