Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Undo the ts setting in vue components, begin migration to Vue.component setup

Browse source
This commit is contained in:
Dane Everitt 2018-12-29 19:24:52 -08:00
parent 0e1d35c8a0
commit 6330d6579f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
35 changed files with 179 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/scripts/components/Flash.vue
View file

@ -12,7 +12,7 @@
</div>
</template>
<script lang="ts">
<script>
import MessageBox from './MessageBox.vue';
export default {

2
resources/assets/scripts/components/MessageBox.vue
View file

@ -5,7 +5,7 @@
</div>
</template>
<script lang="ts">
<script>
export default {
name: 'message-box',
props: {

2
resources/assets/scripts/components/auth/ForgotPassword.vue
View file

@ -36,7 +36,7 @@
</div>
</template>
<script lang="ts">
<script>
export default {
name: 'forgot-password',
props: {

36
resources/assets/scripts/components/auth/Login.ts Normal file
View file

@ -0,0 +1,36 @@
import Vue from 'vue';
import LoginForm from "./LoginForm";
export default Vue.component('login', {
data: function () {
return {
user: {
email: ''
},
};
},
components: {
LoginForm,
},
methods: {
onUpdateEmail: function (value: string) {
this.$data.user.email = value;
},
},
template: `
<div>
<!--<flash container="mb-2"/>-->
<login-form
v-if="this.$route.name === 'login'"
v-bind:user="user"
v-on:update-email="onUpdateEmail"
/>
<!--<forgot-password-->
<!--v-if="this.$route.name === 'forgot-password'"-->
<!--v-bind:email="user.email"-->
<!--v-on:update-email="onUpdateEmail"-->
<!--/>-->
<!--<two-factor-form v-if="this.$route.name === 'checkpoint'" />-->
</div>
`,
});

46
resources/assets/scripts/components/auth/Login.vue
View file

@ -1,46 +0,0 @@
<template>
<div>
<flash container="mb-2"/>
<login-form
v-if="this.$route.name === 'login'"
v-bind:user="user"
v-on:update-email="onUpdateEmail"
/>
<forgot-password
v-if="this.$route.name === 'forgot-password'"
v-bind:email="user.email"
v-on:update-email="onUpdateEmail"
/>
<two-factor-form v-if="this.$route.name === 'checkpoint'" />
</div>
</template>
<script lang="ts">
import Flash from '../Flash.vue';
import ForgotPassword from "./ForgotPassword.vue";
import LoginForm from "./LoginForm.vue";
import TwoFactorForm from "./TwoFactorForm.vue";
import Vue from 'vue';
export default Vue.extend({
name: 'login',
data: function () {
return {
user: {
email: ''
},
};
},
methods: {
onUpdateEmail: function (value) {
this.$data.user.email = value;
},
},
components: {
Flash,
TwoFactorForm,
ForgotPassword,
LoginForm,
},
});
</script>

112
resources/assets/scripts/components/auth/LoginForm.ts Normal file
View file

@ -0,0 +1,112 @@
import Vue from 'vue';
import {isObject} from 'lodash';
export default Vue.component('login-form', {
props: {
user: {
type: Object,
required: false,
default: function () {
return {
email: '',
password: '',
};
},
}
},
data: function () {
return {
showSpinner: false,
}
},
mounted: function () {
(this.$refs.email as HTMLElement).focus();
},
methods: {
// Handle a login request eminating from the form. If 2FA is required the
// user will be presented with the 2FA modal window.
submitForm: function () {
const self = this;
this.$data.showSpinner = true;
this.$flash.clear();
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;
}
this.$props.user.password = '';
this.$data.showSpinner = false;
this.$router.push({name: 'checkpoint', query: {token: response.token}});
})
.catch(err => {
this.$props.user.password = '';
this.$data.showSpinner = false;
(this.$refs.password as HTMLElement).focus();
this.$store.commit('auth/logout');
if (!err.response) {
return console.error(err);
}
const response = err.response;
if (response.data && isObject(response.data.errors)) {
response.data.errors.forEach(function (error: any) {
self.$flash.error(error.detail);
});
}
});
},
// Update the email address associated with the login form
// so that it is populated in the parent model automatically.
updateEmail: function (event: { target: HTMLInputElement }) {
this.$emit('update-email', event.target.value);
}
},
template: `
<form class="login-box" method="post"
v-on:submit.prevent="submitForm"
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input open-label" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
ref="email"
:class="{ 'has-content' : user.email.length > 0 }"
:readonly="showSpinner"
:value="user.email"
v-on:input="updateEmail($event)"
/>
<label id="grid-username-label" for="grid-username">{{ $t('strings.user_identifier') }}</label>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input open-label" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
ref="password"
:class="{ 'has-content' : user.password && user.password.length > 0 }"
:readonly="showSpinner"
v-model="user.password"
/>
<label id="grid-password-label" for="grid-password">{{ $t('strings.password') }}</label>
</div>
</div>
<div>
<button id="grid-login-button" class="btn btn-blue btn-jumbo" type="submit" aria-label="Log in"
v-bind:disabled="showSpinner">
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
<span v-bind:class="{ hidden: showSpinner }">
{{ $t('auth.sign_in') }}
</span>
</button>
</div>
<div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password"
:to="{ name: 'forgot-password' }">
{{ $t('auth.forgot_password.label') }}
</router-link>
</div>
</form>
`,
});

115
resources/assets/scripts/components/auth/LoginForm.vue
View file

@ -1,115 +0,0 @@
<template>
<div>
<form class="login-box" method="post"
v-on:submit.prevent="submitForm"
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input open-label" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
ref="email"
:class="{ 'has-content' : user.email.length > 0 }"
:readonly="showSpinner"
:value="user.email"
v-on:input="updateEmail($event)"
/>
<label id="grid-username-label" for="grid-username">{{ $t('strings.user_identifier') }}</label>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input open-label" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
ref="password"
:class="{ 'has-content' : user.password && user.password.length > 0 }"
:readonly="showSpinner"
v-model="user.password"
/>
<label id="grid-password-label" for="grid-password">{{ $t('strings.password') }}</label>
</div>
</div>
<div>
<button id="grid-login-button" class="btn btn-blue btn-jumbo" type="submit" aria-label="Log in"
v-bind:disabled="showSpinner">
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
<span v-bind:class="{ hidden: showSpinner }">
{{ $t('auth.sign_in') }}
</span>
</button>
</div>
<div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password"
:to="{ name: 'forgot-password' }">
{{ $t('auth.forgot_password.label') }}
</router-link>
</div>
</form>
</div>
</template>
<script lang="ts">
export default {
name: 'login-form',
props: {
user: {
type: Object,
required: false,
default: function () {
return {
email: '',
password: '',
};
},
}
},
data: function () {
return {
showSpinner: false,
}
},
mounted: function () {
this.$refs.email.focus();
},
methods: {
// Handle a login request eminating from the form. If 2FA is required the
// user will be presented with the 2FA modal window.
submitForm: function () {
const self = this;
this.$data.showSpinner = true;
this.clearFlashes();
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;
}
this.$props.user.password = '';
this.$data.showSpinner = false;
this.$router.push({name: 'checkpoint', query: {token: response.token}});
})
.catch(err => {
this.$props.user.password = '';
this.$data.showSpinner = false;
this.$refs.password.focus();
this.$store.commit('auth/logout');
if (!err.response) {
return console.error(err);
}
const response = err.response;
if (response.data && _.isObject(response.data.errors)) {
response.data.errors.forEach(function (error) {
self.error(error.detail);
});
}
});
},
// Update the email address associated with the login form
// so that it is populated in the parent model automatically.
updateEmail: function (event) {
this.$emit('update-email', event.target.value);
}
}
}
</script>

