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

Replace Vuetify with Bulma

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>

Remove vuetify and add Bulma

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2019-01-21 15:08:22 +01:00
parent 759a740625
commit 90fd0ff6b6
79 changed files with 3482 additions and 3369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
js/src/views/Account/Identities.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<section>
<b-loading :active.sync="$apollo.loading"></b-loading>
<h1 class="title">
<translate>Identities</translate>
</h1>
<a class="button is-primary" @click="showCreateProfileForm = true">
<translate>Add a new profile</translate>
</a>
<div class="columns" v-if="showCreateProfileForm">
<form @submit="createProfile" class="column is-half">
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<b-field label="Username">
<b-input aria-required="true" required v-model="newPerson.preferredUsername"/>
</b-field>
<button class="button is-primary">
<translate>Register</translate>
</button>
</form>
</div>
<ul>
<li v-for="identity in identities" :key="identity.id">
<hr>
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img :src="identity.avatarUrl">
</figure>
</div>
<div class="media-content">
<p class="title is-5">
{{ identity.name }}
<span
v-if="identity.preferredUsername === loggedPerson.preferredUsername"
class="tag is-primary"
>
<translate>Current</translate>
</span>
</p>
<p class="subtitle is-6">@{{ identity.preferredUsername }}</p>
</div>
</div>
</li>
</ul>
</section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { IDENTITIES, LOGGED_PERSON, CREATE_PERSON } from "../../graphql/actor";
import { IPerson } from "@/types/actor.model";
@Component({
apollo: {
identities: {
query: IDENTITIES
},
loggedPerson: {
query: LOGGED_PERSON
}
}
})
export default class Identities extends Vue {
identities: IPerson[] = [];
loggedPerson!: IPerson;
newPerson!: IPerson;
showCreateProfileForm: boolean = false;
errors: string[] = [];
async createProfile(e) {
e.preventDefault();
try {
await this.$apollo.mutate({
mutation: CREATE_PERSON,
variables: this.newPerson
});
this.showCreateProfileForm = false;
this.$apollo.queries.identities.refresh();
} catch (err) {
console.error(err);
err.graphQLErrors.forEach(({ message }) => {
this.errors.push(message);
});
}
}
host() {
return `@${window.location.host}`;
}
}
</script>

111
js/src/views/Account/Profile.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<section>
<div class="columns">
<div class="column">
<div class="card" v-if="person">
<div class="card-image" v-if="person.bannerUrl">
<figure class="image">
<img :src="person.bannerUrl">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img :src="person.avatarUrl">
</figure>
</div>
<div class="media-content">
<p class="title">{{ person.name }}</p>
<p class="subtitle">@{{ person.preferredUsername }}</p>
</div>
</div>
<div class="content">
<p v-html="person.summary"></p>
</div>
</div>
<section v-if="person.organizedEvents.length > 0">
<h2 class="subtitle">
<translate>Organized</translate>
</h2>
<div class="columns">
<EventCard
v-for="event in person.organizedEvents"
:event="event"
:hideDetails="true"
:key="event.uuid"
class="column is-one-third"
/>
</div>
<div class="field is-grouped">
<p class="control">
<a
class="button"
@click="logoutUser()"
v-if="loggedPerson && loggedPerson.id === person.id"
>
<translate>User logout</translate>
</a>
</p>
<p class="control">
<a
class="button"
@click="deleteProfile()"
v-if="loggedPerson && loggedPerson.id === person.id"
>
<translate>Delete</translate>
</a>
</p>
</div>
</section>
</div>
</div>
</div>
</section>
</template>
<script lang="ts">
import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import EventCard from "@/components/Event/EventCard.vue";
@Component({
apollo: {
person: {
query: FETCH_PERSON,
variables() {
return {
name: this.$route.params.name
};
}
},
loggedPerson: {
query: LOGGED_PERSON
}
},
components: {
EventCard
}
})
export default class Profile extends Vue {
@Prop({ type: String, required: true }) name!: string;
person = null;
// call again the method if the route changes
@Watch("$route")
onRouteChange() {
// this.fetchData()
}
logoutUser() {
// TODO : implement logout
this.$router.push({ name: "Home" });
}
nl2br(text) {
return text.replace(/(?:\r\n|\r|\n)/g, "<br>");
}
}
</script>

182
js/src/views/Account/Register.vue Normal file
View File

