Liam Pietralla
f577617b4d
All checks were successful
Build and Publish / Build Yale Access Backend (push) Successful in 28s
Build and Publish / Build Yale Access Frontend (push) Successful in 47s
Build and Publish / Push Yale Access Backend Docker Image (push) Successful in 9s
Build and Publish / Push Yale Access Frontend Docker Image (push) Successful in 10s
67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<script setup lang='ts'>
|
|
import { ref } from 'vue';
|
|
import { type ApiResponse } from '~/types/api-response';
|
|
|
|
const password = ref('');
|
|
const passwordError = ref('');
|
|
const authenticated = useCookie<boolean>('authenticated');
|
|
const runtimeConfig = useRuntimeConfig();
|
|
|
|
const handleLogin = async (event: Event) => {
|
|
// Prevent default form submission
|
|
event.preventDefault();
|
|
|
|
// Reset the error
|
|
passwordError.value = '';
|
|
|
|
// Send a request to the api to login
|
|
const response = await fetch(`${runtimeConfig.public.apiBaseUrl}/api/Authentication/login`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: `"${password.value}"`
|
|
});
|
|
|
|
// Parse the response
|
|
const apiResponse = await response.json() as ApiResponse<boolean>;
|
|
|
|
if (apiResponse.success) {
|
|
// If the response was successful, login and redirect to the home page
|
|
authenticated.value = true;
|
|
navigateTo('/');
|
|
} else {
|
|
// Otherwise, set the error
|
|
passwordError.value = apiResponse.error ?? 'Unknown error';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-zinc-800 text-slate-300 text-center w-full md:w-96 rounded-md">
|
|
<h1 class="text-7xl mt-5">Yale</h1>
|
|
<div>
|
|
<h4 class="hr text-2xl mt-3">User Access</h4>
|
|
</div>
|
|
|
|
<form @submit="handleLogin">
|
|
<YaleFormInput type="password" v-model="password" placeholder="Password" class="block mt-10 w-5/6 mx-auto" />
|
|
<p class="mt-3 w-5/6 mx-auto text-red-600" v-if="passwordError">{{ passwordError }}</p>
|
|
<YaleButton type="submit" class="mb-8 mt-3 w-5/6 mx-auto ">Login</YaleButton>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.hr {
|
|
display: inline-block;
|
|
}
|
|
|
|
.hr::after {
|
|
content: '';
|
|
display: block;
|
|
border-top: 2px solid theme('colors.slate.300');
|
|
margin-top: .1rem;
|
|
}
|
|
</style> |