From c31e9b939249b1b32fff1f4668ebb03100061339 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= Date: Thu, 22 Apr 2021 08:44:16 +0200 Subject: [PATCH] feat: add support for demo-signin --- .../src/component/user/DemoAuth/DemoAuth.jsx | 84 +++++++++++++++++++ .../user/DemoAuth/DemoAuth.module.scss | 11 +++ .../src/component/user/DemoAuth/index.jsx | 3 + .../src/component/user/Login/Login.styles.js | 2 +- .../user/authentication-component.jsx | 12 +++ .../user/authentication-container.jsx | 3 +- frontend/src/store/user/actions.js | 11 +++ frontend/src/store/user/api.js | 12 +++ 8 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 frontend/src/component/user/DemoAuth/DemoAuth.jsx create mode 100644 frontend/src/component/user/DemoAuth/DemoAuth.module.scss create mode 100644 frontend/src/component/user/DemoAuth/index.jsx diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.jsx b/frontend/src/component/user/DemoAuth/DemoAuth.jsx new file mode 100644 index 0000000000..b3b6170b55 --- /dev/null +++ b/frontend/src/component/user/DemoAuth/DemoAuth.jsx @@ -0,0 +1,84 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import { Button, TextField } from '@material-ui/core'; + +import styles from './DemoAuth.module.scss'; + +const DemoAuth = ({ + demoLogin, + loadInitialData, + history, + authDetails, +}) => { + const [email, setEmail] = useState(''); + + const handleSubmit = evt => { + evt.preventDefault(); + const user = { email }; + const path = evt.target.action; + + demoLogin(path, user) + .then(loadInitialData) + .then(() => history.push(`/`)); + }; + + const handleChange = e => { + const value = e.target.value; + setEmail(value); + }; + + return ( +
+
+ Unleash Logo +

Access the Unleash demo instance

+

No further data or Credit Card required

+
+ +    + + +
+

+ By accessing our demo instance, you agree to the Unleash  + + Customer Terms of Service + and  + + Privacy Policy + + +

+
+
+ ); +}; + +DemoAuth.propTypes = { + authDetails: PropTypes.object.isRequired, + demoLogin: PropTypes.func.isRequired, + loadInitialData: PropTypes.func.isRequired, + history: PropTypes.object.isRequired, +}; + +export default DemoAuth; diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.module.scss b/frontend/src/component/user/DemoAuth/DemoAuth.module.scss new file mode 100644 index 0000000000..aac57bdd4a --- /dev/null +++ b/frontend/src/component/user/DemoAuth/DemoAuth.module.scss @@ -0,0 +1,11 @@ +.container > * { + margin: 0.6rem 0; +} + +.button { + min-width: 150px; +} + +.form { + margin: 4em 1em +} diff --git a/frontend/src/component/user/DemoAuth/index.jsx b/frontend/src/component/user/DemoAuth/index.jsx new file mode 100644 index 0000000000..4985c198a9 --- /dev/null +++ b/frontend/src/component/user/DemoAuth/index.jsx @@ -0,0 +1,3 @@ +import DemoAuth from './DemoAuth'; + +export default DemoAuth; diff --git a/frontend/src/component/user/Login/Login.styles.js b/frontend/src/component/user/Login/Login.styles.js index 39068eb550..d107c058c8 100644 --- a/frontend/src/component/user/Login/Login.styles.js +++ b/frontend/src/component/user/Login/Login.styles.js @@ -38,7 +38,7 @@ export const useStyles = makeStyles(theme => ({ fontSize: '1.25rem', }, loginFormContainer: { - maxWidth: '300px', + maxWidth: '500px', }, imageContainer: { display: 'flex', diff --git a/frontend/src/component/user/authentication-component.jsx b/frontend/src/component/user/authentication-component.jsx index 0d9d59d7cb..0235155b8c 100644 --- a/frontend/src/component/user/authentication-component.jsx +++ b/frontend/src/component/user/authentication-component.jsx @@ -3,13 +3,16 @@ import PropTypes from 'prop-types'; import SimpleAuth from './SimpleAuth/SimpleAuth'; import AuthenticationCustomComponent from './authentication-custom-component'; import PasswordAuth from './PasswordAuth/PasswordAuth'; +import DemoAuth from './DemoAuth'; const SIMPLE_TYPE = 'unsecure'; +const DEMO_TYPE = 'demo'; const PASSWORD_TYPE = 'password'; class AuthComponent extends React.Component { static propTypes = { user: PropTypes.object.isRequired, + demoLogin: PropTypes.func.isRequired, insecureLogin: PropTypes.func.isRequired, passwordLogin: PropTypes.func.isRequired, loadInitialData: PropTypes.func.isRequired, @@ -39,6 +42,15 @@ class AuthComponent extends React.Component { history={this.props.history} /> ); + } else if (authDetails.type === DEMO_TYPE) { + content = ( + + ); } else { content = ( diff --git a/frontend/src/component/user/authentication-container.jsx b/frontend/src/component/user/authentication-container.jsx index b1fbbf5349..0f9a2d8102 100644 --- a/frontend/src/component/user/authentication-container.jsx +++ b/frontend/src/component/user/authentication-container.jsx @@ -1,9 +1,10 @@ import { connect } from 'react-redux'; import AuthenticationComponent from './authentication-component'; -import { insecureLogin, passwordLogin } from '../../store/user/actions'; +import { insecureLogin, passwordLogin, demoLogin } from '../../store/user/actions'; import { loadInitialData } from './../../store/loader'; const mapDispatchToProps = (dispatch, props) => ({ + demoLogin: (path, user) => demoLogin(path, user)(dispatch), insecureLogin: (path, user) => insecureLogin(path, user)(dispatch), passwordLogin: (path, user) => passwordLogin(path, user)(dispatch), loadInitialData: () => loadInitialData(props.flags)(dispatch), diff --git a/frontend/src/store/user/actions.js b/frontend/src/store/user/actions.js index 6798f39ebb..4285025ee4 100644 --- a/frontend/src/store/user/actions.js +++ b/frontend/src/store/user/actions.js @@ -40,6 +40,17 @@ export function insecureLogin(path, user) { }; } +export function demoLogin(path, user) { + return dispatch => { + dispatch({ type: START_FETCH_USER }); + + return api + .demoLogin(path, user) + .then(json => dispatch(updateUser(json))) + .catch(handleError); + }; +} + export function passwordLogin(path, user) { return dispatch => { dispatch({ type: START_FETCH_USER }); diff --git a/frontend/src/store/user/api.js b/frontend/src/store/user/api.js index e07057c311..e14458015b 100644 --- a/frontend/src/store/user/api.js +++ b/frontend/src/store/user/api.js @@ -26,6 +26,17 @@ function insecureLogin(path, user) { .then((response) => response.json()); } +function demoLogin(path, user) { + return fetch(path, { + method: "POST", + credentials: "include", + headers, + body: JSON.stringify(user), + }) + .then(throwIfNotSuccess) + .then((response) => response.json()); +} + function passwordLogin(path, data) { return fetch(path, { method: "POST", @@ -40,6 +51,7 @@ function passwordLogin(path, data) { const api = { fetchUser, insecureLogin, + demoLogin, logoutUser, passwordLogin, };