Skip to content

Commit

Permalink
fix:#563 Password visibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@codeseker
codeseker committed Jun 14, 2024
1 parent 5d65c37 commit 17bf76a
Showing 1 changed file with 160 additions and 151 deletions.
311 changes: 160 additions & 151 deletions login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link
href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./chatBot/style.css">
<script src="https://kit.fontawesome.com/d1c523657e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/navbar.css" />
Expand All @@ -31,74 +31,76 @@
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="css/desktop_9.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../Css-files/scroll-top-button.css">
<link rel="stylesheet" href="../Css-files/content.css">
<script src="../hamburger.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../Css-files/scroll-top-button.css">
<link rel="stylesheet" href="../Css-files/content.css">
<script src="../hamburger.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>Login</title>
</head>

<body>
<div class="navbar" id="navbar">
<div class="navs1">
<a href="index.html"><img src="img/final logo 1.png" alt="" /></a>
<div class="span1"><a href="index.html">Blogzen</a></div>
<!-- <div class="span2"><a href="index.html">zen</a></div> -->
</div>

<div class="navs2">
<!-- <img src="img/final logo 1.png" alt="" /> -->
<img src="assests/moon.png" alt="image" id="themeImg">
<button id="loginButton" class="button_nav txtColor hello" ><a href="login.html">
LogIn</a></button>
<button id="signup" class="button_nav txtColor">Sign Up</button>
<button onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
</div>
</div>

<section>
<div class="main-login">
<div class="left-login" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
<h1><b>Login Here</b></h1>
<img src="1.png" class="left-login-image" alt="food">
<div class="navbar" id="navbar">
<div class="navs1">
<a href="index.html"><img src="img/final logo 1.png" alt="" /></a>
<div class="span1"><a href="index.html">Blogzen</a></div>
<!-- <div class="span2"><a href="index.html">zen</a></div> -->
</div>
<div class="right-login">
<div class="card-login" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
<button class="close-btn">&times;</button>
<h1>LOGIN</h1>
<br>
<div class="textfield">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter Email">
</div>
<div class="textfield">
<label for="username">Username</label>
<input type="text" name="Username" id="username" placeholder="Username">
</div>
<div class="textfield">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter Password">
<span id="login-hide">
<i class='icon bx bxs-hide' style="font-size: 27px;"></i>
</span>

<div class="navs2">
<!-- <img src="img/final logo 1.png" alt="" /> -->
<img src="assests/moon.png" alt="image" id="themeImg">
<button id="loginButton" class="button_nav txtColor hello"><a href="login.html">
LogIn</a></button>
<button id="signup" class="button_nav txtColor">Sign Up</button>
<button onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
</div>
</div>

<section>
<div class="main-login">
<div class="left-login" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<h1><b>Login Here</b></h1>
<img src="1.png" class="left-login-image" alt="food">
</div>
<div class="right-login">
<div class="card-login" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<button class="close-btn">&times;</button>
<h1>LOGIN</h1>
<br>
<div class="textfield">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter Email">
</div>
<div class="textfield">
<label for="username">Username</label>
<input type="text" name="Username" id="username" placeholder="Username">
</div>
<div class="textfield">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter Password">
<span id="login-hide" style="cursor: pointer;">
<i class='icon bx bxs-hide' style="font-size: 27px;" id="togglePasscode"></i>
</span>
</div>
<button class="btn-login" onclick="validateLogin()">Login</button>
<h3>
<center>OR</center>
</h3>
<button id="google-login">Login with Google</button>
</div>
<button class="btn-login" onclick="validateLogin()">Login</button>
<h3>
<center>OR</center>
</h3>
<button id="google-login">Login with Google</button>
</div>
</div>
</div>
</section>
<div class="footer">
</section>
<div class="footer">
<div class="socials">
<div class="footer_titles">Follow us on our socials</div>
<div class="icons">

</div>
</div>
<div class="newsletter">
Expand All @@ -109,101 +111,108 @@ <h3>
</form>
<div id="subscriptionMessage" style="display: none;">You have subscribed successfully!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
duration: 1000,
easing: 'ease',
once: false,
});

