Add onboarding settings

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

js/src/components/Settings/SettingsOnboarding.vue

@@ -0,0 +1,53 @@
+<template>
+  <div v-if="loggedUser">
+    <section>
+      <div class="setting-title">
+        <h2>{{ $t("Settings") }}</h2>
+      </div>
+      <p>
+        <h3>{{ $t("Timezone") }}</h3>
+        {{ $t("We use your timezone to make sure you get notifications for an event at the correct time.") }}
+        {{ $t("Your timezone was detected as {timezone}.", { timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }) }}
+      </p>
+      <div class="has-text-centered">
+        <router-link :to="{ name: RouteName.PREFERENCES }" class="button is-primary is-outlined">{{
+          $t("Manage my settings")
+        }}</router-link>
+      </div>
+    </section>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
+import {
+  ICurrentUser,
+  INotificationPendingParticipationEnum,
+} from "../../types/current-user.model";
+import RouteName from "../../router/name";
+
+@Component({
+  apollo: {
+    loggedUser: USER_SETTINGS,
+  },
+})
+export default class SettingsOnboarding extends Vue {
+  loggedUser!: ICurrentUser;
+
+  notificationOnDay = true;
+
+  RouteName = RouteName;
+
+  async updateSetting(variables: object) {
+    await this.$apollo.mutate<{ setUserSettings: string }>({
+      mutation: SET_USER_SETTINGS,
+      variables,
+    });
+  }
+}
+</script>
+<style lang="scss" scoped>
+h3 {
+  font-weight: bold;
+}
+</style>