Merge pull request #100 from subspacecommunity/enhancement/theme_sele…

…ction Enhancement/theme selection
subspacecommunity · Jun 25, 2020 · ab801ec · ab801ec
2 parents 84847b5 + 39957c5
commit ab801ec
Show file tree

Hide file tree

Showing 16 changed files with 84 additions and 62 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,22 @@
+# Binaries for programs and plugins
+*.exe
+*.exe~
+*.dll
+*.so
+*.dylib
+
+# Test binary, built with `go test -c`
+*.test
+
+# Output of the go coverage tool, specifically when used with LiteIDE
+*.out
+
+# Dependency directories (remove the comment below to include it)
+vendor/
+
+# Subspace
 subspace-linux-amd64
 bindata.go
+
+# User Specific
+.vscode/
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@
     - [2. Add a DNS record](#2-add-a-dns-record)
     - [3. Enable Let's Encrypt](#3-enable-lets-encrypt)
     - [Usage](#usage)
-    - [Usage](#usage-1)
+      - [Command Line Options](#command-line-options)
     - [Run as a Docker container](#run-as-a-docker-container)
       - [Install WireGuard on the host](#install-wireguard-on-the-host)
       - [Docker-Compose Example](#docker-compose-example)
@@ -87,28 +87,21 @@ Subspace runs a TLS ("SSL") https server on port 443/tcp. It also runs a standar
 $ subspace --http-host subspace.example.com
 ```
 
-### Usage
+#### Command Line Options
+
+|      flag       | default | description                                                                                                               |
+| :-------------: | :-----: | :------------------------------------------------------------------------------------------------------------------------ |
+|   `http-host`   |         | REQUIRED: The host to listen on and set cookies for                                                                       |
+|   `backlink`    |   `/`   | OPTIONAL: The page to set the home button too                                                                             |
+|    `datadir`    | `/data` | OPTIONAL: The directory to store data such as the wireguard configuration files                                           |
+|     `debug`     |         | OPTIONAL: Place subspace into debug mode for verbose log output                                                           |
+|   `http-addr`   |  `:80`  | OPTIONAL: HTTP listen address                                                                                             |
+| `http-insecure` |         | OPTIONAL: enable session cookies for http and remove redirect to https                                                    |
+|  `letsencrypt`  | `true`  | OPTIONAL: Whether or not to use a letsencrypt certificate                                                                 |
+|     `theme`     | `green` | OPTIONAL: The theme to use, please refer to [semantic-ui](https://semantic-ui.com/usage/theming.html) for accepted colors |
+|    `version`    |         | Display version of `subspace` and exit                                                                                    |
+|     `help`      |         | Display help and exit                                                                                                     |
 
-```bash
-  -backlink string
-        backlink (optional)
-  -datadir string
-        data dir (default "/data")
-  -debug
-        debug mode
-  -help
-        display help and exit
-  -http-addr string
-        HTTP listen address (default ":80")
-  -http-host string
-        HTTP host
-  -http-insecure
-        enable sessions cookies for http (no https) not recommended
-  -letsencrypt
-        enable TLS using Let's Encrypt on port 443 (default true)
-  -version
-        display version and exit
-```
 
 ### Run as a Docker container
 

diff --git a/entrypoint.sh b/entrypoint.sh
@@ -11,7 +11,7 @@ if [ -z "${SUBSPACE_HTTP_HOST-}" ]; then
 fi
 # Optional environment variables.
 if [ -z "${SUBSPACE_BACKLINK-}" ]; then
-  export SUBSPACE_BACKLINK=""
+  export SUBSPACE_BACKLINK="/"
 fi
 
 if [ -z "${SUBSPACE_IPV4_POOL-}" ]; then
@@ -40,6 +40,10 @@ if [ -z "${SUBSPACE_HTTP_INSECURE-}" ]; then
   export SUBSPACE_HTTP_INSECURE="false"
 fi
 
+if [ -z "${SUBSPACE_THEME-}" ]; then
+  export SUBSPACE_THEME="green"
+fi
+
 export DEBIAN_FRONTEND="noninteractive"
 
 if [ -z "${SUBSPACE_IPV4_GW-}" ]; then
@@ -181,7 +185,8 @@ exec /usr/bin/subspace \
     "--http-addr=${SUBSPACE_HTTP_ADDR}" \
     "--http-insecure=${SUBSPACE_HTTP_INSECURE}" \
     "--backlink=${SUBSPACE_BACKLINK}" \
-    "--letsencrypt=${SUBSPACE_LETSENCRYPT}"
+    "--letsencrypt=${SUBSPACE_LETSENCRYPT}" \
+    "--theme=${SUBSPACE_THEME}"
 RUNIT
   chmod +x /etc/service/subspace/run
 

diff --git a/main.go b/main.go
@@ -76,18 +76,22 @@ var (
 
 	// Error page HTML
 	errorPageHTML = `<html><head><title>Error</title></head><body text="orangered" bgcolor="black"><h1>An error has occurred</h1></body></html>`
+
+	// theme
+	semanticTheme string
 )
 
 func init() {
 	cli.StringVar(&datadir, "datadir", "/data", "data dir")
-	cli.StringVar(&backlink, "backlink", "", "backlink (optional)")
+	cli.StringVar(&backlink, "backlink", "/", "backlink (optional)")
 	cli.StringVar(&httpHost, "http-host", "", "HTTP host")
 	cli.StringVar(&httpAddr, "http-addr", ":80", "HTTP listen address")
 	cli.BoolVar(&httpInsecure, "http-insecure", false, "enable sessions cookies for http (no https) not recommended")
 	cli.BoolVar(&letsencrypt, "letsencrypt", true, "enable TLS using Let's Encrypt on port 443")
 	cli.BoolVar(&showVersion, "version", false, "display version and exit")
 	cli.BoolVar(&showHelp, "help", false, "display help and exit")
 	cli.BoolVar(&debug, "debug", false, "debug mode")
+	cli.StringVar(&semanticTheme, "theme", "green", "Semantic-ui theme to use")
 }
 
 func main() {

diff --git a/templates/configure.html b/templates/configure.html
@@ -5,7 +5,7 @@
 <div class="ui container">
     <div class="ui padded segment">
 
-        <div class="ui huge green dividing header">Setup Admin Account</div>
+        <div class="ui huge {{$.SemanticTheme}} dividing header">Setup Admin Account</div>
         <div class="ui hidden divider"></div>
 
         {{with $error := .Request.FormValue "error"}}
@@ -51,7 +51,7 @@
                 <div class="field mobile hidden">&nbsp;</div>
                 <div class="field mobile hidden">&nbsp;</div>
                 <div class="field">
-                    <button type="submit" class="ui huge fluid green button">Save</button>
+                    <button type="submit" class="ui huge fluid {{$.SemanticTheme}} button">Save</button>
                 </div>
             </div>
         </form>

diff --git a/templates/forgot.html b/templates/forgot.html
@@ -51,7 +51,8 @@
                             </div>
                         </div>
                         <div class="field">
-                            <button type="submit" class="ui huge fluid green button">Set password</button>
+                            <button type="submit" class="ui huge fluid {{$.SemanticTheme}} button">Set password</button>
+                            {{$.TargetUser.ID}}
                         </div>
                     {{else}}
                         <div class="field">
@@ -61,7 +62,7 @@
                             </div>
                         </div>
                         <div class="field">
-                            <button type="submit" class="ui huge fluid green button">Reset password</button>
+                            <button type="submit" class="ui huge fluid {{$.SemanticTheme}} button">Reset password</button>
                         </div>
                     {{end}}
 

diff --git a/templates/header.html b/templates/header.html
@@ -19,14 +19,10 @@
     </head>
     <body>
 
-        <div class="borderless ui big green inverted menu">
+        <div class="borderless ui big {{$.SemanticTheme}} inverted menu">
             <div class="ui container">
-                {{if and $.Backlink $.Admin}}
-                    {{if $.User.Admin}}
-                        <!-- don't show -->
-                    {{else}}
-                        <a class="item" href="{{.Backlink}}"><i class="home icon"></i></a>
-                    {{end}}
+                {{if $.Backlink}}
+                    <a class="item" href="{{.Backlink}}"><i class="home icon"></i></a>
                 {{end}}
                 <a href="/" class="{{if eq $.Section "index"}}active{{end}} item">Subspace</a>
                 {{if $.Admin}}

diff --git a/templates/help.html b/templates/help.html
@@ -14,7 +14,7 @@
 
         <div class="ui big list">
             <div class="item">
-                <i class="large green check circle outline icon"></i>
+                <i class="large {{$.SemanticTheme}} check circle outline icon"></i>
                 <div class="content">
                     <div class="header">
                         Encrypt your connection
@@ -25,7 +25,7 @@
                 </div>
             </div>
             <div class="item">
-                <i class="large green check circle outline icon"></i>
+                <i class="large {{$.SemanticTheme}} check circle outline icon"></i>
                 <div class="content">
                     <div class="header">
                         Stop your internet provider from spying on you
@@ -36,7 +36,7 @@
                 </div>
             </div>
             <div class="item">
-                <i class="large green check circle outline icon"></i>
+                <i class="large {{$.SemanticTheme}} check circle outline icon"></i>
                 <div class="content">
                     <div class="header">
                         Connect from any device

diff --git a/templates/index.html b/templates/index.html
@@ -41,7 +41,7 @@
             <div class="column">
                 <div class="ui hidden divider"></div>
                 <div class="ui huge center aligned icon header">
-                    <i class="green clockwise rotated strikethrough icon"></i>
+                    <i class="{{$.SemanticTheme}} clockwise rotated strikethrough icon"></i>
                     <div class="content">Subspace is online</div>
                 </div>
                 <div class="ui hidden divider"></div>
@@ -85,7 +85,7 @@
                         </div>
                     {{end}}
                     <div class="field">
-                        <button type="submit" class="ui huge green fluid button">Add device</button>
+                        <button type="submit" class="ui huge {{$.SemanticTheme}} fluid button">Add device</button>
                     </div>
                 </form>
             </div>
@@ -95,7 +95,7 @@
     {{if $.User.ID}}
         <div class="ui hidden divider"></div>
         <div class="ui padded segment">
-            <div class="ui huge green dividing header">
+            <div class="ui huge {{$.SemanticTheme}} dividing header">
                 Your devices
             </div>
             <div class="ui hidden divider"></div>
@@ -155,7 +155,7 @@
     {{if $.Admin}}
         <div class="ui hidden divider"></div>
         <div class="ui padded segment">
-            <div class="ui huge green dividing header">
+            <div class="ui huge {{$.SemanticTheme}} dividing header">
                 Admin devices
             </div>
             <div class="ui hidden divider"></div>
@@ -214,7 +214,7 @@
     {{if $.Users}}
         <div class="ui hidden divider"></div>
         <div class="ui padded segment">
-            <div class="ui huge green dividing header">
+            <div class="ui huge {{$.SemanticTheme}} dividing header">
                 Single sign-on users
             </div>
             <div class="ui hidden divider"></div>

diff --git a/templates/profile/connect.html b/templates/profile/connect.html
@@ -21,7 +21,7 @@
     {{end}}
 
     <div class="ui padded segment">
-        <div class="ui huge green dividing header">Connecting {{$.Profile.Name}}</div>
+        <div class="ui huge {{$.SemanticTheme}} dividing header">Connecting {{$.Profile.Name}}</div>
         <div class="ui hidden divider"></div>
 
         {{if eq $.Profile.Platform "windows"}}

diff --git a/templates/profile/delete.html b/templates/profile/delete.html
@@ -16,7 +16,7 @@
                     <input type="hidden" name="profile" value="{{$.Profile.ID}}">
                     <div class="two ui buttons">
                         <a href="/" class="ui large button">Cancel</a>
-                        <button type="submit" class="ui large green button confirm" data-prompt="Delete device?">Delete</button>
+                        <button type="submit" class="ui large {{$.SemanticTheme}} button confirm" data-prompt="Delete device?">Delete</button>
                     </div>
                 </form>
             </div>

diff --git a/templates/settings.html b/templates/settings.html
@@ -36,7 +36,7 @@
         {{end}}
 
         <form class="ui huge form" action="/settings" method="POST" novalidate autocomplete="off">
-            <div class="ui green dividing header">Single Sign-On (SAML)</div>
+            <div class="ui {{$.SemanticTheme}} dividing header">Single Sign-On (SAML)</div>
             <div class="ui message">
                 <i class="info circle grey icon"></i>
                 To enable Single Sign-On using SAML add a custom SAML app in your identity provider's admin panel, then copy/paste the IDP metadata XML below.
@@ -67,14 +67,14 @@
                 <div class="field">
                     <div class="two ui buttons">
                         <a href="/" class="ui huge button">Cancel</a>
-                        <button type="submit" class="ui huge green button">Save</button>
+                        <button type="submit" class="ui huge {{$.SemanticTheme}} button">Save</button>
                     </div>
                 </div>
             </div>
 
             <div class="ui hidden section divider"></div>
 
-            <div class="ui green dividing header">Admin Account</div>
+            <div class="ui {{$.SemanticTheme}} dividing header">Admin Account</div>
             <div class="ui hidden divider"></div>
             <div class="field">
                 <div class="ui small header">Email Address</div>
@@ -94,7 +94,7 @@
                 <div class="field">
                     <div class="two ui buttons">
                         <a href="/" class="ui huge button">Cancel</a>
-                        <button type="submit" class="ui huge green button">Save</button>
+                        <button type="submit" class="ui huge {{$.SemanticTheme}} button">Save</button>
                     </div>
                 </div>
             </div>

diff --git a/templates/signin.html b/templates/signin.html
@@ -47,7 +47,7 @@
                     </div>
                 </div>
                 <div class="center-aligned field">
-                    <button type="submit" class="ui huge fluid green button">Sign in</button>
+                    <button type="submit" class="ui huge fluid {{$.SemanticTheme}} button">Sign in</button>
                     <div class="ui hidden divider"></div>
                     <a href="/forgot">Forgot password?</a>
                 </div>

diff --git a/templates/user/delete.html b/templates/user/delete.html
@@ -16,7 +16,7 @@
                     <input type="hidden" name="user" value="{{$.TargetUser.ID}}">
                     <div class="two ui buttons">
                         <a href="/user/edit/{{$.TargetUser.ID}}" class="ui large button">Cancel</a>
-                        <button type="submit" class="ui large green button confirm" data-prompt="Delete user?">Delete</button>
+                        <button type="submit" class="ui large {{$.SemanticTheme}} button confirm" data-prompt="Delete user?">Delete</button>
                     </div>
                 </form>
             </div>

diff --git a/templates/user/edit.html b/templates/user/edit.html
@@ -5,7 +5,7 @@
     <div class="ui hidden divider"></div>
 
     <div class="ui padded segment">
-        <div class="ui huge green dividing header">
+        <div class="ui huge {{$.SemanticTheme}} dividing header">
             {{$.TargetUser.Email}}
         </div>
         <div class="ui hidden divider"></div>
@@ -71,9 +71,9 @@
                     <div class="equal width fields">
                         <div class="field left-aligned">
                             {{if $.TargetUser.Admin}}
-                                <button type="submit" name="admin" class="ui large green button" value="no"><i class="check circle icon"></i>Admin</button>
+                                <button type="submit" name="admin" class="ui large {{$.SemanticTheme}} button" value="no"><i class="check circle icon"></i>Admin</button>
                             {{else}}
-                            <button type="submit" name="admin" class="ui large basic green button" value="yes"><i class="circle outline icon"></i>Admin</button>
+                            <button type="submit" name="admin" class="ui large basic {{$.SemanticTheme}} button" value="yes"><i class="circle outline icon"></i>Admin</button>
                             {{end}}
                         </div>
                         <div class="field right-aligned">

diff --git a/web.go b/web.go
@@ -56,6 +56,8 @@ type Web struct {
 
 	TargetUser     User
 	TargetProfiles []Profile
+
+	SemanticTheme string
 }
 
 func init() {
@@ -149,13 +151,14 @@ func WebHandler(h func(*Web), section string) httprouter.Handle {
 			ps:       ps,
 			template: section + ".html",
 
-			Backlink: backlink,
-			Time:     time.Now(),
-			Version:  version,
-			Request:  r,
-			Section:  section,
-			Info:     config.FindInfo(),
-			SAML:     samlSP,
+			Backlink:      backlink,
+			Time:          time.Now(),
+			Version:       version,
+			Request:       r,
+			Section:       section,
+			Info:          config.FindInfo(),
+			SAML:          samlSP,
+			SemanticTheme: semanticTheme,
 		}
 
 		if section == "signin" || section == "forgot" || section == "configure" {