mirror/Easytier
1
0
Fork 0
mirror of https://github.com/EasyTier/EasyTier.git synced 2026-05-07 10:14:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

web improve (#1047)

Browse Source
This commit is contained in:
Sijie.Sun
2025-06-24 09:09:52 +08:00
committed by GitHub
parent 760a1e6306
commit ae4a158e36
18 changed files with 1628 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
easytier-web/frontend/src/components/Login.vue
+27 -13
View File
@@ -3,8 +3,11 @@ import { computed, onMounted, ref } from 'vue';
import { Card, InputText, Password, Button, AutoComplete } from 'primevue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import { Api } from 'easytier-frontend-lib';
import {getInitialApiHost, cleanAndLoadApiHosts, saveApiHost} from "../modules/api-host"
import { Api, I18nUtils } from 'easytier-frontend-lib';
import { getInitialApiHost, cleanAndLoadApiHosts, saveApiHost } from "../modules/api-host"
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineProps<{
isRegistering: boolean;
@@ -74,57 +77,68 @@ onMounted(() => {
<div class="flex items-center justify-center min-h-screen">
<Card class="w-full max-w-md p-6">
<template #header>
<h2 class="text-2xl font-semibold text-center">{{ isRegistering ? 'Register' : 'Login' }}
<h2 class="text-2xl font-semibold text-center">{{ isRegistering ? t('web.login.register') :
t('web.login.login') }}
</h2>
</template>
<template #content>
<div class="p-field mb-4">
<label for="api-host" class="block text-sm font-medium">Api Host</label>
<label for="api-host" class="block text-sm font-medium">{{ t('web.login.api_host') }}</label>
<AutoComplete id="api-host" v-model="apiHost" dropdown :suggestions="apiHostSuggestions"
@complete="apiHostSearch" class="w-full" />
</div>
<form v-if="!isRegistering" @submit.prevent="onSubmit" class="space-y-4">
<div class="p-field">
<label for="username" class="block text-sm font-medium">Username</label>
<label for="username" class="block text-sm font-medium">{{ t('web.login.username') }}</label>
<InputText id="username" v-model="username" required class="w-full" />
</div>
<div class="p-field">
<label for="password" class="block text-sm font-medium">Password</label>
<label for="password" class="block text-sm font-medium">{{ t('web.login.password') }}</label>
<Password id="password" v-model="password" required toggleMask :feedback="false" />
</div>
<div class="flex items-center justify-between">
<Button label="Login" type="submit" class="w-full" />
<Button :label="t('web.login.login')" type="submit" class="w-full" />
</div>
<div class="flex items-center justify-between">
<Button label="Register" type="button" class="w-full"
<Button :label="t('web.login.register')" type="button" class="w-full"
@click="saveApiHost(apiHost); $router.replace({ name: 'register' })" severity="secondary" />
</div>
</form>
<form v-else @submit.prevent="onRegister" class="space-y-4">
<div class="p-field">
<label for="register-username" class="block text-sm font-medium">Username</label>
<label for="register-username" class="block text-sm font-medium">{{ t('web.login.username')
}}</label>
<InputText id="register-username" v-model="registerUsername" required class="w-full" />
</div>
<div class="p-field">
<label for="register-password" class="block text-sm font-medium">Password</label>
<label for="register-password" class="block text-sm font-medium">{{ t('web.login.password')
}}</label>
<Password id="register-password" v-model="registerPassword" required toggleMask
:feedback="false" class="w-full" />
</div>
<div class="p-field">
<label for="captcha" class="block text-sm font-medium">Captcha</label>
<label for="captcha" class="block text-sm font-medium">{{ t('web.login.captcha') }}</label>
<InputText id="captcha" v-model="captcha" required class="w-full" />
<img :src="captchaSrc" alt="Captcha" class="mt-2 mb-2" />
</div>
<div class="flex items-center justify-between">
<Button label="Register" type="submit" class="w-full" />
<Button :label="t('web.login.register')" type="submit" class="w-full" />
</div>
<div class="flex items-center justify-between">
<Button label="Back to Login" type="button" class="w-full"
<Button :label="t('web.login.back_to_login')" type="button" class="w-full"
@click="saveApiHost(apiHost); $router.replace({ name: 'login' })" severity="secondary" />
</div>
</form>
<Button icon="pi pi-language" type="button" class="rounded-full absolute top-4 right-4 z-10"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);" severity="contrast"
@click="I18nUtils.toggleLanguage" :aria-label="t('web.main.language')"
:v-tooltip="t('web.main.language')" />
</template>
</Card>
</div>
</template>