diff --git a/client/Bifrost.js b/client/Bifrost.js new file mode 100644 index 0000000..ff643f7 --- /dev/null +++ b/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}}) => ( +
+
+ +
+
+

Factores de Riesgo

+ {logoApp && } + +
+
+); + +Bifrost.propTypes = { + logoApp: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) +} + +Bifrost.defaultProps = { + logoApp: null +} + +export default Bifrost; diff --git a/client/LoginButton.js b/client/LoginButton.js new file mode 100644 index 0000000..bd81b5e --- /dev/null +++ b/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 = () => ( + +); + +export default LoginButton; diff --git a/client/images/login.png b/client/images/login.png new file mode 100644 index 0000000..aac7891 Binary files /dev/null and b/client/images/login.png differ diff --git a/client/images/logoIndec.png b/client/images/logoIndec.png new file mode 100644 index 0000000..b8fc3e3 Binary files /dev/null and b/client/images/logoIndec.png differ diff --git a/client/index.js b/client/index.js index 41e1599..c075d88 100644 --- a/client/index.js +++ b/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}; diff --git a/client/login.js b/client/login.js index 17fbeaf..95b4482 100644 --- a/client/login.js +++ b/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} 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(); + } + }); } } diff --git a/client/sass/bifrost.scss b/client/sass/bifrost.scss new file mode 100644 index 0000000..446d723 --- /dev/null +++ b/client/sass/bifrost.scss @@ -0,0 +1,2 @@ +@import './loginButton'; +@import './loginView'; diff --git a/client/sass/loginButton.scss b/client/sass/loginButton.scss new file mode 100644 index 0000000..401becb --- /dev/null +++ b/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; + } +} diff --git a/client/sass/loginView.scss b/client/sass/loginView.scss new file mode 100644 index 0000000..3ba3e16 --- /dev/null +++ b/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; + } + } +}