noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP login screen

Browse Source
This commit is contained in:
Colin Kallemein
2024-10-04 20:52:21 +02:00
parent f51cb839bf
commit 8c3a488e7d
7 changed files with 109 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/screens/Login.vue
View File

@ -1,28 +1,36 @@
<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 class="relative">
<div class="bg-gradient-to-r from-gray-50 to-transparent w-1/2 h-dvh absolute right-0 top-0 z-10"></div>
<div class="bg-[url('/assets/login/login-bg.png')] w-1/2 h-dvh absolute right-0 top-0 bg-no-repeat bg-cover bg-center"></div>
<div class="bg-gray-50 z-20 w-1/2 h-dvh relative">
<div class="w-full h-dvh flex items-center justify-center flex-col px-8">
<img src="/assets/login/nq-logo-v1.png" class="mb-10" />
<div class="relative">
<img src="/assets/login/login-box-outer.svg" class="absolute w-full h-full" />
<img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" />
<form @submit.prevent="loginFunc" class="relative p-10">
<div class="flex flex-col gap-6 p-2 mb-8 relative">
<div class="w-full grid gap-2 mb-9 relative">
<input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
<input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<span v-if="formError" class="text-red-200 text-sm absolute top-full mt-1">{{ notification }}</span>
</div>
<button class="text-right text-cyan-50 text-base">Forgot password?</button>
<button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Play now</button>
<!-- Divider shape -->
<div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
<div class="w-0.5 h-full bg-white/30"></div>
<div class="w-36 h-full bg-white/30"></div>
<div class="w-0.5 h-full bg-white/30"></div>
</div>
</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 class="pt-8">
<p class="m-0 text-center">Don't have an account? <button class="text-cyan-50 text-base p-0" @click.prevent="registerFunc">Sign up</button></p>
</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>
</form>
</div>
</form>
</div>
</div>
</div>
</template>
@ -36,6 +44,8 @@ import { useCookies } from '@vueuse/integrations/useCookies'
const gameStore = useGameStore()
const username = ref('')
const password = ref('')
let formError = false
let notification = ''
// automatic login because of development
onMounted(async () => {
@ -49,7 +59,8 @@ onMounted(async () => {
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' })
notification = 'Please enter a valid username and password'
formError = true
return
}
@ -57,10 +68,12 @@ async function loginFunc() {
const response = await login(username.value, password.value)
if (response.success === undefined) {
gameStore.addNotification({ message: response.error })
notification = response.error
formError = true
return
}
console.log(formError)
gameStore.setToken(response.token)
gameStore.initConnection()
return true // Indicate success
@ -69,7 +82,8 @@ async function loginFunc() {
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' })
notification = 'Please enter a valid username and password'
formError = true
return
}
@ -77,13 +91,15 @@ async function registerFunc() {
const response = await register(username.value, password.value)
if (response.success === undefined) {
gameStore.addNotification({ message: response.error })
notification = response.error
formError = true
return
}
const loginSuccess = await loginFunc()
if (!loginSuccess) {
gameStore.addNotification({ message: 'Login after registration failed. Please try logging in manually.' })
notification = 'Login after registration failed. Please try logging in manually.'
formError = true
}
}
</script>