2
resources/assets/scripts/components/auth/ResetPassword.vue
View file

@ -55,7 +55,7 @@
</div>
</template>
<script lang="ts">
<script>
export default {
name: "ResetPassword",
props: {

2
resources/assets/scripts/components/auth/TwoFactorForm.vue
View file

@ -28,7 +28,7 @@
</form>
</template>
<script lang="ts">
<script>
export default {
name: "two-factor-form",
data: function () {

2
resources/assets/scripts/components/core/Modal.vue
View file

@ -11,7 +11,7 @@
</transition>
</template>
<script lang="ts">
<script>
import { XIcon } from 'vue-feather-icons';
export default {
name: 'modal',

2
resources/assets/scripts/components/core/Navigation.vue
View file

@ -67,7 +67,7 @@
</div>
</template>
<script lang="ts">
<script>
import debounce from 'lodash/debounce';
import { mapState } from 'vuex';
import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'

2
resources/assets/scripts/components/dashboard/Account.vue
View file

@ -25,7 +25,7 @@
</div>
</template>
<script lang="ts">
<script>
import Navigation from '../core/Navigation';
import Flash from '../Flash';
import UpdateEmail from './account/UpdateEmail';

2
resources/assets/scripts/components/dashboard/Dashboard.vue
View file

@ -27,7 +27,7 @@
</div>
</template>
<script lang="ts">
<script>
import debounce from 'lodash/debounce';
import Flash from '../Flash';
import ServerBox from './ServerBox';

2
resources/assets/scripts/components/dashboard/ServerBox.vue
View file

@ -35,7 +35,7 @@
</div>
</template>
<script lang="ts">
<script>
import get from 'lodash/get';
import differenceInSeconds from 'date-fns/difference_in_seconds';

2
resources/assets/scripts/components/dashboard/account/ChangePassword.vue
View file

@ -38,7 +38,7 @@
</div>
</template>
<script lang="ts">
<script>
import isObject from 'lodash/isObject';
export default {

2
resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue
View file

@ -62,7 +62,7 @@
</div>
</template>
<script lang="ts">
<script>
import Vue from 'vue';
import isObject from 'lodash/isObject';

2
resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
View file

@ -26,7 +26,7 @@
</div>
</template>
<script lang="ts">
<script>
import { isObject, get } from 'lodash';
import { mapState, mapActions } from 'vuex';

2
resources/assets/scripts/components/forms/CSRF.vue
View file

@ -2,7 +2,7 @@
<input type="hidden" name="_token" v-bind:value="X_CSRF_TOKEN" />
</template>
<script lang="ts">
<script>
export default {
name: 'csrf',
data: function () {

4
resources/assets/scripts/components/server/Server.vue
View file

@ -63,20 +63,18 @@
</div>
</template>
<script lang="ts">
<script>
import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
import Navigation from '../core/Navigation';
import ProgressBar from './components/ProgressBar';
import { mapState } from 'vuex';
import io from 'socket.io-client';
import { Socketio } from '../../mixins/socketio/index';
import PowerButtons from './components/PowerButtons';
import Flash from '../Flash';
export default {
name: 'server',
mixins: [Socketio],
components: {
Flash, PowerButtons, ProgressBar, Navigation,
TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon,

2
resources/assets/scripts/components/server/ServerAllocations.vue
View file

@ -2,7 +2,7 @@
</template>
<script lang="ts">
<script>
export default {
name: "ServerAllocations"
}

2
resources/assets/scripts/components/server/ServerSchedules.vue
View file

@ -2,7 +2,7 @@
</template>
<script lang="ts">
<script>
export default {
name: "ServerSchedules"
}

2
resources/assets/scripts/components/server/ServerSettings.vue
View file

@ -2,7 +2,7 @@
</template>
<script lang="ts">
<script>
export default {
name: "ServerSettings"
}

2
resources/assets/scripts/components/server/ServerSubusers.vue
View file

@ -2,7 +2,7 @@
</template>
<script lang="ts">
<script>
export default {
name: "ServerSubusers"
}

4
resources/assets/scripts/components/server/components/PowerButtons.vue
View file

@ -22,14 +22,12 @@
</div>
</template>
<script lang="ts">
<script>
import Status from '../../../helpers/statuses';
import { Socketio } from '../../../mixins/socketio/index';
import { mapState } from 'vuex';
export default {
name: 'power-buttons',
mixins: [Socketio],
computed: {
...mapState('socket', ['connected', 'status']),
},

2
resources/assets/scripts/components/server/components/ProgressBar.vue
View file

@ -11,7 +11,7 @@
</div>
</template>
<script lang="ts">
<script>
export default {
name: 'progress-bar',
props: {

2
resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
View file

@ -35,7 +35,7 @@
</div>
</template>
<script lang="ts">
<script>
import MessageBox from '../../../MessageBox';
import get from 'lodash/get';

2
resources/assets/scripts/components/server/components/database/DatabaseRow.vue
View file

@ -41,7 +41,7 @@
</div>
</template>
<script lang="ts">
<script>
import { LockIcon, Trash2Icon, DatabaseIcon } from 'vue-feather-icons';
import Modal from '../../../core/Modal';
import DeleteDatabaseModal from './DeleteDatabaseModal';

2
resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
View file

@ -18,7 +18,7 @@
</div>
</template>
<script lang="ts">
<script>
export default {
name: 'delete-database-modal',
props: {

2
resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue
View file

@ -51,7 +51,7 @@
</div>
</template>
<script lang="ts">
<script>
import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon } from 'vue-feather-icons';
export default {

2
resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue
View file

@ -14,7 +14,7 @@
</div>
</template>
<script lang="ts">
<script>
import * as Helpers from '../../../../helpers/index';
import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
import FileManagerContextMenu from './FileManagerContextMenu';

2
resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue
View file

@ -14,7 +14,7 @@
</div>
</template>
<script lang="ts">
<script>
import { FolderIcon } from 'vue-feather-icons';
import { formatDate } from '../../../../helpers/index';

4
resources/assets/scripts/components/server/subpages/Console.vue
View file

@ -24,16 +24,14 @@
</div>
</template>
<script lang="ts">
<script>
import { Terminal } from 'xterm';
import * as TerminalFit from 'xterm/lib/addons/fit/fit';
import {mapState} from 'vuex';
import {Socketio} from '../../../mixins/socketio/index';
Terminal.applyAddon(TerminalFit);
export default {
mixins: [Socketio],
name: 'console-page',
computed: {
...mapState('socket', ['connected']),

2
resources/assets/scripts/components/server/subpages/Databases.vue
View file

@ -29,7 +29,7 @@
</div>
</template>
<script lang="ts">
<script>
import { DatabaseIcon, LockIcon, Trash2Icon } from 'vue-feather-icons';
import map from 'lodash/map';
import filter from 'lodash/filter';

2
resources/assets/scripts/components/server/subpages/FileManager.vue
View file

@ -41,7 +41,7 @@
</div>
</template>
<script lang="ts">
<script>
import map from 'lodash/map';
import { mapState } from 'vuex';
import FileManagerFileRow from '../components/filemanager/FileManagerFileRow';

2
resources/assets/scripts/router.ts
View file

@ -4,7 +4,7 @@ import store from './store/index';
const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
// Base Vuejs Templates
import Login from './components/auth/Login.vue';
import Login from './components/auth/Login';
import Dashboard from './components/dashboard/Dashboard.vue';
import Account from './components/dashboard/Account.vue';
import ResetPassword from './components/auth/ResetPassword.vue';