discourse/app/assets/javascripts/admin/controllers/modals/admin-install-theme.js.es6

import ModalFunctionality from "discourse/mixins/modal-functionality";
import { ajax } from "discourse/lib/ajax";
import { popupAjaxError } from "discourse/lib/ajax-error";
import {
  default as computed,
  observes
} from "ember-addons/ember-computed-decorators";
import { THEMES, COMPONENTS } from "admin/models/theme";

const MIN_NAME_LENGTH = 4;

// TODO: use a central repository for themes/components
const POPULAR_THEMES = [
  {
    name: "Graceful",
    value: "https://github.com/discourse/graceful",
    preview: "https://theme-creator.discourse.org/theme/awesomerobot/graceful",
    description: "A light and graceful theme for Discourse.",
    meta_url:
      "https://meta.discourse.org/t/a-graceful-theme-for-discourse/93040"
  },
  {
    name: "Material Design Theme",
    value: "https://github.com/discourse/material-design-stock-theme",
    preview: "https://newmaterial.trydiscourse.com",
    description:
      "Inspired by Material Design, this theme comes with several color palettes (incl. a dark one).",
    meta_url: "https://meta.discourse.org/t/material-design-stock-theme/47142"
  },
  {
    name: "Minima",
    value: "https://github.com/discourse/minima",
    preview: "https://theme-creator.discourse.org/theme/awesomerobot/minima",
    description: "A minimal theme with reduced UI elements and focus on text.",
    meta_url:
      "https://meta.discourse.org/t/minima-a-minimal-theme-for-discourse/108178"
  },
  {
    name: "Sam's Simple Theme",
    value: "https://github.com/discourse/discourse-simple-theme",
    preview: "https://theme-creator.discourse.org/theme/sam/simple",
    description:
      "Simplified front page design with classic colors and typography.",
    meta_url:
      "https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552"
  },
  {
    name: "Vincent",
    value: "https://github.com/discourse/discourse-vincent-theme",
    preview: "https://theme-creator.discourse.org/theme/awesomerobot/vincent",
    description: "An elegant dark theme with a few color palettes.",
    meta_url: "https://meta.discourse.org/t/discourse-vincent-theme/76662"
  },
  {
    name: "Alternative Logos",
    value: "https://github.com/discourse/discourse-alt-logo",
    description: "Add alternative logos for dark / light themes.",
    meta_url:
      "https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502",
    component: true
  },
  {
    name: "Brand Header Theme Component",
    value: "https://github.com/discourse/discourse-brand-header",
    description:
      "Add an extra top header with your logo, navigation links and social icons.",
    meta_url: "https://meta.discourse.org/t/brand-header-theme-component/77977",
    component: true
  },
  {
    name: "Custom Header Links",
    value: "https://github.com/discourse/discourse-custom-header-links",
    preview:
      "https://theme-creator.discourse.org/theme/Johani/custom-header-links",
    description: "Easily add custom text-based links to the header.",
    meta_url: "https://meta.discourse.org/t/custom-header-links/90588",
    component: true
  },
  {
    name: "Category Banners",
    value: "https://github.com/discourse/discourse-category-banners",
    preview:
      "https://theme-creator.discourse.org/theme/awesomerobot/discourse-category-banners",
    description:
      "Show banners on category pages using your existing category details.",
    meta_url: "https://meta.discourse.org/t/discourse-category-banners/86241",
    component: true
  },
  {
    name: "Hamburger Theme Selector",
    value: "https://github.com/discourse/discourse-hamburger-theme-selector",
    description:
      "Displays a theme selector in the hamburger menu provided there is more than one user-selectable theme.",
    meta_url: "https://meta.discourse.org/t/hamburger-theme-selector/61210",
    component: true
  },
  {
    name: "Header submenus",
    value: "https://github.com/discourse/discourse-header-submenus",
    preview: "https://theme-creator.discourse.org/theme/Johani/header-submenus",
    description: "Lets you build a header menu with submenus (dropdowns).",
    meta_url: "https://meta.discourse.org/t/header-submenus/94584",
    component: true
  }
];

