diff options
| author | Hamidreza Ghavami <hamid.r.gh.1998@gmail.com> | 2023-05-08 17:50:13 +0300 |
|---|---|---|
| committer | Hamidreza Ghavami <hamid.r.gh.1998@gmail.com> | 2023-05-08 17:50:13 +0300 |
| commit | 7b2764566c010aabb2b21dde200d0021fffb409d (patch) | |
| tree | 139b942866f5918f0860b769bf21594cd43bb462 /web | |
| parent | 55d38dfa48cadd37e6aad538c5758727e226f532 (diff) | |
update login UI
Diffstat (limited to 'web')
| -rw-r--r-- | web/html/login.html | 90 |
1 files changed, 60 insertions, 30 deletions
diff --git a/web/html/login.html b/web/html/login.html index 2f4cb3e6..ae90e107 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -18,6 +18,12 @@ border-radius: 30px; } + .ant-input-group-addon { + border-radius: 0 30px 30px 0; + width: 50px; + font-size: 18px; + } + .ant-input-affix-wrapper .ant-input-prefix { left: 23px; } @@ -26,20 +32,26 @@ padding-left: 50px; } - .selectLang{ + .centered { display: flex; text-align: center; + align-items: center; justify-content: center; } + .title { + font-size: 32px; + font-weight: bold; + } + </style> <body> -<a-layout id="app" v-cloak> +<a-layout id="app" v-cloak :class="themeSwitcher.darkClass"> <transition name="list" appear> <a-layout-content> <a-row type="flex" justify="center"> <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8"> - <h1>{{ i18n "pages.login.title" }}</h1> + <h1 class="title">{{ i18n "pages.login.title" }}</h1> </a-col> </a-row> <a-row type="flex" justify="center"> @@ -48,35 +60,36 @@ <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="color: rgba(0,0,0,.25)"/> + <a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" /> </a-input> </a-form-item> <a-form-item> <a-input type="password" v-model.trim="user.password" placeholder='{{ i18n "password" }}' @keydown.enter.native="login"> - <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/> + <a-icon slot="prefix" type="lock" :style="'font-size: 16px;' + themeSwitcher.textStyle" /> </a-input> </a-form-item> <a-form-item v-if="secretEnable"> <a-input type="text" placeholder='{{ i18n "secretToken" }}' v-model.trim="user.loginSecret" @keydown.enter.native="login"> - <a-icon slot="prefix" type="key" style="color: rgba(0,0,0,.25)"/> + <a-icon slot="prefix" type="key" :style="'font-size: 16px;' + themeSwitcher.textStyle" /> </a-input> </a-form-item> <a-form-item> <a-button block @click="login" :loading="loading">{{ i18n "login" }}</a-button> </a-form-item> <a-form-item> - - <a-row justify="center" class="selectLang"> - <a-col :span="5"><span>Language :</span></a-col> - - <a-col :span="7"> - <a-select - ref="selectLang" - v-model="lang" - @change="setLang(lang)" - > - <a-select-option :value="l.value" label="English" v-for="l in supportLangs" > + <a-row justify="center" class="centered"> + <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined" + :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }"> + [[ loading ? '' : '{{ i18n "login" }}' ]] + </a-button> + </a-row> + </a-form-item> + <a-form-item> + <a-row justify="center" class="centered"> + <a-col :span="12"> + <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass"> + <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> @@ -84,6 +97,11 @@ </a-col> </a-row> </a-form-item> + <a-form-item> + <a-row justify="center" class="centered"> + <theme-switch></theme-switch> + </a-row> + </a-form-item> </a-form> </a-col> </a-row> @@ -91,24 +109,23 @@ </transition> </a-layout> {{template "js" .}} +{{template "component/themeSwitcher" .}} <script> - const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16); - const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16); - const deg = RandomUtil.randomIntRange(0, 360); - const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`; - document.querySelector('#app').style.background = background; + const app = new Vue({ delimiters: ['[[', ']]'], el: '#app', data: { + themeSwitcher, loading: false, user: new User(), secretEnable: false, - lang : "" + lang: "" }, - created(){ - this.lang = getLang(); - this.secretEnable = this.getSecretStatus(); + created() { + this.updateBackground(); + this.lang = getLang(); + this.secretEnable = this.getSecretStatus(); }, methods: { async login() { @@ -120,16 +137,29 @@ } }, async getSecretStatus() { - this.loading= true; + this.loading = true; const msg = await HttpUtil.post('/getSecretStatus'); this.loading = false; - if (msg.success){ + if (msg.success) { this.secretEnable = msg.obj; return msg.obj; } - } - } + }, + updateBackground() { + const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16); + const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16); + const deg = RandomUtil.randomIntRange(0, 360); + const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`; + document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background; + }, + }, + watch: { + 'themeSwitcher.isDarkTheme'(newVal, oldVal) { + this.updateBackground(); + }, + }, }); + </script> </body> </html>
\ No newline at end of file |