Merge pull request #368 from suvarnakale/shiksha-2.0

Issue #PS-1251 feat: UI for login credential pop up

public/locales/en/common.json

@@ -95,6 +95,11 @@
     "OBSERVATIONS_FORMS": "Observations and Forms",
     "OTHER_REASON": "Other Reason",
     "OTHER_REASON_PLACEHOLDER": "Enter Other Reason",
+    "BACK": "Back",
+    "SEND_CREDENTIALS": "Send Credentials",
+    "CREDENTIALS_EMAILED": "The login credentials will be emailed to the user at",
+    "NEW": "New {{role}}",
+    "USER_CREDENTIAL_SEND_SUCCESSFULLY": "User Credentials Sent Successfully!",
     "CENTER_SESSIONS": "Center Sessions",
     "SCHEDULE_NEW": "Schedule New",
     "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions",

src/components/SendCredentialModal.tsx

@@ -0,0 +1,111 @@
+import { Box, Button, Divider, Modal, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+import CloseIcon from '@mui/icons-material/Close';
+import { showToastMessage } from './Toastify';
+
+interface SendCredentialModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+const SendCredentialModal: React.FC<SendCredentialModalProps> = ({
+  open,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const theme = useTheme<any>();
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '65%',
+    boxShadow: 24,
+    bgcolor: '#fff',
+    borderRadius: '16px',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
+
+  const handleAction = () => {
+    onClose();
+    showToastMessage(t('COMMON.USER_CREDENTIAL_SEND_SUCCESSFULLY'), 'success');
+  };
+
+  return (
+    <Modal
+      open={open}
+      aria-labelledby="child-modal-title"
+      aria-describedby="child-modal-description"
+    >
+      <Box sx={{ ...style }}>
+        <Box
+          display={'flex'}
+          justifyContent={'space-between'}
+          sx={{ padding: '18px 16px' }}
+        >
+          <Box marginBottom={'0px'}>
+            <Typography
+              variant="h2"
+              sx={{
+                color: theme.palette.warning['A200'],
+                fontSize: '14px',
+              }}
+              component="h2"
+            >
+              {t('COMMON.NEW', { role: 'Learner' })}
+            </Typography>
+          </Box>
+          <CloseIcon
+            sx={{
+              cursor: 'pointer',
+              color: theme.palette.warning['A200'],
+            }}
+            onClick={onClose}
+          />
+        </Box>
+        <Divider />
+        {/* {isButtonAbsent ? ( */}
+        <Box sx={{ padding: '18px 16px', width: '100%' }}>
+          <Typography
+            variant="h2"
+            sx={{
+              color: theme.palette.warning['400'],
+              fontSize: '14px',
+            }}
+            component="h2"
+          >
+            {t('COMMON.CREDENTIALS_EMAILED')}
+          </Typography>
+          <Box padding={'0 1rem'}>user's email</Box>
+        </Box>
+        <>
+          <Box mt={1.5}>
+            <Divider />
+          </Box>
+          <Box p={'18px'} display={'flex'} gap={'1rem'}>
+            <Button
+              className="w-100"
+              sx={{ boxShadow: 'none' }}
+              variant="outlined"
+            >
+              {t('COMMON.BACK')}
+            </Button>
+            <Button
+              className="w-100"
+              sx={{ boxShadow: 'none' }}
+              variant="contained"
+              onClick={() => handleAction()}
+            >
+              {t('COMMON.SEND_CREDENTIALS')}
+            </Button>
+          </Box>
+        </>
+      </Box>
+    </Modal>
+  );
+};
+
+export default SendCredentialModal;

src/pages/addLearner.tsx

@@ -1,16 +1,22 @@
 import DynamicForm from '@/components/DynamicForm';
 import React from 'react';
 import { schema, uiSchema } from '@/utils/schema';
+// import { schema, uiSchema } from '@/components/GeneratedSchemas';
 import { IChangeEvent } from '@rjsf/core';
 import ISubmitEvent from '@rjsf/core';
 import { Box } from '@mui/material';
 import { RJSFSchema } from '@rjsf/utils';
+import SendCredentialModal from '@/components/SendCredentialModal';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 const addLearner = () => {
+  const [openModal, setOpenModal] = React.useState(false);
+
   const handleSubmit = (
     data: IChangeEvent<any, RJSFSchema, any>,
     event: React.FormEvent<any>
   ) => {
+    setOpenModal(true);
     const target = event.target as HTMLFormElement;
     const elementsArray = Array.from(target.elements);
 
@@ -37,6 +43,10 @@ const addLearner = () => {
     console.log('Form errors:', errors);
   };
 
+  const handleCloseModal = () => {
+    setOpenModal(false);
+  };
+
   return (
     <Box margin={'5rem'}>
       <DynamicForm
@@ -48,8 +58,18 @@ const addLearner = () => {
         widgets={{}}
         showErrorList={true}
       />
+
+      <SendCredentialModal open={openModal} onClose={handleCloseModal} />
     </Box>
   );
 };
 
+export async function getStaticProps({ locale }: any) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common'])),
+      // Will be passed to the page component as props
+    },
+  };
+}
 export default addLearner;