2018-01-09 17:52:26 +01:00
< template >
2019-01-21 15:08:22 +01:00
< div id = "mobilizon" >
2019-04-03 17:29:03 +02:00
< NavBar / >
2019-11-21 16:07:43 +01:00
< div class = "container" v-if ="config && config.demoMode" >
2020-02-18 08:57:00 +01:00
< b -message
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>'
) } `
"
/ >
2019-10-11 09:42:51 +02:00
< p >
2020-02-18 08:57:00 +01:00
< span
v - html = "
$t (
2020-06-10 09:08:10 +02:00
'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>.'
2020-02-18 08:57:00 +01:00
)
"
/ >
< 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
>
2019-10-11 09:42:51 +02:00
< / i18n >
< / p >
< / b - m e s s a g e >
< / div >
2019-10-01 20:10:53 +02:00
< main >
2019-10-08 22:27:14 +02:00
< transition name = "fade" mode = "out-in" >
2019-10-08 20:01:00 +02:00
< router -view / >
< / transition >
2019-01-21 15:08:22 +01:00
< / main >
2019-04-03 17:29:03 +02:00
< mobilizon -footer / >
2019-01-21 15:08:22 +01:00
< / div >
2018-01-09 17:52:26 +01:00
< / template >
2018-12-21 15:41:34 +01:00
< script lang = "ts" >
2020-02-18 08:57:00 +01:00
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" ;
2020-06-11 10:58:23 +02:00
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 : {
2020-06-11 10:58:23 +02:00
currentUser : CURRENT _USER _CLIENT ,
2019-11-21 16:07:43 +01:00
config : CONFIG ,
2019-01-18 14:47:10 +01:00
} ,
2018-12-21 17:10:39 +01:00
components : {
2019-04-03 17:29:03 +02:00
Logo ,
2019-03-22 10:57:14 +01:00
NavBar ,
2020-02-18 08:57:00 +01:00
"mobilizon-footer" : Footer ,
2019-03-22 10:57:14 +01:00
} ,
2018-12-21 17:10:39 +01:00
} )
export default class App extends Vue {
2019-11-21 16:07:43 +01:00
config ! : IConfig ;
2020-06-11 10:58:23 +02:00
currentUser ! : ICurrentUser ;
2019-11-21 16:07:43 +01:00
2019-09-11 09:59:01 +02:00
async created ( ) {
2019-09-18 17:32:37 +02:00
if ( await this . initializeCurrentUser ( ) ) {
await initializeCurrentActor ( this . $apollo . provider . defaultClient ) ;
}
2018-12-21 15:41:34 +01:00
}
2019-09-18 17:32:37 +02:00
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 ) ;
2019-09-09 09:31:08 +02:00
const role = localStorage . getItem ( AUTH _USER _ROLE ) ;
2019-01-18 14:47:10 +01:00
2019-09-09 09:31:08 +02:00
if ( userId && userEmail && accessToken && role ) {
2020-02-18 08:57:00 +01:00
return this . $apollo . mutate ( {
2019-01-18 14:47:10 +01:00
mutation : UPDATE _CURRENT _USER _CLIENT ,
variables : {
id : userId ,
email : userEmail ,
2019-04-01 11:49:54 +02:00
isLoggedIn : true ,
2019-09-09 09:31:08 +02:00
role ,
2019-01-18 14:47:10 +01:00
} ,
} ) ;
}
2019-09-18 17:32:37 +02:00
return false ;
2019-09-11 09:59:01 +02:00
}
2018-12-21 17:10:39 +01:00
}
2018-01-09 17:52:26 +01:00
< / script >
2019-04-03 17:29:03 +02:00
< style lang = "scss" >
2019-08-13 08:43:37 +02:00
@ import "variables" ;
2019-04-03 17:29:03 +02:00
2019-08-13 08:43:37 +02:00
/* Bulma imports */
2019-09-26 16:38:58 +02:00
@ import "~bulma/bulma" ;
2020-02-18 08:57:00 +01:00
@ import "~bulma-divider" ;
2019-05-17 16:28:15 +02:00
2019-08-13 08:43:37 +02:00
/* Buefy imports */
2019-09-26 16:38:58 +02:00
@ import "~buefy/src/scss/buefy" ;
2019-04-03 17:29:03 +02:00
2019-10-09 17:54:35 +02:00
/* Icons */
$mdi - font - path : "~@mdi/font/fonts" ;
@ import "~@mdi/font/scss/materialdesignicons" ;
2020-06-17 15:54:24 +02:00
@ import "common" ;
2020-02-18 08:57:00 +01:00
. fade - enter - active ,
. fade - leave - active {
transition : opacity 0.5 s ;
2019-01-21 15:08:22 +01:00
}
2020-02-18 08:57:00 +01:00
. fade - enter ,
. fade - leave - to {
2019-01-21 15:08:22 +01:00
opacity : 0 ;
}
2019-04-03 17:29:03 +02:00
2020-02-18 08:57:00 +01:00
body {
// background: #f7f8fa;
background : $body - background - color ;
2020-06-08 12:28:19 +02:00
font - family : BlinkMacSystemFont , Roboto , Oxygen , Ubuntu , Cantarell , "Segoe UI" , "Fira Sans" ,
2020-02-18 08:57:00 +01:00
"Droid Sans" , "Helvetica Neue" , Helvetica , Arial , sans - serif ;
2019-10-13 18:21:35 +02:00
2020-02-18 08:57:00 +01:00
/*main {*/
/* margin: 1rem auto 0;*/
/*}*/
}
2019-10-14 14:25:08 +02:00
2020-02-18 08:57:00 +01:00
# mobilizon > . container > . message {
margin : 1 rem auto auto ;
. message - header {
button . delete {
background : # 4 a4a4a ;
2019-10-14 14:25:08 +02:00
}
2019-10-13 18:21:35 +02:00
}
2020-02-18 08:57:00 +01:00
}
2018-01-09 17:52:26 +01:00
< / style >