style(client): login screen complited

client/Bifrost.js

@@ -0,0 +1,42 @@
+/* global window */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import LoginService from './login';
+import loginImage from './images/login.png';
+import logoIndec from './images/logoIndec.png';
+
+const handleClick = async (endpoint, authUri, redirectUri) => {
+    const success = await(new LoginService(endpoint, authUri)).login();
+    if (success) {
+        window.location = redirectUri;
+    }
+};
+
+const Bifrost = ({logoApp, loginParams: {endpoint, authUri, redirectUri}}) => (
+    <div className="bifrost">
+        <div className="bifrost-sidebar">
+            <img src={logoIndec}/>
+        </div>
+        <div className="bifrost-login">
+            <h3>Factores de Riesgo</h3>
+            {logoApp && <img src={logoApp}/>}
+            <button onClick={() => handleClick(endpoint, authUri, redirectUri)} className="btn-bifrost">
+                <span className="btn-bifrost-image">
+                    <img src={loginImage}/>
+                </span>
+                <span className="btn-bifrost-text">Ingresar</span>
+            </button>
+        </div>
+    </div>
+);
+
+Bifrost.propTypes = {
+    logoApp: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+
+Bifrost.defaultProps = {
+    logoApp: null
+}
+
+export default Bifrost;

client/LoginButton.js

@@ -0,0 +1,25 @@
+/* global window */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+import LoginService from './login';
+import loginImage from './images/login.png';
+
+const handleClick = async () => {
+    const endpoint = 'https://7795f05f.ngrok.io';
+    const authUri = 'public-api/signIn';
+    const success = await(new LoginService(endpoint, authUri)).login();
+    if (success) {
+        window.location = '/back';
+    }
+};
+
+const LoginButton = () => (
+    <button onClick={() => handleClick()} className="btn btn-bifrost">
+        <span className="btn-bifrost-image">
+            <img src={loginImage}/>
+        </span>
+        <span className="btn-bifrost-text">Ingresar</span>
+    </button>
+);
+
+export default LoginButton;

client/index.js

@@ -1,9 +1,11 @@
 import Http from './http';
 import LoginService from './login';
 import TokenService from './token';
+import LoginButton from './LoginButton';
+import Bifrost from './Bifrost';
 
-const http = new Http(TokenService);
-
-export {http};
+export {Http};
 export {LoginService};
 export {TokenService};
+export {LoginButton};
+export {Bifrost};

client/login.js

@@ -1,35 +1,36 @@
-/* global fetch */
+/* global window */
+import {Http} from '@indec/heimdall/client';
+
+
+const getCookie = async (appAuthUrl, code) => Http.post(appAuthUrl, {code});
+
 /**
- * Send login requests to the authorization authority.
+ * Manage login with the identity provider.
  */
 export default class LoginService {
-    constructor(tokenService, endpoint) {
-        this.tokenService = tokenService;
-        this.endpoint = endpoint;
+    constructor(endpoint,authUri) {
+        this.endpoint= endpoint;
+        this.authUri = authUri;
     }
 
     /**
-     * Send a login request to the authorization authority.
-     * @param {string} username the username credential.
-     * @param {string} password the password credential.
-     * @param {string} redirectUri optional URI for authentication, should include protocol.
+     * Opens a login popup using the identity provider.
      * @returns {Promise<string>} A promise with the new session token.
      */
-    async login(username, password, redirectUri) {
-        try {
-            const response = await fetch(`${this.endpoint}/oauth/login`, {
-                method: 'post',
-                credentials: 'same-origin',
-                body: JSON.stringify({username, password, redirectUri}),
-                headers: {
-                    'content-type': 'application/json'
+    login() {
+        return new Promise((resolve, reject) => {
+            const popup = window.open(`${this.endpoint}/loki?redirectUri=${window.location.host}`, 'Heimdall', 'width=600,height=400');
+            window.addEventListener('message', async e => {
+                const {code} = e.data;
+                if (code) {
+                    await getCookie(this.authUri, code);
+                    return resolve(code);
                 }
-            });
-            const {token} = await response.json();
-            this.tokenService.setToken(token);
-            return token;
-        } catch (err) {
-            return err;
-        }
+                reject();
+            }, false);
+            if (window.focus) {
+                popup.focus();
+            }
+        });
     }
 }

client/sass/bifrost.scss

@@ -0,0 +1,2 @@
+@import './loginButton';
+@import './loginView';

client/sass/loginButton.scss

@@ -0,0 +1,29 @@
+.btn-bifrost {
+  position: relative;
+  background-color: #575759;
+  color: #fff;
+  overflow: hidden;
+  padding: 14px 40px 14px 26px;
+  font-size: 20px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  margin-top: 50px;
+  &:hover {
+    background-color: rgba(87, 87, 89, 0.9);
+    color: #fff;
+  }
+  > .btn-bifrost-image {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 60px;
+    font-size: 1.8em;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    background-color: #fff;
+  }
+  > .btn-bifrost-text {
+    padding-left: 65px;
+  }
+}

client/sass/loginView.scss

@@ -0,0 +1,33 @@
+.bifrost {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  .bifrost-sidebar {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    align-items: center;
+    background-color: #333;
+    padding: 0 20px;
+  }
+  .bifrost-login {
+    display: flex;
+    flex-grow: 3;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    h3 {
+      padding-right: 8%;
+      padding-left: 8%;
+      text-align: center;
+      margin-bottom: 50px;
+    }
+  }
+  @media (min-width: 992px) {
+    flex-direction: row;
+    .bifrost-sidebar {
+      max-width: 260px;
+      min-height: 120px;
+    }
+  }
+}