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

All components now use typescript

Browse Source
This commit is contained in:
Chocobozzz
2018-12-21 17:10:39 +01:00
parent b409a5583d
commit b1aa589bc7
30 changed files with 1347 additions and 2247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,12 +31,12 @@
<div class="text-xs-center">
<v-avatar size="125px">
<img v-if="!actor.avatarUrl"
class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/"
class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/"
>
<img v-else
class="img-circle elevation-7 mb-1"
:src="actor.avatarUrl"
class="img-circle elevation-7 mb-1"
:src="actor.avatarUrl"
>
</v-avatar>
</div>
@@ -44,7 +44,8 @@
<v-layout row>
<v-flex xs7>
<div class="headline">{{ actor.name }}</div>
<div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span></div>
<div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span>
</div>
<v-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
</v-flex>
</v-layout>
@@ -107,7 +108,9 @@
<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>
<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>
@@ -143,7 +146,7 @@
<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>
@@ -171,46 +174,40 @@
</v-layout>
</template>
<script>
import { FETCH_ACTOR } from '@/graphql/actor';
<script lang="ts">
import { FETCH_ACTOR } from '@/graphql/actor';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
export default {
name: 'Account',
data() {
return {
actor: null,
};
},
props: {
name: {
type: String,
required: true,
},
},
apollo: {
actor: {
query: FETCH_ACTOR,
variables() {
return {
name: this.$route.params.name,
};
@Component({
apollo: {
actor: {
query: FETCH_ACTOR,
variables() {
return {
name: this.$route.params.name,
};
},
},
},
},
created() {
},
watch: {
})
export default class Account extends Vue {
@Prop({ type: String, required: true }) name!: string;
actor = null;
// call again the method if the route changes
$route: 'fetchData',
},
methods: {
@Watch('$route')
onRouteChange() {
// this.fetchData()
}
logoutUser() {
// TODO : implement logout
this.$router.push({ name: 'Home' });
},
nl2br: function(text) {
}
nl2br(text) {
return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
}
},
};
};
</script>

140
js/src/components/Account/Identities.vue
View File

@@ -1,11 +1,11 @@
<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-toolbar dark color="primary">
<v-toolbar-title>Identities</v-toolbar-title>
</v-toolbar>
<v-flex xs12 sm6 offset-sm3>
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
<v-card v-if="!loading">
<v-toolbar dark color="primary">
<v-toolbar-title>Identities</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-list two-line>
<v-list-tile
@@ -31,22 +31,22 @@
<v-divider v-if="showForm"></v-divider>
<v-form v-if="showForm">
<v-text-field
label="Username"
required
type="text"
v-model="newActor.preferred_username"
:rules="[rules.required]"
:error="this.state.username.status"
:error-messages="this.state.username.msg"
:suffix="this.host()"
hint="You will be able to create more identities once registered"
persistent-hint
label="Username"
required
type="text"
v-model="newActor.preferred_username"
:rules="[rules.required]"
:error="this.state.username.status"
:error-messages="this.state.username.msg"
:suffix="this.host()"
hint="You will be able to create more identities once registered"
persistent-hint
>
</v-text-field>
<v-textarea
name="input-7-1"
label="Profile description"
hint="Will be displayed publicly on your profile"
name="input-7-1"
label="Profile description"
hint="Will be displayed publicly on your profile"
></v-textarea>
</v-form>
<v-btn
@@ -57,73 +57,77 @@
right
fab
@click="toggleForm()"
>
>
<v-icon>{{ showForm ? 'check' : 'add' }}</v-icon>
</v-btn>
</v-card-text>
</v-card>
</v-flex>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
name: 'Identities',
data() {
return {
actors: [],
newActor: {
preferred_username: '',
summary: '',
},
loading: true,
showForm: false,
rules: {
required: value => !!value || 'Required.',
},
state: {
username: {
status: false,
msg: [],
},
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Identities extends Vue {
actors = [];
newActor = {
preferred_username: '',
summary: '',
};
loading = true;
showForm = false;
rules = {
required: value => !!value || 'Required.',
};
state = {
username: {
status: false,
msg: [],
},
};
},
created() {
this.fetchData();
},
methods: {
created() {
this.fetchData();
}
fetchData() {
eventFetch('/user', this.$store)
.then(response => response.json())
.then((response) => {
this.actors = response.data.actors;
this.loading = false;
});
},
// Implements eventFetch
// eventFetch('/user', this.$store)
// .then(response => response.json())
// .then((response) => {
// this.actors = response.data.actors;
// this.loading = false;
// });
}
sendData() {
this.loading = true;
this.showForm = false;
eventFetch('/actors', this.$store, {
method: 'POST',
body: JSON.stringify({ actor: this.newActor }),
})
.then(response => response.json())
.then((response) => {
this.actors.push(response.data);
this.loading = false;
});
},
// Implements eventFetch
// eventFetch('/actors', this.$store, {
// method: 'POST',
// body: JSON.stringify({ actor: this.newActor }),
// })
// .then(response => response.json())
// .then((response) => {
// this.actors.push(response.data);
// this.loading = false;
// });
}
toggleForm() {
if (this.showForm === true) {
this.sendData();
} else {
this.showForm = true;
}
},
}
host() {
return `@${window.location.host}`;
},
},
};
}
}
</script>

