Rework onboarding

Close #435

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/User/SettingsOnboard.vue

@@ -1,48 +1,94 @@
 <template>
   <div class="section container">
     <h1 class="title">{{ $t("Let's define a few settings") }}</h1>
-    <settings-onboarding />
-    <notifications-onboarding />
-    <section class="has-text-centered section">
-      <b-button @click="refresh()" type="is-success" size="is-big">
+    <b-steps v-model="realActualStepIndex" :has-navigation="false">
+      <b-step-item step="1" :label="$t('Settings')">
+        <settings-onboarding />
+      </b-step-item>
+      <b-step-item step="2" :label="$t('Participation notifications')">
+        <notifications-onboarding />
+      </b-step-item>
+      <b-step-item step="3" :label="$t('Profiles and federation')">
+        <profile-onboarding />
+      </b-step-item>
+    </b-steps>
+    <section class="has-text-centered section buttons">
+      <b-button
+        outlined
+        :disabled="realActualStepIndex < 1"
+        tag="router-link"
+        :to="{
+          name: RouteName.WELCOME_SCREEN,
+          params: { step: actualStepIndex - 1 },
+        }"
+      >
+        {{ $t("Previous") }}
+      </b-button>
+      <b-button
+        outlined
+        type="is-success"
+        v-if="realActualStepIndex < 2"
+        tag="router-link"
+        :to="{
+          name: RouteName.WELCOME_SCREEN,
+          params: { step: actualStepIndex + 1 },
+        }"
+      >
+        {{ $t("Next") }}
+      </b-button>
+      <b-button
+        v-if="realActualStepIndex >= 2"
+        type="is-success"
+        size="is-big"
+        tag="router-link"
+        :to="{ name: RouteName.HOME }"
+      >
         {{ $t("All good, let's continue!") }}
       </b-button>
     </section>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { SET_USER_SETTINGS } from "../../graphql/user";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { TIMEZONES } from "../../graphql/config";
+import RouteName from "../../router/name";
 import { IConfig } from "../../types/config.model";
 
 @Component({
   components: {
     NotificationsOnboarding: () => import("../../components/Settings/NotificationsOnboarding.vue"),
     SettingsOnboarding: () => import("../../components/Settings/SettingsOnboarding.vue"),
+    ProfileOnboarding: () => import("../../components/Account/ProfileOnboarding.vue"),
   },
   apollo: {
     config: TIMEZONES,
   },
 })
 export default class SettingsOnboard extends Vue {
+  @Prop({ required: false, default: 1, type: Number }) step!: number;
+
   config!: IConfig;
 
-  @Watch("config")
-  async timezoneLoaded() {
-    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    if (this.config && this.config.timezones.includes(timezone)) {
-      await this.$apollo.mutate<{ setUserSettings: string }>({
-        mutation: SET_USER_SETTINGS,
-        variables: {
-          timezone,
-        },
-      });
+  RouteName = RouteName;
+
+  actualStepIndex = this.step;
+
+  @Watch("step")
+  updateActualStep(): void {
+    if (this.step) {
+      this.actualStepIndex = this.step;
     }
   }
 
-  refresh() {
-    location.reload();
+  get realActualStepIndex(): number {
+    return this.actualStepIndex - 1;
   }
 }
 </script>
+<style scoped lang="scss">
+.section.container {
+  .has-text-centered.section.buttons {
+    justify-content: center;
+  }
+}
+</style>