mostly docs

frontend/src/views/Agent.vue

@@ -27,9 +27,6 @@
       <span v-if="editing">
         <div class="form-group">
           <label for="token"><strong>Token</strong></label>
-          <small style="margin-left: 10px">
-            Use this token in the configuration file of the agent.
-          </small>
           <input
               v-model="agent.token"
               type="text"
@@ -44,6 +41,34 @@
           >{{ errors.first('token') }}
           </div>
         </div>
+
+        <div class="form-group">
+          <label for="token"><strong>agent.yaml</strong></label>
+          <small style="margin-left: 10px">
+            Use this as the agent configuration file.
+          </small>
+          <pre class="config-file form-control">
+# where to store the lists
+data: '/var/lib/shieldwall/'
+# path to iptables
+iptables: '/sbin/iptables'
+# api server to use
+server: 'https://shieldwall.me'
+# authentication token
+token: '{{ agent.token }}'
+# api polling period in seconds
+period: 10
+# api timeout in seconds or 0 for no timeout
+timeout: 120
+# list of ip addresses to always allow just in case
+allow:
+  - '127.0.0.1'</pre>
+          <div
+              v-if="submitted && errors.has('token')"
+              class="alert-danger"
+          >{{ errors.first('token') }}
+          </div>
+        </div>
       </span>
 
       <div class="form-group">
@@ -248,8 +273,13 @@ export default {
 <style scoped>
 .agent-container {
   padding: 20px 25px 30px;
-  margin: 0 auto 25px;
-  margin-top: 25px;
+  margin: 25px auto;
 }
 
+.config-file {
+  font-family: monospace;
+  height: fit-content;
+  background-color: #212529;
+  color: white;
+}
 </style>

frontend/src/views/Docs.vue

@@ -1,6 +1,42 @@
 <template>
   <div class="docs-container container-fluid">
-    TODO :D
+    <h3>Agent Installation</h3>
+
+    <p>For the time being compiling the agent from sources is the only option, soon statically precompiled binaries will
+    be available, hang tight.</p>
+
+    <p>The following steps require the go compiler and make:</p>
+
+    <pre class="command">go get github.com/evilsocket/shieldwall
+cd $GOPATH/src/github.com/evilsocket/shieldwall
+make agent
+sudo make install_agent</pre>
+
+    <p>Now edit the file <strong>/etc/shieldwall/config.yaml</strong> and set the agent token. You can find the token
+      by clicking on the agent name in the <a href="/#/agents">agents page</a> once you registered and logged in.
+      <br/>
+      <br/>
+      The final step is restarting the service:</p>
+
+    <pre class="command">sudo service shieldwall-agent restart</pre>
+
+    <p>The agent will start polling the API and enabling the addresses and ports that you'll configure on this website. You can check the logs in /var/log//var/log/shieldwall.log</p>
+
+    <br/>
+
+    <h3>Hosting your own API</h3>
+
+    <p>Please refer to the <a href="https://github.com/evilsocket/shieldwall/blob/main/README.md" target="_blank">
+      README</a>.</p>
+
+    <br/>
+
+    <h3>Help</h3>
+
+    <p>Found a bug? The documentation could be better? You have an idea for a new feature? Good news, this project is
+      open source! You are more than welcome to <a href="https://github.com/evilsocket/shieldwall" target="_blank">fork the
+        repository</a> and
+    contribute with <a target="_blank" href="https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request">a pull request</a>.</p>
   </div>
 </template>
 
@@ -17,7 +53,13 @@ export default {
 <style scoped>
 .docs-container {
   padding: 20px 25px 30px;
-  margin: 0 auto 25px;
-  margin-top: 25px;
+  margin: 25px auto;
+}
+
+.command {
+  padding: 5px;
+  height: fit-content;
+  background-color: #212529;
+  color: white;
 }
 </style>

frontend/src/views/Home.vue

@@ -5,6 +5,7 @@
         <h1 class="display-4">
           <img src="/logo.png" width="50px"/>
           shieldwall
+          <small class="beta">beta</small>
         </h1>
         <br/>
 
@@ -80,6 +81,11 @@ export default {
   margin-top: 25px;
 }
 
+.beta {
+  font-size: 15px;
+  margin-left: -10px;
+}
+
 .btn {
   margin-top: 5px;
 }

frontend/src/views/Register.vue

@@ -48,6 +48,7 @@
               <button class="btn btn-primary btn-block">Sign Up</button>
             </vue-recaptcha>
           </div>
+
         </div>
       </form>