improve notification component, no double template

src/components/NotificationDialog.vue

@@ -37,7 +37,7 @@
                             <input id="name" v-model="notification.name" type="text" class="form-control" required>
                         </div>
 
-                        <Telegram></Telegram>
+                        <Telegram v-if="notification.type === 'telegram'"></Telegram>
 
                         <!-- TODO: Convert all into vue components, but not an easy task.  -->
 

src/components/notifications/Telegram.vue

@@ -1,42 +1,40 @@
 <template>
-    <template v-if="$parent.notification.type === name">
-        <div class="mb-3">
-            <label for="telegram-bot-token" class="form-label">Bot Token</label>
-            <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
-            <div class="form-text">
-                You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
-            </div>
+    <div class="mb-3">
+        <label for="telegram-bot-token" class="form-label">Bot Token</label>
+        <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <div class="form-text">
+            You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
         </div>
+    </div>
 
-        <div class="mb-3">
-            <label for="telegram-chat-id" class="form-label">Chat ID</label>
-
-            <div class="input-group mb-3">
-                <input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required>
-                <button v-if="$parent.notification.telegramBotToken" class="btn btn-outline-secondary" type="button" @click="autoGetTelegramChatID">
-                    {{ $t("Auto Get") }}
-                </button>
-            </div>
-
-            <div class="form-text">
-                Support Direct Chat / Group / Channel's Chat ID
-
-                <p style="margin-top: 8px;">
-                    You can get your chat id by sending message to the bot and go to this url to view the chat_id:
-                </p>
-
-                <p style="margin-top: 8px;">
-                    <template v-if="$parent.notification.telegramBotToken">
-                        <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
-                    </template>
-
-                    <template v-else>
-                        {{ telegramGetUpdatesURL }}
-                    </template>
-                </p>
-            </div>
+    <div class="mb-3">
+        <label for="telegram-chat-id" class="form-label">Chat ID</label>
+
+        <div class="input-group mb-3">
+            <input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required>
+            <button v-if="$parent.notification.telegramBotToken" class="btn btn-outline-secondary" type="button" @click="autoGetTelegramChatID">
+                {{ $t("Auto Get") }}
+            </button>
+        </div>
+
+        <div class="form-text">
+            Support Direct Chat / Group / Channel's Chat ID
+
+            <p style="margin-top: 8px;">
+                You can get your chat id by sending message to the bot and go to this url to view the chat_id:
+            </p>
+
+            <p style="margin-top: 8px;">
+                <template v-if="$parent.notification.telegramBotToken">
+                    <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
+                </template>
+
+                <template v-else>
+                    {{ telegramGetUpdatesURL }}
+                </template>
+            </p>
         </div>
-    </template>
+    </div>
 </template>
 
 <script>