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

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

View file

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

View file

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

View file

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

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>
`,
});

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>

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>
`,
});

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>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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