Add settings manager pages

public/app/app.js

@@ -53,9 +53,8 @@ const rootRoute = {
 // import SettingsManagerApp from 'containers/App/index';
 
 // const render = () => (
-//   {/*<Provider store={store}>*/}
+//   {/*{<Provider store={store}>}*/}
-//     {/*<SettingsManagerApp></SettingsManagerApp>*/}
+//     {/*{<Router}*/}
-//     {/*<Router*/}
 //       {/*history={history}*/}
 //       {/*routes={rootRoute}*/}
 //       {/*render={*/}
@@ -92,8 +91,6 @@ const rootRoute = {
 // import { install } from 'offline-plugin/runtime';
 // install();
 
-import SettingsManagerHomePage from 'containers/HomePage/index';
-
 // Register the plugin
 window.Strapi.registerPlugin({
   name: 'Settings Manager',
@@ -104,5 +101,4 @@ window.Strapi.registerPlugin({
   },
   routes: rootRoute,
   mainComponent: App,
-  homePage: SettingsManagerHomePage,
 });

public/app/components/Container/index.js

@@ -0,0 +1,33 @@
+/**
+*
+* Container
+*
+*/
+
+import React from 'react';
+import LeftMenu from 'components/LeftMenu';
+
+import styles from './styles.css';
+
+class Container extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={styles.container}>
+        <div className={`row row-eq-height ${styles.containerContent}`}>
+          <div className={`col-lg-3 p-l-0 p-r-0 ${styles.containerLeftContent}`}>
+            <LeftMenu></LeftMenu>
+          </div>
+          <div className={`col-lg-9 ${styles.containerRightContent}`}>
+            {this.props.children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Container.propTypes = {
+  children: React.PropTypes.object,
+};
+
+export default Container;

public/app/components/Container/styles.css

@@ -0,0 +1,21 @@
+.container { /* stylelint-disable */
+
+}
+
+.containerContent {
+  position: relative;
+  border: 1px solid #D7D8D9;
+  border-radius: 0.4rem;
+  overflow: hidden;
+  display: flex;
+}
+
+.containerLeftContent {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.containerRightContent {
+  background-color: #FFF;
+  padding: 2.4rem 3rem 50rem;
+}

public/app/components/Container/tests/index.test.js

@@ -0,0 +1,11 @@
+// import Container from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<Container />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

public/app/components/LeftMenu/index.js

@@ -14,24 +14,30 @@ class LeftMenu extends React.Component { // eslint-disable-line react/prefer-sta
     const links = [{
       label: 'General',
       value: 'general',
+      to: '',
     }, {
       label: 'Languages',
       value: 'languages',
+      to: 'languages',
     }, {
       label: 'Databases',
       value: 'databases',
+      to: 'databases',
     }, {
       label: 'Security',
       value: 'security',
+      to: 'security',
     }, {
       label: 'Server',
       value: 'server',
+      to: 'server',
     }, {
       label: 'Advanced',
       value: 'advanced',
+      to: 'advanced',
     }];
 
-    const linksElems = links.map((link, i) => (<LeftMenuLink key={i} label={link.label} value={link.value}></LeftMenuLink>));
+    const linksElems = links.map((link, i) => (<LeftMenuLink key={i} link={link}></LeftMenuLink>));
 
     return (
       <div className={styles.leftMenu}>

public/app/components/LeftMenuLink/index.js

@@ -5,13 +5,18 @@
 */
 
 import React from 'react';
+import { Link } from 'react-router';
 
 import styles from './styles.css';
 
 class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
-      <li className={styles.leftMenuLink}><a className={styles.leftMenuLinkDestination} href>{this.props.label}</a></li>
+      <li className={styles.leftMenuLink}>
+        <Link className={styles.leftMenuLinkDestination} activeClassName={styles.leftMenuLinkDestinationActive} to={`/plugins/settings-manager/${this.props.link.to}`}>{this.props.link.label}
+          <i className={`ion ion-arrow-right-c ${styles.leftMenuLinkIcon}`}></i>
+        </Link>
+      </li>
     );
   }
 }
@@ -19,6 +24,5 @@ class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer
 export default LeftMenuLink;
 
 LeftMenuLink.propTypes = {
-  label: React.PropTypes.string,
+  link: React.PropTypes.object,
-  value: React.PropTypes.string,
 };

public/app/components/LeftMenuLink/styles.css

@@ -4,15 +4,38 @@
 
 .leftMenuLinkDestination {
   display: block;
+  position: relative;
   color: #3B3F49;
   padding-left: 2rem;
+  padding-right: 2rem;
   line-height: 3.6rem;
   font-size: 1.4rem;
   border-radius: 2rem;
+}
 
-  &:hover {
+.leftMenuLinkDestination:hover {
-    color: white;
+  color: white;
-    text-decoration: none;
+  text-decoration: none;
-    background-color: #1C5DE7;
+  background-color: #1C5DE7;
-  }
+}
+
+.leftMenuLinkDestinationActive {
+  color: white;
+  text-decoration: none;
+  background-color: #1C5DE7;
+}
+
+.leftMenuLinkDestinationActive .leftMenuLinkIcon {
+  display: block;
+}
+
+.leftMenuLinkIcon {
+  display: none;
+  float: right;
+  padding-top: 1.1rem;
+  z-index: 10;
+}
+
+.leftMenuLinkDestination:hover .leftMenuLinkIcon {
+  display: block;
 }

public/app/components/RightContentSectionTitle/index.js

@@ -0,0 +1,27 @@
+/**
+*
+* RightContentSectionTitle
+*
+*/
+
+import React from 'react';
+
+import styles from './styles.css';
+
+class RightContentSectionTitle extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div>
+        <h3 className={styles.rightContentSectionTitle}>{this.props.title}</h3>
+        <p className={styles.rightContentSectionSubTitle}>{this.props.description}</p>
+      </div>
+    );
+  }
+}
+
+RightContentSectionTitle.propTypes = {
+  title: React.PropTypes.string,
+  description: React.PropTypes.string,
+};
+
+export default RightContentSectionTitle;

public/app/components/RightContentSectionTitle/styles.css

@@ -0,0 +1,11 @@
+.rightContentSectionTitle { /* stylelint-disable */
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  margin-top: 2.6rem;
+}
+
+.rightContentSectionSubTitle {
+  color: #8B91A0;
+  font-size: 1.2rem;
+  margin-bottom: 1.2rem;
+}

public/app/components/RightContentSectionTitle/tests/index.test.js

@@ -0,0 +1,11 @@
+// import RightContentSectionTitle from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<RightContentSectionTitle />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

public/app/components/RightContentTitle/index.js

@@ -12,12 +12,17 @@ class RightContentTitle extends React.Component { // eslint-disable-line react/p
   render() {
     return (
       <div className={styles.rightContentTitle}>
-        <h2 className={styles.rightContentTitleName}>General</h2>
+        <h2 className={styles.rightContentTitleName}>{this.props.title}</h2>
-        <p className={styles.rightContentTitleDescription}>Configure your general settings</p>
+        <p className={styles.rightContentTitleDescription}>{this.props.description}</p>
         <hr className={styles.rigthContentTitleSeparator}></hr>
       </div>
     );
   }
 }
 
+RightContentTitle.propTypes = {
+  title: React.PropTypes.string,
+  description: React.PropTypes.string,
+};
+
 export default RightContentTitle;

public/app/containers/AdvancedPage/index.js

@@ -0,0 +1,35 @@
+/*
+ *
+ * AdvancedPage
+ *
+ */
+
+import React from 'react';
+import Helmet from 'react-helmet';
+import PluginHeader from 'components/PluginHeader';
+import Container from 'components/Container';
+import RightContentTitle from 'components/RightContentTitle';
+import RightContentSectionTitle from 'components/RightContentSectionTitle';
+import styles from './styles.css';
+
+export default class AdvancedPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={styles.advancedPage}>
+        <Helmet
+          title="Settings Manager - Advanced"
+          meta={[
+            { name: 'description', content: 'Configure your Advanced settings.' },
+          ]}
+        />
+        <div className="container">
+          <PluginHeader></PluginHeader>
+          <Container>
+            <RightContentTitle title="Advanced" description="Configure your advanced settings."></RightContentTitle>
+            <RightContentSectionTitle title="Coming soon" description=""></RightContentSectionTitle>
+          </Container>
+        </div>
+      </div>
+    );
+  }
+}

