forked from noxious/client
57 lines
2.5 KiB
Vue
57 lines
2.5 KiB
Vue
<template>
|
|
<!-- @TODO this must be shown over the login screen -->
|
|
<div class="relative max-lg:h-dvh flex flex-row-reverse">
|
|
<ResetPassword :isModalOpen="isPasswordResetFormShown" @close="() => (isPasswordResetFormShown = false)" />
|
|
<div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
|
|
<div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
|
|
<div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
|
|
<div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
|
|
<!-- <img src="/assets/tlogo.png" class="mb-10 w-52" alt="Noxious logo" />-->
|
|
<div class="relative">
|
|
<img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
|
|
<img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
|
|
|
|
<!-- Login Form -->
|
|
<LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />
|
|
|
|
<!-- Register Form -->
|
|
<RegisterForm v-if="currentForm === 'register' && !doesUrlHaveToken" @switchToLogin="switchToLogin" />
|
|
|
|
<!-- New Password Form -->
|
|
<NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="switchToLogin" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
import { useCookies } from '@vueuse/integrations/useCookies'
|
|
import LoginForm from '@/components/login/LoginForm.vue'
|
|
import RegisterForm from '@/components/login/RegisterForm.vue'
|
|
import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
|
|
import ResetPassword from '@/components/login/ResetPasswordModal.vue'
|
|
|
|
const isPasswordResetFormShown = ref(false)
|
|
const doesUrlHaveToken = ref(window.location.hash !== '')
|
|
|
|
const gameStore = useGameStore()
|
|
const currentForm = ref('login')
|
|
|
|
function switchToLogin() {
|
|
currentForm.value = 'login'
|
|
doesUrlHaveToken.value = false
|
|
}
|
|
|
|
// automatic login because of development
|
|
onMounted(async () => {
|
|
const token = useCookies().get('token')
|
|
if (token) {
|
|
gameStore.setToken(token)
|
|
gameStore.initConnection()
|
|
}
|
|
})
|
|
</script>
|