login.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. {{ template "page/head_start" .}}
  2. {{ template "page/head_end" .}}
  3. {{ template "page/body_start" .}}
  4. <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
  5. <transition name="list" appear>
  6. <a-layout-content class="under min-h-0">
  7. <div class="waves-header">
  8. <div class="waves-inner-header"></div>
  9. <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  10. viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
  11. <defs>
  12. <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
  13. </defs>
  14. <g class="parallax">
  15. <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
  16. <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
  17. <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
  18. <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
  19. </g>
  20. </svg>
  21. </div>
  22. <a-row type="flex" justify="center" align="middle" class="h-100 overflow-y-auto overflow-x-hidden">
  23. <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" class="my-3rem">
  24. <template v-if="!loadingStates.fetched">
  25. <div class="text-center">
  26. <a-spin size="large" />
  27. </div>
  28. </template>
  29. <template v-else>
  30. <div class="setting-section">
  31. <a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}'
  32. placement="bottomRight" trigger="click">
  33. <template slot="content">
  34. <a-space direction="vertical" :size="10">
  35. <a-theme-switch-login></a-theme-switch-login>
  36. <span>{{ i18n "pages.settings.language" }}</span>
  37. <a-select ref="selectLang" class="w-100" v-model="lang" @change="LanguageManager.setLanguage(lang)"
  38. :dropdown-class-name="themeSwitcher.currentTheme">
  39. <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
  40. <span role="img" aria-label="l.name" v-text="l.icon"></span>
  41. &nbsp;&nbsp;<span v-text="l.name"></span>
  42. </a-select-option>
  43. </a-select>
  44. </a-space>
  45. </template>
  46. <a-button shape="circle" icon="setting"></a-button>
  47. </a-popover>
  48. </div>
  49. <a-row type="flex" justify="center">
  50. <a-col :style="{ width: '100%' }">
  51. <h2 class="title headline zoom">
  52. <span class="words-wrapper">
  53. <b class="is-visible">{{ i18n "pages.login.hello" }}</b>
  54. <b>{{ i18n "pages.login.title" }}</b>
  55. </span>
  56. </h2>
  57. </a-col>
  58. </a-row>
  59. <a-row type="flex" justify="center">
  60. <a-col span="24">
  61. <a-form @submit.prevent="login">
  62. <a-space direction="vertical" size="middle">
  63. <a-form-item>
  64. <a-input autocomplete="username" name="username" v-model.trim="user.username"
  65. placeholder='{{ i18n "username" }}' autofocus required>
  66. <a-icon slot="prefix" type="user" class="fs-1rem"></a-icon>
  67. </a-input>
  68. </a-form-item>
  69. <a-form-item>
  70. <a-input-password autocomplete="current-password" name="password" v-model.trim="user.password"
  71. placeholder='{{ i18n "password" }}' required>
  72. <a-icon slot="prefix" type="lock" class="fs-1rem"></a-icon>
  73. </a-input-password>
  74. </a-form-item>
  75. <a-form-item v-if="twoFactorEnable">
  76. <a-input autocomplete="one-time-code" name="twoFactorCode" v-model.trim="user.twoFactorCode"
  77. placeholder='{{ i18n "twoFactorCode" }}' required>
  78. <a-icon slot="prefix" type="key" class="fs-1rem"></a-icon>
  79. </a-input>
  80. </a-form-item>
  81. <a-form-item>
  82. <a-row justify="center" class="centered">
  83. <div class="wave-btn-bg wave-btn-bg-cl h-50px mt-1rem"
  84. :style="loadingStates.spinning ? 'width: 52px' : 'display: inline-block'">
  85. <a-button class="ant-btn-primary-login" type="primary" :loading="loadingStates.spinning"
  86. :icon="loadingStates.spinning ? 'poweroff' : undefined" html-type="submit">
  87. [[ loadingStates.spinning ? '' : '{{ i18n "login" }}' ]]
  88. </a-button>
  89. </div>
  90. </a-row>
  91. </a-form-item>
  92. </a-space>
  93. </a-form>
  94. </a-col>
  95. </a-row>
  96. </template>
  97. </a-col>
  98. </a-row>
  99. </a-layout-content>
  100. </transition>
  101. </a-layout>
  102. {{template "page/body_scripts" .}}
  103. {{template "component/aThemeSwitch" .}}
  104. <script>
  105. const app = new Vue({
  106. delimiters: ['[[', ']]'],
  107. el: '#app',
  108. data: {
  109. themeSwitcher,
  110. loadingStates: { fetched: false, spinning: false },
  111. user: { username: "", password: "", twoFactorCode: "" },
  112. twoFactorEnable: false,
  113. lang: "",
  114. animationStarted: false
  115. },
  116. async mounted() {
  117. this.lang = LanguageManager.getLanguage();
  118. this.twoFactorEnable = await this.getTwoFactorEnable();
  119. },
  120. methods: {
  121. async login() {
  122. this.loadingStates.spinning = true;
  123. const msg = await HttpUtil.post('/login', this.user);
  124. if (msg.success) {
  125. location.href = basePath + 'panel/';
  126. }
  127. this.loadingStates.spinning = false;
  128. },
  129. async getTwoFactorEnable() {
  130. const msg = await HttpUtil.post('/getTwoFactorEnable');
  131. if (msg.success) {
  132. this.twoFactorEnable = msg.obj;
  133. this.loadingStates.fetched = true;
  134. this.$nextTick(() => {
  135. if (!this.animationStarted) {
  136. this.animationStarted = true;
  137. this.initHeadline();
  138. }
  139. });
  140. return msg.obj;
  141. }
  142. },
  143. initHeadline() {
  144. const animationDelay = 2000;
  145. const headlines = this.$el.querySelectorAll('.headline');
  146. headlines.forEach((headline) => {
  147. const first = headline.querySelector('.is-visible');
  148. if (!first) return;
  149. setTimeout(() => this.hideWord(first, animationDelay), animationDelay);
  150. });
  151. },
  152. hideWord(word, delay) {
  153. const nextWord = this.takeNext(word);
  154. this.switchWord(word, nextWord);
  155. setTimeout(() => this.hideWord(nextWord, delay), delay);
  156. },
  157. takeNext(word) {
  158. return word.nextElementSibling || word.parentElement.firstElementChild;
  159. },
  160. switchWord(oldWord, newWord) {
  161. oldWord.classList.remove('is-visible');
  162. oldWord.classList.add('is-hidden');
  163. newWord.classList.remove('is-hidden');
  164. newWord.classList.add('is-visible');
  165. }
  166. },
  167. });
  168. const pm_input_selector = 'input.ant-input, textarea.ant-input';
  169. const pm_strip_props = [
  170. 'background',
  171. 'background-color',
  172. 'background-image',
  173. 'color'
  174. ];
  175. const pm_observed_forms = new WeakSet();
  176. function pm_strip_inline(el) {
  177. if (!el || el.nodeType !== 1 || !el.matches?.(pm_input_selector)) return;
  178. let did_change = false;
  179. for (const prop of pm_strip_props) {
  180. if (el.style.getPropertyValue(prop)) {
  181. el.style.removeProperty(prop);
  182. did_change = true;
  183. }
  184. }
  185. if (did_change && el.style.length === 0) {
  186. el.removeAttribute('style');
  187. }
  188. }
  189. function pm_attach_observer(form) {
  190. if (pm_observed_forms.has(form)) return;
  191. pm_observed_forms.add(form);
  192. form.querySelectorAll(pm_input_selector).forEach(pm_strip_inline);
  193. const pm_mo = new MutationObserver(mutations => {
  194. for (const m of mutations) {
  195. if (m.type === 'attributes') {
  196. pm_strip_inline(m.target);
  197. } else if (m.type === 'childList') {
  198. for (const n of m.addedNodes) {
  199. if (n.nodeType !== 1) continue;
  200. if (n.matches?.(pm_input_selector)) pm_strip_inline(n);
  201. n.querySelectorAll?.(pm_input_selector).forEach(pm_strip_inline);
  202. }
  203. }
  204. }
  205. });
  206. pm_mo.observe(form, {
  207. attributes: true,
  208. attributeFilter: ['style'],
  209. childList: true,
  210. subtree: true
  211. });
  212. }
  213. function pm_init() {
  214. document.querySelectorAll('form.ant-form').forEach(pm_attach_observer);
  215. const pm_host = document.getElementById('login') || document.body;
  216. const pm_wait_for_forms = new MutationObserver(mutations => {
  217. for (const m of mutations) {
  218. for (const n of m.addedNodes) {
  219. if (n.nodeType !== 1) continue;
  220. if (n.matches?.('form.ant-form')) pm_attach_observer(n);
  221. n.querySelectorAll?.('form.ant-form').forEach(pm_attach_observer);
  222. }
  223. }
  224. });
  225. pm_wait_for_forms.observe(pm_host, { childList: true, subtree: true });
  226. }
  227. if (document.readyState === 'loading') {
  228. document.addEventListener('DOMContentLoaded', pm_init, { once: true });
  229. } else {
  230. pm_init();
  231. }
  232. </script>
  233. {{ template "page/body_end" .}}