From f21937b19715f579c8020f7409627258f1ae5d8e Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Fri, 20 Aug 2021 02:37:59 +0800
Subject: [PATCH] add animation for page change

---
 src/assets/app.scss         |  17 ++
 src/assets/vars.scss        |   4 +
 src/pages/DashboardHome.vue | 137 ++++++++--------
 src/pages/Details.vue       | 302 ++++++++++++++++++------------------
 src/pages/EditMonitor.vue   | 276 ++++++++++++++++----------------
 src/pages/Settings.vue      | 254 +++++++++++++++---------------
 6 files changed, 513 insertions(+), 477 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 57e1dee9..2dbddd3d 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -183,3 +183,20 @@ h2 {
         background-color: $dark-bg;
     }
 }
+
+/*
+ * Transitions
+ */
+
+// page-change
+.slide-fade-enter-active {
+    transition: all 0.20s $easing-in;
+}
+.slide-fade-leave-active {
+    transition: all 0.20s $easing-in;
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+    transform: translateY(50px);
+    opacity: 0;
+}
diff --git a/src/assets/vars.scss b/src/assets/vars.scss
index 6d331370..58ad677c 100644
--- a/src/assets/vars.scss
+++ b/src/assets/vars.scss
@@ -12,3 +12,7 @@ $dark-font-color2: #020b05;
 $dark-bg: #0D1117;
 $dark-bg2: #070A10;
 $dark-border-color: #1d2634;
+
+$easing-in: cubic-bezier(0.54,0.78,0.55,0.97);
+$easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 95535808..5c14eb35 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -1,78 +1,79 @@
 <template>
-    <div v-if="$route.name === 'DashboardHome'">
-        <h1 class="mb-3">
-            Quick Stats
-        </h1>
-
-        <div class="shadow-box big-padding text-center">
-            <div class="row">
-                <div class="col">
-                    <h3>Up</h3>
-                    <span class="num">{{ stats.up }}</span>
+    <transition name="slide-fade" appear>
+        <div v-if="$route.name === 'DashboardHome'">
+            <h1 class="mb-3">
+                Quick Stats
+            </h1>
+
+            <div class="shadow-box big-padding text-center">
+                <div class="row">
+                    <div class="col">
+                        <h3>Up</h3>
+                        <span class="num">{{ stats.up }}</span>
+                    </div>
+                    <div class="col">
+                        <h3>Down</h3>
+                        <span class="num text-danger">{{ stats.down }}</span>
+                    </div>
+                    <div class="col">
+                        <h3>Unknown</h3>
+                        <span class="num text-secondary">{{ stats.unknown }}</span>
+                    </div>
+                    <div class="col">
+                        <h3>Pause</h3>
+                        <span class="num text-secondary">{{ stats.pause }}</span>
+                    </div>
                 </div>
-                <div class="col">
-                    <h3>Down</h3>
-                    <span class="num text-danger">{{ stats.down }}</span>
-                </div>
-                <div class="col">
-                    <h3>Unknown</h3>
-                    <span class="num text-secondary">{{ stats.unknown }}</span>
-                </div>
-                <div class="col">
-                    <h3>Pause</h3>
-                    <span class="num text-secondary">{{ stats.pause }}</span>
-                </div>
-            </div>
-            <div v-if="false" class="row">
-                <div class="col-3">
-                    <h3>Uptime</h3>
-                    <p>(24-hour)</p>
-                    <span class="num" />
-                </div>
-                <div class="col-3">
-                    <h3>Uptime</h3>
-                    <p>(30-day)</p>
-                    <span class="num" />
+                <div v-if="false" class="row">
+                    <div class="col-3">
+                        <h3>Uptime</h3>
+                        <p>(24-hour)</p>
+                        <span class="num" />
+                    </div>
+                    <div class="col-3">
+                        <h3>Uptime</h3>
+                        <p>(30-day)</p>
+                        <span class="num" />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="shadow-box" style="margin-top: 25px;overflow-x: scroll">
-            <table class="table table-borderless table-hover">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Status</th>
-                        <th>DateTime</th>
-                        <th>Message</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(beat, index) in displayedRecords" :key="index">
-                        <td>{{ beat.name }}</td>
-                        <td><Status :status="beat.status" /></td>
-                        <td><Datetime :value="beat.time" /></td>
-                        <td>{{ beat.msg }}</td>
-                    </tr>
-
-                    <tr v-if="importantHeartBeatList.length === 0">
-                        <td colspan="4">
-                            No important events
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <div class="d-flex justify-content-center kuma_pagination">
-                <pagination
-                    v-model="page"
-                    :records="importantHeartBeatList.length"
-                    :per-page="perPage"
-                />
+            <div class="shadow-box" style="margin-top: 25px;overflow-x: scroll">
+                <table class="table table-borderless table-hover">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Status</th>
+                            <th>DateTime</th>
+                            <th>Message</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(beat, index) in displayedRecords" :key="index">
+                            <td>{{ beat.name }}</td>
+                            <td><Status :status="beat.status" /></td>
+                            <td><Datetime :value="beat.time" /></td>
+                            <td>{{ beat.msg }}</td>
+                        </tr>
+
+                        <tr v-if="importantHeartBeatList.length === 0">
+                            <td colspan="4">
+                                No important events
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <div class="d-flex justify-content-center kuma_pagination">
+                    <pagination
+                        v-model="page"
+                        :records="importantHeartBeatList.length"
+                        :per-page="perPage"
+                    />
+                </div>
             </div>
         </div>