public/app/containers/AdvancedPage/styles.css

@@ -0,0 +1,3 @@
+.advancedPage { /* stylelint-disable */
+
+}

public/app/containers/AdvancedPage/tests/index.test.js

@@ -0,0 +1,11 @@
+// import AdvancedPage from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<AdvancedPage />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

public/app/containers/DatabasesPage/index.js

@@ -10,17 +10,31 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import Helmet from 'react-helmet';
-import messages from './messages';
+import PluginHeader from 'components/PluginHeader';
+import Container from 'components/Container';
+import RightContentTitle from 'components/RightContentTitle';
+import RightContentSectionTitle from 'components/RightContentSectionTitle';
+import styles from './styles.css';
 
 export default class DatabasesPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   render() {
     return (
-      <div>
+      <div className={styles.databasesPage}>
-        <h1>
+        <Helmet
-          <FormattedMessage {...messages.header} />
+          title="Settings Manager - Databases"
-        </h1>
+          meta={[
+            { name: 'description', content: 'Configure your Databases settings.' },
+          ]}
+        />
+        <div className="container">
+          <PluginHeader></PluginHeader>
+          <Container>
+            <RightContentTitle title="Databases" description="Configure your databases settings."></RightContentTitle>
+            <RightContentSectionTitle title="Coming soon" description=""></RightContentSectionTitle>
+          </Container>
+        </div>
       </div>
     );
   }

