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,85 +1,143 @@
 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(() => {
+  const [notificationTarget, setNotificationTarget] = useState(
-    if (!userProfile) {
+    userProfile?.notification_target
-      GetUserProfile().then(resp => {
+      ? String(userProfile.notification_target.type)
-        resp.json().then(data => {
+      : '0',
-          setUserProfile(data.res)
+  )
-          setChatID(data.res.chatID)
-        })
-      })
-    }
-  }, [])
-  const [chatID, setChatID] = useState(userProfile?.chatID)
 
+  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),
+        },
+      })
+    })
+  }
   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>
+      <Select
-        <Option value='telegram'>Telegram</Option>
+        value={notificationTarget}
-        <Option value='discord'>Discord</Option>
+        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{' '}
+            <a
+              style={{
+                textDecoration: 'underline',
+                color: '#0891b2',
+              }}
+              href='https://t.me/DonetickBot'
+            >
+              Click here
+            </a>{' '}
+            to start a chat
+          </Typography>
 
-      <Typography level='body-xs'>
+          <Typography level='body-sm'>Chat ID</Typography>
-        You need to initiate a message to the bot in order for the Telegram
-        notification to work{' '}
-        <a
-          style={{
-            textDecoration: 'underline',
-            color: '#0891b2',
-          }}
-          href='https://t.me/DonetickBot'
-        >
-          Click here
-        </a>{' '}
-        to start a chat
-      </Typography>
 
-      <Input
+          <Input
-        value={chatID}
+            value={chatID}
-        onChange={e => setChatID(e.target.value)}
+            onChange={e => setChatID(e.target.value)}
-        placeholder='User ID / Chat ID'
+            placeholder='User ID / Chat ID'
-        sx={{
+            sx={{
-          width: '200px',
+              width: '200px',
-        }}
+            }}
-      />
+          />
-      <Typography mt={0} level='body-xs'>
+          <Typography mt={0} level='body-xs'>
-        If you don't know your Chat ID, start chat with userinfobot and it will
+            If you don't know your Chat ID, start chat with userinfobot and it
-        send you your Chat ID.{' '}
+            will send you your Chat ID.{' '}
-        <a
+            <a
-          style={{
+              style={{
-            textDecoration: 'underline',
+                textDecoration: 'underline',
-            color: '#0891b2',
+                color: '#0891b2',
-          }}
+              }}
-          href='https://t.me/userinfobot'
+              href='https://t.me/userinfobot'
-        >
+            >
-          Click here
+              Click here
-        </a>{' '}
+            </a>{' '}
-        to start chat with userinfobot{' '}
+            to start chat with userinfobot{' '}
-      </Typography>
+          </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={() => {
+        onClick={handleSave}
-          UpdateUserDetails({
-            chatID: Number(chatID),
-          }).then(resp => {
-            resp.json().then(data => {
-              setUserProfile(data)
-            })
-          })
-        }}
       >
         Save
       </Button>