authorization/public/index.html
<!doctype html>
<html>
<head>
<title>Authorize MMM-NowPlayingOnSpotify</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<div class="container">
<div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<img class="d-block mx-auto mb-4" src="img/Icon.png" alt="" width="72" height="72">
<h1 class="display-4">MMM-NowPlayingOnSpotify</h1>
<p class="lead">A MagicMirror<sup>2</sup> module which displays your on Spotify currently playing track.</p>
</div>
<p>In order to work properly the module needs read access to some of your Spotifiy information. Namely these information are: </p>
<ul>
<li>your currently playing track</li>
<li>your playback status</li>
</ul>
<p>To provide these data you need an app in the <a href="https://beta.developer.spotify.com/dashboard/login" target="_blank">development area of Spotify</a>. This app provides the above mentioned information to your magic mirror. This way it is made sure that you and only you have access to your Spotify data.</p>
<h2>Step by Step</h2>
<h4 class="mt-4">Step 1: Create a new Spotify app</h4>
<div id="step1-placeholder"></div>
<h4 class="mt-4">Step 2: Authorize your new app with your Spotify account</h4>
<div id="login">
<div id="form-placeholder"></div>
</div>
<div id="loggedin">
<div id="loggedin-placeholder"></div>
</div>
<h4 class="mt-4">Step 3: Configure your mirror</h4>
<div id="step3-placeholder">
<div class="alert alert-danger" role="alert">
<p>Wait for step 2 to complete.</p>
</div>
</div>
<div id="config-placeholder"></div>
</div>
<!-- Templates -->
<script id="step1-template" type="text/x-handlebars-template">
<p>Visit <a href="https://beta.developer.spotify.com/dashboard/login" target="_blank">Spotify for Developers</a> and create your new app via the button on the top right. It doesn’t matter what you type in the fields since only you will see the app. Maybe you should use something you’ll recognize in the future. When asked whether you are developing a commercial integration click “No.” and accept all the checkmarks in the last step.</p>
<p>After successfully creating the app you’ll land on the app’s dashboard. There you can see your <code>Client ID</code> and your <code>Client Secret</code> (after clicking on “SHOW CLIENT SECRET”). Please <strong>note both information</strong> for later use.</p>
<p>Click on “Edit Settings” and add <code>{{redirectUri}}</code> to the Redirect URIs and save your settings.</p>
</script>
<script id="user-profile-template" type="text/x-handlebars-template">
<div class="media ml-5">
<img class="rounded-circle mr-3" width="100" src="{{images.0.url}}" />
<div class="media-body">
<h5 class="mt-0">{{display_name}}</h5>
<p><strong>ID: </strong>{{id}}</p>
<p class="text-success"><strong>Your app is now authorized. You can start using it with your MagicMirror.</strong></p>
</div>
</div>
</script>
<script id="error-template" type="text/x-handlebars-template">
<div class="alert alert-danger" role="alert">
<h5 class="alert-heading">Error</h5>
<p>Something went wrong!</p>
<hr>
<p>Did you give permission to the app? If not you will not be able to use this module with your MagicMirror unless you authorize the app. If you gave permission try again later.</p>
<a href="/" class="btn btn-danger">Try again!</a>
</div>
</script>
<script id="step3-template" type="text/x-handlebars-template">
<div class="alert alert-danger" role="alert">
<p>Wait for step 2 to complete.</p>
</div>
</script>
<script id="config-template" type="text/x-handlebars-template">
{{#if success}}
<p>Now copy the following snippet into your <code>config.js</code> file and your good to go.</p>
<pre>
{
module: "MMM-NowPlayingOnSpotify",
position: "top_left",
config: {
clientID: "{{clientID}}",
clientSecret: "{{clientSecret}}",
accessToken: "{{accessToken}}",
refreshToken: "{{refreshToken}}"
}
},
</pre>
<h1 class="display-4">Have fun!</h1>
{{/if}}
</script>
<script id="form-template" type="text/x-handlebars-template">
<p>Now you’ll need to give access to your currently playing track to the new app using the following form:</p>
<form action="/login" method="post">
<div class="row">
<div class="col">
<label for="clientID">Client ID</label>
<input type="text" name="clientID" class="form-control {{clientIDClass}}" id="clientID" placeholder="Enter your Client ID" value="{{clientIDValue}}">
<div class="{{clientIDFeedbackClass}}">
{{clientIDFeedBackText}}
</div>
</div>
<div class="col">
<label for="clientSecretID">Client Secret</label>
<input type="text" name="clientSecret" class="form-control {{clientSecretClass}}" id="clientSecretID" placeholder="Enter your Client Secret" value="{{clientSecretValue}}">
<div class="{{clientSecretFeedbackClass}}">
{{clientSecretFeedBackText}}
</div>
</div>
</div>
<input type="hidden" name="redirectURI" id="redirectURIField" value="{{redirectURI}}">
<div class="row mt-2">
<div class="col">
<button type="submit" class="btn btn-primary float-right">Authorize my app!</button>
</div>
</div>
</form>
</script>
<!-- Scripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="assets/client_logic.js"></script>
</body>
</html>