From 1ad74f7664b0bd87765546b7619e540223592a83 Mon Sep 17 00:00:00 2001
From: Thomas Ballmann <mail@i-2xdream.de>
Date: Thu, 3 Dec 2020 20:49:38 +0100
Subject: [PATCH] #31 improve setup wizard base

---
 app/src/components/SetupPanel.vue  |  83 ++++++++++++++
 app/src/views/Setup/Appearance.vue | 119 ++++++++++----------
 app/src/views/Setup/Country.vue    |  27 ++++-
 app/src/views/Setup/Done.vue       |  60 +++++-----
 app/src/views/Setup/Name.vue       | 169 ++++++++++++++---------------
 app/src/views/Setup/Start.vue      |  84 +++++++-------
 app/src/views/Setup/Weather.vue    | 166 ++++++++++++++--------------
 app/src/views/Setup/Wifi.vue       |  17 ++-
 8 files changed, 418 insertions(+), 307 deletions(-)
 create mode 100644 app/src/components/SetupPanel.vue

diff --git a/app/src/components/SetupPanel.vue b/app/src/components/SetupPanel.vue
new file mode 100644
index 0000000..c745b17
--- /dev/null
+++ b/app/src/components/SetupPanel.vue
@@ -0,0 +1,83 @@
+<template>
+  <v-container
+    class="_fill-height"
+    fluid
+  >
+    <div v-if="back">
+      <v-btn
+        text
+        color="primary"
+        class="px-0"
+        @click="$emit('back')"
+      >
+        <v-icon>$prev</v-icon>
+        Back
+      </v-btn>
+    </div>
+
+    <v-row
+      no-gutters
+      justify="center"
+    >
+      <v-col
+        lg="5"
+        md="6"
+        sm="8"
+      >
+        <v-card flat>
+          <div
+            v-if="hasIconSlot"
+            class="justify-center text-center"
+          >
+            <v-icon
+              class="my-icon ma-10"
+            >
+              <slot name="icon" />
+            </v-icon>
+          </div>
+
+          <v-card-title
+            class="display-1 font-weight-bold mb-12 px-0 justify-center text-center"
+          >
+            <slot name="headline" />
+          </v-card-title>
+        </v-card>
+
+        <slot />
+
+        <v-card-actions
+          v-if="hasActionsSlot"
+          class="flex-column mt-16"
+        >
+          <slot name="actions" />
+        </v-card-actions>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+  export default {
+    name: 'SetupPanel',
+    props: {
+      back: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      hasIconSlot () {
+        return !!this.$slots.icon
+      },
+      hasActionsSlot () {
+        return !!this.$slots.actions
+      },
+    },
+  }
+</script>
+
+<style scoped>
+>>> .my-icon > .v-icon__svg {
+  transform: scale(3);
+}
+</style>
diff --git a/app/src/views/Setup/Appearance.vue b/app/src/views/Setup/Appearance.vue
index 7520eec..bb94dcc 100644
--- a/app/src/views/Setup/Appearance.vue
+++ b/app/src/views/Setup/Appearance.vue
@@ -1,81 +1,90 @@
 <template>
-  <v-container
-    class="_fill-height"
-    fluid
+  <setup-panel
+    back
+    @back="stepBack"
   >
-    <v-row
-      no-gutters
-      justify="center"
-    >
-      <v-col
-        lg="5"
-        md="6"
-        sm="8"
-      >
-        <v-card flat>
-          <v-card-title class="display-2 mb-12 justify-center text-center">
-            Appearance
-          </v-card-title>
+    <template #icon />
+    <template #headline>
+      Appearance
+    </template>
 
-          <v-radio-group
-            v-model="settings.device.theme"
-            row
-          >
-            <v-radio
-              label="Light"
-              value="white"
-            />
-            <v-radio
-              label="Dark"
-              value="black"
-            />
-          </v-radio-group>
+    <v-radio-group
+      v-model="form.theme"
+      row
+    >
+      <v-radio
+        label="Light"
+        value="white"
+      />
+      <v-radio
+        label="Dark"
+        value="black"
+      />
+    </v-radio-group>
 
