123 lines
3.0 KiB
Vue
123 lines
3.0 KiB
Vue
<template>
|
|
<v-container
|
|
class="fill-height"
|
|
fluid
|
|
>
|
|
<v-row
|
|
align="center"
|
|
justify="center"
|
|
>
|
|
<v-col
|
|
cols="12"
|
|
sm="8"
|
|
md="6"
|
|
lg="4"
|
|
>
|
|
<v-card class="elevation-12">
|
|
<v-toolbar
|
|
color="primary"
|
|
dark
|
|
flat
|
|
>
|
|
<v-toolbar-title>Login</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text>
|
|
<v-form
|
|
ref="form"
|
|
v-model="valid"
|
|
@submit.prevent="login"
|
|
>
|
|
<v-text-field
|
|
v-model="username"
|
|
:rules="usernameRules"
|
|
label="Username"
|
|
prepend-icon="mdi-account"
|
|
required
|
|
/>
|
|
|
|
<v-text-field
|
|
v-model="password"
|
|
:rules="passwordRules"
|
|
label="Password"
|
|
prepend-icon="mdi-lock"
|
|
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
required
|
|
@click:append="showPassword = !showPassword"
|
|
/>
|
|
</v-form>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
color="primary"
|
|
:disabled="!valid"
|
|
@click="login"
|
|
>
|
|
Login
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {ref} from 'vue'
|
|
|
|
const router = useRouter()
|
|
const valid = ref(false)
|
|
const username = ref('')
|
|
const password = ref('')
|
|
const showPassword = ref(false)
|
|
|
|
const usernameRules = [
|
|
(v: string) => !!v || 'Username is required',
|
|
]
|
|
|
|
const passwordRules = [
|
|
(v: string) => !!v || 'Password is required',
|
|
(v: string) => v.length >= 5 || 'Password must be at least 5 characters',
|
|
]
|
|
|
|
async function login() {
|
|
// This is where you would typically handle authentication
|
|
try {
|
|
// Example authentication logic (replace with your actual authentication API)
|
|
// const response = await api.login(username.value, password.value)
|
|
|
|
// For now, we'll just simulate a successful login
|
|
console.log('Login attempted with:', {username: username.value, password: password.value})
|
|
|
|
const res = await fetch("/gui/auth/login", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
username: username.value, password: password.value
|
|
})
|
|
})
|
|
if (!res.ok) {
|
|
alert("error!!!")
|
|
}
|
|
|
|
console.log(await res.json())
|
|
// After successful login, you would typically:
|
|
// 1. Store auth token in localStorage or a state management store
|
|
// 2. Redirect to a protected page
|
|
router.push('/')
|
|
} catch (error) {
|
|
console.error('Login failed:', error)
|
|
// Handle login error - display message to user
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fill-height {
|
|
height: 100%;
|
|
}
|
|
</style>
|