From 873e0a81516802a1f3b76cfa64b3606cf423fe96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=86=E3=82=AF=E3=83=8B=E3=82=AB=E3=83=AB=E8=AB=8F?=
 =?UTF-8?q?=E8=A8=AA=E5=AD=90?= <david@sudomail.ne.jp>
Date: Fri, 9 Mar 2018 00:36:34 +0900
Subject: [PATCH] Started working on a bash like user interface (easter egg).

---
 app/Http/Controllers/BashController.php |  13 ++
 resources/assets/js/app.js              |   2 +
 resources/assets/js/bootstrap.js        |   4 +-
 resources/assets/js/components/cli.vue  | 207 ++++++++++++++++++++++++
 resources/assets/sass/_variables.scss   |  15 +-
 resources/views/cli.blade.php           |   5 +
 routes/class/bash.php                   |  13 ++
 routes/web.php                          |   7 +
 8 files changed, 263 insertions(+), 3 deletions(-)
 create mode 100644 app/Http/Controllers/BashController.php
 create mode 100644 resources/assets/js/components/cli.vue
 create mode 100644 resources/views/cli.blade.php
 create mode 100644 routes/class/bash.php

diff --git a/app/Http/Controllers/BashController.php b/app/Http/Controllers/BashController.php
new file mode 100644
index 0000000..e8a59df
--- /dev/null
+++ b/app/Http/Controllers/BashController.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Support\Facades\DB;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+
+class BashController extends Controller {
+    public function ls($pwd) { // /api/rpc/bash/ls/pwd
+        return 'page        forum       store       user';
+    }
+}
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index fa0581a..2acd22f 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -9,6 +9,8 @@ require('./bootstrap');
 
 window.Vue = require('vue');
 
+Vue.component('bash', require('./components/cli.vue'));
+
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js
index 9ba31d6..ee5b76a 100644
--- a/resources/assets/js/bootstrap.js
+++ b/resources/assets/js/bootstrap.js
@@ -19,9 +19,9 @@ try {
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-// window.axios = require('axios');
+window.axios = require('axios');
 
-// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 /**
  * Next we will register the CSRF Token as a common header with Axios so that
diff --git a/resources/assets/js/components/cli.vue b/resources/assets/js/components/cli.vue
new file mode 100644
index 0000000..7a4bb29
--- /dev/null
+++ b/resources/assets/js/components/cli.vue
@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <span v-for="(l, i) in line" :key="`l-${i}`">
+      <span class="regText">
+        <span class="regBold">
+          {{ l.username }}@{{ l.hostname }}:<span class="pathText">{{ l.path }}</span>
+        </span>$
+        <span v-if="l.active">
+          <input
+            :key="i"
+            spellcheck="false"
+            type="text"
+            class="inputField"
+            v-model="l.command"
+            @keyup.enter="exec(l.command, i)"
+          />
+        </span>
+        <span v-else>
+          <input
+            :key="i"
+            disabled
+            spellcheck="false"
+            type="text"
+            class="inputField"
+            v-model="l.command"
+            @keyup.enter="exec(l.command, i)"
+          />
+        </span>
+        <span v-for="(res, d) in result" :key="`res-${d}`">
+          <br />
+          {{ res.text }}
+          <span v-if="res.field">
+            <span v-if="res.password">
+              <span v-if="res.active">
+                <input
+                  :key="i"
+                  password="password"
+                  spellcheck="false"
+                  type="text"
+                  class="inputField"
+                  v-model="res.command"
+                  @keyup.enter="execContinue(res.command, i)"
+                />
+              </span>
+              <span v-else>
+                <input
+                  :key="i"
+                  password="password"
+                  disabled
+                  spellcheck="false"
+                  type="text"
+                  class="inputField"
+                  v-model="res.command"
+                  @keyup.enter="execContinue(res.command, i)"
+                />
+              </span>
+            </span>
+            <span v-else>
+              <span v-if="res.active">
+                <input
+                  :key="i"
+                  spellcheck="false"
+                  type="text"
+                  class="inputField"
+                  v-model="res.command"
+                  @keyup.enter="execContinue(res.command, i)"
+                />
+              </span>
+              <span v-else>
+                <input
+                  :key="i"
+                  disabled
+                  spellcheck="false"
+                  type="text"
+                  class="inputField"
+                  v-model="res.command"
+                  @keyup.enter="execContinue(res.command, i)"
+                />
+              </span>
+            </span>
+          </span>
+        <br />
+        </span>
+      </span>
+    </span>
+  </div>
+</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: []
+    }
+  },
+  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);
+    },
+    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 this.result.push({
+        active: true,
+        text: arg[0] + ': コマンドは見つかれません。',
+        field: false,
+        password: false,
+        command: ''
+      })
+
+      this.line.push({
+        active: true,
+        username: this.user,
+        hostname: this.host,
+        path: this.pwd,
+        command: ''
+      });
+    },
+    ls(pwd) {
+      var neopwd = pwd.replace('/', 'sl');
+      axios.get('/api/rpc/bash/ls/' + neopwd).then(res => {
+        console.log(res.data);
+        this.result.push({
+          active: true,
+          text: res.data,
+          field: false,
+          password: false,
+          command: ''
+        })
+      })
+    }
+  }
+}
+</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;
+}
+</style>
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index 8f5a022..a83777b 100644
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -1,7 +1,7 @@
 
 // Body
 //$body-bg: #f5f8fa;
-$body-bg: #454545;
+$body-bg: #000;
 
 // Borders
 $laravel-border-color: darken($body-bg, 10%);
@@ -38,3 +38,16 @@ $input-color-placeholder: lighten($text-color, 30%);
 // Panels
 $panel-default-heading-bg: #ababab;
 
+body{
+  background-color: #000000;
+  color: #ffffff;
+}
+#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;
+}
diff --git a/resources/views/cli.blade.php b/resources/views/cli.blade.php
new file mode 100644
index 0000000..78a3259
--- /dev/null
+++ b/resources/views/cli.blade.php
@@ -0,0 +1,5 @@
+@extends('layouts.app')
+
+@section('content')
+<bash />
+@endsection
diff --git a/routes/class/bash.php b/routes/class/bash.php
new file mode 100644
index 0000000..6e22ec7
--- /dev/null
+++ b/routes/class/bash.php
@@ -0,0 +1,13 @@
+<?php
+
+/*
+|--------------------------------------------------------------------------
+| User class
+|--------------------------------------------------------------------------
+|
+| These are the API routes corresponding to user.
+|
+*/
+
+// Commands
+Route::get('/api/rpc/bash/ls/{pwd}', 'BashController@ls');
diff --git a/routes/web.php b/routes/web.php
index 19b739f..92e1875 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -25,3 +25,10 @@ Route::get('/api/rpc/permission/getpermissionfrommodule/{id}', 'PermissionContro
 Route::get('/api/rpc/permission/getpermissions/{mdl}', 'PermissionController@getPermissions');
 Route::get('/api/rpc/permission/getpermissiongroup/{mdl}/{id}', 'PermissionController@getPermissionGroup');
 Route::get('/api/rpc/permission/getpermissionuser/{mdl}/{id}', 'PermissionController@getPermissionUser');
+
+// Bash
+Route::get('/', function () {
+    return view('cli');
+});
+
+require(__DIR__.'/class/bash.php');
\ No newline at end of file