Updates to site intro and help icon

3 files changed, 65 insertions, 2 deletions

diff --git a/css/main.css b/css/main.css
index 587fcbb..ae9b7cd 100644
--- a/css/main.css
+++ b/css/main.css
@@ -57,6 +57,10 @@ label {
     color: rgb(240,240,240);
 }
 
+#insecureWarning {
+    display: none;
+}
+
 /*==========================
         MODALS
 ==========================*/
diff --git a/index.html b/index.html
index 5926645..9339aae 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,10 @@
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="css/main.css" />
 
+    <!-- Font Awesome CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
+        integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
+
     <!--<link rel="icon" type="image/png" href="images/favicon.png">-->
 
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
@@ -24,6 +28,11 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
         crossorigin="anonymous"></script>
+
+    <!-- Font Awesome JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"
+        integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script>
+
     <!-- Custom Scripts -->
     <script type="text/javascript" src="js/main.js"></script>
 </head>
@@ -35,6 +44,7 @@
             <a class="navbar-brand" href="javascript:window.location.reload()">
                 <h2>PASTA<small class="ml-2">Plex Audio and Subtitle Track Automation</small></h2>
             </a>
+            <i class="far fa-question-circle" style="color: #e5a00d; font-size: 1.5em"></i>
         </div>
     </nav>
 
@@ -88,16 +98,24 @@
                         <!-- PLEX LOGIN FORM -->
                         <div class="row mt-3">
                             <div class="col">
+                                <div id="insecureWarning" class="alert alert-warning alert-dismissible fade show mt-3" role="alert">
+                                    <strong>Warning:</strong> You have loaded this page over <strong>http</strong>, which means that this may not be very secure, especially if you are using public or untrusted networks.
+                                    <br>If you can only access your Plex server via http, then please continue with caution.
+                                    <br>However, if you can access your Plex server via <strong>https</strong>, then I recommend reloading this site over https by <a href="https://www.pastatool.com">clicking here</a>.
+                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
                                 <div class="form-group">
                                     <label for="plexUrl">Plex URL</label>
                                     <input type="email" class="form-control" id="plexUrl"
-                                        placeholder="e.g. http://192.168.0.1:32400">
+                                        placeholder="e.g. http://192.168.0.1:32400" autocomplete="on">
                                     <small class="form-text text-muted">This must be a local server, or a server
                                         publicly addressable.</small>
                                 </div>
                                 <div class="form-group">
                                     <label for="plexToken">Plex Token</label>
-                                    <input type="text" class="form-control" id="plexToken" placeholder="X-Plex-Token">
+                                    <input type="text" class="form-control" id="plexToken" placeholder="X-Plex-Token" autocomplete="on">
                                     <small class="form-text text-muted">
                                         <a target="_blank"
                                             href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/">Find
diff --git a/js/main.js b/js/main.js
index 4a143f2..f8526c7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -7,6 +7,11 @@ var seasonId = ""; // Store the Id of the most recently clicked season
 var episodeId = ""; // Stores the Id of the most recently clicked episode
 
 $(document).ready(() => {
+    // Check if the page was loaded locally or over http and warn them about the value of https
+    if ((location.protocol == "http:") || (location.protocol == "file:")) {
+        $("#insecureWarning").show();
+    }
+
     // Validation values to enable the Connect to Plex Button
     let validUrl = false;
     let validToken = false;
@@ -48,6 +53,42 @@ $(document).ready(() => {
             $("#btnConnectToPlex").prop("disabled", true);
         }
     });
+
+    // Show the Welcome Modal
+    $('#progressModal #progressModalTitle').empty();
+    $('#progressModal #progressModalTitle').text(`Welcome to PASTA`);
+    $('#progressModal #modalBodyText').empty();
+    $('#progressModal #modalBodyText').append(`
+        <h3>What is PASTA?</h3>
+        <p>Do you watch TV Shows with multiple languages and subtitles and wish you could change them for the entire show, rather than needing to do it for <em>every. single. episode</em>? 
+        Or maybe you aren't sure what the difference is between those 2 <strong>Enlish (SRT)</strong> and <strong>English (SRT)</strong> subtitle files. Then PASTA is for you!
+        <br>PASTA allows you to connect to your Plex server and view more details about the audio tracks and subtitles, as well as set the tracks and subtitles
+        for entire shows, or single episodes very quickly.</p>
+        <h3>How do I use PASTA?</h3>
+        <p>I built PASTA to be as step-by-step as possible and to take you through it, so you should be able to just close this pop-up and follow along.
+        <br>There are some things I would like to point out, however:</p>
+        <ul>
+            <li>This currently does <strong>not</strong> support logging in via username / password (I will look into that at a later date). Currently you must use
+            the IP address, or if your Plex server is addressable by a valid name address, then use that.</li>
+            <li>You must use the Plex Token for authentication. It's the only way I have this working so far. I've included a link with instructions
+            on how to get a Plex Token below the required field.</li>
+            <li>This works <strong>MUCH</strong> faster if you are on the same network as the Plex Server.</li>
+            <li>You can also run this locally yourself. Just download the source code from github (see the next section).</li>
+        </ul>
+        <h3>About PASTA</h3>
+        <p>PASTA is short for <em>Plex Audio and Subtitle Track Automation</em>. When I first began developing this for myself, I was calling it
+        <em>Plex Audio Track Automation</em>, so adding subtitles to it gave birth to PASTA.<p>
+        <p>PASTA was born out of a desire, one that I had seen others have as well, but that I had only seen one other solution for. However, it was in
+        command line and I wanted something a bit more appealing to look at, and something I could use from anywhere.
+        Initially I was only building this for myself but I thought that others might find use for it as well, so here we are!</p>
+        <p>PASTA runs entirely client-side. This means that you are not passing anything to someones server to do this (other than the Plex Server), and it also means I don't
+        have to worry about standing up a server to do that side of things either :). PASTA runs off of Github Pages, and I've got a link to my
+        repository below. Feel free to have a look, download it yourself and use it locally, or make suggestions. I'm by no means finished with
+        PASTA - I still have plenty of ideas for how I can add more to it, as well as fix any bugs that crop up. Feel free to log any issues / feature 
+        requests on the Github as well.</p>
+        <p><a href="https://github.com/cglatot/pasta" target="_blank">https://github.com/cglatot/pasta</a></p>
+        `);
+    $('#progressModal').modal();
 });
 
 function connectToPlex() {