From ee4a6dd75e2af5291aeaa0b0dd3da207a93f03d3 Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Mon, 23 Sep 2024 15:33:00 +0530
Subject: [PATCH] Task #PS-2032 : Send email notification to the user upon
 reset password

---
 public/locales/en/common.json       |  2 +-
 src/pages/reset-password/index.tsx  | 88 ++++++++++++++++++-----------
 src/pages/user-profile/[userId].tsx | 64 +++++++++++----------
 src/services/LoginService.ts        |  2 +-
 4 files changed, 89 insertions(+), 67 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index f7caf2ef..774d2fac 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -166,7 +166,7 @@
     "PLEASE_RESET_YOUR_PASSWORD": "Please reset your password to ensure your account is secure",
     "DO_IT_LATER": "I’ll do it later",
     "SUCCESSFULLY_RESET": "Your password has been successfully reset",
-    "LINK_EXPIRED": "Link Expired",
+    "LINK_EXPIRED": "Link has been expired",
     "WE_SEND_AN_EMAIL":"We sent an email to {{maskEmail}} with a link to reset your password",
     "CURRENT_PASSWORD_NOT":"Current Password Not Matched",
     "NO_USERNAME":"Username not found",
diff --git a/src/pages/reset-password/index.tsx b/src/pages/reset-password/index.tsx
index 3ed1a9a3..60da8931 100644
--- a/src/pages/reset-password/index.tsx
+++ b/src/pages/reset-password/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Box } from '@mui/material';
+import { Box, Divider } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -86,41 +86,61 @@ const ResetPassword = () => {
           <Image src={Logo} alt="App Logo" height={100} />
         </Box>
         <Box sx={{ padding: '60px' }}>
-          <Box
-            sx={{
-              color: theme.palette.warning['300'],
-              fontWeight: '400',
-              fontSize: '22px',
-              textAlign: 'center',
-            }}
-          >
-            {t('LOGIN_PAGE.CREATE_STRONG_PASSWORD')}
-          </Box>
-          <Box
-            sx={{
-              color: theme.palette.warning['300'],
-              fontWeight: '400',
-              fontSize: '14px',
-              textAlign: 'center',
-              mt: 0.5,
-            }}
-          >
-            {t('LOGIN_PAGE.CREATE_NEW')}
-          </Box>
           {isTokenValid ? (
-            <PasswordCreate handleResetPassword={handleResetPassword} />
+            <>
+              <Box
+                sx={{
+                  color: theme.palette.warning['300'],
+                  fontWeight: '400',
+                  fontSize: '22px',
+                  textAlign: 'center',
+                }}
+              >
+                {t('LOGIN_PAGE.CREATE_STRONG_PASSWORD')}
+              </Box>
+              <Box
+                sx={{
+                  color: theme.palette.warning['300'],
+                  fontWeight: '400',
+                  fontSize: '14px',
+                  textAlign: 'center',
+                  mt: 0.5,
+                }}
+              >
+                {t('LOGIN_PAGE.CREATE_NEW')}
+              </Box>
+              <PasswordCreate handleResetPassword={handleResetPassword} />
+            </>
           ) : (
-            <Box
-              sx={{
-                color: theme.palette.error.main,
-                fontWeight: '400',
-                fontSize: '16px',
-                textAlign: 'center',
-                mt: 2,
-              }}
-            >
-              {t('LOGIN_PAGE.LINK_EXPIRED')}
-            </Box>
+            <>
+              <Box
+                sx={{
+                  color: theme.palette.error.main,
+                  fontWeight: '500',
+                  fontSize: '22px',
+                  textAlign: 'center',
+                }}
+              >
+                {t('LOGIN_PAGE.LINK_EXPIRED')}
+              </Box>
+              <Box sx={{ mt: 3 }}>
+                <Divider />
+              </Box>
+              <Box
+                sx={{
+                  mt: 2,
+                  color: theme.palette.secondary.main,
+                  textAlign: 'center',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                }}
+                onClick={() => {
+                  router.push('/login');
+                }}
+              >
+                {t('LOGIN_PAGE.BACK_TO_LOGIN')}
+              </Box>
+            </>
           )}
           <CentralizedModal
             icon={true}
diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx
index c9022558..1c3b8b57 100644
--- a/src/pages/user-profile/[userId].tsx
+++ b/src/pages/user-profile/[userId].tsx
@@ -627,42 +627,44 @@ const TeacherProfile: React.FC<TeacherProfileProp> = ({
         <Box mt={5}>
           <Typography textAlign={'center'}>{t('COMMON.LOADING')}</Typography>
         </Box>
-      )}{' '}
-      <Box sx={{ px: '16px', mt: 2 }}>
-        <Box
-          sx={{
-            fontSize: '14px',
-            fontWeight: '500',
-            color: theme.palette.warning['300'],
-          }}
-        >
-          {t('LOGIN_PAGE.OTHER_SETTING')}
-        </Box>
-        <Box sx={{ mt: 2.5 }}>
-          <Button
-            variant="outlined"
-            color="primary"
+      )}
+      {selfUserId === userId ? (
+        <Box sx={{ px: '16px', mt: 2 }}>
+          <Box
             sx={{
-              '&.Mui-disabled': {
-                backgroundColor: theme?.palette?.primary?.main,
-              },
-              minWidth: '84px',
-              padding: theme.spacing(1),
+              fontSize: '14px',
               fontWeight: '500',
-              width: '188px',
-              height: '40px',
-              '@media (max-width: 430px)': {
-                width: '100%',
-              },
-            }}
-            onClick={() => {
-              router.push('/edit-password');
+              color: theme.palette.warning['300'],
             }}
           >
-            {t('LOGIN_PAGE.RESET_PASSWORD')}
-          </Button>
+            {t('LOGIN_PAGE.OTHER_SETTING')}
+          </Box>
+          <Box sx={{ mt: 2.5 }}>
+            <Button
+              variant="outlined"
+              color="primary"
+              sx={{
+                '&.Mui-disabled': {
+                  backgroundColor: theme?.palette?.primary?.main,
+                },
+                minWidth: '84px',
+                padding: theme.spacing(1),
+                fontWeight: '500',
+                width: '188px',
+                height: '40px',
+                '@media (max-width: 430px)': {
+                  width: '100%',
+                },
+              }}
+              onClick={() => {
+                router.push('/edit-password');
+              }}
+            >
+              {t('LOGIN_PAGE.RESET_PASSWORD')}
+            </Button>
+          </Box>
         </Box>
-      </Box>
+      ) : null}
     </Box>
   );
 };
diff --git a/src/services/LoginService.ts b/src/services/LoginService.ts
index c8f6290d..36a85941 100644
--- a/src/services/LoginService.ts
+++ b/src/services/LoginService.ts
@@ -94,7 +94,7 @@ export const successfulNotification = async (
   key: any,
   email: any
 ): Promise<any> => {
-  const apiUrl: string =   `${process.env.NEXT_PUBLIC_NOTIFICATION_BASE_URL}/notification/send'`;
+  const apiUrl: string =   `${process.env.NEXT_PUBLIC_NOTIFICATION_BASE_URL}/notification/send`;
   try {
     const response = await post(apiUrl, { isQueue, context, key, email });
     console.log(email);