chore: simplify login page (#2851)

* chore: change login page

* chore: minor improvements on login page

* chore: add login button padding

* fix: delete unnecessary attributes

* fix: Restore headline animation with DOMContentLoaded

web/html/login.html

@@ -6,27 +6,33 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
   h1 {
     text-align: center;
-/*    margin: 20px 0 50px 0;*/
+    /*    margin: 20px 0 50px 0;*/
     height: 110px;
   }
+
   .ant-btn,
   .ant-input {
     height: 50px;
     border-radius: 30px;
   }
+
   .ant-input-group-addon {
     border-radius: 0 30px 30px 0;
     width: 50px;
     font-size: 18px;
   }
+
   .ant-input-affix-wrapper .ant-input-prefix {
     left: 23px;
   }
+
   .ant-input-affix-wrapper .ant-input:not(:first-child) {
     padding-left: 50px;
   }
+
   .centered {
     display: flex;
     text-align: center;
@@ -34,68 +40,76 @@
     justify-content: center;
     width: 100%;
   }
+
   .title {
     font-size: 32px;
   }
+
   .title b {
     font-weight: bold !important;
   }
+
   #app {
     overflow: hidden;
   }
+
   #login {
     animation: charge 0.5s both;
     background-color: #fff;
     border-radius: 2rem;
     padding: 3rem;
     transition: all 0.3s;
-    user-select:none;
+    user-select: none;
-    -webkit-user-select:none;
+    -webkit-user-select: none;
     -moz-user-select: none;
   }
+
   #login:hover {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
   }
+
   @keyframes charge {
     from {
       transform: translateY(5rem);
       opacity: 0;
     }
+
     to {
       transform: translateY(0);
       opacity: 1;
     }
   }
+
   .under {
     background-color: #c7ebe2;
     z-index: 0;
   }
+
   .dark .under {
     background-color: var(--dark-color-login-wave);
   }
+
   .dark #login {
     background-color: var(--dark-color-surface-100);
   }
+
   .dark h1 {
     color: rgba(255, 255, 255);
   }
-  .ant-form-item {
+
-    margin-bottom: 16px;
-  }
   .ant-btn-primary-login {
     width: 100%;
   }
+
   .ant-btn-primary-login:focus,
   .ant-btn-primary-login:hover {
     color: #fff;
     background-color: #006655;
     border-color: #006655;
-    background-image: linear-gradient(
+    background-image: linear-gradient(270deg,
-      270deg,
         rgba(123, 199, 77, 0) 30%,
         #009980,
-      rgba(123, 199, 77, 0) 100%
+        rgba(123, 199, 77, 0) 100%);
-    );
     background-repeat: no-repeat;
     animation: ma-bg-move ease-in-out 5s infinite;
     background-position-x: -500px;
@@ -103,29 +117,35 @@
     animation-delay: -0.5s;
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
   }
+
   .ant-btn-primary-login.active,
   .ant-btn-primary-login:active {
     color: #fff;
     background-color: #006655;
     border-color: #006655;
   }
+
   @keyframes ma-bg-move {
     0% {
       background-position: -500px 0;
     }
+
     50% {
       background-position: 1000px 0;
     }
+
     100% {
       background-position: 1000px 0;
     }
   }
+
   .wave-btn-bg {
     position: relative;
     border-radius: 25px;
     width: 100%;
-    transition: all 0.3s cubic-bezier(.645,.045,.355,1);
+    transition: all 0.3s cubic-bezier(.645, .045, .355, 1);
   }
+
   .dark .wave-btn-bg {
     color: #fff;
     position: relative;
@@ -137,15 +157,21 @@
     width: 100%;
     z-index: 1;
   }
