Can edit settings on the embedding page

app/assets/javascripts/admin/components/embedding-setting.js.es6

@@ -0,0 +1,23 @@
+import computed from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Component.extend({
+  classNames: ['embed-setting'],
+
+  @computed('field')
+  inputId(field) { return field.dasherize(); },
+
+  @computed('field')
+  translationKey(field) { return `admin.embedding.${field}`; },
+
+  @computed('type')
+  isCheckbox(type) { return type === "checkbox"; },
+
+  @computed('value')
+  checked: {
+    get(value) { return !!value; },
+    set(value) {
+      this.set('value', value); 
+      return value;
+    }
+  }
+});

app/assets/javascripts/admin/components/highlighted-code.js.es6

@@ -0,0 +1,12 @@
+import { on, observes } from 'ember-addons/ember-computed-decorators';
+import highlightSyntax from 'discourse/lib/highlight-syntax';
+
+export default Ember.Component.extend({
+
+  @on('didInsertElement')
+  @observes('code')
+  _refresh: function() {
+    highlightSyntax(this.$());
+  }
+
+});

app/assets/javascripts/admin/controllers/admin-embedding.js.es6

@@ -1,9 +1,46 @@
+import computed from 'ember-addons/ember-computed-decorators';
+import { popupAjaxError } from 'discourse/lib/ajax-error';
+
 export default Ember.Controller.extend({
+  saved: false,
   embedding: null,
 
+  // show settings if we have at least one created host
+  @computed('embedding.embeddable_hosts.@each.isCreated')
+  showSecondary() {
+    const hosts = this.get('embedding.embeddable_hosts');
+    return hosts.length && hosts.findProperty('isCreated');
+  },
+
+  @computed('embedding.base_url')
+  embeddingCode(baseUrl) {
+
+    const html =
+`<div id='discourse-comments'></div>
+
+<script type="text/javascript">
+  DiscourseEmbed = { discourseUrl: '${baseUrl}/',
+                     discourseEmbedUrl: 'REPLACE_ME' };
+
+  (function() {
+    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
+    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
+  })();
+</script>`;
+
+    return html;
+  },
+
   actions: {
     saveChanges() {
-      this.get('embedding').update({});
+      const embedding = this.get('embedding');
+      const updates = embedding.getProperties(embedding.get('fields'));
+
+      this.set('saved', false);
+      this.get('embedding').update(updates).then(() => {
+        this.set('saved', true);
+      }).catch(popupAjaxError);
     },
 
     addHost() {

app/assets/javascripts/admin/templates/components/embedding-setting.hbs

@@ -0,0 +1,11 @@
+{{#if isCheckbox}}
+  <label for={{inputId}}>
+    {{input checked=checked id=inputId type="checkbox"}}
+    {{i18n translationKey}}
+  </label>
+{{else}}
+  <label for={{inputId}}>{{i18n translationKey}}</label>
+  {{input value=value id=inputId}}
+{{/if}}
+
+<div class='clearfix'></div>

app/assets/javascripts/admin/templates/components/highlighted-code.hbs

@@ -0,0 +1 @@
+<pre><code class={{lang}}>{{code}}</code></pre>

app/assets/javascripts/admin/templates/embedding.hbs

@@ -1,15 +1,61 @@
-{{#if embedding.embeddable_hosts}}
-  <table>
-    <tr>
-      <th style='width: 50%'>{{i18n "admin.embedding.host"}}</th>
-      <th style='width: 30%'>{{i18n "admin.embedding.category"}}</th>
-      <th style='width: 20%'>&nbsp;</th>
-    </tr>
-    {{#each embedding.embeddable_hosts as |host|}}
-      {{embeddable-host host=host deleteHost="deleteHost"}}
-    {{/each}}
-  </table>
+<div class='embeddable-hosts'>
+  {{#if embedding.embeddable_hosts}}
+    <table class='embedding'>
+      <tr>
+        <th style='width: 50%'>{{i18n "admin.embedding.host"}}</th>
+        <th style='width: 30%'>{{i18n "admin.embedding.category"}}</th>
+        <th style='width: 20%'>&nbsp;</th>
+      </tr>
+      {{#each embedding.embeddable_hosts as |host|}}
+        {{embeddable-host host=host deleteHost="deleteHost"}}
+      {{/each}}
+    </table>
+  {{else}}
+    <p>{{i18n "admin.embedding.get_started"}}</p>
+  {{/if}}
+
+  {{d-button label="admin.embedding.add_host" action="addHost" icon="plus" class="btn-primary add-host"}}
+</div>
+
+{{#if showSecondary}}
+  <div class='embedding-secondary'>
+    <p>{{{i18n "admin.embedding.sample"}}}</p>
+    {{highlighted-code code=embeddingCode lang="html"}}
+  </div>
+
+  <hr>
+
+  <div class='embedding-secondary'>
+    <h3>{{i18n "admin.embedding.settings"}}</h3>
+
+    {{embedding-setting field="embed_by_username" value=embedding.embed_by_username}}
+    {{embedding-setting field="embed_post_limit" value=embedding.embed_post_limit}}
+    {{embedding-setting field="embed_truncate" value=embedding.embed_truncate type="checkbox"}}
+  </div>
+
+  <div class='embedding-secondary'>
+    <h3>{{i18n "admin.embedding.feed_settings"}}</h3>
+    <p class="description">{{i18n "admin.embedding.feed_description"}}</p>
+
+    {{embedding-setting field="feed_polling_enabled" value=embedding.feed_polling_enabled type="checkbox"}}
+    {{embedding-setting field="feed_polling_url" value=embedding.feed_polling_url}}
+    {{embedding-setting field="embed_username_key_from_feed" value=embedding.embed_username_key_from_feed}}
+  </div>
+
+  <div class='embedding-secondary'>
+    <h3>{{i18n "admin.embedding.crawling_settings"}}</h3>
+    <p class="description">{{i18n "admin.embedding.crawling_description"}}</p>
+
+    {{embedding-setting field="embed_whitelist_selector" value=embedding.embed_whitelist_selector}}
+    {{embedding-setting field="embed_blacklist_selector" value=embedding.embed_blacklist_selector}}
+  </div>
+
+  <div class='embedding-secondary'>
+    {{d-button label="admin.embedding.save"
+               action="saveChanges"
+               class="btn-primary embed-save"
+               disabled=embedding.isSaving}}
+
+    {{#if saved}}{{i18n "saved"}}{{/if}}
+  </div>
 {{/if}}
-
-{{d-button label="admin.embedding.add_host" action="addHost" icon="plus" class="btn-primary"}}
-