Merge branch 'main' into pro-release

2022-08-01 16:44:42 +01:00 · 2022-08-01 16:44:42 +01:00 · 2f21358f10
Commit 2f21358f10
--- a/.github/workflows/plugin-linting.yml
+++ b/.github/workflows/plugin-linting.yml
@ -3,51 +3,52 @@ name: Linting
 on:
  push:
    branches:
-      - master
      - main
      - stable
  pull_request:
-  schedule:
-    - cron: '0 0 * * *'
+
+concurrency:
+  group: plugin-linting-${{ format('{0}-{1}', github.head_ref || github.run_number, github.job) }}
+  cancel-in-progress: true

 jobs:
  build:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3

      - name: Set up Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
        with:
-          node-version: 14
+          node-version: 16
+          cache: yarn
+
+      - name: Yarn install
+        run: yarn install

      - name: Set up ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 2.7
-
-      - name: Setup bundler
-        run: gem install bundler -v 2.1.4 --no-doc
-
-      - name: Setup gems
-        run: bundle install --jobs 4
-
-      - name: Yarn install
-        run: yarn install --dev
+          bundler-cache: true

      - name: ESLint
-        run: yarn eslint --ext .js,.js.es6 --no-error-on-unmatched-pattern {test,assets}/javascripts/{discourse,wizard}
+        if: ${{ always() }}
+        run: yarn eslint --ext .js,.js.es6 --no-error-on-unmatched-pattern {test,assets}/javascripts

      - name: Prettier
+        if: ${{ always() }}
+        shell: bash
        run: |
          yarn prettier -v
-          if [ -d "assets" ]; then \
-            yarn prettier --list-different "assets/javascripts/{discourse,wizard}/**/*.{scss,js,es6}" ; \
+          if [ 0 -lt $(find assets -type f \( -name "*.scss" -or -name "*.js" -or -name "*.es6" \) 2> /dev/null | wc -l) ]; then
+            yarn prettier --list-different "assets/**/*.{scss,js,es6}"
+          fi
+          if [ 0 -lt $(find test -type f \( -name "*.js" -or -name "*.es6" \) 2> /dev/null | wc -l) ]; then
+            yarn prettier --list-different "test/**/*.{js,es6}"
          fi

-      - name: Ember template lint
-        run: yarn ember-template-lint assets/javascripts
-
      - name: Rubocop
+        if: ${{ always() }}
        run: bundle exec rubocop .
--- a/.github/workflows/plugin-metadata.yml
+++ b/.github/workflows/plugin-metadata.yml
@ -36,9 +36,9 @@ jobs:
        uses: actions/github-script@v5
        with:
          script: |
-              const semver = require('semver');
-              const { head_version, base_version } = process.env;
+            const semver = require('semver');
+            const { head_version, base_version } = process.env;

-              if (semver.lte(head_version, base_version)) {
-                core.setFailed("Head version is equal to or lower than base version.");
-              }
+            if (semver.lte(head_version, base_version)) {
+              core.setFailed("Head version is equal to or lower than base version.");
+            }
--- a/.github/workflows/plugin-tests.yml
+++ b/.github/workflows/plugin-tests.yml
@ -3,14 +3,12 @@ name: Plugin Tests
 on:
  push:
    branches:
-      - stable
      - main
+      - stable
  pull_request:
-  schedule:
-    - cron: '0 */12 * * *'

 concurrency:
-  group: plugin-tests-${{ format('{0}-{1}', github.head_ref || github.run_number, github.job) }}
+  group: tests-${{ format('{0}-{1}', github.head_ref || github.run_number, github.job) }}
  cancel-in-progress: true

 jobs:
@ -34,24 +32,15 @@ jobs:
        build_type: ["backend", "frontend"]

    steps:
-      - uses: haya14busa/action-cond@v1
-        id: discourse_branch
-        with:
-          cond: ${{  github.base_ref == 'stable' }}
-          if_true: "stable"
-          if_false: "tests-passed"
-
      - uses: actions/checkout@v3
        with:
          repository: discourse/discourse
-          ref: ${{ steps.discourse_branch.outputs.value }}
          fetch-depth: 1

      - name: Install plugin
        uses: actions/checkout@v3
        with:
          path: plugins/${{ github.event.repository.name }}
-          ref: "${{ github.head_ref }}"
          fetch-depth: 1

      - name: Setup Git
@ -112,7 +101,7 @@ jobs:
        with:
          path: tmp/app-cache
          key: >-
-            ${{ hashFiles('.github/workflows/plugin-tests.yml') }}-
+            ${{ hashFiles('.github/workflows/tests.yml') }}-
            ${{ hashFiles('db/**/*', 'plugins/**/db/**/*') }}-

      - name: Restore database from cache
@ -137,17 +126,11 @@ jobs:
        if: steps.app-cache.outputs.cache-hit != 'true'
        run: rm -rf tmp/app-cache/uploads && cp -r public/uploads tmp/app-cache/uploads

-      - name: RSpec with Coverage
+      - name: Plugin RSpec
        if: matrix.build_type == 'backend'
-        run: |
-          if [ -e plugins/${{ github.event.repository.name }}/.simplecov ]
-          then
-            cp plugins/${{ github.event.repository.name }}/.simplecov .simplecov
-            export COVERAGE=1
-          fi
-          bin/rake plugin:spec[${{ github.event.repository.name }}]
+        run: bin/rake plugin:spec[${{ github.event.repository.name }}]

-      - name: Wizard QUnit
+      - name: Plugin QUnit
        if: matrix.build_type == 'frontend'
-        run: LOAD_PLUGINS=1 QUNIT_EMBER_CLI=0 QUNIT_SKIP_CORE=1 bin/rake qunit:test['600000','/w/qunit']
+        run: QUNIT_EMBER_CLI=1 bundle exec rake plugin:qunit['${{ github.event.repository.name }}','1200000']
        timeout-minutes: 10
--- a/app/controllers/custom_wizard/wizard.rb
+++ b/app/controllers/custom_wizard/wizard.rb
@ -1,40 +1,13 @@
 # frozen_string_literal: true
-class CustomWizard::WizardController < ::ActionController::Base
-  helper ApplicationHelper
-
-  include CurrentUser
-  include CanonicalURL::ControllerExtensions
-  include GlobalPath
-
-  prepend_view_path(Rails.root.join('plugins', 'discourse-custom-wizard', 'app', 'views'))
-  layout :set_wizard_layout
-
-  before_action :preload_wizard_json
+class CustomWizard::WizardController < ::ApplicationController
  before_action :ensure_plugin_enabled
  before_action :ensure_logged_in, only: [:skip]
-  around_action :with_resolved_locale

-  helper_method :wizard_page_title
-  helper_method :wizard_theme_id
-  helper_method :wizard_theme_lookup
-  helper_method :wizard_theme_translations_lookup
-
-  def set_wizard_layout
-    action_name === 'qunit' ? 'qunit' : 'wizard'
-  end
-
-  def index
-    respond_to do |format|
-      format.json do
-        if wizard.present?
-          render json: CustomWizard::WizardSerializer.new(wizard, scope: guardian, root: false).as_json, status: 200
-        else
-          render json: { error: I18n.t('wizard.none') }
-        end
-      end
-      format.html do
-        render "default/empty"
-      end
+  def show
+    if wizard.present?
+      render json: CustomWizard::WizardSerializer.new(wizard, scope: guardian, root: false).as_json, status: 200
+    else
+      render json: { error: I18n.t('wizard.none') }
    end
  end

@ -58,26 +31,8 @@ class CustomWizard::WizardController < ::ActionController::Base
    render json: result
  end

-  def qunit
-    raise Discourse::InvalidAccess.new if Rails.env.production?
-
-    respond_to do |format|
-      format.html do
-        render "default/empty"
-      end
-    end
-  end
-
  protected

-  def ensure_logged_in
-    raise Discourse::NotLoggedIn.new unless current_user.present?
-  end
-
-  def guardian
-    @guardian ||= Guardian.new(current_user, request)
-  end
-
  def wizard
    @wizard ||= begin
      builder = CustomWizard::Builder.new(params[:wizard_id].underscore, current_user)
@ -88,41 +43,6 @@ class CustomWizard::WizardController < ::ActionController::Base
    end
  end

-  def wizard_page_title
-    wizard ? (wizard.name || wizard.id) : I18n.t('wizard.custom_title')
-  end
-
-  def wizard_theme_id
-    wizard ? wizard.theme_id : nil
-  end
-
-  def wizard_theme_lookup(name)
-    Theme.lookup_field(wizard_theme_id, view_context.mobile_view? ? :mobile : :desktop, name)
-  end
-
-  def wizard_theme_translations_lookup
-    Theme.lookup_field(wizard_theme_id, :translations, I18n.locale)
-  end
-
-  def preload_wizard_json
-    return if request.xhr? || request.format.json?
-    return if request.method != "GET"
-
-    store_preloaded("siteSettings", SiteSetting.client_settings_json)
-  end
-
-  def store_preloaded(key, json)
-    @preloaded ||= {}
-    @preloaded[key] = json.gsub("</", "<\\/")
-  end
-
-  ## Simplified version of with_resolved_locale in ApplicationController
-  def with_resolved_locale
-    locale = current_user ? current_user.effective_locale : SiteSetting.default_locale
-    I18n.ensure_all_loaded!
-    I18n.with_locale(locale) { yield }
-  end
-
  private

  def ensure_plugin_enabled
--- a/app/serializers/custom_wizard/wizard_serializer.rb
+++ b/app/serializers/custom_wizard/wizard_serializer.rb
@ -9,14 +9,10 @@ class CustomWizard::WizardSerializer < CustomWizard::BasicWizardSerializer
             :completed,
             :required,
             :permitted,
-             :uncategorized_category_id,
-             :categories,
-             :subscribed,
             :resume_on_revisit

  has_many :steps, serializer: ::CustomWizard::StepSerializer, embed: :objects
  has_one :user, serializer: ::BasicUserSerializer, embed: :objects
-  has_many :groups, serializer: ::BasicGroupSerializer, embed: :objects

  def completed
    object.completed?
@ -47,28 +43,4 @@ class CustomWizard::WizardSerializer < CustomWizard::BasicWizardSerializer
  def include_steps?
    !include_completed?
  end
-
-  def include_categories?
-    object.needs_categories
-  end
-
-  def include_groups?
-    object.needs_groups
-  end
-
-  def uncategorized_category_id
-    SiteSetting.uncategorized_category_id
-  end
-
-  def include_uncategorized_category_id?
-    object.needs_categories
-  end
-
-  def categories
-    object.categories.map { |c| c.to_h }
-  end
-
-  def subscribed
-    CustomWizard::Subscription.subscribed?
-  end
 end
