Altra conversione in Typescript , partendo da un progetto di esempio funzionante...
This commit is contained in:
paolo
@@ -1,24 +0,0 @@
|
||||
<template lang="html">
|
||||
<div id="firebaseui-auth-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'auth',
|
||||
mounted () {
|
||||
var uiConfig = {
|
||||
signInSuccessUrl: '/success',
|
||||
signInOptions: [
|
||||
//firebase.auth.GoogleAuthProvider.PROVIDER_ID,
|
||||
//firebase.auth.EmailAuthProvider.PROVIDER_ID
|
||||
]
|
||||
}
|
||||
//var ui = new firebaseui.auth.AuthUI(firebase.auth())
|
||||
//ui.start('#firebaseui-auth-container', uiConfig)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Signup succeeded</h1>
|
||||
<button @click='logOut'>Log out</button>
|
||||
<hr>
|
||||
<img :src="photo" style='height: 120px'>
|
||||
<br>
|
||||
<p>{{name}}</p>
|
||||
<p>{{email}}</p>
|
||||
<p>{{userId}}</p>
|
||||
<hr>
|
||||
<pre>{{user}}</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
photo: '',
|
||||
userId: '',
|
||||
name: '',
|
||||
email: '',
|
||||
user: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="error-page window-height window-width bg-light column items-center">
|
||||
<div class="error-code bg-primary flex items-center justify-center">
|
||||
404
|
||||
</div>
|
||||
<div>
|
||||
<div class="error-card card bg-white column items-center justify-center">
|
||||
<i class="text-grey-5">error_outline</i>
|
||||
<p class="caption text-center">Oops. Nothing here...</p>
|
||||
<p class="text-center group">
|
||||
<button v-if="canGoBack" class="grey push small" @click="goBack">
|
||||
<i class="on-left">keyboard_arrow_left</i>
|
||||
Go back
|
||||
</button>
|
||||
<router-link to="/">
|
||||
<button class="grey push small">
|
||||
Go home
|
||||
<i class="on-right">home</i>
|
||||
</button>
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
canGoBack: window.history.length > 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack () {
|
||||
window.history.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.error-page
|
||||
.error-code
|
||||
height 50vh
|
||||
width 100%
|
||||
padding-top 15vh
|
||||
font-size 30vmax
|
||||
color rgba(255, 255, 255, .2)
|
||||
overflow hidden
|
||||
.error-card
|
||||
margin-top -25px
|
||||
width 90vw
|
||||
max-width 600px
|
||||
padding 50px
|
||||
i
|
||||
font-size 5rem
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div class="card bg-white">
|
||||
<div class="card-title bg-teal text-white">
|
||||
{{cardTitle}}
|
||||
<div class=" float-right">
|
||||
<q-fab icon="keyboard_arrow_left" direction="left" classNames="primary">
|
||||
</q-fab>
|
||||
<button class="primary circular raised gt-sm inline" @click="toImage()">
|
||||
<i>portrait</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<canvas ref="chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import Chart from 'chart.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
type: 'horizontalBar',
|
||||
chart: '',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
cardTitle: {
|
||||
default () { return 'Graph'}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.startChart()
|
||||
},
|
||||
type () {
|
||||
this.chart.destroy()
|
||||
this.startChart()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataForChart () {
|
||||
return {
|
||||
labels: Object.keys(this.data),
|
||||
datasets: [{
|
||||
data: Object.values(this.data),
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255,99,132,1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)'
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startChart () {
|
||||
let axesStartFromZero = [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
this.chart = new Chart(this.$refs.chart,
|
||||
{
|
||||
type: this.type,
|
||||
data: this.dataForChart,
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
yAxes: axesStartFromZero,
|
||||
xAxes: axesStartFromZero
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
toImage () {
|
||||
window.open(this.chart.toBase64Image());
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div class="card bg-white">
|
||||
<div class="card-title bg-teal text-white">
|
||||
{{cardTitle}}
|
||||
<div class=" float-right">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="flex">
|
||||
<div class="list item-inset-delimiter auto">
|
||||
<q-infinite-scroll :handler="loadMore" :offset="7">
|
||||
<!-- Content, in this case some <p> tags -->
|
||||
<div class="item" v-for="(todo, index) in showingData">
|
||||
<div class="item-primary">{{index + 1}}</div>
|
||||
<div class="item-content has-secondary">
|
||||
<span v-show="todo.completed" class="completed-line">{{todo.title}}</span>
|
||||
<input v-show="!todo.completed" v-model.lazy="todo.title" class="fit" @change="changeTitle(todo)">
|
||||
</div>
|
||||
<q-toggle class="item-secondary"
|
||||
icon="done"
|
||||
@input="completeTodo(todo)"
|
||||
v-model="todo.completed"
|
||||
></q-toggle>
|
||||
</div>
|
||||
</q-infinite-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import Chart from 'chart.js'
|
||||
|
||||
export default {
|
||||
mounted () {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
todos: [],
|
||||
actualMaxPosition: 10
|
||||
}
|
||||
},
|
||||
props: ['cardTitle', 'api'],
|
||||
watch: {
|
||||
},
|
||||
computed: {
|
||||
showingData () {
|
||||
return this.todos.slice(0, this.actualMaxPosition)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadMore (index, done) {
|
||||
setTimeout(() => {
|
||||
this.actualMaxPosition += 9
|
||||
done()
|
||||
}, 1000)
|
||||
|
||||
},
|
||||
completeTodo (todo) {
|
||||
},
|
||||
changeTitle (todo) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
input {
|
||||
padding: 7px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.completed-line {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div class="card text-white" :class="backgroundColor">
|
||||
<div class="card-content ">
|
||||
<div class="row">
|
||||
<div class="width-1of3">
|
||||
<i>{{iconName}}</i>
|
||||
</div>
|
||||
<div class="width-2of3">
|
||||
<p class="text-italic ">{{title}}</p>
|
||||
<h5 ref="number">
|
||||
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
import CountUp from 'countup.js'
|
||||
export default {
|
||||
props: ['title', 'total', 'backgroundColor', 'iconName'],
|
||||
mounted () {
|
||||
this.countUp.start()
|
||||
},
|
||||
computed: {
|
||||
countUp () {
|
||||
return new CountUp(this.$refs.number, 0, this.total, 0, 2.5, this.options)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
total () {
|
||||
this.countUp.start()
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: {
|
||||
separator: '.'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
i {
|
||||
font-size: 54px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="layout-padding ">
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Total Posts"
|
||||
background-color="bg-teal-9"
|
||||
icon-name="local_post_office"
|
||||
:total="totalPosts">
|
||||
</cardTotal>
|
||||
</div>
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Total comments"
|
||||
background-color="bg-teal-7"
|
||||
icon-name="comment"
|
||||
:total="totalComments">
|
||||
</cardTotal>
|
||||
</div>
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Static total"
|
||||
background-color="bg-teal-5"
|
||||
icon-name="repeat_one"
|
||||
:total="50004">
|
||||
</cardTotal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of2 lg-width-1of3 sm-auto">
|
||||
<card-chart
|
||||
card-title="Total Graph"
|
||||
:data="dataForGraph"
|
||||
></card-chart>
|
||||
</div>
|
||||
<div class="auto">
|
||||
<knob-statistics
|
||||
card-title="General statistics">
|
||||
</knob-statistics>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-4of5 sm-width-1of1">
|
||||
<card-todo
|
||||
card-title="Generic todos"
|
||||
api="todos">
|
||||
</card-todo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import cardChart from './cardChart.vue'
|
||||
import cardTotal from './cardTotal.vue'
|
||||
import cardTodo from './cardTodo.vue'
|
||||
import knobStatistics from './knobStatistics.vue'
|
||||
import { mapActions } from 'vuex'
|
||||
import * as types from '../../../../store/mutation-types'
|
||||
export default {
|
||||
name: 'Home',
|
||||
mounted () {
|
||||
// Axios.all not working
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
totalPosts: 0,
|
||||
totalComments: 0,
|
||||
totalTodos: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataForGraph () {
|
||||
return {
|
||||
posts: this.totalPosts,
|
||||
todos: this.totalTodos,
|
||||
comments: this.totalComments
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("glob", {'setPosts': types.SET_POSTS})
|
||||
},
|
||||
components: {
|
||||
cardTotal,
|
||||
cardChart,
|
||||
cardTodo,
|
||||
knobStatistics
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
//import { Toast } from 'quasar'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
minExpenses: 0,
|
||||
minIncome: 0,
|
||||
maxIncome: 5000,
|
||||
currentIncome: 998,
|
||||
currentExpenses: 125,
|
||||
doubleRangeMinMax: {
|
||||
min: 0,
|
||||
max: 5000
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentIncome () {
|
||||
if (this.currentIncome < this.currentExpenses){
|
||||
this.currentExpenses = this.currentIncome
|
||||
//Toast.create.negative({html: `You're in financial trouble.`})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maxExpenses () {
|
||||
return this.currentIncome
|
||||
}
|
||||
|
||||
},
|
||||
props: ['cardTitle'],
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<span class="tag label text-white rotate rotate-270 shadow-2" :class="tagClasses">
|
||||
<q-knob
|
||||
class="rotate-90"
|
||||
v-model="value"
|
||||
:size="size"
|
||||
style="font-size: 1.9rem"
|
||||
color="#fff"
|
||||
:track-color="trackColor"
|
||||
:min="min"
|
||||
:max="max"
|
||||
readonly
|
||||
:placeholder="fullPlaceHolder"
|
||||
></q-knob>
|
||||
</span>
|
||||
<span class="title block" :style="{color: titleColor}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
|
||||
props: {
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
required: true
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
title: {},
|
||||
titleColor: {},
|
||||
tagClasses: {},
|
||||
trackColor: {},
|
||||
placeholderBefore: {}
|
||||
},
|
||||
computed: {
|
||||
fullPlaceHolder () {
|
||||
return this.placeholderBefore ? `${this.placeholderBefore}${this.value}` : this.value
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.label.tag{
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.8rem;
|
||||
}
|
||||
.title {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-padding ">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Choose photos to reveal of the user
|
||||
</div>
|
||||
<div class="card-content bg-white adv-form-one">
|
||||
<q-stepper ref="stepper" @step="stepNumber => { currentStep = stepNumber }">
|
||||
<q-step title="Find a user by username">
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-2of5 sm-width-1of1">
|
||||
<e-input
|
||||
label="User Name"
|
||||
v-model="userName"
|
||||
:validation="$v.userName"
|
||||
:validation-messages="validationMessages.userName"
|
||||
:value="userName"
|
||||
></e-input>
|
||||
<button class="teal raised outline" @click="findUser()">Search</button>
|
||||
</div>
|
||||
<div class="width-1of2 gt-width-3of5">
|
||||
<card-user-data :user-data="userData" v-model="selectedAlbum"></card-user-data>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<button class="orange" v-if="selectedAlbum" @click="$refs.stepper.nextStep()">Continue</button>
|
||||
</div>
|
||||
</q-step>
|
||||
<q-step title="Choose photos">
|
||||
<card-data-table :selected-album="selectedAlbum" v-on:selectedRows="populatePhotos"></card-data-table>
|
||||
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of4 sm-width-3of3">
|
||||
<button class="orange fit" @click="$refs.stepper.previousStep()">Back</button>
|
||||
</div>
|
||||
<div class="width-1of4 sm-width-3of3" v-show="selectedPhotos.length > 0">
|
||||
<button class="green fit" @click="finish()">Preview</button>
|
||||
</div>
|
||||
</div>
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-modal ref="previewModal" class="minimized">
|
||||
<q-gallery-slider :src="photosForGalery" ></q-gallery-slider>
|
||||
</q-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import { required } from 'vuelidate/lib/validators'
|
||||
import eInput from '../../embeeded/eInput.vue'
|
||||
import cardUserData from './cardUserData.vue'
|
||||
//import cardDataTable from './cardDataTable.vue'
|
||||
export default {
|
||||
name: 'AdvancedFormOne',
|
||||
data () {
|
||||
return {
|
||||
userName: 'Bret',
|
||||
userData: {},
|
||||
currentStep: '1',
|
||||
selectedAlbum: '',
|
||||
selectedPhotos: [],
|
||||
validationMessages: {
|
||||
userName: {
|
||||
required: 'Username is required.'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
userName: {
|
||||
required
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
photosForGalery () {
|
||||
let galery = []
|
||||
this.selectedPhotos.forEach(photo => { galery.push(photo.data.thumbnailUrl) })
|
||||
return galery
|
||||
}
|
||||
},
|
||||
components: {
|
||||
eInput,
|
||||
cardUserData,
|
||||
//cardDataTable
|
||||
},
|
||||
methods: {
|
||||
finish () {
|
||||
this.$refs.previewModal.open()
|
||||
},
|
||||
findUser () {
|
||||
this.$http.jsonplaceholder
|
||||
.get(`users?username=${this.userName}`)
|
||||
.then(response => { this.userData = response.data[0] })
|
||||
|
||||
this.$v.$touch()
|
||||
},
|
||||
populatePhotos (photos) {
|
||||
photos.forEach(item => { this.selectedPhotos.push(item) })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="card" v-if="userData.name">
|
||||
<div class="card-content">
|
||||
<h6>{{userData.name}}</h6>
|
||||
{{userData.email}}
|
||||
<p class="caption">Choose one of the user Albums</p>
|
||||
<div class="list">
|
||||
<label class="item two-lines" v-for="album in filteredAlbums">
|
||||
<div class="item-primary">
|
||||
<q-radio @input="change(album)" v-model="selectedAlbum" :val="album.id"></q-radio>
|
||||
</div>
|
||||
<div class="item-content post-data">
|
||||
<div class="ellipsis">{{album.title}}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: {
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
userAlbums: [],
|
||||
selectedAlbum: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredAlbums () {
|
||||
return this.userAlbums.slice(0, 3)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (album) {
|
||||
this.$emit('input', album)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userData () {
|
||||
this.$http.jsonplaceholder
|
||||
.get(`albums?userId=${this.userData.id}`)
|
||||
.then(response => { this.userAlbums = response.data })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@media screen and (min-width: 600px) {
|
||||
.post-data{
|
||||
max-width: 110px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 920px) {
|
||||
.post-data{
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1280px) {
|
||||
.post-data{
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,112 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="floating-label" :class="labelColor">
|
||||
<q-datetime type="datetime"
|
||||
class="full-width"
|
||||
:class="borderColor"
|
||||
:label="label"
|
||||
:value="value"
|
||||
:format="format"
|
||||
@input="change($event)"
|
||||
></q-datetime>
|
||||
<transition-group name="slide-fade">
|
||||
<span class="label text-red"
|
||||
v-for="(key, index) in messageKeys"
|
||||
v-show="!validation[key] && validation.$dirty"
|
||||
:key="index">
|
||||
{{validationMessages[key]}}
|
||||
</span>
|
||||
</transition-group>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="validAndDirty" class="text-green" >check</i>
|
||||
</transition>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="invalidAndDirty" class="text-red">clear</i>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: {
|
||||
format: {
|
||||
type: String
|
||||
},
|
||||
validation: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
validationMessages: {},
|
||||
label: {}
|
||||
},
|
||||
computed: {
|
||||
messageKeys () {
|
||||
return Object.keys(this.validationMessages)
|
||||
},
|
||||
validAndDirty () {
|
||||
return !this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
invalidAndDirty () {
|
||||
return this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
labelColor () {
|
||||
return this.validAndDirty ? 'label-success' : '' ||
|
||||
this.invalidAndDirty ? 'label-error animate-pop' : ''
|
||||
},
|
||||
borderColor () {
|
||||
return this.validAndDirty ? 'has-success' : '' ||
|
||||
this.invalidAndDirty ? 'has-error' : ''
|
||||
},
|
||||
shakeDiv () {
|
||||
return this.invalidAndDirty ? 'animate-pop' : ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (value) {
|
||||
console.log(value)
|
||||
this.validation.$touch()
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.has-success {
|
||||
border-bottom: 2px solid #4caf50 !important;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 7px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.floating-label {
|
||||
min-height: 81px;
|
||||
}
|
||||
.floating-label span .label{
|
||||
padding: 0 0.3rem 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to, .fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-enter-active, .slide-fade-leave-active {
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
.slide-fade-enter{
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-leave-active{
|
||||
transform: translateY(-7px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="floating-label" :class="shakeDiv">
|
||||
<input required class="full-width" :class="borderColor"
|
||||
:value="value"
|
||||
@input="change($event.target.value)">
|
||||
<label :class="labelColor">{{label}}</label>
|
||||
<transition-group name="slide-fade">
|
||||
<span class="label text-red"
|
||||
v-for="(key, index) in messageKeys"
|
||||
v-show="!validation[key] && validation.$dirty"
|
||||
:key="index">
|
||||
|
||||
{{validationMessages[key]}}
|
||||
</span>
|
||||
</transition-group>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="validAndDirty" class="text-green" >check</i>
|
||||
</transition>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="invalidAndDirty" class="text-red">clear</i>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: {
|
||||
validation: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
validationMessages: {},
|
||||
label: {}
|
||||
},
|
||||
computed: {
|
||||
messageKeys () {
|
||||
return Object.keys(this.validationMessages)
|
||||
},
|
||||
validAndDirty () {
|
||||
return !this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
invalidAndDirty () {
|
||||
return this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
labelColor () {
|
||||
return this.validAndDirty ? 'text-green' : '' ||
|
||||
this.invalidAndDirty ? 'text-red ' : ''
|
||||
},
|
||||
borderColor () {
|
||||
return this.validAndDirty ? 'has-success' : '' ||
|
||||
this.invalidAndDirty ? 'has-error' : ''
|
||||
},
|
||||
shakeDiv () {
|
||||
return this.invalidAndDirty ? 'animate-pop' : ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
change (value) {
|
||||
this.validation.$touch()
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.has-success {
|
||||
border-bottom: 2px solid #4caf50 !important;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 7px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.floating-label {
|
||||
min-height: 81px;
|
||||
}
|
||||
.floating-label span .label{
|
||||
padding: 0 0.3rem 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to, .fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-enter-active, .slide-fade-leave-active {
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
.slide-fade-enter{
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-leave-active{
|
||||
transform: translateY(-7px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="floating-label" :class="labelColor">
|
||||
<q-select :type="type"
|
||||
class="full-width"
|
||||
:class="borderColor"
|
||||
:options="options"
|
||||
:label="label"
|
||||
:value="value"
|
||||
@input="change($event)"
|
||||
></q-select>
|
||||
<transition-group name="slide-fade">
|
||||
<span class="label text-red"
|
||||
v-for="(key, index) in messageKeys"
|
||||
v-show="!validation[key] && validation.$dirty"
|
||||
:key="index">
|
||||
{{validationMessages[key]}}
|
||||
</span>
|
||||
</transition-group>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="validAndDirty" class="text-green" >check</i>
|
||||
</transition>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="invalidAndDirty" class="text-red">clear</i>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: {
|
||||
validation: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
required: true
|
||||
},
|
||||
validationMessages: {},
|
||||
label: {},
|
||||
options: {}
|
||||
},
|
||||
computed: {
|
||||
messageKeys () {
|
||||
return Object.keys(this.validationMessages)
|
||||
},
|
||||
validAndDirty () {
|
||||
return !this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
invalidAndDirty () {
|
||||
return this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
labelColor () {
|
||||
return this.validAndDirty ? 'label-success' : '' ||
|
||||
this.invalidAndDirty ? 'label-error animate-pop' : ''
|
||||
},
|
||||
borderColor () {
|
||||
return this.validAndDirty ? 'has-success' : '' ||
|
||||
this.invalidAndDirty ? 'has-error' : ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
change (value) {
|
||||
this.validation.$touch()
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.has-success {
|
||||
border-bottom: 2px solid #4caf50 !important;
|
||||
}
|
||||
.label-success .q-picker-textfield-label {
|
||||
color: #4caf50;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 7px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.floating-label {
|
||||
min-height: 81px;
|
||||
}
|
||||
.floating-label span .label{
|
||||
padding: 0 0.3rem 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to, .fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-enter-active, .slide-fade-leave-active {
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
.slide-fade-enter{
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-leave-active{
|
||||
transform: translateY(-7px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-padding ">
|
||||
<div class="flex wrap gutter">
|
||||
<div class="gt-md-width-1of3 width-1of1">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Input
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<e-input
|
||||
label="Name"
|
||||
v-model="name"
|
||||
:validation="$v.name"
|
||||
:validation-messages="validationMessages.name"
|
||||
:value="name"
|
||||
></e-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gt-md-width-1of3 width-1of1">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Select
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<e-select
|
||||
type="list"
|
||||
label="Authentication"
|
||||
v-model="authentication"
|
||||
:validation="$v.authentication"
|
||||
:validation-messages="validationMessages.authentication"
|
||||
:value="authentication"
|
||||
:options="options"
|
||||
></e-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gt-md-width-1of3 width-1of1">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
DateTime
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<e-date-time
|
||||
format="YYYY/MM/DD"
|
||||
label="Date of birth"
|
||||
v-model="dateOfBirth"
|
||||
:validation="$v.dateOfBirth"
|
||||
:validation-messages="validationMessages.dateOfBirth"
|
||||
:value="dateOfBirth"
|
||||
></e-date-time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap justify-center">
|
||||
<div class="width-1of3">
|
||||
<button class="teal raised outline fit" @click="$v.$touch()">Try Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import { required, minLength, alpha } from 'vuelidate/lib/validators'
|
||||
import eInput from './eInput.vue'
|
||||
import eSelect from './eSelect.vue'
|
||||
import eDateTime from './eDateTime.vue'
|
||||
export default {
|
||||
name: 'EmbeededValidationsElements',
|
||||
mounted () {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
name: '',
|
||||
authentication: '',
|
||||
dateOfBirth: '',
|
||||
validationMessages: {
|
||||
name: {
|
||||
required: 'Name is required.',
|
||||
minLength: 'Minimum 5 characters.',
|
||||
alpha: 'Only letters.'
|
||||
},
|
||||
authentication: {
|
||||
required: 'Authentication is required.'
|
||||
},
|
||||
dateOfBirth: {
|
||||
required: 'Date of birth is required.'
|
||||
}
|
||||
},
|
||||
options: [
|
||||
{ label: 'Google', value: 'google' },
|
||||
{ label: 'Facebook', value: 'facebook' },
|
||||
{ label: '', value: '' }
|
||||
]
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
name: {
|
||||
required,
|
||||
minLength: minLength(5),
|
||||
alpha
|
||||
},
|
||||
authentication: {
|
||||
required
|
||||
},
|
||||
dateOfBirth: {
|
||||
required
|
||||
}
|
||||
},
|
||||
components: {
|
||||
eInput,
|
||||
eSelect,
|
||||
eDateTime
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<q-modal ref="modal" @open="startMap()">
|
||||
<div class="card fit">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Adress of {{user.name}}
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<div id="map"></div>
|
||||
<div class="wrap gutter">
|
||||
<div class="width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.address.street">
|
||||
<label>Street</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.address.suite">
|
||||
<label>Suite</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.address.city">
|
||||
<label>City</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.address.zipcode">
|
||||
<label>Zipcode</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions justify-center flex">
|
||||
<div class="width-1of3 sm-width-3of3">
|
||||
<button class="primary outline raised fit" @click="save()">Save</button>
|
||||
</div>
|
||||
<div class="width-1of3 sm-width-3of3">
|
||||
<button class="teal outline raised fit" @click="$refs.modal.close()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</q-modal>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
//import { Toast } from 'quasar'
|
||||
//import GMaps from 'gmaps'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
map: ''
|
||||
}
|
||||
},
|
||||
props: ['user'],
|
||||
methods: {
|
||||
save () {
|
||||
this.$http.jsonplaceholder
|
||||
.patch(`users/${this.user.id}`, {address: this.user.address})
|
||||
.then(response => {
|
||||
|
||||
})
|
||||
},
|
||||
startMap () {
|
||||
let vm = this
|
||||
/*
|
||||
this.map = new GMaps({
|
||||
el: '#map',
|
||||
lat: parseFloat(this.user.address.geo.lat),
|
||||
lng: parseFloat(this.user.address.geo.lng),
|
||||
zoom: 3,
|
||||
dblclick (e) {
|
||||
vm.map.removeMarkers()
|
||||
vm.addMarker(e.latLng.lat(), e.latLng.lng())
|
||||
}
|
||||
})
|
||||
this.addMarker(this.user.address.geo.lat, this.user.address.geo.lng)
|
||||
*/
|
||||
},
|
||||
addMarker (lat, lng) {
|
||||
this.map.addMarker({
|
||||
lat: parseFloat(lat),
|
||||
lng: parseFloat(lng)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#map {
|
||||
width: 300px !important;
|
||||
height: 300px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-padding ">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Search Users
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<div class="flex">
|
||||
<div class="width-2of3 gt-bg-width-1of3 sm-auto">
|
||||
<q-autocomplete v-model="terms" :delay="0" @search="search" :max-results="4" @selected="selected">
|
||||
<q-search v-model="terms" placeholder="Search by name"></q-search>
|
||||
</q-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
<q-transition name="slide">
|
||||
<user-form :user="selectedUser" v-show="selectedUser.name"></user-form>
|
||||
</q-transition>
|
||||
</div>
|
||||
<q-transition name="slide">
|
||||
<div class="card-actions justify-center flex" v-show="selectedUser.name">
|
||||
<div class="width-1of3 sm-width-3of3">
|
||||
<button class="primary raised outline fit" @click="save()">Save</button>
|
||||
</div>
|
||||
<div class="width-1of3 sm-width-3of3">
|
||||
<button class="teal raised outline fit" @click="$refs.modal.$children[0].open()">Check Adress</button>
|
||||
</div>
|
||||
</div>
|
||||
</q-transition>
|
||||
</div>
|
||||
</div>
|
||||
<modal-adress :user="selectedUser" ref="modal"></modal-adress>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import userForm from './userForm.vue'
|
||||
import modalAdress from './modalAdress.vue'
|
||||
export default {
|
||||
name: 'Form',
|
||||
mounted () {
|
||||
this.getUsers()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
terms: '',
|
||||
users: [],
|
||||
selectedUser: { address: {} }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
usersParsed () {
|
||||
return this.users.map(user => {
|
||||
return {
|
||||
allData: user,
|
||||
label: user.name,
|
||||
secondLabel: user.email,
|
||||
value: user.name
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
userForm,
|
||||
modalAdress
|
||||
},
|
||||
methods: {
|
||||
search (terms, done) {
|
||||
setTimeout(() => {
|
||||
done(Utils.filter(terms, {field: 'value', list: this.usersParsed}))
|
||||
}, 500)
|
||||
},
|
||||
getUsers () {
|
||||
this.$http.jsonplaceholder
|
||||
.get('users')
|
||||
.then(response => { this.users = response.data })
|
||||
},
|
||||
selected (user) {
|
||||
this.selectedUser = user.allData
|
||||
},
|
||||
save () {
|
||||
this.$http.jsonplaceholder
|
||||
.put(`users/${this.selectedUser.id}`, this.selectedUser)
|
||||
.then(response => { })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#map {
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of3 sm-width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.username">
|
||||
<label>Username</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of3 sm-width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.phone">
|
||||
<label>Phone</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of3 sm-width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.website">
|
||||
<label>Website</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of3 sm-width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.email">
|
||||
<label>Email</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
props: ['user']
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.flex {
|
||||
margin-top: 1%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="card text-white text-center width-3of4 bg-width-2of5 gt-bg-width-1of4 sm-auto " id="login">
|
||||
<div class="card-title" :class="finalBgColor">
|
||||
<svg id="logo" viewBox="0 0 483 483"
|
||||
style="enable-background:new 0 0 460 460;"
|
||||
xml:space="preserve" width="128px" height="128px"
|
||||
v-html="logoMethod">
|
||||
</svg>
|
||||
<h4>{{logo}}</h4>
|
||||
</div>
|
||||
<div class="card-content bg-white ">
|
||||
<div class="stacked-label">
|
||||
<input required class="full-width" type="email" v-model="email">
|
||||
<label>Email</label>
|
||||
</div>
|
||||
<div class="stacked-label">
|
||||
<input required class="full-width" type="password" v-model="password">
|
||||
<label>Password</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions inline-block vertical-middle">
|
||||
<button class="push" @click="login()">Login</button>
|
||||
<button class="red fit" :class="buttonClass" @click="login()">Login Google</button>
|
||||
<button class="blue fit" :class="buttonClass" @click="login()">Login Facebook</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import {mapActions} from 'vuex'
|
||||
import * as types from '../../../store/mutation-types'
|
||||
import Vivus from 'vivus'
|
||||
import logoData from './logoData'
|
||||
import { Platform } from 'quasar'
|
||||
export default {
|
||||
mounted () {
|
||||
this.setLayoutNeeded(false);
|
||||
this.setIsLoginPage(true);
|
||||
this.startAnimation()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.setLayoutNeeded(true);
|
||||
this.setIsLoginPage(false);
|
||||
},
|
||||
computed: {
|
||||
heightSize (){
|
||||
if (Platform.is.desktop) {
|
||||
return 'items-center'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
finalBgColor () {
|
||||
return `bg-${this.bgColor}-${this.toneColor}`
|
||||
},
|
||||
logoMethod () {
|
||||
return logoData[this.logo]
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
logos: Object.keys(logoData),
|
||||
logo: 'Digitalizer',
|
||||
email: 'quasar@admin.com',
|
||||
password: '123456',
|
||||
bgColor: 'purple',
|
||||
toneColor: 10,
|
||||
colors: ['purple', 'blue', 'red', 'green', 'amber'],
|
||||
colorTones: ['2', '4', '6', '8', '10'],
|
||||
buttonClasses: ['normal','outline', 'clear', 'push', 'bordered', 'round'],
|
||||
buttonClass: 'normal',
|
||||
vivus: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("glob", {
|
||||
'setLayoutNeeded': types.SET_LAYOUT_NEEDED,
|
||||
'setIsLoginPage': types.SET_LOGIN_PAGE
|
||||
}),
|
||||
login () {
|
||||
this.setLayoutNeeded(true)
|
||||
this.setIsLoginPage(false)
|
||||
this.$router.push('/')
|
||||
},
|
||||
startAnimation () {
|
||||
this.vivus = new Vivus('logo', {
|
||||
duration: 400,
|
||||
forceRender: false
|
||||
}, function(element) {
|
||||
for (let item of element.el.children[0].children) {
|
||||
item.setAttribute('style', 'fill:white')
|
||||
item.setAttribute('style', 'fill:white')
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.card {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.card-content {
|
||||
min-height: 160px;
|
||||
}
|
||||
button {
|
||||
margin-bottom: 4%;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 300;
|
||||
}
|
||||
</style>
|
||||
@@ -1,90 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
Digitalizer: `<g>
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M259.476,280.364V247.5c0-12.958-10.542-23.5-23.5-23.5s-23.5,10.542-23.5,23.5v29.672 c0,35.757-13.173,70.087-37.094,96.665l-32.981,36.646c-2.771,3.079-2.521,7.821,0.558,10.593c3.078,2.771,7.82,2.521,10.592-0.558 l32.981-36.646c26.403-29.338,40.944-67.231,40.944-106.7V247.5c0-4.687,3.813-8.5,8.5-8.5s8.5,3.813,8.5,8.5v32.864 c0,44.003-16.301,86.167-45.901,118.727l-32.149,35.364c-2.786,3.064-2.56,7.809,0.505,10.595c1.437,1.307,3.242,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l32.148-35.364C241.789,373.854,259.476,328.106,259.476,280.364z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M291.476,247.5c0-30.603-24.897-55.5-55.5-55.5s-55.5,24.897-55.5,55.5v29.672c0,27.839-10.256,54.566-28.879,75.258 l-23.447,26.053c-2.771,3.079-2.521,7.821,0.558,10.593c3.079,2.771,7.82,2.519,10.592-0.558l23.447-26.053 c21.106-23.451,32.73-53.742,32.73-85.293V247.5c0-22.332,18.168-40.5,40.5-40.5c22.332,0,40.5,18.168,40.5,40.5v32.864 c0,51.979-19.256,101.789-54.223,140.252l-27.125,29.839c-2.787,3.064-2.561,7.809,0.504,10.595c1.437,1.307,3.242,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l27.126-29.839c37.481-41.23,58.123-94.622,58.123-150.342V247.5z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M323.476,247.5c0-48.248-39.252-87.5-87.5-87.5s-87.5,39.252-87.5,87.5v29.672c0,19.92-7.339,39.045-20.665,53.851 l-21.112,23.458c-2.771,3.079-2.521,7.821,0.558,10.593c3.078,2.771,7.821,2.519,10.592-0.558l21.112-23.458 c15.809-17.565,24.515-40.254,24.515-63.886V247.5c0-39.977,32.523-72.5,72.5-72.5s72.5,32.523,72.5,72.5v32.864 c0,59.958-22.212,117.412-62.545,161.777l-7.507,8.258c-2.786,3.065-2.56,7.809,0.505,10.595c1.437,1.306,3.243,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l7.506-8.258c42.848-47.133,66.446-108.169,66.446-171.867V247.5z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M116.476,247.5c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5c0-25.255,9.169-49.651,25.819-68.695 c16.495-18.867,39.134-31.205,63.746-34.741c4.1-0.589,6.946-4.391,6.357-8.49c-0.589-4.1-4.394-6.942-8.49-6.357 c-28.16,4.046-54.052,18.15-72.906,39.716C126.962,190.71,116.476,218.613,116.476,247.5z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M131.476,277.172c0-4.143-3.358-7.5-7.5-7.5s-7.5,3.357-7.5,7.5c0,12.002-4.421,23.523-12.449,32.443l-18.779,20.867 c-2.771,3.078-2.521,7.82,0.558,10.592c1.434,1.29,3.227,1.925,5.015,1.925c2.052,0,4.097-0.838,5.577-2.483l18.779-20.866 C125.687,307.971,131.476,292.886,131.476,277.172z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M340.755,344.123c-4.009-1.044-8.105,1.351-9.155,5.357c-2.769,10.579-6.213,21.096-10.24,31.258 c-1.526,3.851,0.359,8.21,4.21,9.735c0.907,0.359,1.841,0.529,2.761,0.529c2.985,0,5.808-1.795,6.975-4.739 c4.249-10.725,7.884-21.822,10.806-32.986C347.16,349.271,344.761,345.172,340.755,344.123z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M315.791,158.632c-3.081-2.771-7.823-2.517-10.592,0.563s-2.517,7.822,0.563,10.591 c22.061,19.832,34.713,48.157,34.713,77.714v32.864c0,12.473-0.86,25.042-2.557,37.359c-0.565,4.104,2.303,7.888,6.406,8.453 c0.347,0.048,0.692,0.071,1.033,0.071c3.688,0,6.903-2.722,7.42-6.478c1.79-12.993,2.698-26.251,2.698-39.406V247.5 C355.476,213.695,341.011,181.304,315.791,158.632z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M280.729,153.076c1.041,0.496,2.138,0.73,3.219,0.73c2.803,0,5.492-1.579,6.777-4.278c1.781-3.739,0.192-8.215-3.547-9.995 c-10.806-5.145-22.291-8.616-34.136-10.317c-4.106-0.585-7.901,2.258-8.49,6.357s2.257,7.901,6.357,8.49 C261.257,145.55,271.289,148.582,280.729,153.076z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M235.976,96c-2.806,0-5.644,0.078-8.437,0.232c-4.136,0.228-7.304,3.766-7.076,7.901c0.229,4.136,3.763,7.321,7.902,7.075 c2.519-0.139,5.079-0.209,7.61-0.209c75.266,0,136.5,61.233,136.5,136.5v32.864c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5V247.5 C387.476,163.963,319.513,96,235.976,96z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M153.972,136.693c1.477,0,2.97-0.436,4.275-1.343c12.478-8.677,26.182-15.155,40.733-19.258 c3.987-1.124,6.308-5.268,5.184-9.254s-5.269-6.304-9.254-5.184c-16.16,4.556-31.376,11.749-45.226,21.379 c-3.401,2.365-4.241,7.039-1.876,10.439C149.265,135.57,151.599,136.693,153.972,136.693z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M99.476,277.172V247.5c0-34.89,13.213-68.118,37.205-93.565c2.841-3.014,2.702-7.76-0.312-10.602 s-7.761-2.701-10.602,0.312C99.14,171.886,84.476,208.77,84.476,247.5v29.672c0,4.083-1.504,8.002-4.234,11.035l-9.248,10.275 c-2.771,3.079-2.521,7.821,0.558,10.592c1.433,1.291,3.227,1.926,5.015,1.926c2.052,0,4.096-0.837,5.577-2.482l9.248-10.275 C96.605,292.449,99.476,284.966,99.476,277.172z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M409.951,189.104c-8.226-24.446-21.299-46.531-38.856-65.642c-2.803-3.05-7.547-3.252-10.597-0.449 c-3.05,2.803-3.251,7.547-0.449,10.598c16.127,17.554,28.134,37.834,35.686,60.276c1.054,3.133,3.976,5.11,7.107,5.11 c0.793,0,1.6-0.127,2.393-0.394C409.16,197.282,411.272,193.029,409.951,189.104z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M295.247,73.822c-3.917-1.341-8.183,0.748-9.524,4.668c-1.341,3.919,0.749,8.183,4.668,9.523 c16.538,5.659,32.065,13.857,46.15,24.369c1.347,1.005,2.92,1.489,4.48,1.489c2.286,0,4.544-1.041,6.017-3.015 c2.478-3.319,1.794-8.019-1.525-10.496C330.176,88.916,313.264,79.986,295.247,73.822z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M119.442,125.908C150.991,95.659,192.377,79,235.976,79c8.096,0,16.237,0.583,24.196,1.731 c4.103,0.598,7.903-2.252,8.495-6.352c0.592-4.1-2.251-7.902-6.351-8.494C253.648,64.635,244.786,64,235.976,64 c-47.487,0-92.56,18.141-126.915,51.081c-34.248,32.838-54.277,76.905-56.397,124.084c-0.186,4.138,3.018,7.644,7.155,7.829 c0.115,0.006,0.229,0.008,0.343,0.008c3.987,0,7.306-3.14,7.487-7.163C69.594,196.527,87.988,156.066,119.442,125.908z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M235.976,32c-16.772,0-33.485,1.944-49.674,5.778c-4.031,0.954-6.524,4.996-5.57,9.026c0.955,4.03,4.997,6.524,9.027,5.569 C204.817,48.809,220.366,47,235.976,47c54.996,0,106.332,21.911,144.55,61.695c1.473,1.533,3.439,2.305,5.41,2.305 c1.869,0,3.741-0.694,5.195-2.091c2.987-2.87,3.083-7.618,0.213-10.604c-19.913-20.729-43.304-37.036-69.522-48.465 C294.666,38.002,265.783,32,235.976,32z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M67.507,125.404c1.372,1.074,3.001,1.595,4.619,1.595c2.227,0,4.431-0.987,5.91-2.876 c21.375-27.302,49.515-48.717,81.377-61.932c3.826-1.587,5.642-5.975,4.055-9.801s-5.977-5.644-9.801-4.055 c-34.241,14.201-64.478,37.21-87.441,66.539C63.672,118.137,64.246,122.851,67.507,125.404z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M131.983,38.725c1.094,0,2.205-0.24,3.255-0.748C166.816,22.73,200.709,15,235.976,15c18.378,0,36.682,2.162,54.401,6.426 c4.025,0.966,8.077-1.51,9.046-5.537c0.969-4.027-1.51-8.078-5.538-9.047C275.019,2.302,255.535,0,235.976,0 c-37.544,0-73.631,8.232-107.259,24.469c-3.73,1.801-5.294,6.285-3.493,10.015C126.517,37.163,129.195,38.725,131.983,38.725z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M321.724,31.383c7.732,3.079,15.385,6.619,22.746,10.52c1.119,0.594,2.321,0.875,3.505,0.875 c2.688,0,5.287-1.449,6.633-3.99c1.939-3.66,0.545-8.199-3.115-10.139c-7.837-4.153-15.986-7.922-24.22-11.201 c-3.849-1.533-8.21,0.345-9.743,4.192C315.998,25.488,317.876,29.851,321.724,31.383z" />
|
||||
</svg>`,
|
||||
Keytronic:
|
||||
`<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M478.665,72c0-39.704-32.296-72-72-72c-19.704,0-38.496,8.184-52,22.288C341.161,8.184,322.369,0,302.665,0 c-39.704,0-72,32.296-72,72c0,24.752,12.456,47.36,33.376,60.688L275.353,144L134.665,284.688l-26.344-26.344 c-3.128-3.128-8.184-3.128-11.312,0l-32,32c-3.128,3.128-3.128,8.184,0,11.312L91.353,328l-12.688,12.688l-26.344-26.344 c-3.128-3.128-8.184-3.128-11.312,0l-33,33c-3.128,3.128-3.128,8.184,0,11.312L34.353,385L4.345,415.008 c-3.128,3.128-3.128,8.184,0,11.312l52,52c1.56,1.56,3.608,2.344,5.656,2.344s4.096-0.784,5.656-2.344l51.008-51.008 l26.344,26.344c3.128,3.128,8.184,3.128,11.312,0l40-40c3.128-3.128,3.128-8.184,0-11.312L169.977,376l168.688-168.688 l7.312,7.312C359.305,235.544,381.913,248,406.665,248c39.704,0,72-32.296,72-72c0-19.704-8.184-38.496-22.288-52 C470.481,110.496,478.665,91.704,478.665,72z M462.665,176c0,30.872-25.128,56-56,56c-19.488,0-37.272-9.944-47.584-26.6 c-0.328-0.52-0.712-1.008-1.152-1.448l-13.608-13.608c-3.128-3.128-8.184-3.128-11.312,0l-180,180 c-3.128,3.128-3.128,8.184,0,11.312L179.353,408l-28.688,28.688l-26.344-26.344c-3.128-3.128-8.184-3.128-11.312,0l-51.008,51.008 l-40.688-40.688l30.008-30.008c3.128-3.128,3.128-8.184,0-11.312L24.977,353l21.688-21.688l26.344,26.344 c3.128,3.128,8.184,3.128,11.312,0l24-24c3.128-3.128,3.128-8.184,0-11.312L81.977,296l20.688-20.688l26.344,26.344 c3.128,3.128,8.184,3.128,11.312,0l152-152c3.128-3.128,3.128-8.184,0-11.312l-17.608-17.608c-0.44-0.44-0.92-0.824-1.448-1.152 c-16.656-10.312-26.6-28.096-26.6-47.584c0-30.872,25.128-56,56-56c17.96,0,34.968,8.768,45.504,23.456c3,4.184,10,4.184,13,0 C371.697,24.768,388.705,16,406.665,16c30.872,0,56,25.128,56,56c0,17.96-8.768,34.968-23.456,45.504 c-2.096,1.504-3.336,3.92-3.336,6.496s1.24,5,3.336,6.496C453.897,141.032,462.665,158.04,462.665,176z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="173.811" y="228.009" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -91.1265 252.0189)" width="169.678" height="16" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="163.35" y="311.983" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -175.1045 217.2252)" width="22.624" height="16" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M406.665,40c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S424.313,40,406.665,40z M406.665,88 c-8.824,0-16-7.176-16-16s7.176-16,16-16c8.824,0,16,7.176,16,16S415.489,88,406.665,88z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="310.663" y="92.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 19.8046 255.7854)" width="16" height="22.624" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="342.661" y="124.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 6.5493 287.7842)" width="16" height="22.624" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="374.659" y="156.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.706 319.7831)" width="16" height="22.624" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M470.665,344h-14.032c-0.44-1.112-0.896-2.216-1.392-3.328l9.928-9.928c3.128-3.128,3.128-8.184,0-11.312l-33.936-33.936 c-3.128-3.128-8.184-3.128-11.312,0l-9.928,9.928c-1.112-0.496-2.216-0.952-3.328-1.392V280c0-4.424-3.576-8-8-8h-48 c-4.424,0-8,3.576-8,8v14.032c-1.112,0.44-2.216,0.896-3.328,1.392l-9.928-9.928c-3.128-3.128-8.184-3.128-11.312,0 l-33.936,33.936c-3.128,3.128-3.128,8.184,0,11.312l9.928,9.928c-0.496,1.112-0.952,2.216-1.392,3.328h-14.032 c-4.424,0-8,3.576-8,8v48c0,4.424,3.576,8,8,8h14.032c0.44,1.112,0.896,2.216,1.392,3.328l-9.928,9.928 c-3.128,3.128-3.128,8.184,0,11.312l33.936,33.936c3.128,3.128,8.184,3.128,11.312,0l9.928-9.928 c1.112,0.496,2.216,0.952,3.328,1.392V472c0,4.424,3.576,8,8,8h48c4.424,0,8-3.576,8-8v-14.032 c1.112-0.44,2.216-0.896,3.328-1.392l9.928,9.928c3.128,3.128,8.184,3.128,11.312,0l33.936-33.936 c3.128-3.128,3.128-8.184,0-11.312l-9.928-9.928c0.496-1.112,0.952-2.216,1.392-3.328h14.032c4.424,0,8-3.576,8-8v-48 C478.665,347.576,475.089,344,470.665,344z M462.665,392h-11.672c-3.496,0-6.576,2.264-7.632,5.592 c-1.216,3.864-2.856,7.8-4.88,11.672c-1.616,3.104-1.032,6.888,1.44,9.36l8.288,8.288l-22.624,22.624l-8.288-8.288 c-2.472-2.472-6.256-3.056-9.36-1.44c-3.872,2.024-7.808,3.664-11.672,4.88c-3.336,1.064-5.6,4.144-5.6,7.64V464h-32v-11.672 c0-3.496-2.264-6.576-5.592-7.632c-3.864-1.216-7.8-2.856-11.672-4.88c-3.104-1.616-6.88-1.032-9.36,1.44l-8.288,8.288 l-22.624-22.624l8.288-8.288c2.472-2.472,3.056-6.256,1.44-9.36c-2.024-3.872-3.664-7.808-4.88-11.672 c-1.064-3.336-4.144-5.6-7.64-5.6h-11.672v-32h11.672c3.496,0,6.576-2.264,7.632-5.592c1.216-3.864,2.856-7.8,4.88-11.672 c1.616-3.104,1.032-6.888-1.44-9.36l-8.288-8.288l22.624-22.624l8.288,8.288c2.48,2.48,6.256,3.048,9.36,1.44 c3.872-2.024,7.808-3.664,11.672-4.88c3.336-1.064,5.6-4.144,5.6-7.64V288h32v11.672c0,3.496,2.264,6.576,5.592,7.632 c3.864,1.216,7.8,2.856,11.672,4.88c3.104,1.608,6.888,1.04,9.36-1.44l8.288-8.288l22.624,22.624l-8.288,8.288 c-2.472,2.472-3.056,6.256-1.44,9.36c2.024,3.872,3.664,7.808,4.88,11.672c1.064,3.336,4.144,5.6,7.64,5.6h11.672V392z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M374.665,328c-26.472,0-48,21.528-48,48s21.528,48,48,48s48-21.528,48-48S401.137,328,374.665,328z M374.665,408 c-17.648,0-32-14.352-32-32s14.352-32,32-32s32,14.352,32,32S392.313,408,374.665,408z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M54.665,168h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24v-16 C65.433,192,54.665,181.232,54.665,168z M46.665,208.248c-2.336-3.144-5.104-5.912-8.248-8.248 c3.144-2.336,5.912-5.104,8.248-8.248c2.336,3.144,5.104,5.912,8.248,8.248C51.769,202.336,49.001,205.104,46.665,208.248z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M150.665,120h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24v-16 C161.433,144,150.665,133.232,150.665,120z M142.665,160.248c-2.336-3.144-5.104-5.912-8.248-8.248 c3.144-2.336,5.912-5.104,8.248-8.248c2.336,3.144,5.104,5.912,8.248,8.248C147.769,154.336,145.001,157.104,142.665,160.248z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M70.665,48h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24V72 C81.433,72,70.665,61.232,70.665,48z M62.665,88.248c-2.336-3.144-5.104-5.912-8.248-8.248c3.144-2.336,5.912-5.104,8.248-8.248 c2.336,3.144,5.104,5.912,8.248,8.248C67.769,82.336,65.001,85.104,62.665,88.248z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
`,
|
||||
Molectron: `
|
||||
<path stroke="#FFFFFF" fill="none" stroke-width="6" d="m398.559,166.02c-8.85-3.404-18.292-6.493-28.22-9.265 2.563-9.984 4.609-19.706 6.087-29.073 7.689-48.757-0.808-82.959-23.925-96.306-6.72-3.88-14.443-5.848-22.954-5.848-26.882,0-60.85,19.965-95.118,53.681-7.486-7.352-15.006-14.105-22.502-20.167-38.379-31.038-72.25-40.781-95.365-27.434-14.856,8.577-23.891,26.093-26.126,50.652-0.376,4.125 2.664,7.773 6.789,8.148 4.138,0.382 7.772-2.664 8.148-6.789 1.238-13.594 5.484-31.398 18.688-39.021 17.11-9.881 45.699-0.365 78.434,26.106 7.143,5.776 14.314,12.217 21.461,19.233-14.373,15.293-28.676,32.894-42.41,52.347-24.16,2.199-47.172,5.888-68.291,10.948-3.698-14.376-6.238-28.093-7.491-40.827-0.405-4.122-4.059-7.134-8.198-6.729-4.122,0.405-7.135,4.076-6.729,8.198 1.326,13.474 4.008,27.966 7.917,43.133-9.596,2.706-18.73,5.712-27.311,9.012-46.072,17.72-71.443,42.18-71.443,68.873s25.371,51.153 71.441,68.872c8.85,3.404 18.292,6.493 28.22,9.265-2.563,9.984-4.609,19.706-6.087,29.073-7.689,48.757 0.808,82.959 23.925,96.306 6.72,3.88 14.443,5.848 22.954,5.848 26.573,0 60.071-19.516 93.938-52.531 7.255,7.086 14.54,13.609 21.803,19.482 27.161,21.966 52.059,33.266 72.489,33.265 8.438-0.001 16.119-1.93 22.876-5.831 23.117-13.347 31.614-47.549 23.925-96.306-1.477-9.366-3.523-19.087-6.086-29.07 15.439-4.252 29.64-9.26 42.218-14.96 3.773-1.71 5.445-6.154 3.735-9.927-1.71-3.773-6.155-5.446-9.927-3.735-11.912,5.398-25.377,10.15-40.042,14.192-6.063-20.261-14.137-41.412-23.976-62.808 10.281-22.122 18.685-44.004 24.943-64.936 55.665,15.586 88.651,40.202 88.651,63.801 0,15.247-13.296,27.827-24.45,35.694-3.385,2.388-4.193,7.067-1.806,10.452 2.388,3.386 7.067,4.193 10.452,1.806 20.153-14.215 30.804-30.797 30.804-47.952 0-26.693-25.371-51.153-71.441-68.872zm-69.013-125.491c5.844,7.10543e-15 11.044,1.291 15.454,3.838 17.112,9.88 23.166,39.396 16.607,80.979-1.405,8.907-3.35,18.159-5.789,27.669-21.207-5.028-44.299-8.68-68.532-10.835-13.596-19.242-27.866-36.839-42.375-52.253 2.655-2.618 5.312-5.158 7.964-7.602 29.252-26.953 56.48-41.796 76.671-41.796zm-95.096,60.152c11.317,12.062 22.5,25.517 33.323,40.102-10.769-0.587-21.712-0.891-32.773-0.891-11.431,0-22.738,0.321-33.855,0.947 10.808-14.56 22.006-28.07 33.305-40.158zm-.053,269.657c-11.718-12.42-23.296-26.341-34.486-41.466 11.514,0.674 23.234,1.02 35.089,1.02 11.419,0 22.732-0.333 33.871-0.969-11.18,15.064-22.777,29.01-34.474,41.415zm.603-55.446c-16.115,0-31.578-0.624-46.314-1.784-8.277-12.076-16.284-24.78-23.907-37.984-7.503-12.995-14.405-26.107-20.657-39.155 6.49-13.661 13.707-27.412 21.596-41.077 7.64-13.232 15.75-26.063 24.177-38.307 14.374-1.099 29.429-1.693 45.105-1.693 15.273,0 29.956,0.564 43.994,1.609 8.434,12.267 16.59,25.185 24.349,38.623 7.85,13.597 15.034,27.279 21.5,40.873-6.219,12.942-13.091,25.957-20.56,38.894-7.625,13.207-15.72,26.015-24.13,38.239-14.716,1.158-29.83,1.762-45.153,1.762zm-65.615-3.655c-18.453-2.132-35.582-5.129-51.205-8.81 4.744-15.789 10.758-32.16 17.929-48.79 4.898,9.688 10.128,19.373 15.679,28.987 5.668,9.818 11.549,19.371 17.597,28.613zm1.19-152.829c-6.111,9.318-12.078,18.991-17.847,28.984-5.933,10.276-11.499,20.61-16.677,30.928-7.543-17.318-13.858-34.376-18.788-50.749 16.203-3.859 34.042-6.983 53.312-9.163zm-155.575,76.484c0-23.472 32.634-47.951 87.757-63.55 6.235,20.802 14.601,42.62 24.805,64.647-9.813,21.362-17.865,42.477-23.913,62.705-55.663-15.587-88.649-40.203-88.649-63.802zm125.454,194.363c-5.844,0-11.044-1.291-15.454-3.838-17.112-9.88-23.166-39.396-16.607-80.979 1.405-8.907 3.35-18.159 5.789-27.669 20.518,4.865 42.8,8.441 66.173,10.619 13.951,19.807 28.618,37.883 43.53,53.648-2.254,2.201-4.509,4.348-6.76,6.423-29.252,26.954-56.48,41.796-76.671,41.796zm220.214-84.584c6.559,41.583 0.505,71.099-16.607,80.979-17.113,9.879-45.699,0.364-78.434-26.106-6.893-5.574-13.814-11.767-20.712-18.499 14.761-15.578 29.462-33.603 43.563-53.579 23.432-2.151 45.822-5.697 66.389-10.509 2.445,9.526 4.394,18.793 5.801,27.714zm-9.83-42.153c-16.064,3.733-33.311,6.67-51.339,8.745 6.085-9.283 12.027-18.918 17.773-28.871 5.517-9.556 10.713-19.161 15.579-28.757 7.195,16.66 13.228,33.063 17.987,48.883zm-17.918-84.145c-5.152-10.259-10.688-20.532-16.587-30.749-5.818-10.078-11.859-19.878-18.077-29.348 19.355,2.146 37.276,5.243 53.564,9.081-4.955,16.493-11.302,33.623-18.9,51.016z"/>
|
||||
<path stroke="#FFFFFF" fill="none" stroke-width="6" d="m235,197.392c-20.678,0-37.5,16.822-37.5,37.5s16.822,37.5 37.5,37.5 37.5-16.822 37.5-37.5-16.822-37.5-37.5-37.5zm0,60c-12.406,0-22.5-10.094-22.5-22.5s10.094-22.5 22.5-22.5 22.5,10.094 22.5,22.5-10.094,22.5-22.5,22.5z"/>
|
||||
`
|
||||
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<div class="mypanel">
|
||||
|
||||
<div v-if="!emailinviata">
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reset.title_reset_pwd')}}
|
||||
</q-alert>
|
||||
<br>
|
||||
|
||||
<q-field
|
||||
:error="$v.form.email.$error"
|
||||
:error-label="`${errorMsg('email', $v.form.email)}`"
|
||||
>
|
||||
<q-input
|
||||
v-model="form.email"
|
||||
:value="form.email"
|
||||
autocomplete="email"
|
||||
@change="val => { form.email = val }"
|
||||
:before="[{icon: 'mail', handler () {}}]"
|
||||
@blur="$v.form.email.$touch"
|
||||
:error="$v.form.email.$error"
|
||||
:float-label="$t('reg.email')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<div align="center">
|
||||
<q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">
|
||||
{{$t('login.send_reset_pwd')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reset.email_sent')}}
|
||||
</q-alert>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
{{ $t('reset.check_email')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {mapActions} from 'vuex'
|
||||
import * as types from '../../../store/mutation-types'
|
||||
import {Errori_MongoDb} from '../../../store/modules/user'
|
||||
|
||||
import {serv_constants} from '../../../store/modules/serv_constants';
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
risultato: '',
|
||||
riscode: 0,
|
||||
emailsent: false,
|
||||
form: {
|
||||
email: '',
|
||||
tokenforgot: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
computed: {
|
||||
emailinviata: function () {
|
||||
return this.emailsent
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
email: {
|
||||
required, email,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", {
|
||||
requestresetpwd: types.USER_REQUESTRESETPWD,
|
||||
}),
|
||||
},
|
||||
submit() {
|
||||
this.$v.form.$touch();
|
||||
|
||||
if (this.$v.form.$error) {
|
||||
this.showNotif(this.$t('reg.err.errore_generico'));
|
||||
return
|
||||
}
|
||||
|
||||
this.$q.loading.show({message: this.$t('reset.incorso')});
|
||||
|
||||
this.tokenforgot = '';
|
||||
|
||||
console.log(this.form);
|
||||
this.requestresetpwd(this.form)
|
||||
.then((ris) => {
|
||||
if (ris.code === serv_constants.RIS_CODE_OK)
|
||||
this.emailsent = true;
|
||||
this.$q.loading.hide();
|
||||
}).catch(error => {
|
||||
console.log("ERROR = " + error);
|
||||
this.$q.loading.hide();
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mypanel {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,175 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-page padding class="signin">
|
||||
<div class="text-center">
|
||||
<p>
|
||||
<!--<img src="../../../assets/quasar-logo-full.svg">-->
|
||||
<img :src="`../../../assets/`+`${env('LOGO_REG')}`">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
|
||||
|
||||
<q-field
|
||||
:error="$v.form.username.$error"
|
||||
:error-label="`${errorMsg('username', $v.form.username)}`"
|
||||
>
|
||||
<q-input
|
||||
:value="form.username"
|
||||
autocomplete="username"
|
||||
@change="val => { form.username = val }"
|
||||
:before="[{icon: 'person', handler () {}}]"
|
||||
@blur="$v.form.username.$touch"
|
||||
:error="$v.form.username.$error"
|
||||
:float-label="$t('reg.username')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<q-field
|
||||
:error="$v.form.password.$error"
|
||||
:error-label="`${errorMsg('password', $v.form.password)}`"
|
||||
>
|
||||
<q-input
|
||||
v-model="form.password"
|
||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
||||
@blur="$v.form.password.$touch"
|
||||
:error="$v.form.password.$error"
|
||||
:float-label="$t('reg.password')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<div>
|
||||
<a :href="getlinkforgetpwd">{{$t('reg.forgetpassword')}}</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div align="center">
|
||||
<q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">{{$t('login.enter')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-page>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
required,
|
||||
email,
|
||||
minLength,
|
||||
maxLength,
|
||||
sameAs,
|
||||
} from 'vuelidate/lib/validators'
|
||||
|
||||
import {mapGetters, mapActions} from 'vuex'
|
||||
import * as types from '../../../store/mutation-types'
|
||||
|
||||
import {Errori_MongoDb} from '../../../store/modules/user'
|
||||
import {serv_constants} from "../../../store/modules/serv_constants";
|
||||
import axios from 'axios';
|
||||
|
||||
import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: process.env.VUE_APP_URL,
|
||||
form: {
|
||||
username: process.env.TEST_USERNAME,
|
||||
password: process.env.TEST_PASSWORD,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("user", [
|
||||
'getUsername',
|
||||
'getPassword',
|
||||
]),
|
||||
...mapGetters("user", [
|
||||
'getUserServer',
|
||||
'getServerCode',
|
||||
]),
|
||||
env() {
|
||||
return env
|
||||
},
|
||||
getlinkforgetpwd () {
|
||||
return "/requestresetpwd";
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
isAsync: true,
|
||||
form: {
|
||||
password: {required, minLength: minLength(8), maxLength: maxLength(20)},
|
||||
username: {
|
||||
required, minLength: minLength(6), maxLength: maxLength(20),
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", {
|
||||
signin: types.USER_SIGNIN,
|
||||
}),
|
||||
showNotif (msg) {
|
||||
this.$q.notify(msg)
|
||||
},
|
||||
errorMsg(cosa, item) {
|
||||
try {
|
||||
if (!item.$error) return '';
|
||||
if (item.$params.email && !item.email) return this.$t('reg.err.email');
|
||||
|
||||
if (!item.required) return this.$t('reg.err.required');
|
||||
if (!item.minLength) return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char');
|
||||
if (!item.maxLength) return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char');
|
||||
return '';
|
||||
} catch (error) {
|
||||
//console.log("ERR : " + error);
|
||||
}
|
||||
},
|
||||
checkErrors(riscode) {
|
||||
//console.log("RIS = " + riscode);
|
||||
if (riscode === Errori_MongoDb.OK) {
|
||||
this.showNotif({type: 'positive', message: this.$t('login.completato')});
|
||||
this.$router.push('/');
|
||||
} else if (riscode === serv_constants.RIS_CODE_LOGIN_ERR) {
|
||||
this.showNotif(this.$t('login.errato'));
|
||||
this.$router.push('/signin');
|
||||
} else {
|
||||
this.showNotif("Errore num " + riscode);
|
||||
}
|
||||
|
||||
},
|
||||
submit() {
|
||||
this.$v.form.$touch();
|
||||
|
||||
if (this.$v.form.$error) {
|
||||
this.showNotif(this.$t('reg.err.errore_generico'));
|
||||
return
|
||||
}
|
||||
|
||||
this.$q.loading.show({message: this.$t('login.incorso')});
|
||||
|
||||
console.log(this.form);
|
||||
this.signin(this.form)
|
||||
.then((riscode) => {
|
||||
this.checkErrors(riscode);
|
||||
this.$q.loading.hide();
|
||||
}).catch(error => {
|
||||
console.log("ERROR = " + error);
|
||||
this.$q.loading.hide();
|
||||
});
|
||||
|
||||
|
||||
// ...
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.signin {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,283 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-page padding class="signup">
|
||||
<div class="text-center">
|
||||
<p>
|
||||
<!--<img src="../../../assets/quasar-logo-full.svg">-->
|
||||
<img :src="`../../../assets/`+`${env('LOGO_REG')}`">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
|
||||
|
||||
<q-field
|
||||
:error="$v.form.email.$error"
|
||||
:error-label="`${errorMsg('email', $v.form.email)}`"
|
||||
>
|
||||
<q-input
|
||||
v-model="form.email"
|
||||
:value="form.email"
|
||||
@change="val => { form.email = val }"
|
||||
:before="[{icon: 'mail', handler () {}}]"
|
||||
@blur="$v.form.email.$touch"
|
||||
:error="$v.form.email.$error"
|
||||
:float-label="$t('reg.email')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<q-field
|
||||
:error="$v.form.username.$error"
|
||||
:error-label="`${errorMsg('username', $v.form.username)}`"
|
||||
>
|
||||
<q-input
|
||||
:value="form.username"
|
||||
@change="val => { form.username = val }"
|
||||
:before="[{icon: 'person', handler () {}}]"
|
||||
@blur="$v.form.username.$touch"
|
||||
:error="$v.form.username.$error"
|
||||
:float-label="$t('reg.username')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<q-field
|
||||
:error="$v.form.password.$error"
|
||||
:error-label="`${errorMsg('password', $v.form.password)}`"
|
||||
>
|
||||
<q-input
|
||||
v-model="form.password"
|
||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
||||
@blur="$v.form.password.$touch"
|
||||
:error="$v.form.password.$error"
|
||||
:float-label="$t('reg.password')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<q-field
|
||||
:error="$v.form.repeatPassword.$error"
|
||||
:error-label="`${errorMsg('repeatpassword', $v.form.repeatPassword)}`"
|
||||
>
|
||||
<q-input
|
||||
v-model="form.repeatPassword"
|
||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
||||
@blur="$v.form.repeatPassword.$touch"
|
||||
:error="$v.form.repeatPassword.$error"
|
||||
:float-label="$t('reg.repeatPassword')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<q-field
|
||||
:error="$v.form.terms.$error"
|
||||
:error-label="`${errorMsg('terms', $v.form.terms)}`"
|
||||
>
|
||||
|
||||
<q-checkbox
|
||||
v-model="form.terms"
|
||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
||||
color="secondary"
|
||||
@blur="$v.form.terms.$touch"
|
||||
:error="$v.form.terms.$error"
|
||||
:float-label="$t('reg.terms')"
|
||||
:label="$t('reg.terms')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<br>
|
||||
|
||||
<div align="center">
|
||||
<q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">{{$t('reg.submit')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import { Component, Prop, Watch } from 'vue-property-decorator'
|
||||
|
||||
import {
|
||||
required,
|
||||
email,
|
||||
numeric,
|
||||
minValue,
|
||||
minLength,
|
||||
maxLength,
|
||||
sameAs,
|
||||
requiredUnless
|
||||
} from 'vuelidate/lib/validators'
|
||||
|
||||
import { validationMixin } from 'vuelidate';
|
||||
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import * as types from '../../../store/mutation-types'
|
||||
|
||||
import { Errori_MongoDb } from '../../../store/modules/user'
|
||||
import axios from 'axios';
|
||||
|
||||
import { Loading, QSpinnerFacebook, QSpinnerGears } from 'quasar'
|
||||
|
||||
|
||||
@Component({
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
url: process.env.VUE_APP_URL,
|
||||
form: {
|
||||
email: process.env.TEST_EMAIL,
|
||||
username: process.env.TEST_USERNAME,
|
||||
password: process.env.TEST_PASSWORD,
|
||||
repeatPassword: process.env.TEST_PASSWORD,
|
||||
dateOfBirth: '',
|
||||
terms: true,
|
||||
},
|
||||
duplicate_email: false,
|
||||
duplicate_username: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("user", [
|
||||
'getUsername',
|
||||
'getPassword',
|
||||
'getEmail',
|
||||
'getDateOfBirth',
|
||||
]),
|
||||
...mapGetters("user", [
|
||||
'getUserServer',
|
||||
'getServerCode',
|
||||
]),
|
||||
env () {
|
||||
return env
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
isAsync: true,
|
||||
form: {
|
||||
email: {
|
||||
required, email,
|
||||
isUnique: value => {
|
||||
if (value === '') return true;
|
||||
return axios.get(process.env.MONGODB_HOST + '/email/' + value)
|
||||
.then(res => {
|
||||
return (res.status !== 200)
|
||||
}).catch((e) => {
|
||||
return true;
|
||||
})
|
||||
}
|
||||
},
|
||||
password: { required, minLength: minLength(8), maxLength: maxLength(20) },
|
||||
username: {
|
||||
required, minLength: minLength(6), maxLength: maxLength(20),
|
||||
isUnique: value => {
|
||||
if (value === '') return true;
|
||||
return axios.get(process.env.MONGODB_HOST + '/users/' + value)
|
||||
.then(res => {
|
||||
return (res.status !== 200)
|
||||
}).catch((e) => {
|
||||
return true;
|
||||
})
|
||||
}
|
||||
},
|
||||
repeatPassword: {
|
||||
sameAsPassword: sameAs('password')
|
||||
},
|
||||
terms: { required },
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", {
|
||||
signup: types.USER_SIGNUP,
|
||||
}),
|
||||
showNotif (msg) {
|
||||
this.$q.notify(msg)
|
||||
},
|
||||
errorMsg (cosa, item) {
|
||||
try {
|
||||
if (!item.$error) return '';
|
||||
if (item.$params.email && !item.email) return this.$t('reg.err.email');
|
||||
|
||||
if (cosa === 'repeatpassword') {
|
||||
if (!item.sameAsPassword) {
|
||||
return this.$t('reg.err.sameaspassword');
|
||||
}
|
||||
}
|
||||
|
||||
if (cosa === 'email') {
|
||||
//console.log("EMAIL " + item.isUnique);
|
||||
//console.log(item);
|
||||
if (!item.isUnique) return this.$t('reg.err.duplicate_email');
|
||||
} else if (cosa === 'username') {
|
||||
//console.log(item);
|
||||
if (!item.isUnique) return this.$t('reg.err.duplicate_username');
|
||||
}
|
||||
|
||||
if (!item.required) return this.$t('reg.err.required');
|
||||
if (!item.minLength) return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char');
|
||||
if (!item.maxLength) return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char');
|
||||
return '';
|
||||
} catch (error) {
|
||||
//console.log("ERR : " + error);
|
||||
}
|
||||
},
|
||||
checkErrors (riscode) {
|
||||
//console.log("RIS = " + riscode);
|
||||
if (riscode === Errori_MongoDb.DUPLICATE_EMAIL_ID) {
|
||||
this.showNotif(this.$t('reg.err.duplicate_email'));
|
||||
} else if (riscode === Errori_MongoDb.DUPLICATE_USERNAME_ID) {
|
||||
this.showNotif(this.$t('reg.err.duplicate_username'));
|
||||
} else if (riscode === Errori_MongoDb.OK) {
|
||||
this.$router.push('/');
|
||||
} else {
|
||||
this.showNotif("Errore num " + riscode);
|
||||
}
|
||||
|
||||
},
|
||||
submit () {
|
||||
this.$v.form.$touch();
|
||||
|
||||
this.duplicate_email = false;
|
||||
this.duplicate_username = false;
|
||||
|
||||
if (!this.form.terms) {
|
||||
this.showNotif(this.$t('reg.err.terms'));
|
||||
return
|
||||
}
|
||||
|
||||
if (this.$v.form.$error) {
|
||||
this.showNotif(this.$t('reg.err.errore_generico'));
|
||||
return
|
||||
}
|
||||
|
||||
this.$q.loading.show({ message: this.$t('reg.incorso') });
|
||||
|
||||
console.log(this.form);
|
||||
this.signup(this.form)
|
||||
.then((riscode) => {
|
||||
this.checkErrors(riscode);
|
||||
this.$q.loading.hide();
|
||||
}).catch((error: string) => {
|
||||
console.log("ERROR = " + error);
|
||||
this.$q.loading.hide();
|
||||
});
|
||||
|
||||
|
||||
// ...
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
export default class Signup extends Vue {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.signup {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
<template>
|
||||
<div class="mypanel">
|
||||
|
||||
<div v-if="!emailinviata">
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reset.title_update_pwd')}}
|
||||
</q-alert>
|
||||
<br>
|
||||
|
||||
<q-field
|
||||
:error="$v.form.password.$error"
|
||||
:error-label="`${errorMsg('password', $v.form.password)}`"
|
||||
>
|
||||
<q-input
|
||||
v-model="form.password"
|
||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
||||
@blur="$v.form.password.$touch"
|
||||
:error="$v.form.password.$error"
|
||||
:float-label="$t('reg.password')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<q-field
|
||||
:error="$v.form.repeatPassword.$error"
|
||||
:error-label="`${errorMsg('repeatpassword', $v.form.repeatPassword)}`"
|
||||
>
|
||||
<q-input
|
||||
v-model="form.repeatPassword"
|
||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
||||
@blur="$v.form.repeatPassword.$touch"
|
||||
:error="$v.form.repeatPassword.$error"
|
||||
:float-label="$t('reg.repeatPassword')"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<div align="center">
|
||||
<q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">
|
||||
{{$t('reset.update_password')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reset.email_sent')}}
|
||||
</q-alert>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
{{ $t('reset.check_email')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {mapActions} from 'vuex'
|
||||
import * as types from '../../../store/mutation-types'
|
||||
import {Errori_MongoDb} from '../../../store/modules/user'
|
||||
|
||||
import {serv_constants} from '../../../store/modules/serv_constants';
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
risultato: '',
|
||||
riscode: 0,
|
||||
emailsent: false,
|
||||
form: {
|
||||
email: '',
|
||||
tokenforgot: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
computed: {
|
||||
emailinviata: function () {
|
||||
return this.emailsent
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
email: {
|
||||
required, email,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", {
|
||||
updatepwd: types.USER_UPDATEPWD,
|
||||
}),
|
||||
},
|
||||
submit() {
|
||||
this.$v.form.$touch();
|
||||
|
||||
if (this.$v.form.$error) {
|
||||
this.showNotif(this.$t('reg.err.errore_generico'));
|
||||
return
|
||||
}
|
||||
|
||||
this.$q.loading.show({message: this.$t('reset.incorso')});
|
||||
|
||||
this.tokenforgot = '';
|
||||
|
||||
console.log(this.form);
|
||||
this.updatepwd(this.form)
|
||||
.then((ris) => {
|
||||
this.emailsent = ris.updatepwd;
|
||||
this.$q.loading.hide();
|
||||
}).catch(error => {
|
||||
console.log("ERROR = " + error);
|
||||
this.$q.loading.hide();
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mypanel {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div class="mypanel">
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reg.title_verif_reg')}}
|
||||
</q-alert>
|
||||
<br>
|
||||
|
||||
<transition
|
||||
enter-active-class="animated flipInX"
|
||||
leave-active-class="animated flipOutX"
|
||||
appear
|
||||
>
|
||||
<q-alert
|
||||
v-if="giaverificato"
|
||||
type="warning"
|
||||
>
|
||||
{{ risultato}}
|
||||
</q-alert>
|
||||
<q-alert
|
||||
v-if="verificatook"
|
||||
type="positive"
|
||||
>
|
||||
{{ risultato}}
|
||||
</q-alert>
|
||||
</transition>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {mapActions} from 'vuex'
|
||||
import * as types from '../../../store/mutation-types'
|
||||
import {Errori_MongoDb} from '../../../store/modules/user'
|
||||
|
||||
import {serv_constants} from '../../../store/modules/serv_constants';
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
risultato : '',
|
||||
riscode: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
computed:{
|
||||
giaverificato: function() {
|
||||
return this.riscode !== serv_constants.RIS_CODE_EMAIL_VERIFIED
|
||||
},
|
||||
verificatook: function() {
|
||||
return this.riscode === serv_constants.RIS_CODE_EMAIL_VERIFIED
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", {
|
||||
verifreg: types.USER_VREG,
|
||||
}),
|
||||
load: function () {
|
||||
this.verifreg(this.$route.query).then((ris) => {
|
||||
this.riscode = ris.code;
|
||||
this.risultato = ris.msg;
|
||||
console.log("RIS = ");
|
||||
console.log(ris);
|
||||
|
||||
if (this.verificatook) {
|
||||
setTimeout(() => {
|
||||
this.$router.replace('/');
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
}).catch((err) => {
|
||||
console.log("ERR = " + err);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mypanel {
|
||||
padding:10px;
|
||||
margin: 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div class="card text-center">
|
||||
<div class="card-title no-padding ">
|
||||
<span class="label pointing-down text-white fit no-margin" :class="titleClasses">
|
||||
<h5 class="">{{title}}</h5>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-content bg-white" >
|
||||
<h3>$ {{price}}</h3>
|
||||
<h6 class="text-italic">{{priceSubtitle}}</h6>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<button :class="buttonClasses" class="outline fit" @click="planSelected()">Choose</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
planSelected () {
|
||||
this.$emit('card-selected', this.cardId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.label{
|
||||
min-height: 50px;
|
||||
}
|
||||
h5{
|
||||
font-weight: 300;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
h3, h6{
|
||||
font-weight: 300;
|
||||
}
|
||||
.label.pointing-up:before, .label.pointing-right:before, .label.pointing-down:before, .label.pointing-left:before {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
.card {
|
||||
width: 332px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,111 +0,0 @@
|
||||
<template>
|
||||
<div class="card ">
|
||||
<div class="card-content bg-white text-center" >
|
||||
<h5>{{title}}</h5>
|
||||
<h2 class="inline-block">$ {{price}}</h2> <span>{{priceSubtitle}}</span>
|
||||
<div class="flex wrap gutter ">
|
||||
<div class="auto">
|
||||
<div class="label bg-faded text-white ">
|
||||
Vitamin A
|
||||
<span class="right-detail ">
|
||||
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
|
||||
:value="randomValueOne" :max="7" icon="thumb_up" readonly></q-rating>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auto">
|
||||
<div class="label bg-faded text-white">
|
||||
Vitamin K
|
||||
<span class="right-detail">
|
||||
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
|
||||
:value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auto">
|
||||
<div class="label bg-faded text-white">
|
||||
Vitamin B
|
||||
<span class="right-detail">
|
||||
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
|
||||
:value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div class="list fit">
|
||||
<q-collapsible group="somegroup" icon="format_list_bulleted" label="Check inside for itens" >
|
||||
<slot name="body" ></slot>
|
||||
</q-collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<q-progress-button
|
||||
:class="buttonClasses"
|
||||
class="fit"
|
||||
:percentage="progressBtn"
|
||||
@click.native="workButton()"
|
||||
>
|
||||
Choose
|
||||
</q-progress-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
|
||||
data () {
|
||||
return {
|
||||
progressBtn: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
randomValueOne () {
|
||||
return Math.floor((Math.random() * 5) + 1)
|
||||
},
|
||||
randomValueTwo () {
|
||||
return Math.floor((Math.random() * 5) + 1)
|
||||
},
|
||||
randomValueThree () {
|
||||
return Math.floor((Math.random() * 5) + 1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
planSelected () {
|
||||
this.$emit('card-selected', this.cardId)
|
||||
},
|
||||
workButton () {
|
||||
this.stopWorkButton()
|
||||
this.progressBtn = 15
|
||||
this.workingButton = setInterval(() => {
|
||||
this.progressBtn += parseInt(Math.random() * 12, 10)
|
||||
if (this.progressBtn >= 100) {
|
||||
this.stopWorkButton()
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
stopWorkButton (index) {
|
||||
if (this.workingButton) {
|
||||
clearInterval(this.workingButton)
|
||||
this.workingButton = null
|
||||
this.planSelected()
|
||||
}
|
||||
if (typeof index !== 'undefined') {
|
||||
this.progressBtn = index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
h5{
|
||||
font-weight: 300;
|
||||
text-decoration: underline;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
.card {
|
||||
min-width: 350px;
|
||||
max-width: 700px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div class="list striped">
|
||||
<div class="item">
|
||||
<div class="item-content">8 Oranges</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content">6 Limons</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content">3 Grapes</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="list ">
|
||||
<q-collapsible icon="shopping_basket" label="Citrus">
|
||||
<div class="item">
|
||||
<div class="item-content">50 Oranges</div>
|
||||
</div>
|
||||
<div class="item" >
|
||||
<div class="item-content">45 Limes</div>
|
||||
</div>
|
||||
</q-collapsible>
|
||||
<q-collapsible icon="favorite" label="Berries">
|
||||
<div class="item">
|
||||
<div class="item-content">43 Blackberries</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content">22 Grapes</div>
|
||||
</div>
|
||||
</q-collapsible>
|
||||
<q-collapsible icon="opacity" label="Melons">
|
||||
<div class="item" >
|
||||
<div class="item-content">5 Watermelon</div>
|
||||
</div>
|
||||
<div class="item" >
|
||||
<div class="item-content">10 Casaba</div>
|
||||
</div>
|
||||
</q-collapsible>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<div class="list-label inset">Citrus</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">16 Oranges</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">12 Limes</div>
|
||||
</div>
|
||||
<hr class="inset">
|
||||
<div class="list-label inset">Berries</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">14 Blackberries</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">6 Grapes</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<div class="list-label inset">Citrus</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">24 Oranges</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">20 Limes</div>
|
||||
</div>
|
||||
<hr class="inset">
|
||||
<div class="list-label inset">Berries</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">20 Blackberries</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">10 Grapes</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,121 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-padding">
|
||||
<div class="label bg-secondary text-white">
|
||||
Plan model type <span class="right-detail"><em>{{cardType}}</em></span>
|
||||
</div>
|
||||
<div class="group inline-block">
|
||||
<label >
|
||||
<q-radio v-model="cardType" val="Vertical One"></q-radio> Vertical One
|
||||
</label>
|
||||
<label>
|
||||
<q-radio v-model="cardType" val="Horizontal One" class="teal"></q-radio> Horizontal One
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="row wrap gutter justify-center">
|
||||
<div class="auto " v-for="planData in plansData">
|
||||
<component :is="componentInstanceBySelectedPlanType"
|
||||
:title="planData.title"
|
||||
:title-classes="planData.titleClasses"
|
||||
:price="planData.price"
|
||||
:price-subtitle="planData.priceSubtitle"
|
||||
:button-classes="planData.buttonClasses"
|
||||
:card-id="planData.cardId"
|
||||
v-on:card-selected="cardSelected"
|
||||
>
|
||||
<div slot="body" class="fit">
|
||||
<component :is="planData.planBenefitComponent"></component>
|
||||
</div>
|
||||
</component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import cardPlanOne from './cardPlanOne.vue'
|
||||
import cardPlanTwo from './cardPlanTwo.vue'
|
||||
import benefitOne from './plansBenefits/benefitOne.vue'
|
||||
import benefitTwo from './plansBenefits/benefitTwo.vue'
|
||||
import benefitThree from './plansBenefits/benefitThree.vue'
|
||||
import benefitFour from './plansBenefits/benefitFour.vue'
|
||||
//import { Toast } from 'quasar'
|
||||
export default {
|
||||
name: 'Pricing',
|
||||
data () {
|
||||
return {
|
||||
cardType: 'Vertical One',
|
||||
plansData: [
|
||||
{
|
||||
title: 'Basket Fruit One',
|
||||
titleClasses: 'bg-primary',
|
||||
price: '59',
|
||||
priceSubtitle: 'per month',
|
||||
buttonClasses: 'primary',
|
||||
cardId: '1',
|
||||
planBenefitComponent: 'benefit-one'
|
||||
},
|
||||
{
|
||||
title: 'Basket Fruit Two',
|
||||
titleClasses: 'bg-teal',
|
||||
price: '39',
|
||||
priceSubtitle: 'per month',
|
||||
buttonClasses: 'teal',
|
||||
cardId: '2',
|
||||
planBenefitComponent: 'benefit-two'
|
||||
},
|
||||
{
|
||||
title: 'Basket Fruit Three',
|
||||
titleClasses: 'bg-red',
|
||||
price: '29',
|
||||
priceSubtitle: 'per month',
|
||||
buttonClasses: 'red',
|
||||
cardId: '3',
|
||||
planBenefitComponent: 'benefit-three'
|
||||
},
|
||||
{
|
||||
title: 'Basket Fruit Four',
|
||||
titleClasses: 'bg-purple',
|
||||
price: '19',
|
||||
priceSubtitle: 'per month',
|
||||
buttonClasses: 'purple',
|
||||
cardId: '4',
|
||||
planBenefitComponent: 'benefit-four'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
cardPlanOne,
|
||||
benefitOne,
|
||||
benefitTwo,
|
||||
benefitThree,
|
||||
benefitFour,
|
||||
cardPlanTwo
|
||||
},
|
||||
computed: {
|
||||
componentInstanceBySelectedPlanType () {
|
||||
return this.cardType === 'Vertical One' ? 'card-plan-one' : 'card-plan-two'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cardSelected (cardId) {
|
||||
//Toast.create.positive({html: `Congratulations! You have choose the plan ${cardId}`})
|
||||
},
|
||||
chooseMostUsedPlan(cardId) {
|
||||
return cardId == 1 ? 'animate-bounce shadow-3' : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.inline-block {
|
||||
margin-bottom: 7%;
|
||||
}
|
||||
.label{
|
||||
padding: 1.2rem 0.7rem;
|
||||
min-width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="toolbar" v-show="true">
|
||||
<q-toolbar class="toolbar">
|
||||
<button class="hide-on-drawer-visible">
|
||||
<i>menu</i>
|
||||
</button>
|
||||
<q-btn flat round dense icon="mail">
|
||||
<q-chip floating color="red">2</q-chip>
|
||||
</q-btn>
|
||||
<q-toolbar-title :padding="1">
|
||||
TestPao
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user