Thomas Citharel
@@ -1,216 +1,210 @@
|
||||
<template>
|
||||
<v-layout row>
|
||||
<v-flex xs12 sm6 offset-sm3>
|
||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-card v-if="!loading">
|
||||
<v-img :src="actor.banner || 'https://picsum.photos/400/'" height="300px">
|
||||
<v-layout column class="media">
|
||||
<v-card-title>
|
||||
<v-btn icon @click="$router.go(-1)">
|
||||
<v-icon>chevron_left</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.actor.id === actor.id">
|
||||
<v-icon>edit</v-icon>
|
||||
</v-btn>
|
||||
<v-menu bottom left>
|
||||
<v-btn icon slot="activator">
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
<v-list>
|
||||
<v-list-tile @click="logoutUser()" v-if="$store.state.user && $store.state.actor.id === actor.id">
|
||||
<v-list-tile-title>User logout</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="deleteAccount()" v-if="$store.state.user && $store.state.actor.id === actor.id">
|
||||
<v-list-tile-title>Delete</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<div class="text-xs-center">
|
||||
<v-avatar size="125px">
|
||||
<img v-if="!actor.avatar"
|
||||
class="img-circle elevation-7 mb-1"
|
||||
src="https://picsum.photos/125/125/"
|
||||
>
|
||||
<img v-else
|
||||
<ApolloQuery :query="FETCH_ACTOR" :variables="{ name }">
|
||||
<template slot-scope="{ result: { loading, error, data } }">
|
||||
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
||||
<v-card v-if="data">
|
||||
<v-img :src="data.actor.banner || 'https://picsum.photos/400/'" height="300px">
|
||||
<v-layout column class="media">
|
||||
<v-card-title>
|
||||
<v-btn icon @click="$router.go(-1)">
|
||||
<v-icon>chevron_left</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<!-- <v-btn icon class="mr-3" v-if="actor.id === data.actor.id">
|
||||
<v-icon>edit</v-icon>
|
||||
</v-btn> -->
|
||||
<v-menu bottom left>
|
||||
<v-btn icon slot="activator">
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
<v-list>
|
||||
<!-- <v-list-tile @click="logoutUser()" v-if="actor.id === data.actor.id">
|
||||
<v-list-tile-title>User logout</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="deleteAccount()" v-if="actor.id === data.actor.id">
|
||||
<v-list-tile-title>Delete</v-list-tile-title>
|
||||
</v-list-tile> -->
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<div class="text-xs-center">
|
||||
<v-avatar size="125px">
|
||||
<img v-if="!data.actor.avatarUrl"
|
||||
class="img-circle elevation-7 mb-1"
|
||||
:src="actor.avatar"
|
||||
>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<v-container fluid grid-list-lg>
|
||||
<v-layout row>
|
||||
<v-flex xs7>
|
||||
<div class="headline">{{ actor.display_name }}</div>
|
||||
<div><span class="subheading">@{{ actor.username }}<span v-if="actor.domain">@{{ actor.domain }}</span></span></div>
|
||||
<v-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
|
||||
src="https://picsum.photos/125/125/"
|
||||
>
|
||||
<img v-else
|
||||
class="img-circle elevation-7 mb-1"
|
||||
:src="data.actor.avatarUrl"
|
||||
>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<v-container fluid grid-list-lg>
|
||||
<v-layout row>
|
||||
<v-flex xs7>
|
||||
<div class="headline">{{ data.actor.name }}</div>
|
||||
<div><span class="subheading">@{{ data.actor.preferredUsername }}<span v-if="data.actor.domain">@{{ data.actor.domain }}</span></span></div>
|
||||
<v-card-text v-if="data.actor.description" v-html="data.actor.description"></v-card-text>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-layout>
|
||||
</v-img>
|
||||
<v-list three-line>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">phone</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>(323) 555-6789</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Work</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action>
|
||||
<v-icon dark>chat</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">mail</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>ali_connors@example.com</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Work</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">location_on</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>1400 Main Street</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Orlando, FL 79938</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
<v-container fluid grid-list-md v-if="data.actor.participatingEvents && data.actor.participatingEvents.length > 0">
|
||||
<v-subheader>Participated at</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="event in data.actor.participatingEvents" :key="event.id">
|
||||
<v-card>
|
||||
<v-img
|
||||
class="black--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline">{{ event.title }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-img>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-layout>
|
||||
</v-img>
|
||||
<v-list three-line>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">phone</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>(323) 555-6789</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Work</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action>
|
||||
<v-icon dark>chat</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">mail</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>ali_connors@example.com</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Work</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-divider inset></v-divider>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon color="indigo">location_on</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>1400 Main Street</v-list-tile-title>
|
||||
<v-list-tile-sub-title>Orlando, FL 79938</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
<v-container fluid grid-list-md v-if="actor.participatingEvents && actor.participatingEvents.length > 0">
|
||||
<v-subheader>Participated at</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="event in actor.participatingEvents" :key="event.id">
|
||||
<v-card>
|
||||
<v-card-media
|
||||
class="black--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline">{{ event.title }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-media>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-container fluid grid-list-md v-if="actor.organized_events && actor.organized_events.length > 0">
|
||||
<v-subheader>Organized events</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="event in actor.organized_events" :key="event.id">
|
||||
<v-card>
|
||||
<v-card-media
|
||||
class="black--text"
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
>
|
||||
<v-container fill-height fluid>
|
||||
<v-layout fill-height>
|
||||
<v-flex xs12 align-end flexbox>
|
||||
<span class="headline">{{ event.title }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-media>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<v-container fluid grid-list-md v-if="data.actor.organizedEvents && data.actor.organizedEvents.length > 0">
|
||||
<v-subheader>Organized events</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="event in data.actor.organizedEvents" :key="event.id" md6>
|
||||
<v-card>
|
||||
<v-img
|
||||
height="200px"
|
||||
src="https://picsum.photos/400/200/"
|
||||
/>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<router-link :to="{name: 'Event', params: {uuid: event.uuid}}">
|
||||
<div class="headline">{{ event.title }}</div>
|
||||
</router-link>
|
||||
<span class="grey--text" v-html="nl2br(event.description)"></span>
|
||||
</div>
|
||||
</v-card-title>
|
||||
|
||||
<!-- <v-card-title>
|
||||
<div>
|
||||
<span class="grey--text" v-if="event.addressType === 'physical'">{{ event.startDate }} à {{ event.location }}</span><br>
|
||||
<p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
|
||||
</div>
|
||||
</v-card-title> -->
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>bookmark</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
</ApolloQuery>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eventFetch from '@/api/eventFetch';
|
||||
import auth from '@/auth';
|
||||
import { FETCH_ACTOR } from '@/graphql/actor';
|
||||
|
||||
export default {
|
||||
name: 'Account',
|
||||
data() {
|
||||
return {
|
||||
actor: null,
|
||||
loading: true,
|
||||
}
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'fetchData'
|
||||
$route: 'fetchData',
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
eventFetch(`/actors/${this.name}`, this.$store)
|
||||
.then(response => response.json())
|
||||
.then((response) => {
|
||||
this.actor = response.data;
|
||||
this.loading = false;
|
||||
console.log('actor', this.actor);
|
||||
})
|
||||
},
|
||||
logoutUser() {
|
||||
auth.logout(this.$store);
|
||||
// TODO : implement logout
|
||||
this.$router.push({ name: 'Home' });
|
||||
},
|
||||
}
|
||||
}
|
||||
nl2br: function(text) {
|
||||
return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
@click="$router.push({ name: 'Account', params: { name: actor.username } })"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon v-if="$store.state.defaultActor === actor.username" color="pink">star</v-icon>
|
||||
<v-icon v-if="defaultActor === actor.username" color="pink">star</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
@@ -67,29 +67,26 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eventFetch from "@/api/eventFetch";
|
||||
import auth from "@/auth";
|
||||
|
||||
export default {
|
||||
name: "Identities",
|
||||
name: 'Identities',
|
||||
data() {
|
||||
return {
|
||||
actors: [],
|
||||
newActor: {
|
||||
preferred_username: "",
|
||||
summary: ""
|
||||
preferred_username: '',
|
||||
summary: '',
|
||||
},
|
||||
loading: true,
|
||||
showForm: false,
|
||||
rules: {
|
||||
required: value => !!value || "Required."
|
||||
required: value => !!value || 'Required.',
|
||||
},
|
||||
state: {
|
||||
username: {
|
||||
status: false,
|
||||
msg: []
|
||||
}
|
||||
}
|
||||
msg: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -97,9 +94,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
eventFetch(`/user`, this.$store)
|
||||
eventFetch('/user', this.$store)
|
||||
.then(response => response.json())
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
this.actors = response.data.actors;
|
||||
this.loading = false;
|
||||
});
|
||||
@@ -107,12 +104,12 @@ export default {
|
||||
sendData() {
|
||||
this.loading = true;
|
||||
this.showForm = false;
|
||||
eventFetch(`/actors`, this.$store, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ actor: this.newActor })
|
||||
eventFetch('/actors', this.$store, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ actor: this.newActor }),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
this.actors.push(response.data);
|
||||
this.loading = false;
|
||||
});
|
||||
@@ -126,7 +123,7 @@ export default {
|
||||
},
|
||||
host() {
|
||||
return `@${window.location.host}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -60,83 +60,88 @@
|
||||
|
||||
<script>
|
||||
|
||||
import { LOGIN_USER } from '@/store/mutation-types';
|
||||
import auth from '@/auth/index';
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar';
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar';
|
||||
import { AUTH_TOKEN, AUTH_USER_ID, AUTH_USER_ACTOR } from '@/constants';
|
||||
import { LOGIN } from '@/graphql/auth';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
email: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
export default {
|
||||
props: {
|
||||
email: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
password: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
if (this.user) {
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-gravatar': Gravatar,
|
||||
avatar: RegisterAvatar,
|
||||
},
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
this.credentials.password = this.password;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
password: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
if (this.$store.state.user) {
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-gravatar': Gravatar,
|
||||
'avatar': RegisterAvatar
|
||||
},
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
this.credentials.password = this.password;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
email: '',
|
||||
password: '',
|
||||
validationSent: false,
|
||||
error: {
|
||||
show: false,
|
||||
text: '',
|
||||
timeout: 3000,
|
||||
field: {
|
||||
email: false,
|
||||
password: false,
|
||||
},
|
||||
validationSent: false,
|
||||
error: {
|
||||
show: false,
|
||||
text: '',
|
||||
timeout: 3000,
|
||||
field: {
|
||||
email: false,
|
||||
password: false,
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
required: value => !!value || 'Required.',
|
||||
email: (value) => {
|
||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return pattern.test(value) || 'Invalid e-mail.';
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loginAction(e) {
|
||||
e.preventDefault();
|
||||
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;
|
||||
});
|
||||
});
|
||||
},
|
||||
validEmail() {
|
||||
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
|
||||
rules: {
|
||||
required: value => !!value || 'Required.',
|
||||
email: (value) => {
|
||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return pattern.test(value) || 'Invalid e-mail.';
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loginAction(e) {
|
||||
e.preventDefault();
|
||||
this.$apollo.mutate({
|
||||
mutation: LOGIN,
|
||||
variables: {
|
||||
email: this.credentials.email,
|
||||
password: this.credentials.password
|
||||
}
|
||||
}).then((result) => {
|
||||
this.saveUserData(result.data);
|
||||
this.$router.push({name: 'Home'});
|
||||
}).catch((e) => {
|
||||
console.log(e);
|
||||
this.error.show = true;
|
||||
this.error.text = e.message;
|
||||
});
|
||||
},
|
||||
};
|
||||
validEmail() {
|
||||
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
|
||||
},
|
||||
saveUserData({login: login}) {
|
||||
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
||||
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
|
||||
localStorage.setItem(AUTH_TOKEN, login.token);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -37,8 +37,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fetchStory from '@/api/eventFetch';
|
||||
|
||||
export default {
|
||||
name: 'PasswordReset',
|
||||
props: {
|
||||
@@ -80,7 +78,7 @@ export default {
|
||||
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
|
||||
required: value => !!value || 'Required.',
|
||||
password_equal: value => value === this.credentials.password || 'Passwords must be the same',
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<v-tooltip bottom>
|
||||
<v-btn
|
||||
slot="activator"
|
||||
:to="{ name: 'Login', params: { email: this.credentials.email, password: this.credentials.password } }"
|
||||
:to="{ name: 'Login', params: { email, password } }"
|
||||
>
|
||||
<!-- <v-icon large>login</v-icon> -->
|
||||
<span>Login</span>
|
||||
@@ -21,22 +21,22 @@
|
||||
<div class="text-xs-center">
|
||||
<v-avatar size="80px">
|
||||
<transition name="avatar">
|
||||
<component :is="validEmail()" v-bind="{email: credentials.email}"></component>
|
||||
<component :is="validEmail()" v-bind="{email}"></component>
|
||||
<!-- <v-gravatar :email="credentials.email" default-img="mp" v-if="validEmail()"/>
|
||||
<avatar v-else></avatar> -->
|
||||
</transition>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<v-form @submit="registerAction" v-if="!validationSent">
|
||||
<v-form @submit="submit()" v-if="!validationSent">
|
||||
<v-text-field
|
||||
label="Username"
|
||||
required
|
||||
type="text"
|
||||
v-model="credentials.username"
|
||||
v-model="username"
|
||||
:rules="[rules.required]"
|
||||
:error="this.state.username.status"
|
||||
:error-messages="this.state.username.msg"
|
||||
:suffix="this.host()"
|
||||
:error="state.username.status"
|
||||
:error-messages="state.username.msg"
|
||||
:suffix="host()"
|
||||
hint="You will be able to create more identities once registered"
|
||||
persistent-hint
|
||||
>
|
||||
@@ -46,30 +46,30 @@
|
||||
required
|
||||
type="email"
|
||||
ref="email"
|
||||
v-model="credentials.email"
|
||||
v-model="email"
|
||||
:rules="[rules.required, rules.email]"
|
||||
:error="this.state.email.status"
|
||||
:error-messages="this.state.email.msg"
|
||||
:error="state.email.status"
|
||||
:error-messages="state.email.msg"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
label="Password"
|
||||
required
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
v-model="credentials.password"
|
||||
v-model="password"
|
||||
:rules="[rules.required, rules.password_length]"
|
||||
:error="this.state.password.status"
|
||||
:error-messages="this.state.password.msg"
|
||||
:error="state.password.status"
|
||||
:error-messages="state.password.msg"
|
||||
:append-icon="showPassword ? 'visibility_off' : 'visibility'"
|
||||
@click:append="showPassword = !showPassword"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-btn @click="registerAction" color="primary">Register</v-btn>
|
||||
<router-link :to="{ name: 'ResendConfirmation', params: { email: credentials.email }}">Didn't receive the instructions ?</router-link>
|
||||
<v-btn @click="submit()" color="primary">Register</v-btn>
|
||||
<router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
|
||||
</v-form>
|
||||
<div v-else>
|
||||
<h2>{{ $t('registration.form.validation_sent', { email: credentials.email }) }}</h2>
|
||||
<b-alert show variant="info">{{ $t('registration.form.validation_sent_info') }}</b-alert>
|
||||
<div v-if="validationSent">
|
||||
<h2><translate>A validation email was sent to %{email}</translate></h2>
|
||||
<v-alert :value="true" type="info"><translate>Before you can login, you need to click on the link inside it to validate your account</translate></v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -79,110 +79,101 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '@/auth/index';
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar';
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import RegisterAvatar from './RegisterAvatar';
|
||||
import { CREATE_USER } from '@/graphql/user';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
email: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
export default {
|
||||
props: {
|
||||
default_email: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
default_password: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
'v-gravatar': Gravatar,
|
||||
avatar: RegisterAvatar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
email: this.default_email,
|
||||
password: this.default_password,
|
||||
error: {
|
||||
show: false,
|
||||
},
|
||||
password: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
showPassword: false,
|
||||
validationSent: false,
|
||||
state: {
|
||||
email: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
username: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
password: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
'v-gravatar': Gravatar,
|
||||
'avatar': RegisterAvatar
|
||||
},
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
this.credentials.password = this.password;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
rules: {
|
||||
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
|
||||
required: value => !!value || 'Required.',
|
||||
email: (value) => {
|
||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return pattern.test(value) || 'Invalid e-mail.';
|
||||
},
|
||||
error: {
|
||||
show: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
resetState() {
|
||||
this.state = {
|
||||
email: {
|
||||
status: false,
|
||||
msg: '',
|
||||
},
|
||||
showPassword: false,
|
||||
validationSent: false,
|
||||
state: {
|
||||
email: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
username: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
password: {
|
||||
status: false,
|
||||
msg: [],
|
||||
},
|
||||
username: {
|
||||
status: false,
|
||||
msg: '',
|
||||
},
|
||||
rules: {
|
||||
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
|
||||
required: value => !!value || 'Required.',
|
||||
email: (value) => {
|
||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return pattern.test(value) || 'Invalid e-mail.';
|
||||
},
|
||||
password: {
|
||||
status: false,
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
registerAction(e) {
|
||||
this.resetState();
|
||||
e.preventDefault();
|
||||
auth.signup(JSON.stringify(this.credentials), (data) => {
|
||||
console.log(data);
|
||||
this.validationSent = true;
|
||||
}, (error) => {
|
||||
Promise.resolve(error).then((errormsg) => {
|
||||
console.log(errormsg);
|
||||
this.error.show = true;
|
||||
Object.entries(errormsg.errors.user).forEach(([key, val]) => {
|
||||
console.log(key);
|
||||
console.log(val);
|
||||
this.state[key] = { status: true, msg: val };
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
resetState() {
|
||||
this.state = {
|
||||
email: {
|
||||
status: false,
|
||||
msg: '',
|
||||
},
|
||||
username: {
|
||||
status: false,
|
||||
msg: '',
|
||||
},
|
||||
password: {
|
||||
status: false,
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
host() {
|
||||
return `@${window.location.host}`;
|
||||
},
|
||||
validEmail() {
|
||||
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
|
||||
}
|
||||
host() {
|
||||
return `@${window.location.host}`;
|
||||
},
|
||||
};
|
||||
validEmail() {
|
||||
return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
|
||||
},
|
||||
submit() {
|
||||
this.$apollo.mutate({
|
||||
mutation: CREATE_USER,
|
||||
variables: {
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
username: this.username,
|
||||
},
|
||||
}).then((data) => {
|
||||
console.log(data);
|
||||
this.validationSent = true;
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.avatar-enter-active {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RegisterAvatar'
|
||||
}
|
||||
name: 'RegisterAvatar',
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -31,8 +31,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fetchStory from '@/api/eventFetch';
|
||||
|
||||
export default {
|
||||
name: 'ResendConfirmation',
|
||||
props: {
|
||||
|
||||
@@ -31,8 +31,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fetchStory from '@/api/eventFetch';
|
||||
|
||||
export default {
|
||||
name: 'SendPasswordReset',
|
||||
props: {
|
||||
@@ -43,8 +41,8 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
},
|
||||
this.credentials.email = this.email;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<h1 v-if="loading">{{ $t('registration.validation.process') }}</h1>
|
||||
<h1 v-if="loading"><translate>Your account is being validated</translate></h1>
|
||||
<div v-else>
|
||||
<div v-if="failed">
|
||||
<v-alert :value="true" variant="danger">Error while validating account</v-alert>
|
||||
<v-alert :value="true" variant="danger"><translate>Error while validating account</translate></v-alert>
|
||||
</div>
|
||||
<h1 v-else>{{ $t('registration.validation.finished') }}</h1>
|
||||
<h1 v-else><translate>Your account has been validated</translate></h1>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fetchStory from '@/api/eventFetch';
|
||||
import { LOGIN_USER } from '@/store/mutation-types';
|
||||
import { VALIDATE_USER } from '@/graphql/user';
|
||||
|
||||
export default {
|
||||
name: 'Validate',
|
||||
@@ -33,20 +32,27 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
validateAction() {
|
||||
fetchStory(`/users/validate/${this.token}`, this.$store).then((data) => {
|
||||
this.$apollo.mutate({
|
||||
mutation: VALIDATE_USER,
|
||||
variables: {
|
||||
token: this.token,
|
||||
},
|
||||
}).then((data) => {
|
||||
this.loading = false;
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('refresh_token', data.refresh_token);
|
||||
this.$store.commit(LOGIN_USER, data.account);
|
||||
this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
|
||||
this.$router.push({ name: 'Home' });
|
||||
}).catch((err) => {
|
||||
Promise.resolve(err).then(() => {
|
||||
this.failed = true;
|
||||
this.loading = false;
|
||||
});
|
||||
console.log(data);
|
||||
this.saveUserData(data.data);
|
||||
this.$router.push({name: 'Home'});
|
||||
}).catch((error) => {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
this.failed = true;
|
||||
});
|
||||
},
|
||||
saveUserData({validateUser: login}) {
|
||||
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
||||
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
|
||||
localStorage.setItem(AUTH_TOKEN, login.token);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user