Add required data message

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

@@ -78,6 +78,7 @@ const CustomWizard = Discourse.Model.extend({
       if (s.banner) step['banner'] = s.banner;
       if (s.raw_description) step['raw_description'] = s.raw_description;
       if (s.required_data) step['required_data'] = s.required_data;
+      if (s.required_data_message) step['required_data_message'] = s.required_data_message;
       if (s.permitted_params) step['permitted_params'] = s.permitted_params;
 
       const fields = s.get('fields');
@@ -245,6 +246,7 @@ CustomWizard.reopenClass({
             raw_description: s.raw_description,
             banner: s.banner,
             required_data: s.required_data,
+            required_data_message: s.required_data_message,
             permitted_params: s.permitted_params,
             fields,
             actions,

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

@@ -43,7 +43,7 @@
   </div>
 </div>
 
-<div class="setting full">
+<div class="setting required-data full">
   <div class="setting-label">
     <h3>{{i18n 'admin.wizard.step.required_data.label'}}</h3>
   </div>
@@ -52,6 +52,12 @@
                            inputKey='admin.wizard.step.required_data.key'
                            valueContent=requiredContent
                            connectorContent=requiredConnectorContent}}
+    {{#if step.required_data}}
+      <div class="required-data-message">
+        <label>{{i18n 'admin.wizard.step.required_data.not_permitted_message'}}</label>
+        {{input value=step.required_data_message}}
+      </div>
+    {{/if}}
   </div>
 </div>
 

assets/javascripts/wizard/controllers/custom-step.js.es6

@@ -21,6 +21,12 @@ export default StepController.extend({
 
     showMessage(message) {
       this.set('stepMessage', message);
+    },
+
+    resetWizard() {
+      const id = this.get('wizard.id');
+      const stepId = this.get('step.id');
+      window.location.href = getUrl(`/w/${id}/steps/${stepId}?reset=true`);
     }
   }
 });

assets/javascripts/wizard/routes/custom-step.js.es6

@@ -24,8 +24,11 @@ export default Ember.Route.extend({
     if (!model.permitted) {
       props['stepMessage'] = {
         state: 'not-permitted',
-        text: "You're not allowed to view this step."
+        text: model.permitted_message || I18n.t('wizard.step_not_permitted')
       };
+      if (model.index > 0) {
+        props['showReset'] = true;
+      }
     }
 
     controller.setProperties(props);

assets/javascripts/wizard/templates/custom.step.hbs

@@ -1,5 +1,12 @@
 <div class="step-message {{stepMessage.state}}">
+  <div class="text">
     {{stepMessage.text}}
+  </div>
+  {{#if showReset}}
+    <a class="reset-wizard" {{action "resetWizard"}}>
+      {{i18n 'wizard.reset'}}
+    </a>
+  {{/if}}
 </div>
 {{#if step.permitted}}
   {{wizard-step step=step

assets/stylesheets/wizard/wizard_custom.scss

@@ -270,36 +270,35 @@
 }
 
 .step-message {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 0;
-  line-height: 0;
   text-align: center;
   transition: all .2s;
   z-index: 2;
+  padding: 20px;
 
   &.success {
-    height: 60px;
-    line-height: 60px;
     background-color: #009900;
     color: #ffffff;
   }
 
   &.error {
-    height: 60px;
-    line-height: 60px;
     background-color: #e45735;
     color: #ffffff;
   }
 
   &.not-permitted {
-    height: 60px;
-    line-height: 60px;
     background-color: #e45735;
     color: #ffffff;
   }
+  
+  .text {
+    display: inline-block;
+  }
+  
+  .reset-wizard {
+    margin-top: 20px;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 }
 
 .p-list-box {

assets/stylesheets/wizard_custom_admin.scss

@@ -222,6 +222,14 @@
   }
 }
 
+.required-data .setting-value {
+  flex-flow: wrap;
+  
+  .custom-inputs {
+    margin-bottom: 20px;
+  }
+}
+
 .setting .add-custom-input {
   margin-top: 5px;
 }

config/locales/client.en.yml

@@ -77,6 +77,7 @@ en:
             key: 'Submission key'
             connector:
               equals: "Equals"
+            not_permitted_message: "Message shown when required data not present"
           permitted_params:
             label: "Permitted Params"
             key: 'Param'
@@ -279,6 +280,8 @@ en:
       none: "There is no wizard here."
       return_to_site: "Return to {{siteName}}"
       requires_login: "You need to be logged in to access the {{name}} wizard."
+      reset: "Reset this wizard."
+      step_not_permitted: "You're not allowed to view this step."
 
     wizard_composer:
       show_preview: "Preview Post"

lib/builder.rb

@@ -95,7 +95,10 @@ class CustomWizard::Builder
               end
             end
             
-            next if !step.permitted
+            if !step.permitted
+              step.permitted_message = step_template['required_data_message'] if step_template['required_data_message']
+              next
+            end
           end
 
           if step_template['fields'] && step_template['fields'].length

lib/wizard_edits.rb

@@ -63,7 +63,7 @@ end
 end
 
 class ::Wizard::Step
-  attr_accessor :title, :description, :key, :permitted
+  attr_accessor :title, :description, :key, :permitted, :permitted_message
 end
 
 ::WizardSerializer.class_eval do
@@ -159,7 +159,7 @@ end
 end
 
 ::WizardStepSerializer.class_eval do
-  attributes :permitted
+  attributes :permitted, :permitted_message
 
   def title
     return PrettyText.cook(object.title) if object.title
@@ -174,6 +174,10 @@ end
   def permitted
     object.permitted
   end
+  
+  def permitted_message
+    object.permitted_message
+  end
 end
 
 ::WizardFieldSerializer.class_eval do