-          <v-card-actions>
-            <v-btn
-              depressed
-              block
-              color="primary"
-              @click="commitStep()"
-            >
-              Continue
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+    <template #actions>
+      <v-btn
+        depressed
+        block
+        color="primary"
+        @click="commitStep()"
+      >
+        Continue
+      </v-btn>
+    </template>
+  </setup-panel>
 </template>
 
 <script>
-  import apiDevice from '@/api/device'
+  import { mapState, mapMutations, mapActions } from 'vuex'
+  import SetupPanel from '@/components/SetupPanel'
 
   export default {
+    components: { SetupPanel },
     data: () => ({
-      isLoading: true,
-      isSaving: false,
-      settings: null,
+      isProcessing: false,
+      form: {
+        theme: '',
+      },
     }),
+    computed: {
+      ...mapState([
+        'settings',
+      ]),
+    },
     created () {
-      apiDevice.getSettings(settings => {
-        this.settings = settings
-
-        this.isLoading = false
-      })
+      this.resetChanges()
     },
     methods: {
+      ...mapMutations(['updateSettings']),
+      ...mapActions(['saveSettings']),
+
       commitStep () {
-        this.isSaving = true
+        this.isProcessing = true
 
-        apiDevice.putSettings({ device: this.settings.device }, () => {
-          this.isSaving = false
+        this.updateSettings({
+          device: {
+            theme: this.form.theme,
+          },
+        })
 
+        /*
+        this.saveSettings().then(() => {
           this.nextStep()
         })
+        */
+
+        this.nextStep()
+      },
+      resetChanges () {
+        this.form.theme = this.settings.device.theme
       },
       nextStep () {
         this.$router.push('/setup/done')
       },
+      stepBack () {
+        this.$router.push('/setup/weather')
+      },
     },
   }
 </script>
diff --git a/app/src/views/Setup/Country.vue b/app/src/views/Setup/Country.vue
index 778fae4..15b0b8d 100644
--- a/app/src/views/Setup/Country.vue
+++ b/app/src/views/Setup/Country.vue
@@ -3,6 +3,18 @@
     class="_fill-height"
     fluid
   >
+    <div>
+      <v-btn
+        text
+        color="primary"
+        class="px-0"
+        @click="stepBack"
+      >
+        <v-icon>$prev</v-icon>
+        Back
+      </v-btn>
+    </div>
+
     <v-row
       no-gutters
       justify="center"
@@ -16,18 +28,18 @@
           <!-- country -->
           <v-card flat>
             <v-card-title
-              class="display-2 mb-12 justify-center text-center"
+              class="display-1 font-weight-bold mb-12 px-0 justify-center text-center"
             >
               Select Your Country or Region
             </v-card-title>
 
-            <v-list class="ml-5 pa-0">
+            <v-list class="pa-0">
               <template v-for="(country, code) in availableCountries">
                 <div :key="code">
                   <v-divider />
 
                   <v-list-item
-                    class="pl-1"
+                    class="px-0"
                     @click="commitCountry(code, country)"
                   >
                     <!--<v-list-item-icon>{{ country.emoji }}</v-list-item-icon>-->
@@ -46,17 +58,17 @@
         <template v-else-if="currentStep === 1">
           <!-- timezone if needed -->
           <v-card flat>
-            <v-card-title class="display-2 mb-12 justify-center text-center">
+            <v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center">
               Select Your Timezone
             </v-card-title>
 
-            <v-list class="ml-5 pa-0">
+            <v-list class="pa-0">
               <template v-for="(zone, i) in availableTimeZones">
                 <div :key="i">
                   <v-divider />
 
                   <v-list-item
-                    class="pl-1"
+                    class="px-0"
                     @click="commitTimezone(zone)"
                   >
                     <v-list-item-content>{{ zone }}</v-list-item-content>
@@ -133,6 +145,9 @@
           this.$router.push('/setup/wifi')
         })
       },
