91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<template>
|
|
<div
|
|
class="container mx-auto h-full flex justify-center items-center dark:text-white"
|
|
>
|
|
<div class="sm:w-3/4 md:w-1/3 w-full">
|
|
<h1 class="font-hairline mb-6 text-center">Login</h1>
|
|
<form
|
|
class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
|
|
@submit.prevent="login"
|
|
>
|
|
<div class="mb-4">
|
|
<label class="font-bold text-gray-800 block mb-2"
|
|
>Username or Email
|
|
<input
|
|
type="text"
|
|
class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
|
|
v-model.trim="user"
|
|
placeholder="Username"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="font-bold text-gray-800 block mb-2"
|
|
>Password
|
|
<input
|
|
type="password"
|
|
class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
|
|
v-model.trim="password"
|
|
placeholder="Password"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<button
|
|
class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
|
|
type="submit"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { ref, toRefs, defineComponent } from "vue";
|
|
import { login as apiLogin, logout as apiLogout } from "../api";
|
|
import router from "../router";
|
|
|
|
export default defineComponent({
|
|
name: "Login",
|
|
props: {
|
|
logout: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
},
|
|
async setup(props: { logout?: string }) {
|
|
const { logout } = toRefs(props);
|
|
const user = ref("");
|
|
const password = ref("");
|
|
async function login() {
|
|
try {
|
|
let loginResp = await apiLogin(user.value, password.value);
|
|
|
|
if (loginResp) {
|
|
router.push({ name: "Home" });
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
if (logout?.value !== undefined) {
|
|
console.log("LOGOUT");
|
|
await apiLogout();
|
|
}
|
|
|
|
return {
|
|
user,
|
|
password,
|
|
login,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|