felixmielcarek
7 months ago
parent
9b71768423
commit
004672e71d
@ -0,0 +1,118 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="../../common.css">
|
||||||
|
<link rel="stylesheet" href="../style.css">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../../resources/fm-logo.png">
|
||||||
|
<title>Big Brother</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
function activation() {
|
||||||
|
if(activationState) {
|
||||||
|
var button = document.createElement('button');
|
||||||
|
button.textContent = 'Deactivate';
|
||||||
|
button.id = 'logButton';
|
||||||
|
button.className = 'activate-button';
|
||||||
|
document.getElementById('bb-content').appendChild(button);
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
var redirectButton = document.getElementById("logButton");
|
||||||
|
|
||||||
|
redirectButton.addEventListener("click", function() {
|
||||||
|
const params = {
|
||||||
|
code: urlParams.get('code'),
|
||||||
|
state: urlParams.get('state')
|
||||||
|
};
|
||||||
|
const options = {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify( params )
|
||||||
|
};
|
||||||
|
fetch('https://codefirst.iut.uca.fr/containers/felixmielcarek-bigbrotherwebapp/settings/deactivate', options )
|
||||||
|
|
||||||
|
const queryUrl = new URL("https://felixmielcarek.github.io/big-brother/");
|
||||||
|
window.location.href = queryUrl.href;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="top-content">
|
||||||
|
<div class="top-text">
|
||||||
|
<div class="top-title">Big Brother</div>
|
||||||
|
<div class="top-description">Never forget again a good album with your Big Brother !</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="../">
|
||||||
|
<img class="top-logo" src="../../resources/fm-logo.png"/>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="bb-content" class="bb-content">
|
||||||
|
<div>
|
||||||
|
<div>If you have liked at least 60% of the track of an album:</div>
|
||||||
|
<div>
|
||||||
|
<ol>
|
||||||
|
<li>add the album to your library</li>
|
||||||
|
<li>removes the tracks from your Liked Songs playlist</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="activated-status">
|
||||||
|
<script>
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
let activationState = false;
|
||||||
|
|
||||||
|
if(urlParams.has('error')) {
|
||||||
|
console.log('Error: ' + urlParams.get('error'));
|
||||||
|
document.write('Activation error');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const localState = localStorage.getItem("bigbrother-state") ?? "";
|
||||||
|
if(localState.localeCompare(urlParams.get('state')) !=0 ) {
|
||||||
|
console.log('Spotify state error');
|
||||||
|
document.write('Activation error');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
let activationState = true;
|
||||||
|
document.write('Activated');
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
code: urlParams.get('code'),
|
||||||
|
state: urlParams.get('state')
|
||||||
|
};
|
||||||
|
const options = {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify( params )
|
||||||
|
};
|
||||||
|
fetch('https://codefirst.iut.uca.fr/containers/felixmielcarek-bigbrotherserver/', options )
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok ' + response.statusText);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
console.log(data);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('There was a problem with the fetch operation:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
activation();
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="me">Me.</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/x-icon" href="./resources/fm-logo.png">
|
||||||
|
<title>Big Brother</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="top-content">
|
||||||
|
<div class="top-text">
|
||||||
|
<div class="top-title">Big Brother</div>
|
||||||
|
<div class="top-description">Never forget again a good album with your Big Brother !</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img class="top-logo" src="./resources/fm-logo.png"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bb-content">
|
||||||
|
<div>
|
||||||
|
<div>If you have liked at least 60% of the track of an album:</div>
|
||||||
|
<div>
|
||||||
|
<ol>
|
||||||
|
<li>add the album to your library</li>
|
||||||
|
<li>removes the tracks from your Liked Songs playlist</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button id="logButton" class="activate-button">Activate</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function generateRandomString(length) {
|
||||||
|
const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||||
|
let randomString = '';
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
const randomIndex = Math.floor(Math.random() * charset.length);
|
||||||
|
randomString += charset[randomIndex];
|
||||||
|
}
|
||||||
|
return randomString;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
var redirectButton = document.getElementById("logButton");
|
||||||
|
|
||||||
|
redirectButton.addEventListener("click", function() {
|
||||||
|
const state = generateRandomString(16);
|
||||||
|
const queryUrl = new URL("https://accounts.spotify.com/authorize");
|
||||||
|
queryUrl.searchParams.append("response_type", "code");
|
||||||
|
queryUrl.searchParams.append("state", state);
|
||||||
|
queryUrl.searchParams.append("client_id", "5ec7f30903414033a3381995754da3e8");
|
||||||
|
queryUrl.searchParams.append("scope", "user-read-private user-read-email user-library-read user-library-modify");
|
||||||
|
queryUrl.searchParams.append("redirect_uri", "big-brother-two.vercel.app:3000/callback");
|
||||||
|
|
||||||
|
localStorage.setItem("bigbrother-state", state);
|
||||||
|
|
||||||
|
window.location.href = queryUrl.href;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="me">Me.</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,101 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
min-height: 100vh;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
height: 80px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #0d0d0d;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.me {
|
||||||
|
margin: auto;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
width: 80%;
|
||||||
|
margin-inline: auto;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-title {
|
||||||
|
font-size: 40px;
|
||||||
|
margin-block: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-description {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #BDBDBD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-logo {
|
||||||
|
max-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bb-content {
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activate-button {
|
||||||
|
color: inherit;
|
||||||
|
border: none;
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-inline: 20px;
|
||||||
|
padding-block: 10px;
|
||||||
|
background-color: #1db954;
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activate-button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activated-status {
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-inline: 20px;
|
||||||
|
padding-block: 10px;
|
||||||
|
background-color: #0d0d0d;
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue