more work

citelao · citelao · Jan 6, 2016 · Jan 29, 2015 · Jan 30, 2015 · Feb 20, 2015
commit 5ed62b410dd9a0ba668945ead59b543a559382a3
diff --git a/include/setup/client_callback.php b/include/setup/client_callback.php
@@ -1,13 +1,27 @@
-<html>
- <head>
- <title>Spotifious Setup</title>
-
- <link rel="stylesheet" href="style/normalize.css" />
- <link rel="stylesheet" href="style/style.css">
- </head>
- <body>
- <div id="wrapper" class="wrapper">
- <h1>Thanks!</h1>
- </div>
- </body>
-</html>
+<?php
+// thanks to http:https://www.alfredforum.com/topic/1788-prevent-flash-of-no-result
+mb_internal_encoding("UTF-8");
+date_default_timezone_set('America/New_York');
+
+use OhAlfred\OhAlfred;
+require '../../vendor/autoload.php';
+
+$response = Array();
+
+if(!$_POST["id"] || !$_POST["secret"]) {
+ $response["status"] = "error";
+ $response["message"] = "You're missing some data!";
+ echo json_encode($response);
+ exit();
+}
+
+$alfred = new OhAlfred();
+
+// Save data
+
+// Test connection
+
+$response["status"] = "error";
+$response["message"] = "Have't implemented saving yet!";
+echo json_encode($response);
+exit();
diff --git a/include/setup/index.php b/include/setup/index.php
@@ -1,119 +1,159 @@
 <html>
- <head>
-  <title>Spotifious Setup</title>
+<head>
+ <title>Spotifious Setup</title>
 
-  <link rel="stylesheet" href="style/normalize.css" />
-  <link rel="stylesheet" href="style/style.css">
- </head>
+ <link rel="stylesheet" href="style/normalize.css" />
+ <link rel="stylesheet" href="style/style.css">
+</head>
 
- <body>
-  <div id="wrapper" class="wrapper">
-  <section>
-  <h1>Spotifious Setup</h1>
-  <p>
-  Hi! In order to fully use Spotifious (search playlists, star tracks, etc.),
-  you need to generate a Spotify API key by creating a Spotify app.
-  </p>
-  <p>
-  <strong>NOTE</strong>: this server will automatically close in 5 minutes.
-  If you get errors like "page not found," just reopen Spotifious.
-  </p>
-  </section>
+<body>
+ <div id="wrapper" class="wrapper">
+ <section>
+ <h1>Spotifious Setup</h1>
+ <p>
+ Hi! In order to fully use Spotifious (search playlists, star tracks, etc.),
+ you need to generate a Spotify API key by creating a Spotify app.
+ </p>
+ <p>
+ <strong>NOTE</strong>: this server will automatically close in 5 minutes.
+ If you get errors like "page not found," just reopen Spotifious.
+ </p>
+ </section>
 
- <section>
- <h2>Instructions</h2>
- <p>
- Setting up the app is not very hard, but it has a couple specific steps.
- Just follow these instructions, and you'll be fine!
- </p>
- <p>
- If you're worried about privacy, <a href="#privacy">here&rsquo;s</a> what I have to say.
- </p>
-
- <ol>
- <li>Open up the <a href="https://developer.spotify.com/my-applications/#!/" target="blank">Spotify application manager page</a>.</li>
- <li>Login, if prompted.</li>
- <li>
- Click "Create an app."
- <figure>
- <img src="img/create_an_app_button.png" 
- alt="A screenshot of the Spotify Developer website, focusesed on the 'Create an app button'"
- />
- <figcaption>The 'Create an app' button</figcaption>
- </figure>
- </li>
- <li>
- Enter an application name and description. They can be anything you want.
- <figure>
- <img src="img/create_an_app_name.png" 
- alt="A screenshot of the Spotify Developer application creation page, with example data entered in the 'Application Name' and 'Application Description' fields."
- />
- <figcaption>This data will do nicely.</figcaption>
- </figure>
- </li>
- <li>Click "Create"!</li>
- <li>Copy and paste your <strong>Client ID</strong> and <strong>Client Secret</strong> below:
- <form action="client_callback.php">
- <table>
- <tr>
- <td align="right"><label for="ClientID">Client ID:</label></td>
- <td><input type="text" name="ClientID" placeholder="8bba5265e1e6199op53216e03bt6aeff" required /></td>
- </tr>
- <tr>
- <td align="right"><label for="ClientSecret">Client Secret:</label></td>
- <td><input type="text" name="ClientSecret" placeholder="3b3z7eg0evol510ebb32f94667135e40" required /></td>
- </tr>
- </table>
-
- <input type="submit" value="Save" />
- <a href="#privacy" class="cancel">privacy notice</a>
- </form>
- <div class="clear"></div>
- <figure>
- <img src="img/client_info.png" 
- alt="A screenshot of the Spotify Developer application data page showing the locations of the client ID and secret."
- />
- <figcaption>This will not be a blur on your screen.</figcaption>
- </figure>
- </li>
- <li>Click the "Add URI" button to add a new Redirect URI.</li>
- <li>
- Type <code>http:https://localhost:11114/callback.php</code> and click "Add"
- <figure>
- <img src="img/redirect.png" 
- alt="A screenshot of the Spotify Developer application data page, with our redirect page ready to be submitted."
- />
- <figcaption>Just type it in!</figcaption>
- </figure>
- </li>
- <li>
- Save those changes!
- <figure>
- <img src="img/save.png" 
- alt="A screenshot of the Spotify Developer application data page showing the save button."
- />
- <figcaption>The green one, please.</figcaption>
- </figure>
- </li>
- <li>Go back to Spotifious and finish your setup!</li>
- </ol>
- </section>
+ <section>
+ <h2>Instructions</h2>
+ <p>
+ Setting up the app is not very hard, but it has a couple specific steps.
+ Just follow these instructions, and you'll be fine!
+ </p>
+ <p>
+ If you're worried about privacy, <a href="#privacy">here&rsquo;s</a> what I have to say.
+ </p>
 
