Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added show password buttons #180 #193

Closed
wants to merge 5 commits into from
Closed

Added show password buttons #180 #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c1419fa
Added show password buttons #180
devarsheecodess Oct 8, 2024
b9e1433
Merge branch 'main' into main
devarsheecodess Oct 8, 2024
232ce08
Merge branch 'main' into main
devarsheecodess Oct 11, 2024
2793866
Merge branch 'main' into main
devarsheecodess Oct 12, 2024
26385c2
Merge branch 'main' into main
devarsheecodess Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 91 additions & 3 deletions SignUp/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
<title>Sign Up for GamingTools</title>
<link rel="stylesheet" href="signup.css">
<link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
.condition {
color: gray; /* Default color */
Expand Down Expand Up @@ -41,7 +48,10 @@ <h1>Create Your Account</h1>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Create password" required>
<div class="pass">
<input type="password" id="password" name="password" required>
<button id="showPasswordBtn"><i class="fa-regular fa-eye" id="passicon"></i></button>
</div>
</div>

<!-- Password Recommendations Section -->
Expand All @@ -55,7 +65,10 @@ <h1>Create Your Account</h1>

<div class="input-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password" required>
<div class="pass">
<input type="password" id="confirm-password" name="confirm-password" required>
<button id="showPasswordBtn-conf"><i class="fa-regular fa-eye" id="passicon-conf"></i></button>
</div>
</div>
<div id="password-error" class="error-message"></div> <!-- Password error container -->
<button type="submit" class="signup-button">Sign Up</button>
Expand All @@ -68,10 +81,85 @@ <h1>Create Your Account</h1>
Sign up with Google
</button>
<div class="links">
<a href="../login/login.html"><u>Already have an account? Login</u></a>
<a>Already have an account? <u><a href="../login/login.html">Login</a></u></a>
</div>
</div>
<script>
const signup = document.querySelector(".signup-button");

signup.addEventListener("click",(e)=>{
e.preventDefault();

const name = document.querySelector("#username").value;
const email = document.querySelector("#email").value;
const password = document.querySelector("#password").value;
const confirmPassword = document.querySelector("#confirm-password").value;

if(!name || !email || !password || !confirmPassword){
alert("every feild is required");
return;
}
const userdata = {
name,
email,
password,
confirmPassword
}
registeruser(userdata);

} )

// Show password
document.getElementById("showPasswordBtn").addEventListener("click", () => {
const password = document.getElementById("password");
const icon = document.getElementById("passicon");

if (password.type === "password") {
password.type = "text";
icon.classList.remove("fa-regular", "fa-eye");
icon.classList.add("fa-solid", "fa-eye-slash");
} else {
password.type = "password";
icon.classList.remove("fa-solid", "fa-eye-slash");
icon.classList.add("fa-regular", "fa-eye");
}
});

// Show password-conf
document.getElementById("showPasswordBtn-conf").addEventListener("click", () => {
const password = document.getElementById("confirm-password");
const icon = document.getElementById("passicon-conf");

if (password.type === "password") {
password.type = "text";
icon.classList.remove("fa-regular", "fa-eye");
icon.classList.add("fa-solid", "fa-eye-slash");
} else {
password.type = "password";
icon.classList.remove("fa-solid", "fa-eye-slash");
icon.classList.add("fa-regular", "fa-eye");
}
});


const registeruser = async(user)=>{

try{
const res = await fetch("http://localhost:5000/auth/signup",{
method:"POST",
headers:{"content-type" : "application/json"},
body:JSON.stringify(user)
})

const data = await res.json();
console.log(data);
window.location.href="http://127.0.0.1:5500/Collect-your-GamingTools/login/login.html"

}catch(err){
console.log(err.message)
}
}
</script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="signup.js"></script> <!-- Link to the signup.js file -->
</body>
Expand Down
86 changes: 79 additions & 7 deletions login/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collect Your Gaming Tools - Login</title>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Collect your GamingTools</title>
<link rel="stylesheet" href="login.css">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto:wght@400&display=swap" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
Expand Down Expand Up @@ -42,6 +43,25 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
<button type="button" class="social-button google">Login with Google</button>
</div>
</div>
<div class="input-group">
<label for="password">Password</label>
<div class="pass">
<input type="password" id="password" name="password" required />
<button type="button" id="showPasswordBtn">
<i class="fa-regular fa-eye" id="passicon"></i>
</button>
</div>
</div>
<div ontouchstart="">
<div class="button">
<a href="#">Login</a>
</div>
</div>
</form>
<div class="links">
<a href="forgot.html" class="hal">Forgot Password?</a>
<a href="../SignUp/signup.html" class="hal2">Sign Up</a>
</div>
</div>
<footer class="footer">
<ul class="social-icon">
Expand All @@ -66,12 +86,64 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
<li class="menu__item"><a class="menu__link" href="../index.html#contact">Contact</a></li>
</ul>
<p>&copy;2024 Collect your Gaming Tools | All Rights Reserved</p>
</footer>
</footer>

<script>
const loginButton = document.querySelector(".login-button");
</body>
<script>
const loginButton = document.querySelector(".login-button");
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');
const login = document.querySelector(".button");

login.addEventListener("click", (e) => {
e.preventDefault();

const email = document.querySelector("#gmail").value;
const password = document.querySelector("#password").value;
const userData = {
email,
password,
};
console.log(userData);
loginUser(userData);
});

// Show password
document.getElementById("showPasswordBtn").addEventListener("click", () => {
const password = document.getElementById("password");
const icon = document.getElementById("passicon");

if (password.type === "password") {
password.type = "text";
icon.classList.remove("fa-regular", "fa-eye");
icon.classList.add("fa-solid", "fa-eye-slash");
} else {
password.type = "password";
icon.classList.remove("fa-solid", "fa-eye-slash");
icon.classList.add("fa-regular", "fa-eye");
}
});

const loginUser = async (user) => {
try {
const res = await fetch("http://localhost:5000/auth/signin", {
method: "POST",
credentials: "include",
redirect: "follow",
headers: { "content-type": "application/json" },
body: JSON.stringify(user),
});
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json();

window.location.href =
"http://127.0.0.1:5500/Collect-your-GamingTools/index.html";
} catch (e) {
console.log(e.message);
}
}

togglePassword.addEventListener('click', function () {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
Expand Down