public/app/containers/DatabasesPage/styles.css

@@ -0,0 +1,3 @@
+.databasesPage { /* stylelint-disable */
+
+}

public/app/containers/HomePage/index.js

@@ -11,7 +11,8 @@
 
 import React from 'react';
 import PluginHeader from 'components/PluginHeader';
-import LeftMenu from 'components/LeftMenu';
+import RightContentSectionTitle from 'components/RightContentSectionTitle';
+import Container from 'components/Container';
 import RightContentTitle from 'components/RightContentTitle';
 import styles from './styles.css';
 
@@ -22,34 +23,28 @@ export default class HomePage extends React.Component { // eslint-disable-line r
       <div>
         <div className="container">
           <PluginHeader></PluginHeader>
-          <div className={`row row-eq-height ${styles.homePageContent}`}>
+          <Container>
-            <div className={`col-lg-3 p-l-0 p-r-0 ${styles.homePageLeftContent}`}>
+            <RightContentTitle title="General" description="Configure your general settings."></RightContentTitle>
-              <LeftMenu></LeftMenu>
+            <RightContentSectionTitle title="Application" description="The general settings of your Strapi application."></RightContentSectionTitle>
-            </div>
+            <div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
-            <div className={`col-lg-9 ${styles.homePageRightContent}`}>
+              <label htmlFor="applicationName" className="col-xs-7 col-form-label">Name</label>
-              <RightContentTitle></RightContentTitle>
+              <div className="col-xs-5">
-              <h3 className={styles.homePageRightContentTitle}>Application</h3>
+                <input className="form-control" type="text" placeholder="My Application" id="applicationName"></input>
-              <p className={styles.homePageRightContentSubTitle}>The general settings of your Strapi application.</p>
-              <div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
-                <label htmlFor="applicationName" className="col-xs-7 col-form-label">Name</label>
-                <div className="col-xs-5">
-                  <input className="form-control" type="text" placeholder="My Application" id="applicationName"></input>
-                </div>
-              </div>
-              <div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
-                <label htmlFor="applicationDescription" className="col-xs-7 col-form-label">Description</label>
-                <div className="col-xs-5">
-                  <input className="form-control" type="text" placeholder="A Strapi application" id="applicationDescription"></input>
-                </div>
-              </div>
-              <div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
-                <label htmlFor="applicationVersion" className="col-xs-7 col-form-label">Version</label>
-                <div className="col-xs-5">
-                  <input className="form-control" type="text" placeholder="0.0.1" id="applicationVersion"></input>
-                </div>
               </div>
             </div>
-          </div>
+            <div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
+              <label htmlFor="applicationDescription" className="col-xs-7 col-form-label">Description</label>
+              <div className="col-xs-5">
+                <input className="form-control" type="text" placeholder="A Strapi application" id="applicationDescription"></input>
+              </div>
+            </div>
+            <div className={`form-group row ${styles.homePageRightContentFormGroup}`}>
+              <label htmlFor="applicationVersion" className="col-xs-7 col-form-label">Version</label>
+              <div className="col-xs-5">
+                <input className="form-control" type="text" placeholder="0.0.1" id="applicationVersion"></input>
+              </div>
+            </div>
+          </Container>
         </div>
       </div>
     );

public/app/containers/HomePage/styles.css

@@ -4,38 +4,8 @@
  * Home container styles
  */
 
-.homePage {
+.homePage { /* stylelint-disable */
-  display: block;
-}
 
-.homePageContent {
-  position: relative;
-  border: 1px solid #D7D8D9;
-  border-radius: 0.4rem;
-  overflow: hidden;
-  display: flex;
-}
-
-.homePageLeftContent {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.homePageRightContent {
-  background-color: #FFF;
-  padding: 2.4rem 3rem 50rem;
-}
-
-.homePageRightContentTitle {
-  text-transform: uppercase;
-  font-size: 1.4rem;
-  margin-top: 2.6rem;
-}
-
-.homePageRightContentSubTitle {
-  color: #8B91A0;
-  font-size: 1.2rem;
-  margin-bottom: 1.2rem;
 }
 
 .homePageRightContentFormGroup {

public/app/containers/LanguagesPage/index.js

@@ -0,0 +1,35 @@
+/*
+ *
+ * LanguagesPage
+ *
+ */
+
+import React from 'react';
+import Helmet from 'react-helmet';
+import PluginHeader from 'components/PluginHeader';
+import Container from 'components/Container';
+import RightContentTitle from 'components/RightContentTitle';
+import RightContentSectionTitle from 'components/RightContentSectionTitle';
+import styles from './styles.css';
+
+export default class LanguagesPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={styles.languagesPage}>
+        <Helmet
+          title="Settings Manager - Languages"
+          meta={[
+            { name: 'description', content: 'Configure your Languages settings.' },
+          ]}
+        />
+        <div className="container">
+          <PluginHeader></PluginHeader>
+          <Container>
+            <RightContentTitle title="Languages" description="Configure your languages settings."></RightContentTitle>
+            <RightContentSectionTitle title="Coming soon" description=""></RightContentSectionTitle>
+          </Container>
+        </div>
+      </div>
+    );
+  }
+}

public/app/containers/LanguagesPage/styles.css

@@ -0,0 +1,3 @@
+.languagesPage { /* stylelint-disable */
+
+}

public/app/containers/LanguagesPage/tests/index.test.js

@@ -0,0 +1,11 @@
+// import LanguagesPage from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<LanguagesPage />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

public/app/containers/SecurityPage/index.js

@@ -0,0 +1,35 @@
+/*
+ *
+ * SecurityPage
+ *
+ */
+
+import React from 'react';
+import Helmet from 'react-helmet';
+import PluginHeader from 'components/PluginHeader';
+import Container from 'components/Container';
+import RightContentTitle from 'components/RightContentTitle';
+import RightContentSectionTitle from 'components/RightContentSectionTitle';
+import styles from './styles.css';
+
+export default class SecurityPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={styles.securityPage}>
+        <Helmet
+          title="Settings Manager - Security"
+          meta={[
+            { name: 'description', content: 'Configure your security settings.' },
+          ]}
+        />
+        <div className="container">
+          <PluginHeader></PluginHeader>
+          <Container>
+            <RightContentTitle title="Security" description="Configure your security settings."></RightContentTitle>
+            <RightContentSectionTitle title="Coming soon" description=""></RightContentSectionTitle>
+          </Container>
+        </div>
+      </div>
+    );
+  }
+}

public/app/containers/SecurityPage/styles.css

@@ -0,0 +1,3 @@
+.securityPage { /* stylelint-disable */
+
+}

public/app/containers/SecurityPage/tests/index.test.js

@@ -0,0 +1,11 @@
+// import SecurityPage from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<SecurityPage />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

public/app/containers/ServerPage/index.js

@@ -0,0 +1,35 @@
+/*
+ *
+ * ServerPage
+ *
+ */
+
+import React from 'react';
+import Helmet from 'react-helmet';
+import PluginHeader from 'components/PluginHeader';
+import Container from 'components/Container';
+import RightContentTitle from 'components/RightContentTitle';
+import RightContentSectionTitle from 'components/RightContentSectionTitle';
+import styles from './styles.css';
+
+export default class ServerPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={styles.serverPage}>
+        <Helmet
+          title="Settings Manager - Server"
+          meta={[
+            { name: 'description', content: 'Configure your Server settings.' },
+          ]}
+        />
+        <div className="container">
+          <PluginHeader></PluginHeader>
+          <Container>
+            <RightContentTitle title="Server" description="Configure your server settings."></RightContentTitle>
+            <RightContentSectionTitle title="Coming soon" description=""></RightContentSectionTitle>
+          </Container>
+        </div>
+      </div>
+    );
+  }
+}

public/app/containers/ServerPage/styles.css

@@ -0,0 +1,3 @@
+.serverPage { /* stylelint-disable */
+
+}

public/app/containers/ServerPage/tests/index.test.js

@@ -0,0 +1,11 @@
+// import ServerPage from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<ServerPage />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

public/app/routes.js

@@ -34,6 +34,22 @@ export default function createRoutes(store) {
         importModules.catch(errorLoading);
       },
     }, {
+      path: '/languages',
+      name: 'languages',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          System.import('containers/LanguagesPage'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([component]) => {
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
       path: '/databases',
       name: 'databases',
       getComponent(nextState, cb) {
@@ -50,6 +66,54 @@ export default function createRoutes(store) {
         importModules.catch(errorLoading);
       },
     }, {
+      path: '/security',
+      name: 'security',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          System.import('containers/SecurityPage'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([component]) => {
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
+      path: '/server',
+      name: 'server',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          System.import('containers/ServerPage'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([component]) => {
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
+      path: '/advanced',
+      name: 'advanced',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          System.import('containers/AdvancedPage'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([component]) => {
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
       path: '*',
       name: 'notfound',
       getComponent(nextState, cb) {