chore: pretty auth tab in panel settings (#2701)

web/html/xui/settings.html

@@ -185,25 +185,89 @@
                   </a-list-item>
                 </a-list>
               </a-tab-pane>
-              <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding: 20px;">
-                <a-divider>{{ i18n "pages.settings.security.admin"}}</a-divider>
-                <a-form layout="horizontal" :colon="false" style="float: left; margin-bottom: 2rem;" :label-col="{ md: {span:10} }" :wrapper-col="{ md: {span:14} }">
-                  <a-form-item label='{{ i18n "pages.settings.oldUsername"}}'>
-                    <a-input autocomplete="username" v-model="user.oldUsername"></a-input>
-                  </a-form-item>
-                  <a-form-item label='{{ i18n "pages.settings.currentPassword"}}'>
-                    <password-input autocomplete="current-password" v-model="user.oldPassword"></password-input>
-                  </a-form-item>
-                  <a-form-item label='{{ i18n "pages.settings.newUsername"}}'>
-                    <a-input v-model="user.newUsername"></a-input>
-                  </a-form-item>
-                  <a-form-item label='{{ i18n "pages.settings.newPassword"}}'>
-                    <password-input autocomplete="new-password" v-model="user.newPassword"></password-input>
-                  </a-form-item>
-                  <a-form-item label=" ">
-                    <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
-                  </a-form-item>
-                </a-form>
+              <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.settings.security.admin"}}'>
+                    <a-list-item>
+                      <a-row style="padding: 0 20px; padding-bottom: 10px;">
+                        <a-col :lg="24" :xl="12">
+                          <a-list-item-meta title='{{ i18n "pages.settings.oldUsername"}}'></a-list-item-meta>
+                        </a-col>
+                        <a-col :lg="24" :xl="12">
+                          <template>
+                            <a-input autocomplete="username" v-model="user.oldUsername"></a-input>
+                          </template>
+                        </a-col>
+                      </a-row>
+                      <a-row style="padding: 10px 20px">
+                        <a-col :lg="24" :xl="12">
+                          <a-list-item-meta title='{{ i18n "pages.settings.currentPassword"}}'></a-list-item-meta>
+                        </a-col>
+                        <a-col :lg="24" :xl="12">
+                          <template>
+                            <password-input autocomplete="current-password" v-model="user.oldPassword"></password-input>
+                          </template>
+                        </a-col>
+                      </a-row>
+                      <a-row style="padding: 10px 20px">
+                        <a-col :lg="24" :xl="12">
+                          <a-list-item-meta title='{{ i18n "pages.settings.newUsername"}}'></a-list-item-meta>
+                        </a-col>
+                        <a-col :lg="24" :xl="12">
+                          <template>
+                            <a-input v-model="user.newUsername"></a-input>
+                          </template>
+                        </a-col>
+                      </a-row>
+                      <a-row style="padding: 10px 20px">
+                        <a-col :lg="24" :xl="12">
+                          <a-list-item-meta title='{{ i18n "pages.settings.newPassword"}}'></a-list-item-meta>
+                        </a-col>
+                        <a-col :lg="24" :xl="12">
+                          <template>
+                            <password-input autocomplete="new-password" v-model="user.newPassword"></password-input>
+                          </template>
+                        </a-col>
+                      </a-row>
+                      <a-space direction="horizontal" style="padding: 0 20px; padding-top: 20px;">
+                        <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
+                      </a-space>
+                    </a-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.security.secret"}}'>
+                    <a-list-item>
+                      <a-row style="padding: 0 20px; padding-bottom: 10px;">
+                        <a-col :lg="24" :xl="12">
+                          <a-list-item-meta title='{{ i18n "pages.settings.security.loginSecurity" }}'
+                            description='{{ i18n "pages.settings.security.loginSecurityDesc" }}'>
+                          </a-list-item-meta>
+                        </a-col>
+                        <a-col :lg="24" :xl="12">
+                          <template>
+                            <a-switch @change="toggleToken(allSetting.secretEnable)" v-model="allSetting.secretEnable"></a-switch>
+                            <a-icon style="margin-left: 1rem;" v-if="allSetting.secretEnable" :spin="this.changeSecret" type="sync" @click="getNewSecret"></a-icon>
+                          </template>
+                        </a-col>
+                      </a-row>
+                      <a-row style="padding: 10px 20px">
+                        <a-col :lg="24" :xl="12">
+                          <a-list-item-meta title='{{ i18n "pages.settings.security.secretToken" }}'
+                            description='{{ i18n "pages.settings.security.secretTokenDesc" }}'>
+                          </a-list-item-meta>
+                        </a-col>
+                        <a-col :lg="24" :xl="12">
+                          <template>
+                            <a-textarea type="text" :disabled="!allSetting.secretEnable" v-model="user.loginSecret"></a-textarea>
+                          </template>
+                        </a-col>
+                      </a-row>
+                      <a-space direction="horizontal" style="padding: 0 20px; padding-top: 20px;">
+                        <a-button type="primary" :loading="this.changeSecret" @click="updateSecret">{{ i18n "confirm" }}</a-button>
+                      </a-space>
+                    </a-list-item>
+                  </a-collapse-panel>
+                </a-collapse>
+                <!--
                 <a-divider>{{ i18n "pages.settings.security.secret"}}</a-divider>
                 <a-form style="padding: 0 20px;">
                   <a-list-item>
@@ -221,22 +285,9 @@
                       </a-col>
                     </a-row>
                   </a-list-item>
-                  <a-list-item>
-                    <a-row>
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title='{{ i18n "pages.settings.security.secretToken" }}'
-                          description='{{ i18n "pages.settings.security.secretTokenDesc" }}'>
-                        </a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
-                        <template>
-                          <a-textarea type="text" :disabled="!allSetting.secretEnable" v-model="user.loginSecret"></a-textarea>
-                        </template>
-                      </a-col>
-                    </a-row>
-                  </a-list-item>
+                  
                   <a-button type="primary" :loading="this.changeSecret" @click="updateSecret">{{ i18n "confirm" }}</a-button>
-                </a-form>
+                </a-form> -->
               </a-tab-pane>
               <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings"}}'>
                 <a-list item-layout="horizontal">