├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── documentation └── historyLogic.ods ├── media ├── DomDiagram.png ├── historyLogicScreenshot.png ├── logo.png └── screenshot.png └── public ├── image └── favicon.png ├── index.html ├── src ├── commands.js ├── config.js.dist └── shelly.js └── style └── shelly.css /.gitignore: -------------------------------------------------------------------------------- 1 | public/src/config.js -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [0.3.0-beta] - 2024-09-20 9 | 10 | ### Added 11 | 12 | - Out of alpha, shelly now strictly follows Semantic Versioning; 13 | - Comprehensive DOM Diagram (see the [media](media) folder); 14 | - A spreadsheet detailing concepts involved in developing the history feature and a few tests done with the concept (see the [documentation](documentation) folder). 15 | - A way to initialize shelly programmatically (#3); 16 | - Since shelly is now instantiable, multiple shellys can coexist (do I hear "tiling"?); 17 | - Each shelly instance gets an id, which is also used as it's element `id` attribute; 18 | - shelly now stores history and, if available, persists it to local storage (#5); 19 | - shelly now has client-side commands (#6); 20 | - The history object to config; 21 | - Shelly has a static method for generating random strings to be used as the instance's id and/or cache-breaking query strings. 22 | 23 | ### Changed 24 | 25 | - shelly is now OOP; 26 | - All code uses camelCase/SmartCase; 27 | - `API.url_separator` config option is now `API.urlSeparator`; 28 | - `API.proto_separator` config option is now `API.protoSeparator`; 29 | - The configuration object is now named `shellyConfig` and commands are now named `shellyCommands` in order to avoid naming conflicts; 30 | - Configuaration is now passed as `JSON.stringify` so shelly can try parsing it and emitting an exception in case of failure; 31 | - MOTD is now centralized. 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shelly 2 | 3 | ![Logo](media/logo.png) 4 | 5 | A shell-like interface for the web written entirely in HTML, CSS and JavaScript (ES6). 6 | 7 | - [shelly](#shelly) 8 | - [Installation](#installation) 9 | - [Usage](#usage) 10 | - [shelly's expected flow (simplified):](#shellys-expected-flow-simplified) 11 | - [CSRF](#csrf) 12 | - [Server](#server) 13 | - [Acknowledgements](#acknowledgements) 14 | - [Credits](#credits) 15 | 16 | ## Installation 17 | 18 | ![Logo](media/screenshot.png) 19 | 20 | 1. Get shelly from the releases page or clone this repository; 21 | 2. Edit [public/src/config.js.dist](public/src/config.js.dist), set the right configuration values and edit the MOTD message (see the [wiki](https://github.com/galvao-eti/shelly/wiki) for more information); 22 | 3. Save [public/src/config.js.dist](public/src/config.js.dist) as `public/src/config.js`; 23 | 5. Add the CSS file to your HTML document: 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | ## Usage 30 | 31 | Either instantiate shelly as "lazyInit" or instantiate and then initialize it. 32 | 33 | The following is the **recommended** way of using shelly: 34 | 35 | ```html 36 | 68 | ``` 69 | 70 | shelly will then append it's elements to your HTML document's `body`. 71 | 72 | Shelly transmits user input via a HTTP header called `SHELLY-INPUT`. 73 | 74 | Populate shelly's `shellyCsrfToken` `meta` tag according to your anti-CSRF implementation (see [CSRF](#csrf) below); 75 | 76 | ### shelly's expected flow (simplified): 77 | 78 | ```mermaid 79 | flowchart LR 80 | shelly --> reqid[/request/] 81 | reqid --> API 82 | API--> resid[/response/] 83 | resid --> shelly 84 | ``` 85 | 86 | shelly can work with any HTTP backend, running on the same machine or via CORS. 87 | 88 | If you provide a function named `processResponse`, shelly will automatically pass the response object to it. It will, otherwise: 89 | 90 | * Work with the main content of the response object as a `response` attribute, e.g. `data.response`; 91 | * Insert that response as HTML if the `Content-Type` response header includes `text/html`; 92 | * Insert that response as text otherwise. 93 | 94 | ## CSRF 95 | 96 | It should go without saying that **no one should use shelly without, at least, CSRF protection**. 97 | 98 | If you need more information about CSRF there's no better place than [OWASP](https://owasp.org/www-community/attacks/csrf), of course. 99 | 100 | Shelly expects to work with a CSRF token provided by the server. 101 | 102 | It's beyond of the scope of shelly to tell you how to generate and deal with the CSRF token, since there are many methods to do this. 103 | 104 | The token should be stored in a request header called, you've guessed it, `SHELLY-CSRF-TOKEN`. That header expects it's value to be read in an `content` attribute of a `meta` tag named `shellyCsrfToken`: 105 | 106 | ```javascript 107 | document.head.querySelector('meta[name=shellyCsrfToken]').content; 108 | ``` 109 | 110 | ## Server 111 | 112 | a.k.a "shelly-api" 113 | 114 | The server should implement: 115 | 116 | * CSRF prevention; 117 | * Validation; 118 | * A parser to break the input betwwen command, sub-command, flags, arguments, etc... 119 | * The processing and response of each command. 120 | 121 | I'll soon publish an example implementation and will then link it here. 122 | 123 | ## Acknowledgements 124 | 125 | * shelly is a passion project and I dedicate it to my dear friend and master of shell [Julio Cezar Neves](https://pt.wikipedia.org/wiki/Julio_Cezar_Neves); 126 | * shelly's logo uses [Hack Nerd Font Mono](https://github.com/ryanoasis/nerd-fonts); 127 | * Every piece of diagram, drawing, logo, etc... was made in [inkscape](https://inkscape.org/); 128 | * The project's main resource for documentation is, of course, [Mozilla Developer Network](https://developer.mozilla.org/en-US/). 129 | 130 | ## Credits 131 | 132 | Created and maintained by [Er Galvão Abbott](https://github.com/galvao); 133 | 134 | Licensed under the Apcahe License by [Galvão Desenvolvimento Ltda](https://galvao.eti.br/) - see the [License file](/LICENSE). -------------------------------------------------------------------------------- /documentation/historyLogic.ods: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galvao-eti/shelly/702e1ab8f71e96f7af8e303b54fc34b539a67675/documentation/historyLogic.ods -------------------------------------------------------------------------------- /media/DomDiagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galvao-eti/shelly/702e1ab8f71e96f7af8e303b54fc34b539a67675/media/DomDiagram.png -------------------------------------------------------------------------------- /media/historyLogicScreenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galvao-eti/shelly/702e1ab8f71e96f7af8e303b54fc34b539a67675/media/historyLogicScreenshot.png -------------------------------------------------------------------------------- /media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galvao-eti/shelly/702e1ab8f71e96f7af8e303b54fc34b539a67675/media/logo.png -------------------------------------------------------------------------------- /media/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galvao-eti/shelly/702e1ab8f71e96f7af8e303b54fc34b539a67675/media/screenshot.png -------------------------------------------------------------------------------- /public/image/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galvao-eti/shelly/702e1ab8f71e96f7af8e303b54fc34b539a67675/public/image/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | shelly v0.3.0-beta 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 53 | 54 | -------------------------------------------------------------------------------- /public/src/commands.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var shellyCommands = shellyCommands || (function (shelly) { 4 | const commands = { 5 | clear: function () { 6 | while (shelly.rootElement.firstChild) { 7 | shelly.rootElement.removeChild(shelly.rootElement.firstChild); 8 | } 9 | 10 | return ""; 11 | }, 12 | exit: function () { 13 | shelly.currentLine.setAttribute('disabled', true); 14 | return ""; 15 | }, 16 | whoami: function () { 17 | return shelly.config.user.name; 18 | } 19 | }; 20 | 21 | return commands; 22 | }); -------------------------------------------------------------------------------- /public/src/config.js.dist: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | /** 4 | * shelly - A pure and vanilla shell-like interface for the web. 5 | * 6 | * @author Er Galvão Abbott 7 | * @version 0.3.0-beta 8 | * @link https://github.com/galvao-eti/shelly 9 | */ 10 | 11 | var shellyConfig = shellyConfig || (function () { 12 | let message = " %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \n"; 13 | message += " %%%%%%%%% %%%%%%% %%%%%%%%%%%%%%%%%%%%%%%% %%%%%%% %%%%%%%%%%%%%%%%%%%%%%%% \n"; 14 | message += " %%%%%%% %%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%% \n"; 15 | message += " %%%%% %% % %%%% % %%%%%%%% %%%%%%%%% %%%%%%%%%%% %%%%%%% %%%%%% %%%%% \n"; 16 | message += " %%%%% % %%%%%%% %%%% %%%%%%% %%%%%%%%%%% %%%%%%% %%%% %%%%% \n"; 17 | message += " %%%%% %%%%%% %%%% %%% %%%%% %%%%%% %%%%%%%%%%% %%%%%%%% %%% %%%%%% \n"; 18 | message += " %%%%%%% %%% %%%%% %%% %%%%%% %%%%%%%%%%% %%%%%%%%% % %%%%%%% \n"; 19 | message += " %%%%%%%%% %% %%% %%%%% %%% %%%%%%%%%%%%%% %%%%%%%%%%% %%%%%%%%%% %%%%%%% \n"; 20 | message += " %%%%% %% % %%% %%%%% %%%% %%%%% %%%%%% %%%%%%%%%%% %%%%%%%%% %%%%%%%% \n"; 21 | message += " %%%%% %%%% %%%%% %%%%% %%%%%%% %%%%%%%% %%%%%% %%%%%%%%% \n"; 22 | message += " %%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%% \n"; 23 | message += " %%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%% \n"; 24 | message += " %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%% \n"; 25 | message += " %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \n"; 26 | message += " %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% v0.3.0-beta %%%%% \n"; 27 | 28 | let config = { 29 | "debug": false, 30 | "MOTD": message, 31 | "user": { 32 | "name": "guest", 33 | "qualifier": "$" 34 | }, 35 | "API": { 36 | "method": "POST", 37 | "proto": "https", 38 | "protoSeparator": "://", 39 | "address": "", 40 | "port": null, 41 | "urlSeparator": "/", 42 | "endpoint": "", 43 | "CORS": true 44 | }, 45 | "history": { 46 | "maxLength": 50, 47 | "useLocalStorage": true, 48 | "storeDuplicates": false 49 | } 50 | }; 51 | 52 | return JSON.stringify(config); 53 | }()); -------------------------------------------------------------------------------- /public/src/shelly.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | /** 4 | * shelly - A pure and vanilla shell-like interface for the web. 5 | * 6 | * @author Er Galvão Abbott 7 | * @version 0.3.0-beta 8 | * @link https://github.com/galvao-eti/shelly 9 | */ 10 | 11 | class Shelly 12 | { 13 | clientCommands = shellyCommands(this); 14 | config = ""; 15 | 16 | id = ""; 17 | rootElement = {}; 18 | currentLine = {}; 19 | 20 | history = []; 21 | historyCount = 0; 22 | cursor = -1; 23 | 24 | responseType = 'application/json'; 25 | 26 | constructor(config, lazyInit = true) 27 | { 28 | try { 29 | this.config = JSON.parse(config); 30 | } catch (e) { 31 | throw(e); 32 | } 33 | 34 | this.id = Shelly.generateRandomString(); 35 | this.rootElement = document.createElement('div'); 36 | this.rootElement.id = this.id; 37 | 38 | if (this.config.useLocalStorage === true) { 39 | this.history = localStorage.getItem('shelly').split(''); 40 | } 41 | 42 | if (lazyInit) { 43 | this.init(); 44 | } 45 | } 46 | 47 | init() 48 | { 49 | this.showMotd(); 50 | this.newLine(); 51 | document.body.appendChild(this.rootElement); 52 | } 53 | 54 | showMotd() 55 | { 56 | let element = document.createElement('pre'); 57 | 58 | if (this.config.MOTD.length > 0) { 59 | element.insertAdjacentHTML('afterBegin', this.config.MOTD); 60 | element.setAttribute('class', 'motd'); 61 | 62 | this.rootElement.appendChild(element); 63 | } 64 | 65 | return; 66 | } 67 | 68 | newLine() 69 | { 70 | let id = null; 71 | id = '#' + this.id; 72 | let lineElement = document.createElement('span'); 73 | lineElement.setAttribute('class', 'line'); 74 | 75 | let observer = new MutationObserver(function (lines, observer) { 76 | let children = lines[lines.length - 1].addedNodes; 77 | children.item(0).focus(); 78 | 79 | observer.disconnect(); 80 | }); 81 | 82 | observer.observe(lineElement, {childList: true, subTree: true}); 83 | 84 | let promptElement = document.createElement('span'); 85 | 86 | promptElement.setAttribute('class', 'prompt'); 87 | promptElement.insertAdjacentText( 88 | 'afterBegin', 89 | this.config.user.name + '@' + this.config.API.address + this.config.user.qualifier + '> ' 90 | ); 91 | 92 | let readLineElement = document.createElement('input'); 93 | readLineElement.setAttribute('class', 'readline'); 94 | 95 | let responseElement = document.createElement('div'); 96 | responseElement.setAttribute('class', 'response'); 97 | 98 | lineElement.appendChild(promptElement); 99 | lineElement.appendChild(readLineElement); 100 | 101 | this.rootElement.append(lineElement); 102 | this.rootElement.appendChild(responseElement); 103 | 104 | let lines = this.rootElement.querySelectorAll('.readline'); 105 | this.currentLine = lines.item((lines.length === 0 ? 0 : lines.length - 1)); 106 | 107 | this.currentLine.addEventListener('keydown', async (e) => { 108 | if (e.code === 'ArrowUp') { 109 | e.target.value = this.scrollHistoryUp(); 110 | } else if (e.code === 'ArrowDown') { 111 | e.target.value = this.scrollHistoryDown(); 112 | } else if (e.code === 'Enter') { 113 | let input = e.target.value; 114 | 115 | this.addHistory(input); 116 | 117 | let data = await this.process(e.target); 118 | let dataElement = document.createElement('pre'); 119 | 120 | if (this.config.debug === true) { 121 | console.table(data); 122 | } 123 | 124 | if (typeof processResponse === 'function') { 125 | let processResult = processResponse(data); 126 | 127 | if (processResult instanceof HTMLElement) { 128 | dataElement = processResult; 129 | } 130 | } else { 131 | if (this.responseType.includes('text/html')) { 132 | dataElement = document.createElement('div'); 133 | dataElement.insertAdjacentHTML('afterBegin', data.response); 134 | } else { 135 | dataElement.insertAdjacentText('afterBegin', data.response); 136 | } 137 | 138 | dataElement.setAttribute('class', 'data'); 139 | lineElement.appendChild(dataElement); 140 | } 141 | 142 | if (e.target.value !== 'exit') { 143 | this.newLine(); 144 | } 145 | } 146 | }); 147 | 148 | return; 149 | } 150 | 151 | async process(element) 152 | { 153 | let data = {}; 154 | 155 | let input = element.value.trim(); 156 | element.setAttribute('disabled', true); 157 | 158 | let command = input.trim().split(' ').shift(); 159 | 160 | if (typeof this.clientCommands === 'object' && typeof this.clientCommands[command] === 'function') { 161 | data.response = this.clientCommands[command](); 162 | 163 | this.responseType = 'application/json'; 164 | 165 | return data; 166 | } 167 | 168 | if (input === '') { 169 | return input; 170 | } 171 | 172 | let url = this.config.API.proto + this.config.API.protoSeparator + this.config.API.address; 173 | url += (this.config.API.port !== null ? ':' + this.config.API.port : '') + this.config.API.urlSeparator + this.config.API.endpoint; 174 | 175 | let request = new Request(url, { 176 | method: this.config.API.method, 177 | mode: (this.config.API.CORS === true ? "cors" : "same-origin"), 178 | headers: { 179 | "SHELLY-INPUT": input, 180 | "SHELLY-CSRF-TOKEN": document.head.querySelector('meta[name=shellyCsrfToken]').content 181 | } 182 | }); 183 | 184 | const response = await fetch(request); 185 | this.responseType = response.headers.get("content-type"); 186 | 187 | if (this.responseType.includes('application/json')) { 188 | data = await response.json(); 189 | } else { 190 | data = await response.text(); 191 | } 192 | 193 | if (!response.ok) { 194 | data = 'Error processing the request.'; 195 | } 196 | 197 | return data; 198 | } 199 | 200 | addHistory(input) 201 | { 202 | if (!this.config.storeDuplicates && this.history[this.cursor] === input) { 203 | return; 204 | } 205 | 206 | this.history.push(input); 207 | 208 | if (this.history.length > this.config.history.maxLength) { 209 | this.history.shift(); 210 | } 211 | 212 | if (this.config.history.useLocalStorage) { 213 | try { 214 | localStorage.setItem('shellyHistory', this.history.join('')); 215 | } catch (e) { 216 | } 217 | } 218 | 219 | this.historyCount = this.history.length; 220 | this.cursor = this.historyCount - 1; 221 | } 222 | 223 | scrollHistoryUp() 224 | { 225 | if (this.cursor <= 0) { 226 | return (this.history[0] === undefined) ? "" : this.history[this.cursor]; 227 | } 228 | 229 | let result = this.history[this.cursor]; 230 | 231 | this.cursor--; 232 | 233 | if (this.cursor < 0) { 234 | this.cursor = this.historyCount - 1; 235 | } 236 | 237 | return result; 238 | } 239 | 240 | scrollHistoryDown() 241 | { 242 | if (this.cursor === (this.historyCount- 1)) { 243 | return ""; 244 | } 245 | 246 | this.cursor++; 247 | 248 | return this.history[this.cursor]; 249 | } 250 | 251 | static generateRandomString(method = 'random', length = 8) 252 | { 253 | if (method === 'date') { 254 | return Date.now(); 255 | } 256 | 257 | let result = ''; 258 | 259 | let characters = Array.prototype.concat ( 260 | Array(25).fill().map((element, index) => String.fromCharCode('A'.charCodeAt(0) + index)), 261 | Array(25).fill().map((element, index) => String.fromCharCode('a'.charCodeAt(0) + index)) 262 | ); 263 | 264 | let charCount = characters.length; 265 | 266 | for (let c = 0; c < length; c++) { 267 | let rnd = Math.floor(Math.random() * charCount); 268 | 269 | result += characters[rnd]; 270 | } 271 | 272 | return result; 273 | } 274 | } -------------------------------------------------------------------------------- /public/style/shelly.css: -------------------------------------------------------------------------------- 1 | /** 2 | * shelly - A pure and vanilla shell-like interface for the web. 3 | * 4 | * @author Er Galvão Abbott 5 | * @version 0.3.0-beta 6 | * @link https://github.com/galvao-eti/shelly 7 | */ 8 | 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | font-family: monospace; 13 | background-color: rgb(32, 32, 32); 14 | } 15 | 16 | a { 17 | text-decoration: none; 18 | } 19 | 20 | img { 21 | width: 1.5vw; 22 | margin-left: 2px; 23 | margin-right: 2px; 24 | } 25 | 26 | .linkascii { 27 | text-align: center; 28 | font-size: 0.1vw; 29 | color: rgb(0, 255, 0); 30 | } 31 | 32 | .motd { 33 | text-align: center; 34 | font-size: 0.75vw; 35 | color: rgb(0, 255, 0); 36 | } 37 | 38 | .prompt, .readline, .data { 39 | font-size: 1vw; 40 | color: rgb(0, 255, 0); 41 | cursor: text; 42 | } 43 | 44 | .readline { 45 | border: 0; 46 | width: 80vw; 47 | background-color: rgb(32, 32, 32); 48 | } 49 | 50 | .readline:focus { 51 | outline: none; 52 | } 53 | 54 | input[disabled] { 55 | outline: none; 56 | } --------------------------------------------------------------------------------