diff --git a/css/index.css b/css/index.css index f5561bd..6d78474 100644 --- a/css/index.css +++ b/css/index.css @@ -4966,3 +4966,186 @@ body { @keyframes slideDown { to { opacity: 0; transform: translateY(10px); } } + +/* ========================================================================== + Sliding Panel Auth Modal + ========================================================================== */ +.auth-wrapper { + position: relative; + width: 768px; + max-width: 100%; + min-height: 480px; + background: var(--color-background-secondary); + border-radius: var(--border-radius-lg); + box-shadow: 0 20px 60px rgba(0,0,0,0.3); + overflow: hidden; + display: flex; +} + +.auth-panel-container { + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 40px; + z-index: 1; +} + +.auth-panel-left { + left: 0; + color: var(--color-text-primary); +} + +.auth-panel-right { + left: 50%; + color: var(--color-text-primary); +} + +.auth-slider { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + background: var(--color-background-primary); + z-index: 10; + transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); + display: flex; + flex-direction: column; + justify-content: center; + padding: 40px; + box-shadow: var(--shadow-lg); +} + +.auth-slider.slide-left { + transform: translateX(-100%); +} + +.auth-form-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 40px; + transition: opacity 0.3s ease-in-out, visibility 0.3s, transform 0.4s ease-in-out; +} + +.auth-form-login { + opacity: 1; + visibility: visible; + z-index: 2; +} + +.auth-slider.slide-left .auth-form-login { + opacity: 0; + visibility: hidden; + z-index: 1; + transform: translateX(20px); +} + +.auth-form-signup { + opacity: 0; + visibility: hidden; + z-index: 1; + transform: translateX(-20px); +} + +.auth-slider.slide-left .auth-form-signup { + opacity: 1; + visibility: visible; + z-index: 2; + transform: translateX(0); +} + +.auth-input { + width: 100%; + padding: 12px; + border: 1px solid var(--color-border-tertiary); + border-radius: var(--border-radius-sm); + background: var(--color-background-primary); + color: var(--color-text-primary); + font-size: 14px; + margin-bottom: 16px; + transition: border-color 0.2s; +} + +.auth-input:focus { + outline: none; + border-color: var(--color-text-info); +} + +.auth-btn { + width: 100%; + padding: 12px; + background: var(--color-text-danger); + color: var(--color-background-primary); + border: none; + border-radius: var(--border-radius-sm); + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: filter 0.2s; +} + +.auth-btn:hover { + filter: brightness(0.9); +} + +.auth-ghost-btn { + background: transparent; + border: 1px solid var(--color-border-primary); + color: var(--color-text-primary); + padding: 10px 24px; + border-radius: var(--border-radius-sm); + font-size: 14px; + font-weight: 600; + cursor: pointer; + margin-top: 16px; + transition: background 0.2s; +} + +.auth-ghost-btn:hover { + background: rgba(0,0,0,0.05); +} + +.social-btn-container { + display: flex; + gap: 10px; + margin-bottom: 20px; +} + +.social-btn { + flex: 1; + padding: 10px; + border: 1px solid var(--color-border-tertiary); + background: var(--color-background-primary); + color: var(--color-text-primary); + border-radius: var(--border-radius-sm); + font-size: 13px; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: background 0.2s; +} + +.social-btn:hover { + background: var(--color-background-secondary); +} + +.auth-title { + margin: 0 0 24px; + font-size: 24px; + font-weight: 700; + color: var(--color-text-danger); +} diff --git a/index.html b/index.html index 3333d17..7e429b0 100644 --- a/index.html +++ b/index.html @@ -13,39 +13,67 @@ -
-
- -

Welcome back

-

Sign in to your StudyPlan account

+
+
+ + +
+

Don't Have an account?

+

Join StudyPlan today to organize your tasks, schedule your time, and reach your goals.

+ +
- - - + +
+

Have an account?

+

Welcome back! Sign in to continue accessing your organized study schedule.

+ +
- + +
+ + + - + + +
- +
-
+
@@ -305,63 +333,75 @@

{ + e.preventDefault(); + isLogin = true; + authSlider.classList.remove('slide-left'); + loginError.style.display = 'none'; + signupError.style.display = 'none'; + // Persist input values + loginEmail.value = signupEmail.value; + loginPassword.value = signupPassword.value; }); // Password validation function function validatePassword(password) { - // Minimum 8 characters const minLength = password.length >= 8; - // At least 1 capital letter const hasCapital = /[A-Z]/.test(password); - // At least 1 special character const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password); return minLength && hasCapital && hasSpecial; } -document.getElementById('auth-submit-btn').addEventListener('click', async () => { - - const email = document.getElementById('auth-email').value.trim(); - const password = document.getElementById('auth-password').value.trim(); - const errorEl = document.getElementById('auth-error'); - - errorEl.style.display = 'none'; - - // Empty fields check - if (!email || !password) { - errorEl.textContent = 'Please fill in all fields'; - errorEl.style.display = 'block'; - return; - } - - // Password validation check - if (!validatePassword(password)) { - errorEl.textContent = - 'Password must be at least 8 characters long, contain 1 capital letter and 1 special character.'; - errorEl.style.display = 'block'; - return; - } + async function handleAuth(endpoint, email, password, errorEl, name = null) { + errorEl.style.display = 'none'; + + // Empty fields check + if (!email || !password || (!isLogin && !name)) { + errorEl.textContent = 'Please fill in all fields'; + errorEl.style.display = 'block'; + return; + } - const endpoint = isLogin ? '/api/auth/login' : '/api/auth/signup'; + // Password validation check + if (!validatePassword(password)) { + errorEl.textContent = 'Password must be at least 8 chars, 1 capital, 1 special.'; + errorEl.style.display = 'block'; + return; + } - try { - const res = await fetch(endpoint, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ email, password }) - }); + try { + const res = await fetch(endpoint, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email, password, name }) + }); const data = await res.json(); if (!res.ok) { @@ -372,13 +412,41 @@

=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/prebuild-install": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz", diff --git a/server.js b/server.js index 47e1429..afde55a 100644 --- a/server.js +++ b/server.js @@ -535,6 +535,23 @@ app.post('/api/auth/login', (req, res) => { res.json({ success: true, email: user.email }); }); +// Mock Social Logins +app.post('/api/auth/google', (req, res) => { + const mockEmail = 'user@google.com'; + if (!users[mockEmail]) { + users[mockEmail] = { email: mockEmail, password: 'mockpassword' }; + } + res.json({ success: true, email: mockEmail }); +}); + +app.post('/api/auth/notion', (req, res) => { + const mockEmail = 'user@notion.so'; + if (!users[mockEmail]) { + users[mockEmail] = { email: mockEmail, password: 'mockpassword' }; + } + res.json({ success: true, email: mockEmail }); +}); + // Intentional test route for verifying server error page behavior. app.get('/debug/force-error', (req, res, next) => { next(new Error('Intentional test error'));