Enable custom logo upload and rendering

gui/app/components/customize/general-settings.js

@@ -32,6 +32,51 @@ export default Component.extend(Notifier, {
 		this.set('maxTags', this.get('model.general.maxTags'));
 	},
 
+	didInsertElement() {
+		this._super(...arguments);
+
+		let self = this;
+		let url = this.get('appMeta.endpoint');
+		let orgId = this.get('appMeta.orgId');
+		let uploadUrl = `${url}/organization/${orgId}/logo`;
+
+		let dzone = new Dropzone("#upload-logo > div", {
+			headers: {
+				'Authorization': 'Bearer ' + self.get('session.authToken')
+			},
+			url: uploadUrl,
+			method: "post",
+			paramName: 'attachment',
+			clickable: true,
+			maxFilesize: 50,
+			parallelUploads: 1,
+			uploadMultiple: false,
+			addRemoveLinks: false,
+			autoProcessQueue: true,
+			createImageThumbnails: false,
+
+			init: function () {
+				this.on("success", function (/*file, response*/ ) {
+				});
+
+				this.on("queuecomplete", function () {
+					self.notifySuccess('Logo uploaded');
+				});
+
+				this.on("error", function (error, msg) {
+					self.notifyError(msg);
+					self.notifyError(error);
+				});
+			}
+		});
+
+		dzone.on("complete", function (file) {
+			dzone.removeFile(file);
+		});
+
+		this.set('drop', dzone);
+	},
+
 	actions: {
 		change() {
             const selectEl = this.$('#maxTags')[0];
@@ -63,7 +108,7 @@ export default Component.extend(Notifier, {
 
 			this.set('model.general.maxTags', this.get('maxTags'));
 
-			this.get('save')().then(() => {
+			this.get('onUpdate')().then(() => {
 				this.notifySuccess('Saved');
 				set(this, 'titleError', false);
 				set(this, 'messageError', false);
@@ -74,6 +119,11 @@ export default Component.extend(Notifier, {
 		onThemeChange(theme) {
 			this.get('appMeta').setTheme(theme);
 			this.set('model.general.theme', theme);
+		},
+
+		onDefaultLogo() {
+			this.get('onDefaultLogo')(this.get('appMeta.orgId'));
+			this.notifySuccess('Using default logo');
 		}
 	}
 });

gui/app/components/folder/settings-general.js

@@ -20,6 +20,7 @@ import Component from '@ember/component';
 export default Component.extend(AuthMixin, Notifier, {
 	router: service(),
 	spaceSvc: service('folder'),
+	iconSvc: service('icon'),
 	localStorage: service('localStorage'),
 	isSpaceAdmin: computed('permissions', function() {
 		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
@@ -40,7 +41,7 @@ export default Component.extend(AuthMixin, Notifier, {
 	init() {
 		this._super(...arguments);
 
-		this.populateIconList();
+		this.set('iconList', this.get('iconSvc').getSpaceIconList());
 	},
 
 	didReceiveAttrs() {
@@ -76,62 +77,6 @@ export default Component.extend(AuthMixin, Notifier, {
 		this.set('spaceIcon', icon);
 	},
 
-	populateIconList() {
-		let list = this.get('iconList');
-		let constants = this.get('constants');
-
-		list = A([]);
-
-		list.pushObject(constants.IconMeta.Star);
-		list.pushObject(constants.IconMeta.Support);
-		list.pushObject(constants.IconMeta.Message);
-		list.pushObject(constants.IconMeta.Apps);
-		list.pushObject(constants.IconMeta.Box);
-		list.pushObject(constants.IconMeta.Gift);
-		list.pushObject(constants.IconMeta.Design);
-		list.pushObject(constants.IconMeta.Bulb);
-		list.pushObject(constants.IconMeta.Metrics);
-		list.pushObject(constants.IconMeta.PieChart);
-		list.pushObject(constants.IconMeta.BarChart);
-		list.pushObject(constants.IconMeta.Finance);
-		list.pushObject(constants.IconMeta.Lab);
-		list.pushObject(constants.IconMeta.Code);
-		list.pushObject(constants.IconMeta.Help);
-		list.pushObject(constants.IconMeta.Manuals);
-		list.pushObject(constants.IconMeta.Flow);
-		list.pushObject(constants.IconMeta.Out);
-		list.pushObject(constants.IconMeta.In);
-		list.pushObject(constants.IconMeta.Partner);
-		list.pushObject(constants.IconMeta.Org);
-		list.pushObject(constants.IconMeta.Home);
-		list.pushObject(constants.IconMeta.Infinite);
-		list.pushObject(constants.IconMeta.Todo);
-		list.pushObject(constants.IconMeta.Procedure);
-		list.pushObject(constants.IconMeta.Outgoing);
-		list.pushObject(constants.IconMeta.Incoming);
-		list.pushObject(constants.IconMeta.Travel);
-		list.pushObject(constants.IconMeta.Winner);
-		list.pushObject(constants.IconMeta.Roadmap);
-		list.pushObject(constants.IconMeta.Money);
-		list.pushObject(constants.IconMeta.Security);
-		list.pushObject(constants.IconMeta.Tune);
-		list.pushObject(constants.IconMeta.Guide);
-		list.pushObject(constants.IconMeta.Smile);
-		list.pushObject(constants.IconMeta.Rocket);
-		list.pushObject(constants.IconMeta.Time);
-		list.pushObject(constants.IconMeta.Cup);
-		list.pushObject(constants.IconMeta.Marketing);
-		list.pushObject(constants.IconMeta.Announce);
-		list.pushObject(constants.IconMeta.Devops);
-		list.pushObject(constants.IconMeta.World);
-		list.pushObject(constants.IconMeta.Plan);
-		list.pushObject(constants.IconMeta.Components);
-		list.pushObject(constants.IconMeta.People);
-		list.pushObject(constants.IconMeta.Checklist);
-
-		this.set('iconList', list);
-	},
-
 	actions: {
 		onSetSpaceType(t) {
 			this.set('spaceType', t);

gui/app/components/layout/logo-heading.js

@@ -9,9 +9,20 @@
 //
 // https://documize.com
 
+import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 
 export default Component.extend({
+	appMeta: service(),
 	icon: null,
-	meta: null
+	meta: null,
+	logo: false,
+
+	didReceiveAttrs() {
+		this._super(...arguments);
+		if (this.get('logo')) {
+			let cb = + new Date();
+			this.set('cacheBuster', cb);
+		}
+	}
 });

gui/app/helpers/random-id.js

@@ -0,0 +1,19 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import stringUtil from '../utils/string';
+import { helper } from '@ember/component/helper';
+
+// Usage: {{random-id}}
+export default helper(function() {
+    return stringUtil.makeId(10);
+});
+

gui/app/pods/auth/forgot/template.hbs

@@ -1,8 +1,9 @@
 <div class="auth-center">
 	<div class="auth-box">
 		<div class="logo">
-			<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid">
-			<div class="url">{{appMeta.appHost}}</div>
+			<img src="{{appMeta.endpoint}}/public/logo?cb={{random-id}}"
+				title="Documize" alt="Documize" class="img-fluid">
+			<div class="url">{{appMeta.title}} ({{appMeta.appHost}})</div>
 		</div>
 		<div class="login-form">
 			{{user/forgot-password forgot=(action "forgot")}}

gui/app/pods/auth/login/template.hbs

@@ -2,8 +2,9 @@
 	{{#if model.showLogin}}
 		<div class="auth-box">
 			<div class="logo">
-				<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid">
-				<div class="url">{{appMeta.appHost}}</div>
+				<img src="{{appMeta.endpoint}}/public/logo?cb={{random-id}}"
+					title="Documize" alt="Documize" class="img-fluid">
+				<div class="url">{{appMeta.title}} ({{appMeta.appHost}})</div>
 			</div>
 			<form {{action "login" on="submit"}}>
 				<div class="form-group">

gui/app/pods/auth/reset/template.hbs

@@ -1,8 +1,9 @@
 <div class="auth-center">
 	<div class="auth-box">
 		<div class="logo">
-			<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid">
-			<div class="url">{{appMeta.appHost}}</div>
+			<img src="{{appMeta.endpoint}}/public/logo?cb={{random-id}}"
+				title="Documize" alt="Documize" class="img-fluid">
+			<div class="url">{{appMeta.title}} ({{appMeta.appHost}})</div>
 		</div>
 		{{user/password-reset reset=(action "reset")}}
 	</div>

gui/app/pods/customize/general/controller.js

@@ -16,9 +16,13 @@ export default Controller.extend({
 	orgService: service('organization'),
 
 	actions: {
-		save() {
+		onUpdate() {
 			return this.get('orgService').save(this.model.general).then(() => {
 			});
+		},
+
+		onDefaultLogo(orgId) {
+			return this.get('orgService').useDefaultLogo(orgId);
 		}
 	}
 });

gui/app/pods/customize/general/template.hbs

@@ -3,4 +3,6 @@
 	desc="Options to help you customize Documize"
 	icon=constants.Icon.Settings}}
 
-{{customize/general-settings model=model save=(action "save")}}
+{{customize/general-settings model=model
+	onUpdate=(action "onUpdate")
+	onDefaultLogo=(action "onDefaultLogo")}}

gui/app/pods/folder/index/template.hbs

@@ -20,10 +20,10 @@
 {{#layout/master-content}}
 	<div class="grid-container-6-4">
 		<div class="grid-cell-1">
-		{{layout/logo-heading
-			title=model.folder.name
-			desc=model.folder.desc
-			meta=model.folder.icon}}
+			{{layout/logo-heading
+				title=model.folder.name
+				desc=model.folder.desc
+				meta=model.folder.icon}}
 		</div>
 		<div class="grid-cell-2 grid-cell-right">
 			{{folder/space-toolbar

gui/app/pods/folders/controller.js

@@ -19,19 +19,20 @@ import Controller from '@ember/controller';
 export default Controller.extend(AuthMixin, Modals, {
 	appMeta: service(),
 	folderService: service('folder'),
-
-	spaceName: '',
 	copyTemplate: true,
 	copyPermission: true,
 	copyDocument: false,
 	hasClone: notEmpty('clonedSpace.id'),
 	clonedSpace: null,
-
 	selectedView: 'all',
 	selectedSpaces: null,
 	publicSpaces: null,
 	protectedSpaces: null,
 	personalSpaces: null,
+	spaceIcon: '',
+	spaceLabel: '',
+	spaceDesc: '',
+	spaceName: '',
 
 	actions: {
 		onShowModal() {
@@ -42,10 +43,22 @@ export default Controller.extend(AuthMixin, Modals, {
 			this.set('clonedSpace', sp)
 		},
 
+
+		onSetIcon(icon) {
+			this.set('spaceIcon', icon);
+		},
+
+		onSetLabel(id) {
+			this.set('spaceLabel', id);
+		},
+
 		onAddSpace(e) {
 			e.preventDefault();
 
 			let spaceName = this.get('spaceName');
+			let spaceDesc = this.get('spaceDesc');
+			let spaceIcon = this.get('spaceIcon');
+			let spaceLabel = this.get('spaceLabel');
 			let clonedId = this.get('clonedSpace.id');
 
 			if (is.empty(spaceName)) {
@@ -55,6 +68,9 @@ export default Controller.extend(AuthMixin, Modals, {
 
 			let payload = {
 				name: spaceName,
+				desc: spaceDesc,
+				icon: spaceIcon,
+				labelId: spaceLabel,
 				cloneId: clonedId,
 				copyTemplate: this.get('copyTemplate'),
 				copyPermission: this.get('copyPermission'),
@@ -62,6 +78,9 @@ export default Controller.extend(AuthMixin, Modals, {
 			}
 
 			this.set('spaceName', '');
+			this.set('spaceDesc', '');
+			this.set('spaceIcon', '');
+			this.set('spaceLabel', '');
 			this.set('clonedSpace', null);
 			$("#new-space-name").removeClass("is-invalid");
 

gui/app/pods/folders/route.js

@@ -17,6 +17,7 @@ import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-rout
 export default Route.extend(AuthenticatedRouteMixin, {
 	appMeta: service(),
 	folderService: service('folder'),
+	iconSvc: service('icon'),
 	localStorage: service(),
 	labelSvc: service('label'),
 
@@ -66,6 +67,7 @@ export default Route.extend(AuthenticatedRouteMixin, {
 		controller.set('publicSpaces', publicSpaces);
 		controller.set('protectedSpaces', protectedSpaces);
 		controller.set('personalSpaces', personalSpaces);
+		controller.set('iconList', this.get('iconSvc').getSpaceIconList());
 	},
 
 	activate() {

gui/app/pods/folders/template.hbs

@@ -32,11 +32,13 @@
 		{{#if labels}}
 			<div class="list">
 				{{#each labels as |label|}}
-					<div class="item {{if (eq selectedView label.id) "selected"}}" {{action "onSelect" label.id}}>
-						<i class={{concat "dicon " constants.Icon.Checkbox}}
-							style={{label.bgfgColor}}/>
-						<div class="name">{{label.name}} ({{label.count}})</div>
-					</div>
+					{{#if (gt label.count 0)}}
+						<div class="item {{if (eq selectedView label.id) "selected"}}" {{action "onSelect" label.id}}>
+							<i class={{concat "dicon " constants.Icon.Checkbox}}
+								style={{label.bgfgColor}}/>
+							<div class="name">{{label.name}} ({{label.count}})</div>
+						</div>
+					{{/if}}
 				{{/each}}
 			</div>
 		{{else}}
@@ -48,8 +50,10 @@
 {{#layout/master-content}}
 	<div class="grid-container-8-2">
 		<div class="grid-cell-1">
-			{{layout/page-heading title=appMeta.title}}
-			{{layout/page-desc desc=appMeta.message}}
+			{{layout/logo-heading
+				title=appMeta.title
+				desc=appMeta.message
+				logo=true}}
 		</div>
 		<div class="grid-cell-2 grid-cell-right">
 			{{#if (or session.isEditor session.isAdmin)}}
@@ -68,16 +72,49 @@
 	{{spaces/space-list spaces=selectedSpaces labels=labels}}
 
 	<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
-		<div class="modal-dialog" role="document">
+		<div class="modal-dialog modal-lg" role="document">
 			<div class="modal-content">
-				<div class="modal-header">Add Space</div>
+				<div class="modal-header">New Space</div>
 				<div class="modal-body">
 					<form onsubmit={{action "onAddSpace"}}>
 						<div class="form-group">
-							<label for="new-space-name">Space Name</label>
+							<label for="new-space-name">Name</label>
 							{{input type="text" id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
 							<small class="form-text text-muted">Characters and numbers only</small>
 						</div>
+
+						<div class="form-group">
+							<label>Description</label>
+							{{focus-input id="space-desc" type="text" value=spaceDesc class="form-control" placeholder="Space description" autocomplete="off"}}
+						</div>
+
+						<div class="form-group">
+							<label>Icon</label>
+							<div class="ui-icon-picker">
+								<ul class="list">
+									{{#each iconList as |icon|}}
+										<li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}}>
+											{{ui/ui-icon-meta icon=icon}}
+										</li>
+									{{/each}}
+								</ul>
+							</div>
+						</div>
+
+						<div class="form-group">
+							<label>Label</label>
+							<ul class="space-label-picker">
+								<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}}>None</li>
+								{{#each labels as |label|}}
+									<li class="label {{if (eq spaceLabel label.id) "selected"}}"
+										style={{label.bgColor}}
+										{{action "onSetLabel" label.id}} title={{label.name}}>
+										{{label.name}}
+									</li>
+								{{/each}}
+							</ul>
+						</div>
+
 						<div class="form-group">
 							<label for="clone-space-dropdown">Clone Space</label>
 							{{ui/ui-select id="clone-space-dropdown" content=model prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}

gui/app/services/icon.js

@@ -0,0 +1,69 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { A } from '@ember/array';
+import Service from '@ember/service';
+
+export default Service.extend({
+	getSpaceIconList() {
+		let cs = this.get('constants');
+
+		let list = A([]);
+		list.pushObject(cs.IconMeta.Star);
+		list.pushObject(cs.IconMeta.Support);
+		list.pushObject(cs.IconMeta.Message);
+		list.pushObject(cs.IconMeta.Apps);
+		list.pushObject(cs.IconMeta.Box);
+		list.pushObject(cs.IconMeta.Gift);
+		list.pushObject(cs.IconMeta.Design);
+		list.pushObject(cs.IconMeta.Bulb);
+		list.pushObject(cs.IconMeta.Metrics);
+		list.pushObject(cs.IconMeta.PieChart);
+		list.pushObject(cs.IconMeta.BarChart);
+		list.pushObject(cs.IconMeta.Finance);
+		list.pushObject(cs.IconMeta.Lab);
+		list.pushObject(cs.IconMeta.Code);
+		list.pushObject(cs.IconMeta.Help);
+		list.pushObject(cs.IconMeta.Manuals);
+		list.pushObject(cs.IconMeta.Flow);
+		list.pushObject(cs.IconMeta.Out);
+		list.pushObject(cs.IconMeta.In);
+		list.pushObject(cs.IconMeta.Partner);
+		list.pushObject(cs.IconMeta.Org);
+		list.pushObject(cs.IconMeta.Home);
+		list.pushObject(cs.IconMeta.Infinite);
+		list.pushObject(cs.IconMeta.Todo);
+		list.pushObject(cs.IconMeta.Procedure);
+		list.pushObject(cs.IconMeta.Outgoing);
+		list.pushObject(cs.IconMeta.Incoming);
+		list.pushObject(cs.IconMeta.Travel);
+		list.pushObject(cs.IconMeta.Winner);
+		list.pushObject(cs.IconMeta.Roadmap);
+		list.pushObject(cs.IconMeta.Money);
+		list.pushObject(cs.IconMeta.Security);
+		list.pushObject(cs.IconMeta.Tune);
+		list.pushObject(cs.IconMeta.Guide);
+		list.pushObject(cs.IconMeta.Smile);
+		list.pushObject(cs.IconMeta.Rocket);
+		list.pushObject(cs.IconMeta.Time);
+		list.pushObject(cs.IconMeta.Cup);
+		list.pushObject(cs.IconMeta.Marketing);
+		list.pushObject(cs.IconMeta.Announce);
+		list.pushObject(cs.IconMeta.Devops);
+		list.pushObject(cs.IconMeta.World);
+		list.pushObject(cs.IconMeta.Plan);
+		list.pushObject(cs.IconMeta.Components);
+		list.pushObject(cs.IconMeta.People);
+		list.pushObject(cs.IconMeta.Checklist);
+
+		return list;
+	}
+});

gui/app/services/organization.js

@@ -72,5 +72,12 @@ export default Service.extend({
 			method: 'POST',
 			data: JSON.stringify(config)
 		});
+	},
+
+	useDefaultLogo(orgId) {
+		return this.get('ajax').request(`organization/${orgId}/logo`, {
+			method: 'POST',
+			data: '',
+		});
 	}
 });

gui/app/styles/core/layout/headings.scss

@@ -15,7 +15,7 @@
 	display: flex;
 	flex-direction: row;
 
-	> .icon, > .meta-icon {
+	> .icon, > .meta-icon, > .meta-logo {
 		align-self: center;
 		margin-right: 25px;
 

gui/app/styles/core/view/customize.scss

@@ -339,4 +339,10 @@
 			color: $color-white;
 		}
 	}
+
+	> #upload-logo {
+		.dz-preview, .dz-processing, .dz-file-preview {
+			display: none !important;
+		}
+	}
 }

gui/app/styles/core/view/space.scss

@@ -254,7 +254,7 @@
 		@extend .text-truncate;
 		display: inline-block;
 		width: 200px;
-		margin: 0 20px 20px 0;
+		margin: 0 10px 10px 0;
 		padding: 0.5rem 0.75rem;
 		font-size: 1rem;
 		font-weight: 500;

gui/app/styles/core/view/spaces.scss

@@ -22,13 +22,13 @@
 					justify-self: self-start;
 
 					> .name {
-						font-size: 1.3rem;
+						font-size: 1.4rem;
 						font-weight: 700;
 						color: map-get($gray-shades, 800);
 
 						> .icon {
 							color: map-get($gray-shades, 700);
-							font-size: 20px;
+							font-size: 26px;
 							vertical-align: middle;
 							display: inline-block;
 							margin-right: 10px;

gui/app/templates/components/customize/general-settings.hbs

@@ -1,47 +1,55 @@
 <div class="view-customize">
-	<form>
-		<div class="form-group">
-			<label for="siteTitle">Site Name</label>
-			{{focus-input id="siteTitle" type="text" value=model.general.title class=(if hasTitleInputError "form-control is-invalid" "form-control")}}
-			<small class="form-text text-muted">Provide short title for this Documize instance</small>
-		</div>
-		<div class="form-group">
-			<label id="siteMessage">Site Message</label>
-			{{textarea id="siteMessage" rows="3" value=model.general.message class=(if hasMessageInputError "form-control is-invalid" "form-control")}}
-			<small class="form-text text-muted">Provide short message explaining this Documize instance</small>
-		</div>
-		<div class="form-group">
-			<label>Site Theme</label>
-			{{ui/theme-picker onChange=(action "onThemeChange")}}
-			<small class="form-text text-muted">Users can set their own theme under Profile</small>
-		</div>
-		<div class="form-group">
-			<label>Public Spaces Viewable By Anonymous Users</label>
-			{{x-toggle value=model.general.allowAnonymousAccess size="medium" theme="light" onToggle=(action (mut model.general.allowAnonymousAccess))}}
-		</div>
-		<div class="form-group">
-			<label for="conversionEndpoint">Conversion Service URL</label>
-			{{input id="conversionEndpoint" type="text" value=model.general.conversionEndpoint class=(if hasConversionEndpointInputError "form-control is-invalid" "form-control")}}
-			<small class="form-text text-muted">
-				Endpoint for handling import/export (e.g. https://api.documize.com,
-				<a href="https://docs.documize.com/s/WNEpptWJ9AABRnha/administration-guides/d/WO0pt_MXigAB6sJ7/general-options">view documentation</a>)
-			</small>
-		</div>
-		<div class="form-group">
-			<label for="maxTags">Maximum Tags Per Document</label>
-			<select class="form-control" id="maxTags" {{action "change" on="change"}}>
-				<option selected={{is-equal 3 maxTags}} value="3">3</option>
-				<option selected={{is-equal 4 maxTags}} value="4">4</option>
-				<option selected={{is-equal 5 maxTags}} value="5">5</option>
-				<option selected={{is-equal 6 maxTags}} value="6">6</option>
-				<option selected={{is-equal 7 maxTags}} value="7">7</option>
-				<option selected={{is-equal 8 maxTags}} value="8">8</option>
-				<option selected={{is-equal 9 maxTags}} value="9">9</option>
-				<option selected={{is-equal 10 maxTags}} value="10">10</option>
-			</select>
-			<small class="form-text text-muted">How many tags can be assigned to a document (between 3 and 10 tags)</small>
+	<div class="form-group">
+		<label for="siteTitle">Site Name</label>
+		{{focus-input id="siteTitle" type="text" value=model.general.title class=(if hasTitleInputError "form-control is-invalid" "form-control")}}
+		<small class="form-text text-muted">Provide short title for this Documize instance</small>
+	</div>
+	<div class="form-group">
+		<label id="siteMessage">Site Message</label>
+		{{textarea id="siteMessage" rows="3" value=model.general.message class=(if hasMessageInputError "form-control is-invalid" "form-control")}}
+		<small class="form-text text-muted">Provide short message explaining this Documize instance</small>
+	</div>
+	<div class="form-group">
+		<label>Site Theme</label>
+		{{ui/theme-picker onChange=(action "onThemeChange")}}
+	</div>
+	<div class="form-group">
+		<label>Site Logo</label>
+		<div>
+			{{ui/ui-button light=true color=constants.Color.Gray label="Use Default" onClick=(action "onDefaultLogo")}}
+			{{ui/ui-button-gap}}
+			{{ui/ui-button light=true color=constants.Color.Yellow label="Upload Custom" id="upload-logo"}}
 		</div>
+		<small class="form-text text-muted">You can choose to upload a small logo (e.g. 64px x 64px)</small>
+	</div>
 
-		{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Settings label=constants.Label.Save onClick=(action "save")}}
-	</form>
+	<div class="form-group">
+		<label>Public Spaces Viewable By Anonymous Users</label>
+		{{x-toggle value=model.general.allowAnonymousAccess size="medium" theme="light" onToggle=(action (mut model.general.allowAnonymousAccess))}}
+		<small class="form-text text-muted">Share content with unauthenticated site visitors</small>
+	</div>
+	<div class="form-group">
+		<label for="conversionEndpoint">Conversion Service URL</label>
+		{{input id="conversionEndpoint" type="text" value=model.general.conversionEndpoint class=(if hasConversionEndpointInputError "form-control is-invalid" "form-control")}}
+		<small class="form-text text-muted">
+			Endpoint for handling import/export (e.g. https://api.documize.com,
+			<a href="https://docs.documize.com/s/WNEpptWJ9AABRnha/administration-guides/d/WO0pt_MXigAB6sJ7/general-options">read the documentation</a>)
+		</small>
+	</div>
+	<div class="form-group">
+		<label for="maxTags">Maximum Tags Per Document</label>
+		<select class="form-control" id="maxTags" {{action "change" on="change"}}>
+			<option selected={{is-equal 3 maxTags}} value="3">3</option>
+			<option selected={{is-equal 4 maxTags}} value="4">4</option>
+			<option selected={{is-equal 5 maxTags}} value="5">5</option>
+			<option selected={{is-equal 6 maxTags}} value="6">6</option>
+			<option selected={{is-equal 7 maxTags}} value="7">7</option>
+			<option selected={{is-equal 8 maxTags}} value="8">8</option>
+			<option selected={{is-equal 9 maxTags}} value="9">9</option>
+			<option selected={{is-equal 10 maxTags}} value="10">10</option>
+		</select>
+		<small class="form-text text-muted">How many tags can be assigned to a document (between 3 and 10 tags)</small>
+	</div>
+
+	{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Settings label=constants.Label.Save onClick=(action "save")}}
 </div>

gui/app/templates/components/customize/space-labels.hbs

@@ -10,7 +10,7 @@
 
 	<ul class="space-labels">
 		{{#each labels as |label|}}
-			<li class="label" style={{concat "background-color:" label.color ";"}}>
+			<li class="label" style={{label.bgColor}}>
 				<div class="grid-container-6-4">
 					<div class="grid-cell-1 grid-cell-middle">
 						{{label.name}}

gui/app/templates/components/folder/settings-general.hbs

@@ -38,7 +38,7 @@
 			<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}}>None</li>
 			{{#each labels as |label|}}
 				<li class="label {{if (eq spaceLabel label.id) "selected"}}"
-					style={{concat "background-color:" label.color ";"}}
+					style={{label.bgColor}}
 					{{action "onSetLabel" label.id}} title={{label.name}}>
 					{{label.name}}
 				</li>

gui/app/templates/components/layout/logo-heading.hbs

@@ -7,6 +7,11 @@
 		<div class="meta-icon">
 			{{ui/ui-icon-meta icon=meta}}
 		</div>
+	{{else if logo}}
+		<div class="meta-logo">
+			<img src="{{appMeta.endpoint}}/public/logo?cb={{cacheBuster}}"
+				style="max-width: 200px; max-height: 100px;">
+		</div>
 	{{/if}}
 	<div class="text">
 		{{layout/page-heading title=title}}