feat: add support for demo-signin

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 (
+        <form onSubmit={handleSubmit} action={authDetails.path}>
+            <div className={styles.container}>
+                <img alt="Unleash Logo" src="logo.png" width="70" height="70" />
+                <h2>Access the Unleash demo instance</h2>
+                <p>No further data or Credit Card required</p>
+                <div className={styles.form}>
+                    <TextField
+                        value={email}
+                        onChange={handleChange}
+                        inputProps={{ 'data-test': 'email-input-field' }}
+                        size="small"
+                        variant="outlined"
+                        label="Email"
+                        name="email"
+                        required
+                        type="email"
+                    />
+                    &nbsp;&nbsp;
+             
+                    <Button
+                        type="submit"
+                        variant="contained"
+                        color="primary"
+                        data-test="login-submit"
+                        className={styles.button}
+                    >
+                        Sign in
+                    </Button>
+                </div>
+                <p>
+                    By accessing our demo instance, you agree to the Unleash&nbsp; 
+                    <a
+                        href="https://www.unleash-hosted.com/tos/"
+                        target="_blank" rel="noreferrer">
+                            Customer Terms of Service
+                    </a> and&nbsp; 
+                    <a href="https://www.unleash-hosted.com/privacy-policy/" target="_blank" rel="noreferrer">
+                        Privacy Policy
+                    </a>
+
+                </p>
+            </div>
+        </form>
+    );
+};
+
+DemoAuth.propTypes = {
+    authDetails: PropTypes.object.isRequired,
+    demoLogin: PropTypes.func.isRequired,
+    loadInitialData: PropTypes.func.isRequired,
+    history: PropTypes.object.isRequired,
+};
+
+export default DemoAuth;

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
+}

frontend/src/component/user/DemoAuth/index.jsx

@@ -0,0 +1,3 @@
+import DemoAuth from './DemoAuth';
+
+export default DemoAuth;

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',

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 = (
+                <DemoAuth
+                    demoLogin={this.props.demoLogin}
+                    authDetails={authDetails}
+                    loadInitialData={this.props.loadInitialData}
+                    history={this.props.history}
+                />
+            );
         } else {
             content = (
                 <AuthenticationCustomComponent authDetails={authDetails} />

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),

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 });

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,
 };