118
js/src/components/Account/Login.vue
View File

@@ -58,90 +58,84 @@
</v-container>
</template>
<script>
<script lang="ts">
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';
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar.vue';
import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { LOGIN } from '@/graphql/auth';
export default {
props: {
email: {
type: String,
required: false,
default: '',
@Component({
components: {
'v-gravatar': Gravatar,
avatar: RegisterAvatar,
},
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: '',
},
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.';
},
})
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;
error = {
show: false,
text: '',
timeout: 3000,
field: {
email: false,
password: false,
},
};
},
methods: {
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.';
},
};
user: any;
beforeCreate() {
if (this.user) {
this.$router.push('/');
}
}
mounted() {
this.credentials.email = this.email;
this.credentials.password = this.password;
}
loginAction(e) {
e.preventDefault();
this.$apollo.mutate({
mutation: LOGIN,
variables: {
email: this.credentials.email,
password: this.credentials.password
}
password: this.credentials.password,
},
}).then((result) => {
this.saveUserData(result.data);
this.$router.push({name: 'Home'});
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}) {
}
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>

126
js/src/components/Account/PasswordReset.vue
View File

@@ -36,75 +36,74 @@
</v-container>
</template>
<script>
export default {
name: 'PasswordReset',
props: {
token: {
type: String,
required: true,
},
},
computed: {
samePasswords() {
return this.rules.password_length(this.credentials.password) === true &&
this.credentials.password === this.credentials.password_confirmation;
},
},
data() {
return {
credentials: {
password: '',
password_confirmation: '',
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class PasswordReset extends Vue {
@Prop({ type: String, required: true }) token!: string;
credentials = {
password: '',
password_confirmation: '',
};
error = {
show: false,
};
state = {
token: {
status: null,
msg: '',
},
error: {
show: false,
password: {
status: null,
msg: '',
},
state: {
token: {
status: null,
msg: '',
},
password: {
status: null,
msg: '',
},
password_confirmation: {
status: null,
msg: '',
},
},
rules: {
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',
password_confirmation: {
status: null,
msg: '',
},
};
},
methods: {
rules = {
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',
};
get samePasswords() {
return this.rules.password_length(this.credentials.password) === true &&
this.credentials.password === this.credentials.password_confirmation;
}
resetAction(e) {
this.resetState();
e.preventDefault();
console.log(this.token);
fetchStory('/users/password-reset/post', this.$store, { method: 'POST', body: JSON.stringify({ password: this.credentials.password, token: this.token }) }).then((data) => {
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' });
}, (error) => {
Promise.resolve(error).then((errormsg) => {
console.log('errormsg', errormsg);
this.error.show = true;
Object.entries(JSON.parse(errormsg).errors).forEach(([key, val]) => {
console.log('key', key);
console.log('val', val[0]);
this.state[key] = { status: false, msg: val[0] };
console.log('state', this.state);
});
});
});
},
// FIXME: implements fetchStory
// fetchStory('/users/password-reset/post', this.$store, {
// method: 'POST',
// body: JSON.stringify({ password: this.credentials.password, token: this.token }),
// }).then((data) => {
// 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' });
// }, (error) => {
// Promise.resolve(error).then((errormsg) => {
// console.log('errormsg', errormsg);
// this.error.show = true;
// Object.entries(JSON.parse(errormsg).errors).forEach(([ key, val ]) => {
// console.log('key', key);
// console.log('val', val[ 0 ]);
// this.state[ key ] = { status: false, msg: val[ 0 ] };
// console.log('state', this.state);
// });
// });
// });
}
resetState() {
this.state = {
token: {
@@ -120,7 +119,6 @@ export default {
msg: '',
},
};
},
},
};
}
};
</script>

142
js/src/components/Account/Register.vue
View File

@@ -68,8 +68,12 @@
<router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
</v-form>
<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>
<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>
@@ -78,85 +82,78 @@
</v-container>
</template>
<script>
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar';
import { CREATE_USER } from '@/graphql/user';
<script lang="ts">
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar.vue';
import { CREATE_USER } from '@/graphql/user';
import { Component, Prop, Vue } from 'vue-property-decorator';
export default {
props: {
default_email: {
type: String,
required: false,
default: '',
@Component({
components: {
'v-gravatar': Gravatar,
avatar: RegisterAvatar,
},
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,
})
export default class Register extends Vue {
@Prop({ type: String, required: false, default: '' }) default_email!: string;
@Prop({ type: String, required: false, default: '' }) default_password!: string;
username = '';
email = this.default_email;
password = this.default_password;
error = {
show: false,
};
showPassword = false;
validationSent = false;
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: {
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.';
},
};
resetState() {
this.state = {
email: {
status: false,
msg: '',
msg: [],
},
username: {
status: false,
msg: '',
msg: [],
},
password: {
status: false,
msg: '',
msg: [],
},
};
},
}
host() {
return `@${window.location.host}`;
},
}
validEmail() {
return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
},
}
submit() {
this.$apollo.mutate({
mutation: CREATE_USER,
@@ -171,19 +168,20 @@ export default {
}).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 lang="scss">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter, .avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
</style>

13
js/src/components/Account/RegisterAvatar.vue
View File

@@ -1,9 +1,12 @@
<template>
<img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
<img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
</template>
<script>
export default {
name: 'RegisterAvatar',
};
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class RegisterAvatar extends Vue {
}
</script>

85
js/src/components/Account/ResendConfirmation.vue
View File

@@ -30,53 +30,48 @@
</v-container>
</template>
<script>
export default {
name: 'ResendConfirmation',
props: {
email: {
type: String,
required: false,
default: '',
},
},
data() {
return {
credentials: {
email: '',
},
validationSent: false,
error: false,
state: {
email: {
status: null,
msg: '',
},
},
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.';
},
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@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: '',
},
};
},
mounted() {
this.credentials.email = this.email;
},
methods: {
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.';
},
};
mounted() {
this.credentials.email = this.email;
}
resendConfirmationAction(e) {
e.preventDefault();
fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
this.validationSent = true;
}).catch((err) => {
Promise.resolve(err).then(() => {
this.error = true;
this.validationSent = true;
});
});
},
},
};
// FIXME: implement fetchStory
// fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
// this.validationSent = true;
// }).catch((err) => {
// Promise.resolve(err).then(() => {
// this.error = true;
// this.validationSent = true;
// });
// });
}
};
</script>