-    </div>
-
+    </transition>
     <router-view ref="child" />
 </template>
 
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index fca03e3c..b723def2 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -1,169 +1,175 @@
 <template>
-    <h1> {{ monitor.name }}</h1>
-    <p class="url">
-        <a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a>
-        <span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
-        <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
-        <span v-if="monitor.type === 'keyword'">
-            <br>
-            <span>Keyword:</span> <span class="keyword">{{ monitor.keyword }}</span>
-        </span>
-    </p>
-
-    <div class="functions">
-        <button v-if="monitor.active" class="btn btn-light" @click="pauseDialog">
-            <font-awesome-icon icon="pause" /> Pause
-        </button>
-        <button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
-            <font-awesome-icon icon="play" /> Resume
-        </button>
-        <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">
-            <font-awesome-icon icon="edit" /> Edit
-        </router-link>
-        <button class="btn btn-danger" @click="deleteDialog">
-            <font-awesome-icon icon="trash" /> Delete
-        </button>
-    </div>
-
-    <div class="shadow-box">
-        <div class="row">
-            <div class="col-md-8">
-                <HeartbeatBar :monitor-id="monitor.id" />
-                <span class="word">Check every {{ monitor.interval }} seconds.</span>
-            </div>
-            <div class="col-md-4 text-center">
-                <span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px">{{ status.text }}</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="shadow-box big-padding text-center stats">
-        <div class="row">
-            <div class="col">
-                <h4>{{ pingTitle }}</h4>
-                <p>(Current)</p>
-                <span class="num">
-                    <a href="#" @click.prevent="showPingChartBox = !showPingChartBox">
-                        <CountUp :value="ping" />
-                    </a>
+    <transition name="slide-fade" appear>
+        <div>
+            <h1> {{ monitor.name }}</h1>
+            <p class="url">
+                <a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a>
+                <span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
+                <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
+                <span v-if="monitor.type === 'keyword'">
+                    <br>
+                    <span>Keyword:</span> <span class="keyword">{{ monitor.keyword }}</span>
                 </span>
+            </p>
+
+            <div class="functions">
+                <button v-if="monitor.active" class="btn btn-light" @click="pauseDialog">
+                    <font-awesome-icon icon="pause" /> Pause
+                </button>
+                <button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
+                    <font-awesome-icon icon="play" /> Resume
+                </button>
+                <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">
+                    <font-awesome-icon icon="edit" /> Edit
+                </router-link>
+                <button class="btn btn-danger" @click="deleteDialog">
+                    <font-awesome-icon icon="trash" /> Delete
+                </button>
             </div>
-            <div class="col">
-                <h4>Avg. {{ pingTitle }}</h4>
-                <p>(24-hour)</p>
-                <span class="num"><CountUp :value="avgPing" /></span>
-            </div>
-            <div class="col">
-                <h4>Uptime</h4>
-                <p>(24-hour)</p>
-                <span class="num"><Uptime :monitor="monitor" type="24" /></span>
-            </div>
-            <div class="col">
-                <h4>Uptime</h4>
-                <p>(30-day)</p>
-                <span class="num"><Uptime :monitor="monitor" type="720" /></span>
+
+            <div class="shadow-box">
+                <div class="row">
+                    <div class="col-md-8">
+                        <HeartbeatBar :monitor-id="monitor.id" />
+                        <span class="word">Check every {{ monitor.interval }} seconds.</span>
+                    </div>
+                    <div class="col-md-4 text-center">
+                        <span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px">{{ status.text }}</span>
+                    </div>
+                </div>
             </div>
 