- <section>
- <h2 id="privacy">Privacy</h2>
- <p>
- Spotifious merely reads and writes your keys from and to
- your hard drive. They are never used in a way that could compromise their 
- integrity other than in the Spotify query, as required by the API. 
- Spotifious itself <strong>never</strong> sends the data anywhere else, for
- any reason, at any time.
- </p>
- <p>
- You do <strong>not</strong> need to set up a Spotify app to use Spotifious,
- but you lose a lot of functionality. If you would prefer not to use this
- part of Spotify, <a href="client_callback.php?opt_out=true" title="TODO">click here</a>.
- </p>
- </section>
- </div>
- </body>
+ <ol>
+ <li>Open up the <a href="https://developer.spotify.com/my-applications/#!/" target="blank">Spotify application manager page</a>.</li>
+ <li>Login, if prompted.</li>
+ <li>
+ Click "Create an app."
+ <figure>
+ <img src="img/create_an_app_button.png" 
+ alt="A screenshot of the Spotify Developer website, focusesed on the 'Create an app button'"
+ />
+ <figcaption>The 'Create an app' button</figcaption>
+ </figure>
+ </li>
+ <li>
+ Enter an application name and description. They can be anything you want.
+ <figure>
+ <img src="img/create_an_app_name.png" 
+ alt="A screenshot of the Spotify Developer application creation page, with example data entered in the 'Application Name' and 'Application Description' fields."
+ />
+ <figcaption>This data will do nicely.</figcaption>
+ </figure>
+ </li>
+ <li>Click "Create"!</li>
+ <li>Copy and paste your <strong>Client ID</strong> and <strong>Client Secret</strong> below:
+ <form id="ajax" action="client_callback.php">
+ <table>
+ <tr>
+ <td colspan="2" id="response" class="response">Response here</td>
+ </tr>
+ <tr>
+ <td align="right"><label for="ClientID">Client ID:</label></td>
+ <td><input type="text" name="ClientID" id="ClientID" placeholder="8bba5265e1e6199op53216e03bt6aeff" required /></td>
+ </tr>
+ <tr>
+ <td align="right"><label for="ClientSecret">Client Secret:</label></td>
+ <td><input type="text" name="ClientSecret" id="ClientSecret" placeholder="3b3z7eg0evol510ebb32f94667135e40" required /></td>
+ </tr>
+ </table>
+
+ <input type="submit" value="Save" />
+ <a href="#privacy" class="cancel">privacy notice</a>
+ </form>
+ <div class="clear"></div>
+ <figure>
+ <img src="img/client_info.png" 
+ alt="A screenshot of the Spotify Developer application data page showing the locations of the client ID and secret."
+ />
+ <figcaption>This will not be a blur on your screen.</figcaption>
+ </figure>
+ </li>
+ <li>Click the "Add URI" button to add a new Redirect URI.</li>
+ <li>
+ Type <code>http:https://localhost:11114/callback.php</code> and click "Add"
+ <figure>
+ <img src="img/redirect.png" 
+ alt="A screenshot of the Spotify Developer application data page, with our redirect page ready to be submitted."
+ />
+ <figcaption>Just type it in!</figcaption>
+ </figure>
+ </li>
+ <li>
+ Save those changes!
+ <figure>
+ <img src="img/save.png" 
+ alt="A screenshot of the Spotify Developer application data page showing the save button."
+ />
+ <figcaption>The green one, please.</figcaption>
+ </figure>
+ </li>
+ <li>Go back to Spotifious and finish your setup!</li>
+ </ol>
+ </section>
+
+ <section>
+ <h2 id="privacy">Privacy</h2>
+ <p>
+ Spotifious merely reads and writes your keys from and to
+ your hard drive. They are never used in a way that could compromise their 
+ integrity other than in the Spotify query, as required by the API. 
+ Spotifious itself <strong>never</strong> sends the data anywhere else, for
+ any reason, at any time.
+ </p>
+ <p>
+ You do <strong>not</strong> need to set up a Spotify app to use Spotifious,
+ but you lose a lot of functionality. If you would prefer not to use this
+ part of Spotify, <a href="client_callback.php?opt_out=true" title="TODO">click here</a>.
+ </p>
+ </section>
+ </div>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script>
+ var request;
+
+ // http:https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php
+ $("#ajax").submit(function(event) {
+ $("input").prop('disabled', true);
+
+ request = $.ajax({
+ type: "POST",
+ url: "client_callback.php",
+ data: {
+ "id": $("#ClientID").val(),
+ "secret": $("#ClientSecret").val()
+ },
+ dataType: "json"
+ });
+
+ request.done(function(response) {
+ console.log(response);
+ if (response.status === "error") {
+ $("#response").show().addClass("error");
+ $("#response").text("ERROR: " + response.message);
+ } else {
+ $("#response").show().addClass("success");
+ $("#response").text(response.message);
+ }
+ });
+
+ request.always(function() {
+ $("input").prop('disabled', false);
+ });
+
+ event.preventDefault();
+ });
+ </script>
+</body>
 </html>
diff --git a/include/setup/style/style.css b/include/setup/style/style.css
@@ -101,6 +101,10 @@ input {
  border-radius: 1em;
  }
 
+ input[disabled] {
+ color: #999;
+ }
+
 .cancel {
  float: right;
  display: inline-block;
@@ -110,6 +114,20 @@ input {
  font-size: 0.75em;
 }
 
+.response {
+ text-align: center;
+ padding: 1em 0;
+ display: none;
+}
+
+ .error {
+ background: #E52C48;
+ }
+
+ .success {
+ background: #6CD19B;
+ }
+
 @-webkit-keyframes bounce {
  0% { -webkit-transform: scale(1); transform: scale(1);}
  60% { -webkit-transform: scale(1.4); transform: scale(1.4); }

diff --git a/src/citelao/Spotifious/Spotifious.php b/src/citelao/Spotifious/Spotifious.php
@@ -168,7 +168,7 @@ public function process($action) {
 
  } else if($command == 'appsetup') {
  // Autokill server in 10 minutes
- $server = new Timeout(5 * 5, "php -S localhost:11114 & open 'http:https://localhost:11114/include/setup/index.php'");
+ $server = new Timeout(10 * 60, "php -S localhost:11114 & open 'http:https://localhost:11114/include/setup/index.php'");
  $server->run();