-  .dark .wave-btn-bg:hover {animation: wave-btn-tara 4s ease infinite;}
+
+  .dark .wave-btn-bg:hover {
+    animation: wave-btn-tara 4s ease infinite;
+  }
+
   .dark .wave-btn-bg-cl {
     background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
       radial-gradient(circle at left top, #006655, #009980, #006655) !important;
     border-radius: 3em;
   }
+
   .dark .wave-btn-bg-cl:hover {
     width: 95%;
   }
+
   .dark .wave-btn-bg-cl:before {
     position: absolute;
     content: "";
@@ -160,24 +186,25 @@
     opacity: 0;
     transition: 0.5s;
   }
+
   .dark .wave-btn-bg-cl:hover::before {
     opacity: 1;
     filter: blur(20px);
     animation: wave-btn-tara 8s linear infinite;
   }
+
   @keyframes wave-btn-tara {
     to {
       background-position: 300%;
     }
   }
+
   .dark .ant-btn-primary-login {
     font-size: 14px;
     color: #fff;
     text-align: center;
-    background-image: linear-gradient(
+    background-image: linear-gradient(rgba(13, 14, 33, 0.45),
-      rgba(13, 14, 33, 0.45),
+        rgba(13, 14, 33, 0.35));
-      rgba(13, 14, 33, 0.35)
-    );
     border-radius: 2rem;
     border: none;
     outline: none;
@@ -193,6 +220,7 @@
     background-position-x: 0;
     box-shadow: none;
   }
+
   .waves-header {
     position: fixed;
     width: 100%;
@@ -201,68 +229,83 @@
     color: white;
     z-index: -1;
   }
+
   .dark .waves-header {
     background-color: var(--dark-color-login-background);
   }
+
   .waves-inner-header {
     height: 50vh;
     width: 100%;
     margin: 0;
     padding: 0;
   }
+
   .waves {
     position: relative;
     width: 100%;
     height: 15vh;
-    margin-bottom: -8px; /*Fix for safari gap*/
+    margin-bottom: -8px;
+    /*Fix for safari gap*/
     min-height: 100px;
     max-height: 150px;
   }
-  .parallax > use {
+
+  .parallax>use {
     animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
   }
-  .dark .parallax > use {
+
+  .dark .parallax>use {
     fill: var(--dark-color-login-wave);
   }
-  .parallax > use:nth-child(1) {
+
+  .parallax>use:nth-child(1) {
     animation-delay: -2s;
     animation-duration: 4s;
     opacity: 0.2;
   }
-  .parallax > use:nth-child(2) {
+
+  .parallax>use:nth-child(2) {
     animation-delay: -3s;
     animation-duration: 7s;
     opacity: 0.4;
   }
-  .parallax > use:nth-child(3) {
+
+  .parallax>use:nth-child(3) {
     animation-delay: -4s;
     animation-duration: 10s;
     opacity: 0.6;
   }
-  .parallax > use:nth-child(4) {
+
+  .parallax>use:nth-child(4) {
     animation-delay: -5s;
     animation-duration: 13s;
   }
+
   @keyframes move-forever {
     0% {
       transform: translate3d(-90px, 0, 0);
     }
+
     100% {
       transform: translate3d(85px, 0, 0);
     }
   }
+
   @media (max-width: 768px) {
     .waves {
       height: 40px;
       min-height: 40px;
     }
   }
+
   .words-wrapper {
     width: 100%;
     display: inline-block;
     position: relative;
     text-align: center;
   }
+
   .words-wrapper b {
     width: 100%;
     display: inline-block;
@@ -270,33 +313,40 @@
     left: 0;
     top: 0;
   }
+
   .words-wrapper b.is-visible {
     position: relative;
   }
+
   .headline.zoom .words-wrapper {
     -webkit-perspective: 300px;
     -moz-perspective: 300px;
     perspective: 300px;
   }
+
   .headline {
     display: flex;
     justify-content: center;
     align-items: center;
   }
+
   .headline.zoom b {
     opacity: 0;
   }
+
   .headline.zoom b.is-visible {
     opacity: 1;
     -webkit-animation: zoom-in 0.8s;
     -moz-animation: zoom-in 0.8s;
     animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
   }
+
   .headline.zoom b.is-hidden {
     -webkit-animation: zoom-out 0.8s;
     -moz-animation: zoom-out 0.8s;
     animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
   }
+
   @-webkit-keyframes zoom-in {
     0% {
       opacity: 0;
@@ -308,16 +358,19 @@
       -webkit-transform: translateZ(0);
     }
   }
+
   @-moz-keyframes zoom-in {
     0% {
       opacity: 0;
       -moz-transform: translateZ(100px);
     }
+
     100% {
       opacity: 1;
       -moz-transform: translateZ(0);
     }
   }
+
   @keyframes zoom-in {
     0% {
       opacity: 0;
@@ -327,6 +380,7 @@
       -o-transform: translateZ(100px);
       transform: translateZ(100px);
     }
+
     100% {
       opacity: 1;
       -webkit-transform: translateZ(0);
@@ -336,26 +390,31 @@
       transform: translateZ(0);
     }
   }
+
   @-webkit-keyframes zoom-out {
     0% {
       opacity: 1;
       -webkit-transform: translateZ(0);
     }
+
     100% {
       opacity: 0;
       -webkit-transform: translateZ(-100px);
     }
   }
+
   @-moz-keyframes zoom-out {
     0% {
       opacity: 1;
       -moz-transform: translateZ(0);
     }
+
     100% {
       opacity: 0;
       -moz-transform: translateZ(-100px);
     }
   }
+
   @keyframes zoom-out {
     0% {
       opacity: 1;
@@ -365,6 +424,7 @@
       -o-transform: translateZ(0);
       transform: translateZ(0);
     }
+
     100% {
       opacity: 0;
       -webkit-transform: translateZ(-100px);
@@ -374,13 +434,20 @@
       transform: translateZ(-100px);
     }
   }
-  .ant-menu-item .anticon {
+
-    margin-right: 4px;
+  .setting-section {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 24px;
   }
-  .ant-menu-inline .ant-menu-item {
+
-    padding: 0 16px !important;
+  .setting-section > .ant-btn {
+    width: 36px;
+    height: 36px;
   }
 </style>
+
 <body>
   <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
     <transition name="list" appear>
@@ -400,70 +467,67 @@
             </g>
           </svg>
         </div>
+        <div class="setting-section">
+          <a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}' placement="bottomRight" trigger="click">
+            <template slot="content">
+              <a-space direction="vertical" :size="10">
+                <a-theme-switch-login></a-theme-switch-login>
+                <span>{{ i18n "pages.settings.language" }}</span>
+                <a-select ref="selectLang" :style="{ width: '100%' }" v-model="lang" @change="LanguageManager.setLanguage(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
+                  <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
+                    <span role="img" aria-label="l.name" v-text="l.icon"></span>
+                    &nbsp;&nbsp;<span v-text="l.name"></span>
+                  </a-select-option>
+                </a-select>
+              </a-space>
+            </template>
+            <a-button shape="circle" icon="setting"></a-button>
+          </a-popover>
+        </div>
         <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto; overflow-x: hidden;">
           <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
             <a-row type="flex" justify="center">
               <a-col style="width: 100%;">
-                <h1 class="title headline zoom">
+                <h2 class="title headline zoom">
                   <span class="words-wrapper">
                     <b class="is-visible">{{ i18n "pages.login.hello" }}</b>
                     <b>{{ i18n "pages.login.title" }}</b>
                   </span>
-                </h1>
+                </h2>
               </a-col>
             </a-row>
             <a-row type="flex" justify="center">
               <a-col span="24">
                 <a-form>
+                  <a-space direction="vertical" size="middle">
                     <a-form-item>
-                    <a-input autocomplete="username" name="username" v-model.trim="user.username" placeholder='{{ i18n "username" }}'
+                      <a-input autocomplete="username" name="username" v-model.trim="user.username"
-                             @keydown.enter.native="login" autofocus>
+                        placeholder='{{ i18n "username" }}' @keydown.enter.native="login" autofocus>
                         <a-icon slot="prefix" type="user" style="font-size: 16px;"></a-icon>
                       </a-input>
                     </a-form-item>
                     <a-form-item>
                       <a-password-input autocomplete="password" name="password" icon="lock" v-model.trim="user.password"
-                                    placeholder='{{ i18n "password" }}'
+                        placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                                    @keydown.enter.native="login">
                       </a-password-input>
                     </a-form-item>
                     <a-form-item v-if="secretEnable">
                       <a-password-input autocomplete="secret" name="secret" icon="key" v-model.trim="user.loginSecret"
-                                    placeholder='{{ i18n "secretToken" }}'
+                        placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
-                                    @keydown.enter.native="login">
                       </a-password-input>
                     </a-form-item>
                     <a-form-item>
                       <a-row justify="center" class="centered">
-                      <div style="height: 50px;" class="wave-btn-bg wave-btn-bg-cl"
+                        <div :style="{ height: '50px', marginTop: '16px' }" class="wave-btn-bg wave-btn-bg-cl"
                           :style="loading ? { width: '52px' } : { display: 'inline-block' }">
-                        <a-button class="ant-btn-primary-login" type="primary"
+                          <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login"
-                                  :loading="loading" @click="login"
                             :icon="loading ? 'poweroff' : undefined">
                             [[ loading ? '' : '{{ i18n "login" }}' ]]
                           </a-button>
                         </div>
                       </a-row>
                     </a-form-item>
-                  <a-form-item>
+                  </a-space>
-                    <a-row justify="center" class="centered">
-                      <a-col :span="24">
-                        <a-select ref="selectLang" v-model="lang"
-                                  @change="LanguageManager.setLanguage(lang)" style="width: 200px;"
-                                  :dropdown-class-name="themeSwitcher.currentTheme">
-                          <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
-                            <span role="img" aria-label="l.name" v-text="l.icon"></span>
-                            &nbsp;&nbsp;<span v-text="l.name"></span>
-                          </a-select-option>
-                        </a-select>
-                      </a-col>
-                    </a-row>
-                  </a-form-item>
-                  <a-form-item>
-                    <a-row justify="center" class="centered">
-                      <a-theme-switch-login></a-theme-switch-login>
-                    </a-row>
-                  </a-form-item>
                 </a-form>
               </a-col>
             </a-row>
@@ -472,27 +536,25 @@
       </a-layout-content>
     </transition>
   </a-layout>
-{{template "js" .}}
+  {{template "js" .}}
-{{template "component/aThemeSwitch" .}}
+  {{template "component/aThemeSwitch" .}}
-{{template "component/aPasswordInput" .}}
+  {{template "component/aPasswordInput" .}}
-<script>
+  <script>
-  class User {
-    constructor() {
-      this.username = "";
-      this.password = "";
-    }
-  }
     const app = new Vue({
       delimiters: ['[[', ']]'],
       el: '#app',
       data: {
         themeSwitcher,
         loading: false,
-      user: new User(),
+        user: {
+          username: "",
+          password: "",
+          loginSecret: ""
+        },
         secretEnable: false,
         lang: ""
       },
-    async created() {
+      async mounted() {
         this.lang = LanguageManager.getLanguage();
         this.secretEnable = await this.getSecretStatus();
       },
@@ -516,7 +578,8 @@
         },
       },
     });
-  document.addEventListener("DOMContentLoaded", function() {
+
+    document.addEventListener("DOMContentLoaded", function () {
       var animationDelay = 2000;
       initHeadline();
 
@@ -526,8 +589,8 @@
 
       function animateHeadline(headlines) {
         var duration = animationDelay;
-      headlines.forEach(function(headline) {
+        headlines.forEach(function (headline) {
-        setTimeout(function() {
+          setTimeout(function () {
             hideWord(headline.querySelector('.is-visible'));
           }, duration);
         });
@@ -536,13 +599,13 @@
       function hideWord(word) {
         var nextWord = takeNext(word);
         switchWord(word, nextWord);
-      setTimeout(function() {
+        setTimeout(function () {
           hideWord(nextWord);
         }, animationDelay);
       }
 
       function takeNext(word) {
-      return (word.nextElementSibling) ? word.nextElementSibling : word.parentElement.firstElementChild;
+        return word.nextElementSibling ? word.nextElementSibling : word.parentElement.firstElementChild;
       }
 
       function switchWord(oldWord, newWord) {
@@ -552,6 +615,6 @@
         newWord.classList.add('is-visible');
       }
     });
-</script>
+  </script>
 </body>
 </html>

web/html/xui/component/aThemeSwitch.html

@@ -8,11 +8,14 @@
       </span>
       <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()">
         <span>{{ i18n "menu.dark" }}</span>
-        <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
+        <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme"
+          @change="themeSwitcher.toggleTheme()"></a-switch>
       </a-menu-item>
-      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOffUltra()"> 
+      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
+        @mousedown="themeSwitcher.animationsOffUltra()">
         <span>{{ i18n "menu.ultraDark" }}</span>
-        <a-checkbox style="margin-left: 2px;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
+        <a-checkbox style="margin-left: 2px;" :checked="themeSwitcher.isUltra"
+          @click="themeSwitcher.toggleUltra()"></a-checkbox>
       </a-menu-item>
     </a-sub-menu>
   </a-menu>
@@ -21,18 +24,16 @@
 
 {{define "component/themeSwitchTemplateLogin"}}
 <template>
-  <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
+  <a-space direction="vertical" :size="10" :style="{ width: '100%' }">
-    selected-keys="">
+    <a-space direction="horizontal" size="small">
-    <a-menu-item mode="inline" class="ant-menu-theme-switch">
+      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
-      <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
+      <span>{{ i18n "menu.dark" }}</span>
-      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
+    </a-space>
-        @change="themeSwitcher.toggleTheme()"></a-switch>
+    <a-space v-if="themeSwitcher.isDarkTheme" direction="horizontal" size="small">
-      <template v-if="themeSwitcher.isDarkTheme">
+      <a-checkbox :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
-        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
+      <span>{{ i18n "menu.ultraDark" }}</span>
-          @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
+    </a-space>
-      </template>
+  </a-space>
-    </a-menu-item>
-  </a-menu>
 </template>
 {{end}}