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

Jump to bottom

#399 Added Back Button and Password Visibility Toggle to Sign-Up/Login Page #507

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

#399 Added Back Button and Password Visibility Toggle to Sign-Up/Login Page #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45c5fc9
#399 Added Back Button and Password Visibility Toggle to Sign-Up/Logi…
PriyaIngle7 Oct 17, 2024
582ebfb
Merge branch 'main' into main
PriyaIngle7 Oct 17, 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
72 changes: 52 additions & 20 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Krishna Bhakti Forum - Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

Expand Down Expand Up @@ -65,8 +66,13 @@
font-weight: 600;
}

.password-container {
position: relative;
width: 100%;
}

input {
width: 93%;
width: 95%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid #d1a054;
Expand All @@ -81,6 +87,21 @@
box-shadow: 0 0 5px rgba(74, 43, 15, 0.5);
}

.eye-icon {
position: absolute;
right: 10px;
top: 35%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
color: #4a2b0f;
transition: color 0.3s;
}

.eye-icon:hover {
color: #d1a054;
}

.forgot-password {
display: block;
margin-top: -10px;
Expand Down Expand Up @@ -174,7 +195,12 @@ <h2>Enter Krishna's Bhakti Forum</h2>
<input type="text" id="username" name="username" required />

<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<div class="password-container">
<input type="password" id="password" name="password" required />
<span class="eye-icon" onclick="togglePasswordVisibility()">
<i class="fas fa-eye" id="eye-icon"></i>
</span>
</div>

<a class="forgot-password" href="">Forgot your sacred words?</a>

Expand Down Expand Up @@ -203,36 +229,42 @@ <h2>Enter Krishna's Bhakti Forum</h2>
data-logo_alignment="left">
</div>
</div>

</div>
<footer>
<p>&copy; 2023 Krishna Bhakti Forum. All rights reserved.</p>
</footer>
</div>
<script>
document.getElementById("form").addEventListener("submit", function (event) {
event.preventDefault();

const storedUsername = localStorage.getItem("username");
const storedPassword = localStorage.getItem("password");

const enteredUsername = document.getElementById("username").value;
const enteredPassword = document.getElementById("password").value;

if (enteredUsername === storedUsername && enteredPassword === storedPassword) {
localStorage.setItem("isLoggedIn", "true");
window.location.href = "./discussion-forum.html";
function togglePasswordVisibility() {
const passwordInput = document.getElementById('password');
const eyeIcon = document.getElementById('eye-icon');
if (passwordInput.type === "password") {
passwordInput.type = "text";
eyeIcon.classList.remove("fa-eye");
eyeIcon.classList.add("fa-eye-slash");
} else {
alert("Invalid devotee name or password. Please try again with blessings from Lord Krishna.");
passwordInput.type = "password";
eyeIcon.classList.remove("fa-eye-slash");
eyeIcon.classList.add("fa-eye");
}
}

document.getElementById('form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission

const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

if (username === "" || password === "") {
alert("Please fill in all fields.");
} else {
// Assuming some validation fails
alert("Incorrect username or password.");
}
});

function handleCredentialResponse(response) {
const user = jwt_decode(response.credential);
// Here you can access user information
console.log(user);

// Set user info to localStorage or handle login
localStorage.setItem("username", user.name);
localStorage.setItem("email", user.email);
localStorage.setItem("isLoggedIn", "true");
Expand Down
85 changes: 75 additions & 10 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Krishna Bhakti Forum - Sign Up</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

Expand Down Expand Up @@ -66,7 +67,7 @@
}

input {
width: 93%;
width: 95%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid #d1a054;
Expand All @@ -81,17 +82,35 @@
box-shadow: 0 0 5px rgba(74, 43, 15, 0.5);
}

.password-container {
position: relative;
}

.eye-icon {
position: absolute;
top: 35%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
color: #4a2b0f;
transition: color 0.3s;
}

.eye-icon:hover {
color: #d1a054;
}

button {
background: linear-gradient(135deg, #d1a054, #4a2b0f);
color: #fff;
padding: 12px 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
font-size: 18px;
width: 100%;
margin-top: 10px;
margin-top: 20px;
}

button:hover {
Expand Down Expand Up @@ -130,6 +149,22 @@
margin-top: 20px;
}

.back-home {
text-align: center;
margin-top: 15px;
}

.back-home-link {
color: #4a2b0f;
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
}

.back-home-link:hover {
color: #d1a054;
}

@media (max-width: 480px) {
.container {
padding: 10px;
Expand All @@ -148,27 +183,28 @@
}
}
</style>
<!-- Include Google Platform Library -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<div class="container">
<div class="signup-form" id="signupForm">
<h2>Join Krishna Bhakti Forum</h2>
<form id="form" action="./discussion-forum.html" method="GET">
<form id="form" action="./discussion-forum.html" method="GET" onsubmit="return validateAndSave(event);">
<label for="username">Devotee Name:</label>
<input type="text" id="username" name="username" required />

<label for="email">Email:</label>
<input type="email" id="email" name="email" required />

<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<div class="password-container">
<input type="password" id="password" name="password" required />
<i class="fas fa-eye eye-icon" onclick="togglePassword()"></i>
</div>

<!-- Step 3: Google Sign-In Button -->
<div class="google-signin">
<div id="g_id_onload"
data-client_id="533616281722-3gijg2u8b6aue0878sbmna6cs6q1lquc.apps.googleusercontent.com"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signup"
data-ux_mode="popup"
data-login_uri="http://localhost:5502/"
Expand All @@ -185,24 +221,53 @@ <h2>Join Krishna Bhakti Forum</h2>
</div>
</div>

<button onclick="saveUsername()">Begin Your Spiritual Journey</button>
<button type="submit">Begin Your Spiritual Journey</button>

<div class="login">
Already on the path? <a class="login-link" href="./login.html">Login</a>
</div>
</form>

<div class="back-home">
<a href="./index.html" class="back-home-link">Back to Home Page</a>
</div>
</div>
<footer>
<p>&copy; 2023 Krishna Bhakti Forum. All rights reserved.</p>
</footer>
</div>

<script>
function saveUsername() {
function togglePassword() {
const passwordInput = document.getElementById("password");
const eyeIcon = document.querySelector(".eye-icon");
if (passwordInput.type === "password") {
passwordInput.type = "text";
eyeIcon.classList.remove("fa-eye");
eyeIcon.classList.add("fa-eye-slash");
} else {
passwordInput.type = "password";
eyeIcon.classList.remove("fa-eye-slash");
eyeIcon.classList.add("fa-eye");
}
}

function validateAndSave(event) {
event.preventDefault();
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;

if (username === "" || email === "" || password === "") {
alert("Please fill in all fields.");
return false;
}

localStorage.setItem("username", username);
localStorage.setItem("password", password);

window.location.href = "./discussion-forum.html";
return true;
}
</script>
</body>
Expand Down