Started working on a bash like user interface (easter egg).
このコミットが含まれているのは:
テクニカル諏訪子
コミット
873e0a8151
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<bash />
|
||||
@endsection
|
||||
|
|
@ -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');
|
||||
|
|
@ -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');
|
||||
新しいイシューから参照