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

Adjusted login validation

Browse Source
This commit is contained in:
Colin Kallemein 2024-10-04 22:31:16 +02:00
parent 8c3a488e7d
commit 15442764c2
2 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/screens/Login.vue
View File

@ -8,12 +8,14 @@
<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">
<!-- Login Form -->
<form v-show="switchForm === 'login'" @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>
<span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</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>
@ -26,7 +28,30 @@
</div>
</div>
<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>
<p class="m-0 text-center">Don't have an account? <button ref="toggleRegister" class="text-cyan-50 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
</div>
</form>
<!-- Register Form -->
<form v-show="switchForm === 'register'" @submit.prevent="registerFunc" 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="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</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">Register</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="pt-8">
<p class="m-0 text-center">Already have an account? <button class="text-cyan-50 text-base p-0" @click.prevent="switchForm = 'login'">Log in</button></p>
</div>
</form>
</div>
@ -44,9 +69,7 @@ import { useCookies } from '@vueuse/integrations/useCookies'
const gameStore = useGameStore()
const username = ref('')
const password = ref('')
let formError = false
let notification = ''
const switchForm = ref('login')
// automatic login because of development
onMounted(async () => {
const token = useCookies().get('token')
@ -59,8 +82,7 @@ onMounted(async () => {
async function loginFunc() {
// check if username and password are valid
if (username.value === '' || password.value === '') {
notification = 'Please enter a valid username and password'
formError = true
gameStore.setLoginMessage('Please enter a valid username and password')
return
}
@ -68,12 +90,9 @@ async function loginFunc() {
const response = await login(username.value, password.value)
if (response.success === undefined) {
notification = response.error
formError = true
gameStore.setLoginMessage(response.error)
return
}
console.log(formError)
gameStore.setToken(response.token)
gameStore.initConnection()
return true // Indicate success
@ -82,8 +101,7 @@ async function loginFunc() {
async function registerFunc() {
// check if username and password are valid
if (username.value === '' || password.value === '') {
notification = 'Please enter a valid username and password'
formError = true
gameStore.setLoginMessage('Please enter a valid username and password')
return
}
@ -91,15 +109,13 @@ async function registerFunc() {
const response = await register(username.value, password.value)
if (response.success === undefined) {
notification = response.error
formError = true
gameStore.setLoginMessage(response.error)
return
}
const loginSuccess = await loginFunc()
if (!loginSuccess) {
notification = 'Login after registration failed. Please try logging in manually.'
formError = true
gameStore.setLoginMessage('Login after registration failed. Please try logging in manually.')
}
}
</script>

4
src/stores/gameStore.ts
View File

@ -7,6 +7,7 @@ import { useCookies } from '@vueuse/integrations/useCookies'
export const useGameStore = defineStore('game', {
state: () => {
return {
loginMessage: null as string | null,
notifications: [] as Notification[],
assets: [] as Asset[],
token: '' as string | null,
@ -31,6 +32,9 @@ export const useGameStore = defineStore('game', {
}
},
actions: {
setLoginMessage(message: string | null) {
this.loginMessage = message
},
addNotification(notification: Notification) {
if (!notification.id) {
notification.id = Math.random().toString(16)