182 lines
6.6 KiB
Vue
182 lines
6.6 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, watch, ref } from 'vue'
|
|
import MyOffcanvas from '@/components/MyOffcanvas.vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
// 使用 vue-i18n 的 Composition API
|
|
const { t, locale } = useI18n()
|
|
|
|
const mos = ref<InstanceType<typeof MyOffcanvas> | null>(null)
|
|
|
|
const isShowPassword = ref(false)
|
|
const username = ref<HTMLInputElement | null>(null)
|
|
const password = ref<HTMLInputElement | null>(null)
|
|
const isRemember = ref<HTMLInputElement | null>(null)
|
|
|
|
function togglePasswordVisibility() {
|
|
isShowPassword.value = !isShowPassword.value
|
|
}
|
|
|
|
function login() {
|
|
// 在这里处理登录逻辑
|
|
|
|
const user = username.value?.value
|
|
const pass = password.value?.value
|
|
const remember = isRemember.value?.checked
|
|
|
|
username.value?.classList.remove('is-invalid')
|
|
password.value?.classList.remove('is-invalid')
|
|
|
|
if (!user || !pass) {
|
|
if (!user) {
|
|
username.value?.classList.add('is-invalid')
|
|
}
|
|
if (!pass) {
|
|
password.value?.classList.add('is-invalid')
|
|
}
|
|
|
|
mos.value?.showAlert('info', t('message.please_enter_username_and_password'), 5000)
|
|
return
|
|
}
|
|
|
|
console.log('登录信息:', { user, pass, remember })
|
|
}
|
|
|
|
function functionupdataTitle() {
|
|
document.title = 'Operations.' + t('appname.login')
|
|
}
|
|
onMounted(() => {
|
|
functionupdataTitle()
|
|
})
|
|
// 监听语言变化，更新标题
|
|
watch(locale, () => {
|
|
functionupdataTitle()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page page-center">
|
|
<div class="container container-normal py-6">
|
|
<div class="row align-items-center g-4">
|
|
<div class="col-lg">
|
|
<div class="container-tight">
|
|
<div class="card card-md">
|
|
<div class="card-body">
|
|
<h2 class="h2 text-center mb-4">{{ t('message.login_to_your_account') }}</h2>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">{{ t('message.user_name') }}</label>
|
|
<input
|
|
ref="username"
|
|
type="text"
|
|
class="form-control"
|
|
:placeholder="t('message.your_user_name')"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label">
|
|
{{ t('message.password') }}
|
|
<span class="form-label-description">
|
|
<router-link to="/forgot_password">{{
|
|
t('message.i_forgot_password')
|
|
}}</router-link>
|
|
</span>
|
|
</label>
|
|
<div class="input-group input-group-flat">
|
|
<input
|
|
ref="password"
|
|
:type="isShowPassword ? 'text' : 'password'"
|
|
class="form-control"
|
|
:placeholder="t('message.your_password')"
|
|
autocomplete="off"
|
|
/>
|
|
<span class="input-group-text">
|
|
<div
|
|
class="link-secondary"
|
|
:title="
|
|
isShowPassword ? t('message.hidden_Password') : t('message.show_password')
|
|
"
|
|
data-bs-toggle="tooltip"
|
|
>
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/eye -->
|
|
<svg
|
|
v-if="!isShowPassword"
|
|
@click="togglePasswordVisibility"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
|
<path
|
|
d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
v-if="isShowPassword"
|
|
@click="togglePasswordVisibility"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
|
|
<path
|
|
d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
|
|
/>
|
|
<path d="M3 3l18 18" />
|
|
</svg>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-check">
|
|
<input ref="isRemember" type="checkbox" class="form-check-input" />
|
|
<span class="form-check-label">{{
|
|
t('message.remember_me_on_this_device')
|
|
}}</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-footer">
|
|
<button @click="login" class="btn btn-primary w-100">
|
|
{{ t('button.sign_in') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-secondary mt-3">
|
|
{{ t('message.dont_have_account_yet') }}
|
|
<router-link to="/register">{{ t('message.register_now') }}</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg d-none d-lg-block">
|
|
<img
|
|
src="/static/illustrations/undraw_secure_login_pdn4.svg"
|
|
height="300"
|
|
class="d-block mx-auto"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<MyOffcanvas ref="mos" />
|
|
</template>
|