UI for deleting all data

Author: Stigmatoz

src/_locales/de/messages.json

@@ -235,5 +235,18 @@
   "enjoyAndReview": {
     "message": "Genießen Sie die Erweiterung?",
     "description": "Bewerten Web Activity Time Tracker"
+  },
+  "removeAllData": {
+    "message": "Alle Daten entfernen",
+    "description": "Sie können alle Daten und Statistiken der besuchten Websites für immer löschen."
+  },
+  "remove": {
+    "message": "Entfernen"
+  },
+  "removeAllDataConfirm": {
+    "message": "Sind Sie sicher, dass Sie alle Daten löschen möchten?"
+  },
+  "cancel": {
+    "message": "Annullierung"
   }
 }

src/_locales/en/messages.json

@@ -235,5 +235,18 @@
   "enjoyAndReview": {
     "message": "Enjoying the extension?",
     "description": "Rate Web Activity Time Tracker"
+  },
+  "removeAllData": {
+    "message": "Remove all data",
+    "description": "You can delete all data and statistics of visited websites for all time"
+  },
+  "remove": {
+    "message": "Remove"
+  },
+  "removeAllDataConfirm": {
+    "message": "Are you sure you want to delete all data?"
+  },
+  "cancel": {
+    "message": "Cancel"
   }
 }

src/_locales/ru/messages.json

@@ -235,5 +235,18 @@
   "enjoyAndReview": {
     "message": "Вам нравится расширение?",
     "description": "Оцените Web Activity Time Tracker"
+  },
+  "removeAllData": {
+    "message": "Удалить все данные",
+    "description": "Вы можете удалить все данные и статистику посещенных сайтов за все время"
+  },
+  "remove": {
+    "message": "Удалить"
+  },
+  "removeAllDataConfirm": {
+    "message": "Вы уверены, что хотите удалить все данные, включая статистику посещенных сайтов?"
+  },
+  "cancel": {
+    "message": "Отмена"
   }
 }

src/assets/css/general.css

@@ -79,8 +79,58 @@ input[type='button']:hover {
   text-decoration: none;
 }
 
+input[type='button'].alert {
+  background: #fe5c5c !important;
+}
+
+input[type='button'].info {
+  background: #ffffff !important;
+  color: black;
+  border: 1px solid black;
+}
+
 input[type='button'][disabled] {
   border: 1px solid #999999;
   background-color: #cccccc;
   color: #666666;
 }
+.modal {
+  display: block; 
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4); 
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; 
+  padding: 20px;
+  border: 1px solid #888;
+  width: 40%; 
+  border-radius: 10px;
+}
+
+.modal-content p{
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}

src/components/GeneralSettings.vue

@@ -81,6 +81,25 @@
       <input type="button" :value="t('exportToCsv.message')" @click="exportToCsv()" />
     </div>
   </div>
+  <div class="settings-item">
+    <label class="setting-header d-inline-block">{{ t('removeAllData.message') }}</label>
+    <p class="description">{{ t('removeAllData.description') }}</p>
+    <input type="button" :value="t('remove.message')" @click="removeAll()" />
+  </div>
+  <div id="removeAllConfirmModal" class="modal" v-if="needToConfirmDeleteAllData">
+    <div class="modal-content">
+      <p class="text-center">{{ t('removeAllDataConfirm.message') }}</p>
+      <div class="text-center">
+        <input
+          type="button"
+          class="alert"
+          :value="t('remove.message')"
+          @click="removeAllConfirm()"
+        />
+        <input type="button" class="info ml-10" :value="t('cancel.message')" @click="cancel()" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -119,6 +138,8 @@ const selectedDate = ref<Date[]>();
 
 const presetRanges = ranges();
 
+const needToConfirmDeleteAllData = ref<boolean>();
+
 onMounted(async () => {
   viewTimeInBadge.value = await settingsStorage.getValue(
     StorageParams.VIEW_TIME_IN_BADGE,
@@ -169,6 +190,18 @@ async function exportToCsv() {
     );
   }
 }
+
+async function removeAll() {
+  needToConfirmDeleteAllData.value = true;
+}
+
+function removeAllConfirm() {
+  needToConfirmDeleteAllData.value = false;
+}
+
+function cancel() {
+  needToConfirmDeleteAllData.value = false;
+}
 </script>
 
 <style scoped>