<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-app-bar app> <v-toolbar-title> <b>MC</b> <b>A</b>ccount <b>C</b>hecker and <b>I</b>ntegrity <b>V</b>alidator <sub>by <a href="https://github.com/cuddlycheetah">CuddlyCheetah</a></sub> </v-toolbar-title> </v-app-bar> <v-content> <!-- hello to anyone, who reads this :3 --> <v-container> <v-data-table must-sort :footer-props="footerProps" :options="options" :loading="loading" loading-text="Loading... Please wait" :headers="headers" item-key="_id" :items="accountData" :items-per-page="5" class="elevation-1" :search="search" :custom-filter="filterOnlyCapsText"> <template v-slot:top> <v-text-field v-model="search" label="Search" class="mx-4"></v-text-field> </template> <template v-slot:no-data> No Accounts to show </template> <template v-slot:item.uuid="{ item }"> <tr> <td :colspan="headers.length"> <img v-if="item.validState == 1" :alt="item.uuid" :src="'https://www.mc-heads.net/avatar/' + item.uuid + '/48/nohelm.png'"> <img v-if="item.validState == -1" :src="'Barrier_2.png'"> </td> </tr> </template> </v-data-table> <hr> Import Bulk Accounts <v-textarea outlined v-model="bulkImportText" label="Bulk Import Data" placeholder="[username]:<user/email>:<password> ..."></v-textarea> <v-btn :disabled="isBulkTextValid()" raised @click="bulkImport()">Import</v-btn> </v-container> </v-content> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> <script> new Vue({ el: '#app', vuetify: new Vuetify(), //vueResource: new vueResource(), http: { root: '/', }, data() { return { loading: true, search: '', options: { itemsPerPage: -1, groupBy: ['validState'], groupDesc: ['validState'] }, footerProps: { itemsPerPageOptions: [ -1, 5, 10, 20, 50, 75, 100 ] }, validStateLUT: { [-1]: '❌ Invalid', [0]: '❔ Unknown', [1]: '✅ Valid' }, headers: [ { text: 'UUID', align: 'start', groupable: false, sortable: false, value: 'uuid', }, { text: 'State', value: 'validStateText', groupable: true }, { text: 'E-Mail', value: 'email', groupable: false }, { text: 'Username', value: 'username', groupable: false }, { text: 'Passwort', value: 'password', groupable: false }, ], accountData: [], bulkImportText: '', } }, created() { this.refresh() }, methods: { refresh() { this.$http.get('/api/accounts').then(response => { this.accountData = response.body.map(item => { item.validStateText = this.validStateLUT[item.validState] return item }) //this.accountData.sort((a,b) => a.validState - b.validState) this.loading = false }, response => { }) }, isBulkTextValid() { return this.bulkImportText.length < 0 || this.bulkImportText.indexOf(':') === -1 }, bulkImport() { console.log(this.bulkImportText) const accounts = this.bulkImportText.split('\n') console.log(accounts) this.$http.post('/api/import', JSON.stringify(accounts)).then(response => { this.bulkImportText = response.body this.refresh() }, console.error) }, } }) </script> </body> </html>