Update regex

src/Managing.WebApp/src/pages/settingsPage/UserInfoSettings.tsx

@@ -14,9 +14,14 @@ type UpdateAvatarForm = {
   avatarUrl: string
 }
 
+type UpdateTelegramChannelForm = {
+  telegramChannel: string
+}
+
 function UserInfoSettings() {
   const [showUpdateModal, setShowUpdateModal] = useState(false)
   const [showAvatarModal, setShowAvatarModal] = useState(false)
+  const [showTelegramModal, setShowTelegramModal] = useState(false)
   const queryClient = useQueryClient()
   const { apiUrl } = useApiUrlStore()
   const api = new UserClient({}, apiUrl)
@@ -38,6 +43,12 @@ function UserInfoSettings() {
     formState: { errors: avatarErrors },
   } = useForm<UpdateAvatarForm>()
 
+  const {
+    register: registerTelegram,
+    handleSubmit: handleSubmitTelegram,
+    formState: { errors: telegramErrors },
+  } = useForm<UpdateTelegramChannelForm>()
+
   const onSubmitAgentName = async (data: UpdateAgentNameForm) => {
     const toast = new Toast('Updating agent name')
     try {
@@ -64,6 +75,19 @@ function UserInfoSettings() {
     }
   }
 
+  const onSubmitTelegram = async (data: UpdateTelegramChannelForm) => {
+    const toast = new Toast('Updating telegram channel')
+    try {
+      await api.user_UpdateTelegramChannel(data.telegramChannel)
+      queryClient.invalidateQueries({ queryKey: ['user'] })
+      setShowTelegramModal(false)
+      toast.update('success', 'Telegram channel updated successfully')
+    } catch (error) {
+      console.error('Error updating telegram channel:', error)
+      toast.update('error', 'Failed to update telegram channel')
+    }
+  }
+
   return (
     <div className="container mx-auto p-4">
       <div className="bg-base-200 rounded-lg p-6 shadow-lg">
@@ -108,6 +132,17 @@ function UserInfoSettings() {
               </button>
             </div>
           </div>
+
+          <div>
+            <label className="font-semibold">Telegram Channel:</label>
+            <p>{user?.telegramChannel || 'Not set'}</p>
+            <button
+              className="btn btn-primary mt-2"
+              onClick={() => setShowTelegramModal(true)}
+            >
+              Update Telegram Channel
+            </button>
+          </div>
         </div>
       </div>
 
@@ -178,6 +213,44 @@ function UserInfoSettings() {
           </button>
         </div>
       </Modal>
+
+      <Modal
+        showModal={showTelegramModal}
+        onClose={() => setShowTelegramModal(false)}
+        onSubmit={handleSubmitTelegram(onSubmitTelegram)}
+        titleHeader="Update Telegram Channel"
+      >
+        <div className="form-control w-full">
+          <label className="label">
+            <span className="label-text">Telegram Channel</span>
+          </label>
+          <input
+            type="text"
+            className="input input-bordered w-full"
+            {...registerTelegram('telegramChannel', { 
+              required: 'Telegram channel is required',
+              pattern: {
+                value: /^[0-9]{5,15}$/,
+                message: 'Enter numeric channel ID (5-15 digits)'
+              }
+            })}
+            defaultValue={user?.telegramChannel || ''}
+            placeholder="2828543022"
+          />
+          {telegramErrors.telegramChannel && (
+            <label className="label">
+              <span className="label-text-alt text-error">
+                {telegramErrors.telegramChannel.message}
+              </span>
+            </label>
+          )}
+        </div>
+        <div className="modal-action">
+          <button type="submit" className="btn">
+            Update
+          </button>
+        </div>
+      </Modal>
     </div>
   )
 }