Rework onboarding

Close #435

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

js/src/components/Account/ProfileOnboarding.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="section container">
+    <div class="setting-title">
+      <h2>{{ $t("Profiles and federation") }}</h2>
+    </div>
+    <div>
+      <p class="content">
+        {{
+          $t(
+            "Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want."
+          )
+        }}
+      </p>
+      <hr />
+      <p class="content">
+        <span>
+          {{
+            $t(
+              "Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere."
+            )
+          }}
+        </span>
+        <span
+          v-html="
+            $t(
+              'This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.',
+              {
+                domain,
+                instanceName: config.name,
+              }
+            )
+          "
+        />
+      </p>
+      <hr />
+      <p class="content">
+        {{
+          $t(
+            "If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:"
+          )
+        }}
+      </p>
+      <div class="has-text-centered">
+        <code>{{ `${currentActor.preferredUsername}@${domain}` }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { CONFIG } from "@/graphql/config";
+import { IPerson } from "@/types/actor";
+import { IConfig } from "@/types/config.model";
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  apollo: {
+    config: CONFIG,
+    currentActor: CURRENT_ACTOR_CLIENT,
+  },
+})
+export default class ProfileOnboarding extends Vue {
+  config!: IConfig;
+
+  currentActor!: IPerson;
+
+  domain = window.location.hostname;
+}
+</script>

js/src/components/Settings/NotificationsOnboarding.vue

@@ -25,41 +25,30 @@
         </b-checkbox>
       </div>
       <p>{{ $t("To activate more notifications, head over to the notification settings.") }}</p>
-      <div class="has-text-centered">
-        <router-link
-          :to="{ name: RouteName.NOTIFICATIONS }"
-          class="button is-primary is-outlined"
-          >{{ $t("Manage my notifications") }}</router-link
-        >
-      </div>
     </section>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component } from "vue-property-decorator";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
-import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
-import { ICurrentUser } from "../../types/current-user.model";
-import RouteName from "../../router/name";
-
-@Component({
-  apollo: {
-    loggedUser: USER_SETTINGS,
-  },
-})
-export default class NotificationsOnboarding extends Vue {
-  loggedUser!: ICurrentUser;
+import { mixins } from "vue-class-component";
+import Onboarding from "../../mixins/onboarding";
 
+@Component
+export default class NotificationsOnboarding extends mixins(Onboarding) {
   notificationOnDay = true;
 
-  RouteName = RouteName;
+  mounted(): void {
+    this.doUpdateSetting({
+      notificationOnDay: true,
+      notificationEachWeek: false,
+      notificationBeforeEvent: false,
+    });
+  }
 
   async updateSetting(variables: Record<string, unknown>): Promise<void> {
     try {
-      await this.$apollo.mutate<{ setUserSettings: string }>({
-        mutation: SET_USER_SETTINGS,
-        variables,
-      });
+      this.doUpdateSetting(variables);
     } catch (e) {
       Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
     }

js/src/components/Settings/SettingsOnboarding.vue

@@ -4,51 +4,100 @@
       <div class="setting-title">
         <h2>{{ $t("Settings") }}</h2>
       </div>
-      <h3>{{ $t("Timezone") }}</h3>
-      <p>
-        {{
-          $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>
+        <h3>{{ $t("Language") }}</h3>
+        <p>
+          {{
+            $t(
+              "This setting will be used to display the website and send you emails in the correct language."
+            )
+          }}
+        </p>
+        <div class="has-text-centered">
+          <b-select
+            :loading="!config || !loggedUser"
+            v-model="locale"
+            :placeholder="$t('Select a language')"
+          >
+            <option v-for="(language, lang) in langs" :value="lang" :key="lang">
+              {{ language }}
+            </option>
+          </b-select>
+        </div>
+      </div>
+
+      <div>
+        <h3>{{ $t("Timezone") }}</h3>
+        <p>
+          {{
+            $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,
+            })
+          }}
+          <b-message type="is-danger" v-if="!$apollo.loading && !supportedTimezone">
+            {{ $t("Your timezone {timezone} isn't supported.", { timezone }) }}
+          </b-message>
+        </p>
       </div>
     </section>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
-import { ICurrentUser } from "../../types/current-user.model";
-import RouteName from "../../router/name";
+import { Component, Watch } from "vue-property-decorator";
+import { TIMEZONES } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { saveLocaleData } from "@/utils/auth";
+import { mixins } from "vue-class-component";
+import Onboarding from "@/mixins/onboarding";
+import { UPDATE_USER_LOCALE } from "../../graphql/user";
+import langs from "../../i18n/langs.json";
 
 @Component({
   apollo: {
-    loggedUser: USER_SETTINGS,
+    config: TIMEZONES,
   },
 })
-export default class SettingsOnboarding extends Vue {
-  loggedUser!: ICurrentUser;
+export default class SettingsOnboarding extends mixins(Onboarding) {
+  config!: IConfig;
 
   notificationOnDay = true;
 
-  RouteName = RouteName;
+  locale: string | null = this.$i18n.locale;
 
-  async updateSetting(variables: Record<string, unknown>): Promise<void> {
-    await this.$apollo.mutate<{ setUserSettings: string }>({
-      mutation: SET_USER_SETTINGS,
-      variables,
+  langs: Record<string, string> = langs;
+
+  timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  mounted(): void {
+    this.doUpdateLocale(this.$i18n.locale);
+    this.doUpdateSetting({ timezone: this.timezone });
+  }
+
+  @Watch("locale")
+  async updateLocale(): Promise<void> {
+    if (this.locale) {
+      this.doUpdateLocale(this.locale);
+      saveLocaleData(this.locale);
+    }
+  }
+
+  private async doUpdateLocale(locale: string): Promise<void> {
+    await this.$apollo.mutate({
+      mutation: UPDATE_USER_LOCALE,
+      variables: {
+        locale,
+      },
     });
   }
+
+  get supportedTimezone(): boolean {
+    return this.config && this.config.timezones.includes(this.timezone);
+  }
 }
 </script>
 <style lang="scss" scoped>