|
|
@@ -374,92 +374,96 @@
|
|
|
</style>
|
|
|
<body>
|
|
|
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
|
|
|
- <transition name="list" appear>
|
|
|
- <a-layout-content class="under" style="min-height: 0;">
|
|
|
- <div class="waves-header">
|
|
|
- <div class="waves-inner-header"></div>
|
|
|
- <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|
|
- <defs>
|
|
|
- <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" />
|
|
|
- </defs>
|
|
|
- <g class="parallax">
|
|
|
- <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
|
|
|
- <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
|
|
|
- <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
|
|
|
- <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
|
|
|
- </g>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
- <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
|
|
|
- <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">
|
|
|
- <span class="words-wrapper">
|
|
|
- <b class="is-visible">{{ i18n "pages.login.title" }}</b>
|
|
|
- <b>3X-UI</b>
|
|
|
- </span>
|
|
|
- </h1>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row type="flex" justify="center">
|
|
|
- <a-col span="24">
|
|
|
- <a-form>
|
|
|
- <a-form-item>
|
|
|
- <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
|
|
|
- @keydown.enter.native="login" autofocus>
|
|
|
- <a-icon slot="prefix" type="user" style="font-size: 16px;"/>
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item>
|
|
|
- <password-input icon="lock" v-model.trim="user.password"
|
|
|
- placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
|
|
|
- </password-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item v-if="secretEnable">
|
|
|
- <password-input icon="key" v-model.trim="user.loginSecret"
|
|
|
- placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
|
|
|
- </password-input>
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item>
|
|
|
- <a-row justify="center" class="centered">
|
|
|
- <div class="wave-btn-bg wave-btn-bg-cl" :style="loading ? { width: '52px' } : { display: 'inline-block' }">
|
|
|
- <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined">
|
|
|
- [[ loading ? '' : '{{ i18n "login" }}' ]]
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- </a-row>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item>
|
|
|
- <a-row justify="center" class="centered">
|
|
|
- <a-col :span="24">
|
|
|
- <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" style="width: 150px;" :dropdown-class-name="themeSwitcher.currentTheme">
|
|
|
- <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
|
|
|
- <span role="img" aria-label="l.name" v-text="l.icon"></span>
|
|
|
- <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-col>
|
|
|
- <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
|
|
|
- </a-col>
|
|
|
- <a-col>
|
|
|
- <theme-switch />
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
+ <transition name="list" appear>
|
|
|
+ <a-layout-content class="under" style="min-height: 0;">
|
|
|
+ <div class="waves-header">
|
|
|
+ <div class="waves-inner-header"></div>
|
|
|
+ <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
+ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|
|
+ <defs>
|
|
|
+ <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" />
|
|
|
+ </defs>
|
|
|
+ <g class="parallax">
|
|
|
+ <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
|
|
|
+ <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
|
|
|
+ <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
|
|
|
+ <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
|
|
|
+ <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">
|
|
|
+ <span class="words-wrapper">
|
|
|
+ <b class="is-visible">{{ i18n "pages.login.title" }}</b>
|
|
|
+ <b>3X-UI</b>
|
|
|
+ </span>
|
|
|
+ </h1>
|
|
|
</a-col>
|
|
|
- </a-row>
|
|
|
- </a-layout-content>
|
|
|
- </transition>
|
|
|
+ </a-row>
|
|
|
+ <a-row type="flex" justify="center">
|
|
|
+ <a-col span="24">
|
|
|
+ <a-form>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
|
|
|
+ @keydown.enter.native="login" autofocus>
|
|
|
+ <a-icon slot="prefix" type="user" style="font-size: 16px;" />
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <password-input icon="lock" v-model.trim="user.password" placeholder='{{ i18n "password" }}'
|
|
|
+ @keydown.enter.native="login">
|
|
|
+ </password-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-if="secretEnable">
|
|
|
+ <password-input icon="key" v-model.trim="user.loginSecret" placeholder='{{ i18n "secretToken" }}'
|
|
|
+ @keydown.enter.native="login">
|
|
|
+ </password-input>
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-row justify="center" class="centered">
|
|
|
+ <div class="wave-btn-bg wave-btn-bg-cl"
|
|
|
+ :style="loading ? { width: '52px' } : { display: 'inline-block' }">
|
|
|
+ <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login"
|
|
|
+ :icon="loading ? 'poweroff' : undefined">
|
|
|
+ [[ loading ? '' : '{{ i18n "login" }}' ]]
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ </a-row>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-row justify="center" class="centered">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" style="width: 150px;"
|
|
|
+ :dropdown-class-name="themeSwitcher.currentTheme">
|
|
|
+ <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
|
|
|
+ <span role="img" aria-label="l.name" v-text="l.icon"></span>
|
|
|
+ <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-col>
|
|
|
+ <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
|
|
|
+ </a-col>
|
|
|
+ <a-col>
|
|
|
+ <theme-switch />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-layout-content>
|
|
|
+ </transition>
|
|
|
</a-layout>
|
|
|
{{template "js" .}}
|
|
|
{{template "component/themeSwitcher" .}}
|
MHSanaei