Merge pull request #19 from mattkasun/develop

V0.2

Dockerfile.dev

@@ -0,0 +1,7 @@
+FROM golang:1.16-alpine
+WORKDIR /
+COPY *.go go.* ./
+RUN GOOS=linux go build -v .
+ADD /images/* images/
+ADD /html/* html/
+CMD ["./netmaker-gui"]

go.mod

@@ -5,12 +5,7 @@ go 1.16
 require (
 	github.com/gin-contrib/sessions v0.0.3
 	github.com/gin-gonic/gin v1.7.4
-	github.com/go-playground/validator/v10 v10.9.0 // indirect
-	github.com/gravitl/netmaker v0.7.3
-	github.com/rqlite/gorqlite v0.0.0-20210804113434-b4935d2eab04 // indirect
+	github.com/gravitl/netmaker v0.8.0
 	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e
 	github.com/stretchr/testify v1.7.0
-	golang.org/x/crypto v0.0.0-20210817164053-32db794688a5 // indirect
-	golang.org/x/sys v0.0.0-20210823070655-63515b42dcdf // indirect
-	golang.org/x/text v0.3.7 // indirect
 )

handlers.go

@@ -33,7 +33,7 @@ func ProcessLogin(c *gin.Context) {
 		session.Set("loggedIn", true)
 		//init message
 		session.Set("message", "")
-		session.Options(sessions.Options{MaxAge: 1800})
+		session.Options(sessions.Options{MaxAge: 28800})
 		user, err := controller.GetUser(AuthRequest.UserName)
 		if err != nil {
 			fmt.Println("err retrieving user: ", err)
@@ -48,7 +48,7 @@ func ProcessLogin(c *gin.Context) {
 }
 
 func NewUser(c *gin.Context) {
-	var user, admin models.User
+	var user models.User
 	user.UserName = c.PostForm("user")
 	user.Password = c.PostForm("pass")
 	user.IsAdmin = true
@@ -61,20 +61,28 @@ func NewUser(c *gin.Context) {
 		c.JSON(http.StatusUnauthorized, "Admin Exists")
 		c.Abort()
 	}
-	admin, err = controller.CreateUser(user)
+	_, err = controller.CreateUser(user)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 		c.Abort()
 	}
-	fmt.Println(admin)
 	location := url.URL{Path: "/"}
 	c.Redirect(http.StatusFound, location.RequestURI())
 }
 
 func DisplayLanding(c *gin.Context) {
-	var Data PageData
-	Data.Init("Networks", c)
-	c.HTML(http.StatusOK, "layout", Data)
+	var data PageData
+	page := ""
+	session := sessions.Default(c)
+	if session.Get("page") != nil {
+		page = session.Get("page").(string)
+	}
+	if page != "" {
+		data.Init(page, c)
+	} else {
+		data.Init("Networks", c)
+	}
+	c.HTML(http.StatusOK, "layout", data)
 }
 
 func CreateNetwork(c *gin.Context) {
@@ -485,7 +493,55 @@ func DeleteIngress(c *gin.Context) {
 		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
 		return
 	}
-	c.JSON(http.StatusOK, gin.H{"message": "Ingress Gateway Created"})
+	c.JSON(http.StatusOK, gin.H{"message": "Ingress Gateway Deleted"})
+}
+
+func CreateRelay(c *gin.Context) {
+	var relayData Relay
+	mac := c.Param("mac")
+	net := c.Param("net")
+	node, err := controller.GetNode(mac, net)
+	if err != nil {
+		ReturnError(c, err, "Nodes")
+		return
+	}
+	nodes, err := controller.GetNetworkNodes(node.Network)
+	if err != nil {
+		ReturnError(c, err, "Nodes")
+		return
+	}
+	relayData.Node = node
+	relayData.Nodes = nodes
+	c.HTML(http.StatusOK, "CreateRelay", relayData)
+}
+
+func ProcessRelayCreation(c *gin.Context) {
+	var request models.RelayRequest
+	request.NodeID = c.Param("mac")
+	request.NetID = c.Param("net")
+	request.RelayAddrs = c.PostFormArray("address")
+	_, err := controller.CreateRelay(request)
+	if err != nil {
+		ReturnError(c, err, "Nodes")
+	}
+	session := sessions.Default(c)
+	session.Set("message", "Relay Gateway Created")
+	session.Set("page", "Nodes")
+	session.Save()
+	location := url.URL{Path: "/"}
+	c.Redirect(http.StatusFound, location.RequestURI())
+}
+
+func DeleteRelay(c *gin.Context) {
+	net := c.Param("net")
+	mac := c.Param("mac")
+	_, err := controller.DeleteRelay(net, mac)
+	if err != nil {
+		fmt.Println(err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{"message": "Relay Gateway Deleted"})
 }
 
 func CreateIngressClient(c *gin.Context) {
@@ -654,3 +710,12 @@ func UpdateClient(c *gin.Context) {
 	location := url.URL{Path: "/"}
 	c.Redirect(http.StatusFound, location.RequestURI())
 }
+
+func ReturnError(c *gin.Context, err error, page string) {
+	session := sessions.Default(c)
+	session.Set("message", err.Error())
+	session.Set("page", page)
+	session.Save()
+	location := url.URL{Path: "/"}
+	c.Redirect(http.StatusFound, location.RequestURI())
+}

html/buttonbar.html

@@ -1,44 +1,44 @@
 {{define "buttonbar"}}
 <div class="w3-bar w3-blue">
-    <button class="w3-bar-item w3-button w3-blue" onclick="document.getElementById('NewNetwork').style.display='block'">Create Network</button>
-    <button class="w3-bar-item w3-button"></button>
-    <button class="w3-bar-item w3-button tablink w3-teal" onclick="openTab(event, 'Networks')">Network Details</button>
-    <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Nodes')">Node</button>
-    <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Keys')">Access Keys</button>
-    <button class="w3-bar-item w3-button tablink" onclick="alert('Not Implemented Yet')">DNS</button>
-    <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'ExtClient')">External Clients</button>
-
+	<div class="w3-content w3-blue">
+		<button class="w3-bar-item w3-button"></button>
+		<button class="w3-bar-item w3-button tablink w3-teal" onclick="openTab(event, 'Networks')">Network Details</button>
+		<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Nodes')">Node</button>
+		<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Keys')">Access Keys</button>
+		<button class="w3-bar-item w3-button tablink" onclick="alert('Not Implemented Yet')">DNS</button>
+		<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'ExtClient')">External Clients</button>
+	</div>
 </div>
 
 
 {{/*NewNetwork*/}}
 <div id="NewNetwork" class="w3-modal">
