Add notification target update functionality

src/utils/Fetcher.jsx

@@ -225,6 +225,14 @@ const UpdateUserDetails = userDetails => {
   })
 }
 
+const UpdateNotificationTarget = notificationTarget => {
+  return Fetch(`${API_URL}/users/targets`, {
+    method: 'PUT',
+    headers: HEADERS(),
+    body: JSON.stringify(notificationTarget),
+  })
+}
+
 const GetSubscriptionSession = () => {
   return Fetch(API_URL + `/payments/create-subscription`, {
     method: 'GET',
@@ -373,6 +381,7 @@ export {
   UpdateChoreHistory,
   UpdateChorePriority,
   UpdateLabel,
+  UpdateNotificationTarget,
   UpdatePassword,
   UpdateThingState,
   UpdateUserDetails,

src/views/Authorization/Signup.jsx

@@ -103,12 +103,13 @@ const SignupView = () => {
     signUp(username, password, displayName, email).then(response => {
       if (response.status === 201) {
         handleLogin(username, password)
+      } else if (response.status === 403) {
+        setError('Signup disabled, please contact admin')
       } else {
         console.log('Signup failed')
         response.json().then(res => {
           setError(res.error)
-        }
-        )
+        })
       }
     })
   }

src/views/Settings/NotificationSetting.jsx

@@ -1,33 +1,77 @@
 import { Button, Divider, Input, Option, Select, Typography } from '@mui/joy'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useState } from 'react'
 import { UserContext } from '../../contexts/UserContext'
-import { GetUserProfile, UpdateUserDetails } from '../../utils/Fetcher'
+import { UpdateNotificationTarget } from '../../utils/Fetcher'
 
 const NotificationSetting = () => {
   const { userProfile, setUserProfile } = useContext(UserContext)
-  useEffect(() => {
-    if (!userProfile) {
-      GetUserProfile().then(resp => {
-        resp.json().then(data => {
-          setUserProfile(data.res)
-          setChatID(data.res.chatID)
+  const [notificationTarget, setNotificationTarget] = useState(
+    userProfile?.notification_target
+      ? String(userProfile.notification_target.type)
+      : '0',
+  )
+
+  const [chatID, setChatID] = useState(
+    userProfile?.notification_target?.target_id,
+  )
+  const [error, setError] = useState('')
+  const SaveValidation = () => {
+    switch (notificationTarget) {
+      case '1':
+        if (chatID === '') {
+          setError('Chat ID is required')
+          return false
+        } else if (isNaN(chatID) || chatID === '0') {
+          setError('Invalid Chat ID')
+          return false
+        }
+        break
+      case '2':
+        if (chatID === '') {
+          setError('User key is required')
+          return false
+        }
+        break
+      default:
+        break
+    }
+    setError('')
+    return true
+  }
+  const handleSave = () => {
+    if (!SaveValidation()) return
+
+    UpdateNotificationTarget({
+      target: chatID,
+      type: Number(notificationTarget),
+    }).then(resp => {
+      alert('Notification target updated')
+      setUserProfile({
+        ...userProfile,
+        notification_target: {
+          target: chatID,
+          type: Number(notificationTarget),
+        },
       })
     })
   }
-  }, [])
-  const [chatID, setChatID] = useState(userProfile?.chatID)
-
   return (
     <div className='grid gap-4 py-4' id='notifications'>
       <Typography level='h3'>Notification Settings</Typography>
       <Divider />
       <Typography level='body-md'>Manage your notification settings</Typography>
 
-      <Select defaultValue='telegram' sx={{ maxWidth: '200px' }} disabled>
-        <Option value='telegram'>Telegram</Option>
-        <Option value='discord'>Discord</Option>
+      <Select
+        value={notificationTarget}
+        sx={{ maxWidth: '200px' }}
+        onChange={(e, selected) => setNotificationTarget(selected)}
+      >
+        <Option value='0'>None</Option>
+        <Option value='1'>Telegram</Option>
+        <Option value='2'>Pushover</Option>
       </Select>
-
+      {notificationTarget === '1' && (
+        <>
           <Typography level='body-xs'>
             You need to initiate a message to the bot in order for the Telegram
             notification to work{' '}
@@ -43,6 +87,8 @@ const NotificationSetting = () => {
             to start a chat
           </Typography>
 
+          <Typography level='body-sm'>Chat ID</Typography>
+
           <Input
             value={chatID}
             onChange={e => setChatID(e.target.value)}
@@ -52,8 +98,8 @@ const NotificationSetting = () => {
             }}
           />
           <Typography mt={0} level='body-xs'>
-        If you don't know your Chat ID, start chat with userinfobot and it will
-        send you your Chat ID.{' '}
+            If you don't know your Chat ID, start chat with userinfobot and it
+            will send you your Chat ID.{' '}
             <a
               style={{
                 textDecoration: 'underline',
@@ -65,21 +111,33 @@ const NotificationSetting = () => {
             </a>{' '}
             to start chat with userinfobot{' '}
           </Typography>
+        </>
+      )}
+      {notificationTarget === '2' && (
+        <>
+          <Typography level='body-sm'>User key</Typography>
+          <Input
+            value={chatID}
+            onChange={e => setChatID(e.target.value)}
+            placeholder='User ID'
+            sx={{
+              width: '200px',
+            }}
+          />
+        </>
+      )}
+      {error && (
+        <Typography color='warning' level='body-sm'>
+          {error}
+        </Typography>
+      )}
 
       <Button
         sx={{
           width: '110px',
           mb: 1,
         }}
-        onClick={() => {
-          UpdateUserDetails({
-            chatID: Number(chatID),
-          }).then(resp => {
-            resp.json().then(data => {
-              setUserProfile(data)
-            })
-          })
-        }}
+        onClick={handleSave}
       >
         Save
       </Button>