WIP login screen
This commit is contained in:
parent
f51cb839bf
commit
8c3a488e7d
BIN
public/assets/login/login-bg.png
Normal file
BIN
public/assets/login/login-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
23
public/assets/login/login-box-inner.svg
Normal file
23
public/assets/login/login-box-inner.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 301 KiB |
23
public/assets/login/login-box-outer.svg
Normal file
23
public/assets/login/login-box-outer.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 400 KiB |
BIN
public/assets/login/nq-logo-v1.png
Normal file
BIN
public/assets/login/nq-logo-v1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -3,7 +3,7 @@
|
||||
@tailwind utilities;
|
||||
|
||||
// Fonts
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
|
||||
//Globals
|
||||
|
||||
@ -26,14 +26,14 @@ h5,
|
||||
h6,
|
||||
button,
|
||||
a {
|
||||
@apply font-titles text-white font-medium m-0;
|
||||
@apply font-default text-gray-500 font-medium m-0;
|
||||
}
|
||||
|
||||
p,
|
||||
span,
|
||||
li,
|
||||
label {
|
||||
@apply font-default text-white;
|
||||
@apply font-default text-gray-500;
|
||||
}
|
||||
|
||||
button,
|
||||
@ -87,20 +87,20 @@ button {
|
||||
@apply text-center;
|
||||
|
||||
&.btn-cyan {
|
||||
@apply bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20;
|
||||
@apply bg-cyan drop-shadow-20 text-white;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
@apply bg-cyan;
|
||||
@apply bg-cyan/50;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-bordeaux {
|
||||
@apply bg-bordeaux/50 border border-solid border-white/25 rounded drop-shadow-20;
|
||||
@apply bg-bordeaux drop-shadow-20;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
@apply bg-bordeaux;
|
||||
@apply bg-bordeaux/50;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -4,9 +4,11 @@ export default {
|
||||
theme: {
|
||||
fontFamily: {
|
||||
'titles': ['Poppins', 'serif'],
|
||||
'default': ['Inter', 'serif']
|
||||
'default': ['Quicksand', 'serif']
|
||||
},
|
||||
backgroundSize: {
|
||||
'cover': 'cover',
|
||||
'contain': 'contain',
|
||||
'30px': '30px'
|
||||
},
|
||||
screens: {
|
||||
@ -50,7 +52,8 @@ export default {
|
||||
red: {
|
||||
DEFAULT: '#d50000',
|
||||
50: '#d50000',
|
||||
100: '#b30000'
|
||||
100: '#b30000',
|
||||
200: '#F44747'
|
||||
},
|
||||
bordeaux: {
|
||||
DEFAULT: '#800020',
|
||||
@ -68,18 +71,18 @@ export default {
|
||||
DEFAULT: '#9841e6'
|
||||
},
|
||||
cyan: {
|
||||
DEFAULT: '#368f8b',
|
||||
50: '#00b3b3',
|
||||
100: '#368f8b',
|
||||
DEFAULT: '#0D6D69',
|
||||
50: '#5AA39F',
|
||||
100: '#0D6D69',
|
||||
200: '#376362'
|
||||
},
|
||||
gray: {
|
||||
DEFAULT: '#7f7f7f',
|
||||
50: '#d3d3d3',
|
||||
100: '#7f7f7f',
|
||||
200: '#696969',
|
||||
300: '#313638',
|
||||
500: '#778899',
|
||||
DEFAULT: '#282828',
|
||||
50: '#0C0C0C',
|
||||
100: '#282828',
|
||||
200: '#454442',
|
||||
300: '#888888',
|
||||
500: '#B4B4B4',
|
||||
600: '#B1B2B5'
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user