@ -2,53 +2,63 @@
< transition name = "slide-fade" appear >
< transition name = "slide-fade" appear >
< div >
< div >
< h1 v-show ="show" class="mb-3" >
< h1 v-show ="show" class="mb-3" >
{ { $t( " Settings") } }
< / h1 >
< / h1 >
< div class = "shadow-box" >
< div class = "shadow-box" >
< div class = "row" >
< div class = "row" >
< div class = "col-md-6" >
< div class = "col-md-6" >
< h2 class = "mb-2" > General < / h2 >
< h2 class = "mb-2" > { { $t ( "Appearance" ) } } < / h2 >
< div class = "mb-3" >
< label for = "language" class = "form-label" > { { $t ( "Language" ) } } < / label >
< select id = "language" v-model ="$i18n.locale" class="form-select" >
< option v-for ="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value ="lang" >
{ { $i18n . messages [ lang ] . languageName } }
< / option >
< / select >
< / div >
< form class = "mb-3" @submit.prevent ="saveGeneral" >
< div class = "mb-3" >
< div class = "mb-3" >
< label for = "timezone" class = "form-label" > Theme < / label >
< label for = "timezone" class = "form-label" > { { $t( " Theme") } } < / label >
< div >
< div >
< div class = "btn-group" role = "group" aria -label = " Basic checkbox toggle button group " >
< 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" >
< 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 >
< label class = "btn btn-outline-primary" for = "btncheck1" > { { $t( " Light") } } < / label >
< input id = "btncheck2" v-model ="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark" >
< 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" > < / label >
< label class = "btn btn-outline-primary" for = "btncheck2" > { { $t( " Dark") } } < / label >
< input id = "btncheck3" v-model ="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto" >
< 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" > < / label >
< label class = "btn btn-outline-primary" for = "btncheck3" > { { $t( " Auto") } } < / label >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "mb-3" >
< div class = "mb-3" >
< label class = "form-label" > < / label >
< label class = "form-label" > { { $t( " Theme - Heartbeat Bar") } } < / label >
< div >
< div >
< div class = "btn-group" role = "group" aria -label = " Basic checkbox toggle button group " >
< 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" >
< 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" > < / label >
< label class = "btn btn-outline-primary" for = "btncheck4" > { { $t( " Normal") } } < / label >
< input id = "btncheck5" v-model ="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="bottom" >
< 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" > < / label >
< label class = "btn btn-outline-primary" for = "btncheck5" > { { $t( " Bottom") } } < / label >
< input id = "btncheck6" v-model ="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="none" >
< 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" > < / label >
< label class = "btn btn-outline-primary" for = "btncheck6" > { { $t( " None") } } < / label >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< h2 class = "mt-5 mb-2" > { { $t ( "General" ) } } < / h2 >
< form class = "mb-3" @submit.prevent ="saveGeneral" >
< div class = "mb-3" >
< div class = "mb-3" >
< label for = "timezone" class = "form-label" > Timezone < / label >
< label for = "timezone" class = "form-label" > { { $t( " Timezone") } } < / label >
< select id = "timezone" v-model ="$root.userTimezone" class="form-select" >
< select id = "timezone" v-model ="$root.userTimezone" class="form-select" >
< option value = "auto" >
< option value = "auto" >
: { { guessTimezone } }
{ { $t( " Auto") } } : { { guessTimezone } }
< / option >
< / option >
< option v-for ="(timezone, index) in timezoneList" :key="index" :value="timezone.value" >
< option v-for ="(timezone, index) in timezoneList" :key="index" :value="timezone.value" >
{ { timezone . name } }
{ { timezone . name } }
@ -57,65 +67,65 @@
< / div >
< / div >
< div class = "mb-3" >
< div class = "mb-3" >
< label class = "form-label" > < / label >
< label class = "form-label" > { { $t( " Search Engine Visibility") } } < / label >
< div class = "form-check" >
< div class = "form-check" >
< input id = "searchEngineIndexYes" v -model = " settings.searchEngineIndex " class = "form-check-input" type = "radio" name = "flexRadioDefault" :value ="true" required >
< 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" >
< label class = "form-check-label" for = "searchEngineIndexYes" >
{ { $t( " Allow indexing") } }
< / label >
< / label >
< / div >
< / div >
< div class = "form-check" >
< div class = "form-check" >
< input id = "searchEngineIndexNo" v -model = " settings.searchEngineIndex " class = "form-check-input" type = "radio" name = "flexRadioDefault" :value ="false" required >
< 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" >
< label class = "form-check-label" for = "searchEngineIndexNo" >
{ { $t( " Discourage search engines from indexing site") } }
< / label >
< / label >
< / div >
< / div >
< / div >
< / div >
< div >
< div >
< button class = "btn btn-primary" type = "submit" >
< button class = "btn btn-primary" type = "submit" >
{ { $t( " Save") } }
< / button >
< / button >
< / div >
< / div >
< / form >
< / form >
< template v-if ="loaded" >
< template v-if ="loaded" >
< template v-if ="! settings.disableAuth" >
< template v-if ="! settings.disableAuth" >
< h2 class = "mt-5 mb-2" > < / h2 >
< h2 class = "mt-5 mb-2" > { { $t( " Change Password") } } < / h2 >
< form class = "mb-3" @submit.prevent ="savePassword" >
< form class = "mb-3" @submit.prevent ="savePassword" >
< div class = "mb-3" >
< div class = "mb-3" >
< label for = "current-password" class = "form-label" > < / label >
< label for = "current-password" class = "form-label" > { { $t( " Current Password") } } < / label >
< input id = "current-password" v -model = " password.currentPassword " type = "password" class = "form-control" required >
< input id = "current-password" v -model = " password.currentPassword " type = "password" class = "form-control" required >
< / div >
< / div >
< div class = "mb-3" >
< div class = "mb-3" >
< label for = "new-password" class = "form-label" > < / label >
< label for = "new-password" class = "form-label" > { { $t( " New Password") } } < / label >
< input id = "new-password" v -model = " password.newPassword " type = "password" class = "form-control" required >
< input id = "new-password" v -model = " password.newPassword " type = "password" class = "form-control" required >
< / div >
< / div >
< div class = "mb-3" >
< div class = "mb-3" >
< label for = "repeat-new-password" class = "form-label" > < / label >
< label for = "repeat-new-password" class = "form-label" > { { $t( " Repeat New Password") } } < / label >
< input id = "repeat-new-password" v -model = " password.repeatNewPassword " type = "password" class = "form-control" : class = "{ 'is-invalid' : invalidPassword }" required >
< input id = "repeat-new-password" v -model = " password.repeatNewPassword " type = "password" class = "form-control" : class = "{ 'is-invalid' : invalidPassword }" required >
< div class = "invalid-feedback" >
< div class = "invalid-feedback" >
The repeat password does not match .
{ { $t ( "passwordNotMatchMsg" ) } }
< / div >
< / div >
< / div >
< / div >
< div >
< div >
< button class = "btn btn-primary" type = "submit" >
< button class = "btn btn-primary" type = "submit" >
{ { $t( " Update Password") } }
< / button >
< / button >
< / div >
< / div >
< / form >
< / form >
< / template >
< / template >
< h2 class = "mt-5 mb-2" > < / h2 >
< h2 class = "mt-5 mb-2" > { { $t( " Advanced") } } < / h2 >
< div class = "mb-3" >
< 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-outline-primary me-1" @click="enableAuth" > {{ $ t ( " 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-primary me-1" @click="confirmDisableAuth" > {{ $ t ( " Disable Auth " ) }} < / button >
< button v-if ="! settings.disableAuth" class="btn btn-danger me-1" @click="$root.logout" > Logout < / button >
< button v-if ="! settings.disableAuth" class="btn btn-danger me-1" @click="$root.logout" > {{ $ t ( " Logout " ) }} < / button >
< / div >
< / div >
< / template >
< / template >
< / div >
< / div >
@ -123,23 +133,23 @@
< div class = "notification-list col-md-6" >
< div class = "notification-list col-md-6" >
< div v -if = " $ root.isMobile " class = "mt-3" / >
< div v -if = " $ root.isMobile " class = "mt-3" / >
< h2 > < / h2 >
< h2 > { { $t( " Notifications") } } < / h2 >
< p v-if ="$root.notificationList.length === 0" >
< p v-if ="$root.notificationList.length === 0" >
Not available , please setup .
{ { $t ( "Not available, please setup." ) } }
< / p >
< / p >
< p v-else >
< p v-else >
Please assign a notification to monitor ( s ) to get it to work .
{ { $t ( "notificationDescription" ) } }
< / p >
< / p >
< ul class = "list-group mb-3" style = "border-radius: 1rem;" >
< ul class = "list-group mb-3" style = "border-radius: 1rem;" >
< li v-for ="(notification, index) in $root.notificationList" :key="index" class="list-group-item" >
< li v-for ="(notification, index) in $root.notificationList" :key="index" class="list-group-item" >
{ { notification . name } } < br >
{ { notification . name } } < br >
< a href = "#" @click ="$refs.notificationDialog.show(notification.id)" > Edit < / a >
< a href = "#" @click ="$refs.notificationDialog.show(notification.id)" > {{ $ t ( " Edit " ) }} < / a >
< / li >
< / li >
< / ul >
< / ul >
< button class = "btn btn-primary me-2" type = "button" @click ="$refs.notificationDialog.show()" >
< button class = "btn btn-primary me-2" type = "button" @click ="$refs.notificationDialog.show()" >
{ { $t( " Setup Notification") } }
< / button >
< / button >
< / div >
< / div >
< / div >
< / div >
@ -147,10 +157,18 @@
< NotificationDialog ref = "notificationDialog" / >
< NotificationDialog ref = "notificationDialog" / >
< Confirm ref = "confirmDisableAuth" btn -style = " btn -danger " yes -text = " I understand , please disable " no -text = " Leave " @yes ="disableAuth" >
< Confirm ref = "confirmDisableAuth" btn -style = " btn -danger " : yes -text = " $ t ( ' I understand , please disable ' ) " :no-text ="$t('Leave')" @yes ="disableAuth" >
< template v-if ="$i18n.locale === 'en' " >
< p > Are you sure want to < strong > disable auth < / strong > ? < / p >
< p > Are you sure want to < strong > disable auth < / strong > ? < / p >
< p > It is for < strong > someone who have 3 rd - party auth < / strong > in front of Uptime Kuma such as Cloudflare Access . < / p >
< p > It is for < strong > someone who have 3 rd - party auth < / strong > in front of Uptime Kuma such as Cloudflare Access . < / p >
< p > Please use it carefully . < / p >
< p > Please use it carefully . < / p >
< / template >
< template v-if ="$i18n.locale === 'zh-HK' " >
< p > 你是否確認 < strong > 取消登入認証 < / strong > ？ < / p >
< p > 這個功能是設計給已有 < strong > 第三方認証 < / strong > 的用家 ， 例如 Cloudflare Access 。 < / p >
< p > 請小心使用 。 < / p >
< / template >
< / Confirm >
< / Confirm >
< / div >
< / div >
< / transition >
< / transition >
@ -195,6 +213,10 @@ export default {
"password.repeatNewPassword" ( ) {
"password.repeatNewPassword" ( ) {
this . invalidPassword = false ;
this . invalidPassword = false ;
} ,
} ,
"$i18n.locale" ( ) {
localStorage . locale = this . $i18n . locale ;
} ,
} ,
} ,
mounted ( ) {
mounted ( ) {
LouisLam
3 years ago