clean action scripts

README.md

@@ -4,6 +4,7 @@
 ![Docker build status](https://img.shields.io/docker/cloud/build/bbaerthlein/docker-ddns-server)
 ![Docker build automated](https://img.shields.io/docker/cloud/automated/bbaerthlein/docker-ddns-server)
 
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/benjaminbear/docker-ddns-server)
 ![Go version](https://img.shields.io/github/go-mod/go-version/benjaminbear/docker-ddns-server?filename=dyndns%2Fgo.mod)
 ![License](https://img.shields.io/github/license/benjaminbear/docker-ddns-server)
 

dyndns/static/js/actions.js

@@ -1,28 +1,48 @@
-function deleteHost(id) {
+$("button.addHost").click(function () {
+    location.href='/hosts/add';
+});
+
+$("button.editHost").click(function () {
+    location.href='/hosts/edit/' + $(this).attr('id');
+});
+
+$("button.deleteHost").click(function () {
     $.ajax({
         contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
         type: 'GET',
-        url: "/hosts/delete/" + id
+        url: "/hosts/delete/" + $(this).attr('id')
     }).done(function(data, textStatus, jqXHR) {
         location.href="/hosts";
     }).fail(function(jqXHR, textStatus, errorThrown) {
         alert("Error: " + $.parseJSON(jqXHR.responseText).message);
         location.reload()
     });
+});
+
+$("button.showHostLog").click(function () {
+    location.href='/logs/host/' + $(this).attr('id');
+});
+
+$("button.add, button.edit").click(function () {
+    let id = $(this).attr('id');
+    if (id !== "") {
+        id = "/"+id
     }
 
-function addEditHost(id, addedit) {
+    let action;
-    if (id == null) {
+    if ($(this).hasClass("add")) {
-        id = ""
+        action = "add";
-    } else {
+    }
-        id = "/"+id
+
+    if ($(this).hasClass("edit")) {
+        action = "edit";
     }
 
     $.ajax({
         contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
-        data: $('#edithostform').serialize(),
+        data: $('#editHostForm').serialize(),
         type: 'POST',
-        url: '/hosts/'+addedit+id,
+        url: '/hosts/'+action+id,
     }).done(function(data, textStatus, jqXHR) {
         location.href="/hosts";
     }).fail(function(jqXHR, textStatus, errorThrown) {
@@ -30,7 +50,7 @@ function addEditHost(id, addedit) {
     });
 
     return false;
-}
+});
 
 function logOut(){
         try {
@@ -58,26 +78,37 @@ function logOut(){
 }
 
 function randomHash() {
-    var chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOP1234567890";
+    let chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOP1234567890";
-    var pass = "";
+    let pass = "";
-    for (var x = 0; x < 32; x++) {
+    for (let x = 0; x < 32; x++) {
-        var i = Math.floor(Math.random() * chars.length);
+        let i = Math.floor(Math.random() * chars.length);
         pass += chars.charAt(i);
     }
     return pass;
 }
 
-function generateUsername() {
+$("button.copyToClipboard").click(function () {
-    edithostform.username.value = randomHash();
+    let id;
+    if ($(this).hasClass('username')) {
+        id = "username";
+    } else if ($(this).hasClass('password')) {
+        id = "password";
     }
 
-function generatePassword() {
+    let copyText = document.getElementById(id);
-    edithostform.password.value = randomHash();
-}
-
-function copyToClipboard(inputId) {
-    var copyText = document.getElementById(inputId);
     copyText.select();
     copyText.setSelectionRange(0, 99999);
     document.execCommand("copy");
+});
+
+$("button.generateHash").click(function () {
+    let id;
+    if ($(this).hasClass('username')) {
+        id = "username";
+    } else if ($(this).hasClass('password')) {
+        id = "password";
     }
+
+    let input = document.getElementById(id);
+    input.value = randomHash();
+});

dyndns/views/edithost.html

@@ -1,7 +1,7 @@
 {{define "content"}}
     <div class="p-4" style="background-color: #e9ecef">
         <h3 class="text-center mb-4">{{if eq .addEdit "edit" }}Edit{{else if eq .addEdit "add" }}Add{{end}} Host Entry</h3>
-            <form id="edithostform" action="javascript:void(0);">
+            <form id="editHostForm" action="javascript:void(0);">
             <div class="row mt-3">
                 <div class="col-1"></div>
                 <div class="col-2 text-right">Hostname:</div>
@@ -37,11 +37,11 @@
                 <div class="col-2 text-right">Username:</div>
                 <div class="col-8 input-group">
                     <div class="input-group-prepend">
-                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('username')"><img src="/static/icons/clipboard.svg" style="vertical-align: baseline" alt="" width="16" height="16" title="Copy"></button>
+                        <button class="username copyToClipboard btn btn-outline-secondary" type="button"><img src="/static/icons/clipboard.svg" style="vertical-align: baseline" alt="" width="16" height="16" title="Copy"></button>
                     </div>
-                    <input type="text" class="form-control" placeholder="Enter username" name="username" id="username" value="{{.host.UserName}}">
+                    <input type="text" class="username form-control" placeholder="Enter username" name="username" id="username" value="{{.host.UserName}}">
                     <div class="input-group-append">
-                        <button class="btn btn-outline-secondary" type="button" onclick="generateUsername()">Generate</button>
+                        <button class="username generateHash btn btn-outline-secondary" type="button">Generate</button>
                     </div>
                 </div>
                 <div class="col-1"></div>
@@ -51,17 +51,17 @@
                 <div class="col-2 text-right">Password:</div>
                 <div class="col-8 input-group">
                     <div class="input-group-prepend">
-                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('password')"><img src="/static/icons/clipboard.svg" style="vertical-align: baseline" alt="" width="16" height="16" title="Copy"></button>
+                        <button class="password copyToClipboard btn btn-outline-secondary" type="button"><img src="/static/icons/clipboard.svg" style="vertical-align: baseline" alt="" width="16" height="16" title="Copy"></button>
                     </div>
-                    <input type="text" class="form-control" placeholder="Enter password" name="password" id="password" value="{{.host.Password}}">
+                    <input type="text" class="password form-control" placeholder="Enter password" name="password" id="password" value="{{.host.Password}}">
                     <div class="input-group-append">
-                        <button class="btn btn-outline-secondary" type="button" onclick="generatePassword()">Generate</button>
+                        <button class="password generateHash btn btn-outline-secondary" type="button">Generate</button>
                     </div>
                 </div>
                 <div class="col-1"></div>
             </div>
             <div class="row mt-3">
-                <div class="col-11 d-flex justify-content-end"><button class="btn btn-primary" onclick="addEditHost({{.host.ID}}, {{.addEdit}})">{{if eq .addEdit "edit" }}Edit{{else if eq .addEdit "add" }}Add{{end}} Host Entry</button></div>
+                <div class="col-11 d-flex justify-content-end"><button id="{{.host.ID}}" class="{{.addEdit}} btn btn-primary">{{if eq .addEdit "edit" }}Edit{{else if eq .addEdit "add" }}Add{{end}} Host Entry</button></div>
                 <div class="col-1"></div>
             </div>
         </form>

dyndns/views/layouts/master.html

@@ -53,6 +53,6 @@
 <script src="/static/js/ie10-viewport-bug-workaround.js"></script>
 <script src="/static/js/jquery-3.4.1.min.js"></script>
 <script src="/static/js/bootstrap.min.js"></script>
-<script src="/static/js/additional.js"></script>
+<script src="/static/js/actions.js"></script>
 </body>
 </html>

dyndns/views/listhosts.html

@@ -8,7 +8,7 @@
                 <th>IP</th>
                 <th>TTL</th>
                 <th>LastUpdate</th>
-                <th><button class="btn btn-primary" onclick="location.href='/hosts/add'">Add Host Entry</button></th>
+                <th><button class="addHost btn btn-primary">Add Host Entry</button></th>
             </tr>
             </thead>
             <tbody>
@@ -18,7 +18,7 @@
                     <td>{{.Ip}}</td>
                     <td>{{.Ttl}}</td>
                     <td>{{.LastUpdate.Format "01/02/2006 15:04 MEZ"}}</td>
-                    <td><button onclick="location.href='/hosts/edit/{{.ID}}'" class="btn btn-outline-secondary btn-sm"><img src="/static/icons/pencil.svg" alt="" width="16" height="16" title="Edit"></button>&nbsp;<button class="btn btn-outline-secondary btn-sm" onclick="deleteHost('{{.ID}}')"><img src="/static/icons/trash.svg" alt="" width="16" height="16" title="Delete"></button> <button class="btn btn-outline-secondary btn-sm" onclick="location.href='/logs/host/{{.ID}}'"><img src="/static/icons/table.svg" alt="" width="16" height="16" title="Logs"></button></td>
+                    <td><button id="{{.ID}}" class="editHost btn btn-outline-secondary btn-sm"><img src="/static/icons/pencil.svg" alt="" width="16" height="16" title="Edit"></button>&nbsp;<button id="{{.ID}}" class="deleteHost btn btn-outline-secondary btn-sm"><img src="/static/icons/trash.svg" alt="" width="16" height="16" title="Delete"></button> <button id="{{.ID}}" class="showHostLog btn btn-outline-secondary btn-sm"><img src="/static/icons/table.svg" alt="" width="16" height="16" title="Logs"></button></td>
                 </tr>
             {{end}}
             </tbody>