@@ -0,0 +1,182 @@
<template>
<div>
<section class="hero">
<div class="hero-body">
<h1 class="title">
<translate>Register an account on Mobilizon!</translate>
</h1>
</div>
</section>
<section>
<div class="container">
<div class="columns is-mobile">
<div class="column">
<div class="content">
<h2 class="subtitle" v-translate>Features</h2>
<ul>
<li v-translate>Create your communities and your events</li>
<li v-translate>Other stuff…</li>
</ul>
</div>
<p v-translate>
Learn more on
<a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
</p>
<hr>
<div class="content">
<h2 class="subtitle" v-translate>About this instance</h2>
<p>
<translate>Your local administrator resumed it's policy:</translate>
</p>
<ul>
<li v-translate>Please be nice to each other</li>
<li v-translate>meditate a bit</li>
</ul>
<p>
<translate>Please read the full rules</translate>
</p>
</div>
</div>
<div class="column">
<form v-if="!validationSent">
<div class="columns is-mobile is-centered">
<div class="column is-narrow">
<figure class="image is-64x64">
<transition name="avatar">
<v-gravatar v-bind="{email: credentials.email}" default-img="mp"></v-gravatar>
</transition>
</figure>
</div>
</div>
<b-field label="Email">
<b-input
aria-required="true"
required
type="email"
v-model="credentials.email"
@blur="showGravatar = true"
@focus="showGravatar = false"
/>
</b-field>
<b-field label="Username">
<b-input aria-required="true" required v-model="credentials.username"/>
</b-field>
<b-field label="Password">
<b-input
aria-required="true"
required
type="password"
password-reveal
minlength="6"
v-model="credentials.password"
/>
</b-field>
<b-field grouped>
<div class="control">
<button type="button" class="button is-primary" @click="submit()">
<translate>Register</translate>
</button>
</div>
<div class="control">
<router-link
class="button is-text"
:to="{ name: 'ResendConfirmation', params: { email: credentials.email }}"
>
<translate>Didn't receive the instructions ?</translate>
</router-link>
</div>
<div class="control">
<router-link
class="button is-text"
:to="{ name: 'Login', params: { email: credentials.email, password: credentials.password }}"
:disabled="validationSent"
>
<translate>Login</translate>
</router-link>
</div>
</b-field>
</form>
<div v-if="validationSent">
<b-message title="Success" type="is-success">
<h2>
<translate>A validation email was sent to %{email}</translate>
</h2>
<p>
<translate>Before you can login, you need to click on the link inside it to validate your account</translate>
</p>
</b-message>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script lang="ts">
import Gravatar from "vue-gravatar";
import { CREATE_USER } from "@/graphql/user";
import { Component, Prop, Vue } from "vue-property-decorator";
import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
@Component({
components: {
"v-gravatar": Gravatar
}
})
export default class Register extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
@Prop({ type: String, required: false, default: "" }) password!: string;
credentials = {
username: "",
email: this.email,
password: this.password
} as { username: string; email: string; password: string };
errors: string[] = [];
validationSent: boolean = false;
showGravatar: boolean = false;
host() {
return MOBILIZON_INSTANCE_HOST;
}
validEmail() {
return this.credentials.email.includes("@") === true
? "v-gravatar"
: "avatar";
}
async submit() {
try {
this.validationSent = true;
await this.$apollo.mutate({
mutation: CREATE_USER,
variables: this.credentials
});
} catch (error) {
console.error(error);
}
}
}
</script>
<style lang="scss">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter,
.avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
</style>

