mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-18 19:50:58 -04:00
Add files via upload
This commit is contained in:
nuttylmao
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title>Configure</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mainContainer">
|
||||
<div id="connectBox">
|
||||
<div style="text-align: center;">
|
||||
<img src="logo.webp" width="60%">
|
||||
</div>
|
||||
<label>
|
||||
<br>
|
||||
<span style="font-weight: 500;">Client ID</span>
|
||||
<br>
|
||||
<input type="text" id="client_id_box">
|
||||
<br><br>
|
||||
<span style="font-weight: 500;">Client Secret</span>
|
||||
<br>
|
||||
<input type="password" id="client_secret_box">
|
||||
|
||||
<br><br>
|
||||
|
||||
<button id="authorizeButton" onclick="RequestAuthorization()">Authorize</button>
|
||||
<br><br>
|
||||
<button id="instructionsButton" onclick="OpenInstructions()">Instructions</button>
|
||||
</label>
|
||||
</div>
|
||||
<div id="authorizationBox">
|
||||
<label id="authorizationComplete">
|
||||
<img src="logo.webp" width="60%">
|
||||
<br>
|
||||
<br>
|
||||
<span style="font-weight: 500; font-size: 30px;">Authorization complete</span>
|
||||
<br><br>
|
||||
You now owe me money for all of my hard work.
|
||||
</label>
|
||||
<button id="copyURLButton" onclick="CopyToURL()">Click to copy URL</button>
|
||||
<br><br>
|
||||
<button id="donateButton" onclick="OpenDonationPage()">Donate out of guilt</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,131 @@
|
||||
///////////////
|
||||
// PARAMETRS //
|
||||
///////////////
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
|
||||
const code = urlParams.get("code") || "";
|
||||
|
||||
const baseURL = "https://nuttylmao.github.io/spotify-widget";
|
||||
const redirect_uri = `${baseURL}/configure`;
|
||||
let refresh_token = "";
|
||||
let access_token = "";
|
||||
let browserSourceURL = "";
|
||||
|
||||
|
||||
|
||||
/////////////////////////
|
||||
// AUTHORIZATION STUFF //
|
||||
/////////////////////////
|
||||
|
||||
function RequestAuthorization() {
|
||||
const client_id = document.getElementById("client_id_box").value;
|
||||
const client_secret = document.getElementById("client_secret_box").value;
|
||||
localStorage.setItem("client_id", client_id);
|
||||
localStorage.setItem("client_secret", client_secret);
|
||||
|
||||
let url = "https://accounts.spotify.com/authorize";
|
||||
url += "?client_id=" + client_id;
|
||||
url += "&response_type=code";
|
||||
url += "&redirect_uri=" + encodeURI(redirect_uri);
|
||||
url += "&show_dialog=true";
|
||||
url += "&scope=user-read-private user-read-email user-modify-playback-state user-read-playback-position user-library-read streaming user-read-playback-state user-read-recently-played playlist-read-private";
|
||||
window.location.href = url;
|
||||
}
|
||||
|
||||
// If there is no code in the query string, direct the user to authorize their account
|
||||
if (code != "") {
|
||||
FetchAccessToken(code);
|
||||
}
|
||||
else {
|
||||
document.getElementById("connectBox").style.display = 'inline';
|
||||
}
|
||||
|
||||
async function FetchAccessToken(code) {
|
||||
const client_id = localStorage.getItem("client_id");
|
||||
const client_secret = localStorage.getItem("client_secret");
|
||||
console.debug(`Client ID: ${client_id}`);
|
||||
console.debug(`Client Secret: ${client_secret}`);
|
||||
|
||||
let body = "grant_type=authorization_code";
|
||||
body += "&code=" + code;
|
||||
body += "&redirect_uri=" + encodeURI(redirect_uri);
|
||||
body += "&client_id=" + client_id;
|
||||
body += "&client_secret=" + client_secret;
|
||||
console.log(body);
|
||||
|
||||
// Get the current player information from Spotify
|
||||
const response = await fetch("https://accounts.spotify.com/api/token", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Authorization': `Basic ${btoa(client_id + ":" + client_secret)}`,
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: body
|
||||
});
|
||||
|
||||
// If we got a response, save the access token
|
||||
if (response.ok)
|
||||
{
|
||||
const responseData = await response.json();
|
||||
console.debug(responseData);
|
||||
refresh_token = responseData.refresh_token; // Unsure if we need to replace the refresh_token but do it just in case
|
||||
access_token = responseData.access_token; // Save access token for all future API calls
|
||||
|
||||
browserSourceURL = `${baseURL}?client_id=${client_id}&client_secret=${client_secret}&refresh_token=${refresh_token}`;
|
||||
document.getElementById("authorizationBox").style.display = 'inline';
|
||||
}
|
||||
else
|
||||
{
|
||||
console.error(`${response.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
///////////////////////////
|
||||
// BUTTON CLICK HANDLERS //
|
||||
///////////////////////////
|
||||
|
||||
const clientIdBox = document.getElementById('client_id_box');
|
||||
const clientSecretBox = document.getElementById('client_secret_box');
|
||||
const authorizeButton = document.getElementById('authorizeButton');
|
||||
|
||||
// Function to check if either input is empty
|
||||
function checkInputs() {
|
||||
if (clientIdBox.value.trim() === '' || clientSecretBox.value.trim() === '') {
|
||||
authorizeButton.disabled = true; // Disable the button
|
||||
} else {
|
||||
authorizeButton.disabled = false; // Enable the button
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for changes in the input boxes
|
||||
clientIdBox.addEventListener('input', checkInputs);
|
||||
clientSecretBox.addEventListener('input', checkInputs);
|
||||
|
||||
// Initial check when the page loads, just in case
|
||||
checkInputs();
|
||||
|
||||
function CopyToURL() {
|
||||
navigator.clipboard.writeText(browserSourceURL);
|
||||
|
||||
document.getElementById("copyURLButton").innerText = "Copied to clipboard";
|
||||
document.getElementById("copyURLButton").style.backgroundColor = "#00dd63"
|
||||
document.getElementById("copyURLButton").style.color = "#ffffff";
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById("copyURLButton").innerText = "Click to copy URL";
|
||||
document.getElementById("copyURLButton").style.backgroundColor = "#ffffff";
|
||||
document.getElementById("copyURLButton").style.color = "#181818";
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function OpenInstructions() {
|
||||
window.open("https://nuttylmao.notion.site/Spotify-Widget-18e19969b237807ca88cfc9c4159da15", '_blank').focus();
|
||||
}
|
||||
|
||||
function OpenDonationPage() {
|
||||
window.open("http://nutty.gg/pages/donate", '_blank').focus();
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
* {
|
||||
--corner-radius: 10px;
|
||||
--padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#mainContainer {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0px;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
#connectBox{
|
||||
background-color: #181818;
|
||||
border-radius: var(--corner-radius);
|
||||
padding: calc(var(--padding)*3) calc(var(--padding)*3);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
display: flex;
|
||||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
|
||||
width: 400px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#authorizationBox {
|
||||
background-color: #252525;
|
||||
border-radius: var(--corner-radius);
|
||||
padding: calc(var(--padding)*3) calc(var(--padding)*3);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
|
||||
width: 400px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#authorizationComplete {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
background-color: #3be477;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
border-width: 0;
|
||||
border-radius: var(--corner-radius);
|
||||
padding: calc(var(--padding)/2) var(--padding);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
#instructionsButton, #donateButton {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
#copyURLButton {
|
||||
background-color: #ffffff;
|
||||
color: #181818;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#copyURLButton:disabled {
|
||||
background-color: #636363;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: var(--corner-radius);
|
||||
width: calc(100% - 20px);
|
||||
font-size: 20px;
|
||||
margin: 10px 0px;
|
||||
padding: 10px 10px;
|
||||
background-color: #ffffff05;
|
||||
border-width: 0px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
textarea:focus, input:focus {
|
||||
outline: none;
|
||||
}
|
||||
Reference in New Issue
Block a user