// Firebase configuration
const firebaseConfig = {
//Add your Config File
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const database = firebase.database();
const auth = firebase.auth();

// Password visibility toggle
const passwordInput = document.getElementById("password");
const hideLogo = document.getElementById("login-hide");
hideLogo.addEventListener("click", function () {
const passwordField = this.querySelector("i");
if (passwordInput.getAttribute("type") == "text") {
passwordInput.setAttribute("type", "password");
passwordField.classList.replace("bxs-show", "bxs-hide");
} else {
passwordInput.setAttribute("type", "text");
passwordField.classList.replace("bxs-hide", "bxs-show");
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>


// added all these inside try catch so that they do not interfere to the below code execution
try {
AOS.init({
duration: 1000,
easing: 'ease',
once: false,
});

// Firebase configuration
const firebaseConfig = {
//Add your Config File
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const database = firebase.database();
const auth = firebase.auth();
} catch (error) {
console.log("Error")
}
});

// Close button redirect
const closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', function () {
window.location.href = '../index.html';
});

// Login validation
function validateLogin() {
const email = document.getElementById("email").value;
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;

if (email === "") {
alert("Please Enter Email");
} else if (username === "") {
alert("Please Enter Username");
} else if (password === "") {
alert("Please Enter Password");
} else {
auth.signInWithEmailAndPassword(email, password)
.then((userCredential) => {
const user = userCredential.user;
database.ref('users/' + user.uid).set({
username: username,
email: email
}).then(() => {
alert("Login successful");
window.location.href = '../index.html';
}).catch((error) => {
alert("Data could not be saved: " + error.message);

// Password visibility toggle
const passwordInput = document.getElementById("password");
const toggle = document.getElementById("togglePasscode");

// simple toggle logic
toggle.addEventListener("click", () => {
if (passwordInput.type === "password") {
passwordInput.type = "text";
} else {
passwordInput.type = "password";
}
})


// Close button redirect
const closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', function () {
window.location.href = '../index.html';
});

// Login validation
function validateLogin() {
const email = document.getElementById("email").value;
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;

if (email === "") {
alert("Please Enter Email");
} else if (username === "") {
alert("Please Enter Username");
} else if (password === "") {
alert("Please Enter Password");
} else {
auth.signInWithEmailAndPassword(email, password)
.then((userCredential) => {
const user = userCredential.user;
database.ref('users/' + user.uid).set({
username: username,
email: email
}).then(() => {
alert("Login successful");
window.location.href = '../index.html';
}).catch((error) => {
alert("Data could not be saved: " + error.message);
});
})
.catch((error) => {
alert("Login failed: " + error.message);
});
}
}
// Google Sign-In
document.getElementById('google-login').addEventListener('click', () => {
const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider)
.then((result) => {
const user = result.user;

// Save user info to Realtime Database if new user
if (result.additionalUserInfo.isNewUser) {
return database.ref('users/' + user.uid).set({
name: user.displayName,
email: user.email,
username: user.email.split('@')[0]
});
}
})
.then(() => {
alert('Logged in with Google!');
window.location.href = '../index.html'; // Redirect to homepage or dashboard
})
.catch((error) => {
alert("Login failed: " + error.message);
console.error('Error logging in with Google:', error);
alert(error.message);
});
}
}
// Google Sign-In
document.getElementById('google-login').addEventListener('click', () => {
const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider)
.then((result) => {
const user = result.user;

// Save user info to Realtime Database if new user
if (result.additionalUserInfo.isNewUser) {
return database.ref('users/' + user.uid).set({
name: user.displayName,
email: user.email,
username: user.email.split('@')[0]
});
}
})
.then(() => {
alert('Logged in with Google!');
window.location.href = '../index.html'; // Redirect to homepage or dashboard
})
.catch((error) => {
console.error('Error logging in with Google:', error);
alert(error.message);
});
});
</script>
});
</script>
</body>

</html>

0 comments on commit 17bf76a

Please sign in to comment.