feat(options page): add confirmation before resetting settings; #348

sereneblue · May 4, 2020 · c7dd999 · c7dd999
1 parent 1667dab
commit c7dd999
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -419,9 +419,15 @@
   "options.modal.askDelete": {
     "message": "Are you sure you want to delete this rule?"
   },
+  "options.modal.askReset": {
+    "message": "Are you sure you want to reset your settings?"
+  },
   "options.modal.confirmDelete": {
     "message": "Yes, delete it!"
   },
+  "options.modal.confirmReset": {
+    "message": "Yes, reset my settings!"
+  },
   "options.settings": {
     "message": "Settings"
   },

diff --git a/src/lib/chameleon.ts b/src/lib/chameleon.ts
@@ -679,7 +679,9 @@ export class Chameleon {
       'options.ipRules.textareaLabel',
       'options.ipRules.textareaPlaceholder',
       'options.modal.askDelete',
+      'options.modal.askReset',
       'options.modal.confirmDelete',
+      'options.modal.confirmReset',
       'options.settings',
       'options.settings.import',
       'options.settings.importing',

diff --git a/src/options/App.vue b/src/options/App.vue
@@ -70,7 +70,7 @@
                 {{ localizations['options.settings.export'] }}
               </div>
             </button>
-            <button @click="resetSettings" class="transparent-btn">
+            <button @click="openResetModal" class="transparent-btn">
               <div class="flex items-center">
                 <feather class="mr-2" type="rotate-ccw" size="1em"></feather>
                 {{ localizations['options.settings.reset'] }}
@@ -372,6 +372,20 @@
               </div>
             </div>
           </div>
+          <div v-else-if="modalType === Modal.CONFIRM_RESET" class="w-4/5 md:w-1/3 modal overflow-y-auto" style="max-height: 60vh;">
+            <div class="flex flex-col px-6 pt-6 pb-8">
+              <span class="text-center text-red-500 mb-4"><feather stroke-width="1" type="alert-circle" size="8em"></feather></span>
+              <span class="my-1 text-xl font-semibold text-center">{{ localizations['options.modal.askReset'] }}</span>
+              <div class="flex justify-center">
+                <button @click="resetSettings" class="bg-red-500 hover:bg-red-600 font-semibold text-white py-2 px-4 border border-red-500 rounded">
+                  {{ localizations['options.modal.confirmReset'] }}
+                </button>
+                <button @click="closeModal" class="bg-transparent font-semibold py-2 px-4 rounded">
+                  {{ localizations['text.cancel'] }}
+                </button>
+              </div>
+            </div>
+          </div>
           <div v-else-if="modalType === Modal.CONFIRM_WL_DELETE" class="w-4/5 md:w-1/3 modal overflow-y-auto" style="max-height: 60vh;">
             <div class="flex flex-col px-6 pt-6 pb-8">
               <span class="text-center text-red-500 mb-4"><feather stroke-width="1" type="alert-circle" size="8em"></feather></span>
@@ -422,6 +436,7 @@ enum Modal {
   IP_RULE,
   WL_RULE,
   CONFIRM_IP_DELETE,
+  CONFIRM_RESET,
   CONFIRM_WL_DELETE,
   CHECKLIST_INFO,
 }
@@ -725,6 +740,11 @@ export default class App extends Vue {
     }.bind(this);
   }
 
+  openResetModal(): void {
+    this.showModal = true;
+    this.modalType = Modal.CONFIRM_RESET;
+  }
+
   readSettings(evt: Event): void {
     this.isImporting = true;
     let reader = new FileReader();