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

SUCCESSFULLY ENHANCED THE USER SIGNUP OR REGISTER FORM. #534

Closed
wants to merge 3 commits into from
Closed

SUCCESSFULLY ENHANCED THE USER SIGNUP OR REGISTER FORM. #534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a25d97
SUCCESSFULLY ENHANCED THE USER INTERFACE OF THE LOGIN PAGE
dnyanesh99borse Oct 16, 2024
dee803b
SUCCESSFULLY ENHANCEDD THE USER REGISTRATION AND SIGNUP FORM
dnyanesh99borse Oct 17, 2024
78a2986
Merge branch 'main' into signup-form
dnyanesh99borse Oct 18, 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
Binary file added SignUp/gaming.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SignUp/google.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
377 changes: 65 additions & 312 deletions SignUp/signup.css
View file
Open in desktop

Large diffs are not rendered by default.

87 changes: 29 additions & 58 deletions SignUp/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,76 +3,47 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up for GamingTools</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="signup.css">
<link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
<style>
.condition {
color: gray; /* Default color */
font-size: 0.9em;
}
.condition.met {
color: lightgreen; /* Turns green when condition is met */
}
.error-message {
color: red;
font-size: 0.85em;
margin-top: 5px;
}
</style>
<title>Register</title>
</head>
<body>

<span id="link-home" class="linksHome">
<a href="../index.html">Home</a>
</span>

<div class="signup-container">
<h1>Create Your Account</h1>
<form action="#" method="post">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Create a Username" required>
<div class="register-container">
<form id="registerForm" class="register-form">
<h2>Welcome to Registration!</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" id="username" placeholder="Create a Username" required>
</div>
<<<<<<< HEAD
<div class="input-group">
<label for="email">Email</label>
<div id="email-error" class="error-message"></div> <!-- Error message container -->
<input type="email" id="email" name="email" placeholder="Enter your mail-id" required>
=======
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" id="email" placeholder="Enter your Email" required>
>>>>>>> e37cd67 (SUCCESSFULLY ENHANCEDD THE USER REGISTRATION AND SIGNUP FORM)
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Create password" required>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" id="password" placeholder="Create Password" required>
</div>

<!-- Password Recommendations Section -->
<div class="password-recommendations">
<p id="length" class="condition">At least 8 characters</p>
<p id="uppercase" class="condition">Contains uppercase letters</p>
<p id="lowercase" class="condition">Contains lowercase letters</p>
<p id="number" class="condition">Contains numbers</p>
<p id="special" class="condition">Contains special characters</p>


<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="input-field">
<i class="fas fa-lock"></i>
<input type="password" id="confirmPassword" placeholder="Confirm Password" required>
</div>
<button type="submit" class="btn">Sign Up</button>
<div class="alternative-signup">
<p>OR</p>
<button class="google-signup">
<img src="google.png" alt="Google Logo"> Sign up with Google
</button>
</div>
<div id="password-error" class="error-message"></div> <!-- Password error container -->
<button type="submit" class="signup-button">Sign Up</button>
</form>
<div class="or-divider">
<span>OR</span>
</div>
<button id="google-signup" class="google-signup-button">
<img src="../images/google-icon.png" alt="Google Icon" class="google-icon">
Sign up with Google
</button>
<div class="links">
<a href="../login/login.html"><u>Already have an account? Login</u></a>
</div>
</div>

<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="signup.js"></script> <!-- Link to the signup.js file -->
<script src="signup.js"></script>
</body>
</html>
115 changes: 20 additions & 95 deletions SignUp/signup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,21 @@
document.addEventListener("DOMContentLoaded", () => {
const signupButton = document.querySelector(".signup-button");

// List of trusted email domains
const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com" , "protonmail.com" , "icloud.com" , "tutanota.com"];

signupButton.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;
const emailError = document.querySelector("#email-error"); // Reference to email error div
const passwordError = document.querySelector("#password-error"); // Reference to password error div

// Clear any previous error messages
emailError.textContent = "";
emailError.style.display = "none"; // Hide the error message by default
passwordError.textContent = "";
passwordError.style.display = "none"; // Hide the error message by default

if (!name || !email || !password || !confirmPassword) {
emailError.textContent = "Every field is required.";
emailError.style.display = "block";
return;
}

// Email domain validation
const emailDomain = email.split("@")[1]; // Get the domain from the email
if (!trustedDomains.includes(emailDomain)) {
emailError.textContent = "Please use an email address from a trusted provider (e.g., Gmail, Outlook, Yahoo) etc.";
emailError.style.display = "block";
return;
}

// Password matching validation
if (password !== confirmPassword) {
passwordError.textContent = "Passwords do not match.";
passwordError.style.display = "block";
return;
}

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return; // Stop the function if the email is not in the right format
}

const userdata = {
name,
email,
password,
confirmPassword
};

registerUser(userdata);
});

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);
}
};

