mobilizon/js/src/App.vue

149 lines
3.4 KiB
Vue
Raw Normal View History

<template>
<div id="mobilizon">
<NavBar />
<div v-if="config && config.demoMode">
<b-message
class="container"
type="is-danger"
:title="$t('Warning').toLocaleUpperCase()"
closable
aria-close-label="Close"
>
<p>
{{ $t("This is a demonstration site to test Mobilizon.") }}
<b>{{ $t("Please do not use it in any real way.") }}</b>
{{
$t(
"This website isn't moderated and the data that you enter will be automatically destroyed every day at 00:01 (Paris timezone)."
)
}}
</p>
</b-message>
</div>
<error v-if="error" :error="error" />
<main v-else>
<transition name="fade" mode="out-in">
<router-view />
</transition>
</main>
<mobilizon-footer />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import NavBar from "./components/NavBar.vue";
import {
AUTH_ACCESS_TOKEN,
AUTH_USER_EMAIL,
AUTH_USER_ID,
AUTH_USER_ROLE,
} from "./constants";
import {
CURRENT_USER_CLIENT,
UPDATE_CURRENT_USER_CLIENT,
} from "./graphql/user";
import Footer from "./components/Footer.vue";
import Logo from "./components/Logo.vue";
import { initializeCurrentActor } from "./utils/auth";
import { CONFIG } from "./graphql/config";
import { IConfig } from "./types/config.model";
import { ICurrentUser } from "./types/current-user.model";
2019-08-13 08:43:37 +02:00
@Component({
2019-01-18 14:47:10 +01:00
apollo: {
currentUser: CURRENT_USER_CLIENT,
config: CONFIG,
2019-01-18 14:47:10 +01:00
},
2018-12-21 17:10:39 +01:00
components: {
Logo,
NavBar,
error: () =>
import(/* webpackChunkName: "editor" */ "./components/Error.vue"),
"mobilizon-footer": Footer,
},
metaInfo() {
return {
titleTemplate: "%s | Mobilizon",
};
},
2018-12-21 17:10:39 +01:00
})
export default class App extends Vue {
config!: IConfig;
currentUser!: ICurrentUser;
error: Error | null = null;
online = true;
async created(): Promise<void> {
if (await this.initializeCurrentUser()) {
await initializeCurrentActor(this.$apollo.provider.defaultClient);
}
}
errorCaptured(error: Error): void {
this.error = error;
}
private async initializeCurrentUser() {
2019-01-18 14:47:10 +01:00
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) {
return this.$apollo.mutate({
2019-01-18 14:47:10 +01:00
mutation: UPDATE_CURRENT_USER_CLIENT,
variables: {
id: userId,
email: userEmail,
isLoggedIn: true,
role,
2019-01-18 14:47:10 +01:00
},
});
}
return false;
}
mounted(): void {
this.online = window.navigator.onLine;
window.addEventListener("offline", () => {
this.online = false;
this.showOfflineNetworkWarning();
console.log("offline");
});
window.addEventListener("online", () => {
this.online = true;
console.log("online");
});
}
showOfflineNetworkWarning(): void {
this.$notifier.error(this.$t("You are offline") as string);
}
2018-12-21 17:10:39 +01:00
}
</script>
<style lang="scss">
2019-08-13 08:43:37 +02:00
@import "variables";
/* Icons */
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons";
@import "common";
#mobilizon {
min-height: 100vh;
display: flex;
flex-direction: column;
main {
flex-grow: 1;
}
}
</style>