Add new config option to show a custom welcome message in the login s…

…creen

conf/configuration.go

@@ -22,14 +22,16 @@ type configOptions struct {
 	SessionTimeout          time.Duration
 	BaseURL                 string
 	UILoginBackgroundURL    string
-	IgnoredArticles         string
-	IndexGroups             string
 	EnableTranscodingConfig bool
 	TranscodingCacheSize    string
 	ImageCacheSize          string
-	ProbeCommand            string
-	CoverArtPriority        string
-	CoverJpegQuality        int
+
+	IgnoredArticles  string
+	IndexGroups      string
+	ProbeCommand     string
+	CoverArtPriority string
+	CoverJpegQuality int
+	UIWelcomeMessage string
 
 	// DevFlags. These are used to enable/disable debugging and incomplete features
 	DevLogSourceLine           bool
@@ -78,6 +80,7 @@ func init() {
 	viper.SetDefault("probecommand", "ffmpeg %s -f ffmetadata")
 	viper.SetDefault("coverartpriority", "embedded, cover.*, folder.*, front.*")
 	viper.SetDefault("coverjpegquality", 75)
+	viper.SetDefault("uiwelcomemessage", "")
 
 	// DevFlags. These are used to enable/disable debugging and incomplete features
 	viper.SetDefault("devlogsourceline", false)

go.mod

@@ -20,6 +20,7 @@ require (
 	github.com/kennygrant/sanitize v0.0.0-20170120101633-6a0bfdde8629
 	github.com/lib/pq v1.3.0 // indirect
 	github.com/mattn/go-sqlite3 v2.0.3+incompatible
+	github.com/microcosm-cc/bluemonday v1.0.3
 	github.com/mitchellh/mapstructure v1.3.2 // indirect
 	github.com/onsi/ginkgo v1.13.0
 	github.com/onsi/gomega v1.10.1

go.sum

@@ -30,6 +30,8 @@ github.com/armon/go-metrics v0.0.0-20180917152333-f0300d1749da/go.mod h1:Q73ZrmV
 github.com/armon/go-radix v0.0.0-20180808171621-7fddfc383310/go.mod h1:ufUuZ+zHj4x4TnLV4JWEpy2hxWSpsRywHrMgIH9cCH8=
 github.com/astaxie/beego v1.12.2 h1:CajUexhSX5ONWDiSCpeQBNVfTzOtPb9e9d+3vuU5FuU=
 github.com/astaxie/beego v1.12.2/go.mod h1:TMcqhsbhN3UFpN+RCfysaxPAbrhox6QSS3NIAEp/uzE=
+github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
+github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
 github.com/beego/goyaml2 v0.0.0-20130207012346-5545475820dd/go.mod h1:1b+Y/CofkYwXMUU0OhQqGvsY2Bvgr4j6jfT699wyZKQ=
 github.com/beego/x2j v0.0.0-20131220205130-a0352aadc542/go.mod h1:kSeGC/p1AbBiEp5kat81+DSQrZenVBZXklMLaELspWU=
 github.com/beorn7/perks v0.0.0-20180321164747-3a771d992973/go.mod h1:Dwedo/Wpr24TaqPxmxbtue+5NUziq4I4S80YR8gNf3Q=
@@ -46,6 +48,8 @@ github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA
 github.com/cespare/xxhash v1.1.0/go.mod h1:XrSqR1VqqWfGrhpAt58auRo0WTKS1nRRg3ghfAqPWnc=
 github.com/cespare/xxhash/v2 v2.1.1 h1:6MnRN8NT7+YBpUIWxHtefFZOKTAPgGjpQSxqLNn0+qY=
 github.com/cespare/xxhash/v2 v2.1.1/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
+github.com/chris-ramon/douceur v0.2.0 h1:IDMEdxlEUUBYBKE4z/mJnFyVXox+MjuEVDJNN27glkU=
+github.com/chris-ramon/douceur v0.2.0/go.mod h1:wDW5xjJdeoMm1mRt4sD4c/LbF/mWdEpRXQKjTR8nIBE=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
 github.com/cloudflare/golz4 v0.0.0-20150217214814-ef862a3cdc58/go.mod h1:EOBUe0h4xcZ5GoxqC5SDxFQ8gwyZPKQoEzownBlhI80=
 github.com/coreos/bbolt v1.3.2/go.mod h1:iRUV2dpdMOn7Bo10OQBFzIJO9kkE559Wcmn+qkEiiKk=
@@ -150,6 +154,8 @@ github.com/googleapis/gax-go/v2 v2.0.4/go.mod h1:0Wqv26UfaUD9n4G6kQubkQ+KchISgw+
 github.com/googleapis/gax-go/v2 v2.0.5/go.mod h1:DWXyrwAJ9X0FpwwEdw+IPEYBICEFu5mhpdKc/us6bOk=
 github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1 h1:EGx4pi6eqNxGaHF6qqu48+N2wcFQ5qg5FXgOdqsJ5d8=
 github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
+github.com/gorilla/css v1.0.0 h1:BQqNyPTi50JCFMTw/b67hByjMVXZRwGha6wxVGkeihY=
+github.com/gorilla/css v1.0.0/go.mod h1:Dn721qIggHpt4+EFCcTLTU/vk5ySda2ReITrtgBl60c=
 github.com/gorilla/websocket v1.4.0/go.mod h1:E7qHFY5m1UJ88s3WnNqhKjPHQ0heANvMoAMk2YaljkQ=
 github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/grpc-ecosystem/go-grpc-middleware v1.0.0/go.mod h1:FiyG127CGDf3tlThmgyCl78X/SZQqEOJBCDaAfeWzPs=
@@ -222,6 +228,8 @@ github.com/mattn/go-sqlite3 v2.0.3+incompatible h1:gXHsfypPkaMZrKbD5209QV9jbUTJK
 github.com/mattn/go-sqlite3 v2.0.3+incompatible/go.mod h1:FPy6KqzDD04eiIsT53CuJW3U88zkxoIYsOqkbpncsNc=
 github.com/matttproud/golang_protobuf_extensions v1.0.1 h1:4hp9jkHxhMHkqkrB3Ix0jegS5sx/RkqARlsWZ6pIwiU=
 github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0=
+github.com/microcosm-cc/bluemonday v1.0.3 h1:EjVH7OqbU219kdm8acbveoclh2zZFqPJTJw6VUlTLAQ=
+github.com/microcosm-cc/bluemonday v1.0.3/go.mod h1:8iwZnFn2CDDNZ0r6UXhF4xawGvzaqzCRa1n3/lO3W2w=
 github.com/miekg/dns v1.0.14/go.mod h1:W1PPwlIAgtquWBMBEV9nkV9Cazfe8ScdGz/Lj7v3Nrg=
 github.com/mitchellh/cli v1.0.0/go.mod h1:hNIlj7HEI86fIcpObd7a0FcrxTWetlwJDGcceTlRvqc=
 github.com/mitchellh/go-homedir v1.0.0/go.mod h1:SfyaCUpYCn1Vlf4IUYiD9fPX4A5wJrkLzIz1N1q0pr0=

server/app/serve_index.go

@@ -11,10 +11,12 @@ import (
 	"github.com/deluan/navidrome/consts"
 	"github.com/deluan/navidrome/log"
 	"github.com/deluan/navidrome/model"
+	"github.com/microcosm-cc/bluemonday"
 )
 
 // Injects the config in the `index.html` template
 func ServeIndex(ds model.DataStore, fs http.FileSystem) http.HandlerFunc {
+	policy := bluemonday.UGCPolicy()
 	return func(w http.ResponseWriter, r *http.Request) {
 		c, err := ds.User(r.Context()).CountAll()
 		firstTime := c == 0 && err == nil
@@ -27,8 +29,9 @@ func ServeIndex(ds model.DataStore, fs http.FileSystem) http.HandlerFunc {
 		appConfig := map[string]interface{}{
 			"version":                 consts.Version(),
 			"firstTime":               firstTime,
-			"baseURL":                 strings.TrimSuffix(conf.Server.BaseURL, "/"),
-			"loginBackgroundURL":      conf.Server.UILoginBackgroundURL,
+			"baseURL":                 policy.Sanitize(strings.TrimSuffix(conf.Server.BaseURL, "/")),
+			"loginBackgroundURL":      policy.Sanitize(conf.Server.UILoginBackgroundURL),
+			"welcomeMessage":          policy.Sanitize(conf.Server.UIWelcomeMessage),
 			"enableTranscodingConfig": conf.Server.EnableTranscodingConfig,
 		}
 		j, err := json.Marshal(appConfig)
@@ -38,6 +41,7 @@ func ServeIndex(ds model.DataStore, fs http.FileSystem) http.HandlerFunc {
 			log.Trace(r, "Injecting config in index.html", "config", string(j))
 		}
 
+		log.Debug("UI configuration", "appConfig", appConfig)
 		data := map[string]interface{}{
 			"AppConfig": string(j),
 			"Version":   consts.Version(),

server/app/serve_index_test.go

@@ -81,6 +81,28 @@ var _ = Describe("ServeIndex", func() {
 		Expect(config).To(HaveKeyWithValue("loginBackgroundURL", "my_background_url"))
 	})
 
+	It("sets the welcomeMessage", func() {
+		conf.Server.UIWelcomeMessage = "Hello"
+		r := httptest.NewRequest("GET", "/index.html", nil)
+		w := httptest.NewRecorder()
+
+		ServeIndex(ds, fs)(w, r)
+
+		config := extractAppConfig(w.Body.String())
+		Expect(config).To(HaveKeyWithValue("welcomeMessage", "Hello"))
+	})
+
+	It("sets the enableTranscodingConfig", func() {
+		conf.Server.EnableTranscodingConfig = true
+		r := httptest.NewRequest("GET", "/index.html", nil)
+		w := httptest.NewRecorder()
+
+		ServeIndex(ds, fs)(w, r)
+
+		config := extractAppConfig(w.Body.String())
+		Expect(config).To(HaveKeyWithValue("enableTranscodingConfig", true))
+	})
+
 	It("sets the version", func() {
 		r := httptest.NewRequest("GET", "/index.html", nil)
 		w := httptest.NewRecorder()

ui/src/config.js

@@ -7,6 +7,7 @@ const defaultConfig = {
   baseURL: '',
   loginBackgroundURL: 'https://source.unsplash.com/random/1600x900?music',
   enableTranscodingConfig: true,
+  welcomeMessage: '',
 }
 
 let config

ui/src/layout/Login.js

@@ -50,6 +50,13 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'center',
     color: '#3f51b5', //theme.palette.grey[500]
   },
+  welcome: {
+    marginTop: '1em',
+    padding: '0 1em 1em 1em',
+    display: 'flex',
+    justifyContent: 'center',
+    color: '#3f51b5', //theme.palette.grey[500]
+  },
   form: {
     padding: '0 1em 1em 1em',
   },
@@ -92,7 +99,21 @@ const FormLogin = ({ loading, handleSubmit, validate }) => {
                   <LockIcon />
                 </Avatar>
               </div>
-              <div className={classes.systemName}>Navidrome</div>
+              <div className={classes.systemName}>
+                <a
+                  href="https://www.navidrome.org"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Navidrome
+                </a>
+              </div>
+              {config.welcomeMessage && (
+                <div
+                  className={classes.welcome}
+                  dangerouslySetInnerHTML={{ __html: config.welcomeMessage }}
+                />
+              )}
               <div className={classes.form}>
                 <div className={classes.input}>
                   <Field
@@ -152,10 +173,10 @@ const FormSignUp = ({ loading, handleSubmit, validate }) => {
                   <LockIcon />
                 </Avatar>
               </div>
-              <div className={classes.systemName}>
+              <div className={classes.welcome}>
                 {translate('ra.auth.welcome1')}
               </div>
-              <div className={classes.systemName}>
+              <div className={classes.welcome}>
                 {translate('ra.auth.welcome2')}
               </div>
               <div className={classes.form}>