+      stepBack () {
+        this.$router.push('/setup/start')
+      },
     },
   }
 </script>
diff --git a/app/src/views/Setup/Done.vue b/app/src/views/Setup/Done.vue
index 6f4add2..d743236 100644
--- a/app/src/views/Setup/Done.vue
+++ b/app/src/views/Setup/Done.vue
@@ -1,52 +1,48 @@
 <template>
-  <v-container
-    class="_fill-height"
-    fluid
+  <setup-panel
+    back
+    @back="stepBack"
   >
-    <v-card
-      flat
-      class="mx-auto"
-      width="540"
-    >
-      <!--<v-card-title class="display-2 mb-12 justify-center text-center">Welcome to paperdash</v-card-title>-->
-      <v-card-title class="display-2 mb-12 justify-center text-center">
-        Hello {{ settings.device.name }}
-      </v-card-title>
+    <template #headline>
+      Hello {{ settings.device.name }}
+    </template>
 
-      <v-card-actions>
-        <v-btn
-          outlined
-          block
-          color="primary"
-          @click="onStart"
-        >
-          Let's start
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-container>
+    <template #actions>
+      <v-btn
+        outlined
+        block
+        color="primary"
+        @click="onStart"
+      >
+        Let's start
+      </v-btn>
+    </template>
+  </setup-panel>
 </template>
 
 <script>
-  import apiDevice from '@/api/device'
+  import { mapState } from 'vuex'
+  import SetupPanel from '@/components/SetupPanel'
 
   export default {
+    components: { SetupPanel },
     data: () => ({
-      isLoading: true,
-      isSaving: false,
-      settings: null,
     }),
+    computed: {
+      ...mapState([
+        'settings',
+      ]),
+    },
     created () {
-      apiDevice.getSettings(settings => {
-        this.settings = settings
 
-        this.isLoading = false
-      })
     },
     methods: {
       onStart () {
         this.$router.push('/')
       },
+      stepBack () {
+        this.$router.push('/setup/appearance')
+      },
     },
   }
 </script>
diff --git a/app/src/views/Setup/Name.vue b/app/src/views/Setup/Name.vue
index 0d5064f..eb65635 100644
--- a/app/src/views/Setup/Name.vue
+++ b/app/src/views/Setup/Name.vue
@@ -1,125 +1,116 @@
 <template>
-  <v-container
-    class="_fill-height"
-    fluid
+  <setup-panel
+    back
+    @back="stepBack"
   >
-    <v-row
-      no-gutters
-      justify="center"
+    <template #icon>
+      $face
+    </template>
+    <template #headline>
+      Give it a name
+    </template>
+
+    <p
+      class="text-center"
     >
-      <v-col
-        lg="5"
-        md="6"
-        sm="8"
-      >
-        <v-card flat>
-          <div class="justify-center text-center">
-            <v-icon
-              view-box="0 0 24 24"
-              style="width: 64px; height: 64px; fill: #FF9800"
-            >
-              $face
-            </v-icon>
-          </div>
-          <v-card-title class="display-2 mb-12 justify-center text-center">
-            Give it a name
-          </v-card-title>
+      TODO:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+    </p>
 
-          <p
-            class="text-center"
+    <v-card-text>
+      <v-text-field
+        v-model="form.name"
+        label="Name of the device"
+      >
+        <template #append-outer>
+          <v-icon
+            class="random-icon mt-5 ml-5"
+            @click="setRandomName()"
           >
-            TODO:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
-          </p>
-
-          <v-skeleton-loader
-            v-if="isLoading"
-            type="list-item-two-line"
-            class="mx-auto"
-          />
+            $autorenew
+          </v-icon>
+        </template>
+      </v-text-field>
+    </v-card-text>
 
