add success/error banner to log parser page

3 files changed, 48 insertions, 12 deletions

diff --git a/src/SMAPI.Web/Views/LogParser/Index.cshtml b/src/SMAPI.Web/Views/LogParser/Index.cshtml
index 7213e286..c909b203 100644
--- a/src/SMAPI.Web/Views/LogParser/Index.cshtml
+++ b/src/SMAPI.Web/Views/LogParser/Index.cshtml
@@ -44,11 +44,36 @@
 ** Intro
 *********@
 <p id="blurb">This page lets you upload, view, and share a SMAPI log to help troubleshoot mod issues.</p>
-<input type="button" id="upload-button" value="Share a new log" />
 
 @if (Model.ParsedLog?.IsValid == true)
 {
-    <h2>Parsed log</h2>
+    <div class="banner success" v-pre>
+        <strong>The log was uploaded successfully!</strong><br/>
+        Share this URL when asking for help: <code>@(new Uri(new Uri(Model.SectionUrl), Model.PasteID))</code><br/>
+        (Or <a id="upload-button" href="#">upload a new log</a>.)
+    </div>
+}
+else if (Model.ParsedLog?.IsValid == false)
+{
+    <div class="banner error" v-pre>
+        <strong>Oops, couldn't parse that file. (Make sure you upload the log file, not the console text.)</strong><br />
+        Share this URL when asking for help: <code>@(new Uri(new Uri(Model.SectionUrl), Model.PasteID))</code><br />
+        (Or <a id="upload-button" href="#">upload a new log</a>.)<br />
+        <br />
+        <small v-pre>Error details: @Model.ParsedLog.Error</small>
+    </div>
+}
+else
+{
+    <input type="button" id="upload-button" value="Share a new log" />
+}
+
+@*********
+** Parsed log
+*********@
+@if (Model.ParsedLog?.IsValid == true)
+{
+    <h2>Log info</h2>
     <div id="output">
         <table id="metadata">
             <caption>Game info:</caption>
@@ -148,12 +173,6 @@
 }
 else if (Model.ParsedLog?.IsValid == false)
 {
-    <h2>Parsed log</h2>
-    <div id="error" class="color-red">
-        <p><strong>We couldn't parse that file, but you can still share the link.</strong></p>
-        <p v-pre>Error details: @Model.ParsedLog.Error</p>
-    </div>
-
     <h3>Raw log</h3>
     <pre v-pre>@Model.ParsedLog.RawText</pre>
 }
@@ -166,7 +185,6 @@ else if (Model.ParsedLog?.IsValid == false)
                 <li><a href="https://stardewvalleywiki.com/Modding:Player_FAQs#SMAPI_log" target="_blank">Find your SMAPI log file</a> (not the console text).</li>
                 <li>Drag the file onto the textbox below (or paste the text in).</li>
                 <li>Click <em>Parse</em>.</li>
-                <li>Share the URL of the new page.</li>
             </ol>
             <textarea id="input" placeholder="Paste or drag the log here"></textarea>
             <div class="buttons">
diff --git a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
index cbf09ffe..9d604072 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
@@ -20,18 +20,34 @@ caption {
     font-family: monospace;
 }
 
-#upload-button {
+input#upload-button {
     background: #ccf;
     border: 1px solid #000088;
 }
 
-#upload-button {
+input#upload-button {
     background: #eef;
 }
 
 /*********
 ** Log metadata & filters
 *********/
+.banner {
+    border: 2px solid gray;
+    border-radius: 5px;
+    padding: 1em;
+}
+
+.banner.success {
+    border-color: green;
+    background: #CFC;
+}
+
+.banner.error {
+    border-color: red;
+    background: #FCC;
+}
+
 #metadata, #mods, #filters {
     font-weight: bold;
     border-bottom: 1px dashed #888888;
diff --git a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
index 38a75a80..c4a35e96 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
@@ -92,7 +92,9 @@ smapi.logParser = function (data, sectionUrl) {
     *********/
     var error = $("#error");
     
-    $("#upload-button").on("click", function() {
+    $("#upload-button").on("click", function(e) {
+        e.preventDefault();
+
         $("#input").val("");
         $("#popup-upload").fadeIn();
     });