--- a/app/views/layouts/wizard.html.erb
+++ b/app/views/layouts/wizard.html.erb
@ -1,62 +0,0 @@
-<html>
-  <head>
-    <%= discourse_color_scheme_stylesheets %>
-
-    <%= discourse_stylesheet_link_tag :wizard, theme_id: nil %>
-    <%= discourse_stylesheet_link_tag :wizard_custom %>
-    <%- if wizard_theme_id.present? %>
-      <%= discourse_stylesheet_link_tag (mobile_view? ? :mobile_theme : :desktop_theme), theme_id: wizard_theme_id %>
-    <%- end %>
-
-    <%= preload_script "locales/#{I18n.locale}" %>
-    <%= preload_script "ember_jquery" %>
-    <%= preload_script "wizard-vendor" %>
-    <%= preload_script "wizard-custom" %>
-    <%= preload_script "wizard-raw-templates" %>
-    <%= preload_script "wizard-plugin" %>
-    <%= preload_script "pretty-text-bundle" %>
-    <%= preload_script_url ExtraLocalesController.url("wizard") %>
-    <%= csrf_meta_tags %>
-
-    <%- unless customization_disabled? %>
-      <%= wizard_theme_translations_lookup %>
-      <%= raw wizard_theme_lookup("head_tag") %>
-    <%- end %>
-
-    <%= server_plugin_outlet "custom_wizard" %>
-
-    <%= tag.meta id: 'data-discourse-setup', data: client_side_setup_data %>
-
-    <meta name="discourse_theme_id" content="<%= wizard_theme_id %>">
-    <meta name="discourse-base-uri" content="<%= Discourse.base_path %>">
-
-    <%= render partial: "layouts/head" %>
-    <title><%= wizard_page_title %></title>
-  </head>
-
-  <body class='custom-wizard wizard'>
-    <%- unless customization_disabled? %>
-      <%= raw wizard_theme_lookup("header") %>
-    <%- end %>
-
-    <div id='custom-wizard-main'></div>
-
-    <%- unless customization_disabled? %>
-      <%= raw wizard_theme_lookup("body_tag") %>
-    <%- end %>
-
-    <%- if current_user %>
-      <%= preload_script 'wizard-custom-start' %>
-    <%- else %>
-      <%= preload_script 'wizard-custom-guest' %>
-    <%- end %>
-
-    <div id="svg-sprites" style="display:none;">
-      <div class="fontawesome">
-        <%= raw SvgSprite.bundle %>
-      </div>
-    </div>
-
-    <div class="hidden" id="data-preloaded-wizard" data-preloaded-wizard="<%= preloaded_json %>"></div>
-  </body>
-</html>
--- a/assets/javascripts/discourse/components/custom-user-selector.js.es6
+++ b/assets/javascripts/discourse/components/custom-user-selector.js.es6
@ -3,8 +3,8 @@ import {
  observes,
 } from "discourse-common/utils/decorators";
 import { renderAvatar } from "discourse/helpers/user-avatar";
-import userSearch from "../lib/user-search";
-import WizardI18n from "../lib/wizard-i18n";
+import userSearch from "discourse/lib/user-search";
+import I18n from "I18n";
 import Handlebars from "handlebars";
 import { isEmpty } from "@ember/utils";
 import TextField from "@ember/component/text-field";
