96 lines
2.7 KiB
Vue
96 lines
2.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const user = ref('')
|
|
const pass = ref('')
|
|
|
|
async function login(ev) {
|
|
ev.preventDefault()
|
|
const api_url = '/api/auth'
|
|
const payload = { username: user.value, password: pass.value }
|
|
const fetch_options = {
|
|
method: 'POST',
|
|
body: JSON.stringify(payload),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
}
|
|
|
|
console.log(user.value)
|
|
console.log(pass.value)
|
|
console.log(api_url)
|
|
console.log(payload)
|
|
console.log(fetch_options)
|
|
|
|
let resp = await fetch(api_url, fetch_options)
|
|
console.log(resp)
|
|
if (resp.ok) {
|
|
let ans = await resp.json()
|
|
console.log(ans)
|
|
|
|
window.location.hash = "/"
|
|
} else {
|
|
user.value = ''
|
|
pass.value = ''
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main class="form-signin w-100 m-auto">
|
|
<form onsubmit="event.preventDefault();">
|
|
<!-- <img class="mb-4" src="../assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> -->
|
|
<svg class="bi me-2" width="72" height="57" role="img" viewBox="0 0 16 16">
|
|
<path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
|
|
<path
|
|
d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5h5.5a.5.5 0 0 1 0 1H10A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5H.5a.5.5 0 0 1 0-1H6A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1zm6 7.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5z" />
|
|
</svg>
|
|
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
|
|
|
|
<div class="form-floating">
|
|
<input type="email" v-model="user" class="form-control" id="floatingInput" placeholder="username">
|
|
<label for="floatingInput">Username</label>
|
|
</div>
|
|
<div class="form-floating">
|
|
<input type="password" v-model="pass" class="form-control" id="floatingPassword" placeholder="Password">
|
|
<label for="floatingPassword">Password</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<a href="#/signup">Sign up</a>
|
|
</div>
|
|
|
|
<button type="submit" @click="login" class="btn btn-primary w-100 py-2">Sign in</button>
|
|
|
|
<p class="mt-5 mb-3 text-body-secondary">© 2023</p>
|
|
</form>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* html,
|
|
body {
|
|
height: 100%;
|
|
} */
|
|
|
|
.form-signin {
|
|
max-width: 330px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.form-signin .form-floating:focus-within {
|
|
z-index: 2;
|
|
}
|
|
|
|
.form-signin input[type="email"] {
|
|
margin-bottom: -1px;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.form-signin input[type="password"] {
|
|
margin-bottom: 10px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
</style>
|