-    <div class="w3-modal-content w3-card-4 animate-zoom w3-padding" style="width:50%">
-	<div class="w3-center"><br>
-	    <span onclick="document.getElementById('NewNetwork').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
+	<div class="w3-modal-content w3-card-4 animate-zoom w3-padding" style="width:50%">
+		<div class="w3-center"><br>
+			<span onclick="document.getElementById('NewNetwork').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
+
+			<form class="w3-container" method=POST action="/create_network">
+				<div class="w3-section">
+					<label><b>Network Name</b></label>
+					<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="newnetwork" name="name" required>
+					<label><b>Address Range</b></label>
+					<input class="w3-input w3-border" type="text" placeholder="10.100.100.0/24" name="address" required>
+					<div class="w3-container w3-left-align">
+						<input class="w3-check" type="checkbox" name="dual" value="yes"> Use Dual Stack<br>
+						<input class="w3-check" type="checkbox" name="local" value="yes"> Is Local<br>
+						<input class="w3-check" type="checkbox" name="udp" value="yes"> Use UDP Hole Punching<br><br>
+					</div>
+					<button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">Create Network</button>
+				</div>
+			</form>
+
+			<div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
+				<button onclick="document.getElementById('NewNetwork').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>
+
+			</div>
 
-	    <form class="w3-container" method=POST action="/create_network">
-		<div class="w3-section">
-		    <label><b>Network Name</b></label>
-		    <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="newnetwork" name="name" required>
-		    <label><b>Address Range</b></label>
-		    <input class="w3-input w3-border" type="text" placeholder="10.100.100.0/24" name="address" required>
-		    <div class="w3-container w3-left-align">
-			<input class="w3-check" type="checkbox" name="dual" value="yes"> Use Dual Stack<br>
-			<input class="w3-check" type="checkbox" name="local" value="yes"> Is Local<br>
-			<input class="w3-check" type="checkbox" name="udp" value="yes"> Use UDP Hole Punching<br><br>
-		    </div>
-		    <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">Create Network</button>
 		</div>
