Skip to content

Instantly share code, notes, and snippets.

@swahaniroy

swahaniroy/login.js

Created May 26, 2022 15:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save swahaniroy/021406202407b3a04dc96429355422cd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save swahaniroy/021406202407b3a04dc96429355422cd to your computer and use it in GitHub Desktop.
Download ZIP
The login.js file
Raw
login.js
// hide loading indicator.
hideLoading();
// get sign up container.
const signUpContainer = document.getElementById("signup");
// set up event for sign up close btn
const signUpCloseBtn = document.getElementById("signup__close-btn");
// set up event for create new account button.
const createNewAccountBtn = document.getElementById(
"login__create-account-btn"
);
// get input information from the input elements and validate those values.
const emailInputElement = document.getElementById("signup__email");
const passwordInputElement = document.getElementById("signup__password");
const confirmPasswordInputElement = document.getElementById(
"signup__confirm-password"
);
const emailLoginInputElement = document.getElementById("login__email");
const passwordLoginInputElement = document.getElementById("login__password");
// get sign up button.
const signUpBtn = document.getElementById("signup__btn");
// get login button.
const loginBtn = document.getElementById("login__submit-btn");
/**
* hide sing up modal.
*/
function hideSignUp() {
// add hide class to hide the sign up.
signUpContainer.classList.add("signup--hide");
// clear the input elements.
if (
emailInputElement &&
passwordInputElement &&
confirmPasswordInputElement
) {
emailInputElement.value = "";
passwordInputElement.value = "";
confirmPasswordInputElement.value = "";
}
}
// add event for sign up close button.
if (signUpCloseBtn) {
signUpCloseBtn.addEventListener("click", function () {
hideSignUp();
});
}
// add event for create a new account button.
if (createNewAccountBtn) {
createNewAccountBtn.addEventListener("click", function () {
signUpContainer.classList.remove("signup--hide");
});
}
/**
* validate input user's information when creating a new account.
* @param {*} object - user's information that needs to be validated.
* @returns valid, or not.
*/
function validateNewAccount({ email, password, confirmPassword }) {
if (!validator.isEmail(email)) {
alert("Please input your email");
return false;
}
if (
validator.isEmpty(password) ||
!validator.isLength(password, { min: 6 })
) {
alert(
"Please input your password. You password must have at least 6 characters"
);
return false;
}
if (validator.isEmpty(confirmPassword)) {
alert("Please input your confirm password");
return false;
}
if (password !== confirmPassword) {
alert("Confirm password and password must be the same");
return false;
}
return true;
}
/**
* generate user's avatar
* @returns user's avatar.
*/
function generateAvatar() {
// hardcode list of user's avatars for the demo purpose.
const avatars = [
"https://data-us.cometchat.io/assets/images/avatars/captainamerica.png",
"https://data-us.cometchat.io/assets/images/avatars/cyclops.png",
"https://data-us.cometchat.io/assets/images/avatars/ironman.png",
"https://data-us.cometchat.io/assets/images/avatars/spiderman.png",
"https://data-us.cometchat.io/assets/images/avatars/wolverine.png",
];
const avatarPosition = Math.floor(Math.random() * avatars.length);
return avatars[avatarPosition];
}
/**
* register a new account - register with firebase and cometchat.
* @param {*} object - user's information that will be used to register.
*/
function registerNewAccount({ email, password, confirmPassword }) {
if (validateNewAccount({ email, password, confirmPassword })) {
// show loading indicator.
showLoading();
// get user avatar.
const userAvatar = generateAvatar();
// create new user's uuid.
const userUuid = uuid.v4();
// call firebase and cometchat service to register a new account.
auth
.createUserWithEmailAndPassword(email, password)
.then((userCrendentials) => {
if (userCrendentials) {
// call firebase real time database to insert a new user.
realTimeDb
.ref(`users/${userUuid}`)
.set({
id: userUuid,
email,
avatar: userAvatar,
})
.then(() => {
alert(
`${userCrendentials.user.email} was created successfully! Please sign in with your created account`
);
// call cometchat service to register a new account.
const user = new CometChatWidget.CometChat.User(userUuid);
user.setName(email);
user.setAvatar(userAvatar);
CometChatWidget.init({
appID: `${config.CometChatAppId}`,
appRegion: `${config.CometChatRegion}`,
authKey: `${config.CometChatAuthKey}`,
}).then(
(response) => {
CometChatWidget.createOrUpdateUser(user).then(
(user) => {
hideLoading();
},
(error) => {
hideLoading();
}
);
hideSignUp();
},
(error) => {
console.log(error);
//Check the reason for error and take appropriate action.
}
);
});
}
})
.catch((error) => {
hideLoading();
alert(
`Cannot create your account, ${email} might be existed, please try again!`
);
});
}
}
// add event for sign up button.
if (signUpBtn) {
signUpBtn.addEventListener("click", function () {
if (
emailInputElement &&
passwordInputElement &&
confirmPasswordInputElement
) {
const email = emailInputElement.value;
const password = passwordInputElement.value;
const confirmPassword = confirmPasswordInputElement.value;
if (validateNewAccount({ email, password, confirmPassword })) {
registerNewAccount({ email, password, confirmPassword });
}
}
});
}
/**
* check user's credentials is valid, or not.
* @param {*} object - user's credentials.
* @returns valid, or not.
*/
function isUserCredentialsValid({ email, password }) {
return (
email &&
password &&
validator.isEmail(email) &&
validator.isLength(password, { min: 6 })
);
}
// add event for login button.
if (loginBtn) {
loginBtn.addEventListener("click", function () {
// show loading indicator.
showLoading();
// get input user's credentials.
const email = emailLoginInputElement ? emailLoginInputElement.value : null;
const password = passwordLoginInputElement
? passwordLoginInputElement.value
: null;
if (isUserCredentialsValid({ email, password })) {
// if the user's credentials are valid, call Firebase authentication service.
auth
.signInWithEmailAndPassword(email, password)
.then((userCredential) => {
const userEmail = userCredential.user.email;
realTimeDb
.ref()
.child("users")
.orderByChild("email")
.equalTo(userEmail)
.on("value", function (snapshot) {
const val = snapshot.val();
if (val) {
const keys = Object.keys(val);
const user = val[keys[0]];
if (user && user.id) {
CometChatWidget.init({
appID: `${config.CometChatAppId}`,
appRegion: `${config.CometChatRegion}`,
authKey: `${config.CometChatAuthKey}`,
}).then(
(response) => {
CometChatWidget.login({ uid: user.id }).then(
(loggedInUser) => {
// User loged in successfully.
// hide loading.
hideLoading();
// redirect to home page.
window.location.href = "/";
}
);
},
(error) => {
//Check the reason for error and take appropriate action.
}
);
} else {
// hide loading indicator.
hideLoading();
alert(`Your user's name or password is not correct`);
}
}
});
})
.catch((error) => {
console.log(error);
// hide loading indicator.
hideLoading();
alert(`Your user's name or password is not correct`);
});
} else {
// hide loading indicator.
hideLoading();
alert(`Your user's name or password is not correct`);
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment