Fix loading reset password and message unread

Snunesnk · Jan 29, 2024 · e05f84c · e05f84c
1 parent ef90c65
commit e05f84c
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 86 deletions.
diff --git a/front/src/Components/ChatComponent/index.jsx b/front/src/Components/ChatComponent/index.jsx
@@ -83,9 +83,11 @@ const ChatComponent = ({
     }, [user])
 
     useEffect(() => {
-        if (!socketMessage) return
+        if (!socketMessage)
+            return
 
-        if (socketMessage.from !== user.login) return
+        if (socketMessage.from !== user.login)
+            return
 
         setMessages((prev) => {
             if (!prev) {

diff --git a/front/src/Components/Navbar/Navbar.jsx b/front/src/Components/Navbar/Navbar.jsx
@@ -31,16 +31,14 @@ const NOTIFICATION_ROUTE = '/dashboard/notifications'
 const MESSAGE_ROUTE = '/dashboard/messages'
 
 const checkIfLoggedInRoute = (path) => {
-    if (LOGGED_IN_ROUTES.some((route) => path.startsWith(route))) {
+    if (LOGGED_IN_ROUTES.some((route) => path.startsWith(route)))
         return true
-    }
     return false
 }
 
 const checkIfOnboardedRoute = (path) => {
-    if (ONBOARDED_ROUTES.some((route) => path.startsWith(route))) {
+    if (ONBOARDED_ROUTES.some((route) => path.startsWith(route)))
         return true
-    }
     return false
 }
 
@@ -61,19 +59,18 @@ const Navbar = () => {
         const onNotif = currentLocation.pathname.startsWith(NOTIFICATION_ROUTE)
         const onMessage = currentLocation.pathname.startsWith(MESSAGE_ROUTE)
 
-        if (
-            notif.type === 'like' ||
-            notif.type === 'unlike' ||
-            notif.type === 'visit' ||
-            notif.type === 'interested'
-        ) {
-            if (!onNotif) setNewNotification((prev) => prev + 1)
+        if (notif.type === 'like' || notif.type === 'unlike' || notif.type === 'visit' || notif.type === 'interested') {
+            if (!onNotif)
+                setNewNotification((prev) => prev + 1)
         } else if (notif.type === 'message' && !onMessage) {
             setNewMessage((prev) => prev + 1)
         } else if (notif.type === 'match') {
-            if (!onNotif) setNewMessage((prev) => prev + 1)
-            if (!onMessage) setNewNotification((prev) => prev + 1)
+            if (!onNotif)
+                setNewMessage((prev) => prev + 1)
+            if (!onMessage)
+                setNewNotification((prev) => prev + 1)
         }
+
     }
 
     useEffect(() => {
@@ -82,7 +79,8 @@ const Navbar = () => {
     }, [location])
 
     useEffect(() => {
-        if (!onboarded) return
+        if (!onboarded)
+            return
 
         const userInfos = sessionStorage.getItem('user_infos')
         if (userInfos) {
@@ -106,9 +104,7 @@ const Navbar = () => {
     const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen)
 
     const handleLogout = () => {
-        dispatch({
-            type: USER_STATE_ACTIONS.LOG_OUT,
-        })
+        dispatch({type: USER_STATE_ACTIONS.LOG_OUT})
         ApiService.get('/user/logout').then(() => {
             navigate('/login')
         })
@@ -117,12 +113,8 @@ const Navbar = () => {
     // Effet pour gérer le clic à l'extérieur du menu déroulant
     useEffect(() => {
         const handleOutsideClick = (event) => {
-            if (
-                dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)
-            ) {
+            if ( dropdownRef.current && !dropdownRef.current.contains(event.target))
                 setIsDropdownOpen(false) // Ferme le menu si un clic en dehors est détecté
-            }
         }
         document.addEventListener('mousedown', handleOutsideClick)
         return () => {
@@ -131,25 +123,35 @@ const Navbar = () => {
     }, [])
 
     useEffect(() => {
-        if (!onboarded) return
+        if (!onboarded)
+            return
+
         ApiService.get('/notifications/count').then((data) => {
-            const messageCount = data.filter(
-                (notif) => notif.type === 'message' || notif.type === 'match'
-            ).length
-            const notifCount = data.filter(
-                (notif) =>
-                    notif.type === 'like' ||
-                    notif.type === 'unlike' ||
-                    notif.type === 'match' ||
-                    notif.type === 'visit'
+            const messageCount = data.filter((notif) => notif.type === 'message' || notif.type === 'match').length
+            const notifCount = data.filter( (notif) => 
+                notif.type === 'like' || 
+                notif.type === 'unlike' || 
+                notif.type === 'match' || 
+                notif.type === 'visit'
             ).length
+
             const onNotif = location.pathname.startsWith(NOTIFICATION_ROUTE)
-            if (!onNotif) setNewNotification(notifCount)
+            if (!onNotif) 
+                setNewNotification(notifCount)
+
             const onMessage = location.pathname.startsWith(MESSAGE_ROUTE)
-            if (!onMessage) setNewMessage(messageCount)
+            if (!onMessage) 
+                setNewMessage(messageCount)
         })
     }, [onboarded])
 
+    const handleClickMessage = () => {
+        setNewMessage(0)
+        ApiService.put("/notifications/read/").catch(() => {
+            console.log("error")
+        })
+    }
+
     return (
         <div id="navbar">
             <Link to={loggedIn ? '/dashboard' : '/'}>
@@ -169,21 +171,16 @@ const Navbar = () => {
             )}
             {loggedIn && onboarded && (
                 <div className="navbar-menu">
-                    <Link
-                        to="/dashboard/notifications"
-                        onClick={() => setNewNotification(0)}
-                    >
+                    <Link to="/dashboard/notifications" onClick={() => setNewNotification(0)}>
                         <Badge badgeContent={newNotification} color="error">
                             <Notifications
                                 fontSize="large"
                                 sx={{ color: 'white' }}
                             ></Notifications>
                         </Badge>
                     </Link>
-                    <Link
-                        to="/dashboard/messages"
-                        onClick={() => setNewMessage(0)}
-                    >
+
+                    <Link to="/dashboard/messages" onClick={handleClickMessage} >
                         <Badge badgeContent={newMessage} color="error">
                             <Chat
                                 fontSize="large"

diff --git a/front/src/Components/Notifications/Notifications.jsx b/front/src/Components/Notifications/Notifications.jsx
@@ -64,21 +64,10 @@ function Notifications() {
                 )}
                 {notifications &&
                     notifications.map((notification, index) => (
-                        <div
-                            key={index}
-                            className={
-                                'notification-list' +
-                                (notification.read ? ' read' : '')
-                            }
-                        >
+                        <div key={index} className={'notification-list' + (notification.read ? ' read' : '')} >
                             <div className="notification-list_content">
                                 <div className="notification-list_img">
-                                    <img
-                                        src={ApiService.getImgPath(
-                                            notification.imgA
-                                        )}
-                                        alt={notification.name}
-                                    />
+                                    <img src={ApiService.getImgPath(notification.imgA)} alt={notification.name} />
                                 </div>
 
                                 <div className="notification-list_detail">
@@ -88,9 +77,7 @@ function Notifications() {
                                     </p>
                                     <p>
                                         <small>
-                                            {formatTimeDifference(
-                                                notification.created_at
-                                            )}
+                                            {formatTimeDifference(notification.created_at)}
                                         </small>
                                     </p>
                                 </div>

diff --git a/front/src/Pages/ResetPassword/Components/ChangePassword.jsx b/front/src/Pages/ResetPassword/Components/ChangePassword.jsx
@@ -11,6 +11,7 @@ const ChangePassword = ({ login, token }) => {
     const [confirmPassword, setConfirmPassword] = useState('')
     const [passwordError, setPasswordError] = useState('')
     const [loading, setLoading] = useState(false)
+    const [confirmChange, setConfirmChange] = useState(false)
 
     useEffect(() => {
         const res = checkPassword(newPassword)
@@ -33,16 +34,31 @@ const ChangePassword = ({ login, token }) => {
             login,
             hashedPassword,
         })
-            .then((data) => {
-                console.log('response: ', data)
-            })
-            .catch((error) => {
-                console.log(error)
-            })
+        .then((data) => {
+            console.log('response: ', data)
+            setLoading(false)
+            setConfirmChange(true)
+        })
+        .catch((error) => {
+            console.log(error)
+            switch (error.status) {
+                case 401:
+                    setPasswordError('Invalid token.')
+                    break
+                case 404:
+                    setPasswordError('User not found.')
+                    break
+                case 400:
+                    setPasswordError('Missing field.')
+                    break
+                default:
+                    setPasswordError('Something went wrong.')
+            }
+            setLoading(false)
+        })
     }
 
-    const passwordsMatch =
-        newPassword && confirmPassword && newPassword === confirmPassword
+    const passwordsMatch = newPassword && confirmPassword && newPassword === confirmPassword
 
     return (
         <div>
@@ -68,20 +84,22 @@ const ChangePassword = ({ login, token }) => {
                         type="password"
                     />
                     <label className="password-error">
-                        {newPassword &&
-                            confirmPassword &&
-                            passwordError === '' &&
-                            !passwordsMatch &&
-                            'Passwords do not match.'}
+                        { passwordError === '' && !passwordsMatch && 'Passwords do not match.'}
+                    </label>
+                    <label className='password-change'>
+                        {confirmChange && 'Password changed successfully.'}
                     </label>
                 </div>
-                <button
-                    type="submit"
-                    disabled={!passwordsMatch || loading}
-                    className="btn signup-btn reset-password-btn"
-                >
-                    {loading ? <CircularProgress /> : 'Change password'}
-                </button>
+                {!confirmChange ? (
+                    <button type="submit" disabled={!passwordsMatch || loading} className="btn signup-btn reset-password-btn">
+                        {loading ? <CircularProgress /> : 'Change password'}
+                    </button>
+                ) : (
+                    <button  className="btn signup-btn reset-password-btn pink">
+                        Go to login
+                    </button>
+                )}
+
             </form>
         </div>
     )

diff --git a/front/src/Pages/ResetPassword/Components/SendMail.jsx b/front/src/Pages/ResetPassword/Components/SendMail.jsx
@@ -7,22 +7,24 @@ const SendMail = () => {
     const [emailSent, setEmailSent] = useState(false)
     const [email, setEmail] = useState('')
     const [emailList, setEmailList] = useState([])
+    const [alreadySent, setAlreadySent] = useState(false)
 
     const handleChange = (e) => {
         setEmail(e)
     }
 
     const handleSubmit = (e) => {
         e.preventDefault()
-        setEmailSent(true)
         setEmailList([...emailList, email])
 
         ApiService.get('/user/reset-password/' + email)
             .then((data) => {
                 console.log(data)
+                setEmailSent(true)
             })
             .catch((error) => {
                 console.log(error)
+                setAlreadySent(true)
             })
     }
 
@@ -51,8 +53,11 @@ const SendMail = () => {
                 disabled={emailSent}
             >
                 Send an email to reset your password
-            </button>
+            </button>   
+
             <p className="send-mail-label">{emailSent && 'Email sent'}</p>
+            <p className="send-mail-label">{alreadySent && 'Email already sent'}</p>
+
         </div>
     )
 }

diff --git a/front/src/Pages/ResetPassword/ResetPassword.css b/front/src/Pages/ResetPassword/ResetPassword.css
@@ -52,6 +52,16 @@ label.password-error {
     min-height: 24px;
 }
 
+label.password-change {
+    color: green;
+    font-size: 0.8rem;
+    margin: 0;
+    width: 100%;
+    text-align: center;
+    display: block;
+    min-height: 24px;
+}
+
 .send-mail-label {
     margin: 0;
     width: 100%;

diff --git a/server/app/handlers/notifications.handler.js b/server/app/handlers/notifications.handler.js
@@ -27,7 +27,7 @@ export default class {
     else res.json(notifications);
   }
 
-  static async readNotification(req, res) {
+  static async readConvFromLogin(req, res) {
     const login = req.decodedUser._login;
     const login2 = req.params.login;
     const notif = new Notifications({ trigger_login: login2 });
@@ -42,6 +42,19 @@ export default class {
     res.status(200).send({ count: data?.affectedRows });
   }
 
+  static async readMessages(req, res) {
+    const login = req.decodedUser._login;
+    const notif = new Notifications({ login: login });
+    notif.created_at = undefined;
+
+    const data = await Notifications.updateNotifications(notif, {
+      type: "message",
+      login: login,
+    });
+
+    res.status(200).send({ count: data?.affectedRows });
+  }
+
   static async deleteNotification(req, res) {
     const login = req.params.login;
     const login2 = req.params.login2;

diff --git a/server/app/handlers/user.handler.js b/server/app/handlers/user.handler.js
@@ -616,8 +616,9 @@ export default class {
       user.password = password;
       user.token = crypto.randomBytes(64).toString("base64url");
       user.token += "_mail_timestamp_" + Date.now();
-      await User.updateByLogin(login, user);
-
+      const userChange = await User.updateByLogin(login, user);
+      console.log(userChange)
+
       res.status(200).send({
         message: "SUCCESS",
       });