-	    </form>
-
-	    <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
-		<button onclick="document.getElementById('NewNetwork').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>
-
-	    </div>
-
 	</div>
-    </div>
 </div>
 
 {{end}}

html/buttonbar2.html

@@ -0,0 +1,28 @@
+{{define "buttonbar2"}}
+<div class="w3-sidebar w3-bar-block w3-card w3-animate-left" style="display:none" id="leftMenu">
+  <button onclick="document.getElementById('leftMenu').style.display='none';" class="w3-bar-item w3-button w3-large">Close &times;</button>
+  <a href="#" class="w3-bar-item w3-button">Link 1</a>
+  <a href="#" class="w3-bar-item w3-button">Link 2</a>
+  <a href="#" class="w3-bar-item w3-button">Link 3</a>
+</div>
+
+<div class="w3-sidebar w3-bar-block w3-card w3-animate-right" style="display:none;right:0;" id="rightMenu">
+  <button onclick="document.getElementById('rightMenu').style.display='none';" class="w3-bar-item w3-button w3-large">Close &times;</button>
+  <a href="#" class="w3-bar-item w3-button">Link 1</a>
+  <a href="#" class="w3-bar-item w3-button">Link 2</a>
+  <a href="#" class="w3-bar-item w3-button">Link 3</a>
+</div>
+
+<div class="w3-teal">
+  <button class="w3-button w3-teal w3-xlarge w3-left" onclick="document.getElementById('leftMenu').style.display='block';">&#9776;</button>
+  <button class="w3-button w3-teal w3-xlarge w3-right" onclick="document.getElementById('rightMenu').style.display='block';">&#9776;</button>
+  <div class="w3-container">
+    <h1>My Page</h1>
+  </div>
+</div>
+
+<div class="w3-container">
+<p>In this example, we demonstrate how to use two side navigations.</p>
+<p>We have created two "menu" buttons: one to open the side navigation from the left and one to open it from the right.</p>
+</div>
+{{end}}

html/extclient.html

@@ -1,75 +1,85 @@
 {{ define "ExtClient" }}
 <div id="ExtClient" class="w3-row tab" style="display=none">
-    <div class="w3-third">
-	<p> Available Ingress Gateways
-	{{range .Nodes}}
-	<form action="/create_ingress_client/{{.Network}}/{{.MacAddress}}" method="POST" style="display:inline">
-	    <label>{{.Name}}</label>
-	    <label>{{.Network}}</label>
-	    <button title="Create Client" onclick="return confirm('Are you sure you want to add an extenal client to the {{.Network}} network?');" class="w3-circle w3-blue"><span class="material-icons">add_circle_outline</span></button>
-	</form>
-	{{end}}
-    </div>
-
-    <div class="w3-twothird">
-	<p>External Clients</p>
-	{{range .ExtClients}}
-	<button class="w3-block w3-white w3-left-align" onclick="openClient('{{.ClientID}}');">{{.ClientID}} @ {{.Network}}</button>
-	<div id="client{{.ClientID}}" class="w3-container w3-hide">
-	    <p><label>IP </label><input type=disabled placeholder="{{.Address}}"></p>
-	    <p><label>Public Key </label><input type=disabled placeholder="{{.PublicKey}}"></p>
-	    <div class=btn-group>
+	<div class="w3-third">
+		<p> Available Ingress Gateways
+		{{range .Nodes}}
+		<div class="net All {{.Network}}">
+			{{if eq .IsIngressGateway "yes"}}
+			<form action="/create_ingress_client/{{.Network}}/{{.MacAddress}}" method="POST" style="display:inline">
+				<p><label>{{.Name}}</label>@<label>{{.Network}}</label>
+				<button title="Create Client" onclick="return confirm('Are you sure you want to add an extenal client to the {{.Network}} network?');" class="w3-circle"><span class="material-icons">add_circle_outline</span></button></p>
+			</form>
+			{{end}}
+		</div>
+		{{end}}
+	</div>
+
+
+	<div class="w3-twothird">
+		<p>External Clients</p>
+		{{range .ExtClients}}
+		<div class="net {{.Network}} All">
+			{{template "ExtClientDetails" .}}
+		</div>
+		{{end}}
+	</div>
+</div>
+{{end}}
+
+{{define "ExtClientDetails"}}
+<button class="w3-block w3-white w3-left-align" onclick="expand('client{{.ClientID}}');">{{.ClientID}} @ {{.Network}}</button>
+
+<div id="client{{.ClientID}}" class="w3-container w3-hide">
+	<p><label>IP </label><input type=disabled placeholder="{{.Address}}"></p>
+	<p><label>Public Key </label><input type=disabled placeholder="{{.PublicKey}}"></p>
+	<div class=btn-group>
 		<form class="form-inline" action="get_qr/{{.Network}}/{{.ClientID}}" method=POST>
 
