アップデートしまった（多分）

composer.json

@@ -6,13 +6,13 @@
     "type": "project",
     "require": {
         "php": ">=7.1.3",
-        "barryvdh/laravel-cors": "^0.11.0",
+        "barryvdh/laravel-cors": "^0.11.2",
         "dingo/api": "2.0.0-alpha2",
         "fideloper/proxy": "~4.0",
-        "laravel/framework": "5.6.*",
+        "laravel/framework": "5.7.*",
         "laravel/tinker": "~1.0",
-        "predis/predis": "^1.1",
-        "tymon/jwt-auth": "1.0.0-rc.2"
+        "predis/predis": "^1.1.1",
+        "tymon/jwt-auth": "1.0.0-rc.3"
     },
     "require-dev": {
         "filp/whoops": "~2.0",

package.json

@@ -12,12 +12,16 @@
     },
     "devDependencies": {
         "axios": "^0.18",
-        "bootstrap": "^4.0.0",
-        "popper.js": "^1.12",
-        "cross-env": "^5.1",
-        "jquery": "^3.2",
-        "laravel-mix": "^2.0",
-        "lodash": "^4.17.4",
-        "vue": "^2.5.7"
+        "bootstrap": "^4.2.1",
+        "cross-env": "^5.2",
+        "jquery": "^3.3.1",
+        "laravel-mix": "^4.0.13",
+        "lodash": "^4.17.11",
+        "popper.js": "^1.14.6",
+        "resolve-url-loader": "^2.3.1",
+        "sass": "^1.15.3",
+        "sass-loader": "^7.1.0",
+        "vue": "^2.5.21",
+        "vue-template-compiler": "^2.5.21"
     }
 }

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css"
-}
+}

resources/assets/js/app.js

@@ -19,6 +19,6 @@ Vue.component('bash', require('./components/cli.vue'));
 
 // Vue.component('example', require('./components/Example.vue'));
 
