login.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. {{template "head" .}}
  4. <style>
  5. html * {
  6. -webkit-font-smoothing: antialiased;
  7. -moz-osx-font-smoothing: grayscale;
  8. }
  9. h1 {
  10. text-align: center;
  11. /*margin: 20px 0 50px 0;*/
  12. height: 110px;
  13. }
  14. .ant-form-item-children .ant-btn,
  15. .ant-input {
  16. height: 50px;
  17. border-radius: 30px;
  18. }
  19. .ant-input-group-addon {
  20. border-radius: 0 30px 30px 0;
  21. width: 50px;
  22. font-size: 18px;
  23. }
  24. .ant-input-affix-wrapper .ant-input-prefix {
  25. left: 23px;
  26. }
  27. .ant-input-affix-wrapper .ant-input:not(:first-child) {
  28. padding-left: 50px;
  29. }
  30. .centered {
  31. display: flex;
  32. text-align: center;
  33. align-items: center;
  34. justify-content: center;
  35. width: 100%;
  36. }
  37. .title {
  38. font-size: 2rem;
  39. margin-block-end: 2rem;
  40. }
  41. .title b {
  42. font-weight: bold !important;
  43. }
  44. #app {
  45. overflow: hidden;
  46. }
  47. #login {
  48. animation: charge 0.5s both;
  49. background-color: #fff;
  50. border-radius: 2rem;
  51. padding: 4rem 3rem;
  52. transition: all 0.3s;
  53. user-select: none;
  54. -webkit-user-select: none;
  55. -moz-user-select: none;
  56. }
  57. #login:hover {
  58. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  59. }
  60. @keyframes charge {
  61. from {
  62. transform: translateY(5rem);
  63. opacity: 0;
  64. }
  65. to {
  66. transform: translateY(0);
  67. opacity: 1;
  68. }
  69. }
  70. .under {
  71. background-color: #c7ebe2;
  72. z-index: 0;
  73. }
  74. .dark .under {
  75. background-color: var(--dark-color-login-wave);
  76. }
  77. .dark #login {
  78. background-color: var(--dark-color-surface-100);
  79. }
  80. .dark h1 {
  81. color: rgba(255, 255, 255);
  82. }
  83. .ant-btn-primary-login {
  84. width: 100%;
  85. }
  86. .ant-btn-primary-login:focus,
  87. .ant-btn-primary-login:hover {
  88. color: #fff;
  89. background-color: #006655;
  90. border-color: #006655;
  91. background-image: linear-gradient(270deg,
  92. rgba(123, 199, 77, 0) 30%,
  93. #009980,
  94. rgba(123, 199, 77, 0) 100%);
  95. background-repeat: no-repeat;
  96. animation: ma-bg-move ease-in-out 5s infinite;
  97. background-position-x: -500px;
  98. width: 95%;
  99. animation-delay: -0.5s;
  100. box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  101. }
  102. .ant-btn-primary-login.active,
  103. .ant-btn-primary-login:active {
  104. color: #fff;
  105. background-color: #006655;
  106. border-color: #006655;
  107. }
  108. @keyframes ma-bg-move {
  109. 0% {
  110. background-position: -500px 0;
  111. }
  112. 50% {
  113. background-position: 1000px 0;
  114. }
  115. 100% {
  116. background-position: 1000px 0;
  117. }
  118. }
  119. .wave-btn-bg {
  120. position: relative;
  121. border-radius: 25px;
  122. width: 100%;
  123. transition: all 0.3s cubic-bezier(.645, .045, .355, 1);
  124. }
  125. .dark .wave-btn-bg {
  126. color: #fff;
  127. position: relative;
  128. background-color: #0a7557;
  129. border: 2px double transparent;
  130. background-origin: border-box;
  131. background-clip: padding-box, border-box;
  132. background-size: 300%;
  133. width: 100%;
  134. z-index: 1;
  135. }
  136. .dark .wave-btn-bg:hover {
  137. animation: wave-btn-tara 4s ease infinite;
  138. }
  139. .dark .wave-btn-bg-cl {
  140. background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
  141. radial-gradient(circle at left top, #006655, #009980, #006655) !important;
  142. border-radius: 3em;
  143. }
  144. .dark .wave-btn-bg-cl:hover {
  145. width: 95%;
  146. }
  147. .dark .wave-btn-bg-cl:before {
  148. position: absolute;
  149. content: "";
  150. top: -5px;
  151. left: -5px;
  152. bottom: -5px;
  153. right: -5px;
  154. z-index: -1;
  155. background: inherit;
  156. background-size: inherit;
  157. border-radius: 4em;
  158. opacity: 0;
  159. transition: 0.5s;
  160. }
  161. .dark .wave-btn-bg-cl:hover::before {
  162. opacity: 1;
  163. filter: blur(20px);
  164. animation: wave-btn-tara 8s linear infinite;
  165. }
  166. @keyframes wave-btn-tara {
  167. to {
  168. background-position: 300%;
  169. }
  170. }
  171. .dark .ant-btn-primary-login {
  172. font-size: 14px;
  173. color: #fff;
  174. text-align: center;
  175. background-image: linear-gradient(rgba(13, 14, 33, 0.45),
  176. rgba(13, 14, 33, 0.35));
  177. border-radius: 2rem;
  178. border: none;
  179. outline: none;
  180. background-color: transparent;
  181. height: 46px;
  182. position: relative;
  183. white-space: nowrap;
  184. cursor: pointer;
  185. touch-action: manipulation;
  186. padding: 0 15px;
  187. width: 100%;
  188. animation: none;
  189. background-position-x: 0;
  190. box-shadow: none;
  191. }
  192. .waves-header {
  193. position: fixed;
  194. width: 100%;
  195. text-align: center;
  196. background-color: #dbf5ed;
  197. color: white;
  198. z-index: -1;
  199. }
  200. .dark .waves-header {
  201. background-color: var(--dark-color-login-background);
  202. }
  203. .waves-inner-header {
  204. height: 50vh;
  205. width: 100%;
  206. margin: 0;
  207. padding: 0;
  208. }
  209. .waves {
  210. position: relative;
  211. width: 100%;
  212. height: 15vh;
  213. margin-bottom: -8px;
  214. /*Fix for safari gap*/
  215. min-height: 100px;
  216. max-height: 150px;
  217. }
  218. .parallax>use {
  219. animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  220. }
  221. .dark .parallax>use {
  222. fill: var(--dark-color-login-wave);
  223. }
  224. .parallax>use:nth-child(1) {
  225. animation-delay: -2s;
  226. animation-duration: 4s;
  227. opacity: 0.2;
  228. }
  229. .parallax>use:nth-child(2) {
  230. animation-delay: -3s;
  231. animation-duration: 7s;
  232. opacity: 0.4;
  233. }
  234. .parallax>use:nth-child(3) {
  235. animation-delay: -4s;
  236. animation-duration: 10s;
  237. opacity: 0.6;
  238. }
  239. .parallax>use:nth-child(4) {
  240. animation-delay: -5s;
  241. animation-duration: 13s;
  242. }
  243. @keyframes move-forever {
  244. 0% {
  245. transform: translate3d(-90px, 0, 0);
  246. }
  247. 100% {
  248. transform: translate3d(85px, 0, 0);
  249. }
  250. }
  251. @media (max-width: 768px) {
  252. .waves {
  253. height: 40px;
  254. min-height: 40px;
  255. }
  256. }
  257. .words-wrapper {
  258. width: 100%;
  259. display: inline-block;
  260. position: relative;
  261. text-align: center;
  262. }
  263. .words-wrapper b {
  264. width: 100%;
  265. display: inline-block;
  266. position: absolute;
  267. left: 0;
  268. top: 0;
  269. }
  270. .words-wrapper b.is-visible {
  271. position: relative;
  272. }
  273. .headline.zoom .words-wrapper {
  274. -webkit-perspective: 300px;
  275. -moz-perspective: 300px;
  276. perspective: 300px;
  277. }
  278. .headline {
  279. display: flex;
  280. justify-content: center;
  281. align-items: center;
  282. }
  283. .headline.zoom b {
  284. opacity: 0;
  285. }
  286. .headline.zoom b.is-visible {
  287. opacity: 1;
  288. -webkit-animation: zoom-in 0.8s;
  289. -moz-animation: zoom-in 0.8s;
  290. animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
  291. }
  292. .headline.zoom b.is-hidden {
  293. -webkit-animation: zoom-out 0.8s;
  294. -moz-animation: zoom-out 0.8s;
  295. animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
  296. }
  297. @-webkit-keyframes zoom-in {
  298. 0% {
  299. opacity: 0;
  300. -webkit-transform: translateZ(100px);
  301. }
  302. 100% {
  303. opacity: 1;
  304. -webkit-transform: translateZ(0);
  305. }
  306. }
  307. @-moz-keyframes zoom-in {
  308. 0% {
  309. opacity: 0;
  310. -moz-transform: translateZ(100px);
  311. }
  312. 100% {
  313. opacity: 1;
  314. -moz-transform: translateZ(0);
  315. }
  316. }
  317. @keyframes zoom-in {
  318. 0% {
  319. opacity: 0;
  320. -webkit-transform: translateZ(100px);
  321. -moz-transform: translateZ(100px);
  322. -ms-transform: translateZ(100px);
  323. -o-transform: translateZ(100px);
  324. transform: translateZ(100px);
  325. }
  326. 100% {
  327. opacity: 1;
  328. -webkit-transform: translateZ(0);
  329. -moz-transform: translateZ(0);
  330. -ms-transform: translateZ(0);
  331. -o-transform: translateZ(0);
  332. transform: translateZ(0);
  333. }
  334. }
  335. @-webkit-keyframes zoom-out {
  336. 0% {
  337. opacity: 1;
  338. -webkit-transform: translateZ(0);
  339. }
  340. 100% {
  341. opacity: 0;
  342. -webkit-transform: translateZ(-100px);
  343. }
  344. }
  345. @-moz-keyframes zoom-out {
  346. 0% {
  347. opacity: 1;
  348. -moz-transform: translateZ(0);
  349. }
  350. 100% {
  351. opacity: 0;
  352. -moz-transform: translateZ(-100px);
  353. }
  354. }
  355. @keyframes zoom-out {
  356. 0% {
  357. opacity: 1;
  358. -webkit-transform: translateZ(0);
  359. -moz-transform: translateZ(0);
  360. -ms-transform: translateZ(0);
  361. -o-transform: translateZ(0);
  362. transform: translateZ(0);
  363. }
  364. 100% {
  365. opacity: 0;
  366. -webkit-transform: translateZ(-100px);
  367. -moz-transform: translateZ(-100px);
  368. -ms-transform: translateZ(-100px);
  369. -o-transform: translateZ(-100px);
  370. transform: translateZ(-100px);
  371. }
  372. }
  373. .setting-section {
  374. position: absolute;
  375. top: 0;
  376. right: 0;
  377. padding: 22px;
  378. }
  379. .ant-space-item .ant-switch {
  380. margin: 2px 0 4px;
  381. }
  382. </style>
  383. <body>
  384. <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
  385. <transition name="list" appear>
  386. <a-layout-content class="under" :style="{ minHeight: '0' }">
  387. <div class="waves-header">
  388. <div class="waves-inner-header"></div>
  389. <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  390. viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
  391. <defs>
  392. <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" />
  393. </defs>
  394. <g class="parallax">
  395. <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
  396. <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
  397. <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
  398. <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
  399. </g>
  400. </svg>
  401. </div>
  402. <a-row type="flex" justify="center" align="middle" :style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
  403. <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
  404. <div class="setting-section">
  405. <a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}' placement="bottomRight" trigger="click">
  406. <template slot="content">
  407. <a-space direction="vertical" :size="10">
  408. <a-theme-switch-login></a-theme-switch-login>
  409. <span>{{ i18n "pages.settings.language" }}</span>
  410. <a-select ref="selectLang" :style="{ width: '100%' }" v-model="lang" @change="LanguageManager.setLanguage(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
  411. <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
  412. <span role="img" aria-label="l.name" v-text="l.icon"></span>
  413. &nbsp;&nbsp;<span v-text="l.name"></span>
  414. </a-select-option>
  415. </a-select>
  416. </a-space>
  417. </template>
  418. <a-button shape="circle" icon="setting"></a-button>
  419. </a-popover>
  420. </div>
  421. <a-row type="flex" justify="center">
  422. <a-col :style="{ width: '100%' }">
  423. <h2 class="title headline zoom">
  424. <span class="words-wrapper">
  425. <b class="is-visible">{{ i18n "pages.login.hello" }}</b>
  426. <b>{{ i18n "pages.login.title" }}</b>
  427. </span>
  428. </h2>
  429. </a-col>
  430. </a-row>
  431. <a-row type="flex" justify="center">
  432. <a-col span="24">
  433. <a-form>
  434. <a-space direction="vertical" size="middle">
  435. <a-form-item>
  436. <a-input autocomplete="username" name="username" v-model.trim="user.username"
  437. placeholder='{{ i18n "username" }}' @keydown.enter.native="login" autofocus>
  438. <a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
  439. </a-input>
  440. </a-form-item>
  441. <a-form-item>
  442. <a-input-password autocomplete="password" name="password" v-model.trim="user.password"
  443. placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
  444. <a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
  445. </a-input-password>
  446. </a-form-item>
  447. <a-form-item v-if="secretEnable">
  448. <a-input-password autocomplete="secret" name="secret" v-model.trim="user.loginSecret"
  449. placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
  450. <a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
  451. </a-input-password>
  452. </a-form-item>
  453. <a-form-item>
  454. <a-row justify="center" class="centered">
  455. <div :style="{ height: '50px', marginTop: '1rem', ...loading ? { width: '52px' } : { display: 'inline-block' } }" class="wave-btn-bg wave-btn-bg-cl">
  456. <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login"
  457. :icon="loading ? 'poweroff' : undefined">
  458. [[ loading ? '' : '{{ i18n "login" }}' ]]
  459. </a-button>
  460. </div>
  461. </a-row>
  462. </a-form-item>
  463. </a-space>
  464. </a-form>
  465. </a-col>
  466. </a-row>
  467. </a-col>
  468. </a-row>
  469. </a-layout-content>
  470. </transition>
  471. </a-layout>
  472. {{template "js" .}}
  473. {{template "component/aThemeSwitch" .}}
  474. <script>
  475. const app = new Vue({
  476. delimiters: ['[[', ']]'],
  477. el: '#app',
  478. data: {
  479. themeSwitcher,
  480. loading: false,
  481. user: {
  482. username: "",
  483. password: "",
  484. loginSecret: ""
  485. },
  486. secretEnable: false,
  487. lang: ""
  488. },
  489. async mounted() {
  490. this.lang = LanguageManager.getLanguage();
  491. this.secretEnable = await this.getSecretStatus();
  492. },
  493. methods: {
  494. async login() {
  495. this.loading = true;
  496. const msg = await HttpUtil.post('/login', this.user);
  497. this.loading = false;
  498. if (msg.success) {
  499. location.href = basePath + 'panel/';
  500. }
  501. },
  502. async getSecretStatus() {
  503. this.loading = true;
  504. const msg = await HttpUtil.post('/getSecretStatus');
  505. this.loading = false;
  506. if (msg.success) {
  507. this.secretEnable = msg.obj;
  508. return msg.obj;
  509. }
  510. },
  511. },
  512. });
  513. document.addEventListener("DOMContentLoaded", function () {
  514. var animationDelay = 2000;
  515. initHeadline();
  516. function initHeadline() {
  517. animateHeadline(document.querySelectorAll('.headline'));
  518. }
  519. function animateHeadline(headlines) {
  520. var duration = animationDelay;
  521. headlines.forEach(function (headline) {
  522. setTimeout(function () {
  523. hideWord(headline.querySelector('.is-visible'));
  524. }, duration);
  525. });
  526. }
  527. function hideWord(word) {
  528. var nextWord = takeNext(word);
  529. switchWord(word, nextWord);
  530. setTimeout(function () {
  531. hideWord(nextWord);
  532. }, animationDelay);
  533. }
  534. function takeNext(word) {
  535. return word.nextElementSibling ? word.nextElementSibling : word.parentElement.firstElementChild;
  536. }
  537. function switchWord(oldWord, newWord) {
  538. oldWord.classList.remove('is-visible');
  539. oldWord.classList.add('is-hidden');
  540. newWord.classList.remove('is-hidden');
  541. newWord.classList.add('is-visible');
  542. }
  543. });
  544. </script>
  545. </body>
  546. </html>