You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
OneAuth/ui/page/auth/login.html

71 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Login Page">
<title>{{ $t('auth.login') }}</title>
<style>
.login-title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
color: var(--color-primary);
}
.links {
margin-top: 15px;
text-align: center;
font-size: 14px;
}
.links a {
color: var(--color-primary);
text-decoration: none;
}
.error-msg {
color: var(--color-danger);
text-align: center;
margin-bottom: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<h2 class="login-title">{{ $t('auth.login') }}</h2>
<div v-if="error" class="error-msg">{{ error }}</div>
<form @submit.prevent="handleLogin" style="display: grid; gap: 16px;">
<v-input label="Username" v:value="username" required placeholder="Enter username"></v-input>
<v-input label="Password" type="password" v:value="password" required placeholder="Enter password"></v-input>
<v-btn type="submit" color="primary" block style="margin-top: 8px;">{{ $t('auth.login') }}</v-btn>
</form>
<div class="links">
<a href="/register">{{ $t('auth.register') }}</a>
</div>
</body>
<script setup>
username = "";
password = "";
error = "";
handleLogin = async (e) => {
e.preventDefault();
error = "";
try {
await $env.$vbase.login(username, password);
const redirect = $router.query.redirect || '/';
$router.push(redirect);
} catch (err) {
error = err.message || "Login failed";
}
};
</script>
</html>