wcx/surl-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

抽离登录对话框

Browse Source
This commit is contained in:
05412 2024-08-05 11:50:56 +08:00
parent d50bd58504
commit 92abcad0db
7 changed files with 102 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/items/LoginDialog.vue
View File

@ -1,9 +1,86 @@
<script setup lang="ts">
import {ref, watch} from "vue";
import {useLocale} from "vuetify";
import {login} from "../../script/functions.ts";
const {t} = useLocale()
const showLoginDialog = defineModel<boolean>()
const username = ref('')
const password = ref('')
const passwordVisibleState = ref(false)
const loading = ref(false)
const loginDisabled = ref(false)
const loginIcon = ref<any>(null)
const isLoginFailed = ref(false)
watch(() => showLoginDialog.value, (value, oldValue) => {
if(oldValue === false && value === true) {
isLoginFailed.value = false
}
})
async function tryLogin() {
loading.value = true
isLoginFailed.value = false
const isSuccess = await login(username.value, password.value)
if (isSuccess) {
loginIcon.value = "mdi-check"
loading.value = false
loginDisabled.value = true
setTimeout(() => {
showLoginDialog.value = false
loginDisabled.value = false
loginIcon.value = null
}, 1500)
} else {
isLoginFailed.value = true
loading.value = false
}
}
function resetLoginError() {
isLoginFailed.value = false
}
</script>
<template>
<v-dialog v-model="showLoginDialog" persistent width="450">
<v-card prepend-icon="mdi-login" :title="t('$vuetify.login.title')" class="px-10">
<v-text-field class="login-dialog-input" flat prepend-inner-icon="mdi-account-outline"
:label="t('$vuetify.login.username')"
density="compact" @input="resetLoginError"
hide-details single-line rounded="lg" variant="solo-filled" v-model="username"></v-text-field>
<v-text-field class="login-dialog-input" flat prepend-inner-icon="mdi-lock-outline"
:label="t('$vuetify.login.password')"
density="compact" hide-details single-line v-model="password" rounded="lg" variant="solo-filled"
:type="passwordVisibleState ? 'text' :'password'" title="password" @input="resetLoginError"
:append-inner-icon="passwordVisibleState ? 'mdi-eye-off' : 'mdi-eye'"
@click:append-inner="passwordVisibleState = !passwordVisibleState"></v-text-field>
<v-alert class="text-medium-emphasis text-caption mb-2" type="warning" closable v-model="isLoginFailed">
{{ t('$vuetify.login.failedNote') }}
</v-alert>
<v-card color="surface-variant mt-5" variant="tonal">
<v-card-text class="text-medium-emphasis text-caption">
{{ t('$vuetify.login.agreement') }}
<v-label class="text-caption"><a href="/input" target="_blank">{{ t('$vuetify.login.termsOfService') }}</a>
</v-label>
</v-card-text>
</v-card>
<v-checkbox class="login-dialog-input" :label="t('$vuetify.login.rememberMe')" hide-details
color="primary"></v-checkbox>
<v-card-actions>
<v-btn :text="t('$vuetify.login.button.cancel')" @click="showLoginDialog = false"></v-btn>
<v-btn :loading="loading" color="primary" :text="t('$vuetify.login.button.login')" @click="tryLogin"
:icon="loginIcon"
:disabled="loginDisabled">
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<style scoped>
.login-dialog-input {
margin: 10px 0;
}
</style>

