[NEW] Custom login wallpapers

packages/rocketchat-assets/server/assets.js

@@ -28,6 +28,16 @@ const assets = {
 			order: 2
 		}
 	},
+	background: {
+		label: 'login background (svg, png, jpg)',
+		defaultUrl: undefined,
+		constraints: {
+			type: 'image',
+			extensions: ['svg', 'png', 'jpg', 'jpeg'],
+			width: undefined,
+			height: undefined
+		}
+	},
 	favicon_ico: {
 		label: 'favicon (ico)',
 		defaultUrl: 'favicon.ico',

packages/rocketchat-theme/client/imports/general/base_old.css

@@ -4626,6 +4626,11 @@ body:not(.is-cordova) {
 	align-items: center;
 	flex-flow: row nowrap;
 
+	background-position: center;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
+
 	& .wrapper {
 		position: relative;
 		z-index: 10;

packages/rocketchat-ui-login/client/login/layout.html

@@ -1,5 +1,5 @@
 <template name="loginLayout">
-	<section class="rc-old full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color" style="{{#with backgroundUrl}}background-image: url('{{.}}'){{/with}}">
 		<div class="wrapper">
 			{{> loginHeader }}
 			{{> Template.dynamic template=center}}

packages/rocketchat-ui-login/client/login/layout.js

@@ -1,3 +1,13 @@
 Template.loginLayout.onRendered(function() {
 	$('#initial-page-loading').remove();
 });
+
+Template.loginLayout.helpers({
+	backgroundUrl() {
+		const asset = RocketChat.settings.get('Assets_background');
+		const prefix = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
+		if (asset && (asset.url || asset.defaultUrl)) {
+			return `${ prefix }/${ asset.url || asset.defaultUrl }`;
+		}
+	}
+});

packages/rocketchat-ui-login/client/username/layout.html

@@ -1,5 +1,5 @@
 <template name="usernameLayout">
-	<section class="rc-old full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color" style="{{#with backgroundUrl}}background-image: url('{{.}}'){{/with}}">
 		<div class="wrapper">
 			{{> Template.dynamic template=render}}
 		</div>

packages/rocketchat-ui-login/client/username/layout.js

@@ -0,0 +1,9 @@
+Template.usernameLayout.helpers({
+	backgroundUrl() {
+		const asset = RocketChat.settings.get('Assets_background');
+		const prefix = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
+		if (asset && (asset.url || asset.defaultUrl)) {
+			return `${ prefix }/${ asset.url || asset.defaultUrl }`;
+		}
+	}
+});

packages/rocketchat-ui-login/client/username/username.html

@@ -1,5 +1,5 @@
 <template name="username">
-	<section class="rc-old full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color" style="{{#with backgroundUrl}}background-image: url('{{.}}'){{/with}}">
 		<div class="wrapper">
 			<form id="login-card" class="content-background-color color-primary-font-color" method='/'>
 				<header>

packages/rocketchat-ui-login/client/username/username.js

@@ -16,6 +16,14 @@ Template.username.onCreated(function() {
 Template.username.helpers({
 	username() {
 		return Template.instance().username.get();
+	},
+
+	backgroundUrl() {
+		const asset = RocketChat.settings.get('Assets_background');
+		const prefix = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
+		if (asset && (asset.url || asset.defaultUrl)) {
+			return `${ prefix }/${ asset.url || asset.defaultUrl }`;
+		}
 	}
 });
 

packages/rocketchat-ui-login/package.js

@@ -42,5 +42,6 @@ Package.onUse(function(api) {
 	api.addFiles('client/login/header.js', 'client');
 	api.addFiles('client/login/services.js', 'client');
 	api.addFiles('client/login/social.js', 'client');
+	api.addFiles('client/username/layout.js', 'client');
 	api.addFiles('client/username/username.js', 'client');
 });