[MOD-49][Feature]Add moderation setup page and clean up (#6)

* Add moderation setup page skeleton and clean up

* Do more things

* Final touches

* Reorg and i18n ify

* More fixes and trimmings

* Remove bootstrap whitelist

* Cleanup

* error -> i18n

* Lets us variables

* Fix typo

* Make tests work properly

* Updates

* Allow global variables to be set for i18n

* Correct translation issues

* Code review

* Add sass-lint

* Update configs

.sass-lint.yml

@@ -0,0 +1,6 @@
+files:
+  include:
+    - 'app/styles/**/*.s+(a|c)ss'
+    - 'app/components/**/*.s+(a|c)ss'
+options:
+  indentation: [2, {size: 4}]

app/app.js

@@ -3,11 +3,7 @@ import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-let App;
-
-Ember.MODEL_FACTORY_INJECTIONS = true;
-
-App = Ember.Application.extend({
+let App = Ember.Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
   Resolver

app/components/form-block-radiobutton/component.js

@@ -0,0 +1,24 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    classNames: ['osf-box'],
+
+    title: null,
+    description: null,
+    value: null,
+    // Namespace for radiobuttons
+    name: null,
+
+    // Bound attribute
+    attribute: null,
+
+    checked: Ember.computed('attribute', 'value', function() {
+        return this.get('value') == this.get('attribute') ? 'checked' : null;
+    }),
+
+    click(event) {
+        this.set('attribute', this.get('value'));
+        event.preventDefault();
+        return false;
+    }
+});

app/components/form-block-radiobutton/style.scss

@@ -0,0 +1,29 @@
+& {
+  cursor: pointer;
+  padding: 18px;
+  margin: 25px;
+  background: $color-panel-bg;
+
+  .radio {
+    text-align: center;
+  }
+
+  .text {
+    width: 100%;
+  }
+
+  input[type="radio"] {
+    margin: 0px;
+  }
+
+  // Make centering a radio button possible
+  .row {
+    display: table;
+
+    > * {
+      display: table-cell;
+      float: none;
+      vertical-align: middle;
+    }
+  }
+}

app/components/form-block-radiobutton/template.hbs

@@ -0,0 +1,10 @@
+<div class="row">
+    <div class="col-xs-1 radio">
+        <input type="radio" name={{name}} value={{value}}  aria-label={{title}} checked={{checked}}>
+    </div>
+
+    <div class="col-xs-11 text">
+        <h4 class="f-w-xl">{{title}}</h4>
+        <p>{{description}}</p>
+    </div>
+</div>

app/components/form-block/component.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    tagName: 'section',
+    classNameBindings: ['disabled'],
+
+    title: null,
+    disabled: false,
+});

app/components/form-block/style.scss

@@ -0,0 +1,12 @@
+& {
+  margin-top: 20px;
+  background: white;
+  padding: 10px 20px 20px;
+  box-shadow: 0 0 3px $color-border;
+}
+
+& > header {
+  display: block;
+  font-size: 16px;
+  margin: 1rem;
+}

app/components/form-block/template.hbs

@@ -0,0 +1,8 @@
+<header>
+    <div class="section-header">
+        <h4 class="f-w-md">{{title}}</h4>
+        <p class="text-muted text-smaller">{{description}}</p>
+    </div>
+</header>
+
+{{yield}}

app/components/moderation-base/component.js

