David/SocialMediaApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loginv2

Browse Source
This commit is contained in:
David
2026-01-28 20:18:37 +11:00
parent c46119db25
commit 5e1ab94a81
2 changed files with 20 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@@ -34,6 +34,11 @@
<label for="password">Password</label> <label for="password">Password</label>
</div> </div>
<div class="input-group hidden" id="confirm-password-group">
<input type="password" id="confirm-password" placeholder=" " autocomplete="new-password">
<label for="confirm-password">Confirm Password</label>
</div>
<a href="#" class="forgot-pass">Forgot Password?</a> <a href="#" class="forgot-pass">Forgot Password?</a>
<button type="submit" class="btn-primary"> <button type="submit" class="btn-primary">
@@ -42,35 +47,7 @@
</button> </button>
</form> </form>
<div class="divider"> <!-- Social Login Removed -->
<span>Or continue with</span>
</div>
<div class="social-login">
<button class="btn-social" aria-label="Login with Google">
<svg viewBox="0 0 24 24" class="social-icon">
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
fill="#4285F4" />
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
fill="#34A853" />
<path
d="M5.84 14.11c-.22-.66-.35-1.36-.35-2.11s.13-1.45.35-2.11V7.05H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.95l3.66-2.84z"
fill="#FBBC05" />
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.05l3.66 2.84c.87-2.6 3.3-4.51 6.16-4.51z"
fill="#EA4335" />
</svg>
</button>
<button class="btn-social" aria-label="Login with Apple">
<svg viewBox="0 0 24 24" class="social-icon">
<path
d="M17.05 20.28c-.98 1.5-2.53 3.51-4.22 3.48-1.63-.04-2.16-1.1-4.04-1.1-1.9 0-2.48 1.07-4.06 1.1-2.91.16-6.49-5.46-5.23-10.74 1.12-4.5 5.5-5.27 6.42-5.18 1.6.15 2.86 1.1 3.75 1.1.9 0 2.25-1.07 4.1-1.03 2.53.11 4.19 1.55 4.97 2.76-4.26 2.15-3.4 8.74 1.41 10.39-.42.94-.8 1.76-1.45 2.72-.65.98-1.28 1.7-1.65 2.5zm-5-17.76c1.23-1.48 2.06-3.52 1.83-5.52-1.78.07-3.92 1.19-5.18 2.65-1.12 1.25-2.09 3.29-1.83 5.32 1.95.15 3.95-1 5.18-2.45z"
fill="currentColor" />
</svg>
</button>
</div>
<p class="signup-link">Don't have an account? <a href="#">Create One</a></p> <p class="signup-link">Don't have an account? <a href="#">Create One</a></p>
</div> </div>

15
script.js
View File

@@ -2,6 +2,8 @@ document.addEventListener('DOMContentLoaded', () => {
const loginForm = document.querySelector('.login-form'); const loginForm = document.querySelector('.login-form');
const emailInput = document.getElementById('email'); const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password'); const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
const confirmPasswordGroup = document.getElementById('confirm-password-group');
const submitBtn = document.querySelector('.btn-primary'); const submitBtn = document.querySelector('.btn-primary');
const btnText = submitBtn.querySelector('span'); const btnText = submitBtn.querySelector('span');
const helperText = document.querySelector('.signup-link'); const helperText = document.querySelector('.signup-link');
@@ -26,11 +28,15 @@ document.addEventListener('DOMContentLoaded', () => {
subtitle.innerText = 'Enter your details below'; subtitle.innerText = 'Enter your details below';
btnText.innerText = 'Sign In'; btnText.innerText = 'Sign In';
helperText.innerHTML = 'Don\'t have an account? <a href="#">Create One</a>'; helperText.innerHTML = 'Don\'t have an account? <a href="#">Create One</a>';
confirmPasswordGroup.classList.add('hidden');
confirmPasswordInput.required = false;
} else { } else {
title.innerText = 'Create Account'; title.innerText = 'Create Account';
subtitle.innerText = 'Start your journey with us'; subtitle.innerText = 'Start your journey with us';
btnText.innerText = 'Sign Up'; btnText.innerText = 'Sign Up';
helperText.innerHTML = 'Already have an account? <a href="#">Sign In</a>'; helperText.innerHTML = 'Already have an account? <a href="#">Sign In</a>';
confirmPasswordGroup.classList.remove('hidden');
confirmPasswordInput.required = true;
} }
// Re-attach listener to the new link element // Re-attach listener to the new link element
@@ -77,6 +83,7 @@ document.addEventListener('DOMContentLoaded', () => {
const email = emailInput.value.trim(); const email = emailInput.value.trim();
const password = passwordInput.value.trim(); const password = passwordInput.value.trim();
const confirmPassword = confirmPasswordInput.value.trim();
const timestamp = new Date().toISOString(); const timestamp = new Date().toISOString();
// Get existing users // Get existing users
@@ -97,12 +104,18 @@ document.addEventListener('DOMContentLoaded', () => {
} else { } else {
// --- SIGNUP LOGIC --- // --- SIGNUP LOGIC ---
// Check if user already exists // 1. Check if user already exists
if (existingUsers.some(u => u.email === email)) { if (existingUsers.some(u => u.email === email)) {
showFeedback(false, 'User exists'); showFeedback(false, 'User exists');
return; return;
} }
// 2. Validate Password Match
if (password !== confirmPassword) {
showFeedback(false, 'Passwords do not match');
return;
}
const newUser = { email, password, joinedAt: timestamp }; const newUser = { email, password, joinedAt: timestamp };
existingUsers.push(newUser); existingUsers.push(newUser);
localStorage.setItem('socialAppUsers', JSON.stringify(existingUsers)); localStorage.setItem('socialAppUsers', JSON.stringify(existingUsers));