[S&C] Start a login page

- Issue #49

client/src/components/AnonymousLayout.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router';
+import { translate } from 'react-i18next';
+import Col from 'react-bootstrap/lib/Col';
+import Grid from 'react-bootstrap/lib/Grid';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+import Nav from 'react-bootstrap/lib/Nav';
+import Navbar from 'react-bootstrap/lib/Navbar';
+import NavDropdown from 'react-bootstrap/lib/NavDropdown';
+import Row from 'react-bootstrap/lib/Row';
+
+const languages = {
+  ar: 'Argentina',
+  ca: 'Catalan',
+  cn: '中国语文',
+  de: 'Deutsch',
+  en: 'English',
+  es: 'Español',
+  fr: 'Français',
+  it: 'Italiano',
+  ko: '한국말',
+  lv: 'Latviešu',
+  pl: 'Język polski',
+  pt: 'Português',
+  'pt-BR': 'Português brasileiro',
+  ru: 'Русский',
+  ua: 'українська мова',
+  zh: '中國語文',
+};
+
+const renderLocaleEntry = (locale, toggle) => {
+  if ('cimode' === locale) {
+    return null;
+  }
+
+  const name = languages[locale];
+
+  return (
+    <MenuItem key={locale} onClick={() => toggle(locale)}>{name}</MenuItem>
+  );
+};
+
+const AnonymousLayout = ({ t, i18n, children }) => {
+  const toggle = lng => i18n.changeLanguage(lng);
+  const CurrentLang = languages[i18n.language || 'en'];
+
+  return (
+    <div>
+      <Navbar inverse fixedTop fluid collapseOnSelect>
+        <Navbar.Header>
+          <Navbar.Brand>
+            <Link to="/">{t('Recalbox Manager')}</Link>
+          </Navbar.Brand>
+
+          <Nav pullRight>
+            <NavDropdown title={CurrentLang} id="language-switcher"
+              className="pull-right locale-switcher">
+              {i18n.options.whitelist.map(x => renderLocaleEntry(x, toggle))}
+            </NavDropdown>
+          </Nav>
+        </Navbar.Header>
+      </Navbar>
+
+      <Grid fluid>
+        <Row>
+          <Col sm={12} className="main">
+            {children}
+          </Col>
+        </Row>
+      </Grid>
+    </div>
+  );
+};
+
+AnonymousLayout.propTypes = {
+  t: PropTypes.func.isRequired,
+  i18n: PropTypes.object.isRequired,
+  children: PropTypes.element.isRequired,
+};
+
+export default translate()(AnonymousLayout);

client/src/components/login/Container.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import Login from './Login';
+
+class LoginContainer extends Component {
+  render() {
+    return (
+      <Login />
+    );
+  }
+}
+
+export default LoginContainer;

client/src/components/login/Login.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Login = () => (
+  <div>IOKOK</div>
+);
+
+export default Login;

client/src/routes.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Route, IndexRoute } from 'react-router';
+import AnonymousLayout from './components/AnonymousLayout';
 import Layout from './components/Layout';
+import Login from './components/login/Container';
 import Home from './components/home/Container';
 import Audio from './components/audio/Container';
 import Bios from './components/bios/Container';
@@ -15,27 +17,43 @@ import RomsView from './components/roms/view/Container';
 import Screenshots from './components/screenshots/Container';
 import Systems from './components/systems/Container';
 import NotFound from './components/NotFound';
+import { get } from './api';
+
+const Auth = async (nextState, replace, callback) => {
+  const needAuth = await get('needAuth');
+
+  if (needAuth) {
+    return callback(replace('/login'));
+  }
+
+  callback();
+};
 
 const routes = (
-  <Route path="/" component={Layout}>
-    <IndexRoute component={Home} />
-    <Route path="audio" component={Audio} />
-    <Route path="bios" component={Bios} />
-    <Route path="configuration" component={Configuration} />
-    <Route path="controllers" component={Controllers} />
-    <Route path="help" component={Help} />
-    <Route path="logs" component={Logs} />
-    <Route path="monitoring" component={Monitoring} />
-    <Route path="recalbox-conf" component={RecalboxConf} />
-    <Route path="roms">
-      <IndexRoute component={RomsList} />
-      <Route path=":system" component={RomsView}>
-        <Route path="**" />
+  <Route>
+    <Route path="/login" component={AnonymousLayout}>
+      <IndexRoute component={Login} />
+    </Route>
+    <Route component={Layout} path="/" onEnter={Auth}>
+      <IndexRoute component={Home} />
+      <Route path="audio" component={Audio} />
+      <Route path="bios" component={Bios} />
+      <Route path="configuration" component={Configuration} />
+      <Route path="controllers" component={Controllers} />
+      <Route path="help" component={Help} />
+      <Route path="logs" component={Logs} />
+      <Route path="monitoring" component={Monitoring} />
+      <Route path="recalbox-conf" component={RecalboxConf} />
+      <Route path="roms">
+        <IndexRoute component={RomsList} />
+        <Route path=":system" component={RomsView}>
+          <Route path="**" />
+        </Route>
       </Route>
+      <Route path="screenshots" component={Screenshots} />
+      <Route path="systems" component={Systems} />
+      <Route path="*" component={NotFound} />
     </Route>
-    <Route path="screenshots" component={Screenshots} />
-    <Route path="systems" component={Systems} />
-    <Route path="*" component={NotFound} />
   </Route>
 );
 

src/routes/get.js

@@ -157,6 +157,9 @@ router.get('/', async (req, res, next) => {
         const cmd = `${ESPath} status | cut -d ' ' -f 3`;
         data = 'running' === execSync(cmd).toString() ? 'OK' : 'KO';
         break;
+      case 'needAuth':
+        data = true;
+        break;
       default:
         throw new Error(`Option "${option}" unknown`);
     }