-            <div v-if="certInfo" class="col">
-                <h4>Cert Exp.</h4>
-                <p>(<Datetime :value="certInfo.validTo" date-only />)</p>
-                <span class="num">
-                    <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ certInfo.daysRemaining }} days</a>
-                </span>
+            <div class="shadow-box big-padding text-center stats">
+                <div class="row">
+                    <div class="col">
+                        <h4>{{ pingTitle }}</h4>
+                        <p>(Current)</p>
+                        <span class="num">
+                            <a href="#" @click.prevent="showPingChartBox = !showPingChartBox">
+                                <CountUp :value="ping" />
+                            </a>
+                        </span>
+                    </div>
+                    <div class="col">
+                        <h4>Avg. {{ pingTitle }}</h4>
+                        <p>(24-hour)</p>
+                        <span class="num"><CountUp :value="avgPing" /></span>
+                    </div>
+                    <div class="col">
+                        <h4>Uptime</h4>
+                        <p>(24-hour)</p>
+                        <span class="num"><Uptime :monitor="monitor" type="24" /></span>
+                    </div>
+                    <div class="col">
+                        <h4>Uptime</h4>
+                        <p>(30-day)</p>
+                        <span class="num"><Uptime :monitor="monitor" type="720" /></span>
+                    </div>
+
+                    <div v-if="certInfo" class="col">
+                        <h4>Cert Exp.</h4>
+                        <p>(<Datetime :value="certInfo.validTo" date-only />)</p>
+                        <span class="num">
+                            <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ certInfo.daysRemaining }} days</a>
+                        </span>
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
 
