Update login.html

This commit is contained in:
Tara Rostami 2024-02-28 07:00:40 +03:30 committed by GitHub
parent 2ce71049f0
commit 6dd67d58e3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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