diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index e1113c8..99c59b2 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -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>
diff --git a/src/stores/gameStore.ts b/src/stores/gameStore.ts
index db53fa5..ab8ff03 100644
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@@ -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)