All components now use typescript

master
Chocobozzz 4 years ago
parent b409a5583d
commit b1aa589bc7
No known key found for this signature in database
GPG Key ID: 583A612D890159BE

952
js/package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -19,7 +19,7 @@
"graphql-tag": "^2.9.0",
"material-design-icons": "^3.0.1",
"moment": "^2.22.2",
"ngeohash": "^0.6.0",
"ngeohash": "^0.6.3",
"register-service-worker": "^1.4.1",
"vue": "^2.5.17",
"vue-apollo": "^3.0.0-beta.26",
@ -38,12 +38,10 @@
"@types/mocha": "^5.2.4",
"@vue/cli-plugin-babel": "^3.1.1",
"@vue/cli-plugin-e2e-nightwatch": "^3.1.1",
"@vue/cli-plugin-eslint": "^3.1.5",
"@vue/cli-plugin-pwa": "^3.1.2",
"@vue/cli-plugin-typescript": "^3.2.0",
"@vue/cli-plugin-unit-mocha": "^3.1.1",
"@vue/cli-service": "^3.1.4",
"@vue/eslint-config-airbnb": "^3.0.5",
"@vue/eslint-config-typescript": "^3.1.0",
"@vue/test-utils": "^1.0.0-beta.26",
"chai": "^4.2.0",

@ -150,64 +150,62 @@
</template>
<script lang="ts">
import NavBar from '@/components/NavBar.vue';
import { Component, Vue } from 'vue-property-decorator';
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
import NavBar from '@/components/NavBar.vue';
import { Component, Vue } from 'vue-property-decorator';
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
@Component({
components: {
NavBar
}
})
export default class App extends Vue {
drawer = false
fab = false
user = localStorage.getItem(AUTH_USER_ID)
items = [
{
icon: 'poll', text: 'Events', route: 'EventList', role: null
},
{
icon: 'group', text: 'Groups', route: 'GroupList', role: null
},
{
icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN'
},
{ icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
{ icon: 'help', text: 'Help', role: null },
{ icon: 'phonelink', text: 'App downloads', role: null }
]
error = {
timeout: 3000,
show: false,
text: ''
}
@Component({
components: {
NavBar,
},
})
export default class App extends Vue {
drawer = false;
fab = false;
user = localStorage.getItem(AUTH_USER_ID);
items = [
{
icon: 'poll', text: 'Events', route: 'EventList', role: null,
},
{
icon: 'group', text: 'Groups', route: 'GroupList', role: null,
},
{
icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN',
},
{ icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
{ icon: 'help', text: 'Help', role: null },
{ icon: 'phonelink', text: 'App downloads', role: null },
];
error = {
timeout: 3000,
show: false,
text: '',
};
show_new_event_button = false
actor = localStorage.getItem(AUTH_USER_ACTOR)
actor = localStorage.getItem(AUTH_USER_ACTOR);
get displayed_name () {
// FIXME: load actor
return 'no implemented'
// return this.actor.display_name === null ? this.actor.username : this.actor.display_name
}
showMenuItem (elem) {
// FIXME: load actor
return false
// return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
}
get displayed_name () {
// FIXME: load actor
return 'no implemented';
// return this.actor.display_name === null ? this.actor.username : this.actor.display_name
}
getUser () {
return this.user === undefined ? false : this.user
}
showMenuItem (elem) {
// FIXME: load actor
return false;
// return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
}
toggleDrawer () {
this.drawer = !this.drawer
}
getUser () {
return this.user === undefined ? false : this.user;
}
toggleDrawer () {
this.drawer = !this.drawer;
}
}
</script>
<style>

@ -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>

@ -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>

@ -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,
},
})
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,
},
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.';
},
};
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: {
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>

@ -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: '',
},
error: {
show: false,
<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: '',
},
state: {
token: {
status: null,
msg: '',
},
password: {
status: null,
msg: '',
},
password_confirmation: {
status: null,
msg: '',
},
password: {
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>

@ -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-enter-active {
transition: opacity 1s ease;
}
.avatar-enter, .avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
.avatar-leave {
display: none;
}
</style>

@ -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>

@ -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: '',
},
<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: '',
},
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.';
},
};
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;
},
methods: {
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>

@ -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: '',
},
<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: '',
},
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.';
},
};
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: {
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>

@ -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>

@ -4,7 +4,9 @@
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title><translate>Create a new category</translate></v-toolbar-title>
<v-toolbar-title>
<translate>Create a new category</translate>
</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form>
@ -29,7 +31,9 @@
@change="onFilePicked"
>
</v-flex>
<v-btn color="primary" @click="create"><translate>Create category</translate></v-btn>
<v-btn color="primary" @click="create">
<translate>Create category</translate>
</v-btn>
</v-form>
</v-card-text>
</v-card>
@ -38,50 +42,48 @@
</v-container>
</template>
<script>
import { UPLOAD_PICTURE } from '@/graphql/upload';
import { CREATE_CATEGORY } from '@/graphql/category';
<script lang="ts">
import { CREATE_CATEGORY } from '@/graphql/category';
import { Component, Vue } from 'vue-property-decorator';
export default {
name: 'create-category',
data() {
return {
title: '',
description: '',
image: {
url: '',
name: '',
file: '',
},
@Component
export default class CreateCategory extends Vue {
title = '';
description = '';
image = {
url: '',
name: '',
file: '',
};
},
methods: {
create() {
this.$apollo.mutate({
mutation: CREATE_CATEGORY,
variables: {
title: this.title,
description: this.description,
picture: this.$refs.image.files[0],
}
picture: (this.$refs['image'] as any).files[ 0 ],
},
}).then((data) => {
console.log(data);
}).catch((error) => {
console.error(error);
});
},
pickFile () {
this.$refs.image.click ()
},
}
pickFile() {
(this.$refs['image'] as any).click();
}
onFilePicked(e) {
const files = e.target.files;
if(files[0] === undefined || files[0].name.lastIndexOf('.') <= 0) {
console.error("File is incorrect")
if (files[ 0 ] === undefined || files[ 0 ].name.lastIndexOf('.') <= 0) {
console.error('File is incorrect');
}
this.image.name = files[0].name;
},
}