-		    <button class="w3-bar-item", type=submit>Show QR Code <span class="material-icons">qr_code</span></Button>
+			<button class="w3-bar-item", type=submit>Show QR Code <span class="material-icons">qr_code</span></button>
 		</form>
 		<form class="form-inline" action="get_client_config/{{.Network}}/{{.ClientID}}" method=POST>
-		    <button class="w3-bar-item">DownLoad Config <span class="material-icons">cloud_download</span></button>
+			<button class="w3-bar-item">DownLoad Config <span class="material-icons">cloud_download</span></button>
 		</form>
 		<form class="form-inline" action="/edit_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
-		    <button class="w3-bar-item w3-circle w3-white" onclick="document.getElementById('EditExtClient');"><span class="material-icons">edit</span></button>
+			<button class="w3-bar-item w3-circle w3-white" onclick="document.getElementById('EditExtClient');"><span class="material-icons">edit</span></button>
 		</form>
 		<form class="form-inline" action="/delete_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
-		    <button class="w3-bar-item w3-circle w3-red"><span class="material-icons">delete</span></button>
+			<button class="w3-bar-item w3-circle w3-red"><span class="material-icons">delete</span></button>
 		</form>
-
-	    </div>
 	</div>
-	{{end}}
-    </div>
 </div>
 {{end}}
 
 {{ define "EditExtClient" }}
 <html>
-    <head>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css" type="text/css">
-    </head>
-
-    <body onLoad="document.getElementById('EditExtClient').style.display='block';">
-
-	{{template "Header"}}
-
-	<div id="EditExtClient" class="w3-modal">
-	    <div class="w3-modal-content w3-card-4 w3-animate-zoom w3-padding" style="width:50%">
-		<div class="w3-center">
-		    <form action="/" method=get>
-			<button class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close">&times;</button><br>
-		    </form>
-		    <form class=w3-container method=POST action="/update_client/{{.Network}}/{{.ClientID}}">
-			<p>Editing client:{{.ClientID}}</p>
-			<p><input name="newid" type=text placeholder="New Client ID" required></p>
-			<br>	<button class="w3-button w3-block w3-padding w3-teal" type=submit>Update</button>
-			<button class="w3-button w3-block w3-padding w3-yellow" type=reset>Reset</button>
-		    </form>
-		    <form action="/" method=get>
-			<button class="w3-button w3-block w3-padding w3-red" type=Cancel>Cancel</button>
-		    </form>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css" type="text/css">
+	</head>
+
+	<body onLoad="document.getElementById('EditExtClient').style.display='block';">
+
+		{{template "Header"}}
+
+		<div id="EditExtClient" class="w3-modal">
+			<div class="w3-modal-content w3-card-4 w3-animate-zoom w3-padding" style="width:50%">
+				<div class="w3-center">
+					<form action="/" method=get>
+						<button class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close">&times;</button><br>
+					</form>
+					<form class=w3-container method=POST action="/update_client/{{.Network}}/{{.ClientID}}">
+						<p>Editing client:{{.ClientID}}</p>
+						<p><input name="newid" type=text placeholder="New Client ID" required></p>
+						<br>	<button class="w3-button w3-block w3-padding w3-teal" type=submit>Update</button>
+						<button class="w3-button w3-block w3-padding w3-yellow" type=reset>Reset</button>
+					</form>
+					<form action="/" method=get>
+						<button class="w3-button w3-block w3-padding w3-red" type=Cancel>Cancel</button>
+					</form>
+				</div>
+			</div>
 		</div>
-	    </div>
-	</div>
-    </body>
+	</body>
 </html>
 {{end}}