Add flags for languages

packages/strapi-plugin-settings-manager/admin/src/components/EditFormSectionSubNested/index.js

@@ -11,7 +11,7 @@ import WithFormSection from 'components/WithFormSection';
 class EditFormSectionSubNested extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
-      <div className={this.props.styles.padded}>
+      <div className={`${this.props.styles.padded} ${this.props.styles.subNestedFormContainer}`}>
         <div className="row">
           {map(this.props.section, (item, key) => (
             this.props.renderInput(item, key)

packages/strapi-plugin-settings-manager/admin/src/components/InputText/index.js

@@ -116,9 +116,7 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
   }
 
   render() {
-    console.log(this.props)
     const inputValue = this.props.value || '';
-    console.log(inputValue)
     // override default onBlur
     const handleBlur = this.props.handleBlur || this.handleBlur;
     // override bootStrapClass

packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/styles.scss

@@ -16,3 +16,10 @@
 .padded {
   padding: 0 15px 0 15px;
 }
+
+
+.subNestedFormContainer {
+  margin: 1rem 15px;
+  padding: 0 2rem;
+  background: #FAFAFB;
+}

packages/strapi-plugin-settings-manager/admin/src/containers/App/index.js

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import { map } from 'lodash';
+import 'flag-icon-css/css/flag-icon.css';
 import { pluginId } from 'app';
 import PluginLeftMenu from 'components/PluginLeftMenu';
 import { define } from 'i18n';
@@ -24,6 +25,7 @@ define(map(messages, (message, id) => ({
 }
 )));
 
+
 class App extends React.Component {
   componentDidMount() {
     this.props.menuFetch();

packages/strapi-plugin-settings-manager/admin/src/containers/Home/actions.js

@@ -4,7 +4,7 @@
 *
 */
 
-import { forEach, has, remove } from 'lodash';
+import { includes, forEach, has, remove, get, split } from 'lodash';
 import {
   CONFIG_FETCH,
   LANGUAGES_FETCH,
@@ -123,9 +123,17 @@ function getDataFromConfigs(configs) {
     });
   });
 
+  if (configs.name === 'form.security.name' && includes(split(get(data, 'security.xframe.value'), ' '), 'ALLOW-FROM')) {
+    const allowFromValue = split(get(data, 'security.xframe.value'), ' ')[0];
+    const allowFromValueNested = split(get(data, 'security.xframe.value'), ' ')[1];
+    data['security.xframe.value'] = allowFromValue;
+    data['security.xframe.value.nested'] = allowFromValueNested;
+
+  }
   return data;
 }
 
+
 export function changeDefaultLanguage(configsDisplay, newLanguage) {
   return {
     type: CHANGE_DEFAULT_LANGUAGE,

packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js

@@ -242,7 +242,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
       }
     });
 
-    if (has(this.props.home.modifiedData, 'security.xframe.value.nested')) {
+    if (has(this.props.home.modifiedData, 'security.xframe.value.nested') && this.props.home.modifiedData['security.xframe.value'] === 'ALLOW-FROM') {
       const value = includes(this.props.home.modifiedData['security.xframe.value.nested'], 'ALLOW-FROM') ?
       `ALLOW-FROM ${this.props.home.modifiedData['security.xframe.value.nested']}`
        : `ALLOW-FROM.ALLOW-FROM ${this.props.home.modifiedData['security.xframe.value.nested']}`;
@@ -289,11 +289,24 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
           )}
         </FormattedMessage>;
 
+    const flagName = this.formatLanguageLocale(props.name);
+    let flag;
+    switch (flagName.length) {
+      case 2:
+        flag = toLower(flagName[1]);
+        break;
+      case 3:
+        flag = toLower(flagName[2]);
+        break;
+      default:
+        flag = toLower(flagName[0]);
+    }
+
     return (
       <li key={key}>
         <div className={liStyles.flexLi}>
           <div className={liStyles.flexed}>
-            <div>{key}</div>
+            <div><span className={`flag-icon flag-icon-${flag}`} /></div>
             <div className={`${liStyles.label} ${liStyles.capitalized}`}>{languageDisplay}</div>
           </div>
           <div>{props.name}</div>
@@ -339,11 +352,12 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
   renderPopUpFormLanguage = (section, props) => (
     map(section.items, (item, key) => (
       <div key={key}>
-        {props.renderInput(item, key)}
+        {props.renderInput(item, key, this.renderCustomLanguagesSelectOption)}
       </div>
     ))
   )
 
+
   renderRowDatabase = (props, key) => (
     // const isDefaultConnection = this.props.home.modifiedData['database.defaultConnection'] === props.host;
     <RowDatabase
@@ -462,6 +476,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
           name={this.props.home.configsDisplay.name}
           description={this.props.home.configsDisplay.description}
         />
+
         {this.renderComponent()}
       </div>
     );

packages/strapi-plugin-settings-manager/admin/src/containers/Home/sagas.js

@@ -1,6 +1,6 @@
 import { LOCATION_CHANGE } from 'react-router-redux';
 
-import { forEach, set } from 'lodash';
+import { forEach, set, join, split, toLower, upperCase } from 'lodash';
 import { takeLatest } from 'redux-saga';
 import { call, take, put, fork, cancel, select } from 'redux-saga/effects';
 import request from 'utils/request';
@@ -165,8 +165,18 @@ export function* fetchLanguages() {
 export function* postLanguage() {
   try {
     const newLanguage = yield select(makeSelectModifiedData());
+    const languageArray = [];
+
+    forEach(split(newLanguage['language.defaultLocale'], '_'), (value, key) => {
+      if (key === 0){
+        languageArray.push(toLower(value));
+      } else {
+        languageArray.push(upperCase(value));
+      }
+    });
+
     const body = {
-      name: newLanguage['language.language.defaultLocale'],
+      name: join(languageArray, '_'),
     };
     const opts = {
       body,

packages/strapi-plugin-settings-manager/package-lock.json

@@ -1371,6 +1371,11 @@
         }
       }
     },
+    "flag-icon-css": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-2.8.0.tgz",
+      "integrity": "sha1-7BDCD+QXreeHoJUgBjAGnKQ2pWk="
+    },
     "flagged-respawn": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.2.tgz",

packages/strapi-plugin-settings-manager/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "bootstrap": "^4.0.0-alpha.6",
+    "flag-icon-css": "^2.8.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-transition-group": "^1.2.0",