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

Refactor router

Browse Source
This commit is contained in:
Chocobozzz
2019-02-22 14:55:47 +01:00
committed by Thomas Citharel
parent d73f738b1b
commit 53cb39350a
19 changed files with 316 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,7 +50,8 @@ import { CURRENT_USER_CLIENT } from "@/graphql/user";
import { onLogout } from "@/vue-apollo";
import { deleteUserData } from "@/utils/auth";
import { LOGGED_PERSON } from "@/graphql/actor";
import { IPerson } from "../types/actor.model";
import { IActor, IPerson } from '../types/actor.model';
import { RouteName } from '@/router'
@Component({
apollo: {
@@ -100,25 +101,26 @@ export default class NavBar extends Vue {
});
}
@Watch("model")
@Watch('model')
onModelChanged(val) {
switch (val.__typename) {
case "Event":
this.$router.push({ name: "Event", params: { uuid: val.uuid } });
case 'Event':
this.$router.push({ name: RouteName.EVENT, params: { uuid: val.uuid } });
break;
case "Actor":
case 'Actor':
this.$router.push({
name: "Profile",
params: { name: this.username_with_domain(val) }
name: RouteName.PROFILE,
params: { name: this.usernameWithDomain(val) },
});
break;
}
}
username_with_domain(actor) {
usernameWithDomain(actor: IActor) {
return (
actor.preferredUsername +
(actor.domain === null ? "" : `@${actor.domain}`)
(actor.domain === null ? '' : `@${actor.domain}`)
);
}
@@ -128,7 +130,7 @@ export default class NavBar extends Vue {
}
logout() {
alert("logout !");
alert('logout !');
deleteUserData();

48
js/src/router/actor.ts Normal file
View File

@@ -0,0 +1,48 @@
import Profile from '@/views/Account/Profile.vue';
import CreateGroup from '@/views/Group/Create.vue';
import Group from '@/views/Group/Group.vue';
import GroupList from '@/views/Group/GroupList.vue';
import Identities from '@/views/Account/Identities.vue';
export enum ActorRouteName {
IDENTITIES = 'Identities',
GROUP_LIST = 'GroupList',
GROUP = 'Group',
CREATE_GROUP = 'CreateGroup',
PROFILE = 'Profile',
}
export const actorRoutes = [
{
path: '/identities',
name: ActorRouteName.IDENTITIES,
component: Identities,
meta: { requiredAuth: true },
},
{
path: '/groups',
name: ActorRouteName.GROUP_LIST,
component: GroupList,
meta: { requiredAuth: false },
},
{
path: '/groups/create',
name: ActorRouteName.CREATE_GROUP,
component: CreateGroup,
meta: { requiredAuth: true },
},
{
path: '/~:name',
name: ActorRouteName.GROUP,
component: Group,
props: true,
meta: { requiredAuth: false },
},
{
path: '/@:name',
name: ActorRouteName.PROFILE,
component: Profile,
props: true,
meta: { requiredAuth: false },
},
];

22
js/src/router/category.ts Normal file
View File

@@ -0,0 +1,22 @@
import CategoryList from '@/views/Category/List.vue';
import CreateCategory from '@/views/Category/Create.vue';
export enum CategoryRouteName {
CATEGORY_LIST = 'CategoryList',
CREATE_CATEGORY = 'CreateCategory',
}
export const categoryRoutes = [
{
path: '/category',
name: CategoryRouteName.CATEGORY_LIST,
component: CategoryList,
meta: { requiredAuth: false },
},
{
path: '/category/create',
name: CategoryRouteName.CREATE_CATEGORY,
component: CreateCategory,
meta: { requiredAuth: true },
},
];

47
js/src/router/event.ts Normal file
View File

@@ -0,0 +1,47 @@
import EventList from '@/views/Event/EventList.vue';
import Location from '@/views/Location.vue';
import CreateEvent from '@/views/Event/Create.vue';
import Event from '@/views/Event/Event.vue';
export enum EventRouteName {
EVENT_LIST = 'EventList',
CREATE_EVENT = 'CreateEvent',
EDIT_EVENT = 'EditEvent',
EVENT = 'Event',
LOCATION = 'Location',
}
export const eventRoutes = [
{
path: '/events/list/:location?',
name: EventRouteName.EVENT_LIST,
component: EventList,
meta: { requiredAuth: false },
},
{
path: '/events/create',
name: EventRouteName.CREATE_EVENT,
component: CreateEvent,
meta: { requiredAuth: true },
},
{
path: '/events/:id/edit',
name: EventRouteName.EDIT_EVENT,
component: CreateEvent,
props: true,
meta: { requiredAuth: true },
},
{
path: '/location/new',
name: EventRouteName.LOCATION,
component: Location,
meta: { requiredAuth: true },
},
{
path: '/events/:uuid',
name: EventRouteName.EVENT,
component: Event,
props: true,
meta: { requiredAuth: false },
},
];

116
js/src/router/index.ts
View File

@@ -2,111 +2,47 @@ import Vue from 'vue';
import Router from 'vue-router';
import PageNotFound from '@/views/PageNotFound.vue';
import Home from '@/views/Home.vue';
import Event from '@/views/Event/Event.vue';
import EventList from '@/views/Event/EventList.vue';
import Location from '@/views/Location.vue';
import CreateEvent from '@/views/Event/Create.vue';
import CategoryList from '@/views/Category/List.vue';
import CreateCategory from '@/views/Category/Create.vue';
import Profile from '@/views/Account/Profile.vue';
import CreateGroup from '@/views/Group/Create.vue';
import Group from '@/views/Group/Group.vue';
import GroupList from '@/views/Group/GroupList.vue';
import Identities from '@/views/Account/Identities.vue';
import userRoutes from './user';
import { UserRouteName, userRoutes } from './user';
import { EventRouteName, eventRoutes } from '@/router/event';
import { ActorRouteName, actorRoutes } from '@/router/actor';
import { CategoryRouteName, categoryRoutes } from '@/router/category';
Vue.use(Router);
enum GlobalRouteName {
HOME = 'Home',
PAGE_NOT_FOUND = 'PageNotFound',
}
// Hack to merge enums
// tslint:disable:variable-name
export const RouteName = {
...GlobalRouteName,
...UserRouteName,
...EventRouteName,
...CategoryRouteName,
...ActorRouteName,
};
const router = new Router({
mode: 'history',
base: '/',
routes: [
...userRoutes,
...eventRoutes,
...categoryRoutes,
...actorRoutes,
{
path: '/',
name: 'Home',
name: RouteName.HOME,
component: Home,
meta: { requiredAuth: false },
},
{
path: '/events/list/:location?',
name: 'EventList',
component: EventList,
meta: { requiredAuth: false },
},
{
path: '/events/create',
name: 'CreateEvent',
component: CreateEvent,
meta: { requiredAuth: true },
},
{
path: '/events/:id/edit',
name: 'EditEvent',
component: CreateEvent,
props: true,
meta: { requiredAuth: true },
},
{
path: '/location/new',
name: 'Location',
component: Location,
meta: { requiredAuth: true },
},
{
path: '/category',
name: 'CategoryList',
component: CategoryList,
meta: { requiredAuth: false },
},
{
path: '/category/create',
name: 'CreateCategory',
component: CreateCategory,
meta: { requiredAuth: true },
},
{
path: '/identities',
name: 'Identities',
component: Identities,
meta: { requiredAuth: true },
},
{
path: '/groups',
name: 'GroupList',
component: GroupList,
meta: { requiredAuth: false },
},
{
path: '/groups/create',
name: 'CreateGroup',
component: CreateGroup,
meta: { requiredAuth: true },
},
{
path: '/~:name',
name: 'Group',
component: Group,
props: true,
meta: { requiredAuth: false },
},
{
path: '/@:name',
name: 'Profile',
component: Profile,
props: true,
meta: { requiredAuth: false },
},
{
path: '/events/:uuid',
name: 'Event',
component: Event,
props: true,
meta: { requiredAuth: false },
},
{
path: '*',
name: 'PageNotFound',
name: RouteName.PAGE_NOT_FOUND,
component: PageNotFound,
meta: { requiredAuth: false },
},

28
js/src/router/user.ts
View File

@@ -6,53 +6,63 @@ import ResendConfirmation from '@/views/User/ResendConfirmation.vue';
import SendPasswordReset from '@/views/User/SendPasswordReset.vue';
import PasswordReset from '@/views/User/PasswordReset.vue';
export default [
export enum UserRouteName {
REGISTER = 'Register',
REGISTER_PROFILE = 'RegisterProfile',
RESEND_CONFIRMATION = 'ResendConfirmation',
SEND_PASSWORD_RESET = 'SendPasswordReset',
PASSWORD_RESET = 'PasswordReset',
VALIDATE = 'Validate',
LOGIN = 'Login',
}
export const userRoutes = [
{
path: '/register/user',
name: 'Register',
name: UserRouteName.REGISTER,
component: RegisterUser,
props: true,
meta: { requiredAuth: false },
},
{
path: '/register/profile',
name: 'RegisterProfile',
name: UserRouteName.REGISTER_PROFILE,
component: RegisterProfile,
props: true,
meta: { requiredAuth: false },
},
{
path: '/resend-instructions',
name: 'ResendConfirmation',
name: UserRouteName.RESEND_CONFIRMATION,
component: ResendConfirmation,
props: true,
meta: { requiresAuth: false },
},
{
path: '/password-reset/send',
name: 'SendPasswordReset',
name: UserRouteName.SEND_PASSWORD_RESET,
component: SendPasswordReset,
props: true,
meta: { requiresAuth: false },
},
{
path: '/password-reset/:token',
name: 'PasswordReset',
name: UserRouteName.PASSWORD_RESET,
component: PasswordReset,
meta: { requiresAuth: false },
props: true,
},
{
path: '/validate/:token',
name: 'Validate',
name: UserRouteName.VALIDATE,
component: Validate,
// We can only pass string values through params, therefore
props: (route) => ({ email: route.params.email, userAlreadyActivated: route.params.userAlreadyActivated === 'true'}),
props: (route) => ({ email: route.params.email, userAlreadyActivated: route.params.userAlreadyActivated === 'true' }),
meta: { requiresAuth: false },
},
{
path: '/login',
name: 'Login',
name: UserRouteName.LOGIN,
component: Login,
props: true,
meta: { requiredAuth: false },

3
js/src/views/Account/Profile.vue
View File

@@ -69,6 +69,7 @@
import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import EventCard from "@/components/Event/EventCard.vue";
import { RouteName } from '@/router'
@Component({
apollo: {
@@ -101,7 +102,7 @@ export default class Profile extends Vue {
logoutUser() {
// TODO : implement logout
this.$router.push({ name: "Home" });
this.$router.push({ name: RouteName.HOME });
}
nl2br(text) {

25
js/src/views/Account/Register.vue
View File

@@ -80,17 +80,13 @@
</template>
<script lang="ts">
import Gravatar from "vue-gravatar";
import { Component, Prop, Vue } from "vue-property-decorator";
import { IPerson } from "@/types/actor.model";
import { REGISTER_PERSON } from "@/graphql/actor";
import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
import { RouteName } from '@/router'
@Component({
components: {
"v-gravatar": Gravatar
}
})
@Component
export default class Register extends Vue {
@Prop({ type: String, required: true }) email!: string;
@Prop({ type: Boolean, required: false, default: false }) userAlreadyActivated!: boolean;
@@ -98,20 +94,19 @@ export default class Register extends Vue {
host: string = MOBILIZON_INSTANCE_HOST;
person: IPerson = {
preferredUsername: "",
name: "",
summary: "",
id: "",
url: "",
preferredUsername: '',
name: '',
summary: '',
id: '',
url: '',
suspended: false,
avatarUrl: "", // TODO : Use Gravatar here
bannerUrl: "",
avatarUrl: '',
bannerUrl: '',
domain: null,
};
errors: object = {};
validationSent: boolean = false;
sendingValidation: boolean = false;
showGravatar: boolean = false;
async submit() {
try {
@@ -124,7 +119,7 @@ export default class Register extends Vue {
this.validationSent = true;
if (this.userAlreadyActivated) {
this.$router.push({name: "Home"});
this.$router.push({ name: RouteName.HOME });
}
} catch (error) {
this.errors = error.graphQLErrors.reduce((acc, error) => {

3
js/src/views/Event/Event.vue
View File

@@ -99,6 +99,7 @@ import { LOGGED_PERSON } from '@/graphql/actor';
import { IEvent, IParticipant } from '@/types/event.model';
import { JOIN_EVENT } from '@/graphql/event';
import { IPerson } from '@/types/actor.model';
import { RouteName } from '@/router'
// No typings for this component, so we use require
const VueMarkdown = require('vue-markdown');
@@ -140,7 +141,7 @@ export default class Event extends Vue {
}
});
router.push({ name: 'EventList' })
router.push({ name: RouteName.EVENT })
} catch (error) {
console.error(error);
}

17
js/src/views/Event/EventList.vue
View File

@@ -19,10 +19,13 @@
</template>
<script lang="ts">
import ngeohash from "ngeohash";
import VueMarkdown from "vue-markdown";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import EventCard from "@/components/Event/EventCard.vue";
import ngeohash from 'ngeohash';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue';
import { RouteName } from '@/router';
// VueMarkdown is untyped
const VueMarkdown = require('vue-markdown');
@Component({
components: {
@@ -36,7 +39,7 @@ export default class EventList extends Vue {
events = [];
loading = true;
locationChip = false;
locationText = "";
locationText = '';
created() {
this.fetchData(this.$router.currentRoute.params["location"]);
@@ -50,7 +53,7 @@ export default class EventList extends Vue {
@Watch("locationChip")
onLocationChipChange(val) {
if (val === false) {
this.$router.push({ name: "EventList" });
this.$router.push({ name: RouteName.EVENT_LIST });
}
}
@@ -86,7 +89,7 @@ export default class EventList extends Vue {
}
viewEvent(event) {
this.$router.push({ name: "Event", params: { uuid: event.uuid } });
this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
}
downloadIcsEvent(event) {

10
js/src/views/Group/Create.vue
View File

@@ -26,9 +26,11 @@
</template>
<script lang="ts">
import VueMarkdown from "vue-markdown";
import { Component, Vue } from "vue-property-decorator";
// VueMarkdown is untyped
const VueMarkdown = require('vue-markdown')
@Component({
components: {
VueMarkdown
@@ -43,9 +45,9 @@ export default class CreateGroup extends Vue {
summary: string;
address?: any;
} = {
preferred_username: "",
name: "",
summary: ""
preferred_username: '',
name: '',
summary: '',
// category: null,
};
categories = [];

5
js/src/views/Group/GroupList.vue
View File

@@ -19,7 +19,8 @@
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component, Vue } from 'vue-property-decorator';
import { RouteName } from '@/router';
@Component
export default class GroupList extends Vue {
@@ -55,7 +56,7 @@ export default class GroupList extends Vue {
viewActor(actor) {
this.$router.push({
name: "Group",
name: RouteName.GROUP,
params: { name: this.usernameWithDomain(actor) }
});
}

66
js/src/views/Home.vue
View File

@@ -37,15 +37,15 @@
</template>
<script lang="ts">
import ngeohash from "ngeohash";
import { AUTH_USER_ACTOR, AUTH_USER_ID } from "@/constants";
import { FETCH_EVENTS } from "@/graphql/event";
import { Component, Vue } from "vue-property-decorator";
import EventCard from "@/components/Event/EventCard.vue";
import { LOGGED_PERSON } from "@/graphql/actor";
import { IPerson } from "@/types/actor.model";
import { ICurrentUser } from "@/types/current-user.model";
import { CURRENT_USER_CLIENT } from "@/graphql/user";
import ngeohash from 'ngeohash';
import { FETCH_EVENTS } from '@/graphql/event';
import { Component, Vue } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue';
import { LOGGED_PERSON } from '@/graphql/actor';
import { IPerson } from '@/types/actor.model';
import { ICurrentUser } from '@/types/current-user.model';
import { CURRENT_USER_CLIENT } from '@/graphql/user';
import { RouteName } from '@/router';
@Component({
apollo: {
@@ -95,40 +95,44 @@ export default class Home extends Vue {
geoLocalize() {
const router = this.$router;
const sessionCity = sessionStorage.getItem("City");
if (sessionCity) {
router.push({ name: "EventList", params: { location: sessionCity } });
} else {
navigator.geolocation.getCurrentPosition(
pos => {
const crd = pos.coords;
const sessionCity = sessionStorage.getItem('City');
const geohash = ngeohash.encode(crd.latitude, crd.longitude, 11);
sessionStorage.setItem("City", geohash);
router.push({ name: "EventList", params: { location: geohash } });
},
err => console.warn(`ERROR(${err.code}): ${err.message}`),
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
if (sessionCity) {
return router.push({ name: 'EventList', params: { location: sessionCity } });
}
navigator.geolocation.getCurrentPosition(
pos => {
const crd = pos.coords;
const geoHash = ngeohash.encode(crd.latitude, crd.longitude, 11);
sessionStorage.setItem('City', geoHash);
router.push({ name: RouteName.EVENT_LIST, params: { location: geoHash } });
},
err => console.warn(`ERROR(${err.code}): ${err.message}`),
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0,
},
);
}
getAddressData(addressData) {
const geohash = ngeohash.encode(
const geoHash = ngeohash.encode(
addressData.latitude,
addressData.longitude,
11
);
sessionStorage.setItem("City", geohash);
this.$router.push({ name: "EventList", params: { location: geohash } });
sessionStorage.setItem("City", geoHash);
this.$router.push({ name: RouteName.EVENT_LIST, params: { location: geoHash } });
}
viewEvent(event) {
this.$router.push({ name: "Event", params: { uuid: event.uuid } });
this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
}
ipLocation() {

18
js/src/views/User/Login.vue
View File

@@ -53,7 +53,6 @@
</template>
<script lang="ts">
import Gravatar from "vue-gravatar";
import { Component, Prop, Vue } from "vue-property-decorator";
import { LOGIN } from "@/graphql/auth";
import { validateEmailField, validateRequiredField } from "@/utils/validators";
@@ -61,12 +60,9 @@ import { saveUserData } from "@/utils/auth";
import { ILogin } from "@/types/login.model";
import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
import { onLogin } from "@/vue-apollo";
import { RouteName } from '@/router'
@Component({
components: {
"v-gravatar": Gravatar
}
})
@Component
export default class Login extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
@Prop({ type: String, required: false, default: "" }) password!: string;
@@ -85,7 +81,7 @@ export default class Login extends Vue {
beforeCreate() {
if (this.user) {
this.$router.push("/");
this.$router.push('/');
}
}
@@ -119,7 +115,7 @@ export default class Login extends Vue {
onLogin(this.$apollo);
this.$router.push({ name: "Home" });
this.$router.push({ name: RouteName.HOME });
} catch (err) {
console.error(err);
err.graphQLErrors.forEach(({ message }) => {
@@ -127,11 +123,5 @@ export default class Login extends Vue {
});
}
}
validEmail() {
return this.rules.email(this.credentials.email) === true
? "v-gravatar"
: "avatar";
}
}
</script>

3
js/src/views/User/PasswordReset.vue
View File

@@ -40,6 +40,7 @@ import { validateRequiredField } from "@/utils/validators";
import { RESET_PASSWORD } from "@/graphql/auth";
import { saveUserData } from "@/utils/auth";
import { ILogin } from "@/types/login.model";
import { RouteName } from '@/router'
@Component
export default class PasswordReset extends Vue {
@@ -79,7 +80,7 @@ export default class PasswordReset extends Vue {
});
saveUserData(result.data.resetPassword);
this.$router.push({ name: "Home" });
this.$router.push({ name: RouteName.HOME });
} catch (err) {
console.error(err);
err.graphQLErrors.forEach(({ message }) => {

22
js/src/views/User/Register.vue
View File

@@ -108,15 +108,11 @@
</template>
<script lang="ts">
import Gravatar from "vue-gravatar";
import { CREATE_USER } from "@/graphql/user";
import { Component, Prop, Vue } from "vue-property-decorator";
import { UserRouteName } from '@/router/user'
@Component({
components: {
"v-gravatar": Gravatar
}
})
@Component
export default class Register extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
@Prop({ type: String, required: false, default: "" }) password!: string;
@@ -124,29 +120,25 @@ export default class Register extends Vue {
credentials = {
email: this.email,
password: this.password
} as { email: string; password: string };
}
errors: object = {};
sendingValidation: boolean = false;
validationSent: boolean = false;
showGravatar: boolean = false;
validEmail() {
return this.credentials.email.includes("@") === true
? "v-gravatar"
: "avatar";
}
async submit() {
try {
this.sendingValidation = true;
this.errors = {};
await this.$apollo.mutate({
mutation: CREATE_USER,
variables: this.credentials
});
this.validationSent = true;
this.$router.push({
name: "RegisterProfile",
name: UserRouteName.REGISTER_PROFILE,
params: { email: this.credentials.email }
});
} catch (error) {

6
js/src/views/User/Validate.vue
View File

@@ -20,6 +20,8 @@
import { VALIDATE_USER } from "@/graphql/user";
import { Component, Prop, Vue } from "vue-property-decorator";
import { AUTH_TOKEN, AUTH_USER_ID } from "@/constants";
import { RouteName } from '@/router'
import { UserRouteName } from '@/router/user'
@Component
export default class Validate extends Vue {
@@ -46,9 +48,9 @@ export default class Validate extends Vue {
const user = data.validateUser.user;
console.log(user);
if (user.defaultActor) {
this.$router.push({name: "Home"});
this.$router.push({ name: RouteName.HOME });
} else { // If the user didn't register any profile yet, let's create one for them
this.$router.push({ name: 'RegisterProfile', params: {email: user.email, userAlreadyActivated: 'true'} });
this.$router.push({ name: UserRouteName.REGISTER_PROFILE, params: { email: user.email, userAlreadyActivated: 'true' } });
}
} catch (err) {
console.error(err);