@ -41,7 +41,7 @@ export default TextField.extend({

  @computed("placeholderKey")
  placeholder(placeholderKey) {
-    return placeholderKey ? WizardI18n(placeholderKey) : "";
+    return placeholderKey ? I18n.t(placeholderKey) : "";
  },

  @observes("usernames")
--- a/assets/javascripts/discourse/components/custom-wizard-category-selector.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-category-selector.js.es6
--- a/assets/javascripts/discourse/components/custom-wizard-composer-editor.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-composer-editor.js.es6
@ -3,17 +3,16 @@ import {
  default as discourseComputed,
  on,
 } from "discourse-common/utils/decorators";
-import { findRawTemplate } from "discourse/plugins/discourse-custom-wizard/legacy/raw-templates";
+import { findRawTemplate } from "discourse-common/lib/raw-templates";
 import { scheduleOnce } from "@ember/runloop";
 import { caretPosition, inCodeBlock } from "discourse/lib/utilities";
 import highlightSyntax from "discourse/lib/highlight-syntax";
 import { alias } from "@ember/object/computed";
-import Site from "../models/site";
+import Site from "discourse/models/site";
 import { uploadIcon } from "discourse/lib/uploads";
 import { dasherize } from "@ember/string";

 export default ComposerEditor.extend({
-  layoutName: "wizard/templates/components/wizard-composer-editor",
  classNameBindings: ["fieldClass"],
  allowUpload: true,
  showLink: false,
@ -35,7 +34,7 @@ export default ComposerEditor.extend({
    if (this.siteSettings.enable_mentions) {
      $input.autocomplete({
        template: findRawTemplate("user-selector-autocomplete"),
-        dataSource: (term) => this.userSearchTerm.call(this, term),
+        dataSource: (term) => this._userSearchTerm.call(this, term),
        key: "@",
        transformComplete: (v) => v.username || v.name,
        afterComplete: (value) => {
--- a/assets/javascripts/discourse/components/custom-wizard-composer-hyperlink.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-composer-hyperlink.js.es6
@ -2,7 +2,6 @@ import Component from "@ember/component";

 export default Component.extend({
  classNames: ["wizard-composer-hyperlink"],
-  layoutName: "wizard/templates/components/wizard-composer-hyperlink",

  actions: {
    addLink() {
--- a/assets/javascripts/discourse/components/custom-wizard-date-input.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-date-input.js.es6
@ -3,7 +3,6 @@ import discourseComputed from "discourse-common/utils/decorators";

 export default DateInput.extend({
  useNativePicker: false,
-  layoutName: "wizard/templates/components/wizard-date-input",

  @discourseComputed()
  placeholder() {
--- a/assets/javascripts/discourse/components/custom-wizard-date-time-input.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-date-time-input.js.es6
@ -2,8 +2,6 @@ import DateTimeInput from "discourse/components/date-time-input";
 import discourseComputed from "discourse-common/utils/decorators";

 export default DateTimeInput.extend({
-  layoutName: "wizard/templates/components/wizard-date-time-input",
-
  @discourseComputed("timeFirst", "tabindex")
  timeTabindex(timeFirst, tabindex) {
    return timeFirst ? tabindex : tabindex + 1;
--- a/assets/javascripts/discourse/components/custom-wizard-field-category.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-category.js.es6
@ -3,8 +3,6 @@ import Category from "discourse/models/category";
 import Component from "@ember/component";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-category",
-
  didInsertElement() {
    const property = this.field.property || "id";
    const value = this.field.value;
--- a/assets/javascripts/discourse/components/custom-wizard-field-checkbox.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-checkbox.js.es6
@ -0,0 +1,3 @@
+import Component from "@ember/component";
+
+export default Component.extend({});
--- a/assets/javascripts/discourse/components/custom-wizard-field-composer-preview.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-composer-preview.js.es6
@ -7,8 +7,6 @@ import { ajax } from "discourse/lib/ajax";
 import { on } from "discourse-common/utils/decorators";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-composer-preview",
-
  @on("init")
  updatePreview() {
    if (this.isDestroyed) {
--- a/assets/javascripts/discourse/components/custom-wizard-field-composer.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-composer.js.es6
@ -6,8 +6,6 @@ import EmberObject from "@ember/object";
 import Component from "@ember/component";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-composer",
-
  showPreview: false,
  classNameBindings: [
    ":wizard-field-composer",
--- a/assets/javascripts/discourse/components/custom-wizard-field-date-time.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-date-time.js.es6
@ -2,8 +2,6 @@ import Component from "@ember/component";
 import { observes } from "discourse-common/utils/decorators";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-date-time",
-
  @observes("dateTime")
  setValue() {
    this.set("field.value", this.dateTime.format(this.field.format));
--- a/assets/javascripts/discourse/components/custom-wizard-field-date.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-date.js.es6
@ -2,8 +2,6 @@ import Component from "@ember/component";
 import { observes } from "discourse-common/utils/decorators";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-date",
-
  @observes("date")
  setValue() {
    this.set("field.value", this.date.format(this.field.format));
--- a/assets/javascripts/discourse/components/custom-wizard-field-dropdown.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-dropdown.js.es6
@ -1,8 +1,6 @@
 import Component from "@ember/component";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-dropdown",
-
  keyPress(e) {
    e.stopPropagation();
  },
--- a/assets/javascripts/discourse/components/custom-wizard-field-group.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-group.js.es6
@ -0,0 +1,3 @@
+import Component from "@ember/component";
+
+export default Component.extend({});
--- a/assets/javascripts/discourse/components/custom-wizard-field-number.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-number.js.es6
@ -0,0 +1,3 @@
+import Component from "@ember/component";
+
+export default Component.extend({});
--- a/assets/javascripts/discourse/components/custom-wizard-field-tag.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-tag.js.es6
@ -0,0 +1,3 @@
+import Component from "@ember/component";
+
+export default Component.extend({});
--- a/assets/javascripts/discourse/components/custom-wizard-field-text.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-text.js.es6
@ -1,8 +1,6 @@
 import Component from "@ember/component";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-text",
-
  keyPress(e) {
    e.stopPropagation();
  },
--- a/assets/javascripts/discourse/components/custom-wizard-field-textarea.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-textarea.js.es6
@ -1,8 +1,6 @@
 import Component from "@ember/component";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-textarea",
-
  keyPress(e) {
    e.stopPropagation();
  },
--- a/assets/javascripts/discourse/components/custom-wizard-field-time.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-time.js.es6
@ -2,8 +2,6 @@ import Component from "@ember/component";
 import { observes } from "discourse-common/utils/decorators";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field-time",
-
  @observes("time")
  setValue() {
    this.set("field.value", this.time.format(this.field.format));
--- a/assets/javascripts/discourse/components/custom-wizard-field-upload.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-upload.js.es6
@ -3,7 +3,6 @@ import Component from "@ember/component";
 import { computed } from "@ember/object";

 export default Component.extend(UppyUploadMixin, {
-  layoutName: "wizard/templates/components/wizard-field-upload",
  classNames: ["wizard-field-upload"],
  classNameBindings: ["isImage"],
  uploading: false,
--- a/assets/javascripts/discourse/components/custom-wizard-field-url.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-url.js.es6
@ -0,0 +1,3 @@
+import Component from "@ember/component";
+
+export default Component.extend({});
--- a/assets/javascripts/discourse/components/custom-wizard-field-user-selector.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field-user-selector.js.es6
@ -0,0 +1,3 @@
+import Component from "@ember/component";
+
+export default Component.extend({});
--- a/assets/javascripts/discourse/components/custom-wizard-field.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-field.js.es6
@ -1,10 +1,9 @@
 import Component from "@ember/component";
 import { dasherize } from "@ember/string";
 import discourseComputed from "discourse-common/utils/decorators";
-import { cook } from "discourse/plugins/discourse-custom-wizard/wizard/lib/text-lite";
+import { cookAsync } from "discourse/lib/text";

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-field",
  classNameBindings: [
    ":wizard-field",
    "typeClasses",
@ -12,6 +11,14 @@ export default Component.extend({
    "field.id",
  ],

+  didReceiveAttrs() {
+    this._super(...arguments);
+
+    cookAsync(this.field.translatedDescription).then((cookedDescription) => {
+      this.set("cookedDescription", cookedDescription);
+    });
+  },
+
  @discourseComputed("field.type", "field.id")
  typeClasses: (type, id) =>
    `${dasherize(type)}-field ${dasherize(type)}-${dasherize(id)}`,
@ -24,12 +31,7 @@ export default Component.extend({
    if (["text_only"].includes(type)) {
      return false;
    }
-    return dasherize(type === "component" ? id : `wizard-field-${type}`);
-  },
-
-  @discourseComputed("field.translatedDescription")
-  cookedDescription(description) {
-    return cook(description);
+    return dasherize(type === "component" ? id : `custom-wizard-field-${type}`);
  },

  @discourseComputed("field.type")
--- a/assets/javascripts/discourse/components/custom-wizard-group-selector.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-group-selector.js.es6
@ -3,7 +3,6 @@ import { computed } from "@ember/object";
 import { makeArray } from "discourse-common/lib/helpers";

 export default ComboBox.extend({
-  layoutName: "wizard/templates/components/wizard-group-selector",
  content: computed("groups.[]", "field.content.[]", function () {
    const whitelist = makeArray(this.field.content);
    return this.groups
--- a/assets/javascripts/discourse/components/custom-wizard-no-access.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-no-access.js.es6
@ -1,11 +1,10 @@
-import CustomWizard from "../models/wizard";
+import CustomWizard from "../models/custom-wizard";
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { dasherize } from "@ember/string";

 export default Component.extend({
  classNameBindings: [":wizard-no-access", "reasonClass"],
-  layoutName: "wizard/templates/components/wizard-no-access",

  @discourseComputed("reason")
  reasonClass(reason) {
--- a/assets/javascripts/discourse/components/custom-wizard-similar-topics.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-similar-topics.js.es6
@ -4,7 +4,6 @@ import { observes } from "discourse-common/utils/decorators";

 export default Component.extend({
  classNames: ["wizard-similar-topics"],
-  layoutName: "wizard/templates/components/wizard-similar-topics",
  showTopics: true,

  didInsertElement() {
--- a/assets/javascripts/discourse/components/custom-wizard-step-form.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-step-form.js.es6
--- a/assets/javascripts/discourse/components/custom-wizard-step.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-step.js.es6
@ -4,15 +4,15 @@ import I18n from "I18n";
 import getUrl from "discourse-common/lib/get-url";
 import { htmlSafe } from "@ember/template";
 import { schedule } from "@ember/runloop";
-import { cook } from "discourse/plugins/discourse-custom-wizard/wizard/lib/text-lite";
-import { updateCachedWizard } from "discourse/plugins/discourse-custom-wizard/wizard/models/wizard";
+import { cookAsync } from "discourse/lib/text";
+import CustomWizard, {
+  updateCachedWizard,
+} from "discourse/plugins/discourse-custom-wizard/discourse/models/custom-wizard";
 import { alias, not } from "@ember/object/computed";
-import CustomWizard from "../models/wizard";

 const alreadyWarned = {};

 export default Component.extend({
-  layoutName: "wizard/templates/components/wizard-step",
  classNameBindings: [":wizard-step", "step.id"],
  saving: null,

@ -21,6 +21,17 @@ export default Component.extend({
    this.set("stylingDropdown", {});
  },

+  didReceiveAttrs() {
+    this._super(...arguments);
+
+    cookAsync(this.step.translatedTitle).then((cookedTitle) => {
+      this.set("cookedTitle", cookedTitle);
+    });
+    cookAsync(this.step.translatedDescription).then((cookedDescription) => {
+      this.set("cookedDescription", cookedDescription);
+    });
+  },
+
  didInsertElement() {
    this._super(...arguments);
    this.autoFocus();
@ -32,16 +43,6 @@ export default Component.extend({
  showNextButton: not("step.final"),
  showDoneButton: alias("step.final"),

-  @discourseComputed("step.translatedTitle")
-  cookedTitle(title) {
-    return cook(title);
-  },
-
-  @discourseComputed("step.translatedDescription")
-  cookedDescription(description) {
-    return cook(description);
-  },
-
  @discourseComputed(
    "step.index",
    "step.displayIndex",
--- a/assets/javascripts/discourse/components/custom-wizard-tag-chooser.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-tag-chooser.js.es6
--- a/assets/javascripts/discourse/components/custom-wizard-tag-selector.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-tag-selector.js.es6
--- a/assets/javascripts/discourse/components/custom-wizard-text-field.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-text-field.js.es6
@ -1,6 +1,6 @@
 import computed from "discourse-common/utils/decorators";
 import { isLTR, isRTL, siteDir } from "discourse/lib/text-direction";
-import WizardI18n from "../lib/wizard-i18n";
+import I18n from "I18n";
 import TextField from "@ember/component/text-field";

 export default TextField.extend({
@ -39,6 +39,6 @@ export default TextField.extend({

  @computed("placeholderKey")
  placeholder(placeholderKey) {
-    return placeholderKey ? WizardI18n(placeholderKey) : "";
+    return placeholderKey ? I18n.t(placeholderKey) : "";
  },
 });
--- a/assets/javascripts/discourse/components/custom-wizard-time-input.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-time-input.js.es6
@ -0,0 +1,3 @@
+import TimeInput from "discourse/components/time-input";
+
+export default TimeInput.extend({});
--- a/assets/javascripts/discourse/components/field-validators.js.es6
+++ b/assets/javascripts/discourse/components/field-validators.js.es6
@ -1,8 +1,6 @@
 import Component from "@ember/component";

 export default Component.extend({
-  layoutName: "wizard/templates/components/field-validators",
-
  actions: {
    perform() {
      this.appEvents.trigger("custom-wizard:validate");
--- a/assets/javascripts/discourse/components/similar-topics-validator.js.es6
+++ b/assets/javascripts/discourse/components/similar-topics-validator.js.es6
@ -1,4 +1,4 @@
-import WizardFieldValidator from "../../wizard/components/validator";
+import WizardFieldValidator from "discourse/plugins/discourse-custom-wizard/discourse/components/validator";
 import { deepMerge } from "discourse-common/lib/object";
 import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import { cancel, later } from "@ember/runloop";
@ -10,7 +10,6 @@ import { dasherize } from "@ember/string";

 export default WizardFieldValidator.extend({
  classNames: ["similar-topics-validator"],
-  layoutName: "wizard/templates/components/similar-topics-validator",
  similarTopics: null,
  hasInput: notEmpty("field.value"),
  hasSimilarTopics: notEmpty("similarTopics"),
--- a/assets/javascripts/discourse/components/validator.js.es6
+++ b/assets/javascripts/discourse/components/validator.js.es6
@ -1,12 +1,10 @@
 import Component from "@ember/component";
 import { equal } from "@ember/object/computed";
-import { ajax } from "discourse/lib/ajax";
-import { getToken } from "../lib/ajax";
+import { ajax, getToken } from "discourse/lib/ajax";

 export default Component.extend({
  classNames: ["validator"],
  classNameBindings: ["isValid", "isInvalid"],
-  layoutName: "wizard/templates/components/validator",
  validMessageKey: null,
  invalidMessageKey: null,
  isValid: null,
--- a/assets/javascripts/discourse/components/wizard-mapper-selector.js.es6
+++ b/assets/javascripts/discourse/components/wizard-mapper-selector.js.es6
@ -377,7 +377,7 @@ export default Component.extend({
      this.changeValue(event.target.value);
    },

-    changeUserValue(previousValue, value) {
+    changeUserValue(value) {
      this.changeValue(value);
    },
  },
--- a/assets/javascripts/discourse/connectors/category-custom-settings/custom-wizard-category-settings.js.es6
+++ b/assets/javascripts/discourse/connectors/category-custom-settings/custom-wizard-category-settings.js.es6
@ -1,9 +1,9 @@
-import CustomWizard from "../../models/custom-wizard";
+import CustomWizardAdmin from "../../models/custom-wizard-admin";
 import { popupAjaxError } from "discourse/lib/ajax-error";

 export default {
  setupComponent(attrs, component) {
-    CustomWizard.all()
+    CustomWizardAdmin.all()
      .then((result) => {
        component.set("wizardList", result);
      })
--- a/assets/javascripts/discourse/controllers/admin-wizards-api-show.js.es6
+++ b/assets/javascripts/discourse/controllers/admin-wizards-api-show.js.es6
@ -154,7 +154,6 @@ export default Controller.extend({
      const api = this.get("api");
      const name = api.name;
      const authType = api.authType;
-      let refreshList = false; // eslint-disable-line
      let error;

      if (!name || !authType) {
@ -169,11 +168,6 @@ export default Controller.extend({
        data["title"] = api.title;
      }

-      const originalTitle = this.get("api.originalTitle");
-      if (api.get("isNew") || (originalTitle && api.title !== originalTitle)) {
-        refreshList = true;
-      }
-
      if (api.get("isNew")) {
        data["new"] = true;
      }
--- a/assets/javascripts/discourse/controllers/custom-wizard-index.js.es6
+++ b/assets/javascripts/discourse/controllers/custom-wizard-index.js.es6
--- a/assets/javascripts/discourse/controllers/custom-wizard-step.js.es6
+++ b/assets/javascripts/discourse/controllers/custom-wizard-step.js.es6
@ -15,12 +15,12 @@ export default Controller.extend({
        const wizardId = this.get("wizard.id");
        window.location.href = getUrl(`/w/${wizardId}/steps/${nextStepId}`);
      } else {
-        this.transitionToRoute("step", nextStepId);
+        this.transitionToRoute("customWizardStep", nextStepId);
      }
    },

    goBack() {
-      this.transitionToRoute("step", this.get("step.previous"));
+      this.transitionToRoute("customWizardStep", this.get("step.previous"));
    },

    showMessage(message) {
--- a/assets/javascripts/discourse/controllers/custom-wizard.js.es6
+++ b/assets/javascripts/discourse/controllers/custom-wizard.js.es6
--- a/assets/javascripts/discourse/custom-wizard-route-map.js.es6
+++ b/assets/javascripts/discourse/custom-wizard-route-map.js.es6
@ -0,0 +1,12 @@
+export default function () {
+  this.route(
+    "customWizard",
+    { path: "/w/:wizard_id", resetNamespace: true },
+    function () {
+      this.route("customWizardStep", {
+        path: "/steps/:step_id",
+        resetNamespace: true,
+      });
+    }
+  );
+}
--- a/assets/javascripts/discourse/helpers/char-counter.js.es6
+++ b/assets/javascripts/discourse/helpers/char-counter.js.es6
--- a/assets/javascripts/discourse/helpers/custom-wizard.js.es6
+++ b/assets/javascripts/discourse/helpers/custom-wizard.js.es6
@ -1,6 +0,0 @@
-import { registerUnbound } from "discourse-common/lib/helpers";
-import { dasherize } from "@ember/string";
-
-registerUnbound("dasherize", function (string) {
-  return dasherize(string);
-});
--- a/assets/javascripts/discourse/initializers/custom-wizard-edits.js.es6
+++ b/assets/javascripts/discourse/initializers/custom-wizard-edits.js.es6
@ -38,6 +38,7 @@ export default {
      });

      api.modifyClass("component:uppy-image-uploader", {
+        pluginId: "custom-wizard",
        // Needed to ensure appEvents get registered when navigating between steps
        @observes("id")
        initOnStepChange() {
--- a/assets/javascripts/discourse/initializers/custom-wizard-redirect.js.es6
+++ b/assets/javascripts/discourse/initializers/custom-wizard-redirect.js.es6
@ -5,7 +5,7 @@ export default {
  after: "message-bus",

  initialize: function (container) {
-    const messageBus = container.lookup("message-bus:main");
+    const messageBus = container.lookup("service:message-bus");
    const siteSettings = container.lookup("site-settings:main");

    if (!siteSettings.custom_wizard_enabled || !messageBus) {
--- a/assets/javascripts/discourse/lib/wizard.js.es6
+++ b/assets/javascripts/discourse/lib/wizard.js.es6
@ -1,5 +1,6 @@
 import EmberObject from "@ember/object";
 import wizardSchema from "./wizard-schema";
+import I18n from "I18n";

 function selectKitContent(content) {
  return content.map((i) => ({ id: i, name: i }));
@ -33,6 +34,10 @@ function camelCase(string) {
  });
 }

+function translationOrText(i18nKey, text) {
+  return I18n.findTranslation(i18nKey) ? I18n.t(i18nKey) : text;
+}
+
 const userProperties = [
  "name",
  "username",
@ -121,4 +126,5 @@ export {
  notificationLevels,
  wizardFieldList,
  sentenceCase,
+  translationOrText,
 };
--- a/assets/javascripts/discourse/mixins/valid-state.js.es6
+++ b/assets/javascripts/discourse/mixins/valid-state.js.es6
--- a/assets/javascripts/discourse/models/custom-wizard-admin.js.es6
+++ b/assets/javascripts/discourse/models/custom-wizard-admin.js.es6
@ -0,0 +1,227 @@
+import EmberObject from "@ember/object";
+import { buildProperties, mapped, present } from "../lib/wizard-json";
+import { listProperties, snakeCase } from "../lib/wizard";
+import wizardSchema from "../lib/wizard-schema";
+import { Promise } from "rsvp";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+
+const CustomWizardAdmin = EmberObject.extend({
+  save(opts) {
+    return new Promise((resolve, reject) => {
+      let wizard = this.buildJson(this, "wizard");
+
+      if (wizard.error) {
+        reject(wizard);
+      }
+
+      let data = {
+        wizard,
+      };
+
+      if (opts.create) {
+        data.create = true;
+      }
+
+      ajax(`/admin/wizards/wizard/${wizard.id}`, {
+        type: "PUT",
+        contentType: "application/json",
+        data: JSON.stringify(data),
+      }).then((result) => {
+        if (result.backend_validation_error) {
+          reject(result);
+        } else {
+          resolve(result);
+        }
+      });
+    });
+  },
+
+  buildJson(object, type, result = {}) {
+    let objectType = object.type || null;
+
+    if (wizardSchema[type].types) {
+      if (!objectType) {
+        result.error = {
+          type: "required",
+          params: { type, property: "type" },
+        };
+        return result;
+      }
+    }
+
+    for (let property of listProperties(type, { objectType })) {
+      let value = object.get(property);
+
+      result = this.validateValue(property, value, object, type, result);
+
+      if (result.error) {
+        break;
+      }
+
+      if (mapped(property, type)) {
+        value = this.buildMappedJson(value);
+      }
+
+      if (value !== undefined && value !== null) {
+        result[property] = value;
+      }
+    }
+
+    if (!result.error) {
+      for (let arrayObjectType of Object.keys(
+        wizardSchema[type].objectArrays
+      )) {
+        let arraySchema = wizardSchema[type].objectArrays[arrayObjectType];
+        let objectArray = object.get(arraySchema.property);
+
+        if (arraySchema.required && !present(objectArray)) {
+          result.error = {
+            type: "required",
+            params: { type, property: arraySchema.property },
+          };
+          break;
+        }
+
+        result[arraySchema.property] = [];
+
+        for (let item of objectArray) {
+          let itemProps = this.buildJson(item, arrayObjectType);
+
+          if (itemProps.error) {
+            result.error = itemProps.error;
+            break;
+          } else {
+            result[arraySchema.property].push(itemProps);
+          }
+        }
+      }
+    }
+
+    return result;
+  },
+
+  validateValue(property, value, object, type, result) {
+    if (wizardSchema[type].required.indexOf(property) > -1 && !value) {
+      result.error = {
+        type: "required",
+        params: { type, property },
+      };
+    }
+
+    let dependent = wizardSchema[type].dependent[property];
+    if (dependent && value && !object[dependent]) {
+      result.error = {
+        type: "dependent",
+        params: { property, dependent },
+      };
+    }
+
+    if (property === "api_body") {
+      try {
+        value = JSON.parse(value);
+      } catch (e) {
+        result.error = {
+          type: "invalid",
+          params: { type, property },
+        };
+      }
+    }
+
+    return result;
+  },
+
+  buildMappedJson(value) {
+    if (typeof value === "string" || Number.isInteger(value)) {
+      return value;
+    }
+    if (!value || !value.length) {
+      return false;
+    }
+
+    let inputs = value;
+    let result = [];
+
+    inputs.forEach((inpt) => {
+      let input = {
+        type: inpt.type,
+      };
+
+      if (inpt.connector) {
+        input.connector = inpt.connector;
+      }
+
+      if (present(inpt.output)) {
+        input.output = inpt.output;
+        input.output_type = snakeCase(inpt.output_type);
+        input.output_connector = inpt.output_connector;
+      }
+
+      if (present(inpt.pairs)) {
+        input.pairs = [];
+
+        inpt.pairs.forEach((pr) => {
+          if (present(pr.key) && present(pr.value)) {
+            let pairParams = {
+              index: pr.index,
+              key: pr.key,
+              key_type: snakeCase(pr.key_type),
+              value: pr.value,
+              value_type: snakeCase(pr.value_type),
+              connector: pr.connector,
+            };
+
+            input.pairs.push(pairParams);
+          }
+        });
+      }
+
+      if (
+        (input.type === "assignment" && present(input.output)) ||
+        present(input.pairs)
+      ) {
+        result.push(input);
+      }
+    });
+
+    if (!result.length) {
+      result = false;
+    }
+
+    return result;
+  },
+
+  remove() {
+    return ajax(`/admin/wizards/wizard/${this.id}`, {
+      type: "DELETE",
+    })
+      .then(() => this.destroy())
+      .catch(popupAjaxError);
+  },
+});
+
+CustomWizardAdmin.reopenClass({
+  all() {
+    return ajax("/admin/wizards/wizard", {
+      type: "GET",
+    })
+      .then((result) => {
+        return result.wizard_list;
+      })
+      .catch(popupAjaxError);
+  },
+
+  submissions(wizardId) {
+    return ajax(`/admin/wizards/submissions/${wizardId}`, {
+      type: "GET",
+    }).catch(popupAjaxError);
+  },
+
+  create(wizardJson = {}) {
+    const wizard = this._super.apply(this);
+    wizard.setProperties(buildProperties(wizardJson));
+    return wizard;
+  },
+});
+
+export default CustomWizardAdmin;
--- a/assets/javascripts/discourse/models/custom-wizard-field.js.es6
+++ b/assets/javascripts/discourse/models/custom-wizard-field.js.es6
@ -1,7 +1,7 @@
 import EmberObject from "@ember/object";
-import ValidState from "discourse/plugins/discourse-custom-wizard/wizard/mixins/valid-state";
+import ValidState from "discourse/plugins/discourse-custom-wizard/discourse/mixins/valid-state";
 import discourseComputed from "discourse-common/utils/decorators";
-import { translatedText } from "discourse/plugins/discourse-custom-wizard/wizard/lib/wizard-i18n";
+import { translationOrText } from "discourse/plugins/discourse-custom-wizard/discourse/lib/wizard";

 const StandardFieldValidation = [
  "text",
@ -34,17 +34,17 @@ export default EmberObject.extend(ValidState, {

  @discourseComputed("i18nKey", "label")
  translatedLabel(i18nKey, label) {
-    return translatedText(`${i18nKey}.label`, label);
+    return translationOrText(`${i18nKey}.label`, label);
  },

  @discourseComputed("i18nKey", "placeholder")
  translatedPlaceholder(i18nKey, placeholder) {
-    return translatedText(`${i18nKey}.placeholder`, placeholder);
+    return translationOrText(`${i18nKey}.placeholder`, placeholder);
  },

  @discourseComputed("i18nKey", "description")
  translatedDescription(i18nKey, description) {
-    return translatedText(`${i18nKey}.description`, description);
+    return translationOrText(`${i18nKey}.description`, description);
  },

  check() {
--- a/assets/javascripts/discourse/models/custom-wizard-step.js.es6
+++ b/assets/javascripts/discourse/models/custom-wizard-step.js.es6
@ -1,9 +1,9 @@
 import EmberObject from "@ember/object";
-import ValidState from "discourse/plugins/discourse-custom-wizard/wizard/mixins/valid-state";
-import { ajax } from "../lib/ajax";
+import ValidState from "discourse/plugins/discourse-custom-wizard/discourse/mixins/valid-state";
+import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
-import { translatedText } from "discourse/plugins/discourse-custom-wizard/wizard/lib/wizard-i18n";
 import { later } from "@ember/runloop";
+import { translationOrText } from "discourse/plugins/discourse-custom-wizard/discourse/lib/wizard";

 export default EmberObject.extend(ValidState, {
  id: null,
@ -15,12 +15,12 @@ export default EmberObject.extend(ValidState, {

  @discourseComputed("i18nKey", "title")
  translatedTitle(i18nKey, title) {
-    return translatedText(`${i18nKey}.title`, title);
+    return translationOrText(`${i18nKey}.title`, title);
  },

  @discourseComputed("i18nKey", "description")
  translatedDescription(i18nKey, description) {
-    return translatedText(`${i18nKey}.description`, description);
+    return translationOrText(`${i18nKey}.description`, description);
  },

  @discourseComputed("index")
--- a/assets/javascripts/discourse/models/custom-wizard.js.es6
+++ b/assets/javascripts/discourse/models/custom-wizard.js.es6
@ -1,272 +1,127 @@
 import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { Promise } from "rsvp";
-import { listProperties, snakeCase } from "../lib/wizard";
-import { buildProperties, mapped, present } from "../lib/wizard-json";
-import wizardSchema from "../lib/wizard-schema";
+import discourseComputed from "discourse-common/utils/decorators";
+import getUrl from "discourse-common/lib/get-url";
+import CustomWizardField from "./custom-wizard-field";
+import CustomWizardStep from "./custom-wizard-step";

 const CustomWizard = EmberObject.extend({
-  save(opts) {
-    return new Promise((resolve, reject) => {
-      let wizard = this.buildJson(this, "wizard");
+  @discourseComputed("steps.length")
+  totalSteps: (length) => length,

-      if (wizard.error) {
-        reject(wizard);
-      }
-
-      let data = {
-        wizard,
-      };
-
-      if (opts.create) {
-        data.create = true;
-      }
-
-      ajax(`/admin/wizards/wizard/${wizard.id}`, {
-        type: "PUT",
-        contentType: "application/json",
-        data: JSON.stringify(data),
-      }).then((result) => {
-        if (result.backend_validation_error) {
-          reject(result);
-        } else {
-          resolve(result);
-        }
-      });
-    });
+  skip() {
+    if (this.required && !this.completed && this.permitted) {
+      return;
+    }
+    CustomWizard.skip(this.id);
  },

-  buildJson(object, type, result = {}) {
-    let objectType = object.type || null;
-
-    if (wizardSchema[type].types) {
-      if (!objectType) {
-        result.error = {
-          type: "required",
-          params: { type, property: "type" },
-        };
-        return result;
-      }
-    }
-
-    for (let property of listProperties(type, { objectType })) {
-      let value = object.get(property);
-
-      result = this.validateValue(property, value, object, type, result);
-
-      if (result.error) {
-        break;
-      }
-
-      if (mapped(property, type)) {
-        value = this.buildMappedJson(value);
-      }
-
-      if (value !== undefined && value !== null) {
-        result[property] = value;
-      }
-    }
-
-    if (!result.error) {
-      for (let arrayObjectType of Object.keys(
-        wizardSchema[type].objectArrays
-      )) {
-        let arraySchema = wizardSchema[type].objectArrays[arrayObjectType];
-        let objectArray = object.get(arraySchema.property);
-
-        if (arraySchema.required && !present(objectArray)) {
-          result.error = {
-            type: "required",
-            params: { type, property: arraySchema.property },
-          };
-          break;
-        }
-
-        result[arraySchema.property] = [];
-
-        for (let item of objectArray) {
-          let itemProps = this.buildJson(item, arrayObjectType);
-
-          if (itemProps.error) {
-            result.error = itemProps.error;
-            break;
-          } else {
-            result[arraySchema.property].push(itemProps);
-          }
-        }
-      }
-    }
-
-    return result;
-  },
-
-  validateValue(property, value, object, type, result) {
-    if (wizardSchema[type].required.indexOf(property) > -1 && !value) {
-      result.error = {
-        type: "required",
-        params: { type, property },
-      };
-    }
-
-    let dependent = wizardSchema[type].dependent[property];
-    if (dependent && value && !object[dependent]) {
-      result.error = {
-        type: "dependent",
-        params: { property, dependent },
-      };
-    }
-
-    if (property === "api_body") {
-      try {
-        value = JSON.parse(value);
-      } catch (e) {
-        result.error = {
-          type: "invalid",
-          params: { type, property },
-        };
-      }
-    }
-
-    return result;
-  },
-
-  buildMappedJson(value) {
-    if (typeof value === "string" || Number.isInteger(value)) {
-      return value;
-    }
-    if (!value || !value.length) {
-      return false;
-    }
-
-    let inputs = value;
-    let result = [];
-
-    inputs.forEach((inpt) => {
-      let input = {
-        type: inpt.type,
-      };
-
-      if (inpt.connector) {
-        input.connector = inpt.connector;
-      }
-
-      if (present(inpt.output)) {
-        input.output = inpt.output;
-        input.output_type = snakeCase(inpt.output_type);
-        input.output_connector = inpt.output_connector;
-      }
-
-      if (present(inpt.pairs)) {
-        input.pairs = [];
-
-        inpt.pairs.forEach((pr) => {
-          if (present(pr.key) && present(pr.value)) {
-            let pairParams = {
-              index: pr.index,
-              key: pr.key,
-              key_type: snakeCase(pr.key_type),
-              value: pr.value,
-              value_type: snakeCase(pr.value_type),
-              connector: pr.connector,
-            };
-
-            input.pairs.push(pairParams);
-          }
-        });
-      }
-
-      if (
-        (input.type === "assignment" && present(input.output)) ||
-        present(input.pairs)
-      ) {
-        result.push(input);
-      }
-    });
-
-    if (!result.length) {
-      result = false;
-    }
-
-    return result;
-  },
-
-  remove() {
-    return ajax(`/admin/wizards/wizard/${this.id}`, {
-      type: "DELETE",
-    })
-      .then(() => this.destroy())
-      .catch(popupAjaxError);
+  restart() {
+    CustomWizard.restart(this.id);
  },
 });

 CustomWizard.reopenClass({
-  all() {
-    return ajax("/admin/wizards/wizard", {
-      type: "GET",
-    })
+  skip(wizardId) {
+    ajax({ url: `/w/${wizardId}/skip`, type: "PUT" })
      .then((result) => {
-        return result.wizard_list;
+        CustomWizard.finished(result);
      })
      .catch(popupAjaxError);
  },

-  submissions(wizardId, page = null) {
-    let data = {};
+  restart(wizardId) {
+    ajax({ url: `/w/${wizardId}/skip`, type: "PUT" })
+      .then(() => {
+        window.location.href = `/w/${wizardId}`;
+      })
+      .catch(popupAjaxError);
+  },

-    if (page) {
-      data.page = page;
+  finished(result) {
+    let url = "/";
+    if (result.redirect_on_complete) {
+      url = result.redirect_on_complete;
+    }
+    window.location.href = getUrl(url);
+  },
+
+  build(wizardJson) {
+    if (!wizardJson) {
+      return null;
    }

-    return ajax(`/admin/wizards/submissions/${wizardId}`, {
-      type: "GET",
-      data,
-    })
-      .then((result) => {
-        if (result.wizard) {
-          let fields = [{ id: "username", label: "User" }];
-          let submissions = [];
-          let wizard = result.wizard;
-          let total = result.total;
+    if (!wizardJson.completed && wizardJson.steps) {
+      wizardJson.steps = wizardJson.steps
+        .map((step) => {
+          const stepObj = CustomWizardStep.create(step);
+          stepObj.wizardId = wizardJson.id;

-          result.submissions.forEach((s) => {
-            let submission = {
-              username: s.user,
-            };
-
-            Object.keys(s.fields).forEach((fieldId) => {
-              if (!fields.some((field) => field.id === fieldId)) {
-                fields.push({ id: fieldId, label: s.fields[fieldId].label });
-              }
-              submission[fieldId] = s.fields[fieldId];
-            });
-            submission["submitted_at"] = s.submitted_at;
-            submissions.push(submission);
+          stepObj.fields.sort((a, b) => {
+            return parseFloat(a.number) - parseFloat(b.number);
          });

-          let submittedAt = {
-            id: "submitted_at",
-            label: "Submitted At",
-          };
+          let tabindex = 1;
+          stepObj.fields.forEach((f) => {
+            f.tabindex = tabindex;

-          fields.push(submittedAt);
+            if (["date_time"].includes(f.type)) {
+              tabindex = tabindex + 2;
+            } else {
+              tabindex++;
+            }
+          });

-          return {
-            wizard,
-            fields,
-            submissions,
-            total,
-          };
-        }
-      })
-      .catch(popupAjaxError);
-  },
+          stepObj.fields = stepObj.fields.map((f) => {
+            f.wizardId = wizardJson.id;
+            f.stepId = stepObj.id;
+            return CustomWizardField.create(f);
+          });

-  create(wizardJson = {}) {
-    const wizard = this._super.apply(this);
-    wizard.setProperties(buildProperties(wizardJson));
-    return wizard;
+          return stepObj;
+        })
+        .sort((a, b) => {
+          return parseFloat(a.index) - parseFloat(b.index);
+        });
+    }
+    return CustomWizard.create(wizardJson);
  },
 });

+export function findCustomWizard(wizardId, params = {}) {
+  let url = `/w/${wizardId}.json`;
+
+  let paramKeys = Object.keys(params).filter((k) => {
+    if (k === "wizard_id") {
+      return false;
+    }
+    return !!params[k];
+  });
+
+  if (paramKeys.length) {
+    url += "?";
+    paramKeys.forEach((k, i) => {
+      if (i > 0) {
+        url += "&";
+      }
+      url += `${k}=${params[k]}`;
+    });
+  }
+
+  return ajax(url).then((result) => {
+    return CustomWizard.build(result);
+  });
+}
+
+let _wizard_store;
+
+export function updateCachedWizard(wizard) {
+  _wizard_store = wizard;
+}
+
+export function getCachedWizard() {
+  return _wizard_store;
+}
+
 export default CustomWizard;
--- a/assets/javascripts/discourse/routes/admin-wizards-manager.js.es6
+++ b/assets/javascripts/discourse/routes/admin-wizards-manager.js.es6
@ -1,9 +1,9 @@
-import CustomWizard from "../models/custom-wizard";
+import CustomWizardAdmin from "../models/custom-wizard-admin";
 import DiscourseRoute from "discourse/routes/discourse";

 export default DiscourseRoute.extend({
  model() {
-    return CustomWizard.all();
+    return CustomWizardAdmin.all();
  },

  setupController(controller, model) {
--- a/assets/javascripts/discourse/routes/admin-wizards-submissions-show.js.es6
+++ b/assets/javascripts/discourse/routes/admin-wizards-submissions-show.js.es6
@ -1,11 +1,12 @@
 import { A } from "@ember/array";
 import EmberObject from "@ember/object";
+import CustomWizardAdmin from "../models/custom-wizard-admin";
 import DiscourseRoute from "discourse/routes/discourse";
 import CustomWizard from "../models/custom-wizard";

 export default DiscourseRoute.extend({
  model(params) {
-    return CustomWizard.submissions(params.wizardId);
+    return CustomWizardAdmin.submissions(params.wizardId);
  },

  setupController(controller, model) {
--- a/assets/javascripts/discourse/routes/admin-wizards-wizard-show.js.es6
+++ b/assets/javascripts/discourse/routes/admin-wizards-wizard-show.js.es6
@ -1,4 +1,4 @@
-import CustomWizard from "../models/custom-wizard";
+import CustomWizardAdmin from "../models/custom-wizard-admin";
 import { ajax } from "discourse/lib/ajax";
 import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "I18n";
@ -20,7 +20,9 @@ export default DiscourseRoute.extend({

  setupController(controller, model) {
    const parentModel = this.modelFor("adminWizardsWizard");
-    const wizard = CustomWizard.create(!model || model.create ? {} : model);
+    const wizard = CustomWizardAdmin.create(
+      !model || model.create ? {} : model
+    );
    const fieldTypes = Object.keys(parentModel.field_types).map((type) => {
      return {
        id: type,
--- a/assets/javascripts/discourse/routes/custom-wizard-index.js.es6
+++ b/assets/javascripts/discourse/routes/custom-wizard-index.js.es6
@ -1,4 +1,4 @@
-import { getCachedWizard } from "../models/wizard";
+import { getCachedWizard } from "../models/custom-wizard";
 import Route from "@ember/routing/route";

 export default Route.extend({
@ -11,7 +11,7 @@ export default Route.extend({
      !wizard.completed &&
      wizard.start
    ) {
-      this.replaceWith("step", wizard.start);
+      this.replaceWith("customWizardStep", wizard.start);
    }
  },

@ -19,10 +19,6 @@ export default Route.extend({
    return getCachedWizard();
  },

-  renderTemplate() {
-    this.render("wizard/templates/wizard-index");
-  },
-
  setupController(controller, model) {
    if (model && model.id) {
      const completed = model.get("completed");
--- a/assets/javascripts/discourse/routes/custom-wizard-step.js.es6
+++ b/assets/javascripts/discourse/routes/custom-wizard-step.js.es6
@ -1,10 +1,15 @@
-import WizardI18n from "../lib/wizard-i18n";
-import { getCachedWizard } from "../models/wizard";
+import I18n from "I18n";
+import { getCachedWizard } from "../models/custom-wizard";
 import Route from "@ember/routing/route";

 export default Route.extend({
  beforeModel() {
-    this.set("wizard", getCachedWizard());
+    const wizard = getCachedWizard();
+    this.set("wizard", wizard);
+
+    if (!wizard || !wizard.user || !wizard.permitted || wizard.completed) {
+      this.replaceWith("customWizard");
+    }
  },

  model(params) {
@ -25,10 +30,6 @@ export default Route.extend({
    return model.set("wizardId", this.wizard.id);
  },

-  renderTemplate() {
-    this.render("wizard/templates/step");
-  },
-
  setupController(controller, model) {
    let props = {
      step: model,
@ -38,8 +39,7 @@ export default Route.extend({
    if (!model.permitted) {
      props["stepMessage"] = {
        state: "not-permitted",
-        text:
-          model.permitted_message || WizardI18n("wizard.step_not_permitted"),
+        text: model.permitted_message || I18n.t("wizard.step_not_permitted"),
      };
      if (model.index > 0) {
        props["showReset"] = true;
--- a/assets/javascripts/discourse/routes/custom-wizard.js.es6
+++ b/assets/javascripts/discourse/routes/custom-wizard.js.es6
@ -1,10 +1,13 @@
-import { findCustomWizard, updateCachedWizard } from "../models/wizard";
-import WizardI18n from "../lib/wizard-i18n";
-import Route from "@ember/routing/route";
-import { scheduleOnce } from "@ember/runloop";
-import { getOwner } from "discourse-common/lib/get-owner";
+import { findCustomWizard, updateCachedWizard } from "../models/custom-wizard";
+import I18n from "I18n";
+import DiscourseRoute from "discourse/routes/discourse";
+
+export default DiscourseRoute.extend({
+  titleToken() {
+    const wizard = this.modelFor("custom-wizard");
+    return wizard ? wizard.name || wizard.id : I18n.t("wizard.custom_title");
+  },

-export default Route.extend({
  beforeModel(transition) {
    if (transition.intent.queryParams) {
      this.set("queryParams", transition.intent.queryParams);
@ -16,7 +19,7 @@ export default Route.extend({
  },

  showDialog(wizardModel) {
-    const title = WizardI18n("wizard.incomplete_submission.title", {
+    const title = I18n.t("wizard.incomplete_submission.title", {
      date: moment(wizardModel.submission_last_updated_at).format(
        "MMMM Do YYYY"
      ),
@ -24,14 +27,14 @@ export default Route.extend({

    const buttons = [
      {
-        label: WizardI18n("wizard.incomplete_submission.restart"),
+        label: I18n.t("wizard.incomplete_submission.restart"),
        class: "btn btn-default",
        callback: () => {
          wizardModel.restart();
        },
      },
      {
-        label: WizardI18n("wizard.incomplete_submission.resume"),
+        label: I18n.t("wizard.incomplete_submission.resume"),
        class: "btn btn-primary",
      },
    ];
@ -47,28 +50,15 @@ export default Route.extend({
    updateCachedWizard(model);
  },

-  renderTemplate() {
-    this.render("wizard/templates/wizard");
-  },
-
  setupController(controller, model) {
-    const background = model ? model.get("background") : "";
-
-    scheduleOnce("afterRender", this, function () {
-      $("body").css("background", background);
-
-      if (model && model.id) {
-        $(getOwner(this).rootElement).addClass(model.id.dasherize());
-      }
-    });
-
    controller.setProperties({
      customWizard: true,
      logoUrl: this.siteSettings.logo_small,
      reset: null,
+      model,
    });

-    const stepModel = this.modelFor("step");
+    const stepModel = this.modelFor("custom-wizard-step");
    if (
      model.resume_on_revisit &&
      model.submission_last_updated_at &&
@ -76,5 +66,24 @@ export default Route.extend({
    ) {
      this.showDialog(model);
    }
+
+    const background = model.get("background");
+    if (background) {
+      document.body.style.background = background;
+    }
+  },
+
+  activate() {
+    if (!document.body.classList.contains("custom-wizard")) {
+      document.body.classList.add("custom-wizard");
+    }
+  },
+
+  deactivate() {
+    if (document.body.classList.contains("custom-wizard")) {
+      document.body.classList.remove("custom-wizard");
+    }
+
+    document.body.style.background = "";
  },
 });
--- a/assets/javascripts/discourse/templates/components/custom-wizard-composer-editor.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-composer-editor.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-composer-hyperlink.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-composer-hyperlink.hbs
@ -1,13 +1,13 @@
 <div class="wizard-composer-hyperlink-contents">
-  <h3>{{wizard-i18n "composer.link_dialog_title"}}</h3>
+  <h3>{{i18n "composer.link_dialog_title"}}</h3>
  {{input
    class="composer-link-name"
-    placeholder=(wizard-i18n "composer.link_optional_text")
+    placeholder=(i18n "composer.link_optional_text")
    type="text"
    value=linkName}}
  {{input
    class="composer-link-url"
-    placeholder=(wizard-i18n "composer.link_url_placeholder")
+    placeholder=(i18n "composer.link_url_placeholder")
    type="text"
    value=linkUrl}}
  {{d-button
--- a/assets/javascripts/discourse/templates/components/custom-wizard-date-input.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-date-input.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-date-time-input.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-date-time-input.hbs
@ -1,5 +1,5 @@
 {{#unless timeFirst}}
-  {{wizard-date-input
+  {{custom-wizard-date-input
    date=date
    relativeDate=relativeDate
    onChange=(action "onChangeDate")
@ -8,7 +8,7 @@
 {{/unless}}

 {{#if showTime}}
-  {{wizard-time-input
+  {{custom-wizard-time-input
    date=date
    relativeDate=relativeDate
    onChange=(action "onChangeTime")
@ -17,7 +17,7 @@
 {{/if}}

 {{#if timeFirst}}
-  {{wizard-date-input
+  {{custom-wizard-date-input
    date=date
    relativeDate=relativeDate
    onChange=(action "onChangeDate")
--- a/assets/javascripts/discourse/templates/components/custom-wizard-editor.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-editor.hbs
@ -27,7 +27,7 @@
              <button class="wizard-btn {{b.className}}" {{action b.action b}} title={{b.title}} type="button">
                {{d-icon b.icon}}
                {{#if b.label}}
-                  <span class="d-button-label">{{wizard-i18n b.label}}</span>
+                  <span class="d-button-label">{{i18n b.label}}</span>
                {{/if}}
              </button>
            {{/if}}
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-category.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-category.hbs
@ -0,0 +1,8 @@
+{{custom-wizard-category-selector
+  categories=categories
+  whitelist=field.content
+  onChange=(action (mut categories))
+  tabindex=field.tabindex
+  options=(hash
+    maximum=field.limit
+  )}}
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-checkbox.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-checkbox.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-composer-preview.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-composer-preview.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-composer.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-composer.hbs
@ -1,4 +1,4 @@
-{{wizard-composer-editor
+{{custom-wizard-composer-editor
  field=field
  composer=composer
  wizard=wizard
@ -10,7 +10,7 @@

 <div class="bottom-bar">
  <button class="wizard-btn toggle-preview" {{action "togglePreview"}} type="button">
-    <span class="d-button-label">{{wizard-i18n togglePreviewLabel}}</span>
+    <span class="d-button-label">{{i18n togglePreviewLabel}}</span>
  </button>

  {{#if field.char_counter}}
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-date-time.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-date-time.hbs
@ -1,4 +1,4 @@
-{{wizard-date-time-input
+{{custom-wizard-date-time-input
  date=dateTime
  onChange=(action "onChange")
  tabindex=field.tabindex
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-date.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-date.hbs
@ -1,4 +1,4 @@
-{{wizard-date-input
+{{custom-wizard-date-input
  date=date
  onChange=(action "onChange")
  tabindex=field.tabindex
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-dropdown.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-dropdown.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-group.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-group.hbs
@ -1,10 +1,10 @@
-{{wizard-group-selector
-  groups=wizard.groups
+{{custom-wizard-group-selector
+  groups=site.groups
  field=field
  whitelist=field.content
  value=field.value
  tabindex=field.tabindex
  onChange=(action (mut field.value))
  options=(hash
-    none="group.select"
+    none="select_kit.default_header_text"
  )}}
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-number.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-number.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-tag.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-tag.hbs
@ -1,7 +1,8 @@
-{{wizard-tag-chooser
+{{custom-wizard-tag-chooser
  tags=field.value
-  maximum=field.limit
  tabindex=field.tabindex
  tagGroups=field.tag_groups
  everyTag=true
-}}
+  options=(hash
+    maximum=field.limit
+  )}}
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-text.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-text.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-textarea.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-textarea.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-time.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-time.hbs
@ -1,4 +1,4 @@
-{{wizard-time-input
+{{custom-wizard-time-input
  date=time
  onChange=(action "onChange")
  tabindex=field.tabindex
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-upload.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-upload.hbs
@ -1,8 +1,8 @@
 <label class="wizard-btn wizard-btn-upload-file {{if uploading "disabled"}}" tabindex={{field.tabindex}}>
  {{#if uploading}}
-    {{wizard-i18n "wizard.uploading"}}
+    {{i18n "wizard.uploading"}}
  {{else}}
-    {{wizard-i18n "wizard.upload"}}
+    {{i18n "wizard.upload"}}
    {{d-icon "upload"}}
  {{/if}}

--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-url.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-url.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-user-selector.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-user-selector.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-no-access.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-no-access.hbs
@ -1,7 +1,7 @@
 <div>{{text}}</div>
 <div class="no-access-gutter">
  <button class="wizard-btn primary return-to-site" {{action "skip"}} type="button">
-    {{wizard-i18n "wizard.return_to_site" siteName=siteName}}
+    {{i18n "wizard.return_to_site" siteName=siteName}}
    {{d-icon "sign-out-alt"}}
  </button>
 </div>
--- a/assets/javascripts/discourse/templates/components/custom-wizard-similar-topic.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-similar-topic.hbs
--- a/assets/javascripts/discourse/templates/components/custom-wizard-similar-topics.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-similar-topics.hbs
@ -1,11 +1,11 @@
 {{#if showTopics}}
  <ul>
    {{#each topics as |topic|}}
-      <li>{{wizard-similar-topic topic=topic}}</li>
+      <li>{{custom-wizard-similar-topic topic=topic}}</li>
    {{/each}}
  </ul>
 {{else}}
  <a role="button" class="show-topics" {{action "toggleShowTopics"}}>
-    {{wizard-i18n "realtime_validations.similar_topics.show"}}
+    {{i18n "realtime_validations.similar_topics.show"}}
  </a>
 {{/if}}
--- a/assets/javascripts/discourse/templates/components/custom-wizard-step.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-step.hbs
@ -13,11 +13,11 @@
    <div class="wizard-step-description">{{cookedDescription}}</div>
  {{/if}}

-  {{#wizard-step-form step=step}}
+  {{#custom-wizard-step-form step=step}}
    {{#each step.fields as |field|}}
-      {{wizard-field field=field step=step wizard=wizard}}
+      {{custom-wizard-field field=field step=step wizard=wizard}}
    {{/each}}
-  {{/wizard-step-form}}
+  {{/custom-wizard-step-form}}
 </div>

 <div class="wizard-step-footer">
@ -26,7 +26,7 @@
    <div class="white"></div>
    <div class="black" style={{barStyle}}></div>
    <div class="screen"></div>
-    <span>{{wizard-i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</span>
+    <span>{{i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</span>
  </div>

  <div class="wizard-buttons">
@ -34,23 +34,23 @@
      {{loading-spinner size="small"}}
    {{else}}
      {{#if showQuitButton}}
-        <a href {{action "quit"}} class="action-link quit" tabindex={{secondaryButtonIndex}}>{{wizard-i18n "wizard.quit"}}</a>
+        <a href {{action "quit"}} class="action-link quit" tabindex={{secondaryButtonIndex}}>{{i18n "wizard.quit"}}</a>
      {{/if}}
      {{#if showBackButton}}
-        <a href {{action "backStep"}} class="action-link back" tabindex={{secondaryButtonIndex}}>{{wizard-i18n "wizard.back"}}</a>
+        <a href {{action "backStep"}} class="action-link back" tabindex={{secondaryButtonIndex}}>{{i18n "wizard.back"}}</a>
      {{/if}}
    {{/if}}

    {{#if showNextButton}}
      <button type="button" class="wizard-btn next primary" {{action "nextStep"}} disabled={{saving}} tabindex={{primaryButtonIndex}}>
-        {{wizard-i18n "wizard.next"}}
+        {{i18n "wizard.next"}}
        {{d-icon "chevron-right"}}
      </button>
    {{/if}}

    {{#if showDoneButton}}
      <button type="button" class="wizard-btn done" {{action "done"}} disabled={{saving}} tabindex={{primaryButtonIndex}}>
-        {{wizard-i18n "wizard.done"}}
+        {{i18n "wizard.done_custom"}}
      </button>
    {{/if}}
  </div>
--- a/assets/javascripts/discourse/templates/components/custom-wizard-time-input.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-time-input.hbs
--- a/assets/javascripts/discourse/templates/components/field-validators.hbs
+++ b/assets/javascripts/discourse/templates/components/field-validators.hbs
--- a/assets/javascripts/discourse/templates/components/similar-topics-validator.hbs
+++ b/assets/javascripts/discourse/templates/components/similar-topics-validator.hbs
@ -1,13 +1,13 @@
 <label class={{currentStateClass}}>
  {{#if currentState}}
    {{#if insufficientCharactersCategories}}
-      {{html-safe (wizard-i18n currentStateKey catLinks=catLinks)}}
+      {{html-safe (i18n currentStateKey catLinks=catLinks)}}
    {{else}}
-      {{wizard-i18n currentStateKey}}
+      {{i18n currentStateKey}}
    {{/if}}
  {{/if}}
 </label>

 {{#if showSimilarTopics}}
-  {{wizard-similar-topics topics=similarTopics}}
+  {{custom-wizard-similar-topics topics=similarTopics}}
 {{/if}}
--- a/assets/javascripts/discourse/templates/components/validator.hbs
+++ b/assets/javascripts/discourse/templates/components/validator.hbs
@ -0,0 +1,5 @@
+{{#if isValid}}
+  {{i18n validMessageKey}}
+{{else}}
+  {{i18n invalidMessageKey}}
+{{/if}}
--- a/assets/javascripts/discourse/templates/components/wizard-mapper-selector.hbs
+++ b/assets/javascripts/discourse/templates/components/wizard-mapper-selector.hbs
@ -66,11 +66,13 @@
  {{/if}}

  {{#if showUser}}
-    {{user-selector
-      includeMessageableGroups="true"
+    {{email-group-user-chooser
      placeholderKey=placeholderKey
-      usernames=value
+      value=value
      autocomplete="discourse"
-      onChangeCallback=(action "changeUserValue")}}
+      onChange=(action "changeUserValue")
+      options=(hash
+        includeMessageableGroups="true"
+      )}}
  {{/if}}
 </div>
--- a/assets/javascripts/discourse/templates/custom-wizard-index.hbs
+++ b/assets/javascripts/discourse/templates/custom-wizard-index.hbs
@ -0,0 +1,3 @@
+{{#if noAccess}}
+  {{custom-wizard-no-access text=(i18n noAccessI18nKey) wizardId=wizardId reason=noAccessReason}}
+{{/if}}
--- a/assets/javascripts/discourse/templates/custom-wizard-step.hbs
+++ b/assets/javascripts/discourse/templates/custom-wizard-step.hbs
@ -5,15 +5,16 @@
    </div>
    {{#if showReset}}
      <a role="button" class="reset-wizard" {{action "resetWizard"}}>
-        {{wizard-i18n "wizard.reset"}}
+        {{i18n "wizard.reset"}}
      </a>
    {{/if}}
  </div>
 {{/if}}
 {{#if step.permitted}}
-  {{wizard-step step=step
-                wizard=wizard
-                goNext=(action "goNext")
-                goBack=(action "goBack")
-                showMessage=(action "showMessage")}}
+  {{custom-wizard-step
+    step=step
+    wizard=wizard
+    goNext=(action "goNext")
+    goBack=(action "goBack")
+    showMessage=(action "showMessage")}}
 {{/if}}
--- a/assets/javascripts/discourse/templates/custom-wizard.hbs
+++ b/assets/javascripts/discourse/templates/custom-wizard.hbs
--- a/assets/javascripts/ember_jquery.js
+++ b/assets/javascripts/ember_jquery.js
@ -1,5 +0,0 @@
-//= require legacy/set-prototype-polyfill
-//= require legacy/env
-//= require legacy/jquery
-//= require legacy/ember_include
-//= require legacy/discourse-loader
--- a/assets/javascripts/legacy/bootbox.js
+++ b/assets/javascripts/legacy/bootbox.js
@ -1,717 +0,0 @@
-// discourse-skip-module
-
-/**
- * bootbox.js v3.2.0
- *
- * http://bootboxjs.com/license.txt
- */
-var bootbox =
-  window.bootbox ||
-  (function (document, $) {
-    /*jshint scripturl:true sub:true */
-
-    var _locale = "en",
-      _defaultLocale = "en",
-      _animate = true,
-      _backdrop = "static",
-      _defaultHref = "javascript:;",
-      _classes = "",
-      _btnClasses = {},
-      _icons = {},
-      /* last var should always be the public object we'll return */
-      that = {};
-
-    /**
-     * public API
-     */
-    that.setLocale = function (locale) {
-      for (var i in _locales) {
-        if (i == locale) {
-          _locale = locale;
-          return;
-        }
-      }
-      throw new Error("Invalid locale: " + locale);
-    };
-
-    that.addLocale = function (locale, translations) {
-      if (typeof _locales[locale] === "undefined") {
-        _locales[locale] = {};
-      }
-      for (var str in translations) {
-        _locales[locale][str] = translations[str];
-      }
-    };
-
-    that.setIcons = function (icons) {
-      _icons = icons;
-      if (typeof _icons !== "object" || _icons === null) {
-        _icons = {};
-      }
-    };
-
-    that.setBtnClasses = function (btnClasses) {
-      _btnClasses = btnClasses;
-      if (typeof _btnClasses !== "object" || _btnClasses === null) {
-        _btnClasses = {};
-      }
-    };
-
-    that.alert = function (/*str, label, cb*/) {
-      var str = "",
-        label = _translate("OK"),
-        cb = null;
-
-      switch (arguments.length) {
-        case 1:
-          // no callback, default button label
-          str = arguments[0];
-          break;
-        case 2:
-          // callback *or* custom button label dependent on type
-          str = arguments[0];
-          if (typeof arguments[1] == "function") {
-            cb = arguments[1];
-          } else {
-            label = arguments[1];
-          }
-          break;
-        case 3:
-          // callback and custom button label
-          str = arguments[0];
-          label = arguments[1];
-          cb = arguments[2];
-          break;
-        default:
-          throw new Error("Incorrect number of arguments: expected 1-3");
-      }
-
-      return that.dialog(
-        str,
-        {
-          // only button (ok)
-          label: label,
-          icon: _icons.OK,
-          class: _btnClasses.OK,
-          callback: cb,
-        },
-        {
-          // ensure that the escape key works; either invoking the user's
-          // callback or true to just close the dialog
-          onEscape: cb || true,
-        }
-      );
-    };
-
-    that.confirm = function (/*str, labelCancel, labelOk, cb*/) {
-      var str = "",
-        labelCancel = _translate("CANCEL"),
-        labelOk = _translate("CONFIRM"),
-        cb = null;
-
-      switch (arguments.length) {
-        case 1:
-          str = arguments[0];
-          break;
-        case 2:
-          str = arguments[0];
-          if (typeof arguments[1] == "function") {
-            cb = arguments[1];
-          } else {
-            labelCancel = arguments[1];
-          }
-          break;
-        case 3:
-          str = arguments[0];
-          labelCancel = arguments[1];
-          if (typeof arguments[2] == "function") {
-            cb = arguments[2];
-          } else {
-            labelOk = arguments[2];
-          }
-          break;
-        case 4:
-          str = arguments[0];
-          labelCancel = arguments[1];
-          labelOk = arguments[2];
-          cb = arguments[3];
-          break;
-        default:
-          throw new Error("Incorrect number of arguments: expected 1-4");
-      }
-
-      var cancelCallback = function () {
-        if (typeof cb === "function") {
-          return cb(false);
-        }
-      };
-
-      var confirmCallback = function () {
-        if (typeof cb === "function") {
-          return cb(true);
-        }
-      };
-
-      return that.dialog(
-        str,
-        [
-          {
-            // first button (cancel)
-            label: labelCancel,
-            icon: _icons.CANCEL,
-            class: _btnClasses.CANCEL,
-            callback: cancelCallback,
-          },
-          {
-            // second button (confirm)
-            label: labelOk,
-            icon: _icons.CONFIRM,
-            class: _btnClasses.CONFIRM,
-            callback: confirmCallback,
-          },
-        ],
-        {
-          // escape key bindings
-          onEscape: cancelCallback,
-        }
-      );
-    };
-
-    that.prompt = function (/*str, labelCancel, labelOk, cb, defaultVal*/) {
-      var str = "",
-        labelCancel = _translate("CANCEL"),
-        labelOk = _translate("CONFIRM"),
-        cb = null,
-        defaultVal = "";
-
-      switch (arguments.length) {
-        case 1:
-          str = arguments[0];
-          break;
-        case 2:
-          str = arguments[0];
-          if (typeof arguments[1] == "function") {
-            cb = arguments[1];
-          } else {
-            labelCancel = arguments[1];
-          }
-          break;
-        case 3:
-          str = arguments[0];
-          labelCancel = arguments[1];
-          if (typeof arguments[2] == "function") {
-            cb = arguments[2];
-          } else {
-            labelOk = arguments[2];
-          }
-          break;
-        case 4:
-          str = arguments[0];
-          labelCancel = arguments[1];
-          labelOk = arguments[2];
-          cb = arguments[3];
-          break;
-        case 5:
-          str = arguments[0];
-          labelCancel = arguments[1];
-          labelOk = arguments[2];
-          cb = arguments[3];
-          defaultVal = arguments[4];
-          break;
-        default:
-          throw new Error("Incorrect number of arguments: expected 1-5");
-      }
-
-      var header = str;
-
-      // let's keep a reference to the form object for later
-      var form = $("<form></form>");
-      form.append(
-        "<input class='input-block-level' autocomplete=off type=text value='" +
-          defaultVal +
-          "' />"
-      );
-
-      var cancelCallback = function () {
-        if (typeof cb === "function") {
-          // yep, native prompts dismiss with null, whereas native
-          // confirms dismiss with false...
-          return cb(null);
-        }
-      };
-
-      var confirmCallback = function () {
-        if (typeof cb === "function") {
-          return cb(form.find("input[type=text]").val());
-        }
-      };
-
-      var div = that.dialog(
-        form,
-        [
-          {
-            // first button (cancel)
-            label: labelCancel,
-            icon: _icons.CANCEL,
-            class: _btnClasses.CANCEL,
-            callback: cancelCallback,
-          },
-          {
-            // second button (confirm)
-            label: labelOk,
-            icon: _icons.CONFIRM,
-            class: _btnClasses.CONFIRM,
-            callback: confirmCallback,
-          },
-        ],
-        {
-          // prompts need a few extra options
-          header: header,
-          // explicitly tell dialog NOT to show the dialog...
-          show: false,
-          onEscape: cancelCallback,
-        }
-      );
-
-      // ... the reason the prompt needs to be hidden is because we need
-      // to bind our own "shown" handler, after creating the modal but
-      // before any show(n) events are triggered
-      // @see https://github.com/makeusabrew/bootbox/issues/69
-
-      div.on("shown", function () {
-        form.find("input[type=text]").focus();
-
-        // ensure that submitting the form (e.g. with the enter key)
-        // replicates the behaviour of a normal prompt()
-        form.on("submit", function (e) {
-          e.preventDefault();
-          div.find(".btn-primary").click();
-        });
-      });
-
-      div.modal("show");
-
-      return div;
-    };
-
-    that.dialog = function (str, handlers, options) {
-      var buttons = "",
-        callbacks = [];
-
-      if (!options) {
-        options = {};
-      }
-
-      // check for single object and convert to array if necessary
-      if (typeof handlers === "undefined") {
-        handlers = [];
-      } else if (typeof handlers.length == "undefined") {
-        handlers = [handlers];
-      }
-
-      var i = handlers.length;
-      while (i--) {
-        var label = null,
-          href = null,
-          _class = "btn-default",
-          icon = "",
-          callback = null;
-
-        if (
-          typeof handlers[i]["label"] == "undefined" &&
-          typeof handlers[i]["class"] == "undefined" &&
-          typeof handlers[i]["callback"] == "undefined"
-        ) {
-          // if we've got nothing we expect, check for condensed format
-
-          var propCount = 0, // condensed will only match if this == 1
-            property = null; // save the last property we found
-
-          // be nicer to count the properties without this, but don't think it's possible...
-          for (var j in handlers[i]) {
-            property = j;
-            if (++propCount > 1) {
-              // forget it, too many properties
-              break;
-            }
-          }
-
-          if (propCount == 1 && typeof handlers[i][j] == "function") {
-            // matches condensed format of label -> function
-            handlers[i]["label"] = property;
-            handlers[i]["callback"] = handlers[i][j];
-          }
-        }
-
-        if (typeof handlers[i]["callback"] == "function") {
-          callback = handlers[i]["callback"];
-        }
-
-        if (handlers[i]["class"]) {
-          _class = handlers[i]["class"];
-        } else if (i == handlers.length - 1 && handlers.length <= 2) {
-          // always add a primary to the main option in a two-button dialog
-          _class = "btn-primary";
-        }
-
-        // See: https://github.com/makeusabrew/bootbox/pull/114
-        // Upgrade to official bootbox release when it gets merged.
-        if (handlers[i]["link"] !== true) {
-          _class = "btn " + _class;
-        }
-
-        if (handlers[i]["label"]) {
-          label = handlers[i]["label"];
-        } else {
-          label = "Option " + (i + 1);
-        }
-
-        if (handlers[i]["icon"]) {
-          icon = handlers[i]["icon"];
-        }
-
-        if (handlers[i]["href"]) {
-          href = handlers[i]["href"];
-        } else {
-          href = _defaultHref;
-        }
-
-        buttons =
-          buttons +
-          "<a data-handler='" +
-          i +
-          "' class='" +
-          _class +
-          "' href='" +
-          href +
-          "'>" +
-          icon +
-          "<span class='d-button-label'>" +
-          label +
-          "</span></a>";
-
-        callbacks[i] = callback;
-      }
-
-      // @see https://github.com/makeusabrew/bootbox/issues/46#issuecomment-8235302
-      // and https://github.com/twitter/bootstrap/issues/4474
-      // for an explanation of the inline overflow: hidden
-      // @see https://github.com/twitter/bootstrap/issues/4854
-      // for an explanation of tabIndex=-1
-
-      var parts = [
-        "<div class='bootbox modal' tabindex='-1' style='overflow:hidden;'>",
-      ];
-
-      if (options["header"]) {
-        var closeButton = "";
-        if (
-          typeof options["headerCloseButton"] == "undefined" ||
-          options["headerCloseButton"]
-        ) {
-          closeButton =
-            "<a href='" + _defaultHref + "' class='close'>&times;</a>";
-        }
-
-        parts.push(
-          "<div class='modal-header'>" +
-            closeButton +
-            "<h3>" +
-            options["header"] +
-            "</h3></div>"
-        );
-      }
-
-      // push an empty body into which we'll inject the proper content later
-      parts.push("<div class='modal-body'></div>");
-
-      if (buttons) {
-        parts.push("<div class='modal-footer'>" + buttons + "</div>");
-      }
-
-      parts.push("</div>");
-
-      var div = $(parts.join("\n"));
-
-      // check whether we should fade in/out
-      var shouldFade =
-        typeof options.animate === "undefined" ? _animate : options.animate;
-
-      if (shouldFade) {
-        div.addClass("fade");
-      }
-
-      var optionalClasses =
-        typeof options.classes === "undefined" ? _classes : options.classes;
-      if (optionalClasses) {
-        div.addClass(optionalClasses);
-      }
-
-      // now we've built up the div properly we can inject the content whether it was a string or a jQuery object
-      div.find(".modal-body").html(str);
-
-      function onCancel(source) {
-        // for now source is unused, but it will be in future
-        var hideModal = null;
-        if (typeof options.onEscape === "function") {
-          // @see https://github.com/makeusabrew/bootbox/issues/91
-          hideModal = options.onEscape();
-        }
-
-        if (hideModal !== false) {
-          div.modal("hide");
-        }
-      }
-
-      // hook into the modal's keyup trigger to check for the escape key
-      div.on("keyup.dismiss.modal", function (e) {
-        // any truthy value passed to onEscape will dismiss the dialog
-        // as long as the onEscape function (if defined) doesn't prevent it
-        if (e.which === 27 && options.onEscape !== false) {
-          onCancel("escape");
-        }
-      });
-
-      // handle close buttons too
-      div.on("click", "a.close", function (e) {
-        e.preventDefault();
-        onCancel("close");
-      });
-
-      // well, *if* we have a primary - give the first dom element focus
-      div.on("shown.bs.modal", function () {
-        div.find("a.btn-primary:first").focus();
-      });
-
-      div.on("hidden.bs.modal", function () {
-        div.remove();
-      });
-
-      // wire up button handlers
-      div.on("click", ".modal-footer a", function (e) {
-        var self = this;
-        Ember.run(function () {
-          var handler = $(self).data("handler"),
-            cb = callbacks[handler],
-            hideModal = null;
-
-          // sort of @see https://github.com/makeusabrew/bootbox/pull/68 - heavily adapted
-          // if we've got a custom href attribute, all bets are off
-          if (
-            typeof handler !== "undefined" &&
-            typeof handlers[handler]["href"] !== "undefined"
-          ) {
-            return;
-          }
-
-          e.preventDefault();
-
-          if (typeof cb === "function") {
-            hideModal = cb(e);
-          }
-
-          // the only way hideModal *will* be false is if a callback exists and
-          // returns it as a value. in those situations, don't hide the dialog
-          // @see https://github.com/makeusabrew/bootbox/pull/25
-          if (hideModal !== false) {
-            div.modal("hide");
-          }
-        });
-      });
-
-      // stick the modal right at the bottom of the main body out of the way
-      (that.$body || $("body")).append(div);
-
-      div.modal({
-        // unless explicitly overridden take whatever our default backdrop value is
-        backdrop:
-          typeof options.backdrop === "undefined"
-            ? _backdrop
-            : options.backdrop,
-        // ignore bootstrap's keyboard options; we'll handle this ourselves (more fine-grained control)
-        keyboard: false,
-        // @ see https://github.com/makeusabrew/bootbox/issues/69
-        // we *never* want the modal to be shown before we can bind stuff to it
-        // this method can also take a 'show' option, but we'll only use that
-        // later if we need to
-        show: false,
-      });
-
-      // @see https://github.com/makeusabrew/bootbox/issues/64
-      // @see https://github.com/makeusabrew/bootbox/issues/60
-      // ...caused by...
-      // @see https://github.com/twitter/bootstrap/issues/4781
-      div.on("show", function (e) {
-        $(document).off("focusin.modal");
-      });
-
-      if (typeof options.show === "undefined" || options.show === true) {
-        div.modal("show");
-      }
-
-      return div;
-    };
-
-    /**
-     * #modal is deprecated in v3; it can still be used but no guarantees are
-     * made - have never been truly convinced of its merit but perhaps just
-     * needs a tidyup and some TLC
-     */
-    that.modal = function (/*str, label, options*/) {
-      var str;
-      var label;
-      var options;
-
-      var defaultOptions = {
-        onEscape: null,
-        keyboard: true,
-        backdrop: _backdrop,
-      };
-
-      switch (arguments.length) {
-        case 1:
-          str = arguments[0];
-          break;
-        case 2:
-          str = arguments[0];
-          if (typeof arguments[1] == "object") {
-            options = arguments[1];
-          } else {
-            label = arguments[1];
-          }
-          break;
-        case 3:
-          str = arguments[0];
-          label = arguments[1];
-          options = arguments[2];
-          break;
-        default:
-          throw new Error("Incorrect number of arguments: expected 1-3");
-      }
-
-      defaultOptions["header"] = label;
-
-      if (typeof options == "object") {
-        options = $.extend(defaultOptions, options);
-      } else {
-        options = defaultOptions;
-      }
-
-      return that.dialog(str, [], options);
-    };
-
-    that.hideAll = function () {
-      $(".bootbox").modal("hide");
-    };
-
-    that.animate = function (animate) {
-      _animate = animate;
-    };
-
-    that.backdrop = function (backdrop) {
-      _backdrop = backdrop;
-    };
-
-    that.classes = function (classes) {
-      _classes = classes;
-    };
-
-    /**
-     * private API
-     */
-
-    /**
-     * standard locales. Please add more according to ISO 639-1 standard. Multiple language variants are
-     * unlikely to be required. If this gets too large it can be split out into separate JS files.
-     */
-    var _locales = {
-      br: {
-        OK: "OK",
-        CANCEL: "Cancelar",
-        CONFIRM: "Sim",
-      },
-      da: {
-        OK: "OK",
-        CANCEL: "Annuller",
-        CONFIRM: "Accepter",
-      },
-      de: {
-        OK: "OK",
-        CANCEL: "Abbrechen",
-        CONFIRM: "Akzeptieren",
-      },
-      en: {
-        OK: "OK",
-        CANCEL: "Cancel",
-        CONFIRM: "OK",
-      },
-      es: {
-        OK: "OK",
-        CANCEL: "Cancelar",
-        CONFIRM: "Aceptar",
-      },
-      fr: {
-        OK: "OK",
-        CANCEL: "Annuler",
-        CONFIRM: "D'accord",
-      },
-      it: {
-        OK: "OK",
-        CANCEL: "Annulla",
-        CONFIRM: "Conferma",
-      },
-      nl: {
-        OK: "OK",
-        CANCEL: "Annuleren",
-        CONFIRM: "Accepteren",
-      },
-      pl: {
-        OK: "OK",
-        CANCEL: "Anuluj",
-        CONFIRM: "Potwierdź",
-      },
-      ru: {
-        OK: "OK",
-        CANCEL: "Отмена",
-        CONFIRM: "Применить",
-      },
-      zh_CN: {
-        OK: "OK",
-        CANCEL: "取消",
-        CONFIRM: "确认",
-      },
-      zh_TW: {
-        OK: "OK",
-        CANCEL: "取消",
-        CONFIRM: "確認",
-      },
-    };
-
-    function _translate(str, locale) {
-      // we assume if no target locale is probided then we should take it from current setting
-      if (typeof locale === "undefined") {
-        locale = _locale;
-      }
-      if (typeof _locales[locale][str] === "string") {
-        return _locales[locale][str];
-      }
-
-      // if we couldn't find a lookup then try and fallback to a default translation
-
-      if (locale != _defaultLocale) {
-        return _translate(str, _defaultLocale);
-      }
-
-      // if we can't do anything then bail out with whatever string was passed in - last resort
-      return str;
-    }
-
-    return that;
-  })(document, window.jQuery);
-
-// @see https://github.com/makeusabrew/bootbox/issues/71
-window.bootbox = bootbox;
-
-define("bootbox", ["exports"], function (__exports__) {
-  __exports__.default = window.bootbox;
-});
--- a/Mehr anzeigen
+++ b/Mehr anzeigen