// Password Strength Check
const passwordInput = document.querySelector("#password");
const conditions = {
length: document.getElementById("length"),
uppercase: document.getElementById("uppercase"),
lowercase: document.getElementById("lowercase"),
number: document.getElementById("number"),
special: document.getElementById("special")
};

passwordInput.addEventListener("input", () => {
const password = passwordInput.value;

// Check each condition and toggle the "met" class
conditions.length.classList.toggle("met", password.length >= 8);
conditions.uppercase.classList.toggle("met", /[A-Z]/.test(password));
conditions.lowercase.classList.toggle("met", /[a-z]/.test(password));
conditions.number.classList.toggle("met", /\d/.test(password));
conditions.special.classList.toggle("met", /[!@#$%^&*(),.?":{}|<>]/.test(password));
});
document.getElementById('registerForm').addEventListener('submit', function(event) {
event.preventDefault();

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

if (password !== confirmPassword) {
alert('Passwords do not match!');
return;
}

if (password.length < 8) {
alert('Password must be at least 8 characters long!');
return;
}

alert('Registration successful!');
// You can add further code to submit the form data to the server.
});
Binary file added login/gaming.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
164 changes: 164 additions & 0 deletions login/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,169 @@

/* General Reset */
* {
signup-form
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
background-image: url('gaming.jpg'); /* Add your background image here */
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 70rem;
}

.login-box {
background: rgba(255, 255, 255, 0.1); /* Transparent background */
padding: 40px;
border-radius: 12px;
backdrop-filter: blur(5px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
width: 100%;
max-width: 400px;
text-align: center;
transition: transform 0.3s ease;
}

.login-box:hover {
border: 1px solid rgba(0, 128, 0, 0.901);
}

h2 {
color: white;
margin-bottom: 30px;
font-size: 28px;
letter-spacing: 1px;
}

.input-box {
position: relative;
margin-bottom: 20px;
transition: 0.3s ease;
}

.input-box input {
width: 100%;
padding: 15px;
padding-left: 50px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.2);
outline: none;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 16px;
transition: border 0.3s ease, box-shadow 0.3s ease;
}

.input-box i {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
transition: color 0.3s ease;
}

.input-box input:focus {
border: 1px solid rgba(0, 168, 120, 0.7);
box-shadow: 0 4px 15px rgba(0, 168, 120, 0.3);
}

.input-box input:focus + i {
color: rgb(0, 255, 183);
}

.forgot-password {
display: block;
margin: 10px 0;
color: rgb(255, 255, 255);
font-size: 14px;
text-decoration: none;
transition: color 0.3s ease;
}

.forgot-password:hover {
color:rgb(4, 153, 111);
}

.login-btn {
width: 100%;
padding: 15px;
background-color: #00A878;
border: none;
border-radius: 8px;
color: white;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
transition: background 0.3s ease, box-shadow 0.3s ease;
}

.login-btn:hover {
background-color: #00875f;
box-shadow: 0 4px 15px rgba(0, 168, 120, 0.3);
}

.social-login p {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-bottom: 10px;
}

.social-login button {
width: 100%;
padding: 15px;
margin-top: 10px;
border-radius: 8px;
border: none;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, transform 0.3s ease;
}

.social-login button i {
margin-right: 10px;
font-size: 20px;
}

.apple-btn {
background-color: black;
color: white;
}

.google-btn {
background-color: white;
color: #333;
}

.social-login button:hover {
transform: scale(1.03);
}

.apple-btn:hover {
background-color: #333;
}

.google-btn:hover {
background-color: #f2f2f2;

margin: 0;
padding: 0;
box-sizing: border-box;
Expand Down Expand Up @@ -347,4 +510,5 @@ body {
font-size: 1em; /* Adjust icon size */
right: 10px; /* Reduce right spacing for smaller screens */
}
main
}
Loading