Wire Register User Functionality

Tombolo/client-reactjs/src/App.js

@@ -66,7 +66,7 @@ import { AppHeader } from './components/layout/Header';
 import ErrorBoundary from './components/common/ErrorBoundary';
 import Fallback from './components/common/Fallback';
 import { PrivateRoute } from './components/common/PrivateRoute';
-import { userActions } from './redux/actions/User';
+// import { userActions } from './redux/actions/User';
 import { checkBackendStatus } from './redux/actions/Backend';
 import { store } from './redux/store/Store';
 import { applicationActions } from './redux/actions/Application';
@@ -92,10 +92,10 @@ class App extends React.Component {
       this.setState({ message: 'Connecting to...' });
       store.dispatch(checkBackendStatus());
     } else {
-      if (!this.props.authWithAzure) {
-        this.setState({ message: 'Authenticating...' });
-        store.dispatch(userActions.validateToken());
-      }
+      // if (!this.props.authWithAzure) {
+      //   this.setState({ message: 'Authenticating...' });
+      //   store.dispatch(userActions.validateToken());
+      // }
     }
 
     //listen for clicks on the document to close tour if nav link is clicked

Tombolo/client-reactjs/src/components/common/AuthHeader.js

@@ -1,8 +1,7 @@
-import { userActions } from '../../redux/actions/User';
+// import { userActions } from '../../redux/actions/User';
 import { store } from '../../redux/store/Store';
 import { message } from 'antd';
 import { msalInstance } from '../../index';
-
 import { InteractionRequiredAuthError } from '@azure/msal-browser';
 
 export function handleError(response) {
@@ -13,23 +12,32 @@ export function handleError(response) {
     store.dispatch({ type: 'SET_BACKEND_STATUS', payload: false });
     return;
   }
-  if (response.status == 401) {
-    //token expired
-    localStorage.removeItem('user');
-    store.dispatch(userActions.logout());
-  } else if (response.status == 422) {
-    throw Error('Error occurred while saving the data. Please check the form data');
-  } else if (response.status == 404) {
-    message.error('404: Resource not found on server');
-    return;
-  } else if (typeof response === 'string') {
-    message.error(response);
-    return;
-  } else {
-    //if we have not defined a handling above, throw undefined error
-    message.error('An undefined error occurred. Please try again later');
-    return;
-  }
+
+  response.json().then((data) => {
+    if (data.message) {
+      message.error(data.message);
+    } else {
+      message.error('An undefined error occurred. Please try again later');
+    }
+  });
+
+  // if (response.status == 401) {
+  //   //token expired
+  //   // localStorage.removeItem('user');
+  //   // store.dispatch(userActions.logout());
+  // } else if (response.status == 422) {
+  //   throw Error('Error occurred while saving the data. Please check the form data');
+  // } else if (response.status == 404) {
+  //   message.error('404: Resource not found on server');
+  //   return;
+  // } else if (typeof response === 'string') {
+  //   message.error(response);
+  //   return;
+  // } else {
+  //   //if we have not defined a handling above, throw undefined error
+  //   message.error('An undefined error occurred. Please try again later');
+  //   return;
+  // }
 }
 
 // When the client sends a fetch request the header requires an auth token.

Tombolo/client-reactjs/src/components/common/Constants.js

@@ -1,8 +1,8 @@
 export const Constants = {
   LOGIN_SUCCESS: 'USERS_LOGIN_SUCCESS',
-  LOGOUT: 'USERS_LOGOUT',
-  VALIDATE_TOKEN: 'VALIDATE_TOKEN',
-  INVALID_TOKEN: 'INVALID_TOKEN',
+  LOGIN_FAILED: 'USERS_LOGIN_FAILED',
+  LOGOUT_SUCCESS: 'USERS_LOGOUT',
+  LOGOUT_FAILED: 'USERS_LOGOUT_FAILED',
 
   APPLICATION_SELECTED: 'APPLICATION_SELECTED',
   NEW_APPLICATION_ADDED: 'NEW_APPLICATION_ADDED',

Tombolo/client-reactjs/src/components/layout/Header.js

@@ -1,18 +1,16 @@
 import { AppstoreOutlined, DownOutlined } from '@ant-design/icons';
-import { Button, Dropdown, message, Space, Tooltip } from 'antd';
+import { Button, Dropdown, Space, Tooltip } from 'antd';
 import { debounce } from 'lodash';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link, withRouter } from 'react-router-dom';
 
 import logo from '../../images/logo.png';
-import { msalInstance } from '../../index';
+
 import { applicationActions } from '../../redux/actions/Application';
 import { assetsActions } from '../../redux/actions/Assets';
 import { expandGroups, selectGroup, getGroupsTree } from '../../redux/actions/Groups';
-import { userActions } from '../../redux/actions/User';
 import { authHeader, handleError } from '../common/AuthHeader.js';
