hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Change models, new migrations, fix front and make tests work

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2018-01-13 23:33:03 +01:00
parent 92d2045735
commit 20cd1bb579
186 changed files with 2982 additions and 3214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
js/src/App.vue
View File

@@ -76,7 +76,6 @@
<script>
import auth from '@/auth/index';
import NavBar from '@/components/NavBar';
export default {
@@ -105,15 +104,7 @@ export default {
show_new_event_button: false,
};
},
created() {
this.checkAuthMethod();
},
methods: {
checkAuthMethod() {
if (auth.checkAuth(this.$store)) {
this.show_new_event_button = true;
}
},
showMenuItem(elem) {
return elem !== null && this.$store.state.user && this.$store.state.user.roles !== undefined ? this.$store.state.user.roles.includes(elem) : true;
},

2
js/src/api/eventFetch.js
View File

@@ -1,6 +1,6 @@
import { API_HOST, API_PATH } from './_entrypoint';
const jsonLdMimeType = 'application/ld+json';
const jsonLdMimeType = 'application/json';
export default function eventFetch(url, store, optionsarg = {}) {
const options = optionsarg;

103
js/src/auth/index.js
View File

@@ -1,87 +1,61 @@
import router from '../router/index';
import { API_HOST, API_PATH } from '../api/_entrypoint';
// URL and endpoint constants
const LOGIN_URL = `${API_HOST}${API_PATH}/login`;
const SIGNUP_URL = `${API_HOST}${API_PATH}/users/`;
const CHECK_AUTH = `${API_HOST}${API_PATH}/users/`;
const CHECK_AUTH = `${API_HOST}${API_PATH}/user/`;
const REFRESH_TOKEN = `${API_HOST}${API_PATH}/token/refresh`;
function AuthError(field, message) {
this.field = field;
this.message = message;
}
AuthError.prototype.toString = function AuthErrorToString() {
return `AuthError: ${this.message}`;
};
export default {
// User object will let us check authentication status
user: false,
authenticated: false,
token: false,
// Send a request to the login URL and save the returned JWT
login(creds, $store, redirect, error) {
login(creds, success, error) {
fetch(LOGIN_URL, { method: 'POST', body: creds, headers: { 'Content-Type': 'application/json' } })
.then(response => response.json())
.then((data) => {
if (data.code >= 300) {
throw new AuthError(null, data.message);
.then((response) => {
if (response.status === 200) {
return response.json();
}
$store.commit('LOGIN_USER');
throw response.json();
})
.then((data) => {
localStorage.setItem('token', data.token);
localStorage.setItem('refresh_token', data.refresh_token);
this.getUser(
$store,
() => router.push(redirect)
);
}).catch((err) => {
error(err);
});
// localStorage.setItem('refresh_token', data.refresh_token);
return success(data);
})
.catch(err => error(err));
},
signup(creds, $store, redirect, error) {
signup(creds, success, error) {
fetch(SIGNUP_URL, { method: 'POST', body: creds, headers: { 'Content-Type': 'application/json' } })
.then(response => response.json())
.then((response) => {
if (response.status === 200) {
return response.json();
}
throw response.json();
})
.then((data) => {
if (data.error) {
throw new AuthError(data.error.field, data.error.message);
}
$store.commit('LOGIN_USER');
localStorage.setItem('token', data.token);
localStorage.setItem('refresh_token', data.refresh_token);
// localStorage.setItem('refresh_token', data.refresh_token);
if (redirect) {
router.push(redirect);
}
}).catch((err) => {
error(err);
});
return success(data);
}).catch(err => error(err));
},
refreshToken(store, successHandler, errorHandler) {
const refreshToken = localStorage.getItem('refresh_token');
console.log("We are refreshing the jwt token");
fetch(REFRESH_TOKEN, { method: 'POST', body: JSON.stringify({refresh_token: refreshToken}), headers: { 'Content-Type': 'application/json' }})
console.log('We are refreshing the jwt token');
fetch(REFRESH_TOKEN, { method: 'POST', body: JSON.stringify({ refresh_token: refreshToken }), headers: { 'Content-Type': 'application/json' } })
.then((response) => {
if (response.ok) {
return response.json();
} else {
errorHandler('Error while authenticating');
}
return errorHandler('Error while authenticating');
})
.then((response) => {
console.log("We have a new token");
console.log('We have a new token');
this.authenticated = true;
store.commit('LOGIN_USER', response);
localStorage.setItem('token', response.token);
console.log("Let's try to auth again");
this.getUser(store, successHandler, errorHandler);
successHandler();
});
},
@@ -114,19 +88,8 @@ export default {
return expirationDate < new Date();
},
checkAuth(store = null) {
const token = localStorage.getItem('token');
if (store && token) {
this.getUser(store,() => null, () => null);
}
/* if (!!token && store && !this.isTokenExpired(token)) {
this.refreshToken(store, () => null, () => null);
} */
return !!token;
},
getUser(store, successHandler, errorHandler) {
console.log("We are checking the auth");
console.log('We are checking the auth');
this.token = localStorage.getItem('token');
const options = {};
options.headers = new Headers();
@@ -135,16 +98,14 @@ export default {
.then((response) => {
if (response.ok) {
return response.json();
} else {
errorHandler('Error while authenticating');
}
})
.then((response) => {
return errorHandler('Error while authenticating');
}).then((response) => {
this.authenticated = true;
console.log(response);
store.commit('SAVE_USER', response);
successHandler();
});
store.commit('LOAD_USER', response.data);
return successHandler();
});
},
// The object to be passed as a header for authenticated requests

22
js/src/components/Account/Account.vue
View File

@@ -29,11 +29,16 @@
:src="account.avatarRemoteUrl"
>
</v-avatar>
<v-card-title class="pl-5 pt-5">
<div class="display-1 pl-5 pt-5">@{{ account.username }}<span v-if="account.server">@{{ account.server.address }}</span></div>
</v-card-title>
<v-card-text v-if="account.description" v-html="account.description"></v-card-text>
</div>
<v-container fluid grid-list-lg>
<v-layout row>
<v-flex xs7>
<div class="headline">{{ account.display_name }}</div>
<div><span class="subheading">@{{ account.username }}</span><span v-if="account.server">@{{ account.server.address }}</span></div>
<v-card-text v-if="account.description" v-html="account.description"></v-card-text>
</v-flex>
</v-layout>
</v-container>
</v-layout>
<v-list three-line>
<v-list-tile>
@@ -69,7 +74,7 @@
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-container fluid grid-list-md v-if="account.participatingEvents.length > 0">
<v-container fluid grid-list-md v-if="account.participatingEvents && account.participatingEvents.length > 0">
<v-subheader>Participated at</v-subheader>
<v-layout row wrap>
<v-flex v-for="event in account.participatingEvents" :key="event.id">
@@ -110,7 +115,7 @@
</v-flex>
</v-layout>
</v-container>
<v-container fluid grid-list-md v-if="account.organizingEvents.length > 0">
<v-container fluid grid-list-md v-if="account.organizingEvents && account.organizingEvents.length > 0">
<v-subheader>Organized events</v-subheader>
<v-layout row wrap>
<v-flex v-for="event in account.organizingEvents" :key="event.id">
@@ -178,11 +183,12 @@ export default {
},
methods: {
fetchData() {
eventFetch('/accounts/' + this.id, this.$store)
eventFetch(`/accounts/${this.id}`, this.$store)
.then(response => response.json())
.then((response) => {
this.account = response;
this.account = response.data;
this.loading = false;
console.log(this.account);
})
}
}

19
js/src/components/Category/Create.vue
View File

@@ -4,11 +4,10 @@
<v-form>
<v-text-field
label="Name of the category"
v-model="category.name"
v-model="category.title"
:counter="100"
required
></v-text-field>
<input type="file" @change="processFile($event.target)">
</v-form>
<v-btn color="primary" @click="create">Create category</v-btn>
</div>
@@ -22,32 +21,20 @@
data() {
return {
category: {
name: '',
imageDataUri: null,
title: '',
},
};
},
methods: {
create() {
const router = this.$router;
eventFetch('/categories', this.$store, { method: 'POST', body: JSON.stringify(this.category) })
eventFetch('/categories', this.$store, { method: 'POST', body: JSON.stringify({ category: this.category }) })
.then(response => response.json())
.then(() => {
this.loading = false;
router.push('/category')
});
},
processFile(target) {
const reader = new FileReader();
const file = target.files[0];
reader.addEventListener('load', () => {
this.category.imageDataUri = reader.result;
});
if (file) {
reader.readAsDataURL(file);
}
}
},
};
</script>

6
js/src/components/Category/List.vue
View File

@@ -11,7 +11,7 @@
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ category.name }}</h3>
<h3 class="headline mb-0">{{ category.title }}</h3>
<div>{{ category.description }}</div>
</div>
</v-card-title>
@@ -49,9 +49,9 @@
fetchData() {
eventFetch('/categories', this.$store)
.then(response => response.json())
.then((data) => {
.then((response) => {
this.loading = false;
this.categories = data['hydra:member'];
this.categories = response.data;
});
},
deleteCategory(categoryId) {

24
js/src/components/Event/Create.vue
View File

@@ -36,7 +36,7 @@
<v-select
v-bind:items="categories"
v-model="event.category"
item-text="name"
item-text="title"
item-value="@id"
label="Categories"
single-line
@@ -62,7 +62,7 @@
<v-stepper-step step="2" :complete="e1 > 2">Date and place</v-stepper-step>
<v-stepper-content step="2">
Event starts at:
<v-text-field type="datetime-local" v-model="event.startDate"></v-text-field>
<v-text-field type="datetime-local" v-model="event.begins_on"></v-text-field>
<!--<v-layout row wrap>
<v-flex md6>
<v-dialog
@@ -113,7 +113,7 @@
</v-flex>
</v-layout>-->
Event ends at:
<v-text-field type="datetime-local" v-model="event.endDate"></v-text-field>
<v-text-field type="datetime-local" v-model="event.ends_on"></v-text-field>
<!--<v-layout row wrap>
<v-flex md6>
<v-dialog
@@ -216,8 +216,8 @@
event: {
title: '',
description: '',
startDate: new Date(),
endDate: new Date(),
begins_on: new Date(),
ends_on: new Date(),
seats: 0,
address: {
description: null,
@@ -261,12 +261,12 @@
// '@type': 'Tag',
});
});
this.event.organizer = "/accounts/" + this.$store.state.user.account.id;
this.event.participants = ["/accounts/" + this.$store.state.user.account.id];
this.event.organizer_id = this.$store.state.user.account.id;
this.event.participants = [this.$store.state.user.account.id];
this.event.price = parseFloat(this.event.price);
if (this.id === undefined) {
eventFetch('/events', this.$store, {method: 'POST', body: JSON.stringify(this.event)})
eventFetch('/events', this.$store, {method: 'POST', body: JSON.stringify({ event: this.event })})
.then(response => response.json())
.then((data) => {
this.loading = false;
@@ -284,17 +284,17 @@
fetchCategories() {
eventFetch('/categories', this.$store)
.then(response => response.json())
.then((data) => {
.then((response) => {
this.loading = false;
this.categories = data['hydra:member'];
this.categories = response.data;
});
},
fetchTags() {
eventFetch('/tags', this.$store)
.then(response => response.json())
.then((data) => {
.then((response) => {
this.loading = false;
data['hydra:member'].forEach((tag) => {
response.data.forEach((tag) => {
this.tagsFetched.push(tag.name);
});
});

6
js/src/components/Event/EventList.vue
View File

@@ -26,7 +26,7 @@
<div class="headline">{{ event.title }}</div>
</v-card-title>
<v-container>
<span class="grey--text">{{ event.startDate | formatDate }} à <router-link :to="{name: 'EventList', params: {location: geocode(event.address.geo.latitude, event.address.geo.longitude, 10) }}">{{ event.address.addressLocality }}</router-link></span><br>
<!--<span class="grey&#45;&#45;text">{{ event.startDate | formatDate }} à <router-link :to="{name: 'EventList', params: {location: geocode(event.address.geo.latitude, event.address.geo.longitude, 10) }}">{{ event.address.addressLocality }}</router-link></span><br>-->
<p><vue-markdown>{{ event.description }}</vue-markdown></p>
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
</v-container>
@@ -93,9 +93,9 @@
this.locationChip = true;
eventFetch(queryString, this.$store)
.then(response => response.json())
.then((data) => {
.then((response) => {
this.loading = false;
this.events = data['hydra:member'];
this.events = response.data;
});
},
deleteEvent(id) {

2
js/src/components/Group/Create.vue
View File

@@ -98,7 +98,7 @@
.then(response => response.json())
.then((data) => {
this.loading = false;
this.categories = data['hydra:member'];
this.categories = data;
});
},
getAddressData: function (addressData) {

2
js/src/components/Group/GroupList.vue
View File

@@ -58,7 +58,7 @@
.then(response => response.json())
.then((data) => {
this.loading = false;
this.groups = data['hydra:member'];
this.groups = data;
});
},
deleteEvent(id) {

9
js/src/components/Home.vue
View File

@@ -1,6 +1,6 @@
<template>
<v-container>
<h1 class="welcome" v-if="$store.state.user">{{ $t("home.welcome", { 'username': $store.state.user.username}) }}</h1>
<h1 class="welcome" v-if="$store.state.user">{{ $t("home.welcome", { 'username': this.displayed_name }) }}</h1>
<h1 class="welcome" v-else>{{ $t("home.welcome_off", { 'username': $store.state.user.username}) }}</h1>
<router-link :to="{ name: 'EventList' }">{{ $t('home.events') }}</router-link>
<router-link v-if="$store.state.user === false" :to="{ name: 'Login' }">{{ $t('home.login') }}</router-link>
@@ -48,12 +48,17 @@ export default {
mounted() {
// this.fetchLocations();
},
computed: {
displayed_name: function() {
return this.$store.state.user.account.display_name === null ? this.$store.state.user.account.username : this.$store.state.user.account.display_name
},
},
methods: {
fetchLocations() {
eventFetch('/locations', this.$store)
.then((response) => (response.json()))
.then((response) => {
this.locations = response['hydra:member'];
this.locations = response;
});
},
geoLocalize() {

17
js/src/components/Login.vue
View File

@@ -65,10 +65,19 @@
methods: {
loginAction(e) {
e.preventDefault();
auth.login(JSON.stringify(this.credentials), this.$store, '/', (error) => {
this.error.show = true;
this.error.text = error.message;
this.error.field[error.field] = true;
auth.login(JSON.stringify(this.credentials), (data) => {
this.$store.commit('LOGIN_USER', data.user);
this.$router.push({ name: 'Home' });
}, (error) => {
Promise.resolve(error).then((errorMsg) => {
console.log(errorMsg);
this.error.show = true;
this.error.text = this.$t(errorMsg.display_error);
}).catch((e) => {
console.log(e);
this.error.show = true;
this.error.text = e.message;
});
});
},
},

7
js/src/components/NavBar.vue
View File

@@ -58,7 +58,7 @@
</v-card-actions>
</v-card>
</v-menu>
<v-btn flat @click="$router.push({name: 'Account', params: {'id': getUser().account.id}})" v-if="$store.state.isLogged && getUser()">{{ getUser().username }}</v-btn>
<v-btn flat @click="$router.push({name: 'Account', params: {'id': getUser().account.id}})" v-if="$store.state.user">{{ this.displayed_name }}</v-btn>
</v-toolbar>
</template>
@@ -95,6 +95,11 @@
}
}
},
computed: {
displayed_name: function() {
return this.$store.state.user.account.display_name === null ? this.$store.state.user.account.username : this.$store.state.user.account.display_name
},
},
methods: {
getUser() {
return this.$store.state.user === undefined ? false : this.$store.state.user;

6
js/src/components/Register.vue
View File

@@ -72,7 +72,11 @@
methods: {
registerAction(e) {
e.preventDefault();
auth.signup(JSON.stringify(this.credentials), this.$store, {name: 'Home'}, (error) => {
auth.signup(JSON.stringify(this.credentials), (response) => {
console.log(response);
this.$store.commit('LOGIN_USER', response.user);
this.$router.push({ name: 'Home' });
}, (error) => {
this.error.show = true;
this.error.text = error.message;
this.error.field[error.field] = true;

5
js/src/i18n/fr.js
View File

@@ -12,4 +12,9 @@ export default {
title: "Votre liste d'événements",
},
},
session: {
error: {
bad_login: 'Erreur lors de la connexion : Votre nom d\'utilisateur ou votre mot de passe est incorrect',
},
},
};

18
js/src/main.js
View File

@@ -10,8 +10,9 @@ import VuexI18n from 'vuex-i18n';
import 'vuetify/dist/vuetify.min.css';
import App from '@/App';
import router from '@/router';
import storeData from './store/index';
import translations from './i18n/index';
import storeData from '@/store/index';
import translations from '@/i18n/index';
import auth from '@/auth';
Vue.config.productionTip = false;
@@ -46,6 +47,19 @@ Object.entries(translations).forEach((key) => {
Vue.i18n.set(language);
Vue.i18n.fallback('en');
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiredAuth) && store.state.user === undefined || store.state.user == null) {
next({
name: 'Login',
query: { redirect: to.fullPath }
});
} else {
next();
}
});
auth.getUser(store, () => {}, () => {});
/* eslint-disable no-new */
new Vue({
el: '#app',

13
js/src/router/index.js
View File

@@ -14,7 +14,6 @@ import Account from '@/components/Account/Account';
import CreateGroup from '@/components/Group/Create';
import Group from '@/components/Group/Group';
import GroupList from '@/components/Group/GroupList';
import Auth from '@/auth/index';
Vue.use(Router);
@@ -118,16 +117,4 @@ const router = new Router({
],
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiredAuth) && !Auth.checkAuth()) {
console.log('needs login');
next({
path: '/',
query: { redirect: to.fullPath }
});
} else {
next();
}
});
export default router;

15
js/src/store/index.js
View File

@@ -1,21 +1,26 @@
import { LOGIN_USER, LOGOUT_USER, SAVE_USER } from './mutation-types';
import { LOGIN_USER, LOGOUT_USER, LOAD_USER } from './mutation-types';
const state = {
isLogged: !!localStorage.getItem('token'),
user: false,
};
/* eslint-disable */
const mutations = {
[LOGIN_USER](state) {
[LOGIN_USER](state, user) {
state.isLogged = true;
state.user = user;
},
[LOAD_USER](state, user) {
state.user = user;
},
[LOGOUT_USER](state) {
state.isLogged = false;
},
[SAVE_USER](state, user) {
state.user = user;
state.user = null;
},
};
/* eslint-enable */
export default { state, mutations };

2
js/src/store/mutation-types.js
View File

@@ -1,3 +1,3 @@
export const LOGIN_USER = 'LOGIN_USER';
export const LOAD_USER = 'LOAD_USER';
export const LOGOUT_USER = 'LOGOUT_USER';
export const SAVE_USER = 'SAVE_USER';