-    <div v-if="showPingChartBox" class="shadow-box big-padding text-center ping-chart-wrapper">
-        <div class="row">
-            <div class="col">
-                <PingChart :monitor-id="monitor.id" />
+            <transition name="slide-fade" appear>
+                <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
+                    <div class="row">
+                        <div class="col">
+                            <h4>Certificate Info</h4>
+                            <table class="text-start">
+                                <tbody>
+                                    <tr class="my-3">
+                                        <td class="px-3">
+                                            Valid:
+                                        </td>
+                                        <td>{{ certInfo.valid }}</td>
+                                    </tr>
+                                    <tr class="my-3">
+                                        <td class="px-3">
+                                            Valid To:
+                                        </td>
+                                        <td><Datetime :value="certInfo.validTo" /></td>
+                                    </tr>
+                                    <tr class="my-3">
+                                        <td class="px-3">
+                                            Days Remaining:
+                                        </td>
+                                        <td>{{ certInfo.daysRemaining }}</td>
+                                    </tr>
+                                    <tr class="my-3">
+                                        <td class="px-3">
+                                            Issuer:
+                                        </td>
+                                        <td>{{ certInfo.issuer }}</td>
+                                    </tr>
+                                    <tr class="my-3">
+                                        <td class="px-3">
+                                            Fingerprint:
+                                        </td>
+                                        <td>{{ certInfo.fingerprint }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </transition>
+
+            <div v-if="showPingChartBox" class="shadow-box big-padding text-center ping-chart-wrapper">
+                <div class="row">
+                    <div class="col">
+                        <PingChart :monitor-id="monitor.id" />
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
 
-    <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
-        <div class="row">
-            <div class="col">
-                <h4>Certificate Info</h4>
-                <table class="text-start">
-                    <tbody>
-                        <tr class="my-3">
-                            <td class="px-3">
-                                Valid:
-                            </td>
-                            <td>{{ certInfo.valid }}</td>
+            <div class="shadow-box">
+                <table class="table table-borderless table-hover">
+                    <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>DateTime</th>
+                            <th>Message</th>
                         </tr>
-                        <tr class="my-3">
-                            <td class="px-3">
-                                Valid To:
-                            </td>
-                            <td><Datetime :value="certInfo.validTo" /></td>
-                        </tr>
-                        <tr class="my-3">
-                            <td class="px-3">
-                                Days Remaining:
-                            </td>
-                            <td>{{ certInfo.daysRemaining }}</td>
-                        </tr>
-                        <tr class="my-3">
-                            <td class="px-3">
-                                Issuer:
-                            </td>
-                            <td>{{ certInfo.issuer }}</td>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(beat, index) in displayedRecords" :key="index">
+                            <td><Status :status="beat.status" /></td>
+                            <td><Datetime :value="beat.time" /></td>
+                            <td>{{ beat.msg }}</td>
                         </tr>
-                        <tr class="my-3">
-                            <td class="px-3">
-                                Fingerprint:
+
+                        <tr v-if="importantHeartBeatList.length === 0">
+                            <td colspan="3">
+                                No important events
                             </td>
-                            <td>{{ certInfo.fingerprint }}</td>
                         </tr>
                     </tbody>
                 </table>
+
+                <div class="d-flex justify-content-center kuma_pagination">
+                    <pagination
+                        v-model="page"
+                        :records="importantHeartBeatList.length"
+                        :per-page="perPage"
+                    />
+                </div>
             </div>
-        </div>
-    </div>
-
-    <div class="shadow-box">
-        <table class="table table-borderless table-hover">
-            <thead>
-                <tr>
-                    <th>Status</th>
-                    <th>DateTime</th>
-                    <th>Message</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="(beat, index) in displayedRecords" :key="index">
-                    <td><Status :status="beat.status" /></td>
-                    <td><Datetime :value="beat.time" /></td>
-                    <td>{{ beat.msg }}</td>
-                </tr>
-
-                <tr v-if="importantHeartBeatList.length === 0">
-                    <td colspan="3">
-                        No important events
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-
-        <div class="d-flex justify-content-center kuma_pagination">
-            <pagination
-                v-model="page"
-                :records="importantHeartBeatList.length"
-                :per-page="perPage"
-            />
-        </div>
-    </div>
 
-    <Confirm ref="confirmPause" @yes="pauseMonitor">
-        Are you sure want to pause?
-    </Confirm>
+            <Confirm ref="confirmPause" @yes="pauseMonitor">
+                Are you sure want to pause?
+            </Confirm>
 
-    <Confirm ref="confirmDelete" btn-style="btn-danger" @yes="deleteMonitor">
-        Are you sure want to delete this monitor?
-    </Confirm>
+            <Confirm ref="confirmDelete" btn-style="btn-danger" @yes="deleteMonitor">
+                Are you sure want to delete this monitor?
+            </Confirm>
+        </div>
+    </transition>
 </template>
 
 <script>
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 0a4f3cb9..749921ea 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -1,150 +1,154 @@
 <template>
-    <h1 class="mb-3">{{ pageName }}</h1>
-    <form @submit.prevent="submit">
-        <div class="shadow-box">
-            <div class="row">
-                <div class="col-md-6">
-                    <h2 class="mb-2">General</h2>
-
-                    <div class="my-3">
-                        <label for="type" class="form-label">Monitor Type</label>
-                        <select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example">
-                            <option value="http">
-                                HTTP(s)
-                            </option>
-                            <option value="port">
-                                TCP Port
-                            </option>
-                            <option value="ping">
-                                Ping
-                            </option>
-                            <option value="keyword">
-                                HTTP(s) - Keyword
-                            </option>
-                        </select>
-                    </div>
-
-                    <div class="my-3">
-                        <label for="name" class="form-label">Friendly Name</label>
-                        <input id="name" v-model="monitor.name" type="text" class="form-control" required>
-                    </div>
-
-                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
-                        <label for="url" class="form-label">URL</label>
-                        <input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required>
-                    </div>
-
-                    <div v-if="monitor.type === 'keyword' " class="my-3">
-                        <label for="keyword" class="form-label">Keyword</label>
-                        <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
-                        <div class="form-text">
-                            Search keyword in plain html or JSON response and it is case-sensitive
-                        </div>
-                    </div>
-
-                    <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="my-3">
-                        <label for="hostname" class="form-label">Hostname</label>
-                        <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
-                    </div>
-
-                    <div v-if="monitor.type === 'port' " class="my-3">
-                        <label for="port" class="form-label">Port</label>
-                        <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
-                    </div>
-
-                    <div class="my-3">
-                        <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
-                        <input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1">
-                    </div>
-
-                    <div class="my-3">
-                        <label for="maxRetries" class="form-label">Retries</label>
-                        <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
-                        <div class="form-text">
-                            Maximum retries before the service is marked as down and a notification is sent
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 class="mb-3">{{ pageName }}</h1>
+            <form @submit.prevent="submit">
+                <div class="shadow-box">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <h2 class="mb-2">General</h2>
+
+                            <div class="my-3">
+                                <label for="type" class="form-label">Monitor Type</label>
+                                <select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example">
+                                    <option value="http">
+                                        HTTP(s)
+                                    </option>
+                                    <option value="port">
+                                        TCP Port
+                                    </option>
+                                    <option value="ping">
+                                        Ping
+                                    </option>
+                                    <option value="keyword">
+                                        HTTP(s) - Keyword
+                                    </option>
+                                </select>
+                            </div>
+
+                            <div class="my-3">
+                                <label for="name" class="form-label">Friendly Name</label>
+                                <input id="name" v-model="monitor.name" type="text" class="form-control" required>
+                            </div>
+
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
+                                <label for="url" class="form-label">URL</label>
+                                <input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required>
+                            </div>
+
+                            <div v-if="monitor.type === 'keyword' " class="my-3">
+                                <label for="keyword" class="form-label">Keyword</label>
+                                <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
+                                <div class="form-text">
+                                    Search keyword in plain html or JSON response and it is case-sensitive
+                                </div>
+                            </div>
+
+                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="my-3">
+                                <label for="hostname" class="form-label">Hostname</label>
+                                <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
+                            </div>
+
+                            <div v-if="monitor.type === 'port' " class="my-3">
+                                <label for="port" class="form-label">Port</label>
+                                <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
+                            </div>
+
+                            <div class="my-3">
+                                <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
+                                <input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1">
+                            </div>
+
+                            <div class="my-3">
+                                <label for="maxRetries" class="form-label">Retries</label>
+                                <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
+                                <div class="form-text">
+                                    Maximum retries before the service is marked as down and a notification is sent
+                                </div>
+                            </div>
+
+                            <h2 class="mt-5 mb-2">Advanced</h2>
+
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
+                                <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
+                                <label class="form-check-label" for="ignore-tls">
+                                    Ignore TLS/SSL error for HTTPS websites
+                                </label>
+                            </div>
+
+                            <div class="my-3 form-check">
+                                <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox">
+                                <label class="form-check-label" for="upside-down">
+                                    Upside Down Mode
+                                </label>
+                                <div class="form-text">
+                                    Flip the status upside down. If the service is reachable, it is DOWN.
+                                </div>
+                            </div>
+
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
+                                <label for="maxRedirects" class="form-label">Max. Redirects</label>
+                                <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
+                                <div class="form-text">
+                                    Maximum number of redirects to follow. Set to 0 to disable redirects.
+                                </div>
+                            </div>
+
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
+                                <label for="acceptedStatusCodes" class="form-label">Accepted Status Codes</label>
+
+                                <VueMultiselect
+                                    id="acceptedStatusCodes"
+                                    v-model="monitor.accepted_statuscodes"
+                                    :options="acceptedStatusCodeOptions"
+                                    :multiple="true"
+                                    :close-on-select="false"
+                                    :clear-on-select="false"
+                                    :preserve-search="true"
+                                    placeholder="Pick Accepted Status Codes..."
+                                    :preselect-first="false"
+                                    :max-height="600"
+                                    :taggable="true"
+                                ></VueMultiselect>
+
+                                <div class="form-text">
+                                    Select status codes which are considered as a successful response.
+                                </div>
+                            </div>
+
+                            <div class="mt-5 mb-1">
+                                <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
+                            </div>
                         </div>
-                    </div>
 
-                    <h2 class="mt-5 mb-2">Advanced</h2>
+                        <div class="col-md-6">
+                            <div v-if="$root.isMobile" class="mt-3" />
 
-                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
-                        <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
-                        <label class="form-check-label" for="ignore-tls">
-                            Ignore TLS/SSL error for HTTPS websites
-                        </label>
-                    </div>
+                            <h2 class="mb-2">Notifications</h2>
+                            <p v-if="$root.notificationList.length === 0">
+                                Not available, please setup.
+                            </p>
 
-                    <div class="my-3 form-check">
-                        <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox">
-                        <label class="form-check-label" for="upside-down">
-                            Upside Down Mode
-                        </label>
-                        <div class="form-text">
-                            Flip the status upside down. If the service is reachable, it is DOWN.
-                        </div>
-                    </div>
+                            <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3">
+                                <input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
 
-                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
-                        <label for="maxRedirects" class="form-label">Max. Redirects</label>
-                        <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
-                        <div class="form-text">
-                            Maximum number of redirects to follow. Set to 0 to disable redirects.
-                        </div>
-                    </div>
+                                <label class="form-check-label" :for=" 'notification' + notification.id">
+                                    {{ notification.name }}
+                                    <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
+                                </label>
+                            </div>
 
-                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
-                        <label for="acceptedStatusCodes" class="form-label">Accepted Status Codes</label>
-
-                        <VueMultiselect
-                            id="acceptedStatusCodes"
-                            v-model="monitor.accepted_statuscodes"
-                            :options="acceptedStatusCodeOptions"
-                            :multiple="true"
-                            :close-on-select="false"
-                            :clear-on-select="false"
-                            :preserve-search="true"
-                            placeholder="Pick Accepted Status Codes..."
-                            :preselect-first="false"
-                            :max-height="600"
-                            :taggable="true"
-                        ></VueMultiselect>
-
-                        <div class="form-text">
-                            Select status codes which are considered as a successful response.
+                            <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
+                                Setup Notification
+                            </button>
                         </div>
                     </div>
-
-                    <div class="mt-5 mb-1">
-                        <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
-                    </div>
                 </div>
+            </form>
 
-                <div class="col-md-6">
-                    <div v-if="$root.isMobile" class="mt-3" />
-
-                    <h2 class="mb-2">Notifications</h2>
-                    <p v-if="$root.notificationList.length === 0">
-                        Not available, please setup.
-                    </p>
-
-                    <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3">
-                        <input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
-
-                        <label class="form-check-label" :for=" 'notification' + notification.id">
-                            {{ notification.name }}
-                            <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
-                        </label>
-                    </div>
-
-                    <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
-                        Setup Notification
-                    </button>
-                </div>
-            </div>
+            <NotificationDialog ref="notificationDialog" />
         </div>
-    </form>
-
-    <NotificationDialog ref="notificationDialog" />
+    </transition>
 </template>
 
 <script>
@@ -181,7 +185,7 @@ export default {
         },
     },
     watch: {
-        "$route.fullPath" () {
+        "$route.fullPath"() {
             this.init();
         },
     },
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 0ffd72d3..63f3076b 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -1,155 +1,159 @@
 <template>
-    <h1 class="mb-3">
-        Settings
-    </h1>
-
-    <div class="shadow-box">
-        <div class="row">
-            <div class="col-md-6">
-                <h2 class="mb-2">General</h2>
-
-                <form class="mb-3" @submit.prevent="saveGeneral">
-                    <div class="mb-3">
-                        <label for="timezone" class="form-label">Theme</label>
-
-                        <div>
-                            <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
-                                <input id="btncheck1" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="light">
-                                <label class="btn btn-outline-primary" for="btncheck1">Light</label>
-
-                                <input id="btncheck2" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark">
-                                <label class="btn btn-outline-primary" for="btncheck2">Dark</label>
-
-                                <input id="btncheck3" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto">
-                                <label class="btn btn-outline-primary" for="btncheck3">Auto</label>
-                            </div>
-                        </div>
-                    </div>
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 v-show="show" class="mb-3">
+                Settings
+            </h1>
+
+            <div class="shadow-box">
+                <div class="row">
+                    <div class="col-md-6">
+                        <h2 class="mb-2">General</h2>
+
+                        <form class="mb-3" @submit.prevent="saveGeneral">
+                            <div class="mb-3">
+                                <label for="timezone" class="form-label">Theme</label>
 
-                    <div class="mb-3">
-                        <label class="form-label">Theme - Heartbeat Bar</label>
-                        <div>
-                            <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
-                                <input id="btncheck4" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="normal">
-                                <label class="btn btn-outline-primary" for="btncheck4">Normal</label>
+                                <div>
+                                    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                                        <input id="btncheck1" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="light">
+                                        <label class="btn btn-outline-primary" for="btncheck1">Light</label>
 
-                                <input id="btncheck5" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="bottom">
-                                <label class="btn btn-outline-primary" for="btncheck5">Bottom</label>
+                                        <input id="btncheck2" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark">
+                                        <label class="btn btn-outline-primary" for="btncheck2">Dark</label>
 
-                                <input id="btncheck6" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="none">
-                                <label class="btn btn-outline-primary" for="btncheck6">None</label>
+                                        <input id="btncheck3" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto">
+                                        <label class="btn btn-outline-primary" for="btncheck3">Auto</label>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="timezone" class="form-label">Timezone</label>
-                        <select id="timezone" v-model="$root.userTimezone" class="form-select">
-                            <option value="auto">
-                                Auto: {{ guessTimezone }}
-                            </option>
-                            <option v-for="(timezone, index) in timezoneList" :key="index" :value="timezone.value">
-                                {{ timezone.name }}
-                            </option>
-                        </select>
-                    </div>
-
-                    <div class="mb-3">
-                        <label class="form-label">Search Engine Visibility</label>
-
-                        <div class="form-check">
-                            <input id="searchEngineIndexYes" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="true" required>
-                            <label class="form-check-label" for="searchEngineIndexYes">
-                                Allow indexing
-                            </label>
-                        </div>
-                        <div class="form-check">
-                            <input id="searchEngineIndexNo" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="false" required>
-                            <label class="form-check-label" for="searchEngineIndexNo">
-                                Discourage search engines from indexing site
-                            </label>
-                        </div>
-                    </div>
 
-                    <div>
-                        <button class="btn btn-primary" type="submit">
-                            Save
-                        </button>
-                    </div>
-                </form>
-
-                <template v-if="loaded">
-                    <template v-if="! settings.disableAuth">
-                        <h2 class="mt-5 mb-2">Change Password</h2>
-                        <form class="mb-3" @submit.prevent="savePassword">
                             <div class="mb-3">
-                                <label for="current-password" class="form-label">Current Password</label>
-                                <input id="current-password" v-model="password.currentPassword" type="password" class="form-control" required>
+                                <label class="form-label">Theme - Heartbeat Bar</label>
+                                <div>
+                                    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                                        <input id="btncheck4" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="normal">
+                                        <label class="btn btn-outline-primary" for="btncheck4">Normal</label>
+
+                                        <input id="btncheck5" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="bottom">
+                                        <label class="btn btn-outline-primary" for="btncheck5">Bottom</label>
+
+                                        <input id="btncheck6" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="none">
+                                        <label class="btn btn-outline-primary" for="btncheck6">None</label>
+                                    </div>
+                                </div>
                             </div>
 
                             <div class="mb-3">
-                                <label for="new-password" class="form-label">New Password</label>
-                                <input id="new-password" v-model="password.newPassword" type="password" class="form-control" required>
+                                <label for="timezone" class="form-label">Timezone</label>
+                                <select id="timezone" v-model="$root.userTimezone" class="form-select">
+                                    <option value="auto">
+                                        Auto: {{ guessTimezone }}
+                                    </option>
+                                    <option v-for="(timezone, index) in timezoneList" :key="index" :value="timezone.value">
+                                        {{ timezone.name }}
+                                    </option>
+                                </select>
                             </div>
 
                             <div class="mb-3">
-                                <label for="repeat-new-password" class="form-label">Repeat New Password</label>
-                                <input id="repeat-new-password" v-model="password.repeatNewPassword" type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" required>
-                                <div class="invalid-feedback">
-                                    The repeat password does not match.
+                                <label class="form-label">Search Engine Visibility</label>
+
+                                <div class="form-check">
+                                    <input id="searchEngineIndexYes" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="true" required>
+                                    <label class="form-check-label" for="searchEngineIndexYes">
+                                        Allow indexing
+                                    </label>
+                                </div>
+                                <div class="form-check">
+                                    <input id="searchEngineIndexNo" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="false" required>
+                                    <label class="form-check-label" for="searchEngineIndexNo">
+                                        Discourage search engines from indexing site
+                                    </label>
                                 </div>
                             </div>
 
                             <div>
                                 <button class="btn btn-primary" type="submit">
-                                    Update Password
+                                    Save
                                 </button>
                             </div>
                         </form>
-                    </template>
 
-                    <h2 class="mt-5 mb-2">Advanced</h2>
+                        <template v-if="loaded">
+                            <template v-if="! settings.disableAuth">
+                                <h2 class="mt-5 mb-2">Change Password</h2>
+                                <form class="mb-3" @submit.prevent="savePassword">
+                                    <div class="mb-3">
+                                        <label for="current-password" class="form-label">Current Password</label>
+                                        <input id="current-password" v-model="password.currentPassword" type="password" class="form-control" required>
+                                    </div>
+
+                                    <div class="mb-3">
+                                        <label for="new-password" class="form-label">New Password</label>
+                                        <input id="new-password" v-model="password.newPassword" type="password" class="form-control" required>
+                                    </div>
+
+                                    <div class="mb-3">
+                                        <label for="repeat-new-password" class="form-label">Repeat New Password</label>
+                                        <input id="repeat-new-password" v-model="password.repeatNewPassword" type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" required>
+                                        <div class="invalid-feedback">
+                                            The repeat password does not match.
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <button class="btn btn-primary" type="submit">
+                                            Update Password
+                                        </button>
+                                    </div>
+                                </form>
+                            </template>
+
+                            <h2 class="mt-5 mb-2">Advanced</h2>
 
-                    <div class="mb-3">
-                        <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">Enable Auth</button>
-                        <button v-if="! settings.disableAuth" class="btn btn-primary me-1" @click="confirmDisableAuth">Disable Auth</button>
-                        <button v-if="! settings.disableAuth" class="btn btn-danger me-1" @click="$root.logout">Logout</button>
+                            <div class="mb-3">
+                                <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">Enable Auth</button>
+                                <button v-if="! settings.disableAuth" class="btn btn-primary me-1" @click="confirmDisableAuth">Disable Auth</button>
+                                <button v-if="! settings.disableAuth" class="btn btn-danger me-1" @click="$root.logout">Logout</button>
+                            </div>
+                        </template>
                     </div>
-                </template>
-            </div>
 
-            <div class="notification-list col-md-6">
-                <div v-if="$root.isMobile" class="mt-3" />
-
-                <h2>Notifications</h2>
-                <p v-if="$root.notificationList.length === 0">
-                    Not available, please setup.
-                </p>
-                <p v-else>
-                    Please assign a notification to monitor(s) to get it to work.
-                </p>
-
-                <ul class="list-group mb-3" style="border-radius: 1rem;">
-                    <li v-for="(notification, index) in $root.notificationList" :key="index" class="list-group-item">
-                        {{ notification.name }}<br>
-                        <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
-                    </li>
-                </ul>
-
-                <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
-                    Setup Notification
-                </button>
+                    <div class="notification-list col-md-6">
+                        <div v-if="$root.isMobile" class="mt-3" />
+
+                        <h2>Notifications</h2>
+                        <p v-if="$root.notificationList.length === 0">
+                            Not available, please setup.
+                        </p>
+                        <p v-else>
+                            Please assign a notification to monitor(s) to get it to work.
+                        </p>
+
+                        <ul class="list-group mb-3" style="border-radius: 1rem;">
+                            <li v-for="(notification, index) in $root.notificationList" :key="index" class="list-group-item">
+                                {{ notification.name }}<br>
+                                <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
+                            </li>
+                        </ul>
+
+                        <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
+                            Setup Notification
+                        </button>
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
 
-    <NotificationDialog ref="notificationDialog" />
+            <NotificationDialog ref="notificationDialog" />
 
-    <Confirm ref="confirmDisableAuth" btn-style="btn-danger" yes-text="I understand, please disable" no-text="Leave" @yes="disableAuth">
-        <p>Are you sure want to <strong>disable auth</strong>?</p>
-        <p>It is for <strong>someone who have 3rd-party auth</strong> in front of  Uptime Kuma such as Cloudflare Access.</p>
-        <p>Please use it carefully.</p>
-    </Confirm>
+            <Confirm ref="confirmDisableAuth" btn-style="btn-danger" yes-text="I understand, please disable" no-text="Leave" @yes="disableAuth">
+                <p>Are you sure want to <strong>disable auth</strong>?</p>
+                <p>It is for <strong>someone who have 3rd-party auth</strong> in front of  Uptime Kuma such as Cloudflare Access.</p>
+                <p>Please use it carefully.</p>
+            </Confirm>
+        </div>
+    </transition>
 </template>
 
 <script>
@@ -174,7 +178,7 @@ export default {
         return {
             timezoneList: timezoneList(),
             guessTimezone: dayjs.tz.guess(),
-
+            show: true,
             invalidPassword: false,
             password: {
                 currentPassword: "",