-import { hasAdminRole } from '../common/AuthUtil.js';
 
 class AppHeader extends Component {
   pwdformRef = React.createRef();
@@ -92,10 +90,11 @@ class AppHeader extends Component {
     }
 
     if (this.state.applications.length === 0) {
-      var url = `/api/app/read/appListByUsername?user_name=${this.props.user.username}`;
-      if (hasAdminRole(this.props.user)) {
-        url = '/api/app/read/app_list';
-      }
+      // var url = `/api/app/read/appListByUsername?user_name=${this.props.user.username}`;
+      // if (hasAdminRole(this.props.user)) {
+      //   url = '/api/app/read/app_list';
+      // }
+      const url = '/api/app/read/app_list';
       fetch(url, {
         headers: authHeader(),
       })
@@ -182,7 +181,7 @@ class AppHeader extends Component {
   }
 
   handleLogOut = (_e) => {
-    localStorage.removeItem('user');
+    // localStorage.removeItem('user');
     this.setState({
       applicationId: '',
       selected: 'Select an Application',
@@ -193,14 +192,14 @@ class AppHeader extends Component {
     this.props.dispatch(selectGroup({ id: '', key: '0-0' }));
     //reset cluster selectiong
     this.props.dispatch(assetsActions.clusterSelected(''));
-    this.props.dispatch(userActions.logout());
-
-    if (process.env.REACT_APP_APP_AUTH_METHOD === 'azure_ad') {
-      msalInstance.logoutRedirect();
-    } else {
-      this.props.history.push('/login');
-      message.success('You have been successfully logged out. ');
-    }
+    // this.props.dispatch(userActions.logout());
+
+    // if (process.env.REACT_APP_APP_AUTH_METHOD === 'azure_ad') {
+    //   msalInstance.logoutRedirect();
+    // } else {
+    //   this.props.history.push('/login');
+    //   message.success('You have been successfully logged out. ');
+    // }
   };
 
   handleChange(value) {
@@ -278,9 +277,9 @@ class AppHeader extends Component {
       },
     ];
 
-    if (!this.props.user || !this.props.user.token) {
-      return null;
-    }
+    // if (!this.props.user || !this.props.user.token) {
+    //   return null;
+    // }
     const menuItems = this.state.applications.map((app) => {
       return { key: app.value, label: app.display };
     });
@@ -338,18 +337,18 @@ class AppHeader extends Component {
 }
 
 function mapStateToProps(state) {
-  const { loggingIn, user } = state.authenticationReducer;
+  // const { loggingIn, user } = state.authenticationReducer;
+  const user = { firstName: 'John', lastName: 'Doe' };
   const { application, clusters, newApplication, updatedApplication, deletedApplicationId, noClusters } =
     state.applicationReducer;
 
   return {
-    loggingIn,
-    user,
     clusters,
     noClusters,
     application,
     newApplication,
     updatedApplication,
+    user,
     deletedApplicationId,
   };
 }

Tombolo/client-reactjs/src/components/login/register.js

@@ -4,6 +4,8 @@ import msLogo from '../../images/mslogo.png';
 import passwordComplexityValidator from '../common/passwordComplexityValidator';
 // import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 
+import { authActions } from '../../redux/actions/Auth';
+
 const Register = () => {
   const [popOverContent, setPopOverContent] = useState(null);
   const [form] = Form.useForm();
@@ -14,10 +16,13 @@ const Register = () => {
 
   useEffect(() => {}, [popOverContent]);
 
-  const onFinish = (values) => {
-    console.log('Received values of form: ', values);
-    // Add your logic to register the user here
-    alert('register user code fires here');
+  const onFinish = async (values) => {
+    try {
+      const test = await authActions.registerBasicUser(values);
+      console.log(test);
+    } catch (e) {
+      console.log(e);
+    }
   };
 
   return (

Tombolo/client-reactjs/src/redux/actions/Auth.js

@@ -0,0 +1,65 @@
+import { Constants } from '../../components/common/Constants';
+import { authHeader, handleError } from '../../components/common/AuthHeader';
+
+export const authActions = {
+  login,
+  logout,
+  registerBasicUser,
+};
+
+function login(email, password) {
+  console.log(email, password);
+  //   return {
+  //     type: Constants.LOGIN_SUCCESS,
+  //     payload: { token, refreshToken, user },
+  //   };
+
+  return;
+}
+
+function logout(user) {
+  console.log(user);
+  return {
+    type: Constants.LOGOUT_SUCCESS,
+  };
+}
+
+async function registerBasicUser(values) {
+  const user = await registerBasicUserFunc(values);
+
+  if (user) {
+    alert('user registered, next PR we will log user in after succesful registration');
+  }
+  //   return {
+  //     type: Constants.REFRESH_TOKEN_SUCCESS,
+  //     payload: { token },
+  //   };
+  return;
+}
+
+const registerBasicUserFunc = async (values) => {
+  const url = '/api/auth/registerBasicUser';
+
+  values.registrationMethod = 'traditional';
+
+  const response = await fetch(
+    url,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(values),
+    },
+    { headers: authHeader() }
+  );
+
+  if (!response.ok) {
+    handleError(response);
+    return null;
+  }
+
+  const data = await response.json();
+
+  return data;
+};