diff --git a/public/assets/login/login-bg.png b/public/assets/login/login-bg.png new file mode 100644 index 0000000..2eb397e Binary files /dev/null and b/public/assets/login/login-bg.png differ diff --git a/public/assets/login/login-box-inner.svg b/public/assets/login/login-box-inner.svg new file mode 100644 index 0000000..2597751 --- /dev/null +++ b/public/assets/login/login-box-inner.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/login/login-box-outer.svg b/public/assets/login/login-box-outer.svg new file mode 100644 index 0000000..87f051b --- /dev/null +++ b/public/assets/login/login-box-outer.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/login/nq-logo-v1.png b/public/assets/login/nq-logo-v1.png new file mode 100644 index 0000000..3e349f6 Binary files /dev/null and b/public/assets/login/nq-logo-v1.png differ diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index a1ee153..5df1cc2 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -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; } } diff --git a/src/screens/Login.vue b/src/screens/Login.vue index 8b55899..e1113c8 100644 --- a/src/screens/Login.vue +++ b/src/screens/Login.vue @@ -1,28 +1,36 @@ @@ -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 } } diff --git a/tailwind.config.js b/tailwind.config.js index 6389f61..6db6852 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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' } }