fix few login and registration issues

buildly-release-management · Oct 8, 2024 · 3390397 · 3390397
1 parent c1c9f27
commit 3390397
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "buildly-react-template",
-  "version": "v1.0.0",
+  "version": "v1.0.1",
   "description": "Frontend Template from Buildly built using the React framework",
   "main": "src/index.js",
   "private": true,

diff --git a/src/components/Alerts/Alerts.js b/src/components/Alerts/Alerts.js
@@ -14,18 +14,22 @@ const useStyles = makeStyles((theme) => ({
   success: {
     backgroundColor: '#009900',
     color: '#000',
+    whiteSpace: 'pre-wrap',
   },
   info: {
     backgroundColor: '#0099CC',
     color: '#000',
+    whiteSpace: 'pre-wrap',
   },
   warning: {
     backgroundColor: '#FFCC33',
     color: '#000',
+    whiteSpace: 'pre-wrap',
   },
   error: {
     backgroundColor: '#FF0033',
     color: '#000',
+    whiteSpace: 'pre-wrap',
   },
 }));
 
@@ -48,7 +52,7 @@ const Alerts = () => {
         <Snackbar
           key={`${data.type}-${data.message}`}
           open={data.open || false}
-          autoHideDuration={2000}
+          autoHideDuration={10000}
           onClose={handleClose}
           anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
           message={data.message}

diff --git a/src/components/StripeCard/StripeCard.js b/src/components/StripeCard/StripeCard.js
@@ -36,7 +36,7 @@ const StripeCard = ({ cardError, setCardError }) => {
         <CardElement onChange={onCardChange} />
       </FormControl>
       <FormHelperText className={classes.helperText}>
-        {cardError}
+        {cardError && cardError.message}
       </FormHelperText>
     </FormGroup>
   );

diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
@@ -14,7 +14,7 @@ import {
 } from '@mui/material';
 import logo from '@assets/buildly-product-labs-logo.png';
 import Copyright from '@components/Copyright/Copyright';
-import GithubLogin from '@components/SocialLogin/GithubLogin';
+// import GithubLogin from '@components/SocialLogin/GithubLogin';
 import Loader from '@components/Loader/Loader';
 import { useInput } from '@hooks/useInput';
 import useAlert from '@hooks/useAlert';
@@ -202,7 +202,7 @@ const Login = ({ history }) => {
                 </div>
               </form>
               <Grid container>
-                <Grid item xs={12} className={classes.or}>
+                {/* <Grid item xs={12} className={classes.or}>
                   <Typography variant="body1">----OR----</Typography>
                 </Grid>
                 <Grid item xs={12} className={classes.socialAuth}>
@@ -211,7 +211,7 @@ const Login = ({ history }) => {
                     history={history}
                     disabled={isLoginLoading || isPasswordCheckLoading || isSocialLoginLoading}
                   />
-                </Grid>
+                </Grid> */}
                 <Grid item xs className={classes.link}>
                   <Link
                     href={routes.FORGOT_PASSWORD}

diff --git a/src/pages/Register/Register.js b/src/pages/Register/Register.js
@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import logo from '@assets/buildly-product-labs-logo.png';
 import Copyright from '@components/Copyright/Copyright';
-import GithubLogin from '@components/SocialLogin/GithubLogin';
+// import GithubLogin from '@components/SocialLogin/GithubLogin';
 import { useInput } from '@hooks/useInput';
 import useAlert from '@hooks/useAlert';
 import { routes } from '@routes/routesConstants';
@@ -460,7 +460,7 @@ const Register = ({ history }) => {
                 </div>
               </form>
               <Grid container>
-                <Grid item xs={12} className={classes.or}>
+                {/* <Grid item xs={12} className={classes.or}>
                   <Typography variant="body1">----OR----</Typography>
                 </Grid>
                 <Grid item xs={12} className={classes.socialAuth}>
@@ -469,7 +469,7 @@ const Register = ({ history }) => {
                     history={history}
                     disabled={isRegisterLoading || isSocialLoginLoading || isInviteTokenCheckLoading}
                   />
-                </Grid>
+                </Grid> */}
                 <Grid item className={classes.link}>
                   <Link href={routes.LOGIN} variant="body2" color="secondary">
                     Already have an account? Sign in

diff --git a/src/pages/RegistrationFinish/RegistrationFinish.js b/src/pages/RegistrationFinish/RegistrationFinish.js
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Button,
   Card, CardActions,
@@ -17,30 +17,30 @@ import StripeCard from '@components/StripeCard/StripeCard';
 import { getStripeProductQuery } from '@react-query/queries/authUser/getStripeProductQuery';
 import { useAddSubscriptionMutation } from '../../react-query/mutations/authUser/addSubscriptionMutation';
 import './RegistrationFinish.css';
-import { UserContext } from '../../context/User.context';
+import { getUser } from '../../context/User.context';
 import { useInput } from '../../hooks/useInput';
 import useAlert from '../../hooks/useAlert';
 import { hasAdminRights, hasGlobalAdminRights } from '../../utils/permissions';
 import { validators } from '../../utils/validators';
 import { routes } from '../../routes/routesConstants';
+import Loader from '../../components/Loader/Loader';
 
 const RegistrationFinish = ({ history }) => {
-  const user = useContext(UserContext);
+  const user = getUser();
   const { displayAlert } = useAlert();
   const isAdmin = hasAdminRights(user) || hasGlobalAdminRights(user);
   const [organization, setOrganization] = useState(null);
   const stripe = useStripe();
   const elements = useElements();
-  const cardError = () => { };
-  const setCardError = () => { };
+  const [cardError, setCardError] = useState(false);
 
   const { data: stripeProductData, isLoading: isStripeProductsLoading } = useQuery(
     ['stripeProducts'],
     () => getStripeProductQuery(),
     { refetchOnWindowFocus: false },
   );
 
-  const { mutate: addSubscriptionMutation } = useAddSubscriptionMutation(displayAlert, history, routes.PRODUCT_PORTFOLIO);
+  const { mutate: addSubscriptionMutation, isLoading: isAddSubscriptionLoading } = useAddSubscriptionMutation(displayAlert, history, routes.PRODUCT_PORTFOLIO);
 
   if (user) {
     if (!organization) {
@@ -89,11 +89,14 @@ const RegistrationFinish = ({ history }) => {
     };
     if (!validationError) {
       addSubscriptionMutation(formValue);
+    } else {
+      setCardError(validationError);
     }
   };
 
   return (
     <>
+      {(isStripeProductsLoading || isAddSubscriptionLoading) && <Loader open={isStripeProductsLoading || isAddSubscriptionLoading} />}
       <Container maxWidth="sm" className="main-container">
         {isAdmin ? (
           <>
@@ -150,6 +153,7 @@ const RegistrationFinish = ({ history }) => {
                     variant="contained"
                     color="primary"
                     className="btn-space"
+                    disabled={!product.value || cardError || isStripeProductsLoading || isAddSubscriptionLoading}
                     onClick={handleSubmit}
                   >
                     Submit

diff --git a/src/react-query/mutations/authUser/loginMutation.js b/src/react-query/mutations/authUser/loginMutation.js
@@ -9,19 +9,23 @@ export const useLoginMutation = (
   displayAlert,
 ) => useMutation(
   async (loginData) => {
-    const token = await oauthService.authenticateWithPasswordFlow(loginData);
-    oauthService.setAccessToken(token.data);
-    const user = await httpService.makeRequest(
-      'get',
-      `${window.env.API_URL}coreuser/me/`,
-    );
-    oauthService.setOauthUser(user, { loginData });
-    const coreuser = await httpService.makeRequest(
-      'get',
-      `${window.env.API_URL}coreuser/`,
-    );
-    oauthService.setCurrentCoreUser(coreuser, user);
-    return user;
+    try {
+      const token = await oauthService.authenticateWithPasswordFlow(loginData);
+      oauthService.setAccessToken(token.data);
+      const user = await httpService.makeRequest(
+        'get',
+        `${window.env.API_URL}coreuser/me/`,
+      );
+      oauthService.setOauthUser(user, { loginData });
+      const coreuser = await httpService.makeRequest(
+        'get',
+        `${window.env.API_URL}coreuser/`,
+      );
+      oauthService.setCurrentCoreUser(coreuser, user);
+      return user;
+    } catch (e) {
+      displayAlert('error', 'Make sure you have verified your email address to access the platform.\nIf yes, either your account is not approved or you provided invalid username/password');
+    }
   },
   {
     onSuccess: async (response) => {
@@ -36,7 +40,7 @@ export const useLoginMutation = (
   },
   {
     onError: () => {
-      displayAlert('error', 'Either your account is not approved or you provided invalid username/password');
+      displayAlert('error', 'Make sure you have verified your email address to access the platform.\nIf yes, either your account is not approved or you provided invalid username/password');
     },
   },
 );
diff --git a/src/react-query/mutations/authUser/registerMutation.js b/src/react-query/mutations/authUser/registerMutation.js
@@ -1,4 +1,5 @@
 import { useMutation } from 'react-query';
+import moment from 'moment-timezone';
 import { httpService } from '@modules/http/http.service';
 
 export const useRegisterMutation = (
@@ -15,8 +16,13 @@ export const useRegisterMutation = (
     return response;
   },
   {
-    onSuccess: async () => {
-      displayAlert('success', 'Please verify the email address to access the platform.');
+    onSuccess: async (response, variables, context) => {
+      const timeDiff = moment().diff(moment(response.data.organization.create_date), 'minutes');
+      if (timeDiff < 5) {
+        displayAlert('success', `Your are the first person in the Organization ${variables.organization_name}.\nPlease verify the email address to access the platform.`);
+      } else {
+        displayAlert('success', 'Please verify the email address to access the platform.');
+      }
       history.push(redirectTo);
     },
     onError: () => {