@@ -16,8 +16,8 @@ export default Ember.Component.extend({
     theme: Ember.inject.service(),
     tabs: Ember.computed('i18n.locale', function(){
         return [
-            { name: this.get('i18n').t('moderation_base.moderation_tab'), route: 'provider.moderation'},
-            { name: this.get('i18n').t('moderation_base.settings_tab'), route: 'provider.settings'},
+            { name: this.get('i18n').t('moderation_base.moderation_tab'), route: 'preprints.provider.moderation'},
+            { name: this.get('i18n').t('moderation_base.settings_tab'), route: 'preprints.provider.settings'},
         ]}),
     breadCrumbs: Ember.computed('navigator.currentPath', function(){
         let crumbs = this.get('navigator.currentPath').split('.');

app/components/start-moderating/component.js

@@ -0,0 +1,39 @@
+import Ember from 'ember';
+
+
+export default Ember.Component.extend({
+    tagName: 'button',
+    attributeBindings: ['disabled'],
+    classNames: ['btn', 'btn-success', 'btn-lg'],
+
+    disabled: false,
+    choiceRequired: false,
+
+    providers: [],
+    selectedProvider: null,
+
+    click() {
+        if (this.get('providers.length') > 1) {
+            this.set('choiceRequired', true);
+            this.set('selectedProvider', this.get('providers.firstObject'));
+            return;
+        }
+        this.setupProvider(this.get('providers.firstObject'));
+    },
+
+    setupProvider(provider) {
+        this.set('disabled', true);
+        this.get('action')(provider);
+    },
+
+    actions: {
+        submit() {
+            this.setupProvider(this.get('selectedProvider'));
+        },
+
+        cancel() {
+            this.set('disabled', false);
+            this.set('choiceRequired', false);
+        }
+    }
+});

app/components/start-moderating/template.hbs

@@ -0,0 +1,32 @@
+{{t "setup.start"}}
+
+{{#if choiceRequired}}
+
+    {{! Seems to be the best way to style the modal for just this component. Open to new solutions or ideas}}
+    {{! classNames don't apply to the modal itself and renderInPlace seems to break things}}
+    <style>
+        .modal-dialog {
+          max-width: 525px;
+        }
+    </style>
+
+    {{#bs-modal onSubmit=(action "submit") onHide=(action "cancel") as |modal|}}
+        {{#modal.header}}
+            <h4 class="modal-title">{{t "setup.multiple_providers"}}</h4>
+        {{/modal.header}}
+        {{#modal.body}}
+            {{t "setup.which"}}
+            {{#each providers as |provider index|}}
+                <div class="radio">
+                    {{#radio-button value=provider groupValue=selectedProvider}}
+                        {{provider.name}}
+                    {{/radio-button}}
+                </div>
+            {{/each}}
+        {{/modal.body}}
+        {{#modal.footer as |footer|}}
+            {{#bs-button onClick=(action modal.close) type="default"}}{{t "global.cancel"}}{{/bs-button}}
+            {{#bs-button onClick=(action modal.submit) type="success"}}{{t "setup.start"}}{{/bs-button}}
+        {{/modal.footer}}
+    {{/bs-modal}}
+{{/if}}

app/controllers/index.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+    session: Ember.inject.service(),
+    currentUser: Ember.inject.service(),
+
+    actions: {
+        setupProvider(provider) {
+            this.transitionToRoute('preprints.provider.setup', provider);
+        }
+    }
+});

app/controllers/preprints/provider/setup.js

@@ -0,0 +1,75 @@
+import Ember from 'ember';
+
+const PROVIDER_SETTINGS = [{
+    disabled: false,
+    name: 'reviewsWorkflow',
+    options: ['pre-moderation', 'post-moderation']
+}, {
+    disabled: false,
+    name: 'reviewsCommentsPrivate',
+    options: [true, false],
+}, {
+    disabled: true,
+    name: 'reviewsCommentsAnonymous',
+    options: [true, false],
+}];
+
+
+export default Ember.Controller.extend({
+    i18n: Ember.inject.service(),
+    toast: Ember.inject.service(),
+
+    // Defaults
+    reviewsWorkflow: 'pre-moderation',
+    reviewsCommentsPrivate: true,
+    reviewsCommentsAnonymous: true,
+
+    _t(key, tpl={}) {
+        return this.get('i18n').t(`setup.settings.${key}`, tpl);
+    },
+
+    _buildOption(setting, option) {
+        return {
+            value: option,
+            title: this._t(`${setting.name}.options.${option}.title`),
+            description: this._t(`${setting.name}.options.${option}.description`),
+        };
+    },
+
+    _buildSetting(setting) {
+        return {
+            disabled: setting.disabled,
+            attributeName: setting.name,
+            title: this._t(`${setting.name}.title`),
+            description: this._t(`${setting.name}.description`),
+            options: setting.options.map(this._buildOption.bind(this, setting)),
+        };
+    },
+
+    providerSettings: Ember.computed('model', function() {
+        return PROVIDER_SETTINGS.map(this._buildSetting.bind(this));
+    }),
+
+    actions: {
+        cancel() {
+            this.transitionToRoute('index');
+            return false;
+        },
+        submit() {
+            PROVIDER_SETTINGS.forEach(setting => {
+                this.set(`model.${setting.name}`, this.get(setting.name));
+            });
+
+            this.get('model').save().catch(() => {
+                this.get('model').rollbackAttributes();
+
+                this.get('toast').error(
+                    this.get('i18n').t('setup.error.message').toString(),
+                    this.get('i18n').t('setup.error.title').toString()
+                );
+            }).then(() => {
+                return this.transitionToRoute('preprints.provider', this.get('model'));
+            });
+        }
+    }
+});

app/index.html

@@ -9,18 +9,24 @@
 
     {{content-for "head"}}
 
-    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/reviews-service.css">
+    <!-- All CSS should be included using sass via app.scss -->
+    <!-- We have no control over what 3rd parties import into vendor.css -->
+    <!-- <link rel="stylesheet" href="{{rootURL}}assets/vendor.css"> -->
+    <link rel="stylesheet" href="{{rootURL}}assets/reviews.css">
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'>
 
     {{content-for "head-footer"}}
   </head>
   <body>
     {{content-for "body"}}
 
+    {{content-for "cdn"}}
+
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/reviews.js"></script>
 
+    {{content-for "raven"}}
+
     {{content-for "body-footer"}}
   </body>
 </html>