Skip to content

Commit

Permalink
done
Browse files Browse the repository at this point in the history
  • Loading branch information
@Subhajit-2023-44
Subhajit-2023-44 committed Oct 14, 2024
1 parent 2d39282 commit 000b9c9
Showing 1 changed file with 78 additions and 56 deletions.
134 changes: 78 additions & 56 deletions login/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,112 +5,134 @@
<title>Collect your GamingTools</title>
<link rel="stylesheet" href="login.css">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
<style>
.password-container {
position: relative;
display: inline-block;
width: 100%; /* Ensure full width */
}
.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: 20px; /* Adjust as needed */
height: 20px; /* Adjust as needed */
margin-top: 13px;
}
/* Optional: Ensure the input takes full width */
.password-container input {
width: calc(100% - 0px); /* Adjust for icon size */
}
</style>
</head>
<body>
<div class="linksHome">
<a href="../index.html">←Back</a>
</div>
<div class="login-container">

<h1>Login to Your Account</h1>
<form action="#" method="post">
<div class="input-group">
<label for="username">Gmail</label>
<input type="text" id="gmail" name="username" required>
</div>
<div class="input-group">
<div class="input-group password-container">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<img src="https://i.postimg.cc/vBSg320Y/eye.png" alt="Toggle Password" class="toggle-password" id="toggle-password">
</div>
<div ontouchstart="">
<div class="button">
<a href="#">Login</a>
</div>
</div>
<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">
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
<ul class="social-icon">
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-facebook"></ion-icon>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<li class="social-icon__item"><a class="social-icon__link" href="#">
<i class="fa-brands fa-x-twitter"></i>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-linkedin"></ion-icon>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-instagram"></ion-icon>
<li class="social-icon__item"><a class="social-icon__link" href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a></li>
</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="../index.html">Home</a></li>
<li class="menu__item"><a class="menu__link" href="">About</a></li>
<li class="menu__item"><a class="menu__link" href="../index.html#controller">Services</a></li>
<li class="menu__item"><a class="menu__link" href="../Contributors/contributor.html">Team</a></li>
<li class="menu__item"><a class="menu__link" href="../index.html#contact">Contact</a></li>

<li class="menu__item"><a class="menu__link" href="../index.html">Home</a></li>
<li class="menu__item"><a class="menu__link" href="">About</a></li>
<li class="menu__item"><a class="menu__link" href="../index.html#controller">Services</a></li>
<li class="menu__item"><a class="menu__link" href="../Contributors/contributor.html">Team</a></li>
<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>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>


</footer>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>

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

login.addEventListener("click",(e)=>{
togglePassword.addEventListener('click', function () {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.src = type === 'password'
? 'https://i.postimg.cc/63pdpv8P/hidden.png' // Closed eye
: 'https://i.postimg.cc/vBSg320Y/eye.png'; // Open eye
});

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)
})
};
console.log(userData);
loginUser(userData);
});

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 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);
}
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);
}
}
};
</script>
<script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
</html>

0 comments on commit 000b9c9

Please sign in to comment.