Thomas Citharel
2 years ago
parent
347448700d
commit
223512f8ae
@ -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>
|
||||
@ -0,0 +1,22 @@
|
||||
import { SET_USER_SETTINGS, USER_SETTINGS } from "@/graphql/user";
|
||||
import RouteName from "@/router/name";
|
||||
import { ICurrentUser } from "@/types/current-user.model";
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
loggedUser: USER_SETTINGS,
|
||||
},
|
||||
})
|
||||
export default class Onboarding extends Vue {
|
||||
loggedUser!: ICurrentUser;
|
||||
|
||||
RouteName = RouteName;
|
||||
|
||||
protected async doUpdateSetting(variables: Record<string, unknown>): Promise<void> {
|
||||
await this.$apollo.mutate<{ setUserSettings: string }>({
|
||||
mutation: SET_USER_SETTINGS,
|
||||
variables,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in new issue