Demo Mode (#117)

* Adding Demo Mode to Fredy

ui/src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, {useEffect} from 'react';
 
 import InsufficientPermission from './components/permission/InsufficientPermission';
 import PermissionAwareRoute from './components/permission/PermissionAwareRoute';
@@ -6,94 +6,106 @@ import GeneralSettings from './views/generalSettings/GeneralSettings';
 import JobMutation from './views/jobs/mutation/JobMutation';
 import UserMutator from './views/user/mutation/UserMutator';
 import JobInsight from './views/jobs/insights/JobInsight.jsx';
-import { useDispatch, useSelector } from 'react-redux';
-import { Switch, Redirect } from 'react-router-dom';
+import {useDispatch, useSelector} from 'react-redux';
+import {Switch, Redirect} from 'react-router-dom';
 import Logout from './components/logout/Logout';
 import Logo from './components/logo/Logo';
 import Menu from './components/menu/Menu';
 import Login from './views/login/Login';
 import Users from './views/user/Users';
 import Jobs from './views/jobs/Jobs';
-import { Route } from 'react-router';
+import {Route} from 'react-router';
 
 import './App.less';
 import TrackingModal from './components/tracking/TrackingModal.jsx';
+import {Banner} from '@douyinfe/semi-ui';
 
 export default function FredyApp() {
-  const dispatch = useDispatch();
-  const [loading, setLoading] = React.useState(true);
-  const currentUser = useSelector((state) => state.user.currentUser);
-  const settings = useSelector((state) => state.generalSettings.settings);
+    const dispatch = useDispatch();
+    const [loading, setLoading] = React.useState(true);
+    const currentUser = useSelector((state) => state.user.currentUser);
+    const settings = useSelector((state) => state.generalSettings.settings);
 
-  useEffect(() => {
-    async function init() {
-      await dispatch.user.getCurrentUser();
-      if (!needsLogin()) {
-        await dispatch.provider.getProvider();
-        await dispatch.jobs.getJobs();
-        await dispatch.jobs.getProcessingTimes();
-        await dispatch.notificationAdapter.getAdapter();
-        await dispatch.generalSettings.getGeneralSettings();
-      }
-      setLoading(false);
-    }
+    useEffect(() => {
+        async function init() {
+            await dispatch.user.getCurrentUser();
+            if (!needsLogin()) {
+                await dispatch.provider.getProvider();
+                await dispatch.jobs.getJobs();
+                await dispatch.jobs.getProcessingTimes();
+                await dispatch.notificationAdapter.getAdapter();
+                await dispatch.generalSettings.getGeneralSettings();
+            }
+            setLoading(false);
+        }
 
-    init();
-  }, [currentUser?.userId]);
+        init();
+    }, [currentUser?.userId]);
 
-  const needsLogin = () => {
-    return currentUser == null || Object.keys(currentUser).length === 0;
-  };
+    const needsLogin = () => {
+        return currentUser == null || Object.keys(currentUser).length === 0;
+    };
 
-  const isAdmin = () => currentUser != null && currentUser.isAdmin;
+    const isAdmin = () => currentUser != null && currentUser.isAdmin;
 
-  const login = () => (
-    <Switch>
-      <Route name="Login" path={'/login'} component={Login} />
-      <Redirect from="*" to={'/login'} />
-    </Switch>
-  );
-
-  return loading ? null : needsLogin() ? (
-    login()
-  ) : (
-    <div className="app">
-      <div className="app__container">
-        <Logout />
-        <Logo width={190} white />
-        <Menu isAdmin={isAdmin()} />
-        {settings.analyticsEnabled === null && <TrackingModal/>}
+    const login = () => (
         <Switch>
-          <Route name="Insufficient Permission" path={'/403'} component={InsufficientPermission} />
-          <Route name="Create new Job" path={'/jobs/new'} component={JobMutation} />
-          <Route name="Edit a Job" path={'/jobs/edit/:jobId'} component={JobMutation} />
-          <Route name="Insights into a Job" path={'/jobs/insights/:jobId'} component={JobInsight} />
-          <Route name="Job overview" path={'/jobs'} component={Jobs} />
-          <PermissionAwareRoute
-            name="Create new User"
-            path="/users/new"
-            component={<UserMutator />}
-            currentUser={currentUser}
-          />
-          <PermissionAwareRoute
-            name="Edit a user"
-            path="/users/edit/:userId"
-            component={<UserMutator />}
-            currentUser={currentUser}
-          />
-          <PermissionAwareRoute name="Users" path="/users" component={<Users />} currentUser={currentUser} />
-          <PermissionAwareRoute
-            name="General Settings"
-            path="/generalSettings"
-            component={<GeneralSettings />}
-            currentUser={currentUser}
-          />
-
-          <Redirect from="/" to={'/jobs'} />
+            <Route name="Login" path={'/login'} component={Login}/>
+            <Redirect from="*" to={'/login'}/>
         </Switch>
-      </div>
-    </div>
-  );
+    );
+
+    return loading ? null : needsLogin() ? (
+        login()
+    ) : (
+        <div className="app">
+            <div className="app__container">
+                <Logout/>
+                <Logo width={190} white/>
+                <Menu isAdmin={isAdmin()}/>
+
+                {settings.demoMode && (
+                <>
+                    <Banner fullMode={true}
+                            type="info"
+                            bordered
+                            closeIcon={null}
+                            description="You're currently viewing the demo version of Fredy. Jobs won't scrape websites, and any changes you make will be reverted at midnight."
+                    />
+                    <br/>
+                </>)}
+                {(settings.analyticsEnabled === null && !settings.demoMode) && <TrackingModal/>}
+                <Switch>
+                    <Route name="Insufficient Permission" path={'/403'} component={InsufficientPermission}/>
+                    <Route name="Create new Job" path={'/jobs/new'} component={JobMutation}/>
+                    <Route name="Edit a Job" path={'/jobs/edit/:jobId'} component={JobMutation}/>
+                    <Route name="Insights into a Job" path={'/jobs/insights/:jobId'} component={JobInsight}/>
+                    <Route name="Job overview" path={'/jobs'} component={Jobs}/>
+                    <PermissionAwareRoute
+                        name="Create new User"
+                        path="/users/new"
+                        component={<UserMutator/>}
+                        currentUser={currentUser}
+                    />
+                    <PermissionAwareRoute
+                        name="Edit a user"
+                        path="/users/edit/:userId"
+                        component={<UserMutator/>}
+                        currentUser={currentUser}
+                    />
+                    <PermissionAwareRoute name="Users" path="/users" component={<Users/>} currentUser={currentUser}/>
+                    <PermissionAwareRoute
+                        name="General Settings"
+                        path="/generalSettings"
+                        component={<GeneralSettings/>}
+                        currentUser={currentUser}
+                    />
+
+                    <Redirect from="/" to={'/jobs'}/>
+                </Switch>
+            </div>
+        </div>
+    );
 }
 
 FredyApp.displayName = 'FredyApp';

ui/src/services/rematch/models/demoMode.js

@@ -0,0 +1,24 @@
+import { xhrGet } from '../../xhr';
+export const demoMode = {
+  state: {
+    demoMode: false,
+  },
+  reducers: {
+    setDemoMode: (state, payload) => {
+      return {
+        ...state,
+        demoMode: payload.demoMode,
+      };
+    },
+  },
+  effects: {
+    async getDemoMode() {
+      try {
+        const response = await xhrGet('/api/demo');
+        this.setDemoMode(response.json);
+      } catch (Exception) {
+        console.error('Error while trying to get resource for api/demo. Error:', Exception);
+      }
+    },
+  },
+};

ui/src/services/rematch/store.js

@@ -5,6 +5,7 @@ import { provider } from './models/provider';
 import { createLogger } from 'redux-logger';
 import { jobs } from './models/jobs';
 import { user } from './models/user';
+import { demoMode } from './models/demoMode.js';
 import { init } from '@rematch/core';
 const middleware = [];
 if (process.env.NODE_ENV === 'development') {
@@ -16,6 +17,7 @@ const store = init({
   models: {
     notificationAdapter,
     generalSettings,
+    demoMode,
     provider,
     jobs,
     user,

ui/src/views/generalSettings/GeneralSettings.jsx

@@ -109,10 +109,17 @@ const GeneralSettings = function GeneralSettings() {
             });
         } catch (exception) {
             console.error(exception);
-            throwMessage('Error while trying to store settings.', 'error');
+            if(exception?.json?.message != null){
+                throwMessage(exception.json.message, 'error');
+            }else {
+                throwMessage('Error while trying to store settings.', 'error');
+            }
             return;
         }
-        throwMessage('Settings stored successfully.', 'success');
+        throwMessage('Settings stored successfully. We will reload your browser in 3 seconds.', 'success');
+        setTimeout(()=>{
+            location.reload();
+        }, 3000);
     };
 
     return (
@@ -120,14 +127,6 @@ const GeneralSettings = function GeneralSettings() {
             {!loading && (
                 <React.Fragment>
                     <Headline text="General Settings"/>
-                    <Banner
-                        fullMode={false}
-                        type="info"
-                        closeIcon={null}
-                        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>Info</div>}
-                        style={{marginBottom: '1rem'}}
-                        description="If you change any settings, you must restart Fredy afterwards."
-                    />
                     <div>
                         <SegmentPart
                             name="Interval"

ui/src/views/login/Login.jsx

@@ -1,88 +1,102 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 import cityBackground from '../../assets/city_background.jpg';
 import Logo from '../../components/logo/Logo';
-import { xhrPost } from '../../services/xhr';
-import { useHistory } from 'react-router';
-import { useDispatch } from 'react-redux';
-import { Input, Button, Banner } from '@douyinfe/semi-ui';
+import {xhrPost} from '../../services/xhr';
+import {useHistory} from 'react-router';
+import {useDispatch, useSelector} from 'react-redux';
+import {Input, Button, Banner} from '@douyinfe/semi-ui';
 
 import './login.less';
-import { IconUser, IconLock } from '@douyinfe/semi-icons';
+import {IconUser, IconLock} from '@douyinfe/semi-icons';
 
 export default function Login() {
-  const dispatch = useDispatch();
+    const dispatch = useDispatch();
+    const [username, setUserName] = React.useState('');
+    const [password, setPassword] = React.useState('');
+    const [error, setError] = React.useState(null);
+    const demoMode = useSelector((state) => state.demoMode.demoMode || false);
+    const history = useHistory();
 
-  const [username, setUserName] = React.useState('');
-  const [password, setPassword] = React.useState('');
-  const [error, setError] = React.useState(null);
+    useEffect(() => {
+        async function init() {
+            await dispatch.demoMode.getDemoMode();
+        }
 
-  const history = useHistory();
+        init();
+    }, []);
 
-  const tryLogin = async () => {
-    if (username.length === 0 || password.length === 0) {
-      setError('Username and password are mandatory.');
-      return;
-    }
-    try {
-      await xhrPost('/api/login', {
-        username,
-        password,
-      });
-      setError(null);
-    } catch (Exception) {
-      setError('Login not successful...');
-      return;
-    }
-    await dispatch.user.getCurrentUser();
-    history.push('/jobs');
-  };
+    const tryLogin = async () => {
+        if (username.length === 0 || password.length === 0) {
+            setError('Username and password are mandatory.');
+            return;
+        }
+        try {
+            await xhrPost('/api/login', {
+                username,
+                password,
+            });
+            setError(null);
+        } catch (Exception) {
+            setError('Login not successful...');
+            return;
+        }
+        await dispatch.user.getCurrentUser();
+        history.push('/jobs');
+    };
 
-  return (
-    <div className="login">
-      <div className="login__bgImage" style={{ background: `url("${cityBackground}")` }} />
-      <Logo />
-      <form>
-        <div className="login__loginWrapper">
-          {error && <Banner type="danger" closeIcon={null} description={error} />}
-          <Input
-            size="large"
-            prefix={<IconUser />}
-            placeholder="Username"
-            value={username}
-            showClear
-            style={{ marginTop: error ? '1rem' : '4rem' }}
-            autofocus
-            onChange={(value) => setUserName(value)}
-            onKeyPress={async (e) => {
-              if (e.key === 'Enter') {
-                await tryLogin();
-              }
-            }}
-          />
+    return (
+        <div className="login">
+            <div className="login__bgImage" style={{background: `url("${cityBackground}")`}}/>
+            <Logo/>
+            <form>
+                <div className="login__loginWrapper">
+                    {error && <Banner type="danger" closeIcon={null} description={error}/>}
+                    <Input
+                        size="large"
+                        prefix={<IconUser/>}
+                        placeholder="Username"
+                        value={username}
+                        showClear
+                        style={{marginTop: error ? '1rem' : '4rem'}}
+                        autoFocus
+                        onChange={(value) => setUserName(value)}
+                        onKeyPress={async (e) => {
+                            if (e.key === 'Enter') {
+                                await tryLogin();
+                            }
+                        }}
+                    />
 
-          <Input
-            size="large"
-            mode="password"
-            prefix={<IconLock />}
-            value={password}
-            placeholder="Password"
-            style={{ marginTop: '2rem' }}
-            onChange={(value) => setPassword(value)}
-            onKeyPress={async (e) => {
-              if (e.key === 'Enter') {
-                await tryLogin();
-              }
-            }}
-          />
+                    <Input
+                        size="large"
+                        mode="password"
+                        prefix={<IconLock/>}
+                        value={password}
+                        placeholder="Password"
+                        style={{marginTop: '2rem'}}
+                        onChange={(value) => setPassword(value)}
+                        onKeyPress={async (e) => {
+                            if (e.key === 'Enter') {
+                                await tryLogin();
+                            }
+                        }}
+                    />
 
-          <Button type="primary" onClick={tryLogin} theme="solid" style={{ marginTop: '3rem' }}>
-            Login
-          </Button>
+                    <Button type="primary" onClick={tryLogin} theme="solid" style={{marginTop: '3rem'}}>
+                        Login
+                    </Button>
+                    <br/>
+                    {demoMode && <Banner fullMode={true}
+                                         type="info"
+                                         bordered
+                                         closeIcon={null}
+                                         description="This is the demo version of Fredy. Use 'demo' as both the username and password to log in."
+                    />}
+                </div>
+            </form>
         </div>
-      </form>
-    </div>
-  );
+    );
 }
 
 Login.displayName = 'Login';