allow settings reset

src/assets/i18n/de.json

@@ -1,4 +1,5 @@
 {
+  "CANCEL": "Abbrechen",
   "MENU": {
     "TITLE": "Menü",
     "ABOUT": "Über",
@@ -22,7 +23,7 @@
   "BLOCKLY": {
     "TITLE": "Blockly für senseBox",
     "BTN_CODE": "Quellcode Ansicht",
-    "BTN_OTA": "OTA Programmierung"
+    "BTN_OTA": "OTA Upload"
   },
   "SETTINGS": {
     "TITLE": "Einstellungen",
@@ -30,8 +31,12 @@
       "TITLE": "Sprache"
     },
     "LOG_OPTIN": {
-      "TITLE": "Sende uns automatisch Fehler-Berichte zu",
+      "TITLE": "Sende uns automatisch Fehlerberichte zu",
       "TEXT": "Das hilft uns beim Beheben von Fehlern.<br/>Keine persönlichen Daten außer deinem Sketch werden übertragen."
+    },
+    "RESET": {
+      "TITLE": "App zurücksetzen",
+      "TEXT": "Dies setzt die Einstellungen zurück und löscht deine Sketche!"
     }
   },
   "OTAWIZ": {

src/assets/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "CANCEL": "Cancel",
   "MENU": {
     "TITLE": "Menu",
     "ABOUT": "About",
@@ -32,6 +33,10 @@
     "LOG_OPTIN": {
       "TITLE": "Automatically send error reports to us",
       "TEXT": "These reports help us in troubleshooting issues.<br/>No personal information is collected, except for your Sketch."
+    },
+    "RESET": {
+      "TITLE": "Reset App",
+      "TEXT": "This will reset your settings and delete your Sketches!"
     }
   },
   "OTAWIZ": {

src/pages/settings/settings.html

@@ -31,5 +31,13 @@
       </ion-label>
       <ion-toggle (ngModelChange)="onSettingsChange('logOptin', $event)" [ngModel]="settings.logOptin"></ion-toggle>
     </ion-item>
+
+    <button ion-item (click)="resetStorage()">
+      <ion-icon name="refresh" item-start></ion-icon>
+      <ion-label>
+        <h2 translate>SETTINGS.RESET.TITLE</h2>
+      </ion-label>
+    </button>
+
   </ion-list>
 </ion-content>

src/pages/settings/settings.scss

@@ -1,3 +1,3 @@
-page-settings {
-
+.error {
+  color: red !important;
 }

src/pages/settings/settings.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
-import { IonicPage } from 'ionic-angular';
+import { IonicPage, ActionSheetController } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 
 import { StorageProvider, SETTINGS } from '../../providers/storage/storage';
+import { DEFAULT_LANG } from '../../constants';
 
 
 @IonicPage()
@@ -14,6 +15,7 @@ export class SettingsPage {
   settings = {} as any
 
   constructor(
+    public actionCtrl: ActionSheetController,
     public translate: TranslateService,
     private storage: StorageProvider,
   ) {
@@ -27,4 +29,29 @@ export class SettingsPage {
     if (name === 'language')
       this.translate.use(value)
   }
+
+  resetStorage() {
+    const handler = () => {
+      this.storage.reset()
+      // update UI state & reset language
+      this.settings = this.storage.get(SETTINGS)
+      const lang = this.getPreferredLanguage()
+      this.storage.get(SETTINGS).language = lang
+      this.translate.use(lang)
+    }
+
+    this.actionCtrl.create({
+      title: this.translate.instant('SETTINGS.RESET.TEXT'),
+      buttons: [
+        { text: this.translate.instant('CANCEL') },
+        { text: this.translate.instant('SETTINGS.RESET.TITLE'), cssClass: 'error', handler },
+      ]
+    }).present()
+  }
+
+  private getPreferredLanguage () {
+    const langsAvailable = this.translate.getLangs()
+    const lang = this.storage.get(SETTINGS).language || this.translate.getBrowserLang()
+    return langsAvailable.indexOf(lang) === -1 ? DEFAULT_LANG : lang
+  }
 }

src/providers/storage/storage.ts

@@ -8,6 +8,11 @@ export class StorageProvider {
   private cache: Map<string, any> = new Map()
 
   constructor () {
+    this.init()
+  }
+
+  init () {
+    // set up default values
     this.registerKey(SETTINGS, { logOptin: false })
     this.registerKey(LASTSKETCH, '')
   }
@@ -27,4 +32,10 @@ export class StorageProvider {
     localStorage.setItem(key, JSON.stringify(value))
     this.cache[key] = value
   }
+
+  reset () {
+    localStorage.clear()
+    this.cache = new Map()
+    this.init()
+  }
 }