re-add auth sources
This commit is contained in:
Eduard Prigoana
parent
3a0cf29a4a
commit
0b6262cdca
8 changed files with 96 additions and 35 deletions
|
|
@ -1,16 +1 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
|
||||
/>
|
||||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||||
</svg>
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 542 B After Width: | Height: | Size: 843 B |
1
images/gitlab.svg
Normal file
1
images/gitlab.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitLab</title><path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z"/></svg>
|
||||
|
After Width: | Height: | Size: 574 B |
1
images/google.svg
Normal file
1
images/google.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 0 262 262" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
|
||||
|
After Width: | Height: | Size: 993 B |
1
images/spotify.svg
Normal file
1
images/spotify.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
|
||||
|
After Width: | Height: | Size: 698 B |
20
index.html
20
index.html
|
|
@ -1628,12 +1628,6 @@
|
|||
<span>GitHub</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" id="sidebar-nav-download-bottom">
|
||||
<a href="/download">
|
||||
<use svg="!lucide/download.svg" size="24" />
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -3209,18 +3203,6 @@
|
|||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Show Download in Sidebar</span>
|
||||
<span class="description"
|
||||
>Display the Download link in the sidebar navigation</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="sidebar-show-download-bottom-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Show Discord in Sidebar</span>
|
||||
|
|
@ -4645,6 +4627,8 @@
|
|||
"
|
||||
>
|
||||
<button id="auth-connect-btn" class="btn-secondary">Connect with Google</button>
|
||||
<button id="auth-github-btn" class="btn-secondary">Connect with GitHub</button>
|
||||
<button id="auth-discord-btn" class="btn-secondary">Connect with Discord</button>
|
||||
<button id="toggle-email-auth-btn" class="btn-secondary">Connect with Email</button>
|
||||
<button id="view-my-profile-btn" class="btn-secondary" style="display: none">
|
||||
View My Profile
|
||||
|
|
|
|||
|
|
@ -58,6 +58,45 @@ export class AuthManager {
|
|||
}
|
||||
}
|
||||
|
||||
async signInWithGitHub() {
|
||||
try {
|
||||
auth.createOAuth2Session(
|
||||
'github',
|
||||
window.location.origin + '/index.html?oauth=1',
|
||||
window.location.origin + '/login.html'
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
alert(`Login failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async signInWithSpotify() {
|
||||
try {
|
||||
auth.createOAuth2Session(
|
||||
'spotify',
|
||||
window.location.origin + '/index.html?oauth=1',
|
||||
window.location.origin + '/login.html'
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
alert(`Login failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async signInWithDiscord() {
|
||||
try {
|
||||
auth.createOAuth2Session(
|
||||
'discord',
|
||||
window.location.origin + '/index.html?oauth=1',
|
||||
window.location.origin + '/login.html'
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
alert(`Login failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async signInWithEmail(email, password) {
|
||||
try {
|
||||
await auth.createEmailPasswordSession(email, password);
|
||||
|
|
@ -122,6 +161,8 @@ export class AuthManager {
|
|||
const statusText = document.getElementById('auth-status');
|
||||
const emailContainer = document.getElementById('email-auth-container');
|
||||
const emailToggleBtn = document.getElementById('toggle-email-auth-btn');
|
||||
const githubBtn = document.getElementById('auth-github-btn');
|
||||
const discordBtn = document.getElementById('auth-discord-btn');
|
||||
|
||||
if (!connectBtn) return;
|
||||
|
||||
|
|
@ -132,6 +173,8 @@ export class AuthManager {
|
|||
if (clearDataBtn) clearDataBtn.style.display = 'none';
|
||||
if (emailContainer) emailContainer.style.display = 'none';
|
||||
if (emailToggleBtn) emailToggleBtn.style.display = 'none';
|
||||
if (githubBtn) githubBtn.style.display = 'none';
|
||||
if (discordBtn) discordBtn.style.display = 'none';
|
||||
if (statusText) statusText.textContent = user ? `Signed in as ${user.email}` : 'Signed in';
|
||||
|
||||
const accountPage = document.getElementById('page-account');
|
||||
|
|
@ -165,6 +208,8 @@ export class AuthManager {
|
|||
if (clearDataBtn) clearDataBtn.style.display = 'block';
|
||||
if (emailContainer) emailContainer.style.display = 'none';
|
||||
if (emailToggleBtn) emailToggleBtn.style.display = 'none';
|
||||
if (githubBtn) githubBtn.style.display = 'none';
|
||||
if (discordBtn) discordBtn.style.display = 'none';
|
||||
if (statusText) statusText.textContent = `Signed in as ${user.email}`;
|
||||
} else {
|
||||
connectBtn.textContent = 'Connect with Google';
|
||||
|
|
@ -173,6 +218,8 @@ export class AuthManager {
|
|||
|
||||
if (clearDataBtn) clearDataBtn.style.display = 'none';
|
||||
if (emailToggleBtn) emailToggleBtn.style.display = 'inline-block';
|
||||
if (githubBtn) { githubBtn.style.display = 'inline-block'; githubBtn.onclick = () => this.signInWithGitHub(); }
|
||||
if (discordBtn) { discordBtn.style.display = 'inline-block'; discordBtn.onclick = () => this.signInWithDiscord(); }
|
||||
if (statusText) statusText.textContent = 'Sync your library across devices';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
27
js/app.js
27
js/app.js
|
|
@ -1,4 +1,8 @@
|
|||
//js/app.js
|
||||
import discordSvg from '../images/discord.svg?svg&size=22';
|
||||
import googleSvg from '../images/google.svg?svg&size=22';
|
||||
import githubSvg from '../images/github.svg?svg&size=22';
|
||||
import spotifySvg from '../images/spotify.svg?svg&size=22';
|
||||
import { isIos, isSafari } from './platform-detection.js';
|
||||
import { hapticLight } from './haptics.js';
|
||||
import { MusicAPI } from './music-api.js';
|
||||
|
|
@ -2891,11 +2895,32 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
headerAccountDropdown.innerHTML = '';
|
||||
|
||||
if (!user) {
|
||||
const iconBtnStyle = 'background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;transition:opacity 0.15s';
|
||||
headerAccountDropdown.innerHTML = `
|
||||
<button class="btn-secondary" id="header-google-auth">Connect with Google</button>
|
||||
<span style="font-size:0.75rem;color:var(--muted-foreground);padding:0.25rem 0.5rem">Connect with</span>
|
||||
<div style="display:flex;gap:0.5rem;padding:0.25rem 0.5rem;align-items:center">
|
||||
<button id="header-discord-auth" title="Discord" style="${iconBtnStyle}">${discordSvg}</button>
|
||||
<button id="header-google-auth" title="Google" style="${iconBtnStyle}">${googleSvg}</button>
|
||||
<button id="header-github-auth" title="GitHub" style="${iconBtnStyle}">${githubSvg}</button>
|
||||
<button id="header-spotify-auth" title="Spotify" style="${iconBtnStyle}">${spotifySvg}</button>
|
||||
</div>
|
||||
<hr style="border:none;border-top:1px solid var(--border);margin:0.25rem 0">
|
||||
<button class="btn-secondary" id="header-email-auth">Connect with Email</button>
|
||||
`;
|
||||
|
||||
for (const id of ['header-discord-auth', 'header-google-auth', 'header-github-auth', 'header-spotify-auth']) {
|
||||
const btn = document.getElementById(id);
|
||||
const svg = btn.querySelector('svg');
|
||||
svg.style.filter = 'brightness(0) invert(1)';
|
||||
svg.style.transition = 'filter 0.15s';
|
||||
btn.addEventListener('mouseenter', () => { svg.style.filter = 'brightness(0) invert(0.5)'; });
|
||||
btn.addEventListener('mouseleave', () => { svg.style.filter = 'brightness(0) invert(1)'; });
|
||||
}
|
||||
|
||||
document.getElementById('header-google-auth').onclick = () => authManager.signInWithGoogle();
|
||||
document.getElementById('header-github-auth').onclick = () => authManager.signInWithGitHub();
|
||||
document.getElementById('header-discord-auth').onclick = () => authManager.signInWithDiscord();
|
||||
document.getElementById('header-spotify-auth').onclick = () => authManager.signInWithSpotify();
|
||||
document.getElementById('header-email-auth').onclick = () => {
|
||||
document.getElementById('email-auth-modal').classList.add('active');
|
||||
headerAccountDropdown.classList.remove('active');
|
||||
|
|
|
|||
17
package-lock.json
generated
17
package-lock.json
generated
|
|
@ -104,6 +104,7 @@
|
|||
"version": "7.29.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.29.0",
|
||||
"@babel/generator": "^7.29.0",
|
||||
|
|
@ -2024,6 +2025,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.2.0.tgz",
|
||||
"integrity": "sha512-oKaoNeNtH2iIZMDFVrb1atoyRECDGHcfLMunJ5KWN8DtvpVBeeA4c41e20NTuhMxw1cSYbpq2PV2hb+/9CJxlQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
|
|
@ -2154,6 +2156,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
|
|
@ -2198,6 +2201,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
|
|
@ -4668,6 +4672,7 @@
|
|||
"version": "25.5.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~7.18.0"
|
||||
}
|
||||
|
|
@ -4744,6 +4749,7 @@
|
|||
"version": "8.16.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -4799,6 +4805,7 @@
|
|||
"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
|
|
@ -5257,6 +5264,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.9.0",
|
||||
"caniuse-lite": "^1.0.30001759",
|
||||
|
|
@ -7200,6 +7208,7 @@
|
|||
"version": "9.39.4",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
|
|
@ -9706,6 +9715,7 @@
|
|||
"integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@keyv/serialize": "^1.1.1"
|
||||
}
|
||||
|
|
@ -12131,6 +12141,7 @@
|
|||
"version": "4.0.3",
|
||||
"inBundle": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
|
@ -12563,6 +12574,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
|
|
@ -12636,6 +12648,7 @@
|
|||
"version": "7.1.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
|
@ -13597,6 +13610,7 @@
|
|||
"integrity": "sha512-cIFJOD1DESzpjOBl763Kp1AH7UE/0fcdHe6rZXUdQ9c50uvgigvW97u3IcSeBwOkgqL/PXPBktBCh0KEu5L8XQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
|
|
@ -14413,6 +14427,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@csstools/css-parser-algorithms": "^3.0.5",
|
||||
"@csstools/css-syntax-patches-for-csstree": "^1.0.19",
|
||||
|
|
@ -14806,6 +14821,7 @@
|
|||
"version": "5.46.1",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
"acorn": "^8.15.0",
|
||||
|
|
@ -15113,6 +15129,7 @@
|
|||
"version": "5.9.3",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
|
|
|
|||
Loading…
Reference in a new issue