forked from noxious/client
90 lines
3.5 KiB
Vue
90 lines
3.5 KiB
Vue
<template>
|
|
<div class="bg-gray-300">
|
|
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
|
|
<div class="z-20 w-full h-dvh flex items-center justify-between flex-col relative">
|
|
<div class="filler"></div>
|
|
<h1 class="mt-28 text-center text-6xl">NEW QUEST</h1>
|
|
<form @submit.prevent="loginFunc">
|
|
<div class="my-20 mx-0 w-full flex flex-col gap-6">
|
|
<div class="w-full grid gap-4">
|
|
<div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
|
|
<label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
|
|
<input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
|
|
</div>
|
|
<div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
|
|
<label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
|
|
<input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center sm:gap-4 gap-2">
|
|
<button class="btn-cyan py-2 px-0 min-w-24" type="submit"><span class="m-auto">PLAY</span></button>
|
|
<button class="btn-cyan py-2 px-0 min-w-24" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
|
|
<button class="btn-cyan py-2 px-0 min-w-24"><span class="m-auto">CREDITS</span></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { login, register } from '@/services/authentication'
|
|
import { useGameStore } from '@/stores/game'
|
|
import { useCookies } from '@vueuse/integrations/useCookies'
|
|
|
|
const gameStore = useGameStore()
|
|
const username = ref('')
|
|
const password = ref('')
|
|
|
|
// automatic login because of development
|
|
onMounted(async () => {
|
|
const token = useCookies().get('token')
|
|
if (token) {
|
|
gameStore.setToken(token)
|
|
gameStore.initConnection()
|
|
}
|
|
})
|
|
|
|
async function loginFunc() {
|
|
// check if username and password are valid
|
|
if (username.value === '' || password.value === '') {
|
|
gameStore.addNotification({ message: 'Please enter a valid username and password' })
|
|
return
|
|
}
|
|
|
|
// send login event to server
|
|
const response = await login(username.value, password.value)
|
|
|
|
if (response.success === undefined) {
|
|
gameStore.addNotification({ message: response.error })
|
|
return
|
|
}
|
|
|
|
gameStore.setToken(response.token)
|
|
gameStore.initConnection()
|
|
return true // Indicate success
|
|
}
|
|
|
|
async function registerFunc() {
|
|
// check if username and password are valid
|
|
if (username.value === '' || password.value === '') {
|
|
gameStore.addNotification({ message: 'Please enter a valid username and password' })
|
|
return
|
|
}
|
|
|
|
// send register event to server
|
|
const response = await register(username.value, password.value)
|
|
|
|
if (response.success === undefined) {
|
|
gameStore.addNotification({ message: response.error })
|
|
return
|
|
}
|
|
|
|
const loginSuccess = await loginFunc()
|
|
if (!loginSuccess) {
|
|
gameStore.addNotification({ message: 'Login after registration failed. Please try logging in manually.' })
|
|
}
|
|
}
|
|
</script>
|