90
js/src/components/Account/SendPasswordReset.vue
View File

@@ -30,54 +30,51 @@
</v-container>
</template>
<script>
export default {
name: 'SendPasswordReset',
props: {
email: {
type: String,
required: false,
default: '',
},
},
mounted() {
this.credentials.email = this.email;
},
data() {
return {
credentials: {
email: '',
},
validationSent: false,
error: false,
state: {
email: {
status: null,
msg: '',
},
},
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.';
},
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class SendPasswordReset extends Vue {
@Prop({ type: String, required: false, default: '' }) email!: string;
credentials = {
email: '',
};
validationSent = false;
error = false;
state = {
email: {
status: null,
msg: '',
},
};
},
methods: {
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.';
},
};
mounted() {
this.credentials.email = this.email;
}
resendConfirmationAction(e) {
e.preventDefault();
fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
this.error = false;
this.validationSent = true;
}).catch((err) => {
Promise.resolve(err).then((data) => {
this.error = true;
this.state.email = { status: false, msg: data.errors };
});
});
},
// FIXME: implement fetchStory
// fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
// this.error = false;
// this.validationSent = true;
// }).catch((err) => {
// Promise.resolve(err).then((data) => {
// this.error = true;
// this.state.email = { status: false, msg: data.errors };
// });
// });
}
resetState() {
this.state = {
email: {
@@ -85,7 +82,6 @@ export default {
msg: '',
},
};
},
},
};
}
};
</script>

58
js/src/components/Account/Validate.vue
View File

@@ -1,36 +1,37 @@
<template>
<v-container>
<h1 v-if="loading"><translate>Your account is being validated</translate></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"><translate>Error while validating account</translate></v-alert>
<v-alert :value="true" variant="danger">
<translate>Error while validating account</translate>
</v-alert>
</div>
<h1 v-else><translate>Your account has been validated</translate></h1>
<h1 v-else>
<translate>Your account has been validated</translate>
</h1>
</div>
</v-container>
</template>
<script>
import { VALIDATE_USER } from '@/graphql/user';
<script lang="ts">
import { VALIDATE_USER } from '@/graphql/user';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { AUTH_TOKEN, AUTH_USER_ACTOR, 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();
}
export default {
name: 'Validate',
data() {
return {
loading: true,
failed: false,
};
},
props: {
token: {
type: String,
required: true,
},
},
created() {
this.validateAction();
},
methods: {
validateAction() {
this.$apollo.mutate({
mutation: VALIDATE_USER,
@@ -41,18 +42,19 @@ export default {
this.loading = false;
console.log(data);
this.saveUserData(data.data);
this.$router.push({name: 'Home'});
this.$router.push({ name: 'Home' });
}).catch((error) => {
this.loading = false;
console.log(error);
this.failed = true;
});
},
saveUserData({validateUser: login}) {
}
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>