11
src/components/items/RegisterDialog.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import {ref} from "vue";
import {ref, watch} from "vue";
import {useLocale} from "vuetify";
import {register} from "../../script/functions.ts";
@ -13,6 +13,11 @@ const registerFailedNote = ref('')
const loading = ref(false)
const registerIcon = ref<any>(null)
const disableRegister = ref(false)
watch(()=> showDialog.value, (value, oldValue) => {
if(oldValue === false && value === true) {
isRegisterFailed.value = false
}
})
async function tryRegister() {
loading.value = true
@ -69,8 +74,8 @@ function resetRegisterFailed() {
</v-alert>
<v-card color="surface-variant mt-5" variant="tonal">
<v-card-text class="text-medium-emphasis text-caption">
{{ t('$vuetify.login.agreement') }}
<v-label class="text-caption"><a href="/input" target="_blank">{{ t('$vuetify.login.termsOfService') }}</a>
{{ t('$vuetify.register.agreement') }}
<v-label class="text-caption"><a href="/input" target="_blank">{{ t('$vuetify.register.termsOfService') }}</a>
</v-label>
</v-card-text>
</v-card>

74
src/components/views/HomeView.vue
View File

@ -1,46 +1,17 @@
<script setup lang="ts">
import {ref} from "vue";
import {login, logout} from "../../script/functions";
import {logout} from "../../script/functions";
import {useUserinfoStore} from "../../stores/userinfo-store.ts";
import {useLocale, useTheme} from "vuetify";
import RegisterDialog from "../items/RegisterDialog.vue";
import LoginDialog from "../items/LoginDialog.vue";
const {t, current} = useLocale()
const theme = useTheme()
const userinfoStore = useUserinfoStore()
const showLoginDialog = ref(false)
const username = ref('')
const password = ref('')
const passwordVisibleState = ref(false)
const loading = ref(false)
const loginDisabled = ref(false)
const loginIcon = ref<any>(null)
const isLoginFailed = ref(false)
const showRegisterDialog = ref(false)
async function tryLogin() {
loading.value = true
isLoginFailed.value = false
const isSuccess = await login(username.value, password.value)
if (isSuccess) {
loginIcon.value = "mdi-check"
loading.value = false
loginDisabled.value = true
setTimeout(() => {
showLoginDialog.value = false
loginDisabled.value = false
loginIcon.value = null
}, 1500)
} else {
isLoginFailed.value = true
loading.value = false
}
}
function resetLoginError() {
isLoginFailed.value = false
}
function toggleLocale() {
switch (current.value) {
case 'en':
@ -86,7 +57,7 @@ function toggleTheme() {
<v-menu open-on-hover activator="#avatar" open-delay="0" close-delay="500" location="bottom" width="150">
<v-list>
<v-list-item value="1" @click="showLoginDialog = true; isLoginFailed = false" v-if="!userinfoStore.isLogin"
<v-list-item value="1" @click="showLoginDialog = true" v-if="!userinfoStore.isLogin"
append-icon="mdi-login">
<v-list-item-title>{{ t('$vuetify.user.login') }}</v-list-item-title>
</v-list-item>
@ -112,40 +83,7 @@ function toggleTheme() {
</v-footer>
</v-app>
</v-responsive>
<v-dialog v-model="showLoginDialog" persistent width="450">
<v-card prepend-icon="mdi-login" :title="t('$vuetify.login.title')" class="px-10">
<v-text-field class="login-dialog-input" flat prepend-inner-icon="mdi-account-outline"
:label="t('$vuetify.login.username')"
density="compact" @input="resetLoginError"
hide-details single-line rounded="lg" variant="solo-filled" v-model="username"></v-text-field>
<v-text-field class="login-dialog-input" flat prepend-inner-icon="mdi-lock-outline"
:label="t('$vuetify.login.password')"
density="compact" hide-details single-line v-model="password" rounded="lg" variant="solo-filled"
:type="passwordVisibleState ? 'text' :'password'" title="password" @input="resetLoginError"
:append-inner-icon="passwordVisibleState ? 'mdi-eye-off' : 'mdi-eye'"
@click:append-inner="passwordVisibleState = !passwordVisibleState"></v-text-field>
<v-alert class="text-medium-emphasis text-caption mb-2" type="warning" closable v-model="isLoginFailed">
{{ t('$vuetify.login.failedNote') }}
</v-alert>
<v-card color="surface-variant mt-5" variant="tonal">
<v-card-text class="text-medium-emphasis text-caption">
{{ t('$vuetify.login.agreement') }}
<v-label class="text-caption"><a href="/input" target="_blank">{{ t('$vuetify.login.termsOfService') }}</a>
</v-label>
</v-card-text>
</v-card>
<v-checkbox class="login-dialog-input" :label="t('$vuetify.login.rememberMe')" hide-details
color="primary"></v-checkbox>
<v-card-actions>
<v-btn :text="t('$vuetify.login.button.cancel')" @click="showLoginDialog = false"></v-btn>
<v-btn :loading="loading" color="primary" :text="t('$vuetify.login.button.login')" @click="tryLogin"
:icon="loginIcon"
:disabled="loginDisabled">
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<LoginDialog v-model="showLoginDialog"></LoginDialog>
<RegisterDialog v-model:showDialog="showRegisterDialog"></RegisterDialog>
</template>
<style scoped>
@ -154,10 +92,6 @@ function toggleTheme() {
min-width: 200px;
}
.login-dialog-input {
margin: 10px 0;
}
.home-menu-button {
width: 120px;
}

7
src/components/views/TestView.vue
View File

@ -1,9 +1,12 @@
<script setup lang="ts">
import RegisterDialog from "../items/RegisterDialog.vue";
import LoginDialog from "../items/LoginDialog.vue";
import {ref} from "vue";
const showDialog = ref(true)
</script>
<template>
<RegisterDialog></RegisterDialog>
<LoginDialog v-model="showDialog"></LoginDialog>
</template>
<style scoped>

13
src/script/i18n/en.ts
View File

@ -30,19 +30,18 @@ const en: LocaleInterface = {
},
register: {
title: "REGISTER",
username: "USERNAME",
password: "PASSWORD",
username: "USERNAME, letters and numbers, 4-16 characters",
password: "PASSWORD, letters, numbers, underscores, 8-16 characters",
confirmPassword: "CONFIRM PASSWORD",
usernameInvalidNote: "Invalid username format",
passwordInvalidNote: "Invalid password format",
passwordConfirmInvalidNote: "Password confirmation does not match the password",
failedNote: "Register failed",
rememberMe: "string",
agreement: "string",
termsOfService: "string",
agreement: "PLEASE CONFIRM YOU HAVE READ AND AGREE TO THE",
termsOfService: "TERMS OF SERVICE",
button: {
register: "string",
cancel: "string"
register: "REGISTER",
cancel: "CANCEL"
}
}
}

1
src/script/i18n/locale-interface.ts
View File

@ -34,7 +34,6 @@ export default interface LocaleInterface {
passwordInvalidNote: string,
passwordConfirmInvalidNote: string,
failedNote: string,
rememberMe: string,
agreement: string,
termsOfService: string,
button: {

5
src/script/i18n/zhHans.ts
View File

@ -37,9 +37,8 @@ const zhHans: LocaleInterface = {
passwordInvalidNote: "密码不符合规则",
passwordConfirmInvalidNote: "两次输入的密码不一致",
failedNote: "注册失败, 用户名重复或网络异常",
rememberMe: "string",
agreement: "string",
termsOfService: "string",
agreement: "我已阅读并同意",
termsOfService: "服务条款",
button: {
register: "注册",
cancel: "取消"