mobilizon.chapril.org-mobil.../js/src/App.vue

151 lines
4.2 KiB
Vue
Raw Normal View History

<template>
<div id="mobilizon">
<NavBar />
<main>
<router-view />
</main>
<mobilizon-footer />
</div>
</template>
<script lang="ts">
2019-08-13 08:43:37 +02:00
import NavBar from '@/components/NavBar.vue';
import { Component, Vue } from 'vue-property-decorator';
import {
AUTH_ACCESS_TOKEN,
AUTH_USER_ACTOR_ID,
AUTH_USER_EMAIL,
AUTH_USER_ID,
AUTH_USER_ROLE,
} from '@/constants';
2019-08-13 08:43:37 +02:00
import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
import { ICurrentUser } from '@/types/current-user.model';
import Footer from '@/components/Footer.vue';
import Logo from '@/components/Logo.vue';
import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IPerson } from '@/types/actor';
import { changeIdentity, saveActorData } from '@/utils/auth';
2019-08-13 08:43:37 +02:00
@Component({
2019-01-18 14:47:10 +01:00
apollo: {
currentUser: {
query: CURRENT_USER_CLIENT,
},
2019-01-18 14:47:10 +01:00
},
2018-12-21 17:10:39 +01:00
components: {
Logo,
NavBar,
'mobilizon-footer': Footer,
},
2018-12-21 17:10:39 +01:00
})
export default class App extends Vue {
async created() {
await this.initializeCurrentUser();
await this.initializeCurrentActor();
}
2019-01-18 14:47:10 +01:00
private initializeCurrentUser() {
const userId = localStorage.getItem(AUTH_USER_ID);
const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
2019-08-12 16:04:16 +02:00
const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
const role = localStorage.getItem(AUTH_USER_ROLE);
2019-01-18 14:47:10 +01:00
if (userId && userEmail && accessToken && role) {
2019-01-18 14:47:10 +01:00
return this.$apollo.mutate({
mutation: UPDATE_CURRENT_USER_CLIENT,
variables: {
id: userId,
email: userEmail,
isLoggedIn: true,
role,
2019-01-18 14:47:10 +01:00
},
});
}
}
/**
* We fetch from localStorage the latest actor ID used,
* then fetch the current identities to set in cache
* the current identity used
*/
private async initializeCurrentActor() {
const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID);
const result = await this.$apollo.query({
query: IDENTITIES,
});
const identities = result.data.identities;
if (identities.length < 1) return;
const activeIdentity = identities.find(identity => identity.id === actorId) || identities[0] as IPerson;
if (activeIdentity) {
return await changeIdentity(this.$apollo.provider.defaultClient, activeIdentity);
}
}
2018-12-21 17:10:39 +01:00
}
</script>
<style lang="scss">
2019-08-13 08:43:37 +02:00
@import "variables";
2019-08-13 08:43:37 +02:00
/* Bulma imports */
2019-08-26 12:21:23 +02:00
@import "~bulma/sass/utilities/_all";
2019-08-13 08:43:37 +02:00
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/components/card.sass";
@import "~bulma/sass/components/media.sass";
@import "~bulma/sass/components/message.sass";
@import "~bulma/sass/components/modal.sass";
@import "~bulma/sass/components/navbar.sass";
@import "~bulma/sass/components/pagination.sass";
@import "~bulma/sass/components/dropdown.sass";
@import "~bulma/sass/components/breadcrumb.sass";
@import "~bulma/sass/components/list.sass";
2019-08-13 08:43:37 +02:00
@import "~bulma/sass/elements/box.sass";
@import "~bulma/sass/elements/button.sass";
@import "~bulma/sass/elements/container.sass";
@import "~bulma/sass/form/_all";
@import "~bulma/sass/elements/icon.sass";
@import "~bulma/sass/elements/image.sass";
@import "~bulma/sass/elements/other.sass";
@import "~bulma/sass/elements/tag.sass";
@import "~bulma/sass/elements/title.sass";
@import "~bulma/sass/elements/notification";
@import "~bulma/sass/elements/table";
2019-08-13 08:43:37 +02:00
@import "~bulma/sass/grid/_all.sass";
@import "~bulma/sass/layout/_all.sass";
2019-08-13 08:43:37 +02:00
/* Buefy imports */
@import "~buefy/src/scss/utils/_all";
@import "~buefy/src/scss/components/datepicker";
@import "~buefy/src/scss/components/notices";
@import "~buefy/src/scss/components/dropdown";
@import "~buefy/src/scss/components/autocomplete";
@import "~buefy/src/scss/components/form";
@import "~buefy/src/scss/components/modal";
@import "~buefy/src/scss/components/tag";
@import "~buefy/src/scss/components/taginput";
@import "~buefy/src/scss/components/upload";
@import "~buefy/src/scss/components/radio";
@import "~buefy/src/scss/components/switch";
@import "~buefy/src/scss/components/table";
.router-enter-active,
.router-leave-active {
transition-property: opacity;
transition-duration: 0.25s;
}
.router-enter-active {
transition-delay: 0.25s;
}
.router-enter,
.router-leave-active {
opacity: 0;
}
body {
background: #f6f7f8;
}
</style>