login.html 15 KB

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