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

make all frontend functions works (#466)

Browse Source
This commit is contained in:
Sijie.Sun
2024-11-10 11:06:58 +08:00
committed by GitHub
parent e948dbfcc1
commit 88e6de9d7e
36 changed files with 1039 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files
easytier-web/frontend/src/components/Login.vue
+74 -45
View File
@@ -1,3 +1,65 @@
<script setup lang="ts">
import { computed, 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';
defineProps<{
isRegistering: boolean;
}>();
const api = computed<Api.ApiClient>(() => new Api.ApiClient(apiHost.value));
const router = useRouter();
const toast = useToast();
const username = ref('');
const password = ref('');
const registerUsername = ref('');
const registerPassword = ref('');
const captcha = ref('');
const captchaSrc = computed(() => api.value.captcha_url());
const onSubmit = async () => {
// Add your login logic here
const credential: Api.Credential = { username: username.value, password: password.value, };
let ret = await api.value?.login(credential);
if (ret.success) {
localStorage.setItem('apiHost', btoa(apiHost.value));
router.push({
name: 'dashboard',
params: { apiHost: btoa(apiHost.value) },
});
} else {
toast.add({ severity: 'error', summary: 'Login Failed', detail: ret.message, life: 2000 });
}
};
const onRegister = async () => {
const credential: Api.Credential = { username: registerUsername.value, password: registerPassword.value };
const registerReq: Api.RegisterData = { credentials: credential, captcha: captcha.value };
let ret = await api.value?.register(registerReq);
if (ret.success) {
toast.add({ severity: 'success', summary: 'Register Success', detail: ret.message, life: 2000 });
router.push({ name: 'login' });
} else {
toast.add({ severity: 'error', summary: 'Register Failed', detail: ret.message, life: 2000 });
}
};
const defaultApiHost = 'http://10.147.223.128:11211'
const apiHost = ref<string>(defaultApiHost)
const apiHostSuggestions = ref<Array<string>>([])
const apiHostSearch = async (event: { query: string }) => {
apiHostSuggestions.value = [];
if (event.query) {
apiHostSuggestions.value.push(event.query);
}
apiHostSuggestions.value.push(defaultApiHost);
}
</script>
<template>
<div class="flex items-center justify-center min-h-screen">
<Card class="w-full max-w-md p-6">
@@ -6,6 +68,11 @@
</h2>
</template>
<template #content>
<div class="p-field mb-4">
<label for="api-host" class="block text-sm font-medium">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>
@@ -13,14 +80,14 @@
</div>
<div class="p-field">
<label for="password" class="block text-sm font-medium">Password</label>
<Password id="password" v-model="password" required toggleMask />
<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" />
</div>
<div class="flex items-center justify-between">
<Button label="Register" type="button" class="w-full" @click="isRegistering = true"
severity="secondary" />
<Button label="Register" type="button" class="w-full"
@click="$router.replace({ name: 'register' })" severity="secondary" />
</div>
</form>
@@ -32,7 +99,7 @@
<div class="p-field">
<label for="register-password" class="block text-sm font-medium">Password</label>
<Password id="register-password" v-model="registerPassword" required toggleMask
class="w-full" />
:feedback="false" class="w-full" />
</div>
<div class="p-field">
<label for="captcha" class="block text-sm font-medium">Captcha</label>
@@ -43,8 +110,8 @@
<Button label="Register" type="submit" class="w-full" />
</div>
<div class="flex items-center justify-between">
<Button label="Back to Login" type="button" class="w-full" @click="isRegistering = false"
severity="secondary" />
<Button label="Back to Login" type="button" class="w-full"
@click="$router.replace({ name: 'login' })" severity="secondary" />
</div>
</form>
</template>
@@ -52,42 +119,4 @@
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { Card, InputText, Password, Button } from 'primevue';
import ApiClient from '../modules/api';
import { Credential } from '../modules/api';
const props = defineProps({
api: ApiClient,
});
const api = props.api;
const username = ref('');
const password = ref('');
const registerUsername = ref('');
const registerPassword = ref('');
const captcha = ref('');
const captchaSrc = computed(() => api?.captcha_url());
const isRegistering = ref(false);
const onSubmit = async () => {
console.log('Username:', username.value);
console.log('Password:', password.value);
// Add your login logic here
const credential: Credential = { username: username.value, password: password.value, };
const ret = await api?.login(credential);
alert(ret?.message);
};
const onRegister = () => {
console.log('Register Username:', registerUsername.value);
console.log('Register Password:', registerPassword.value);
console.log('Captcha:', captcha.value);
// Add your register logic here
};
</script>
<style scoped></style>
<style scoped></style>