Custom login page image

config/config_store.go

@@ -18,8 +18,8 @@ var (
 	storeUint64Slice = make(map[string][]uint64)
 
 	NamesString = []string{"appName", "appNameShort", "backupDir",
-		"companyColorHeader", "companyColorLogin", "companyLogo",
-		"companyLogoUrl", "companyName", "companyWelcome", "css",
+		"companyColorHeader", "companyColorLogin", "companyLoginImage",
+		"companyLogo", "companyLogoUrl", "companyName", "companyWelcome", "css",
 		"dbVersionCut", "exportPrivateKey", "iconPwa1", "iconPwa2",
 		"instanceId", "licenseFile", "publicHostName", "repoPass",
 		"repoPublicKeys", "repoUrl", "repoUser", "tokenSecret",

db/upgrade/upgrade.go

@@ -139,6 +139,7 @@ var upgradeFunctions = map[string]func(tx pgx.Tx) (string, error){
 			ALTER TABLE app.menu ADD COLUMN color CHARACTER(6);
 			
 			-- more config options: login background images, stay-logged-in option
+			INSERT INTO instance.config (name,value) VALUES ('companyLoginImage','');
 			INSERT INTO instance.config (name,value) VALUES ('loginBackgrounds','[2,5,6,9,11]');
 			INSERT INTO instance.config (name,value) VALUES ('tokenKeepEnable','1');
 			

request/request_lookups.go

@@ -23,15 +23,6 @@ func LookupGet(reqJson json.RawMessage, loginId int64) (interface{}, error) {
 	case "access":
 		return cache.GetAccessById(loginId)
 
-	case "customizing":
-		var res struct {
-			CompanyName    string `json:"companyName"`
-			CompanyWelcome string `json:"companyWelcome"`
-		}
-		res.CompanyName = config.GetString("companyName")
-		res.CompanyWelcome = config.GetString("companyWelcome")
-		return res, nil
-
 	case "feedback":
 		var res struct {
 			Feedback    bool   `json:"feedback"`

request/request_public.go

@@ -17,6 +17,7 @@ func PublicGet() (interface{}, error) {
 		ClusterNodeName    string               `json:"clusterNodeName"`
 		CompanyColorHeader string               `json:"companyColorHeader"`
 		CompanyColorLogin  string               `json:"companyColorLogin"`
+		CompanyLoginImage  string               `json:"companyLoginImage"`
 		CompanyLogo        string               `json:"companyLogo"`
 		CompanyLogoUrl     string               `json:"companyLogoUrl"`
 		CompanyName        string               `json:"companyName"`
@@ -37,6 +38,7 @@ func PublicGet() (interface{}, error) {
 	res.ClusterNodeName = cache.GetNodeName()
 	res.CompanyColorHeader = config.GetString("companyColorHeader")
 	res.CompanyColorLogin = config.GetString("companyColorLogin")
+	res.CompanyLoginImage = config.GetString("companyLoginImage")
 	res.CompanyLogo = config.GetString("companyLogo")
 	res.CompanyLogoUrl = config.GetString("companyLogoUrl")
 	res.CompanyName = config.GetString("companyName")

www/comps/admin/adminCustom.js

@@ -123,6 +123,17 @@ let MyAdminCustom = {
 				<h1>{{ capApp.titleLoginPage }}</h1>
 			</div>
 			<table class="generic-table-vertical">
+				<tr>
+					<td>{{ capApp.companyLoginImage }}</td>
+					<td>
+						<my-admin-custom-logo
+							v-model="configInput.companyLoginImage"
+							:maxSizeKb="256"
+							:readonly="!activated"
+						/>
+					</td>
+					<td>{{ capApp.companyLoginImageHint }}</td>
+				</tr>
 				<tr>
 					<td>{{ capApp.tokenKeepEnable }}</td>
 					<td><my-bool-string-number v-model="configInput.tokenKeepEnable" :readonly="!activated" /></td>

www/comps/app.js

@@ -256,7 +256,7 @@ let MyApp = {
 		},
 		styles:(s) => {
 			if(!s.appReady)
-				return `background-image:url('../images/backgrounds/${s.loginBackground}.webp');`;
+				return s.loginBackground;
 
 			let styles = [`font-size:${s.settings.fontSize}%`];
 
@@ -561,6 +561,7 @@ let MyApp = {
 					this.$store.commit('local/appVersion',res.payload.appVersion);
 					this.$store.commit('local/companyColorHeader',res.payload.companyColorHeader);
 					this.$store.commit('local/companyColorLogin',res.payload.companyColorLogin);
+					this.$store.commit('local/companyLoginImage',res.payload.companyLoginImage);
 					this.$store.commit('local/companyLogo',res.payload.companyLogo);
 					this.$store.commit('local/companyLogoUrl',res.payload.companyLogoUrl);
 					this.$store.commit('local/companyName',res.payload.companyName);

www/langs/REPLACE_BY_BUILD/de_de

@@ -272,8 +272,10 @@
 			"companyColorHeaderHint":"Definiert eine feste Farbe auf dem Header, Farben einzelner Anwendungen werden ignoriert.",
 			"companyColorLogin":"Titelfarbe (Anmeldung)",
 			"companyColorLoginHint":"Überschreibt die Standardfarbe auf der Anmeldemaske.",
+			"companyLoginImage":"Hintergrundbild",
+			"companyLoginImageHint":"JPG- oder PNG-Datei, max. 256kb. Wird als Hintergrundbild auf der Anmeldeseite angezeigt.",
 			"companyLogo":"Firmenlogo",
-			"companyLogoHint":"PNG-Datei, max. 64kb. Wird angezeigt auf der Anmelde- und Startseite.",
+			"companyLogoHint":"JPG- oder PNG-Datei, max. 64kb. Wird angezeigt auf der Anmelde- und Startseite.",
 			"companyLogoUrl":"Firmenlogo-Link",
 			"companyLogoUrlDesc":"Beliebige, gültige URL",
 			"companyLogoUrlHint":"Link, der geöffnet wird, wenn man auf das Firmenlogo klickt.",

www/langs/REPLACE_BY_BUILD/en_us

@@ -272,8 +272,10 @@
 			"companyColorHeaderHint":"Sets a fixed color for the header, application colors are ignored.",
 			"companyColorLogin":"Title color (login)",
 			"companyColorLoginHint":"Overwrites the default color on the login screen.",
+			"companyLoginImage":"Background image",
+			"companyLoginImageHint":"JPG or PNG file, max. 256kb. Used as background image on the login page.",
 			"companyLogo":"Company logo",
-			"companyLogoHint":"PNG file, max. 64kb. Shown on the login screen and start page.",
+			"companyLogoHint":"JPG or PNG file, max. 64kb. Shown on the login and start page.",
 			"companyLogoUrl":"Company logo link",
 			"companyLogoUrlDesc":"Any valid URL",
 			"companyLogoUrlHint":"Link which is opened when clicking on the company logo.",

www/langs/REPLACE_BY_BUILD/hu_hu

@@ -272,8 +272,10 @@
 			"companyColorHeaderHint":"Rögzített szín a fejlécben, az egyes alkalmazások színeit figyelmen kívül hagyja.",
 			"companyColorLogin":"Címfej színe (Bejelentkezés)",
 			"companyColorLoginHint":"Felülbírálja a bejelentkezési képernyőn látható alapértelmezett színt.",
+			"companyLoginImage":"Background image",
+			"companyLoginImageHint":"JPG or PNG file, max. 256kb. Used as background image on the login page.",
 			"companyLogo":"Céglogó",
-			"companyLogoHint":"PNG fájl, max. 64 KB. Megjelenik a bejelentkező és a kezdőoldalon.",
+			"companyLogoHint":"JPG/PNG fájl, max. 64 KB. Megjelenik a bejelentkező és a kezdőoldalon.",
 			"companyLogoUrl":"Céglogó URL",
 			"companyLogoUrlDesc":"Bármely érvényes URL",
 			"companyLogoUrlHint":"A céglogóra való kattintáskor megnyitandó link.",

www/langs/REPLACE_BY_BUILD/it_it

@@ -272,8 +272,10 @@
 			"companyColorHeaderHint":"Sets a fixed color for the header, application colors are ignored.",
 			"companyColorLogin":"Colore titolo (accesso)",
 			"companyColorLoginHint":"Overwrites the default color on the login screen.",
+			"companyLoginImage":"Background image",
+			"companyLoginImageHint":"JPG or PNG file, max. 256kb. Used as background image on the login page.",
 			"companyLogo":"Logo azienda",
-			"companyLogoHint":"PNG file, max. 64kb. Shown on the login screen and start page.",
+			"companyLogoHint":"JPG or PNG file, max. 64kb. Shown on the login and start page.",
 			"companyLogoUrl":"Collegamento logo azienda",
 			"companyLogoUrlDesc":"Qualsiasi URL valido",
 			"companyLogoUrlHint":"Link which is opened when clicking on the company logo.",

www/langs/REPLACE_BY_BUILD/ro_ro

@@ -272,8 +272,10 @@
 			"companyColorHeaderHint":"Sets a fixed color for the header, application colors are ignored.",
 			"companyColorLogin":"Culoarea titlului (autentificare)",
 			"companyColorLoginHint":"Overwrites the default color on the login screen.",
+			"companyLoginImage":"Background image",
+			"companyLoginImageHint":"JPG or PNG file, max. 256kb. Used as background image on the login page.",
 			"companyLogo":"Logoul companiei",
-			"companyLogoHint":"PNG file, max. 64kb. Shown on the login screen and start page.",
+			"companyLogoHint":"JPG or PNG file, max. 64kb. Shown on the login and start page.",
 			"companyLogoUrl":"Logoul companiei - legătură",
 			"companyLogoUrlDesc":"Orice URL valid",
 			"companyLogoUrlHint":"Link which is opened when clicking on the company logo.",

www/stores/storeLocal.js

@@ -9,6 +9,7 @@ const MyStoreLocal = {
 		appVersion:'',         // full application version (as in 1.2.0.3422)
 		companyColorHeader:'', // custom color on header
 		companyColorLogin:'',  // custom color on login screen
+		companyLoginImage:'',  // custom login background image
 		companyLogo:'',        // custom company logo
 		companyLogoUrl:'',     // custom company logo, href URL when clicked on
 		companyName:'',        // custom company name on login screen
@@ -50,6 +51,10 @@ const MyStoreLocal = {
 			state.companyColorLogin = payload;
 			set('companyColorLogin',payload);
 		},
+		companyLoginImage(state,payload) {
+			state.companyLoginImage = payload;
+			set('companyLoginImage',payload);
+		},
 		companyLogo(state,payload) {
 			state.companyLogo = payload;
 			set('companyLogo',payload);
@@ -125,10 +130,14 @@ const MyStoreLocal = {
 	},
 	getters:{
 		customLogo:(state) => !state.activated || state.companyLogo === ''
-			? 'images/logo.png' : `data:image/png;base64,${state.companyLogo}`,
+			? 'images/logo.png' : `data:image;base64,${state.companyLogo}`,
 
 		customLogoUrl:(state) => !state.activated || state.companyLogoUrl === ''
 			? 'https://rei3.de/' : state.companyLogoUrl,
+
+		loginBackground:(state) => state.companyLoginImage === ''
+			? `background-image:url('../images/backgrounds/${state.loginBackground}.webp');`
+			: `background-image:url(data:image;base64,${state.companyLoginImage});`,
 
 		// simple getters
 		activated:         (state) => state.activated,
@@ -137,13 +146,13 @@ const MyStoreLocal = {
 		appVersion:        (state) => state.appVersion,
 		companyColorHeader:(state) => state.companyColorHeader,
 		companyColorLogin: (state) => state.companyColorLogin,
+		companyLoginImage: (state) => state.companyLoginImage,
 		companyLogo:       (state) => state.companyLogo,
 		companyLogoUrl:    (state) => state.companyLogoUrl,
 		companyName:       (state) => state.companyName,
 		companyWelcome:    (state) => state.companyWelcome,
 		css:               (state) => state.css,
 		fieldIdMapOption:  (state) => state.fieldIdMapOption,
-		loginBackground:   (state) => state.loginBackground,
 		loginKeyAes:       (state) => state.loginKeyAes,
 		loginKeySalt:      (state) => state.loginKeySalt,
 		menuIdMapOpen:     (state) => state.menuIdMapOpen,