75
js/src/views/Category/Create.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<section>
<h1 class="title">
<translate>Create a new category</translate>
</h1>
<div class="columns">
<form class="column" @submit="submit">
<b-field :label="$gettext('Name of the category')">
<b-input aria-required="true" required v-model="category.title"/>
</b-field>
<b-field :label="$gettext('Description')">
<b-input type="textarea" v-model="category.description"/>
</b-field>
<b-field class="file">
<b-upload v-model="file" @input="onFilePicked">
<a class="button is-primary">
<b-icon icon="upload"></b-icon>
<span>
<translate>Click to upload</translate>
</span>
</a>
</b-upload>
<span class="file-name" v-if="file">{{ this.image.name }}</span>
</b-field>
<button class="button is-primary">
<translate>Create the category</translate>
</button>
</form>
</div>
</section>
</template>
<script lang="ts">
import { CREATE_CATEGORY } from "@/graphql/category";
import { Component, Vue } from "vue-property-decorator";
import { ICategory } from "@/types/event.model";
/**
* TODO : No picture is uploaded ATM
*/
@Component
export default class CreateCategory extends Vue {
category!: ICategory;
image = {
name: ""
} as { name: string };
file: any = null;
create() {
this.$apollo
.mutate({
mutation: CREATE_CATEGORY,
variables: this.category
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
}
// TODO : Check if we can upload as soon as file is picked and purge files not validated
onFilePicked(e) {
if (e === undefined || e.name.lastIndexOf(".") <= 0) {
console.error("File is incorrect");
}
this.image.name = e.name;
}
}
</script>

55
js/src/views/Category/List.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<section>
<h1 class="title">
<translate>Category List</translate>
</h1>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div class="columns">
<div class="column card" v-for="category in categories" :key="category.id">
<div class="card-image">
<figure class="image is-4by3">
<img v-if="category.picture.url" :src="HTTP_ENDPOINT + category.picture.url">
</figure>
</div>
<div class="card-content">
<h2 class="title is-4">{{ category.title }}</h2>
<p>{{ category.description }}</p>
</div>
</div>
</div>
</section>
</template>
<script lang="ts">
import { FETCH_CATEGORIES } from "@/graphql/category";
import { Component, Vue } from "vue-property-decorator";
// TODO : remove this hardcode
@Component({
apollo: {
categories: {
query: FETCH_CATEGORIES
}
}
})
export default class List extends Vue {
categories = [];
loading = true;
HTTP_ENDPOINT = "http://localhost:4000";
deleteCategory(categoryId) {
const router = this.$router;
// FIXME: remove eventFetch
// eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
// .then(() => {
// this.categories = this.categories.filter(category => category.id !== categoryId);
// router.push('/category');
// });
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

165
js/src/views/Event/Create.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<section>
<h1 class="title">
<translate>Create a new event</translate>
</h1>
<div v-if="$apollo.loading">Loading...</div>
<div class="columns" v-else>
<form class="column" @submit="createEvent">
<b-field :label="$gettext('Title')">
<b-input aria-required="true" required v-model="event.title"/>
</b-field>
<b-datepicker v-model="event.begins_on" inline></b-datepicker>
<b-field :label="$gettext('Category')">
<b-select placeholder="Select a category" v-model="event.category">
<option
v-for="category in categories"
:value="category"
:key="category.title"
>{{ category.title }}</option>
</b-select>
</b-field>
<button class="button is-primary">
<translate>Create my event</translate>
</button>
</form>
</div>
</section>
</template>
<script lang="ts">
// import Location from '@/components/Location';
import VueMarkdown from "vue-markdown";
import { CREATE_EVENT, EDIT_EVENT } from "@/graphql/event";
import { FETCH_CATEGORIES } from "@/graphql/category";
import { AUTH_USER_ACTOR } from "@/constants";
import { Component, Prop, Vue } from "vue-property-decorator";
import {
IEvent,
ICategory,
EventVisibility,
EventStatus
} from "../../types/event.model";
import { LOGGED_PERSON } from "../../graphql/actor";
import { IPerson } from "../../types/actor.model";
@Component({
components: {
VueMarkdown
},
apollo: {
categories: {
query: FETCH_CATEGORIES
}
}
})
export default class CreateEvent extends Vue {
@Prop({ required: false, type: String }) uuid!: string;
loggedPerson!: IPerson;
categories: ICategory[] = [];
event!: IEvent; // FIXME: correctly type an event
// created() {
// if (this.uuid) {
// this.fetchEvent();
// }
// }
async created() {
// We put initialization here because we need loggedPerson to be ready before initalizing event
const { data } = await this.$apollo.query({ query: LOGGED_PERSON });
this.loggedPerson = data.loggedPerson;
this.event = {
title: "",
organizerActor: this.loggedPerson,
attributedTo: this.loggedPerson,
description: "",
begins_on: new Date(),
ends_on: new Date(),
category: this.categories[0],
participants: [],
uuid: "",
url: "",
local: true,
status: EventStatus.CONFIRMED,
visibility: EventVisibility.PUBLIC,
thumbnail: "",
large_image: "",
publish_at: new Date()
};
}
createEvent(e: Event) {
e.preventDefault();
if (this.uuid === undefined) {
this.$apollo
.mutate({
mutation: CREATE_EVENT,
variables: {
title: this.event.title,
description: this.event.description,
beginsOn: this.event.begins_on,
category: this.event.category.title,
organizerActorId: this.event.organizerActor.id
}
})
.then(data => {
console.log("event created", data);
this.$router.push({
name: "Event",
params: { uuid: data.data.createEvent.uuid }
});
})
.catch(error => {
console.log(error);
});
} else {
this.$apollo
.mutate({
mutation: EDIT_EVENT
})
.then(data => {
this.$router.push({
name: "Event",
params: { uuid: data.data.uuid }
});
})
.catch(error => {
console.log(error);
});
}
}
// getAddressData(addressData) {
// if (addressData !== null) {
// this.event.address = {
// geom: {
// data: {
// latitude: addressData.latitude,
// longitude: addressData.longitude
// },
// type: "point"
// },
// addressCountry: addressData.country,
// addressLocality: addressData.locality,
// addressRegion: addressData.administrative_area_level_1,
// postalCode: addressData.postal_code,
// streetAddress: `${addressData.street_number} ${addressData.route}`
// };
// }
// }
}
</script>
<style>
.markdown-render h1 {
font-size: 2em;
}
</style>

196
js/src/views/Event/Event.vue Normal file
View File

@@ -0,0 +1,196 @@
<template>
<div class="columns is-centered">
<div class="column is-three-quarters">
<b-loading :active.sync="$apollo.loading"></b-loading>
<div class="card" v-if="event">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://picsum.photos/600/400/">
</figure>
</div>
<div class="card-content">
<span>{{ event.begins_on | formatDay }}</span>
<span class="tag is-primary">{{ event.category.title }}</span>
<h1 class="title">{{ event.title }}</h1>
<router-link
:to="{name: 'Profile', params: { name: event.organizerActor.preferredUsername } }"
>
<figure v-if="event.organizerActor.avatarUrl">
<img :src="event.organizerActor.avatarUrl">
</figure>
</router-link>
<span
v-if="event.organizerActor"
>Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span>
<div class="field has-addons">
<p class="control">
<router-link
v-if="actorIsOrganizer()"
class="button"
:to="{ name: 'EditEvent', params: {uuid: event.uuid}}"
>
<translate>Edit</translate>
</router-link>
</p>
<p class="control">
<a class="button" @click="downloadIcsEvent()">
<translate>Download</translate>
</a>
</p>
<p class="control">
<a class="button is-danger" v-if="actorIsOrganizer()" @click="deleteEvent()">
<translate>Delete</translate>
</a>
</p>
</div>
<div>
<span>{{ event.begins_on | formatDate }} - {{ event.ends_on | formatDate }}</span>
</div>
<p v-if="actorIsOrganizer()">
<translate>Vous êtes organisateur de cet événement.</translate>
</p>
<div v-else>
<p v-if="actorIsParticipant()">
<translate>Vous avez annoncé aller à cet événement.</translate>
</p>
<p v-else>
Vous y allez ?
<span>{{ event.participants.length }} personnes y vont.</span>
</p>
</div>
<div v-if="!actorIsOrganizer()">
<a v-if="!actorIsParticipant()" @click="joinEvent" class="button">
<translate>Join</translate>
</a>
<a v-if="actorIsParticipant()" @click="leaveEvent" color="button">Leave</a>
</div>
<h2 class="subtitle">Details</h2>
<p v-if="event.description">
<vue-markdown :source="event.description"></vue-markdown>
</p>
<h2 class="subtitle">Participants</h2>
<span v-if="event.participants.length === 0">No participants yet.</span>
<div class="columns">
<router-link
class="card column"
v-for="participant in event.participants"
:key="participant.preferredUsername"
:to="{name: 'Profile', params: { name: participant.actor.preferredUsername }}"
>
<div>
<figure>
<img v-if="!participant.actor.avatarUrl" src="https://picsum.photos/125/125/">
<img v-else :src="participant.actor.avatarUrl">
</figure>
<span>{{ participant.actor.preferredUsername }}</span>
</div>
</router-link>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { FETCH_EVENT } from "@/graphql/event";
import { Component, Prop, Vue } from "vue-property-decorator";
import VueMarkdown from "vue-markdown";
import { LOGGED_PERSON } from "../../graphql/actor";
import { IEvent } from "@/types/event.model";
import { JOIN_EVENT } from "../../graphql/event";
import { IPerson } from "@/types/actor.model";
@Component({
components: {
VueMarkdown
},
apollo: {
event: {
query: FETCH_EVENT,
variables() {
return {
uuid: this.uuid
};
}
},
loggedPerson: {
query: LOGGED_PERSON
}
}
})
export default class Event extends Vue {
@Prop({ type: String, required: true }) uuid!: string;
event!: IEvent;
loggedPerson!: IPerson;
validationSent: boolean = false;
deleteEvent() {
const router = this.$router;
// FIXME: remove eventFetch
// eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
// .then(() => router.push({ name: 'EventList' }));
}
async joinEvent() {
try {
this.validationSent = true;
await this.$apollo.mutate({
mutation: JOIN_EVENT
});
} catch (error) {
console.error(error);
}
}
leaveEvent() {
// FIXME: remove eventFetch
// eventFetch(`/events/${this.uuid}/leave`, this.$store)
// .then(response => response.json())
// .then((data) => {
// console.log(data);
// });
}
downloadIcsEvent() {
// FIXME: remove eventFetch
// eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
// .then(response => response.text())
// .then((response) => {
// const blob = new Blob([ response ], { type: 'text/calendar' });
// const link = document.createElement('a');
// link.href = window.URL.createObjectURL(blob);
// link.download = `${this.event.title}.ics`;
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// });
}
actorIsParticipant() {
return (
(this.loggedPerson &&
this.event.participants
.map(participant => participant.actor.preferredUsername)
.includes(this.loggedPerson.preferredUsername)) ||
this.actorIsOrganizer()
);
}
//
actorIsOrganizer() {
return (
this.loggedPerson &&
this.loggedPerson.preferredUsername ===
this.event.organizerActor.preferredUsername
);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.v-card__media__background {
filter: contrast(0.4);
}
</style>

111
js/src/views/Event/EventList.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<section>
<h1>
<translate>Event list</translate>
</h1>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="events.length > 0" class="columns is-multiline">
<EventCard
v-for="event in events"
:key="event.uuid"
:event="event"
class="column is-one-quarter-desktop is-half-mobile"
/>
</div>
<b-message v-if-else="events.length === 0 && $apollo.loading === false" type="is-danger">
<translate>No events found</translate>
</b-message>
</section>
</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";
@Component({
components: {
VueMarkdown,
EventCard
}
})
export default class EventList extends Vue {
@Prop(String) location!: string;
events = [];
loading = true;
locationChip = false;
locationText = "";
created() {
this.fetchData(this.$router.currentRoute.params["location"]);
}
beforeRouteUpdate(to, from, next) {
this.fetchData(to.params.location);
next();
}
@Watch("locationChip")
onLocationChipChange(val) {
if (val === false) {
this.$router.push({ name: "EventList" });
}
}
geocode(lat, lon) {
console.log({ lat, lon });
console.log(ngeohash.encode(lat, lon, 10));
return ngeohash.encode(lat, lon, 10);
}
fetchData(location) {
let queryString = "/events";
if (location) {
queryString += `?geohash=${location}`;
const { latitude, longitude } = ngeohash.decode(location);
this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
}
this.locationChip = true;
// FIXME: remove eventFetch
// eventFetch(queryString, this.$store)
// .then(response => response.json())
// .then((response) => {
// this.loading = false;
// this.events = response.data;
// console.log(this.events);
// });
}
deleteEvent(event) {
const router = this.$router;
// FIXME: remove eventFetch
// eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
// .then(() => router.push('/events'));
}
viewEvent(event) {
this.$router.push({ name: "Event", params: { uuid: event.uuid } });
}
downloadIcsEvent(event) {
// FIXME: remove eventFetch
// eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
// .then(response => response.text())
// .then((response) => {
// const blob = new Blob([ response ], { type: 'text/calendar' });
// const link = document.createElement('a');
// link.href = window.URL.createObjectURL(blob);
// link.download = `${event.title}.ics`;
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// });
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

98
js/src/views/Group/Create.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<section>
<h1>
<translate>Create a new group</translate>
</h1>
<div class="columns">
<form class="column" @submit="createGroup">
<b-field :label="$gettext('Group name')">
<b-input aria-required="true" required v-model="group.preferred_username"/>
</b-field>
<b-field :label="$gettext('Group full name')">
<b-input aria-required="true" required v-model="group.name"/>
</b-field>
<b-field :label="$gettext('Description')">
<b-input aria-required="true" required v-model="group.summary" type="textarea"/>
</b-field>
<button class="button is-primary">
<translate>Create my group</translate>
</button>
</form>
</div>
</section>
</template>
<script lang="ts">
import VueMarkdown from "vue-markdown";
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {
VueMarkdown
}
})
export default class CreateGroup extends Vue {
e1 = 0;
// FIXME: correctly type group
group: {
preferred_username: string;
name: string;
summary: string;
address?: any;
} = {
preferred_username: "",
name: "",
summary: ""
// category: null,
};
categories = [];
mounted() {
this.fetchCategories();
}
createGroup() {
// this.group.organizer = "/accounts/" + this.$store.state.user.id;
// FIXME: remove eventFetch
// eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
// .then(response => response.json())
// .then((data) => {
// this.loading = false;
// this.$router.push({ path: 'Group', params: { id: data.id } });
// });
}
fetchCategories() {
// FIXME: remove eventFetch
// eventFetch('/categories', this.$store)
// .then(response => response.json())
// .then((data) => {
// this.loading = false;
// this.categories = data.data;
// });
}
getAddressData(addressData) {
this.group.address = {
geo: {
latitude: addressData.latitude,
longitude: addressData.longitude
},
addressCountry: addressData.country,
addressLocality: addressData.city,
addressRegion: addressData.administrative_area_level_1,
postalCode: addressData.postal_code,
streetAddress: `${addressData.street_number} ${addressData.route}`
};
}
}
</script>
<style>
.markdown-render h1 {
font-size: 2em;
}
</style>

112
js/src/views/Group/Group.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<section>
<div class="columns">
<div class="column">
<div class="card" v-if="group">
<div class="card-image" v-if="group.bannerUrl">
<figure class="image">
<img :src="group.bannerUrl">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img :src="group.avatarUrl">
</figure>
</div>
<div class="media-content">
<p class="title">{{ group.name }}</p>
<p class="subtitle">@{{ group.preferredUsername }}</p>
</div>
</div>
<div class="content">
<p v-html="group.summary"></p>
</div>
</div>
<section v-if="group.organizedEvents.length > 0">
<h2 class="subtitle">
<translate>Organized</translate>
</h2>
<div class="columns">
<EventCard
v-for="event in group.organizedEvents"
:event="event"
:hideDetails="true"
:key="event.uuid"
class="column is-one-third"
/>
</div>
</section>
<section v-if="group.members.length > 0">
<h2 class="subtitle">
<translate>Members</translate>
</h2>
<div class="columns">
<span
v-for="member in group.members"
:key="member"
>{{ member.actor.preferredUsername }}</span>
</div>
</section>
</div>
<b-message v-if-else="!group && $apollo.loading === false" type="is-danger">
<translate>No group found</translate>
</b-message>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import EventCard from "@/components/Event/EventCard.vue";
import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor";
@Component({
apollo: {
person: {
query: FETCH_PERSON,
variables() {
return {
name: this.$route.params.name
};
}
},
loggedPerson: {
query: LOGGED_PERSON
}
},
components: {
EventCard
}
})
export default class Group extends Vue {
@Prop({ type: String, required: true }) name!: string;
group = null;
loading = true;
created() {
this.fetchData();
}
@Watch("$route")
onRouteChanged() {
// call again the method if the route changes
this.fetchData();
}
fetchData() {
// FIXME: remove eventFetch
// eventFetch(`/actors/${this.name}`, this.$store)
// .then(response => response.json())
// .then((response) => {
// this.group = response.data;
// this.loading = false;
// console.log(this.group);
// });
}
}
</script>

75
js/src/views/Group/GroupList.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<section>
<h1>
<translate>Group List</translate>
</h1>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div class="columns">
<GroupCard
v-for="group in groups"
:key="group.uuid"
:group="group"
class="column is-one-quarter-desktop is-half-mobile"
/>
</div>
<router-link class="button" :to="{ name: 'CreateGroup' }">
<translate>Create group</translate>
</router-link>
</section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class GroupList extends Vue {
groups = [];
loading = true;
created() {
this.fetchData();
}
usernameWithDomain(actor) {
return actor.username + (actor.domain === null ? "" : `@${actor.domain}`);
}
fetchData() {
// FIXME: remove eventFetch
// eventFetch('/groups', this.$store)
// .then(response => response.json())
// .then((data) => {
// console.log(data);
// this.loading = false;
// this.groups = data.data;
// });
}
deleteGroup(group) {
const router = this.$router;
// FIXME: remove eventFetch
// eventFetch(`/groups/${this.usernameWithDomain(group)}`, this.$store, { method: 'DELETE' })
// .then(response => response.json())
// .then(() => router.push('/groups'));
}
viewActor(actor) {
this.$router.push({
name: "Group",
params: { name: this.usernameWithDomain(actor) }
});
}
joinGroup(group) {
const router = this.$router;
// FIXME: remove eventFetch
// eventFetch(`/groups/${this.usernameWithDomain(group)}/join`, this.$store, { method: 'POST' })
// .then(response => response.json())
// .then(() => router.push({ name: 'Group', params: { name: this.usernameWithDomain(group) } }));
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

150
js/src/views/Home.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div>
<section class="hero is-link" v-if="!currentUser.id">
<div class="hero-body">
<div class="container">
<h1 class="title">Find events you like</h1>
<h2 class="subtitle">Share them with Mobilizon</h2>
<router-link class="button" :to="{ name: 'Register' }">
<translate>Register</translate>
</router-link>
</div>
</div>
</section>
<section v-else>
<h1>
<translate
:translate-params="{username: loggedPerson.preferredUsername}"
>Welcome back %{username}</translate>
</h1>
</section>
<section>
<span class="events-nearby title">Events nearby you</span>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="events.length > 0" class="columns is-multiline">
<EventCard
v-for="event in events"
:key="event.uuid"
:event="event"
class="column is-one-quarter-desktop is-half-mobile"
/>
</div>
<b-message v-else type="is-danger">
<translate>No events found</translate>
</b-message>
</section>
</div>
</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";
@Component({
apollo: {
events: {
query: FETCH_EVENTS,
fetchPolicy: "no-cache" // Debug me: https://github.com/apollographql/apollo-client/issues/3030
},
loggedPerson: {
query: LOGGED_PERSON
},
currentUser: {
query: CURRENT_USER_CLIENT
}
},
components: {
EventCard
}
})
export default class Home extends Vue {
searchTerm = null;
location_field = {
loading: false,
search: null
};
events = [];
locations = [];
city = { name: null };
country = { name: null };
// FIXME: correctly parse local storage
loggedPerson!: IPerson;
currentUser!: ICurrentUser;
get displayed_name() {
return this.loggedPerson.name === null
? this.loggedPerson.preferredUsername
: this.loggedPerson.name;
}
fetchLocations() {
// FIXME: remove eventFetch
// eventFetch('/locations', this.$store)
// .then(response => (response.json()))
// .then((response) => {
// this.locations = response;
// });
}
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 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
}
);
}
}
getAddressData(addressData) {
const geohash = ngeohash.encode(
addressData.latitude,
addressData.longitude,
11
);
sessionStorage.setItem("City", geohash);
this.$router.push({ name: "EventList", params: { location: geohash } });
}
viewEvent(event) {
this.$router.push({ name: "Event", params: { uuid: event.uuid } });
}
ipLocation() {
return this.city.name ? this.city.name : this.country.name;
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.search-autocomplete {
border: 1px solid #dbdbdb;
color: rgba(0, 0, 0, 0.87);
}
.events-nearby {
margin-bottom: 25px;
}
</style>

30
js/src/views/Location.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div>{{ center.lat }} - {{ center.lng }}</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Location extends Vue {
@Prop(String) address!: string;
description = "Paris, France";
center = { lat: 48.85, lng: 2.35 };
markers: any[] = [];
setPlace(place) {
this.center = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
};
this.markers = [
{
position: { lat: this.center.lat, lng: this.center.lng }
}
];
this.$emit("input", place.formatted_address);
}
}
</script>

8
js/src/views/PageNotFound.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<section>
<h1>
<translate>Page not found!</translate>
<img src="../assets/oh_no.jpg">
</h1>
</section>
</template>

137
js/src/views/User/Login.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<div>
<section class="hero">
<h1 class="title">
<translate>Welcome back!</translate>
</h1>
</section>
<section>
<div class="columns is-mobile is-centered">
<div class="column is-half card">
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<form @submit="loginAction">
<b-field label="Email">
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
</b-field>
<b-field label="Password">
<b-input
aria-required="true"
required
type="password"
password-reveal
v-model="credentials.password"
/>
</b-field>
<div class="control has-text-centered">
<button class="button is-primary is-large">
<translate>Login</translate>
</button>
</div>
<div class="control">
<router-link
class="button is-text"
:to="{ name: 'SendPasswordReset', params: { email: credentials.email }}"
>
<translate>Forgot your password ?</translate>
</router-link>
</div>
<div class="control">
<router-link
class="button is-text"
:to="{ name: 'Register', params: { default_email: credentials.email, default_password: credentials.password }}"
>
<translate>Register</translate>
</router-link>
</div>
</form>
</div>
</div>
</section>
</div>
</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";
import { saveUserData } from "@/utils/auth";
import { ILogin } from "@/types/login.model";
import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
import { onLogin } from "@/vue-apollo";
@Component({
components: {
"v-gravatar": Gravatar
}
})
export default class Login extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
@Prop({ type: String, required: false, default: "" }) password!: string;
credentials = {
email: "",
password: ""
};
validationSent = false;
errors: string[] = [];
rules = {
required: validateRequiredField,
email: validateEmailField
};
user: any;
beforeCreate() {
if (this.user) {
this.$router.push("/");
}
}
mounted() {
this.credentials.email = this.email;
this.credentials.password = this.password;
}
async loginAction(e: Event) {
e.preventDefault();
this.errors.splice(0);
try {
const result = await this.$apollo.mutate<{ login: ILogin }>({
mutation: LOGIN,
variables: {
email: this.credentials.email,
password: this.credentials.password
}
});
saveUserData(result.data.login);
await this.$apollo.mutate({
mutation: UPDATE_CURRENT_USER_CLIENT,
variables: {
id: result.data.login.user.id,
email: this.credentials.email
}
});
onLogin(this.$apollo);
this.$router.push({ name: "Home" });
} catch (err) {
console.error(err);
err.graphQLErrors.forEach(({ message }) => {
this.errors.push(message);
});
}
}
validEmail() {
return this.rules.email(this.credentials.email) === true
? "v-gravatar"
: "avatar";
}
}
</script>

91
js/src/views/User/PasswordReset.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<section class="columns is-mobile is-centered">
<div class="card column is-half-desktop">
<h1>
<translate>Password reset</translate>
</h1>
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<form @submit="resetAction">
<b-field label="Password">
<b-input
aria-required="true"
required
type="password"
password-reveal
minlength="6"
v-model="credentials.password"
/>
</b-field>
<b-field label="Password (confirmation)">
<b-input
aria-required="true"
required
type="password"
password-reveal
minlength="6"
v-model="credentials.password_confirmation"
/>
</b-field>
<button class="button is-primary">
<translate>Reset my password</translate>
</button>
</form>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { validateRequiredField } from "@/utils/validators";
import { RESET_PASSWORD } from "@/graphql/auth";
import { saveUserData } from "@/utils/auth";
import { ILogin } from "@/types/login.model";
@Component
export default class PasswordReset extends Vue {
@Prop({ type: String, required: true }) token!: string;
credentials = {
password: "",
password_confirmation: ""
} as { password: string; password_confirmation: string };
errors: string[] = [];
rules = {
password_length: value =>
value.length > 6 || "Password must be at least 6 characters long",
required: validateRequiredField,
password_equal: value =>
value === this.credentials.password || "Passwords must be the same"
};
get samePasswords() {
return (
this.rules.password_length(this.credentials.password) === true &&
this.credentials.password === this.credentials.password_confirmation
);
}
async resetAction(e) {
e.preventDefault();
this.errors.splice(0);
try {
const result = await this.$apollo.mutate<{ resetPassword: ILogin }>({
mutation: RESET_PASSWORD,
variables: {
password: this.credentials.password,
token: this.token
}
});
saveUserData(result.data.resetPassword);
this.$router.push({ name: "Home" });
} catch (err) {
console.error(err);
err.graphQLErrors.forEach(({ message }) => {
this.errors.push(message);
});
}
}
}
</script>

77
js/src/views/User/ResendConfirmation.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<section class="columns">
<div class="column card">
<h1 class="title">
<translate>Resend confirmation email</translate>
</h1>
<form v-if="!validationSent" @submit="resendConfirmationAction">
<b-field label="Email">
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
</b-field>
<button class="button is-primary">
<translate>Send confirmation email again</translate>
</button>
</form>
<div v-else>
<b-message type="is-success" :closable="false" title="Success">
<translate
:translate-params="{email: credentials.email}"
>If an account with this email exists, we just sent another confirmation email to %{email}</translate>
</b-message>
<b-message type="is-info">
<translate>Please check you spam folder if you didn't receive the email.</translate>
</b-message>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { validateEmailField, validateRequiredField } from "@/utils/validators";
import { RESEND_CONFIRMATION_EMAIL } from "@/graphql/auth";
@Component
export default class ResendConfirmation extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
credentials = {
email: ""
};
validationSent = false;
error = false;
state = {
email: {
status: null,
msg: ""
}
};
rules = {
required: validateRequiredField,
email: validateEmailField
};
mounted() {
this.credentials.email = this.email;
}
async resendConfirmationAction(e) {
e.preventDefault();
this.error = false;
try {
await this.$apollo.mutate({
mutation: RESEND_CONFIRMATION_EMAIL,
variables: {
email: this.credentials.email
}
});
} catch (err) {
console.error(err);
this.error = true;
} finally {
this.validationSent = true;
}
}
}
</script>

89
js/src/views/User/SendPasswordReset.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<section class="columns">
<div class="card column">
<h1 class="title">
<translate>Password reset</translate>
</h1>
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
<b-field label="Email">
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
</b-field>
<button class="button is-primary">
<translate>Send email to reset my password</translate>
</button>
</form>
<div v-else>
<b-message type="is-success" :closable="false" title="Success">
<translate
:translate-params="{email: credentials.email}"
>We just sent an email to %{email}</translate>
</b-message>
<b-message type="is-info">
<translate>Please check you spam folder if you didn't receive the email.</translate>
</b-message>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { validateEmailField, validateRequiredField } from "@/utils/validators";
import { SEND_RESET_PASSWORD } from "@/graphql/auth";
@Component
export default class SendPasswordReset extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
credentials = {
email: ""
} as { email: string };
validationSent: boolean = false;
errors: string[] = [];
state = {
email: {
status: null,
msg: ""
} as { status: boolean | null; msg: string }
};
rules = {
required: validateRequiredField,
email: validateEmailField
};
mounted() {
this.credentials.email = this.email;
}
async sendResetPasswordTokenAction(e) {
e.preventDefault();
try {
await this.$apollo.mutate({
mutation: SEND_RESET_PASSWORD,
variables: {
email: this.credentials.email
}
});
this.validationSent = true;
} catch (err) {
console.error(err);
err.graphQLErrors.forEach(({ message }) => {
this.errors.push(message);
});
}
}
resetState() {
this.state = {
email: {
status: null,
msg: ""
}
};
}
}
</script>

59
js/src/views/User/Validate.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<section>
<h1 class="title" v-if="loading">
<translate>Your account is being validated</translate>
</h1>
<div v-else>
<div v-if="failed">
<b-message title="Error" type="is-danger">
<translate>Error while validating account</translate>
</b-message>
</div>
<h1 class="title" v-else>
<translate>Your account has been validated</translate>
</h1>
</div>
</section>
</template>
<script lang="ts">
import { VALIDATE_USER } from "@/graphql/user";
import { Component, Prop, Vue } from "vue-property-decorator";
import { AUTH_TOKEN, AUTH_USER_ID } from "@/constants";
@Component
export default class Validate extends Vue {
@Prop({ type: String, required: true }) token!: string;
loading = true;
failed = false;
created() {
this.validateAction();
}
async validateAction() {
try {
const data = await this.$apollo.mutate({
mutation: VALIDATE_USER,
variables: {
token: this.token
}
});
this.saveUserData(data.data);
this.$router.push({ name: "Home" });
} catch (err) {
console.error(err);
this.failed = true;
} finally {
this.loading = false;
}
}
saveUserData({ validateUser: login }) {
localStorage.setItem(AUTH_USER_ID, login.user.id);
localStorage.setItem(AUTH_TOKEN, login.token);
}
}
</script>