mobilizon/js/src/App.vue
Thomas Citharel 646f298e0b
Position the footer on the bottom of the screen
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2020-10-09 18:13:15 +02:00

127 lines
3.2 KiB
Vue

<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
v-html="
`${$t('This is a demonstration site to test the beta version of Mobilizon.')} ${$t(
'<b>Please do not use it in any real way.</b>'
)}`
"
/>
<p>
<span
v-html="
$t(
'Mobilizon is under development, we will add new features to this site during regular updates, until the release of <b>version 1 of the software in the fall of 2020</b>.'
)
"
/>
<i18n
path="In the meantime, please consider that the software is not (yet) finished. More information {onBlog}."
>
<a
slot="onBlog"
:href="
$i18n.locale === 'fr'
? 'https://framablog.org/?p=18268'
: 'https://framablog.org/?p=18299'
"
>{{ $t("on our blog") }}</a
>
</i18n>
</p>
</b-message>
</div>
<main>
<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";
@Component({
apollo: {
currentUser: CURRENT_USER_CLIENT,
config: CONFIG,
},
components: {
Logo,
NavBar,
"mobilizon-footer": Footer,
},
})
export default class App extends Vue {
config!: IConfig;
currentUser!: ICurrentUser;
async created(): Promise<void> {
if (await this.initializeCurrentUser()) {
await initializeCurrentActor(this.$apollo.provider.defaultClient);
}
}
private async initializeCurrentUser() {
const userId = localStorage.getItem(AUTH_USER_ID);
const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
const role = localStorage.getItem(AUTH_USER_ROLE);
if (userId && userEmail && accessToken && role) {
return this.$apollo.mutate({
mutation: UPDATE_CURRENT_USER_CLIENT,
variables: {
id: userId,
email: userEmail,
isLoggedIn: true,
role,
},
});
}
return false;
}
}
</script>
<style lang="scss">
@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>