Skip to content

V
ViewAdminpanel
Commit 7a6385c9 by Jansa Jose
Options

vue js comit(till login signup and logout)

parent b368c98c
Showing with 304 additions and 287 deletions
package-lock.json
...@@ -4785,7 +4785,8 @@ ...@@ -4785,7 +4785,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -4806,12 +4807,14 @@ ...@@ -4806,12 +4807,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -4826,17 +4829,20 @@ ...@@ -4826,17 +4829,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -4953,7 +4959,8 @@ ...@@ -4953,7 +4959,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -4965,6 +4972,7 @@ ...@@ -4965,6 +4972,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -4979,6 +4987,7 @@ ...@@ -4979,6 +4987,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -4986,12 +4995,14 @@ ...@@ -4986,12 +4995,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -5010,6 +5021,7 @@ ...@@ -5010,6 +5021,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -5090,7 +5102,8 @@ ...@@ -5090,7 +5102,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -5102,6 +5115,7 @@ ...@@ -5102,6 +5115,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -5187,7 +5201,8 @@ ...@@ -5187,7 +5201,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -5223,6 +5238,7 @@ ...@@ -5223,6 +5238,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -5242,6 +5258,7 @@ ...@@ -5242,6 +5258,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -5285,12 +5302,14 @@ ...@@ -5285,12 +5302,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
...@@ -10794,6 +10813,11 @@ ...@@ -10794,6 +10813,11 @@
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
"dev": true "dev": true
}, },
"vee-validate": {
"version": "2.2.15",
"resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.2.15.tgz",
"integrity": "sha512-4TOsI8XwVkKVLkg8Nhmy+jyoJrR6XcTRDyxBarzcCvYzU61zamipS1WsB6FlDze8eJQpgglS4NXAS6o4NDPs1g=="
},
"vendors": { "vendors": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.1.tgz", "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.1.tgz",
......
package.json
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
"indent-string": "^4.0.0", "indent-string": "^4.0.0",
"jquery": "^2.2.2", "jquery": "^2.2.2",
"moment": "^2.12.0", "moment": "^2.12.0",
"vee-validate": "^2.2.15",
"vue": "^2.2.2", "vue": "^2.2.2",
"vue-date-picker": "^1.0.2", "vue-date-picker": "^1.0.2",
"vue-resource": "^1.0.3", "vue-resource": "^1.0.3",
......
src/components/Login.vue
...@@ -8,20 +8,26 @@ ...@@ -8,20 +8,26 @@
<div class="login_container_panel"> <div class="login_container_panel">
<h3>Login</h3> <h3>Login</h3>
<hr> <hr>
<form @submit.prevent="checkCreds"> <form>
<fieldset> <fieldset>
<div class="login_row"> <div class="login_row">
<input class="login_input" placeholder="Username" type="text" v-model="username"> <input class="login_input" name="email" v-validate="'required|email'" :class="{'is-danger': errors.has('email') }" placeholder="Email Id" value="" type="text" v-model="email">
<i v-show="errors.has('email')" class="fa fa-warning"></i>
<span v-show="errors.first('email')" class="help is-danger">{{ errors.first('email') }}</span>
</div> </div>
<div class="login_row"> <div class="login_row">
<input class="login_input" placeholder="Password" type="password" v-model="password"> <input class="login_input" v-validate="'required|min:6'" :class="{'is-danger': errors.has('password'), min: 6 }" name="password" placeholder="Password" type="password" v-model="password">
<i v-show="errors.has('password')" class="fa fa-warning"></i>
<span v-show="errors.first('password')" class="help is-danger">{{ errors.first('password') }}</span>
</div> </div>
<div class="login_row textCenter"> <div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
<router-link class="pageLink" to="/"> <div class="login_row textCenter cpoint">
<div class="login_btn"> <!-- <router-link class="pageLink" to="/"> -->
<div class="login_btn" @click="checkCreds">
SIGN IN SIGN IN
</div> </div>
</router-link> <!-- </router-link> -->
</div> </div>
<router-link class="pageLink" to="/signup"> <router-link class="pageLink" to="/signup">
<div class="login_row textCenter"> <div class="login_row textCenter">
...@@ -32,7 +38,6 @@ ...@@ -32,7 +38,6 @@
</form> </form>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -41,62 +46,65 @@ ...@@ -41,62 +46,65 @@
</template> </template>
<script> <script>
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import api from '../api' import api from '../api'
import config from '../../src/config'
Vue.use(VeeValidate)
export default { export default {
name: 'Login', name: 'Login',
data(router) { data(router) {
return { return {
section: 'Login', section: 'Login',
loading: '', loading: '',
username: '', email: '',
password: '', password: '',
response: '' response: ''
} }
}, },
methods: { methods: {
checkCreds() { checkCreds() {
const { username, password } = this
this.toggleLoading() this.toggleLoading()
this.resetResponse() this.resetResponse()
this.$store.commit('TOGGLE_LOADING') this.$store.commit('TOGGLE_LOADING')
if (this.email === '' && this.password === '') {
/* Making API call to authenticate a user */ this.response = 'All Fields are required'
} else if (this.email === '') {
this.response = 'Email Id is required'
} else if (this.password === '') {
this.response = 'Password is required'
}
if (this.response !== '') {
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
return
}
var params = {'email': this.email, 'password': this.password, 'client_id': config.clientId, 'client_secret': config.clientSecret}
api api
.request('post', '/login', { username, password }) .request('post', 'login', params)
.then(response => { .then(response => {
this.toggleLoading() this.toggleLoading()
var data = response.data var data = response.data
/* Checking if error object was returned from the server */ if (data.status === 'success') {
if (data.error) { // this.$store.commit('SET_USER', data.data.user)
var errorName = data.error.name // this.$store.commit('SET_TOKEN', data.data.access_token)
if (errorName) { if (window.localStorage) {
this.response = window.localStorage.setItem('user', JSON.stringify(data.data.user))
errorName === 'InvalidCredentialsError' window.localStorage.setItem('token', data.data.access_token)
? 'Username/Password incorrect. Please try again.'
: errorName
} else {
this.response = data.error
} }
} else {
this.response = data.data.message
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
return return
} }
if (data.data.user) {
/* Setting user in the state and caching record to the localStorage */ // this.$router.push(data.redirect ? data.redirect : '/')
if (data.user) { this.$router.push('/tables')
var token = 'Bearer ' + data.token
this.$store.commit('SET_USER', data.user)
this.$store.commit('SET_TOKEN', token)
if (window.localStorage) {
window.localStorage.setItem('user', JSON.stringify(data.user))
window.localStorage.setItem('token', token)
}
this.$router.push(data.redirect ? data.redirect : '/')
} }
}) })
.catch(error => { .catch(error => {
...@@ -104,7 +112,11 @@ export default { ...@@ -104,7 +112,11 @@ export default {
console.log(error) console.log(error)
this.response = 'Server appears to be offline' this.response = 'Server appears to be offline'
this.toggleLoading() var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
// this.toggleLoading()
}) })
}, },
toggleLoading() { toggleLoading() {
...@@ -128,7 +140,9 @@ body, ...@@ -128,7 +140,9 @@ body,
height: 100%; height: 100%;
background-color: #1a5c7c !important; background-color: #1a5c7c !important;
} }
.cpoint{
cursor: pointer !important;
}
......
src/components/layout/DashHeader.vue
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
<!-- Navbar Right Menu --> <!-- Navbar Right Menu -->
<div class="navbar-custom-menu"> <div class="navbar-custom-menu">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<tasks-menu></tasks-menu>
<user-menu :user="user"></user-menu> <user-menu :user="user"></user-menu>
</ul> </ul>
</div> </div>
......
src/components/layout/Sidebar.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
<div class="info"> <div class="info">
<div> <div>
<p class="white">{{user.displayName}}</p> <p class="white">{{userData.email}}</p>
</div> </div>
<a href="javascript:;"> <a href="javascript:;">
<i class="fa fa-circle text-success"></i> Online <i class="fa fa-circle text-success"></i> Online
...@@ -37,6 +37,9 @@ export default { ...@@ -37,6 +37,9 @@ export default {
.jQuery('[data-toggle="hideseek"]') .jQuery('[data-toggle="hideseek"]')
.off() .off()
.hideseek() .hideseek()
},
created: function() {
this.userData = JSON.parse(localStorage.getItem('user'))
} }
} }
</script> </script>
......
src/components/layout/SidebarMenu.vue
...@@ -3,14 +3,53 @@ ...@@ -3,14 +3,53 @@
<router-link tag="li" class="pageLink" to="/tables"> <router-link tag="li" class="pageLink" to="/tables">
<a> <a>
<i class="fa fa-table"></i> <i class="fa fa-table"></i>
<span class="page">Tables</span> <span class="page">Transaction List</span>
</a> </a>
</router-link> </router-link>
<li class="pageLink router-link-active">
<a @click="connectBank">
<i class="fa fa-table"></i>
<span class="page">Add Bank</span>
</a>
</li>
</ul> </ul>
</template> </template>
<script> <script>
import api from '../../api'
import config from '../../../src/config'
export default { export default {
name: 'SidebarMenu' name: 'SidebarMenu',
methods: {
connectBank() {
this.toggleLoading()
this.access_token = localStorage.getItem('token')
var params = {'client_id': config.clientId, 'client_secret': config.clientSecret, 'access_token': this.access_token}
api
.request('post', 'connectbank', params)
.then(response => {
this.toggleLoading()
console.log(response.data)
var data = response.data
if (data.status === 'success') {
// this.$router.push(data.data.redirect_url)
// window.location = data.data.redirect_url
window.open(data.data.redirect_url, '_blank')
}
})
.catch(error => {
this.$store.commit('TOGGLE_LOADING')
console.log(error)
this.response = 'Server appears to be offline'
// this.toggleLoading()
})
},
toggleLoading() {
this.loading = this.loading === '' ? 'loading' : ''
}
}
} }
</script> </script>
<style> <style>
......
src/components/layout/TasksMenu.vue deleted 100644 → 0
<template>
<li class="dropdown tasks-menu">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">{{ userInfo.tasks | count }} </span>
</a>
<ul class="dropdown-menu">
<li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
<li v-if="userInfo.tasks.length > 0">
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li>
<!-- Task item -->
<a href="javascript:;">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer" v-if="userInfo.tasks.length > 0">
<a href="javascript:;">View all tasks</a>
</li>
</ul>
</li>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'TasksMenu',
computed: {
...mapState([
'userInfo'
])
}
}
</script>
src/components/layout/UserMenu.vue
...@@ -4,31 +4,63 @@ ...@@ -4,31 +4,63 @@
<!-- The user image in the navbar--> <!-- The user image in the navbar-->
<img :src="user.avatar" class="user-image" alt="User Image"> <img :src="user.avatar" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. --> <!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">{{user.displayName}}</span> <span class="hidden-xs">{{userData.email}}</span>
</a> </a>
<!-- Account Info and Menu --> <!-- Account Info and Menu -->
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="user-header" style="height:auto;min-height:85px;padding-bottom:15px;"> <li class="user-header" style="height:auto;min-height:85px;padding-bottom:15px;">
<p> <p>
<span>{{user.displayName}}</span> <span>{{userData.email}}</span>
<small v-for="role in user.roles" :key="role">{{role}}</small> <small v-for="role in user.roles" :key="role">{{role}}</small>
</p> </p>
</li> </li>
<li class="user-footer"> <li class="user-footer">
<router-link tag="li" class="pageLink" to="/login"> <!-- <router-link tag="li" class="pageLink" to="/login"> -->
<a href="javascript:;" class="btn btn-default btn-flat btn-block"> <a href="javascript:;" @click="logout" class="btn btn-default btn-flat btn-block">
<i class="fa fa-sign-out"></i> <i class="fa fa-sign-out"></i>
<span>Logout</span> <span>Logout</span>
</a> </a>
</router-link> <!-- </router-link> -->
</li> </li>
</ul> </ul>
</li> </li>
</template> </template>
<script> <script>
import api from '../../api'
import config from '../../config'
export default { export default {
name: 'UserMenu', name: 'UserMenu',
props: ['user'] props: ['user'],
methods: {
logout() {
this.access_token = localStorage.getItem('token')
var params = {'client_id': config.clientId, 'client_secret': config.clientSecret, 'access_token': this.access_token}
api
.request('post', 'logout', params)
.then(response => {
this.toggleLoading()
var data = response.data
if (data.status === 'success') {
localStorage.removeItem('user')
localStorage.removeItem('token')
this.$router.push('/')
}
})
.catch(error => {
console.log(error)
this.$store.commit('TOGGLE_LOADING')
this.response = 'Server appears to be offline'
})
},
toggleLoading() {
this.loading = this.loading === '' ? 'loading' : ''
}
},
created: function() {
this.userData = JSON.parse(localStorage.getItem('user'))
}
} }
</script> </script>
src/components/signup.vue
...@@ -8,41 +8,37 @@ ...@@ -8,41 +8,37 @@
<div class="login_container_panel"> <div class="login_container_panel">
<h3>Sign up</h3> <h3>Sign up</h3>
<hr> <hr>
<form @submit.prevent="checkCreds"> <form>
<fieldset> <fieldset>
<div class="login_row">
<input class="login_input" placeholder="First Name" type="text">
</div>
<div class="login_row">
<input class="login_input" placeholder="Last Name" type="text">
</div>
<div class="login_row">
<input class="login_input" placeholder="Account Number" type="text">
</div>
<div class="login_row"> <div class="login_row">
<input class="login_input" placeholder="Mobile Number" type="text"> <input class="login_input" name="email" v-model="email" v-validate="'required|email'" :class="{'is-danger': errors.has('email') }" placeholder="Email Id" type="text">
<i v-show="errors.has('email')" class="fa fa-warning"></i>
<span v-show="errors.first('email')" class="help is-danger">{{ errors.first('email') }}</span>
</div> </div>
<div class="login_row"> <div class="login_row">
<input class="login_input" placeholder="Enter Password" type="password" v-model="password"> <input class="login_input" ref="password" v-validate="'required|min:6'" name="password" placeholder="Enter Password" :class="{'is-danger': errors.has('password'), min: 6 }" type="password" v-model="password">
<i v-show="errors.has('password')" class="fa fa-warning"></i>
<span v-show="errors.first('password')" class="help is-danger">{{ errors.first('password') }}</span>
</div> </div>
<div class="login_row"> <div class="login_row">
<input class="login_input" placeholder="Confirm Password" type="password" v-model="password"> <input class="login_input" v-validate="'required|confirmed:password'" :class="{'is-danger': errors.has('password_confirmation'), min: 6,}" name="confirm_password" data-vv-as="password" placeholder="Confirm Password" type="password" v-model="cnfpassword">
<i v-show="errors.has('confirm_password')" class="fa fa-warning"></i>
<span v-show="errors.first('confirm_password')" class="help is-danger">{{ errors.first('confirm_password') }}</span>
</div> </div>
<div class="login_row textCenter"> <div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
<router-link class="pageLink" to="/login"> <div class="login_row textCenter cpoint">
<div class="login_btn"> <!-- <router-link class="pageLink" to="/login"> -->
<div class="login_btn" @click="signUp">
SIGN UP SIGN UP
</div> </div>
</router-link> <!-- </router-link> -->
</div> </div>
</fieldset> </fieldset>
</form> </form>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -51,7 +47,12 @@ ...@@ -51,7 +47,12 @@
</template> </template>
<script> <script>
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import api from '../api' import api from '../api'
import config from '../../src/config'
Vue.use(VeeValidate)
export default { export default {
name: 'Signup', name: 'Signup',
...@@ -59,62 +60,69 @@ export default { ...@@ -59,62 +60,69 @@ export default {
return { return {
section: 'Signup', section: 'Signup',
loading: '', loading: '',
username: '', email: '',
password: '', password: '',
cnfpassword: '',
response: '' response: ''
} }
}, },
methods: { methods: {
checkCreds() { signUp() {
const { username, password } = this
this.toggleLoading() this.toggleLoading()
this.resetResponse() this.resetResponse()
this.$store.commit('TOGGLE_LOADING') this.$store.commit('TOGGLE_LOADING')
if (this.email === '' && this.password === '' && this.cnfpassword === '') {
/* Making API call to authenticate a user */ this.response = 'All Fields are required'
} else if (this.email === '') {
this.response = 'Email Id is required'
} else if (this.password === '') {
this.response = 'Password is required'
} else if (this.cnfpassword === '') {
this.response = 'Confirm Password is required'
}
if (this.password !== '' && this.cnfpassword !== '' && this.password !== this.cnfpassword) {
this.response = 'Password and Confirm Password Doesnot Match'
}
if (this.response !== '') {
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
return
}
var params = {'email': this.email, 'password': this.password, 'client_id': config.clientId, 'client_secret': config.clientSecret}
api api
.request('post', '/Signup', { username, password }) .request('post', 'signup', params)
.then(response => { .then(response => {
this.toggleLoading() this.toggleLoading()
var data = response.data var data = response.data
/* Checking if error object was returned from the server */ if (data.status === 'success') {
if (data.error) { // this.$store.commit('SET_USER', data.data.user)
var errorName = data.error.name // this.$store.commit('SET_TOKEN', data.data.access_token)
if (errorName) { if (window.localStorage) {
this.response = window.localStorage.setItem('user', JSON.stringify(data.data.user))
errorName === 'InvalidCredentialsError' window.localStorage.setItem('token', data.data.access_token)
? 'Username/Password incorrect. Please try again.'
: errorName
} else {
this.response = data.error
} }
} else {
this.response = data.data.message
var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
return return
} }
if (data.data.user) {
/* Setting user in the state and caching record to the localStorage */ this.$router.push('/tables')
if (data.user) {
var token = 'Bearer ' + data.token
this.$store.commit('SET_USER', data.user)
this.$store.commit('SET_TOKEN', token)
if (window.localStorage) {
window.localStorage.setItem('user', JSON.stringify(data.user))
window.localStorage.setItem('token', token)
}
this.$router.push(data.redirect ? data.redirect : '/')
} }
}) })
.catch(error => { .catch(() => {
this.$store.commit('TOGGLE_LOADING') this.$store.commit('TOGGLE_LOADING')
console.log(error)
this.response = 'Server appears to be offline' this.response = 'Server appears to be offline'
this.toggleLoading() var self = this
setTimeout(function() {
self.resetResponse()
}, 2000)
// this.toggleLoading()
}) })
}, },
toggleLoading() { toggleLoading() {
...@@ -138,6 +146,9 @@ body, ...@@ -138,6 +146,9 @@ body,
height: 100%; height: 100%;
background-color: #1a5c7c !important; background-color: #1a5c7c !important;
} }
.cpoint{
cursor: pointer !important;
}
......
src/components/views/Tables.vue
...@@ -4,124 +4,36 @@ ...@@ -4,124 +4,36 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="box"> <div class="box">
<div class="box-header"> <div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3> <h3 class="box-title">Transaction Lists</h3>
</div> </div>
<!-- /.box-header -->
<div class="box-body"> <div class="box-body">
<div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper"> <div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div id="example1_length" class="dataTables_length"> <div id="example1_length" class="dataTables_length"></div>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 table-responsive"> <div class="col-sm-12 table-responsive">
<table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable"> <table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
<thead> <thead>
<tr role="row"> <tr role="row">
<th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th> <th aria-label="Date: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Date</th>
<th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th> <th aria-label="Description: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Description</th>
<th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th> <th aria-label="Amount: activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Amount</th>
<th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th> </tr>
<th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th> </thead>
</tr> <!-- <tbody v-if="transactions">
</thead> <tr class="even" role="row" v-for="trans in transactions" :key="trans">
<tbody> <td class="sorting_1">{{trans.date}}</td>
<tr class="even" role="row"> <td>{{trans.description}}</td>
<td class="sorting_1">Blink</td> <td>{{trans.amount}}</td>
<td>Iridium 54.0</td> </tr>
<td>GNU/Linux</td> </tbody> -->
<td>54</td> </table>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td>1.9</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td>1</td>
<td>A</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="1" rowspan="1">Rendering engine</th>
<th colspan="1" rowspan="1">Browser</th>
<th colspan="1" rowspan="1">Platform(s)</th>
<th colspan="1" rowspan="1">Engine version</th>
<th colspan="1" rowspan="1">CSS grade</th>
</tr>
</tfoot>
</table>
</div> </div>
</div> </div>
</div> </div>
<!-- /.box-body -->
</div> </div>
</div> </div>
</div> </div>
...@@ -130,6 +42,8 @@ ...@@ -130,6 +42,8 @@
</template> </template>
<script> <script>
import api from '../../api'
import config from '../../config'
import $ from 'jquery' import $ from 'jquery'
// Require needed datatables modules // Require needed datatables modules
require('datatables.net') require('datatables.net')
...@@ -138,9 +52,38 @@ require('datatables.net-bs') ...@@ -138,9 +52,38 @@ require('datatables.net-bs')
export default { export default {
name: 'Tables', name: 'Tables',
mounted() { mounted() {
this.$nextTick(() => { this.getData()
$('#example1').DataTable() this.loadDatatable()
}) this.access_token = localStorage.getItem('token')
},
methods: {
loadDatatable() {
this.$nextTick(() => {
$('#example1').DataTable()
})
},
getData() {
var params = {'client_id': config.clientId, 'client_secret': config.clientSecret, 'access_token': this.access_token}
var thisObj = this
api
.request('post', 'listTransactions', params)
.then(response => {
thisObj.toggleLoading()
var data = response.data
if (data.status === 'success') {
thisObj.transactions = data.data.resources
} else {
thisObj.response = data.data.message
}
})
.catch(() => {
thisObj.$store.commit('TOGGLE_LOADING')
thisObj.response = 'Server appears to be offline'
})
},
toggleLoading() {
this.loading = this.loading === '' ? 'loading' : ''
}
} }
} }
</script> </script>
......
src/config/index.js
export default { export default {
serverURI: '', // serverURI: 'https://bridge.techlabz.in/',
serverURI: 'http://localhost:3000/',
clientId: '457f0b3a161f44d591540957331af34b',
clientSecret: 'gED8FX2b4IPeO2bg8htG59NKjIQSbczuDlSOBEfDLHO1Tmc7A4rhMqUCH1Ciwa4j',
fixedLayout: false, fixedLayout: false,
hideLogoOnMobile: false hideLogoOnMobile: false
} }
src/routes.js
...@@ -2,14 +2,12 @@ import DashView from './components/Dash.vue' ...@@ -2,14 +2,12 @@ import DashView from './components/Dash.vue'
import LoginView from './components/Login.vue' import LoginView from './components/Login.vue'
import SignupView from './components/Signup.vue' import SignupView from './components/Signup.vue'
import NotFoundView from './components/404.vue' import NotFoundView from './components/404.vue'
// Import Views - Dash
import TablesView from './components/views/Tables.vue' import TablesView from './components/views/Tables.vue'
// Routes // Routes
const routes = [ const routes = [
{ {
path: '/login', path: '/',
component: LoginView component: LoginView
}, },
{ {
...@@ -17,14 +15,14 @@ const routes = [ ...@@ -17,14 +15,14 @@ const routes = [
component: SignupView component: SignupView
}, },
{ {
path: '/', path: '/tables',
component: DashView, component: DashView,
children: [ children: [
{ {
path: 'tables', path: 'tables',
alias: '', alias: '',
component: TablesView, component: TablesView,
name: 'Tables', name: 'Transactions',
meta: {description: 'Simple and advance table in CoPilot'} meta: {description: 'Simple and advance table in CoPilot'}
} }
] ]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment