Base attempt at using vuex to handle logins

This commit is contained in:
Dane Everitt 2018-06-05 23:00:01 -07:00
parent cc58bc9bd5
commit e948d81d8a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 218 additions and 202 deletions

View file

@ -0,0 +1,16 @@
<?php
namespace Pterodactyl\Http\Controllers\Api\Client;
use Illuminate\Http\Request;
use Pterodactyl\Transformers\Api\Client\AccountTransformer;
class AccountController extends ClientApiController
{
public function index(Request $request): array
{
return $this->fractal->item($request->user())
->transformWith($this->getTransformer(AccountTransformer::class))
->toArray();
}
}

View file

@ -2,7 +2,6 @@
namespace Pterodactyl\Http\Controllers\Auth;
use Cake\Chronos\Chronos;
use Lcobucci\JWT\Builder;
use Illuminate\Http\Request;
use Pterodactyl\Models\User;
@ -16,6 +15,7 @@ use Illuminate\Contracts\Auth\Authenticatable;
use Illuminate\Contracts\Encryption\Encrypter;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Pterodactyl\Traits\Helpers\ProvidesJWTServices;
use Pterodactyl\Transformers\Api\Client\AccountTransformer;
use Illuminate\Contracts\Cache\Repository as CacheRepository;
use Pterodactyl\Contracts\Repository\UserRepositoryInterface;
@ -137,24 +137,18 @@ abstract class AbstractLoginController extends Controller
$request->session()->regenerate();
$this->clearLoginAttempts($request);
$token = $this->builder->setIssuer(config('app.url'))
->setAudience(config('app.url'))
->setId(str_random(12), true)
->setIssuedAt(Chronos::now()->getTimestamp())
->setNotBefore(Chronos::now()->getTimestamp())
->setExpiration(Chronos::now()->addSeconds(config('session.lifetime'))->getTimestamp())
->set('user', $user->only([
'id', 'uuid', 'username', 'email', 'name_first', 'name_last', 'language', 'root_admin',
]))
->sign($this->getJWTSigner(), $this->getJWTSigningKey())
->getToken();
$this->auth->guard()->login($user, true);
debug($request->cookies->all());
return response()->json([
'complete' => true,
'intended' => $this->redirectPath(),
'token' => $token->__toString(),
'cookie' => [
'name' => config('session.cookie'),
'value' => $this->encrypter->encrypt($request->cookie(config('session.cookie'))),
],
'user' => (new AccountTransformer())->transform($user),
]);
}

View file

@ -0,0 +1,36 @@
<?php
namespace Pterodactyl\Transformers\Api\Client;
use Pterodactyl\Models\User;
class AccountTransformer extends BaseClientTransformer
{
/**
* Return the resource name for the JSONAPI output.
*
* @return string
*/
public function getResourceName(): string
{
return 'user';
}
/**
* Return basic information about the currently logged in user.
*
* @param \Pterodactyl\Models\User $model
* @return array
*/
public function transform(User $model)
{
return [
'admin' => $model->root_admin,
'username' => $model->username,
'email' => $model->email,
'first_name' => $model->name_first,
'last_name' => $model->name_last,
'language' => $model->language,
];
}
}

View file

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

View file

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

View file

@ -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'));
}
})

View file

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

View file

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

View file

@ -0,0 +1,6 @@
import auth from './modules/auth';
export default {
// strict: process.env.NODE_ENV !== 'production',
modules: { auth },
};

View 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;
},
},
};

View file

@ -12,6 +12,10 @@ use Pterodactyl\Http\Middleware\Api\Client\AuthenticateClientAccess;
*/
Route::get('/', 'ClientController@index')->name('api.client.index');
Route::group(['prefix' => '/account'], function () {
Route::get('/', 'AccountController@index')->name('api.client.account');
});
/*
|--------------------------------------------------------------------------
| Client Control API