diff --git a/.gitignore b/.gitignore index 5bed118..d1a6e8a 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ node_modules/ .vscode/ .DS_Store .pgpass -.log \ No newline at end of file +.log +.sh \ No newline at end of file diff --git a/public/css/login.css b/public/css/login.css index c7da188..27f349b 100644 --- a/public/css/login.css +++ b/public/css/login.css @@ -307,3 +307,68 @@ body { font-size: 0.8rem; } } + +/* OAuth Container */ +.oauth-container { + margin-bottom: 20px; +} + +.btn-google { + width: 100%; + background: white; + color: #333; + border: 1px solid #dadce0; + padding: 12px 16px; + border-radius: 8px; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + font-size: 0.95rem; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.btn-google:hover { + background: #f8f9fa; + border-color: #c1c7cd; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.btn-google:active { + transform: translateY(0); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.btn-google svg { + flex-shrink: 0; +} + +/* Divider */ +.divider { + position: relative; + text-align: center; + margin: 20px 0; + color: #64748b; + font-size: 0.9rem; +} + +.divider::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(to right, transparent, #334155, transparent); +} + +.divider span { + background: #0a0a0f; + padding: 0 16px; + position: relative; + z-index: 1; +} diff --git a/public/js/login.js b/public/js/login.js index 8ae7c71..2642cf8 100644 --- a/public/js/login.js +++ b/public/js/login.js @@ -13,6 +13,32 @@ async function checkAuth() { } } +// Google OAuth Sign In +async function signInWithGoogle() { + try { + setLoading(true); + clearMessage(); + + const { data, error } = await supabase.auth.signInWithOAuth({ + provider: 'google', + options: { + redirectTo: `${window.location.origin}/auth/callback` + } + }); + + if (error) { + console.error('Google OAuth error:', error); + showMessage('Fehler bei der Google-Anmeldung: ' + error.message, 'error'); + } + // Note: OAuth redirects the page, so we don't need to handle success here + } catch (error) { + console.error('Google OAuth error:', error); + showMessage('Fehler bei der Google-Anmeldung: ' + error.message, 'error'); + } finally { + setLoading(false); + } +} + // Toggle between login and register forms function toggleForm() { const loginForm = document.getElementById('loginForm'); @@ -65,6 +91,9 @@ function setLoading(show) { // Event Listeners Setup function setupEventListeners() { + // Handle Google OAuth + document.getElementById('googleSignInBtn').addEventListener('click', signInWithGoogle); + // Handle login document.getElementById('loginFormElement').addEventListener('submit', async (e) => { e.preventDefault(); diff --git a/public/login.html b/public/login.html index 7aff8cf..198e01b 100644 --- a/public/login.html +++ b/public/login.html @@ -27,6 +27,23 @@