Improved self-managed install wizard layout

gui/app/pods/setup/template.hbs

@@ -1,17 +1 @@
-{{ui/ui-spacer size=700}}
+{{setup/documize-setup model=model save=(action "save")}}
-
-<div class="page-setup">
-	<div class="grid-container-5-5">
-		<div class="grid-cell-1">
-			<div>
-				<img src="/assets/img/setup/logo.png" alt="Documize" class="no-select no-outline margin-top-20">
-			</div>
-			<div class="margin-top-150">
-				<img src="/assets/img/setup/cogs.png" width="157" height="187" alt="Setup new database" class="no-select no-outline">
-			</div>
-		</div>
-		<div class="grid-cell-2 grid-cell-right">
-			{{setup/documize-setup model=model save=(action "save")}}
-		</div>
-	</div>
-</div>

gui/app/services/folder.js

@@ -10,8 +10,8 @@
 // https://documize.com
 
 import RSVP from 'rsvp';
-
 import { inject as service } from '@ember/service';
+import { isForbiddenError } from 'ember-ajax/errors';
 import BaseService from '../services/base';
 
 export default BaseService.extend({
@@ -110,6 +110,12 @@ export default BaseService.extend({
 			});
 
 			return data;
+		}).catch((error) => {
+			if (isForbiddenError(error)) {
+				this.get('localStorage').clearAll();
+				this.get('router').transitionTo('auth.login');
+			}
+			return error;
 		});
 	},
 

gui/app/styles/core/view/document/all.scss

@@ -3,6 +3,7 @@
 @import "meta.scss";
 @import "section.scss";
 @import "section-editor.scss";
+@import "setup.scss";
 @import "sidebar-toc.scss";
 @import "sidebar-attachment.scss";
 @import "view-activity.scss";

gui/app/styles/core/view/document/setup.scss

@@ -0,0 +1,4 @@
+.installer {
+	margin: 20px;
+	max-width: 300px;
+}

gui/app/templates/components/setup/documize-setup.hbs

@@ -1,22 +1,26 @@
-<div class="col-9">
+<div class="installer">
-	<h1>Let's setup Documize</h1>
+	<div>
-	<h3>Database: {{model.dbname}}</h3>
+		<img src="/assets/img/setup/cogs.png" width="157" height="187" alt="Setup new database" class="no-select no-outline">
+	</div>
+
 	{{ui/ui-spacer size=300}}
+	<h1 class="color-gray-800">Documize Setup</h1>
+	<h3 class="color-gray-700">Database is {{model.dbname}}</h3>
+	{{ui/ui-spacer size=300}}
+
 	<form {{action "save" on="submit"}}>
 		<div class="form-group">
-			<label>Team</label>
+			<label>Site name</label>
 			{{focus-input id="siteTitle" type="text" value=model.title class=(if hasEmptyTitleError "form-control is-invalid" "form-control")}}
-			<small class="form-text text-muted">What"s your tribe called?</small>
+			<small class="form-text text-muted">Usually your company name</small>
 		</div>
 		<div class="form-group">
 			<label for="adminFirstname">Firstname</label>
 			{{input id="adminFirstname" type="text" value=model.firstname class=(if hasEmptyFirstnameError "form-control is-invalid" "form-control")}}
-			<small class="form-text text-muted">What do people call you?</small>
 		</div>
 		<div class="form-group">
 			<label for="adminLastname">Lastname</label>
 			{{input id="adminLastname" type="text" value=model.lastname class=(if hasEmptyLastnameError "form-control is-invalid" "form-control")}}
-			<small class="form-text text-muted">How the government refers to you</small>
 		</div>
 		<div class="form-group">
 			<label for="adminEmail">Email</label>
@@ -30,5 +34,6 @@
 		</div>
 		{{ui/ui-button submit=true color=constants.Color.Green light=true label=buttonLabel onClick=(action "save")}}
 	</form>
+
 	{{ui/ui-spacer size=300}}
 </div>