- Adding federated login

src/actions/UserActions/UserActions.js

@@ -21,14 +21,16 @@ import {servicesUrl, defaultDomain} from '../../config';
 import Location from '../../core/Location';
 
 let UserAction = Reflux.createActions({
-  'login': { children: ["success", "failed"] },
-  'loginScope': { children: ["success", "failed"] },
-  'logout': {},
-  'tokenLogin': { children: ["failed"] },
-  'setCurrentUser': {},
-  'switchProject': {},
-  'getScopedProjects': { children: ["completed", "failed"] },
-  'loadProjects': { children: ["completed", "failed"] },
+  login: { children: ["success", "failed"] },
+  loginGoogle: { children: ["success", "failed"] },
+  loginScope: { children: ["success", "failed"] },
+  logout: {},
+  tokenLogin: { children: ["failed"] },
+  setCurrentUser: {},
+  switchProject: {},
+  getScopedProjects: { children: ["completed", "failed"] },
+  loadProjects: { children: ["completed", "failed"] },
+  federateToken: { }
 })
 
 UserAction.login.listen(userData => {
@@ -68,12 +70,12 @@ UserAction.login.listen(userData => {
 
 UserAction.loginScope.listen((token, projectId) => {
   let auth = {
-    "auth": {
-      "identity": {
-        "methods": [
+    auth: {
+      identity: {
+        methods: [
           "token"
         ],
-        "token": {
+        token: {
           id: token
         }
       },
@@ -100,14 +102,14 @@ UserAction.loginScope.listen((token, projectId) => {
 
 UserAction.tokenLogin.listen((token) => {
   Api.sendAjaxRequest({
-      url: servicesUrl.identity,
-      method: "GET",
-      headers: { 'X-Subject-Token': token }
-    })
-    .then(UserAction.login.success, UserAction.tokenLogin.failed)
-    .catch((response) => {
-      UserAction.tokenLogin.failed(response)
-    });
+    url: servicesUrl.identity,
+    method: "GET",
+    headers: { 'X-Subject-Token': token }
+  })
+  .then(UserAction.login.success, UserAction.tokenLogin.failed)
+  .catch((response) => {
+    UserAction.tokenLogin.failed(response)
+  });
 })
 
 UserAction.getScopedProjects.listen((callback) => {

src/components/Federate/Federate.js

@@ -0,0 +1,42 @@
+/*
+Copyright (C) 2017  Cloudbase Solutions SRL
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero 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 Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { Component, PropTypes } from 'react';
+import Location from '../../core/Location';
+import Reflux from 'reflux';
+import UserActions from '../../actions/UserActions';
+import ConnectionStore from '../../stores/ConnectionsStore';
+
+
+class Federate extends Reflux.Component {
+
+  static propTypes = {
+    token: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props)
+    UserActions.federateToken(props.token)
+    Location.push('/replicas')
+  }
+
+  render() {
+    return null
+  }
+}
+
+export default Federate;

src/components/Federate/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Federate",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Federate.js"
+}

src/components/LoginPage/LoginPage.scss

@@ -41,16 +41,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     }
     position: absolute;
-    bottom: 10%;
+    bottom: 40px;
     left: 50%;
     margin-left: -64px;
     width: 132px;
   }
 }
 .loginContainer {
-  width: 60%;
+  width: 464px;
   margin: 64px auto 0;
-  padding: 32px;
+  padding: 32px 32px 16px;
   background-color: rgba(221, 224, 229, 0.5);
   box-sizing: border-box;
   border-radius: 8px;
@@ -64,28 +64,107 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   }
 
 }
+.loginSocialButtons, .loginUsername {
+  &:after {
+    clear: both;
+    display: block;
+    content: " ";
+    height: 0;
+  }
+}
+.loginSeparator {
+  position: relative;
+  margin: 8px 0 24px;
+  opacity: 0.5;
+  .line {
+    border-top: 1px solid #FFF;
+    height: 1px;
+    width: 124px;
+    position: absolute;
+    top: 10px;
+    left: 0px;
+    &:nth-child(3) {
+      left: auto;
+      right: 0px;
+    }
+  }
+  .text {
+    font-size: 12px;
+    color: #FFF;
+  }
+}
 .loginBtn {
   float: left;
+  display: block;
+  width: 192px;
+  height: 32px;
+  padding-left: 32px;
+  text-align: left;
+  box-sizing: border-box;
+  border-radius: $border-radius;
+  border: 1px solid transparent;
+  line-height: 32px;
+  text-decoration: none;
+  position: relative;
   &:nth-child(2n) {
     float: right;
   }
   &:nth-child(3), &:nth-child(4) {
     margin-top: 16px;
   }
-  img {
-    width: 192px;
-    height: 32px;
+  .icon {
+    position: absolute;
+    top: 6px;
+    left: 7px;
   }
+  &:global(.google) {
+    background-color: #FFF;
+    border: 1px solid $grayish;
+    color: #616870;
+    .icon {
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0ic3VwZXItZyI+DQogICAgICAgICAgICA8cGF0aCBkPSJNOSwzLjQ4IEMxMC42OSwzLjQ4IDExLjgzLDQuMjEgMTIuNDgsNC44MiBMMTUuMDIsMi4zNCBDMTMuNDYsMC44OSAxMS40MywwIDksMCBDNS40OCwwIDIuNDQsMi4wMiAwLjk2LDQuOTYgTDMuODcsNy4yMiBDNC42LDUuMDUgNi42MiwzLjQ4IDksMy40OCBMOSwzLjQ4IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0VBNDMzNSI+PC9wYXRoPg0KICAgICAgICAgICAgPHBhdGggZD0iTTE3LjY0LDkuMiBDMTcuNjQsOC40NiAxNy41OCw3LjkyIDE3LjQ1LDcuMzYgTDksNy4zNiBMOSwxMC43IEwxMy45NiwxMC43IEMxMy44NiwxMS41MyAxMy4zMiwxMi43OCAxMi4xMiwxMy42MiBMMTQuOTYsMTUuODIgQzE2LjY2LDE0LjI1IDE3LjY0LDExLjk0IDE3LjY0LDkuMiBMMTcuNjQsOS4yIFoiIGlkPSJTaGFwZSIgZmlsbD0iIzQyODVGNCI+PC9wYXRoPg0KICAgICAgICAgICAgPHBhdGggZD0iTTMuODgsMTAuNzggQzMuNjksMTAuMjIgMy41OCw5LjYyIDMuNTgsOSBDMy41OCw4LjM4IDMuNjksNy43OCAzLjg3LDcuMjIgTDAuOTYsNC45NiBDMC4zNSw2LjE4IDAsNy41NSAwLDkgQzAsMTAuNDUgMC4zNSwxMS44MiAwLjk2LDEzLjA0IEwzLjg4LDEwLjc4IEwzLjg4LDEwLjc4IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0ZCQkMwNSI+PC9wYXRoPg0KICAgICAgICAgICAgPHBhdGggZD0iTTksMTggQzExLjQzLDE4IDEzLjQ3LDE3LjIgMTQuOTYsMTUuODIgTDEyLjEyLDEzLjYyIEMxMS4zNiwxNC4xNSAxMC4zNCwxNC41MiA5LDE0LjUyIEM2LjYyLDE0LjUyIDQuNiwxMi45NSAzLjg4LDEwLjc4IEwwLjk3LDEzLjA0IEMyLjQ1LDE1Ljk4IDUuNDgsMTggOSwxOCBMOSwxOCBaIiBpZD0iU2hhcGUiIGZpbGw9IiMzNEE4NTMiPjwvcGF0aD4NCiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDAgMTggMCAxOCAxOCAwIDE4Ij48L3BvbHlnb24+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=');
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+.forgotPassText {
+  line-height: 32px;
+  color: #FFF;
+  text-decoration: none;
 }
 .container {
   margin: 0 auto;
-  padding: 10vh 0 40px;
+  padding: 8vh 0 40px;
   width: 464px;
   text-align: center;
   :global {
     .form-group {
       margin-bottom: 16px;
+      width: 50%;
+      float: left;
+      box-sizing: border-box;
+      &:nth-child(2n) {
+        padding-left: 8px;
+      }
+      &:nth-child(2n+1) {
+        padding-right: 8px;
+      }
+      label {
+        text-align: left;
+        text-transform: uppercase;
+        font-size: 9px;
+        font-weight: 500;
+        color: #FFF;
+        display: block;
+        margin-bottom: 6px;
+      }
     }
   }
 
 }
+
+
+@media (min-width: 700px) {
+
+}

src/components/variables.scss

@@ -6,6 +6,7 @@ $white-base:            hsl(255, 255, 255);
 $gray-darker:           #1B2733;
 $gray-dark:             #616770;
 $gray:                  #A4AAB5;
+$grayish:               #C8CCD7;
 $gray-light:            #ECEDF1;
 $gray-lighter:          #D8DBE2;
 $blue:                  #0044CB;

src/config.sample.js

@@ -105,7 +105,7 @@ export const migrationSteps = [
 
 export const auth = {
 
-  jwt: { secret: process.env.JWT_SECRET || 'React Starter Kit' },
+  jwt: { secret: process.env.JWT_SECRET || 'Coriolis' },
 
   // https://developers.facebook.com/
   facebook: {

src/routes.js

@@ -43,6 +43,7 @@ import LoginPage from './components/LoginPage';
 import RegisterPage from './components/RegisterPage';
 import NotFoundPage from './components/NotFoundPage';
 import ErrorPage from './components/ErrorPage';
+import Federate from './components/Federate';
 
 const router = new Router(on => {
   on('*', async (state, next) => {
@@ -54,6 +55,8 @@ const router = new Router(on => {
 
   on('/login', async () => <LoginPage />)
 
+  on('/federate/:token', async (params) => <Federate token={params.params.token} />)
+
   on('/migrations', async () => <WithSidebar route="/migrations"><MigrationList type="migrations"/></WithSidebar>)
 
   on('/migrations/new', async () => <MigrationWizard />)

src/server.js

@@ -72,6 +72,15 @@ server.get('/login/facebook/return',
   }
 );
 
+server.post('/federation', async (req, res, next) => {
+  let token = req.body.token
+  if (token) {
+    res.redirect('/federate/' + token);
+  } else {
+    res.redirect('/login');
+  }
+});
+
 //
 // Register server-side rendering middleware
 // -----------------------------------------------------------------------------

src/stores/UserStore/UserStore.js

@@ -22,7 +22,7 @@ import ConnectionsActions from '../../actions/ConnectionsActions'
 import Location from '../../core/Location';
 import Api from '../../components/ApiCaller';
 import cookie from 'react-cookie';
-import {servicesUrl} from '../../config'
+import { servicesUrl } from '../../config'
 
 class UserStore extends Reflux.Store
 {
@@ -106,19 +106,19 @@ class UserStore extends Reflux.Store
 
   onLogout() {
     Api.sendAjaxRequest({
-        url: servicesUrl.identity,
-        method: "DELETE",
-        headers: { 'X-Subject-Token': this.state.currentUser.token }
-      })
-      .then(() => {
-        cookie.remove('token');
-        window.location.href = "/"
-
-      })
-      .catch(() => {
-        cookie.remove('token');
-        window.location.href = "/"
-      })
+      url: servicesUrl.identity,
+      method: "DELETE",
+      headers: { 'X-Subject-Token': this.state.currentUser.token }
+    })
+    .then(() => {
+      cookie.remove('token');
+      window.location.href = "/"
+
+    })
+    .catch(() => {
+      cookie.remove('token');
+      window.location.href = "/"
+    })
 
     Api.resetHeaders()
   }
@@ -159,6 +159,18 @@ class UserStore extends Reflux.Store
 
     this.setState({ currentUser: currentUser })
   }
+
+  onFederateToken(token) {
+    Api.setDefaultHeader('X-Auth-Token', token)
+    cookie.save('unscopedToken', token, { path: "/" })
+    UserActions.getScopedProjects(response => {
+      if (response.data.projects) {
+        UserActions.loginScope(token, response.data.projects[0].id)
+      } else {
+        // TODO: Error case no scoped projects
+      }
+    })
+  }
 }
 
 UserStore.id = "userStore"