-          <template v-else>
-            <v-card-text>
-              <v-text-field
-                v-model="settings.device.name"
-                label="i8n:My paperdash name"
-              >
-                <template #append-outer>
-                  <v-icon
-                    view-box="0 0 24 24"
-                    style="width: 48px; height: 48px;"
-                    @click="setRandomeName()"
-                  >
-                    $autorenew
-                  </v-icon>
-                </template>
-              </v-text-field>
-            </v-card-text>
-
-            <v-card-actions class="flex-column">
-              <v-btn
-                :disabled="!isStepValid"
-                :loading="isSaving"
-                depressed
-                block
-                color="primary"
-                @click="commitStep()"
-              >
-                Continue
-              </v-btn>
-            </v-card-actions>
-          </template>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+    <template #actions>
+      <v-btn
+        :disabled="!isStepValid"
+        depressed
+        block
+        color="primary"
+        @click="commitStep()"
+      >
+        Continue
+      </v-btn>
+    </template>
+  </setup-panel>
 </template>
 
 <script>
-  import apiDevice from '@/api/device'
+  import { mapState, mapMutations, mapActions } from 'vuex'
   import randomNames from '@/assets/fantasyNames.json'
+  import SetupPanel from '@/components/SetupPanel'
 
   export default {
+    components: { SetupPanel },
     data: () => ({
-      isLoading: true,
-      isSaving: false,
-      settings: null,
+      isProcessing: false,
+      form: {
+        name: '',
+      },
     }),
     computed: {
+      ...mapState([
+        'settings',
+      ]),
+
       isStepValid () {
         return (
-          this.settings.device.name !== undefined &&
-          this.settings.device.name !== ''
+          this.form.name !== ''
         )
       },
     },
     created () {
-      apiDevice.getSettings(settings => {
-        this.settings = settings
+      this.resetChanges()
 
-        if (!this.isStepValid) {
-          this.setRandomeName()
-        }
-
-        this.isLoading = false
-      })
+      if (!this.isStepValid) {
+        this.setRandomName()
+      }
     },
     methods: {
+      ...mapMutations(['updateSettings']),
+      ...mapActions(['saveSettings']),
+
       commitStep () {
-        this.isSaving = true
+        this.isProcessing = true
 
-        apiDevice.putSettings({ device: this.settings.device }, () => {
-          this.isSaving = false
+        this.updateSettings({
+          device: {
+            name: this.form.name,
+          },
+        })
 
+        /*
+        this.saveSettings().then(() => {
           this.nextStep()
         })
+        */
+
+        this.nextStep()
+      },
+      resetChanges () {
+        this.form.name = this.settings.device.name
       },
       nextStep () {
         this.$router.push('/setup/appearance')
       },
-      setRandomeName () {
-        this.settings.device.name =
+      setRandomName () {
+        this.form.name =
           randomNames[Math.floor(Math.random() * randomNames.length)]
       },
+      stepBack () {
+        this.$router.push('/setup/weather')
+      },
     },
   }
 </script>
@@ -129,4 +120,8 @@
   font-size: 2.2em;
   max-height: inherit;
 }
+
+>>> .random-icon > .v-icon__svg {
+  transform: scale(2);
+}
 </style>
diff --git a/app/src/views/Setup/Start.vue b/app/src/views/Setup/Start.vue
index 4f317ae..8292fa2 100644
--- a/app/src/views/Setup/Start.vue
+++ b/app/src/views/Setup/Start.vue
@@ -1,7 +1,6 @@
 <template>
   <v-container
-    class="_fill-height"
-    fluid
+    class="_fill-height fluid_"
   >
     <v-row
       no-gutters
@@ -13,7 +12,7 @@
         sm="8"
       >
         <v-card flat>
-          <v-card-title class="display-2 mt-12 justify-center text-center">
+          <v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center">
             Hello paperdash
           </v-card-title>
 
@@ -23,45 +22,48 @@
             :class="[device.theme, device.case, device.front, 'case_orange', 'my-12']"
           />
 
-          <svg
-            id="device"
-            :class="[device.theme, device.case, device.front, 'case_orange front_orange', 'my-12 mx-auto']"
-            version="1.0"
-            xmlns="http://www.w3.org/2000/svg"
-            _width="561px"
-            _height="527px"
-            viewBox="0 0 5610 5270"
-            preserveAspectRatio="xMidYMid meet"
-            width="400"
-          >
-
-            <g
-              id="border"
-              fill="#262626"
-              stroke="none"
-            >
-              <path
-                d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"
-              />
-            </g>
-            <g
-              fill="#f3f3f3"
-              stroke="none"
+          <v-responsive>
+            <svg
+              v-if="1"
+              id="device"
+              :class="[device.theme, device.case, device.front, 'case_orange front_orange', 'my-12 mx-auto']"
+              version="1.0"
+              xmlns="http://www.w3.org/2000/svg"
+              _width="561px"
+              _height="527px"
+              viewBox="0 0 5610 5270"
+              preserveAspectRatio="xMidYMid meet"
+              width="400"
             >
-              <path
-                id="front"
-                d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"
-              />
-              <path
-                id="image"
-                d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"
-              />
-              <path
-                id="case"
-                d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"
-              />
-            </g>
-          </svg>
+
+              <g
+                id="border"
+                fill="#262626"
+                stroke="none"
+              >
+                <path
+                  d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"
+                />
+              </g>
+              <g
+                fill="#f3f3f3"
+                stroke="none"
+              >
+                <path
+                  id="front"
+                  d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"
+                />
+                <path
+                  id="image"
+                  d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"
+                />
+                <path
+                  id="case"
+                  d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"
+                />
+              </g>
+            </svg>
+          </v-responsive>
 
           <v-card-actions>
             <v-btn
diff --git a/app/src/views/Setup/Weather.vue b/app/src/views/Setup/Weather.vue
index f988456..f4cd049 100644
--- a/app/src/views/Setup/Weather.vue
+++ b/app/src/views/Setup/Weather.vue
@@ -1,127 +1,123 @@
 <template>
-  <v-container
-    class="_fill-height"
-    fluid
+  <setup-panel
+    back
+    @back="stepBack"
   >
-    <v-row
-      no-gutters
-      justify="center"
-    >
-      <v-col
-        lg="5"
-        md="6"
-        sm="8"
-      >
-        <v-card flat>
-          <div class="justify-center text-center">
-            <v-icon
-              view-box="0 0 24 24"
-              style="width: 64px; height: 64px; fill: #FF9800"
-            >
-              $wb_sunny
-            </v-icon>
-          </div>
-          <v-card-title class="display-2 mb-12 justify-center text-center">
-            Weather
-          </v-card-title>
-
-          <v-skeleton-loader
-            v-if="isLoading"
-            type="list-item-two-line,list-item-two-line"
-            class="mx-auto"
-          />
+    <template #icon>
+      $wb_sunny
+    </template>
+    <template #headline>
+      Weather
+    </template>
 
-          <template v-else>
-            <v-card-text>
-              <v-text-field
-                v-model="settings.weather.api"
-                label="i8n:OpenWeatherMap API key"
-              >
-                <template #append-outer>
-                  <v-icon @click="registerApiKey()">
-                    $open_in_new
-                  </v-icon>
-                </template>
-              </v-text-field>
+    <v-text-field
+      v-model="form.api"
+      label="OpenWeatherMap API key"
+    >
+      <template #append-outer>
+        <v-icon @click="registerApiKey()">
+          $open_in_new
+        </v-icon>
+      </template>
+    </v-text-field>
 
-              <weather-find-location
-                :api="settings.weather.api"
-                :location.sync="settings.weather.location"
-                :lang="lang"
-                :unit="unit"
-              />
-            </v-card-text>
+    <weather-find-location
+      :api="form.api"
+      :location.sync="form.location"
+      :search.sync="form.name"
+      :lang="lang"
+      :unit="unit"
+    />
 
-            <v-card-actions class="flex-column">
-              <v-btn
-                :disabled="!isLocationValid"
-                depressed
-                block
-                color="primary"
-                @click="commitStep()"
-              >
-                Continue
-              </v-btn>
-              <v-btn
-                class="ma-0 mt-3"
-                text
-                block
-                color="primary"
-                @click="nextStep()"
-              >
-                Set Up Later in Settings
-              </v-btn>
-            </v-card-actions>
-          </template>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+    <template #actions>
+      <v-btn
+        :disabled="!isLocationValid"
+        depressed
+        block
+        color="primary"
+        @click="commitStep()"
+      >
+        Continue
+      </v-btn>
+      <v-btn
+        class="ma-0 mt-3"
+        text
+        block
+        color="primary"
+        @click="nextStep()"
+      >
+        Set Up Later in Settings
+      </v-btn>
+    </template>
+  </setup-panel>
 </template>
 
 <script>
-  import apiDevice from '@/api/device'
+  import { mapState, mapMutations, mapActions } from 'vuex'
   import weatherFindLocation from '@/components/WeatherFindLocation'
+  import SetupPanel from '@/components/SetupPanel'
 
   export default {
     components: {
+      SetupPanel,
       weatherFindLocation,
     },
     data: () => ({
-      isLoading: true,
-      settings: null,
+      form: {
+        api: '',
+        name: '',
+        location: 0,
+      },
     }),
     computed: {
+      ...mapState([
+        'settings',
+      ]),
       lang () {
-        return this.settings.language || 'EN'
+        return this.settings.weather.language || 'EN'
       },
       unit () {
-        return this.settings.language === 'EN' ? '' : 'metric'
+        return this.lang === 'EN' ? '' : 'metric'
       },
       isLocationValid () {
         return this.settings.weather.location > 0
       },
     },
     created () {
-      apiDevice.getSettings(settings => {
-        this.settings = settings
-
-        this.isLoading = false
-      })
+      this.resetChanges()
     },
 
     methods: {
+      ...mapMutations(['updateSettings']),
+      ...mapActions(['saveSettings']),
+
       commitStep () {
-        // TODO sav
+        this.updateSettings({
+          weather: {
+            api: this.form.api,
+            name: this.form.name,
+            location: this.form.location,
+            lang: this.lang,
+            unit: this.unit,
+          },
+        })
 
         this.nextStep()
       },
+      resetChanges () {
+        this.form.api = this.settings.weather.api
+        this.form.location = this.settings.weather.location
+        this.form.name = this.settings.weather.name
+      },
       nextStep () {
         this.$router.push('/setup/name')
       },
       registerApiKey () {
         window.open('http://openweathermap.org/')
       },
+      stepBack () {
+        this.$router.push('/setup/')
+      },
     },
   }
 </script>
diff --git a/app/src/views/Setup/Wifi.vue b/app/src/views/Setup/Wifi.vue
index 8bdb9b5..fdf6a1a 100644
--- a/app/src/views/Setup/Wifi.vue
+++ b/app/src/views/Setup/Wifi.vue
@@ -3,6 +3,18 @@
     class="_fill-height"
     fluid
   >
+    <div>
+      <v-btn
+        text
+        color="primary"
+        class="px-0"
+        @click="stepBack"
+      >
+        <v-icon>$prev</v-icon>
+        Back
+      </v-btn>
+    </div>
+
     <v-row
       no-gutters
       justify="center"
@@ -13,7 +25,7 @@
         sm="8"
       >
         <v-card flat>
-          <v-card-title class="display-2 mb-12 justify-center text-center">
+          <v-card-title class="display-1 font-weight-bold mb-12 px-0 justify-center text-center">
             Choose a
             <br>Wi-Fi Network
           </v-card-title>
@@ -142,6 +154,9 @@
 
         apiDevice.wifiConnect(ssid, password, () => {})
       },
+      stepBack () {
+        this.$router.push('/setup/country')
+      },
     },
   }
 </script>