export default Ember.Controller.extend(ModalFunctionality, {
  popular: Ember.computed.equal("selection", "popular"),
  local: Ember.computed.equal("selection", "local"),
  remote: Ember.computed.equal("selection", "remote"),
  create: Ember.computed.equal("selection", "create"),
  selection: "popular",
  adminCustomizeThemes: Ember.inject.controller(),
  loading: false,
  keyGenUrl: "/admin/themes/generate_key_pair",
  importUrl: "/admin/themes/import",
  recordType: "theme",
  checkPrivate: Ember.computed.match("uploadUrl", /^git/),
  localFile: null,
  uploadUrl: null,
  urlPlaceholder: "https://github.com/discourse/sample_theme",
  advancedVisible: false,
  themesController: Ember.inject.controller("adminCustomizeThemes"),
  createTypes: [
    { name: I18n.t("admin.customize.theme.theme"), value: THEMES },
    { name: I18n.t("admin.customize.theme.component"), value: COMPONENTS }
  ],
  selectedType: Ember.computed.alias("themesController.currentTab"),
  component: Ember.computed.equal("selectedType", COMPONENTS),

  @computed("themesController.installedThemes")
  themes(installedThemes) {
    return POPULAR_THEMES.map(t => {
      if (installedThemes.includes(t.name)) {
        Ember.set(t, "installed", true);
      }
      return t;
    });
  },

  @computed(
    "loading",
    "remote",
    "uploadUrl",
    "local",
    "localFile",
    "create",
    "nameTooShort"
  )
  installDisabled(
    isLoading,
    isRemote,
    uploadUrl,
    isLocal,
    localFile,
    isCreate,
    nameTooShort
  ) {
    return (
      isLoading ||
      (isRemote && !uploadUrl) ||
      (isLocal && !localFile) ||
      (isCreate && nameTooShort)
    );
  },

  @observes("privateChecked")
  privateWasChecked() {
    this.get("privateChecked")
      ? this.set("urlPlaceholder", "git@github.com:discourse/sample_theme.git")
      : this.set("urlPlaceholder", "https://github.com/discourse/sample_theme");

    const checked = this.get("privateChecked");
    if (checked && !this._keyLoading) {
      this._keyLoading = true;
      ajax(this.get("keyGenUrl"), { method: "POST" })
        .then(pair => {
          this.setProperties({
            privateKey: pair.private_key,
            publicKey: pair.public_key
          });
        })
        .catch(popupAjaxError)
        .finally(() => {
          this._keyLoading = false;
        });
    }
  },

  @computed("name")
  nameTooShort(name) {
    return !name || name.length < MIN_NAME_LENGTH;
  },

  @computed("component")
  placeholder(component) {
    if (component) {
      return I18n.t("admin.customize.theme.component_name");
    } else {
      return I18n.t("admin.customize.theme.theme_name");
    }
  },

  @computed("selection")
  submitLabel(selection) {
    return `admin.customize.theme.${
      selection === "create" ? "create" : "install"
    }`;
  },

  @computed("privateChecked", "checkPrivate", "publicKey")
  showPublicKey(privateChecked, checkPrivate, publicKey) {
    return privateChecked && checkPrivate && publicKey;
  },

  actions: {
    uploadLocaleFile() {
      this.set("localFile", $("#file-input")[0].files[0]);
    },

    toggleAdvanced() {
      this.toggleProperty("advancedVisible");
    },

    installThemeFromList(url) {
      this.set("uploadUrl", url);
      this.send("installTheme");
    },

    installTheme() {
      if (this.get("create")) {
        this.set("loading", true);
        const theme = this.store.createRecord(this.get("recordType"));
        theme
          .save({ name: this.get("name"), component: this.get("component") })
          .then(() => {
            this.get("themesController").send("addTheme", theme);
            this.send("closeModal");
          })
          .catch(popupAjaxError)
          .finally(() => this.set("loading", false));

        return;
      }

      let options = {
        type: "POST"
      };

      if (this.get("local")) {
        options.processData = false;
        options.contentType = false;
        options.data = new FormData();
        options.data.append("theme", this.get("localFile"));
      }

      if (this.get("remote") || this.get("popular")) {
        options.data = {
          remote: this.get("uploadUrl"),
          branch: this.get("branch")
        };

        if (this.get("privateChecked")) {
          options.data.private_key = this.get("privateKey");
        }
      }

      if (this.get("model.user_id")) {
        // Used by theme-creator
        options.data["user_id"] = this.get("model.user_id");
      }

      this.set("loading", true);
      ajax(this.get("importUrl"), options)
        .then(result => {
          const theme = this.store.createRecord(
            this.get("recordType"),
            result.theme
          );
          this.get("adminCustomizeThemes").send("addTheme", theme);
          this.send("closeModal");
        })
        .then(() => {
          this.setProperties({ privateKey: null, publicKey: null });
        })
        .catch(popupAjaxError)
        .finally(() => this.set("loading", false));
    }
  }
});