-new Vue({
+const app = new Vue({
     el: '#app'
 });

resources/assets/js/bootstrap.js

@@ -30,13 +30,13 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  * a simple convenience so we don't have to attach every token manually.
  */
 
-// let token = document.head.querySelector('meta[name="csrf-token"]');
+let token = document.head.querySelector('meta[name="csrf-token"]');
 
-// if (token) {
-    // window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
-// } else {
-    // console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
-// }
+if (token) {
+    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+} else {
+    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+}
 
 /**
  * Echo exposes an expressive API for subscribing to channels and listening

resources/assets/js/components/cli.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
     <span class="regText">
+      <span class="regBold">
+        {{ l.username }}@{{ l.hostname }}:<span class="pathText">{{ l.path }}</span>
+      </span>$
+      <span id="box">&#9646;</span>
       <span v-for="(l, i) in line" :key="`l-${i}`">
-        <span class="regBold">
-          {{ l.username }}@{{ l.hostname }}:<span class="pathText">{{ l.path }}</span>
-        </span>$
         <span v-if="l.active">
           <input
             :key="i"
@@ -83,7 +84,7 @@
               />
             </span>
           </span>
-        <br />
+          <br />
         </span>
       </span>
     </span>
@@ -91,66 +92,25 @@
 </template>
 
 <script>
-export default {
-  name: 'cli',
-  data () {
-    return {
-      user: 'user',
-      host: '076server',
-      pwd: '/',
-      line: [{
-        active: true,
-        username: this.user,
-        hostname: this.host,
-        path: this.pwd,
-        command: ''
-      }],
-      result: [],
-      group: []
-    }
-  },
-  created: function () {
-    this.line = [];
-    this.line.push({
-      active: true,
-      username: this.user,
-      hostname: this.host,
-      path: this.pwd,
-      command: ''
-    });
-  },
-  methods: {
-    exec(text, key) {
-      var arg = text.split(' ');
-
-      this.line[key].active = false;
-      if (arg[0] === 'sudo') this.isSudo();
-      else this.execContinue(text, key);
+  export default {
+    data: function () {
+      return {
+        user: 'user',
+        host: '076server',
+        pwd: '/',
+        line: [{
+          active: true,
+          username: this.user,
+          hostname: this.host,
+          path: this.pwd,
+          command: ''
+        }],
+        result: [],
+        group: []
+      }
     },
-    isSudo() {
-      this.result.push({
-        active: true,
-        text: 'パスワード: ',
-        field: true,
-        password: true,
-        command: ''
-      });
-    },
-    execContinue(text, key) {
-      // this.result[key].active = false;
-      var arg = text.split(' ');
-
-      if (arg[0] === 'ls') this.ls(this.line[key].path);
-      else if (arg[0] === 'cd') this.cd(arg[1]);
-      else if (arg[0] === 'clear') this.clear();
-      else this.result.push({
-        active: true,
-        text: arg[0] + ': コマンドは見つかれません。',
-        field: false,
-        password: false,
-        command: ''
-      });
-
+    created: function () {
+      this.line = [];
       this.line.push({
         active: true,
         username: this.user,
@@ -158,82 +118,125 @@ export default {
         path: this.pwd,
         command: ''
       });
+    },
+    methods: {
+      exec(text, key) {
+        var arg = text.split(' ');
 
-      this.group.push([
-        this.line,
-        this.result
-      ]);
-console.log(this.group);
-    },
-    ls(pwd) {
-      var neopwd = pwd.replace('/', 'sl');
-      axios.get('/api/rpc/bash/ls/' + neopwd).then(res => {
-        console.log(res.data);
+        this.line[key].active = false;
+        if (arg[0] === 'sudo') this.isSudo();
+        else this.execContinue(text, key);
+      },
+      isSudo() {
         this.result.push({
           active: true,
-          text: res.data,
-          field: false,
-          password: false,
+          text: 'パスワード: ',
+          field: true,
+          password: true,
           command: ''
-        })
-      })
-    },
-    cd(pwd) {
-      if (pwd === '/fuck' || pwd === 'fuck') {
-        this.result.push({
+        });
+      },
+      execContinue(text, key) {
+        var arg = text.split(' ');
+
+        if (arg[0] === 'ls') this.ls(this.line[key].path);
+        else if (arg[0] === 'cd') this.cd(arg[1]);
+        else if (arg[0] === 'clear') this.clear();
+        else this.result.push({
           active: true,
-          text: 'bash: cd: ' + pwd + ': このファイルまたはフォルダがありません。',
+          text: arg[0] + ': コマンドは見つかれません。',
           field: false,
           password: false,
           command: ''
         });
-        return false;
-      }
-      if (!pwd.startsWith('/')) pwd = '/' + pwd;
 
-      this.pwd = pwd;
-    },
-    clear() {
-      this.line = [];
-      this.result = [];
+        this.line.push({
+          active: true,
+          username: this.user,
+          hostname: this.host,
+          path: this.pwd,
+          command: ''
+        });
+
+        this.group.push([
+          this.line,
+          this.result
+        ]);
+      },
+      ls(pwd) {
+        var neopwd = pwd.replace('/', 'sl');
+        axios.get('/api/rpc/bash/ls/' + neopwd).then(res => {
+          this.result.push({
+            active: true,
+            text: res.data,
+            field: false,
+            password: false,
+            command: ''
+          })
+        })
+      },
+      cd(pwd) {
+        if (pwd === '/fuck' || pwd === 'fuck') {
+          this.result.push({
+            active: true,
+            text: 'bash: cd: ' + pwd + ': このファイルまたはフォルダがありません。',
+            field: false,
+            password: false,
+            command: ''
+          });
+          return false;
+        }
+        if (!pwd.startsWith('/')) pwd = '/' + pwd;
+
+        this.pwd = pwd;
+      },
+      clear() {
+        this.line = [];
+        this.result = [];
+      }
     }
   }
-}
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.inputField {
-  background-color: #000000;
-  color: #73D216;
-  border-width: 0px;
-  font-family: monospace;
-  font-size: large;
-  width: 500px;
-  outline: none;
-
-}
-.regBold {
-  font-weight: bold;
-}
-.regText {
-  color: #73D216;
-}
-.pathText {
-  color: #5454FF;
-}
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+  @keyframes blink {
+    0%   { opacity: 0; }
+    50%  { opacity: 1; }
+    100% { opacity: 0; }
+  }
+  #box {
+    animation: blink 1s infinite;
+  }
+  .inputField {
+    background-color: #000000;
+    color: #73D216;
+    border-width: 0px;
+    font-family: monospace;
+    font-size: large;
+    width: 500px;
+    outline: none;
+  }
+  .regBold {
+    font-weight: bold;
+  }
+  .regText {
+    color: #73D216;
+  }
+  .pathText {
+    color: #5454FF;
+  }
+  h1, h2 {
+    font-weight: normal;
+  }
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+  a {
+    color: #42b983;
+  }
 </style>

resources/views/layouts/app.blade.php

@@ -1,40 +1,40 @@
 <!DOCTYPE html>
 <html lang="{{ app()->getLocale() }}">
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- CSRF Token -->
-    <meta name="csrf-token" content="{{ csrf_token() }}">
+  <!-- CSRF Token -->
+  <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+  <title>{{ config('app.name', 'Laravel') }}</title>
 
-    <style>
-        body{
-            background-color: #000000 !important;
-            color: #ffffff !important;
-        }
-        #app {
-            font-family: monospace;
-            font-size: large;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            text-align: left;
-            margin-top: 20px;
-            margin-left: 20px;
-        }
-    </style>
+  <style>
+    body{
+      background-color: #000000 !important;
+      color: #ffffff !important;
+    }
+    #app {
+      font-family: monospace;
+      font-size: large;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-align: left;
+      margin-top: 20px;
+      margin-left: 20px;
+    }
+  </style>
 
-    <!-- Styles -->
-    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+  <!-- Styles -->
+  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 </head>
 <body>
-    <div id="app">
-        @yield('content')
-    </div>
+  <div id="app">
+    @yield('content')
+  </div>
 
-    <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}"></script>
+  <!-- Scripts -->
+  <script src="{{ asset('js/app.js') }}"></script>
 </body>
 </html>

routes/web.php

@@ -27,7 +27,7 @@ Route::get('/api/rpc/permission/getpermissionuser/{mdl}/{id}', 'PermissionContro
 
 // Bash
 Route::get('/', function () {
-    return view('cli');
+  return view('cli');
 });
 
 require(__DIR__.'/class/bash.php');