2 files changed, 31 insertions, 5 deletions
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 7504f74e..bc21793e 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -33,14 +33,21 @@ function formToOptions() {
 
 $('#saveOptions').click(() => {
     const opts = formToOptions();
-    const yomichan = chrome.extension.getBackgroundPage().yomichan;
-    saveOptions(opts, () => yomichan.updateOptions(opts));
+    saveOptions(opts, () => {
+        $('.notifyAlerts').hide();
+        $('#notifySave').slideDown();
+        chrome.extension.getBackgroundPage().yomichan.updateOptions(opts);
+    });
 });
 
 $('#resetOptions').click(() => {
-    if (confirm('Reset options to default values?')) {
-        optionsToForm(sanitizeOptions({}));
-    }
+    optionsToForm(sanitizeOptions({}));
+    $('.notifyAlerts').hide();
+    $('#notifyReset').slideDown();
+});
+
+$('[data-hide]').on('click', function() {
+    $('#' + $(this).attr('data-hide')).hide();
 });
 
 $(document).ready(() => loadOptions((opts) => optionsToForm(opts)));
diff --git a/ext/bg/options.html b/ext/bg/options.html
index 25831b38..a3588642 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -5,6 +5,11 @@
         <title>Here go options</title>
         <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
+        <style type="text/css">
+            .notifyAlerts {
+                display: none;
+            }
+        </style>
     </head>
     <body>
         <div class="container">
@@ -34,6 +39,20 @@
                     </div>
                 </div>
 
+                <div class="alert alert-success notifyAlerts" id="notifySave">
+                    Preferences saved
+                    <button type="button" class="close" data-hide="notifySave">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+
+                <div class="alert alert-warning notifyAlerts" id="notifyReset">
+                    Preferences reset to defaults
+                    <button type="button" class="close" data-hide="notifyReset">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+
                 <div class="text-right">
                     <button type="button" id="saveOptions" class="btn btn-default">Save</button>
                     <button type="button" id="resetOptions" class="btn btn-danger">Reset</button>