wip

assets/javascripts/discourse/components/wizard-custom-field.js.es6

@@ -65,4 +65,14 @@ export default Ember.Component.extend({
     
     return options;
   },
+  
+  actions: {
+    imageUploadDone(upload) {
+      this.set("field.image", upload.url);
+    },
+    
+    imageUploadDeleted() {
+      this.set("field.image", null);
+    }
+  }
 });

assets/javascripts/discourse/components/wizard-custom-step.js.es6

@@ -67,4 +67,14 @@ export default Ember.Component.extend({
 
     return fields;
   },
+  
+  actions: {
+    bannerUploadDone(upload) {
+      this.set("step.banner", upload.url);
+    },
+    
+    bannerUploadDeleted() {
+      this.set("step.banner", null);
+    }
+  }
 });

assets/javascripts/discourse/components/wizard-links.js.es6

@@ -1,15 +1,16 @@
 import { default as computed, on, observes } from 'discourse-common/utils/decorators';
 import { notEmpty } from "@ember/object/computed";
+import { scheduleOnce } from "@ember/runloop";
 
 export default Ember.Component.extend({
-  classNames: 'wizard-links',
+  classNameBindings: [':wizard-links', 'type'],
   items: Ember.A(),
   anyLinks: notEmpty('links'),
 
   @on('didInsertElement')
   @observes('links.@each')
   didInsertElement() {
-    Ember.run.scheduleOnce('afterRender', () => (this.applySortable()));
+    scheduleOnce('afterRender', () => (this.applySortable()));
   },
 
   applySortable() {
@@ -25,7 +26,7 @@ export default Ember.Component.extend({
     const item = items.findBy('id', itemId);
     items.removeObject(item);
     items.insertAt(newIndex, item);
-    Ember.run.scheduleOnce('afterRender', this, () => this.applySortable());
+    scheduleOnce('afterRender', this, () => this.applySortable());
   },
 
   @computed('type')

assets/javascripts/discourse/components/wizard-text-editor.js.es6

@@ -1,8 +1,24 @@
-import { default as discourseComputed } from 'discourse-common/utils/decorators';
+import {
+  default as discourseComputed,
+  on
+} from 'discourse-common/utils/decorators';
 import { profileFields } from '../lib/custom-wizard';
+import { scheduleOnce } from "@ember/runloop";
 
 export default Ember.Component.extend({
   classNames: 'wizard-text-editor',
+  barEnabled: true,
+  previewEnabled: true,
+  fieldsEnabled: true,
+  
+  didReceiveAttrs() {
+    this._super(...arguments);
+    if (!this.barEnabled) {
+      scheduleOnce('afterRender', () => {
+        $(this.element).find('.d-editor-button-bar').addClass('hidden');
+      });
+    }
+  },
   
   @discourseComputed('forcePreview')
   previewLabel(forcePreview) {

assets/javascripts/discourse/controllers/admin-wizard.js.es6

@@ -1,10 +1,22 @@
-import { default as computed } from 'discourse-common/utils/decorators';
+import { default as computed, observes } from 'discourse-common/utils/decorators';
+import { notEmpty } from "@ember/object/computed";
 import showModal from 'discourse/lib/show-modal';
+import { generateId } from '../lib/custom-wizard';
+import { dasherize } from "@ember/string";
 
 export default Ember.Controller.extend({
-  @computed('model.id', 'model.name')
+  hasName: notEmpty('model.name'),
+  
+  @computed('model.id')
   wizardUrl(wizardId) {
-    return window.location.origin + '/w/' + Ember.String.dasherize(wizardId);
+    return window.location.origin + '/w/' + dasherize(wizardId);
+  },
+  
+  @observes('model.name')
+  setId() {
+    if (!this.model.existingId) {
+      this.set('model.id', generateId(this.model.name));
+    }
   },
 
   @computed('model.after_time_scheduled')

assets/javascripts/discourse/controllers/next-session-scheduled.js.es6

@@ -1,4 +1,5 @@
 import { default as computed } from 'discourse-common/utils/decorators';
+import { scheduleOnce } from "@ember/runloop";
 
 export default Ember.Controller.extend({
   title: 'admin.wizard.after_time_modal.title',
@@ -14,7 +15,7 @@ export default Ember.Controller.extend({
 
     this.setProperties({ date, time });
 
-    Ember.run.scheduleOnce('afterRender', this, () => {
+    scheduleOnce('afterRender', this, () => {
       const $timePicker = $("#time-picker");
       $timePicker.timepicker({ timeFormat: 'H:i' });
       $timePicker.timepicker('setTime', time);

assets/javascripts/discourse/lib/custom-wizard.js.es6

@@ -121,6 +121,12 @@ function newPair(options = {}) {
   return Ember.Object.create(params);
 }
 
+function generateId(name) {
+  return name.replace(/[^\w ]/g, '')
+    .replace(/ /g,"_")
+    .toLowerCase();
+}
+
 export {
   generateSelectKitContent,
   profileFields,
@@ -130,5 +136,6 @@ export {
   defaultSelectionType,
   connectors,
   newInput,
-  newPair
+  newPair,
+  generateId
 };

assets/javascripts/discourse/templates/admin-wizard.hbs

@@ -1,30 +1,19 @@
 <div class="admin-wizard settings">
   
-  <div class="wizard-header">
-    <span>{{model.name}}</span>
+  {{#if hasName}}
+    <div class="wizard-header">
+      <span>{{model.name}}</span>
       
-    <div class="wizard-url">
-      <a href="{{wizardUrl}}" target="_blank">{{wizardUrl}}</a>
+      <div class="wizard-url">
+        <a href="{{wizardUrl}}" target="_blank">{{wizardUrl}}</a>
+      </div>
     </div>
-  </div>
+  {{/if}}
   
   <div class="wizard-basic-details">
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.id'}}</h3>
-      </div>
-      <div class="setting-value">
-        {{input
-          name="name"
-          value=model.id
-          placeholderKey="admin.wizard.id_placeholder"
-          disabled=model.existingId}}
-      </div>
-    </div>
-
-    <div class="setting">
-      <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.name'}}</h3>
+        <label>{{i18n 'admin.wizard.name'}}</label>
       </div>
       <div class="setting-value">
         {{input
@@ -42,7 +31,7 @@
   <div class="wizard-settings">    
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.background'}}</h3>
+        <label>{{i18n 'admin.wizard.background'}}</label>
       </div>
       <div class="setting-value">
         {{input
@@ -54,7 +43,7 @@
     
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.save_submissions'}}</h3>
+        <label>{{i18n 'admin.wizard.save_submissions'}}</label>
       </div>
       <div class="setting-value">
         {{input type='checkbox' checked=model.save_submissions}}
@@ -64,7 +53,7 @@
 
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.multiple_submissions'}}</h3>
+        <label>{{i18n 'admin.wizard.multiple_submissions'}}</label>
       </div>
       <div class="setting-value">
         {{input type='checkbox' checked=model.multiple_submissions}}
@@ -74,7 +63,7 @@
 
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.required'}}</h3>
+        <label>{{i18n 'admin.wizard.required'}}</label>
       </div>
       <div class="setting-value">
         {{input type='checkbox' checked=model.required}}
@@ -84,7 +73,7 @@
 
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.after_signup'}}</h3>
+        <label>{{i18n 'admin.wizard.after_signup'}}</label>
       </div>
       <div class="setting-value">
         {{input type='checkbox' checked=model.after_signup}}
@@ -94,7 +83,7 @@
 
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.after_time'}}</h3>
+        <label>{{i18n 'admin.wizard.after_time'}}</label>
       </div>
       <div class="setting-value">
         {{input type='checkbox' checked=model.after_time}}
@@ -109,7 +98,7 @@
 
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.prompt_completion'}}</h3>
+        <label>{{i18n 'admin.wizard.prompt_completion'}}</label>
       </div>
       <div class="setting-value">
         {{input type='checkbox' checked=model.prompt_completion}}
@@ -119,7 +108,7 @@
 
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.min_trust'}}</h3>
+        <label>{{i18n 'admin.wizard.min_trust'}}</label>
       </div>
       <div class="setting-value">
         <span>{{i18n 'admin.wizard.min_trust_label'}}</span>
@@ -129,7 +118,7 @@
 
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.theme_id'}}</h3>
+        <label>{{i18n 'admin.wizard.theme_id'}}</label>
       </div>
       <div class="setting-value">
         {{combo-box
@@ -145,7 +134,7 @@
 
     <div class="setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.restart_on_revisit'}}</h3>
+        <label>{{i18n 'admin.wizard.restart_on_revisit'}}</label>
       </div>
       <div class="setting-value">
         {{input type='checkbox' checked=model.restart_on_revisit}}
@@ -155,7 +144,7 @@
     
     <div class="setting full field-mapper-setting">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.group'}}</h3>
+        <label>{{i18n 'admin.wizard.group'}}</label>
       </div>
       <div class="setting-value">
         {{wizard-field-mapper

assets/javascripts/discourse/templates/components/wizard-custom-action.hbs

@@ -1,19 +1,6 @@
 <div class="setting">
   <div class="setting-label">
-    <h3>{{i18n "admin.wizard.id"}}</h3>
-  </div>
-  
-  <div class="setting-value">
-    {{input
-      value=action.id
-      placeholderKey='admin.wizard.id_placeholder'
-      disabled=disableId}}
-  </div>
-</div>
-
-<div class="setting">
-  <div class="setting-label">
-    <h3>{{i18n "admin.wizard.type"}}</h3>
+    <label>{{i18n "admin.wizard.type"}}</label>
   </div>
   
   <div class="setting-value">
@@ -30,7 +17,7 @@
 {{#if basicTopicFields}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.title"}}</h3>
+      <label>{{i18n "admin.wizard.action.title"}}</label>
     </div>
     
     <div class="setting-value">
@@ -56,7 +43,7 @@
 
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.post"}}</h3>
+      <label>{{i18n "admin.wizard.action.post"}}</label>
     </div>
     
     <div class="setting-value">
@@ -80,13 +67,12 @@
   {{#if action.post_builder}}
     <div class="setting full">
       <div class="setting-label">
-        <h3>{{i18n 'admin.wizard.action.post_builder.label'}}</h3>
+        <label>{{i18n 'admin.wizard.action.post_builder.label'}}</label>
       </div>
       
       <div class="setting-value editor">
         {{wizard-text-editor
           value=action.post_template
-          fieldsEnabled=true
           wizardFields=wizardFields}}
       </div>
     </div>
@@ -96,7 +82,7 @@
 {{#if publicTopicFields}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.create_topic.category"}}</h3>
+      <label>{{i18n "admin.wizard.action.create_topic.category"}}</label>
     </div>
     
     <div class="setting-value">
@@ -140,7 +126,7 @@
   
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.create_topic.tags"}}</h3>
+      <label>{{i18n "admin.wizard.action.create_topic.tags"}}</label>
     </div>
     
     <div class="setting-value">
@@ -174,7 +160,7 @@
 {{#if newTopicFields}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.skip_redirect.label"}}</h3>
+      <label>{{i18n "admin.wizard.action.skip_redirect.label"}}</label>
     </div>
     
     <div class="setting-value">
@@ -190,7 +176,7 @@
 {{#if createTopic}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.action.add_fields'}}</h3>
+      <label>{{i18n 'admin.wizard.action.add_fields'}}</label>
     </div>
     
     <div class="setting-value">
@@ -207,7 +193,7 @@
 {{#if sendMessage}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.required'}}</h3>
+      <label>{{i18n 'admin.wizard.required'}}</label>
     </div>
     
     <div class="setting-value">
@@ -224,7 +210,7 @@
   
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.send_message.recipient"}}</h3>
+      <label>{{i18n "admin.wizard.action.send_message.recipient"}}</label>
     </div>
     
     <div class="setting-value">
@@ -238,7 +224,7 @@
 
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.action.add_fields'}}</h3>
+      <label>{{i18n 'admin.wizard.action.add_fields'}}</label>
     </div>
     
     {{wizard-field-mapper
@@ -250,7 +236,7 @@
 {{#if updateProfile}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.action.add_fields'}}</h3>
+      <label>{{i18n 'admin.wizard.action.add_fields'}}</label>
     </div>
     
     {{wizard-field-mapper 
@@ -266,7 +252,7 @@
 {{#if sendToApi}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.send_to_api.api"}}</h3>
+      <label>{{i18n "admin.wizard.action.send_to_api.api"}}</label>
     </div>
     
     <div class="setting-value">
@@ -283,7 +269,7 @@
 
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.send_to_api.endpoint"}}</h3>
+      <label>{{i18n "admin.wizard.action.send_to_api.endpoint"}}</label>
     </div>
     
     <div class="setting-value">
@@ -298,16 +284,18 @@
     </div>
   </div>
 
-  <div class="setting api-body">
+  <div class="setting full">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.send_to_api.body"}}</h3>
+      <label>{{i18n "admin.wizard.action.send_to_api.body"}}</label>
     </div>
     
     <div class="setting-value">
       {{wizard-text-editor
         value=action.api_body
-        fieldsEnabled=true
-        wizardFields=wizardFields}}
+        previewEnabled=false
+        barEnabled=false
+        wizardFields=wizardFields
+        placeholder='admin.wizard.action.send_to_api.body_placeholder'}}
     </div>
   </div>
 {{/if}}
@@ -315,7 +303,7 @@
 {{#if addToGroup}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.group"}}</h3>
+      <label>{{i18n "admin.wizard.group"}}</label>
     </div>
     
     <div class="setting-value">
@@ -337,7 +325,7 @@
 {{#if routeTo}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.route_to.url"}}</h3>
+      <label>{{i18n "admin.wizard.action.route_to.url"}}</label>
     </div>
     
     <div class="setting-value">
@@ -347,7 +335,7 @@
   
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.route_to.code"}}</h3>
+      <label>{{i18n "admin.wizard.action.route_to.code"}}</label>
     </div>
     
     <div class="setting-value">

assets/javascripts/discourse/templates/components/wizard-custom-field.hbs

@@ -1,24 +1,6 @@
 <div class="setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.id'}}</h3>
-  </div>
-  <div class="setting-value">
-    {{input name="id" value=field.id placeholderKey="admin.wizard.id_placeholder" disabled=disableId}}
-  </div>
-</div>
-
-<div class="setting">
-  <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.key'}}</h3>
-  </div>
-  <div class="setting-value">
-    {{input name="key" value=field.key placeholderKey="admin.wizard.key_placeholder"}}
-  </div>
-</div>
-
-<div class="setting">
-  <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.field.label'}}</h3>
+    <label>{{i18n 'admin.wizard.field.label'}}</label>
   </div>
   <div class="setting-value">
     {{input name="label" value=field.label}}
@@ -27,7 +9,30 @@
 
 <div class="setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.field.description'}}</h3>
+    <label>{{i18n 'admin.wizard.translation'}}</label>
+  </div>
+  <div class="setting-value">
+    {{input name="key" value=field.key placeholderKey="admin.wizard.translation_placeholder"}}
+  </div>
+</div>
+
+<div class="setting">
+  <div class="setting-label">
+    <label>{{i18n 'admin.wizard.field.image'}}</label>
+  </div>
+  <div class="setting-value">
+    {{image-uploader
+      imageUrl=field.image
+      onUploadDone=(action "imageUploadDone")
+      onUploadDeleted=(action "imageUploadDeleted")
+      type="wizard-step"
+      class="no-repeat contain-image"}}
+  </div>
+</div>
+
+<div class="setting">
+  <div class="setting-label">
+    <label>{{i18n 'admin.wizard.field.description'}}</label>
   </div>
   <div class="setting-value">
     {{textarea name="description" value=field.description}}
@@ -36,17 +41,9 @@
 
 <div class="setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.field.image'}}</h3>
+    <label>{{i18n 'admin.wizard.type'}}</label>
   </div>
-  <div class="setting-value">
-    {{input name="image" value=field.image placeholderKey="admin.wizard.field.image_placeholder"}}
-  </div>
-</div>
   
-<div class="setting">
-  <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.type'}}</h3>
-  </div>
   <div class="setting-value">
     {{combo-box
       value=field.type
@@ -60,21 +57,23 @@
 
 <div class="setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.field.required'}}</h3>
+    <label>{{i18n 'admin.wizard.field.required'}}</label>
   </div>
+  
   <div class="setting-value">
-    {{input type='checkbox' checked=field.required}}
     <span>{{i18n 'admin.wizard.field.required_label'}}</span>
+    {{input type='checkbox' checked=field.required}}
   </div>
 </div>
 
 {{#if isInput}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.field.min_length'}}</h3>
+      <label>{{i18n 'admin.wizard.field.min_length'}}</label>
     </div>
+    
     <div class="setting-value">
-      {{input type="number" name="min_length" value=field.min_length placeholder=(i18n 'admin.wizard.field.min_length_placeholder')}}
+      {{input type="number" name="min_length" value=field.min_length}}
     </div>
   </div>
 {{/if}}
@@ -97,7 +96,7 @@
       <div class="wizard-header small">
         {{i18n 'admin.wizard.field.choices_translation'}}
       </div>
-      {{input name="key" value=field.choices_key placeholderKey="admin.wizard.key_placeholder"}}
+      {{input name="key" value=field.choices_key placeholderKey="admin.wizard.translation_placeholder"}}
     {{/if}}
 
     {{#if choicesCustom}}
@@ -119,30 +118,21 @@
 {{#if isUpload}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.field.file_types'}}</h3>
+      <label>{{i18n 'admin.wizard.field.file_types'}}</label>
     </div>
+    
     <div class="setting-value">
       {{input value=field.file_types}}
     </div>
   </div>
 {{/if}}
 
-{{#if isCategoryOrTag}}
-  <div class="setting">
-    <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.field.limit'}}</h3>
-    </div>
-    <div class="setting-value">
-      {{input type="number" value=field.limit}}
-    </div>
-  </div>
-{{/if}}
-
 {{#if isCategory}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.field.property'}}</h3>
+      <label>{{i18n 'admin.wizard.field.property'}}</label>
     </div>
+    
     <div class="setting-value">
       {{combo-box
         value=field.property
@@ -155,10 +145,23 @@
   </div>
 {{/if}}
 
+{{#if isCategoryOrTag}}
+  <div class="setting">
+    <div class="setting-label">
+      <label>{{i18n 'admin.wizard.field.limit'}}</label>
+    </div>
+    
+    <div class="setting-value">
+      {{input type="number" value=field.limit}}
+    </div>
+  </div>
+{{/if}}
+
 <div class="setting full field-mapper-setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.field.prefill'}}</h3>
+    <label>{{i18n 'admin.wizard.field.prefill'}}</label>
   </div>
+  
   <div class="setting-value">
     {{wizard-field-mapper
       inputs=field.prefill
@@ -170,8 +173,9 @@
 {{#if canFilter}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.field.filter'}}</h3>
+      <label>{{i18n 'admin.wizard.field.filter'}}</label>
     </div>
+    
     <div class="setting-value">
       {{wizard-field-mapper
         inputs=field.filters

assets/javascripts/discourse/templates/components/wizard-custom-step.hbs

@@ -1,31 +1,6 @@
 <div class="setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.id'}}</h3>
-  </div>
-  <div class="setting-value">
-    {{input
-      name="id"
-      value=step.id
-      placeholderKey="admin.wizard.id_placeholder"
-      disabled=disableId}}
-  </div>
-</div>
-
-<div class="setting">
-  <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.key'}}</h3>
-  </div>
-  <div class="setting-value">
-    {{input
-      name="key"
-      value=step.key
-      placeholderKey="admin.wizard.key_placeholder"}}
-  </div>
-</div>
-
-<div class="setting">
-  <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.step.title'}}</h3>
+    <label>{{i18n 'admin.wizard.step.title'}}</label>
   </div>
   <div class="setting-value">
     {{input
@@ -36,28 +11,44 @@
 
 <div class="setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.step.banner'}}</h3>
+    <label>{{i18n 'admin.wizard.translation'}}</label>
   </div>
   <div class="setting-value">
     {{input
-      name="banner"
-      value=step.banner
-      placeholderKey="admin.wizard.step.banner_placeholder"}}
+      name="key"
+      value=step.key
+      placeholderKey="admin.wizard.translation_placeholder"}}
   </div>
 </div>
 
 <div class="setting full">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.step.description'}}</h3>
+    <label>{{i18n 'admin.wizard.step.banner'}}</label>
   </div>
   <div class="setting-value">
-    {{wizard-text-editor value=step.raw_description}}
+    {{image-uploader
+      imageUrl=step.banner
+      onUploadDone=(action "bannerUploadDone")
+      onUploadDeleted=(action "bannerUploadDeleted")
+      type="wizard-banner"
+      class="no-repeat contain-image"}}
+  </div>
+</div>
+
+<div class="setting full">
+  <div class="setting-label">
+    <label>{{i18n 'admin.wizard.step.description'}}</label>
+  </div>
+  <div class="setting-value">
+    {{wizard-text-editor
+      value=step.raw_description
+      fieldsEnabled=false}}
   </div>
 </div>
 
 <div class="setting full field-mapper-setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.step.required_data.label'}}</h3>
+    <label>{{i18n 'admin.wizard.step.required_data.label'}}</label>
   </div>
   <div class="setting-value">
     {{wizard-field-mapper
@@ -82,7 +73,7 @@
 
 <div class="setting full field-mapper-setting">
   <div class="setting-label">
-    <h3>{{i18n 'admin.wizard.step.permitted_params.label'}}</h3>
+    <label>{{i18n 'admin.wizard.step.permitted_params.label'}}</label>
   </div>
   <div class="setting-value">
     {{wizard-field-mapper

assets/javascripts/discourse/templates/components/wizard-export.hbs

@@ -3,9 +3,11 @@
 <ul class="wizard-list-select">
   {{#each wizards as |w|}}
     <li>
-      {{input type="checkbox"
-              id=(dasherize w.id)
-              change=(action 'checkChanged')}}
+      {{input 
+        type="checkbox"
+        id=(dasherize w.id)
+        change=(action 'checkChanged')}}
+        
       {{#link-to "adminWizard" (dasherize w.id)}}
         {{w.name}}
       {{/link-to}}

assets/javascripts/discourse/templates/components/wizard-links.hbs

@@ -1,14 +1,12 @@
-<div class="wizard-links {{type}}">
-  <div class="wizard-header medium">{{{i18n header}}}</div>
-  {{#if anyLinks}}
-    <ul>
-      {{#each links as |l|}}
-        <li data-id='{{l.id}}'>
-          {{d-button action="change" actionParam=l.id translatedLabel=l.label class=l.classes}}
-          {{d-button action='remove' actionParam=l.id icon='times' class='remove'}}
-        </li>
-      {{/each}}
-    </ul>
-  {{/if}}
-  {{d-button action='add' label='admin.wizard.add' icon='plus'}}
-</div>
+<div class="wizard-header medium">{{{i18n header}}}</div>
+{{#if anyLinks}}
+  <ul>
+    {{#each links as |l|}}
+      <li data-id='{{l.id}}'>
+        {{d-button action="change" actionParam=l.id translatedLabel=l.label class=l.classes}}
+        {{d-button action='remove' actionParam=l.id icon='times' class='remove'}}
+      </li>
+    {{/each}}
+  </ul>
+{{/if}}
+{{d-button action='add' label='admin.wizard.add' icon='plus'}}

assets/javascripts/discourse/templates/components/wizard-text-editor.hbs

@@ -1,11 +1,14 @@
 {{d-editor
   value=value
-  forcePreview=forcePreview}}
+  forcePreview=forcePreview
+  placeholder=placeholder}}
 
 <div class="wizard-editor-gutter">
-  {{d-button
-    action="togglePreview"
-    translatedLabel=previewLabel}}
+  {{#if previewEnabled}}
+    {{d-button
+      action="togglePreview"
+      translatedLabel=previewLabel}}
+  {{/if}}
   
   {{#if fieldsEnabled}}
     {{d-button

assets/javascripts/wizard/components/wizard-composer-editor.js.es6

@@ -30,7 +30,6 @@ export default ComposerEditor.extend({
         key: "@",
         transformComplete: v => v.username || v.name,
         afterComplete() {
-          // ensures textarea scroll position is correct
           scheduleOnce("afterRender", () => $input.blur().focus());
         }
       });

assets/javascripts/wizard/templates/components/wizard-field.hbs

@@ -1,7 +1,5 @@
-<label for={{field.id}}>
-  {{#if field.label}}
-    <span class='label-value'>{{{field.label}}}</span>
-  {{/if}}
+<label for={{field.id}} class="field-label">
+  {{{field.label}}}
 </label>
 
 {{#if field.image}}

assets/javascripts/wizard/templates/components/wizard-step.hbs

@@ -3,16 +3,16 @@
     <h1 class='wizard-step-title'>{{cookedTitle}}</h1>
   {{/if}}
   
-  {{#if step.description}}
-    <div class='wizard-step-description'>{{cookedDescription}}</div>
-  {{/if}}
-
   {{#if bannerImage}}
     <div class="wizard-step-banner">
       <img src={{bannerImage}}>
     </div>
   {{/if}}
 
+  {{#if step.description}}
+    <div class='wizard-step-description'>{{cookedDescription}}</div>
+  {{/if}}
+
   {{#wizard-step-form step=step}}
     {{#each step.fields as |field|}}
       {{wizard-field field=field step=step wizard=wizard}}

assets/stylesheets/wizard/wizard_custom.scss

@@ -30,7 +30,7 @@
     flex: 0;
     
     p {
-      margin: 0.5em 0;
+      margin: 0 0 0.5em 0;
     }
   }
 
@@ -126,47 +126,33 @@
   .wizard-field {
     margin-bottom: 1em;
     
-    &.tip {
-      margin-top: auto;
+    .field-label {
+      font-weight: 800;
     }
     
-    label {
-      display: flex;
-      flex-flow: wrap;
-      align-items: center;
+    .field-image {
+      margin-bottom: 0.5em;
       
-      .label-value {
-        width: 100%;
+      img {
+        max-width: 100%;
+        max-height: 150px;
+      }
+    }
 
-        p {
-          margin: 0;
-        }
+    .field-description {
+      flex: 1;
+      color: #333;
+      margin-top: 0;
+
+      p {
+        margin: 0.3em 0;
+        line-height: 1.3em;
       }
 
-      .field-image {
-        margin-right: 10px;
-
-        img {
-          width: 30px;
-          height: 30px;
-        }
-      }
-
-      .field-description {
-        flex: 1;
-        color: #333;
-        margin-top: 0;
-
-        p {
-          margin: 0;
-          line-height: 1.3em;
-        }
-
-        img {
-          height: 15px;
-          width: 15px;
-          margin: 0 5px;
-        }
+      img {
+        height: 15px;
+        width: 15px;
+        margin: 0 5px;
       }
     }
   }

assets/stylesheets/wizard_custom_admin.scss

@@ -8,7 +8,7 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
 
 .wizard-settings-parent {
   margin-bottom: 20px;
-  padding: 20px;
+  padding: 30px;
   background-color: $setting-background;
 }
 
@@ -61,6 +61,10 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
   }
 }
 
+.wizard-basic-details {
+  margin-bottom: 10px;
+}
+
 .content-list + .content {
   overflow: hidden;
 }
@@ -73,6 +77,7 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
     display: inline-flex;
     vertical-align: top;
     width: 48%;
+    padding-bottom: 30px;
 
     .setting-label {
       width: 80px;
@@ -106,6 +111,36 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
         background-color: $primary-low;
         cursor: not-allowed;
       }
+      
+      input[type="number"] {
+        width: 70px;
+      }
+      
+      .uploaded-image-preview {
+        width: 100%;
+        max-height: 100px;
+      }
+      
+      .image-upload-controls {
+        label {
+          font-size: 1em;
+          margin: 0 5px 0 0;
+        }
+      }
+      
+      > textarea {
+        min-height: 100px;
+        resize: vertical;
+      }
+      
+      input[type="checkbox"] {
+        float: left;
+        margin: 5px 7px 0 0;
+      }
+      
+      span {
+        overflow: hidden;
+      }
     }
 
     &.full {
@@ -121,6 +156,10 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
             margin-bottom: 5px;
           }
         }
+        
+        .uploaded-image-preview {
+          max-height: 170px;
+        }
       }
     }
     
@@ -128,12 +167,12 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
       padding-bottom: 20px;
       
       .setting-label {
-        margin-top: 20px;
+        margin-top: 18px;
       }
     }
 
     label {
-      margin: 5px 0;
+      margin: 3px 0;
     }
 
     .setting-gutter {
@@ -161,23 +200,6 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
     margin-top: 5px;
     padding: 5px;
   }
-
-  .api-body {
-    width: 100%;
-
-    .setting-label {
-      max-width: 70px;
-    }
-
-    .setting-value {
-      width: calc(100% - 180px);
-    }
-
-    textarea {
-      width: 100%;
-      min-height: 150px;
-    }
-  }
 }
 
 .field-mapper {
@@ -213,7 +235,7 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
     width: 100%;
 
     .d-editor-input {
-      min-height: 120px;
+      min-height: 130px;
     }
     
     .d-editor-container {
@@ -267,7 +289,8 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
 }
 
 .wizard-links {
-  margin-bottom: 20px;
+  margin: 20px 0;
+  display: inline-block;
   width: 100%;
 
   ul {
@@ -526,6 +549,8 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
   }
 }
 
+
+
 .wizard-step-contents {
   height: unset !important;
 }

config/locales/client.en.yml

@@ -14,7 +14,7 @@ en:
         name: "Name"
         name_placeholder: "name of the wizard"
         background: "Background"
-        background_placeholder: "Background css property"
+        background_placeholder: "background: css"
         save_submissions: "Save"
         save_submissions_label: "Save wizard submissions."
         multiple_submissions: "Multiple"
@@ -44,14 +44,12 @@ en:
         remove: "Delete Wizard"
         add: "Add"
         url: "Url"
-        key: "Key"
         value: "Value"
         property: "Property"
         text: "text"
         profile: "profile"
-        id: "Id"
-        id_placeholder: "Underscored. Cannot be changed."
-        key_placeholder: "Translation key"
+        translation: "Translation"
+        translation_placeholder: "key"
         type: "Type"
         none: "Make a selection"
         user_field: "User Field"
@@ -93,7 +91,6 @@ en:
           header: "Steps"
           title: "Title"
           banner: "Banner"
-          banner_placeholder: "Image url"
           description: "Description"
           required_data:
             label: "Required"
@@ -177,6 +174,7 @@ en:
             select_an_api: "Select an API"
             select_an_endpoint: "Select an endpoint"
             body: "Body"
+            body_placeholder: "JSON"
 
         api:
           label: "API"

config/locales/client.fr.yml

@@ -68,7 +68,6 @@ fr:
           header: "Étapes"
           title: "Titre"
           banner: "Bannière"
-          banner_placeholder: "URL de l'image"
           description: "Description"
         field:
           type: "Choisir un type"

plugin.rb

@@ -31,7 +31,7 @@ if Rails.env.production?
 end
 
 if respond_to?(:register_svg_icon)
-  register_svg_icon "calendar-o"
+  register_svg_icon "far-calendar"
   register_svg_icon "chevron-right"
   register_svg_icon "chevron-left"
 end
@@ -110,7 +110,7 @@ after_initialize do
     object.custom_fields['redirect_to_wizard']
   end
 
-  DiscourseEvent.on(:user_approved) do |user|
+  on(:user_approved) do |user|
     if wizard_id = CustomWizard::Wizard.after_signup
       CustomWizard::Wizard.set_wizard_redirect(user, wizard_id)
     end