tiradoe/movie-night-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated login

Browse source
This commit is contained in:
Edward Tirado Jr 2025-04-06 15:42:57 -05:00
parent dfc0f719e6
commit e335601ab8
1 changed files with 55 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/pages/index.vue
View file

@ -2,31 +2,53 @@
<div> <div>
<div class="p-5 movie-card neon-border"> <div class="p-5 movie-card neon-border">
<h3 class="bloodseeker mb-5">Login</h3> <h3 class="bloodseeker mb-5">Login</h3>
<form class="grid p-1 p-sm-5" method="post" name="login-form" v-on:keyup.enter="login"> <form
class="grid p-1 p-sm-5"
method="post"
name="login-form"
v-on:keyup.enter="login"
>
<div class="mx-auto"> <div class="mx-auto">
<!-- USERNAME --> <!-- USERNAME -->
<div class="row pb-5"> <div class="row pb-5">
<label class="fw-bold pb-1 mx-0 px-0" for="username">Username</label><br/> <label class="fw-bold pb-1 mx-0 px-0" for="username">Username</label
<input id="username" class="p-2 rounded" placeholder="username" type="text"/> ><br />
<input
id="username"
class="p-2 rounded"
placeholder="username"
type="text"
/>
</div> </div>
<!-- PASSWORD --> <!-- PASSWORD -->
<div class="row"> <div class="row">
<label class="fw-bold pb-1 px-0" for="password">Password</label><br/> <label class="fw-bold pb-1 px-0" for="password">Password</label
<input id="password" class="p-2 rounded" placeholder="password" type="password"/> ><br />
<input
id="password"
class="p-2 rounded"
placeholder="password"
type="password"
/>
</div> </div>
</div> </div>
<!-- SUBMIT BUTTON --> <!-- SUBMIT BUTTON -->
<div class="mx-auto"> <div class="mx-auto">
<button class="btn my-5 p-3 rounded" type="button" @click="login">Submit</button> <button class="btn my-5 p-3 rounded" type="button" @click="login">
Submit
</button>
</div> </div>
<div class="mx-auto pt-5"> <div class="mx-auto pt-5">
<img id="password-incorrect" alt="password-incorrect" class="hidden" <img
src="https://i.imgur.com/6pXxxyZ.gif"/> id="password-incorrect"
alt="password-incorrect"
class="hidden"
src="https://i.imgur.com/6pXxxyZ.gif"
/>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</template> </template>
@ -36,19 +58,21 @@ export default {
methods: { methods: {
login: async function (e) { login: async function (e) {
const config = useRuntimeConfig(); const config = useRuntimeConfig();
e.preventDefault() e.preventDefault();
document.getElementById("password-incorrect").classList.add("hidden") document.getElementById("password-incorrect").classList.add("hidden");
let username = document.getElementById("username").value; let username = document.getElementById("username").value;
let password = document.getElementById("password").value; let password = document.getElementById("password").value;
let response = await fetch(`${config.public.apiURL}/auth/login`, { let response = await fetch(`${config.public.apiURL}/auth/login/`, {
method: "POST", method: "POST",
body: JSON.stringify({username: username, password: password}), body: JSON.stringify({ username: username, password: password }),
headers: {"Content-type": "application/json"} headers: { "Content-type": "application/json" },
}) })
.then(response => { .then((response) => {
if (!response.ok) { if (!response.ok) {
document.getElementById("password-incorrect").classList.remove("hidden") document
.getElementById("password-incorrect")
.classList.remove("hidden");
return false; return false;
} }
@ -56,9 +80,9 @@ export default {
//window.location = "/admin" //window.location = "/admin"
}) })
.catch(err => { .catch((err) => {
return false return false;
}) });
if (response) { if (response) {
let token = useCookie("token", { let token = useCookie("token", {
@ -66,19 +90,17 @@ export default {
}); });
token.value = response.token; token.value = response.token;
return navigateTo("/admin") return navigateTo("/admin");
}
} }
}, },
},
mounted() { mounted() {
let token = useCookie("token"); let token = useCookie("token");
if (token.value) { if (token.value) {
navigateTo("/admin") navigateTo("/admin");
} }
} },
} };
</script> </script>
<style scoped> <style scoped></style>
</style>