Base attempt at using vuex to handle logins
This commit is contained in:
Dane Everitt
parent
cc58bc9bd5
commit
e948d81d8a
12 changed files with 218 additions and 202 deletions
|
|
@ -8,16 +8,17 @@ import { Ziggy } from './helpers/ziggy';
|
|||
import Locales from './../../../resources/lang/locales';
|
||||
import { flash } from './mixins/flash';
|
||||
import { routes } from './routes';
|
||||
import { storeData } from './store';
|
||||
import storeData from './store/index.js';
|
||||
|
||||
window.events = new Vue;
|
||||
window.Ziggy = Ziggy;
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
Vue.use(Vuex);
|
||||
|
||||
const store = new Vuex.Store(storeData);
|
||||
const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
Vue.mixin({ methods: { route } });
|
||||
Vue.mixin(flash);
|
||||
|
||||
|
|
|
|||
|
|
@ -77,32 +77,21 @@
|
|||
this.$data.showSpinner = true;
|
||||
|
||||
this.clearFlashes();
|
||||
axios.post(this.route('auth.login'), {
|
||||
user: this.$props.user.email,
|
||||
password: this.$props.user.password,
|
||||
})
|
||||
.then(function (response) {
|
||||
// If there is a 302 redirect or some other odd behavior (basically, response that isnt
|
||||
// in JSON format) throw an error and don't try to continue with the login.
|
||||
if (!(response.data instanceof Object)) {
|
||||
throw new Error('An error was encountered while processing this request.');
|
||||
this.$store.dispatch('auth/login', { user: this.$props.user.email, password: this.$props.user.password })
|
||||
.then(response => {
|
||||
if (response.complete) {
|
||||
return window.location = response.intended;
|
||||
}
|
||||
|
||||
if (response.data.complete) {
|
||||
localStorage.setItem('token', response.data.token);
|
||||
self.$store.dispatch('login');
|
||||
return window.location = response.data.intended;
|
||||
}
|
||||
|
||||
self.$props.user.password = '';
|
||||
self.$data.showSpinner = false;
|
||||
self.$router.push({name: 'checkpoint', query: {token: response.data.login_token}});
|
||||
this.$props.user.password = '';
|
||||
this.$data.showSpinner = false;
|
||||
this.$router.push({name: 'checkpoint', query: {token: response.login_token}});
|
||||
})
|
||||
.catch(function (err) {
|
||||
self.$props.user.password = '';
|
||||
self.$data.showSpinner = false;
|
||||
self.$refs.password.focus();
|
||||
self.$store.dispatch('logout');
|
||||
.catch(err => {
|
||||
this.$props.user.password = '';
|
||||
this.$data.showSpinner = false;
|
||||
this.$refs.password.focus();
|
||||
this.$store.dispatch('auth/logout');
|
||||
|
||||
if (!err.response) {
|
||||
return console.error(err);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<script>
|
||||
import { DateTime } from 'luxon';
|
||||
import { ServerCollection } from '../../models/server';
|
||||
import Server from '../../models/server';
|
||||
import _ from 'lodash';
|
||||
import Flash from '../Flash';
|
||||
import ServerBox from './ServerBox';
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
documentVisible: true,
|
||||
loading: true,
|
||||
search: '',
|
||||
servers: new ServerCollection,
|
||||
servers: [],
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -83,14 +83,14 @@
|
|||
this.clearFlashes();
|
||||
})
|
||||
.then(response => {
|
||||
this.servers = new ServerCollection;
|
||||
this.servers = [];
|
||||
response.data.data.forEach(obj => {
|
||||
this.getResourceUse(
|
||||
this.servers.add(obj.attributes)
|
||||
);
|
||||
const s = new Server(obj.attributes);
|
||||
this.servers.push(s);
|
||||
this.getResourceUse(s);
|
||||
});
|
||||
|
||||
if (this.servers.models.length === 0) {
|
||||
if (this.servers.length === 0) {
|
||||
this.info(this.$t('dashboard.index.no_matches'));
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,114 +1,3 @@
|
|||
import { Collection, Model } from 'vue-mc';
|
||||
export default class Server {
|
||||
|
||||
/**
|
||||
* A generic server model used throughout the code base.
|
||||
*/
|
||||
export class Server extends Model {
|
||||
/**
|
||||
* Identifier the primary identifier for this model.
|
||||
*
|
||||
* @returns {{identifier: string}}
|
||||
*/
|
||||
static options() {
|
||||
return {
|
||||
identifier: 'identifier',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the defaults for this model.
|
||||
*
|
||||
* @returns {object}
|
||||
*/
|
||||
static defaults() {
|
||||
return {
|
||||
uuid: null,
|
||||
identifier: null,
|
||||
name: '',
|
||||
description: '',
|
||||
node: '',
|
||||
limits: {
|
||||
memory: 0,
|
||||
swap: 0,
|
||||
disk: 0,
|
||||
io: 0,
|
||||
cpu: 0,
|
||||
},
|
||||
allocation: {
|
||||
ip: null,
|
||||
port: null,
|
||||
},
|
||||
feature_limits: {
|
||||
databases: 0,
|
||||
allocations: 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Mutations to apply to items in this model.
|
||||
*
|
||||
* @returns {{name: StringConstructor, description: StringConstructor}}
|
||||
*/
|
||||
static mutations() {
|
||||
return {
|
||||
uuid: String,
|
||||
identifier: String,
|
||||
name: String,
|
||||
description: String,
|
||||
node: String,
|
||||
limits: {
|
||||
memory: Number,
|
||||
swap: Number,
|
||||
disk: Number,
|
||||
io: Number,
|
||||
cpu: Number,
|
||||
},
|
||||
allocation: {
|
||||
ip: String,
|
||||
port: Number,
|
||||
},
|
||||
feature_limits: {
|
||||
databases: Number,
|
||||
allocations: Number,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Routes to use when building models.
|
||||
*
|
||||
* @returns {{fetch: string}}
|
||||
*/
|
||||
static routes() {
|
||||
return {
|
||||
fetch: '/api/client/servers/{identifier}',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class ServerCollection extends Collection {
|
||||
static model() {
|
||||
return Server;
|
||||
}
|
||||
|
||||
static defaults() {
|
||||
return {
|
||||
orderBy: identifier,
|
||||
};
|
||||
}
|
||||
|
||||
static routes() {
|
||||
return {
|
||||
fetch: '/api/client',
|
||||
};
|
||||
}
|
||||
|
||||
get todo() {
|
||||
return this.sum('done');
|
||||
}
|
||||
|
||||
get done() {
|
||||
return this.todo === 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,51 @@
|
|||
import { Collection, Model } from 'vue-mc';
|
||||
import JwtDecode from 'jwt-decode';
|
||||
|
||||
export class User extends Model {
|
||||
static defaults() {
|
||||
return {
|
||||
id: null,
|
||||
uuid: '',
|
||||
username: '',
|
||||
email: '',
|
||||
name_first: '',
|
||||
name_last: '',
|
||||
language: 'en',
|
||||
root_admin: false,
|
||||
}
|
||||
export default class User {
|
||||
/**
|
||||
* Get a new user model by hitting the Panel API using the authentication token
|
||||
* provided. If no user can be retrieved null will be returned.
|
||||
*
|
||||
* @param {string} token
|
||||
* @param {string} cookie
|
||||
* @return {User|null}
|
||||
*/
|
||||
static fromCookie(token, cookie = 'pterodactyl_session') {
|
||||
window.axios.get('/api/client/account', {
|
||||
headers: {
|
||||
Cookie: `${cookie}=${token}`,
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
return new User(response.data.attributes);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return null;
|
||||
})
|
||||
}
|
||||
|
||||
static mutations() {
|
||||
return {
|
||||
id: Number,
|
||||
uuid: String,
|
||||
username: String,
|
||||
email: String,
|
||||
name_first: String,
|
||||
name_last: String,
|
||||
language: String,
|
||||
root_admin: Boolean,
|
||||
}
|
||||
}
|
||||
|
||||
static fromJWT(token) {
|
||||
return new User(JwtDecode(token).user || {});
|
||||
}
|
||||
}
|
||||
|
||||
export class UserCollection extends Collection {
|
||||
static model() {
|
||||
return User;
|
||||
}
|
||||
|
||||
get todo() {
|
||||
return this.sum('done');
|
||||
}
|
||||
|
||||
get done() {
|
||||
return this.todo === 0;
|
||||
/**
|
||||
* Create a new user model.
|
||||
*
|
||||
* @param {Boolean} admin
|
||||
* @param {String} username
|
||||
* @param {String} email
|
||||
* @param {String} first_name
|
||||
* @param {String} last_name
|
||||
* @param {String} language
|
||||
*/
|
||||
constructor({
|
||||
admin,
|
||||
username,
|
||||
email,
|
||||
first_name,
|
||||
last_name,
|
||||
language,
|
||||
}) {
|
||||
this.admin = admin;
|
||||
this.username = username;
|
||||
this.email = email;
|
||||
this.name = `${first_name} ${last_name}`;
|
||||
this.first_name = first_name;
|
||||
this.last_name = last_name;
|
||||
this.language = language;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
6
resources/assets/scripts/store/index.js
Normal file
6
resources/assets/scripts/store/index.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import auth from './modules/auth';
|
||||
|
||||
export default {
|
||||
// strict: process.env.NODE_ENV !== 'production',
|
||||
modules: { auth },
|
||||
};
|
||||
78
resources/assets/scripts/store/modules/auth.js
Normal file
78
resources/assets/scripts/store/modules/auth.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import User from './../../models/user';
|
||||
const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
user: () => {
|
||||
const data = JSON.parse(localStorage.getItem('token'));
|
||||
|
||||
return User.fromCookie(data.value, data.name);
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
/**
|
||||
* Return the currently authenticated user.
|
||||
*
|
||||
* @param state
|
||||
* @returns {User|null}
|
||||
*/
|
||||
currentUser: function (state) {
|
||||
return state.user;
|
||||
}
|
||||
},
|
||||
setters: {},
|
||||
actions: {
|
||||
login: ({commit}, {user, password}) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.axios.post(route('auth.login'), {user, password})
|
||||
.then(response => {
|
||||
commit('logout');
|
||||
|
||||
// If there is a 302 redirect or some other odd behavior (basically, response that isnt
|
||||
// in JSON format) throw an error and don't try to continue with the login.
|
||||
if (!(response.data instanceof Object)) {
|
||||
return reject(new Error('An error was encountered while processing this request.'));
|
||||
}
|
||||
|
||||
if (response.data.complete) {
|
||||
commit('login', {cookie: response.data.cookie, user: response.data.user});
|
||||
return resolve({
|
||||
complete: true,
|
||||
intended: response.data.intended,
|
||||
});
|
||||
}
|
||||
|
||||
return resolve({
|
||||
complete: false,
|
||||
token: response.data.login_token,
|
||||
});
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
logout: function ({commit}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.axios.get(route('auth.logout'))
|
||||
.then(() => {
|
||||
commit('logout');
|
||||
return resolve();
|
||||
})
|
||||
.catch(reject);
|
||||
})
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
login: function (state, {cookie, user}) {
|
||||
state.user = new User(user);
|
||||
localStorage.setItem('token', JSON.stringify({
|
||||
name: cookie.name,
|
||||
value: cookie.value,
|
||||
}));
|
||||
},
|
||||
logout: function (state) {
|
||||
localStorage.removeItem('token');
|
||||
state.user = null;
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue