SONAR-8451 Run js app outside of ruby container

5 files changed, 302 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.js b/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.js
new file mode 100644
index 00000000000..12010610e3e
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.js
@@ -0,0 +1,102 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+import GlobalMessagesContainer from '../../../app/components/GlobalMessagesContainer';
+import { translate } from '../../../helpers/l10n';
+
+export default class LoginForm extends React.Component {
+  static propTypes = {
+    identityProviders: React.PropTypes.array.isRequired,
+    onSubmit: React.PropTypes.func.isRequired
+  };
+
+  state = {
+    login: '',
+    password: ''
+  };
+
+  handleSubmit = (e: any) => {
+    e.preventDefault();
+    this.props.onSubmit(this.state.login, this.state.password);
+  };
+
+  render () {
+    return (
+        <div>
+          <h1 className="maintenance-title text-center">Log In to SonarQube</h1>
+
+          {this.props.identityProviders.length > 0 && (
+              <section className="oauth-providers">
+                <ul>
+                  {this.props.identityProviders.map(identityProvider => (
+                      <li key={identityProvider.key}>
+                        <a href={`${window.baseUrl}/sessions/init/${identityProvider.key}`}
+                           style={{ backgroundColor: identityProvider.backgroundColor }}
+                           title={`Log in with ${identityProvider.name}` }>
+                          <img alt={identityProvider.name} width="20" height="20"
+                               src={window.baseUrl + identityProvider.iconPath}/>
+                          <span>Log in with {identityProvider.name}</span>
+                        </a>
+                      </li>
+                  ))}
+                </ul>
+              </section>
+          )}
+
+          <form id="login_form" onSubmit={this.handleSubmit}>
+            <GlobalMessagesContainer/>
+
+            <div className="big-spacer-bottom">
+              <label htmlFor="login" className="login-label">{translate('login')}</label>
+              <input type="text"
+                     id="login"
+                     name="login"
+                     className="login-input"
+                     maxLength="255"
+                     required={true}
+                     placeholder={translate('login')}
+                     value={this.state.login}
+                     onChange={e => this.setState({ login: e.target.value })}/>
+            </div>
+
+            <div className="big-spacer-bottom">
+              <label htmlFor="password" className="login-label">{translate('password')}</label>
+              <input type="password"
+                     id="password"
+                     name="password"
+                     className="login-input"
+                     required={true}
+                     placeholder={translate('password')}
+                     value={this.state.password}
+                     onChange={e => this.setState({ password: e.target.value })}/>
+            </div>
+
+            <div>
+              <div className="text-right overflow-hidden">
+                <button name="commit" type="submit">{translate('sessions.log_in')}</button>
+                <a className="spacer-left" href={window.baseUrl + '/'}>{translate('cancel')}</a>
+              </div>
+            </div>
+          </form>
+        </div>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/LoginFormContainer.js b/server/sonar-web/src/main/js/apps/sessions/components/LoginFormContainer.js
new file mode 100644
index 00000000000..f3171181aed
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/sessions/components/LoginFormContainer.js
@@ -0,0 +1,78 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+import { connect } from 'react-redux';
+import LoginForm from './LoginForm';
+import { doLogin } from '../../../app/store/rootActions';
+import { getAppState } from '../../../app/store/rootReducer';
+import { getIdentityProviders } from '../../../api/users';
+
+class LoginFormContainer extends React.Component {
+  mounted: bool;
+
+  static propTypes = {
+    location: React.PropTypes.object.isRequired
+  };
+
+  state = {};
+
+  componentDidMount () {
+    this.mounted = true;
+    getIdentityProviders().then(r => {
+      if (this.mounted) {
+        this.setState({ identityProviders: r.identityProviders });
+      }
+    });
+  }
+
+  componentWillUnmount () {
+    this.mounted = false;
+  }
+
+  handleSuccessfulLogin = () => {
+    window.location = this.props.location.query['return_to'] || (window.baseUrl + '/');
+  };
+
+  handleSubmit = (login: string, password: string) => {
+    this.props.doLogin(login, password).then(
+        this.handleSuccessfulLogin,
+        () => { /* do nothing */ }
+    );
+  };
+
+  render () {
+    if (!this.state.identityProviders) {
+      return null;
+    }
+
+    return (
+        <LoginForm identityProviders={this.state.identityProviders} onSubmit={this.handleSubmit}/>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  appState: getAppState(state)
+});
+
+const mapDispatchToProps = { doLogin };
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoginFormContainer);
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Logout.js b/server/sonar-web/src/main/js/apps/sessions/components/Logout.js
new file mode 100644
index 00000000000..409a099aa18
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/sessions/components/Logout.js
@@ -0,0 +1,42 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+import { connect } from 'react-redux';
+import GlobalMessagesContainer from '../../../app/components/GlobalMessagesContainer';
+import { doLogout } from '../../../app/store/rootActions';
+
+class Logout extends React.Component {
+  componentDidMount () {
+    this.props.doLogout()
+        .then(() => window.location = window.baseUrl + '/')
+        .catch(() => { /* do nothing */ });
+  }
+
+  render () {
+    return <GlobalMessagesContainer/>;
+  }
+}
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = { doLogout };
+
+export default connect(mapStateToProps, mapDispatchToProps)(Logout);
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.js b/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.js
new file mode 100644
index 00000000000..276c33809ec
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.js
@@ -0,0 +1,49 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+
+export default class Unauthorized extends React.Component {
+  static propTypes = {
+    location: React.PropTypes.object.isRequired
+  };
+
+  render () {
+    const { message } = this.props.location.query;
+
+    return (
+        <div className="text-center">
+          <p id="unauthorized">
+            You're not authorized to access this page. Please contact the administrator.
+          </p>
+
+          {!!message && (
+              <p className="spacer-top">
+                Reason : {message}
+              </p>
+          )}
+
+          <div className="big-spacer-top">
+            <a href={window.baseUrl + '/'}>Home</a>
+          </div>
+        </div>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/sessions/routes.js b/server/sonar-web/src/main/js/apps/sessions/routes.js
new file mode 100644
index 00000000000..98204df9838
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/sessions/routes.js
@@ -0,0 +1,31 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { Route, Redirect } from 'react-router';
+import LoginFormContainer from './components/LoginFormContainer';
+import Logout from './components/Logout';
+import Unauthorized from './components/Unauthorized';
+
+export default [
+  <Redirect key="login" from="/sessions/login" to="/sessions/new"/>,
+  <Route key="new" path="new" component={LoginFormContainer}/>,
+  <Route key="logout" path="logout" component={Logout}/>,
+  <Route key="unauthorized" path="unauthorized" component={Unauthorized}/>,
+];