Added some more customization options (#43)

* Added some more customization options

* Fixed inconsistent height of custom logos

* Extended navbar style to login page

README.md

@@ -115,6 +115,7 @@ The following configuration options are available:
 | WEBSITE_TITLE         | title             | core        | WireGuard VPN                                   | The website title.                                                                                                                   |
 | COMPANY_NAME          | company           | core        | WireGuard Portal                                | The company name (for branding).                                                                                                     |
 | MAIL_FROM             | mailFrom          | core        | WireGuard VPN <noreply@company.com>             | The email address from which emails are sent.                                                                                        |
+| LOGO_URL              | logoUrl           | core        | /img/header-logo.png                            | The logo displayed in the page's header.                                                                                         |
 | ADMIN_USER            | adminUser         | core        | admin@wgportal.local                            | The administrator user. Must be a valid email address.                                                                               |
 | ADMIN_PASS            | adminPass         | core        | wgportal                                        | The administrator password. If unchanged, a random password will be set on first startup.                                            |
 | EDITABLE_KEYS         | editableKeys      | core        | true                                            | Allow to edit key-pairs in the UI.                                                                                                   |

assets/css/custom.css

@@ -64,6 +64,11 @@ pre{background:#f7f7f9}iframe{overflow:hidden;border:none}@media (min-width: 768
     padding: 0.5rem 1rem;
 }
 
+.navbar-brand > img {
+    height: 2rem;
+    width: auto;
+}
+
 .disabled-peer {
     color: #d03131;
 }

assets/css/signin.css

@@ -1,3 +1,8 @@
 .navbar {
     padding: 0.5rem 1rem;
 }
+
+.navbar-brand > img {
+    height: 2rem;
+    width: auto;
+}

assets/tpl/index.html

@@ -15,7 +15,7 @@
     {{template "prt_nav.html" .}}
     <div class="container mt-2">
         <div class="page-header">
-            <h1>WireGuard VPN Portal</h1>
+            <h1>{{ .Static.WebsiteTitle }}</h1>
         </div>
         {{template "prt_flashes.html" .}}
         <p class="lead">WireGuard® is an extremely simple yet fast and modern VPN that utilizes state-of-the-art cryptography. It aims to be faster, simpler, leaner, and more useful than IPsec, while avoiding the massive headache. It intends to be considerably more performant than OpenVPN. </p>

assets/tpl/login.html

@@ -30,8 +30,8 @@
                 <form class="form-signin" method="post">
                     <input type="hidden" name="_csrf" value="{{.Csrf}}">
                     <div class="form-group">
-                        <label for="inputUsername">Email</label>
+                        <label for="inputUsername">Username</label>
-                        <input type="text" name="username" class="form-control" id="inputUsername" aria-describedby="usernameHelp" placeholder="Enter email">
+                        <input type="text" name="username" class="form-control" id="inputUsername" aria-describedby="usernameHelp" placeholder="Enter username or email">
                     </div>
                     <div class="form-group">
                         <label for="inputPassword">Password</label>

internal/server/configuration.go

@@ -67,6 +67,7 @@ type Config struct {
 		SelfProvisioningAllowed bool   `yaml:"selfProvisioning" envconfig:"SELF_PROVISIONING"`
 		LdapEnabled             bool   `yaml:"ldapEnabled" envconfig:"LDAP_ENABLED"`
 		SessionSecret           string `yaml:"sessionSecret" envconfig:"SESSION_SECRET"`
+		LogoUrl                 string `yaml:"logoUrl" envconfig:"LOGO_URL"`
 	} `yaml:"core"`
 	Database common.DatabaseConfig `yaml:"database"`
 	Email    common.MailConfig     `yaml:"email"`
@@ -81,6 +82,7 @@ func NewConfig() *Config {
 	cfg.Core.ListeningAddress = ":8123"
 	cfg.Core.Title = "WireGuard VPN"
 	cfg.Core.CompanyName = "WireGuard Portal"
+	cfg.Core.LogoUrl = "/img/header-logo.png"
 	cfg.Core.ExternalUrl = "http://localhost:8123"
 	cfg.Core.MailFrom = "WireGuard VPN <noreply@company.com>"
 	cfg.Core.AdminUser = "admin@wgportal.local"

internal/server/server.go

@@ -253,7 +253,7 @@ func (s *Server) getExecutableDirectory() string {
 func (s *Server) getStaticData() StaticData {
 	return StaticData{
 		WebsiteTitle: s.config.Core.Title,
-		WebsiteLogo:  "/img/header-logo.png",
+		WebsiteLogo:  s.config.Core.LogoUrl,
 		CompanyName:  s.config.Core.CompanyName,
 		Year:         time.Now().Year(),
 		Version:      Version,