forked from noxious/client
Moved login partial components
This commit is contained in:
@ -29,10 +29,10 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useCookies } from '@vueuse/integrations/useCookies'
|
||||
import LoginForm from '@/components/screens/partials/login/LoginForm.vue'
|
||||
import RegisterForm from '@/components/screens/partials/login/RegisterForm.vue'
|
||||
import NewPasswordForm from '@/components/screens/partials/login/NewPasswordForm.vue'
|
||||
import ResetPassword from '@/components/screens/partials/login/ResetPasswordModal.vue'
|
||||
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 = window.location.hash.includes('#')
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<form @submit.prevent="loginFunc" class="relative px-6 py-11">
|
||||
<div class="flex flex-col gap-5 p-2 mb-8 relative">
|
||||
<div class="w-full grid gap-3 relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
|
||||
<div class="relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
|
||||
<button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
|
||||
</div>
|
||||
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
|
||||
</div>
|
||||
<button @click.stop="() => emit('openResetPasswordModal')" type="button" class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
|
||||
<button class="btn-cyan px-0 xs:w-full" 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-gray-300"></div>
|
||||
<div class="w-36 h-full bg-gray-300"></div>
|
||||
<div class="w-0.5 h-full bg-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-8">
|
||||
<p class="m-0 text-center">Don't have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="() => emit('switchToRegister')">Sign up</button></p>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { login } from '@/services/authentication'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useCookies } from '@vueuse/integrations/useCookies'
|
||||
|
||||
const emit = defineEmits(['openResetPasswordModal', 'switchToRegister'])
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const loginError = ref('')
|
||||
const showPassword = ref(false)
|
||||
|
||||
// automatic login because of development
|
||||
onMounted(async () => {
|
||||
const token = useCookies().get('token')
|
||||
if (token) {
|
||||
gameStore.setToken(token)
|
||||
gameStore.initConnection()
|
||||
}
|
||||
})
|
||||
|
||||
async function loginFunc() {
|
||||
// check if username and password are valid
|
||||
if (username.value === '' || password.value === '') {
|
||||
loginError.value = 'Please enter a valid username and password'
|
||||
return
|
||||
}
|
||||
|
||||
// send login event to server
|
||||
const response = await login(username.value, password.value)
|
||||
|
||||
if (response.success === undefined) {
|
||||
loginError.value = response.error
|
||||
return
|
||||
}
|
||||
gameStore.setToken(response.token)
|
||||
gameStore.initConnection()
|
||||
return true // Indicate success
|
||||
}
|
||||
</script>
|
||||
@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<form @submit.prevent="newPasswordFunc" class="relative px-6 py-11">
|
||||
<div class="flex flex-col gap-5 p-2 mb-8 relative">
|
||||
<div class="w-full grid gap-3 relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
|
||||
<button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
|
||||
<span v-if="newPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ newPasswordError }}</span>
|
||||
</div>
|
||||
<button class="btn-cyan xs:w-full" type="submit">Change password</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-gray-300"></div>
|
||||
<div class="w-36 h-full bg-gray-300"></div>
|
||||
<div class="w-0.5 h-full bg-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-8">
|
||||
<p class="m-0 text-center"><button class="text-cyan-300 text-base p-0" @click.prevent="cancelNewPassword">Back to login</button></p>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { newPassword } from '@/services/authentication'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useCookies } from '@vueuse/integrations/useCookies'
|
||||
|
||||
const emit = defineEmits(['switchToLogin'])
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const password = ref('')
|
||||
const newPasswordError = ref('')
|
||||
const showPassword = ref(false)
|
||||
|
||||
// automatic login because of development
|
||||
onMounted(async () => {
|
||||
const token = useCookies().get('token')
|
||||
if (token) {
|
||||
gameStore.setToken(token)
|
||||
gameStore.initConnection()
|
||||
}
|
||||
})
|
||||
|
||||
async function newPasswordFunc() {
|
||||
// check if username and password are valid
|
||||
if (password.value === '') {
|
||||
newPasswordError.value = 'Please enter a password'
|
||||
return
|
||||
}
|
||||
|
||||
const urlToken = window.location.hash.split('#')[1]
|
||||
|
||||
// send new password event to server along with the token
|
||||
const response = await newPassword(urlToken, password.value)
|
||||
|
||||
if (response.success === undefined) {
|
||||
newPasswordError.value = response.error
|
||||
return
|
||||
}
|
||||
|
||||
/**
|
||||
* @TODO: #238, this wont work if we redirect to the login page
|
||||
* Find a way to just "close" this screen instead of redirecting
|
||||
*/
|
||||
gameStore.addNotification({
|
||||
title: 'Success',
|
||||
message: 'Password changed successfully'
|
||||
})
|
||||
window.location.href = '/'
|
||||
}
|
||||
|
||||
function cancelNewPassword() {
|
||||
window.location.href = '/'
|
||||
}
|
||||
</script>
|
||||
@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<form @submit.prevent="registerFunc" class="relative px-6 py-11">
|
||||
<div class="flex flex-col gap-5 p-2 mb-8 relative">
|
||||
<div class="w-full grid gap-3 relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="email-register" v-model="email" type="email" name="email" placeholder="Email" required />
|
||||
<div class="relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
|
||||
<button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
|
||||
</div>
|
||||
<span v-if="loginError" class="text-red-200 text-xs -mt-2">{{ loginError }}</span>
|
||||
</div>
|
||||
<button class="btn-cyan xs:w-full" type="submit">Register 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-gray-300"></div>
|
||||
<div class="w-36 h-full bg-gray-300"></div>
|
||||
<div class="w-0.5 h-full bg-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-8">
|
||||
<p class="m-0 text-center">Already have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="() => emit('switchToLogin')">Log in</button></p>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { login, register } from '@/services/authentication'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useCookies } from '@vueuse/integrations/useCookies'
|
||||
|
||||
const emit = defineEmits(['switchToLogin'])
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const email = ref('')
|
||||
const loginError = ref('')
|
||||
const showPassword = ref(false)
|
||||
|
||||
// automatic login because of development
|
||||
onMounted(async () => {
|
||||
const token = useCookies().get('token')
|
||||
if (token) {
|
||||
gameStore.setToken(token)
|
||||
gameStore.initConnection()
|
||||
}
|
||||
})
|
||||
|
||||
async function loginFunc() {
|
||||
// check if username and password are valid
|
||||
if (username.value === '' || password.value === '') {
|
||||
loginError.value = 'Please enter a valid username and password'
|
||||
return
|
||||
}
|
||||
|
||||
// send login event to server
|
||||
const response = await login(username.value, password.value)
|
||||
|
||||
if (response.success === undefined) {
|
||||
loginError.value = response.error
|
||||
return
|
||||
}
|
||||
gameStore.setToken(response.token)
|
||||
gameStore.initConnection()
|
||||
return true // Indicate success
|
||||
}
|
||||
|
||||
async function registerFunc() {
|
||||
// check if username and password are valid
|
||||
if (username.value === '' || email.value === '' || password.value === '') {
|
||||
loginError.value = 'Please enter a valid username, email, and password'
|
||||
return
|
||||
}
|
||||
|
||||
if (email.value === '') {
|
||||
loginError.value = 'Please enter an email'
|
||||
return
|
||||
}
|
||||
|
||||
// send register event to server
|
||||
const response = await register(username.value, email.value, password.value)
|
||||
|
||||
if (response.success === undefined) {
|
||||
loginError.value = response.error
|
||||
return
|
||||
}
|
||||
|
||||
const loginSuccess = await loginFunc()
|
||||
if (!loginSuccess) {
|
||||
loginError.value = 'Login after registration failed. Please try logging in manually.'
|
||||
return
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="true" :modal-width="400" :modal-height="300" :is-resizable="false" @modal:close="() => emit('close')">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Reset Password</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="h-[calc(100%_-_32px)] p-4">
|
||||
<form class="h-full flex flex-col justify-between" @submit.prevent="resetPasswordFunc">
|
||||
<div class="flex flex-col relative">
|
||||
<p>Fill in your email to receive a password reset request.</p>
|
||||
<input type="email" name="email" class="input-field" v-model="email" placeholder="E-mail" />
|
||||
<span v-if="resetPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ resetPasswordError }}</span>
|
||||
</div>
|
||||
<div class="grid grid-flow-col justify-stretch gap-4">
|
||||
<button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click.stop="() => emit('close')">Cancel</button>
|
||||
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-flex items-center justify-center" type="submit">
|
||||
<svg v-if="isLoading" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Send mail
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { resetPassword } from '@/services/authentication'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isLoading = ref(false)
|
||||
const email = ref('')
|
||||
const resetPasswordError = ref('')
|
||||
|
||||
async function resetPasswordFunc() {
|
||||
// check if email is valid
|
||||
if (email.value === '') {
|
||||
resetPasswordError.value = 'Please enter an email'
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
// send reset password event to server
|
||||
const response = await resetPassword(email.value)
|
||||
|
||||
if (response.success === undefined) {
|
||||
resetPasswordError.value = response.error
|
||||
isLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
gameStore.addNotification({
|
||||
title: 'Success',
|
||||
message: 'Password reset email sent'
|
||||
})
|
||||
|
||||
isLoading.value = false
|
||||
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user