Show notification to change password on first login

frontend/src/components/Person/Tabs/PersonTab.tsx

@@ -6,15 +6,17 @@ import { useUser } from '@/hooks/user'
 import { ChangePasswordForm } from './ChangePasswordForm'
 import { Box } from '@mui/material'
 import { useEffect } from 'react'
+import { useNotify } from '@/hooks/notification'
 
 export const PersonTab = () => {
   const { textField, data } = useDetailContext<PersonDetailsType>()
   const currentUser = useUser()
-
+  const notify = useNotify()
   useEffect(() => {
-    if (!currentUser) return
+    if (!currentUser?.isFirstLogin) return
     window.scrollTo(0, document.body.scrollHeight)
-  }, [currentUser])
+    notify('First login detected. Please change your password!', 'warning')
+  }, [currentUser, notify])
 
   const person = [
     ['Initials', textField('initials')],
@@ -42,7 +44,7 @@ export const PersonTab = () => {
         <Grouped title="Change password" style={{ padding: '1em' }}>
           {currentUser.isFirstLogin && (
             <Box sx={{ margin: '0.2em', width: '40em' }}>
-              <p style={{ color: 'red', fontWeight: 'bold', fontSize: 26 }}>Please change your password!</p>
+              <p style={{ color: 'darkorange', fontWeight: 'bold', fontSize: 26 }}>Please change your password!</p>
               <p style={{ fontSize: 22 }}>
                 Changing your password here will only set the password for this new version. The old application will
                 still work with your old password.